Got my Responsive Web certificate, would love feedback

Code Feedback
1

Hey campers, can you please give me feedback on my projects. See below:

Build a Tribute Page: https://codepen.io/Mbongzz/pen/abmgVwW

Build a Survey Form: https://codepen.io/Mbongzz/pen/rNMXNLO

Build a Product Landing Page: https://codepen.io/Mbongzz/pen/MWbgryy

Build a Technical Documentation Page: https://codepen.io/Mbongzz/pen/ExNxQod

Build a Personal Portfolio Webpage: https://codepen.io/Mbongzz/pen/JjbJveK

2

Pages look good @Mbongi. Some things to revisit;

tribute

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
  • 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.
  • In addition to the syntax errors, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

survey form

  • Run your HTML code through the W3C validator (linked above)
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Your form says age is an optional field but the user is required to enter it. That’s a bad UX.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
  • Just a side note, don’t try and replicate the sample project. The instructions say yours should be “functionally similar” and “give it your own personal style”

prod landing

  • Run your HTML code through the W3C validator (linked above)
    • 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.

tech doc

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
  • Run your HTML code through the W3C validator (linked above)
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Side note, it would have been nice if your code snippets weren’t on one line but actually looked like formatted code.

portfolio

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator (linked above)
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the ampersand to the HTML entity to be compliant with the reserved characters standard.
  • Keep all your styling external. Do not use in-line styling.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
  • Your project screenshots all show as broken images. User doesn’t have access to your dropbox account.
    • 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
1 Like
3

@Roma Thank you . The learning never stops.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.