Saradha Product Landing Page

Code Feedback
1

I am a beginner. Kindly provide me your feedback on the Product Landing Page Challenge that I have just completed and help me improve better. Thank you.

2

Hello @saradhamuthukumaran,
Welcome to the community.
Your have done a really good job with your project as far as large screen sizes are considered, though if i were to nitpick, you can add a bit of styling to your contact section and center the text in the about section.

However, the issue with your project is on the small-screen devices, i.e your project is not responsive. I will suggest you to make it responsive. Refer to the grid and flexbox section of the curriculum on how to make the layouts responsive.

Hope this helps.

3

Thank you so much @aditya_p for your feedback. I will work on the suggestions and make the layouts responsive.

1 Like
4

Welcome to the forums @saradhamuthukumaran. Some additional things to revisit;

  • 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • Mainly mentioning this because you call a fonts, “Parkavenue” (though I think it’s “Park Avenue”), “Lucidatypewriter” (though I think it’s "Lucida Sans Typewriter) but you neither link nor import either. You may have these loaded on your machine. Most may not.
  • Run your HTML code through the W3C validator.
    • There are coding errors you should address.
  • Check that the email field is populated correctly when the submit button is clicked. Throw an error if not.
    • You learned how to do this when you did the survey form.
  • Don’t use <br> to force spacing or line breaks. Use CSS
1 Like
5

Thank you @Roma for the feedback. I will incorporate your suggestions in the code.

6

Hi @aditya_p,

I have made few changes in the code to make the page responsive. Could you please check now? Thanks in advance.

7

Your responsiveness only works for the text. But it should works also for the whole design.
Few points to notice.

  1. Your Navigation-bar is okay. It would be better if the font-size is bigger in mobile size.
  2. You should more care about padding and margin.
  3. In your Menu section. The column should be higher lower if the resolution is lower.

For improving you should check different websites on different resolutions by chrome -> developer tools [F12] -> Toggle device toolbar [It left to the element]

1 Like
8

Thank you so much @abhishek.baliyan.007 for the suggestions. I will look into it.