Projects Feedback for a passionate developer from Brazil

Code Feedback
1

Hello World! My name is Hugo. I’m a software developer from Brazil. Would appreciate it if you watch some of my projects and give feedback.
I’m learning React right now. So if you want to ask me something feel free to reach me. All my Projects from FreeCodeCamp are available at my CodePen.
I’ve created a collection for all of them. If you want to go to my personal website, you may find links to my LinkedIn, GitHub, and other contacts.

* CodePen Collection for Responsive Web Design Projects

* Personal Portfolio

Thanks!

2

Your pages look good @hugoleonardo.dev. Some things to revisit;

tribute page

  • 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.

survey form

  • 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.
  • Your form says age is optional yet it’s required in order to submit the form.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • Make your form responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on large and smaller screens

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.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form

tech doc

  • 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.
    • You can nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
      Or skip the pre element and do the following in CSS;
code {
  white-space: pre-line;
}

I don’t often comment on someone’s design but maybe rethink how each section starts. When the user clicks a link it’s not obvious where the section starts because the font is the same size as the rest of the text. Would be a better UX if it was maybe h2.

portfolio

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 11/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on large and smaller screens
  • Would have been better rather than just copying the sample bootstrap navbar to make it your own and have it link to different sections in your portfolio
  • Would be nice to include a link to your projects in your portfolio.
    • If you’re unaware, codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
      https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
      or
      https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
3

Hi Roma! Would like to thank you for your time. Well, in fact, I did not check the W3C validator. And forgot to remove some unnecessary tags. Thank you very much to remind me. This is very useful for sure.
I’m gonna check the form too. It is easy to forget such details when you are testing other details. I was also learning to use libraries. Wich will make my life easy when coding responsive pages.
Product page I will remake it with frameworks. As the same with the technical doc page.
The portfolio is not running full tests because I had to change it after it passes. In order to achieve a better result. I need to improve my framework skills.
Thank you so much, again!