Feedback on first 5 challenges

Hello guys,

I’ve finally finished the first challenges (HTML/CSS). I’m really happy with the results considering that I’m just starting. Having said that I would appreciate your most brutal feedback in order for me to improve my coding skills. Enough chit chat, here’s my portfolio:

inside you’ll find access to the other projects.

your input is much appreciated.

Your pages looks good @crstfr.drnt. Some things to revisit;
overall, why not pick a font from Google fonts so that it’s not platform specific. Not everyone runs windoze.

tribute

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Rather than six of the same media queries, utilize one and put all the declarations in it.
    • Side note; none of your media queries is closed.
    • Side note; if you use percentages rather than fixed pixels on your widths you wouldn’t need a media query to make it responsive.
  • Review the lesson about giving meaningful text to links.

survey

  • 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.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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.
    • The one for CSS is good. Use it, there’s something to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Make your page responsive. Screenshot attached at bottom

prod landing

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. There’s a scrollbar on smaller screens as elements fall out of the container.

tech doc

  • 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>’
  • Make the page responsive. On smaller screens there’s a horizontal scrollbar caused by the nav

portfolio

  • 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 are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • It’s a bad UX that the projects sections all seem clickable (because the cursor changes to a pointer) but the only clickable parts are on the titles or anything below that.
  • The page needs to be responsive. Lots of overlap throughout as sections overlap each other on smaller screens. Screenshot attached but it’s only one example.

1 Like

Thanks! i’ll start checking them one by one.
much appreciated.