Tribute and survey form critique

HTML-CSS
#1

I’ve been studying code for a couple of months now and just completed the tribute and survey pages. I’m looking for any feedback to make sure I am on the right track before I continue moving forward. If you have time any and all feedback is appreciated. Don’t be afraid to tear it apart. I just want to learn and get better. Thanks for the help!

Tribute page: https://codepen.io/xGA115xx/pen/eYzmoBg?editors=1100

Survey form: https://codepen.io/xGA115xx/pen/VwjaZax

1 Like
#2

Hey @garretta!

Great job on your first two projects.

General comments:
In codepen you do not need to include the head section and html tags. Codepen provides all of that for you. If you need to include something in the head like a google font or something you can do that in the settings section.

head section
head section1566×1092 113 KB

Comments for the survey form:
I ran your code through the html and css analyzer and there are a few errors that need your attention.

Comments for the tribute page:
I noticed in your css that you will write two different margin properties for the same css selector like this.

 margin: 5px;
  margin-top: 10px;

You could just use the margin shorthand

margin: 10px 5px 5px; /* top, right-left, bottom. */

Hope that helps!

Happy coding!

#3

Welcome to the forums @garretta. Your pages look good. Some things to revisit;
Tribute

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
  • Review the lesson about giving meaningful text to links.
  • Not sure if you noticed but even though you’re using the <strong> tag the text on your page doesn’t render as such. This is because when you imported your font you only selected one weight.
    • When you select a font where you want to display different weights try selecting 400 (normal weight) and 700(bold weight).

When you do that, the dates will be bold the way you expect. Just a suggestion but maybe you’ll want to get rid of the bullet points.

Survey

  • same comment re: codepen providing the boilerplate for you
  • same comment re: run code through the W3C validator
    • you can ignore the warnings about headers if you want
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • If you use percentages when setting widths rather than fixed dimensions it will be responsive. (That is, you wouldn’t need media queries)
#4