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.
@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.
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.
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)
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.
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.
