Hello!
I’d really appreciate some feedback on this:
https://codepen.io/asutherland002/pen/BaBLpYm
I completed the page but I’m not happy with the design. I think I’m overthinking of how I want the design to look, and that might be part of the problem, but feedback on how to approach designing this differently would be really helpful. If there are any future tips on how to approach design too, that would be greatly appreciated.
You need to research what is a valid HTML document. You need to know what goes in the head and what goes in the body. And lists and headings.
Sorry I don’t understand. What does that have to do with my question?
Hi @ASutherland, your page looks good. I’m going to give you some things you may want to revisit first, then I’ll do my best at responding to your question.
- codepen only expects the code you’d put within the
<body> </body>tags in HTML. (No need to include the body tags). For anything you want to add to the<head>click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box. - codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
- There are some things in CSS to clean up the affect how your page displays and a couple of issues in HTML to take care of.
- review the lesson about giving meaningful text to links. It’s a 90’s thing to just have the word ‘here’ as a clickable link.
- Make your page responsive. It does not look good on small screens.
As to your design. You’ll get as many opinions as people that take the time to respond but your design is your design. It’s tough when first starting out to try and do a design that has a smooth flow and is pleasing to the eye. Take a look at some of the other tribute pages here but don’t look at the code. See a flow that you like and try and do your page like that using your own code to do it.
I suggest centering it.
But don’t use tag
instead, go to the css and use
display: block;
margin: 0 auto;
it’s a neat way of centering things
1 Like
Oh dang thats really cool! I didnt know code pen could do that. Thanks for the tip! =)
When you say make the page responsive do you mean adding media queries?
Yes, using media queries is one way. Although for a small, simple page like this there are some style choices you can change that will enable you to make your page responsive without having to use media queries.
As an aside, looking at your code again I noticed you referenced three different fonts in CSS but you never link to them or import them. If you decide to use one or all of them and decide to link to them, the link to your font(s) would go in the box labeled ‘Stuff for <head>’, found after clicking on the ‘Settings’ button.
1 Like