Completed 2 Responsive Web Design Projects - Feedback appreciated

Code Feedback
1

I completed the survey form and the product landing page.

I appreciate any feedback on what I can improve upon. Thanks.

2

Hey there,

great work, I like both!

Survey Form:

  • nothing to add here, it’s clean, simple and responsive!

Product Landing:

  • when I decrease the width of my browser, the navbar content gets cut of
  • when I decrease the width of my browser, the 3 pricing boxes get very small; I think a column layout would increase the readability
  • I think different shades of the background color would increase the visual separation for each section

Keep us posted!

3

Thanks for the feedback.

  • I spent a lot of time working on that yesterday and it’s working fine on Chrome and Firefox on my PC. I don’t know what else to do here. Are you on Safari? I ran into some compatibility issues for Safari when styling the submit button as well.

  • I added the flex-wrap: wrap; property to help with readability on smaller widths.

  • I didn’t want to mess with the background colour so tried separating the sections using white space. Hopefully that does enough. I tried giving each section an individual border, but that looked messy.

4

Some things to revisit @mittalrohit0598;
survey form

  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button.

product page

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There is a repeated HTML coding error you should address.
5

Thanks for the feedback.

survey-form
Fixed

product-landing-page

  • The one test isn’t passing because I replaced <input type="submit"> tag with <button type="submit">. I did it because I read that input tag doesn’t have very good support for styling in some browsers and the submit button wouldn’t work properly on Safari. Using a <button> tag fixed that and I didn’t notice that it caused the test to fail.

  • Thanks for introducing me to this tool. Fixed the errors.

Thanks for your help.