Responsive page using CSS grid and form validation

Community feedback

• 

  Joanna•370

  @JoannaLapaPosted over 2 years ago

  @k-stopczynska my congrats on finishing the challenge!

  I like your solution, it's pretty good, the code is clean, most of your design is similar to attached desktop and mobile files. Good job!

  A couple of details that you can improve:

  The logo:

  • on mobile version is very small - I suggest to make it bigger.
  • on desktop version with height less than 800px looks like the proportions between width and height are are not the same.

  A tablet dimension (like iPad):

  • hero-image size is the same from mobile to tablet version - I feel that you can improve the design here (personally on my project I set the background-position: center and background-size: cover maybe you will find those solutions useful).
  • I feel that the text area could be narrower

  An input .email-form: according to the active state design when I write the email address the font color should be changed on black. Also I suggest to set 'outline: none' than when we click on input we don't see the blue outline. You can achieve those effects by the code below: .email-form:focus { outline: none; color: black; }

  You can set a box-shadow on button to make it more similar to the given design.

  Concerning javascript functionality - one of my personal email address with the end '@g.pl' is recognized as wrong by your regex expression.

  I made also this challenge and if you will find the time to look at my version and write any feedback it would be very nice and helpful.

  Greetings from Poland and happy coding ;) Joanna

  Marked as helpful

  0

  ---

  

  szam•800

  @k-stopczynskaPosted over 2 years ago

  @JoannaLapa thanks for the feedback; )

  You're right at every point, so I'll make the changes.

  Thanks again and happy coding! Klaudia

  0