I want to get some feedback for the responsive web design projects that I've made

Hello everyone… so I completed my responsive web design course and I just thought It would be helpful for me to get some feedback on these projects that I’ve made. Please, share your thoughts on it.

the tribute page
The survey form
Product landing page
technical documentation page
Personal portfolio page

Thank you.

1 Like

@S.Roy, when asking for feedback on projects you will get more eyes-on in the #project-feedback subforum. I’ve taken the liberty of moving this for you.

1 Like

Your pages look good @S.Roy. Some things to revisit;
Overall your pages look good.
General note, 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.

tribute page

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (This is HTML5, you use attributes that are obsolete)
  • 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). (be wary of duplicating property: value; pairs, it can make maintenance difficult)

survey form

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/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).
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Change the cursor to a pointer when hovering over the submit button
  • With the color choice it’s hard to see what has focus when tabbing through the form. Use a contrast checker

product landing

  • Use the W3C validator and correct HTML issues. Linked above
  • Use codepen’s validator and correct the CSS issues
  • The navbar should always be at the top of the page. I understand the test passes but the navbar does scroll. This presents a bad UX

tech doc

  • Run HTML code through the W3C validator and correct the errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • On smaller screens, half of the screen is taken up by the nav. There’s a lot of empty space that could be taken away to make it easier to read the body.

portfolio

  • Run HTML code through the W3C validator and correct the issues. Remember, an id must be unique within the document
  • Use codepen’s validator and correct the CSS issues.
  • Codepen creates large and small screenshots of your pens that can be used in your portfolio. Their official documentation explains how to access them.
1 Like

Thank you for the information that you’ve given me. I am new to this and I’ll look through the problems and try to fix them, as you have pointed out.
One thing I have to mention though, for the product landing page I didn’t know that it meant the navbar should always be at the top even when scrolling , maybe I didn’t fully notice but thank you again for the feedback.

Thank you for doing that. :pray: