Newsletter sing-up form

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Hi there, congratulations on completing this challenge. You've done a great work! 🎉

  I would like to share some of my suggestions regarding your solution that might help you improve it.

  • Use the HTML srcset attribute to make the image responsive. This is better as the image does the image resizing by itself and not CSS is needed.

  <picture>
  <source media="(min-width: 50rem)" srcset="./assets/images/illustration-sign-up-desktop.svg" />
  <img src="./assets/images/illustration-sign-up-mobile.svg"/>
  </picture>
  

  How it works. This tag makes use of images with two different dimensions for the specified screen sizes. This will make the website's responsiveness and performance better.

  • The scale effect of the input field on click is a little distracting and inappropriate. Instead, use an outline effect. That is more common for these inputs.

  Hope this is helpful to you 😃

  Marked as helpful

  1

  ---

  

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  @Code-Beaker

  Hi! Thank you for suggestions =) I am aware about the picture tag and srcset attribute in the img tag. But in this work I noticed to late that in different versions the pictures are located on different sides of the text. So I ended up with two img tags. Not a best approach, I know.

  And about input - I often try to add something outside of the template to practice, fun and stuff. Guess that time my creativity let me down =)

  1

  

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Hi, @Alex-Archer-I. I', glad I was able to help you improve your solution.

  This project is a great way to test out your CSS grid and flex knowledge. The different positions of the image can be achieved either by flex or grid. Also, don't hesitate to add your own touch of creativity. Just keep everything balanced!

  1