HTML & CSS Certification Project Feedback

Hi Guys,

I would really appreciate some feedback on some of the projects I have completed for the HTML and CSS certifications. See below:

Technical Documentation Page:

Landing Page:

Survey Form:

Tribute Page:

Any feedback would be greatly appreciated. Thank you so much

  • Ashley

Hey @achristie0319!

A few things.

Remember to keep the FCC test suite on all of your projects.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

For all of the projects you have some errors in the html section that need fixing. Run your code through the html analyzer and go through each of the areas marked with errors.

Also I noticed this formatting in your css for the first 3 projects.

This a little difficult to read. I would suggest adding some spacing like this.

Hope that helps!

Happy coding!

for this suggestion you can just use the auto formatter in codepen - you can also set the pen settings to format on save

Hi @achristie0319. Your pages look okay. It’s easier if you’d have asked for feedback as you created the pages then the same issues wouldn’t keep popping up.
Some things to revisit;

tribute

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • 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.
    • you have elements out of order. Everything the browser renders belongs within the body element.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Review the lesson about giving meaningful text to links.

survey

  • same as above re: keeping the test script
  • same as above re: boilerplate and having elements out of order
  • same as above re: run your HTML code through the W3C validator and address the coding errors
  • same as above re: do not use <br> to force line breaks or spacing
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.

prod landing

  • same as above re: keeping the test script
  • same as above re: boilerplate and having elements out of order
  • same as above re: run your HTML code through the W3C validator and address the coding errors
  • same as above re: do not use <br> to force line breaks or spacing
  • Make the page responsive. There’s a horizontal scrollbar on smaller screens

tech doc

  • same as above re: keeping the test script
  • same as above re: run your HTML code through the W3C validator and address the coding errors
  • same as above re: do not use <br> to force line breaks or spacing
  • Make the page responsive. There’s a horizontal scrollbar on large and smaller screens

Side note: In the HTML and CSS sections of codepen click on the down arrow and then click on the ‘format’ link. It makes reading the code much easier. This is what you should strive for when writing your code.

Thank you so much for taking the time out to look it over. I will make the adjustments. It will help me out moving forward with formatting my code. :smile:

Thank you so much for looking over it. I really appreciate it :smile:

Thank you so much. I will definately use the auto formatter.