Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using CSS Grid

pauleenann 240

@pauleenann

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

What can I do to improve my coding skills? can i use bootstrap for this?

What challenges did you encounter, and how did you overcome them?

I had a hard time making this site responsive because of CSS Grid.

What specific areas of your project would you like help with?

can you help me check if my the way I style this site is correct?

Community feedback

@Bishalsnghd07

Posted

Hi, @pauleenann👋

Congrats for completing this challenge 🎉 and you did a great job👏

I review your code and few adjustments needed to make improvement in your code:

Let's start from JavaScript:

1)When clicked on Dismiss button then, thank you page should get close and revert back to normal form page. Add functionalities into it.

Let's come to HTML part:

2)h1 should be used only once in entire web page, never repeat. Always follow the heading levels like this 👉h1,h2, h3, h4, h5 and h6. By doing this changes your semantic HTML will improved.

Let's come to CSS part:

3)Never ever use height and width directly in your body tag or in main landmark. It will only break the responsiveness of the layout, which you are doing. And you center the layout in body tag, that will not work effectively. Instead of that, you can use min-height rather than height. I will giving you a one insight, If you carefully analyse the behaviour of sites then you will realise or identify that sites are by default responsive by adding width and height into it, you are preventing the responsive and original size of the layout. That's why never recommend to use height and width in the body tag. In this project it is negligible but in future when you work in 3 to 4 layouts in single page, then you will get disaster result, your layout will break hazardly. So, I will recommend to use min-height always in the body tag and it is a best practice.

Hope, this tips will help you with your future projects too!

Happy Coding❤️

Marked as helpful

0

pauleenann 240

@pauleenann

Posted

Thank you so much! @Bishalsnghd07

0
pauleenann 240

@pauleenann

Posted

I have updated my code. Thank you for your help! @Bishalsnghd07

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord