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

Intro Sign Up w/ GRID

@paulaabro

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Still learning grid

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Paula, well done here in practicing what you learned! 🙂 In terms of feedback, I just have some quick comments:

  1. I think this was done well on the whole, especially in using grid areas! For the desktop view, instead of separating each item, I probably would have grouped the title and description together. This way, it might be possible to make the text part vertically centered in relation with the form like the design.

  2. Right now at around the breakpoint before the mobile view changes to desktop view, the form is looking pretty big! Instead of using just width: 87vw for the width in the main container, try width: min(87vw, 600px) so that the container won't stretch past a certain width, which in my example is 600px, but you can change that to your liking. Same thing goes for the desktop view when the breakpoint occurs; you can try something like width: min(87vw, 1100px).

  3. I'm viewing this on an average-sized laptop (basically not a big screen), and at desktop view, the top part of the promo is touching the top of the window, so maybe you can try adding some margin to prevent the component from touching the browser sides.

Great work here, and keep going!!

Marked as helpful

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