Responsive page using HTML, CSS Flexbox and Javascript

Community feedback

• 

  Aryarishi Sikdar•270

  @ArryBlackPosted 6 months ago

  Hi, I like the approach you have taken of using a single HTML page, I was thinking of a similar approach, but ended up opting for a separate success page. The site looks great, great job on the challenge!

  Here are a few things I would like to point out that can improve your solution:

  1. On the success page, you can dynamically add the user's email instead of the placeholder, using JavaScript like given in the design specifics. You can use textContent to display the value of the email input.
  2. Add the hover states for the buttons on larger screens, including the change in background color and changing the cursor into a pointer to make the buttons more intuitive.
  3. To match the design specifications, you can add the background color and color of the error state in the input box.
  4. The site is breaking slightly at the smaller screens approximately from 376px to 768px. You can remove the media query for min-width:376px, as I assume that is causing the issue, and you added the illustration for the desktop version in that query. In my solution, for responsiveness I used a single media query at somewhere around 700 pixels. I gave the card a width of 80% for those awkward medium screens and gave it an appropriate max-width, achieving a look close to the design specs. You can go for a similar approach.

  Once again, a great job on the challenge! If you get the time, please check and provide some feedback on my solution for the same challenge. Happy coding!

  0