Newsletter sign up with success message

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 2 months ago

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

  I have visited your live site URL and checked your source code. I found some areas where you can possibly improve. Let me share some of my suggestions regarding your solution.

  • Split your CSS into multiple files to keep it cleaner. You can have different files to store fonts, variables, etc. Here's a simple example:

  style.css
  variables.css
  fontImports.css
  

  As a side note, while working on larger projects, you will usually split your CSS into many files.

  • Disable the default validation done by the browser. When entering an email without the @ symbol, the browser gives the invalid popup. If you're using JS to validate your form, then this will probably be useless. Add the novalidate attribute to the form tag to disable it.
  • It looks like the input and the button doesn't use the Roboto font. You can fix that and make it better as well.
  • In the assets folder, you will find two versions of the cover image.
    • one for desktop screens
    • one for mobile screens You have to use the picture element along with the srcset attribute on the source tag. Here's an example for this method:

  <picture>
  <source media="(min-width: 50rem)" srcset="folder/desktopImage.jpg"/>
  <img src="folder/mobileImage.jpg" />
  </picture>
  

  This benefits the performance of the website as you don't have to load both of the images and make use of CSS to swap them. Everything is done by the HTML itself.

  I hope you found them helpful to you 😄

  Marked as helpful

  0

  ---

  

  Temesgen Adane•270

  @temesgen-982Posted 2 months ago

  • I used novalidate attribute on the form element and it works better. I was considering turning it off earlier but I thought it could help in some way.
  • I think the font family is working now for the button and input
  • The thing with using <picture> element for responsive image is it won't sense resize. It will load the right picture for the screen size but if I resize the screen it won't sense it. So I thought it would be better to use javascript.
  • My question is does separating the css into multiple files help with the performance of the page in any way or is it just for organizing the css. @Code-Beaker

  1

  

  Tharun Raj•1,330

  @Code-BeakerPosted 2 months ago

  @temesgen-982 Hey there! Thanks for sharing your reply.

  • Larger CSS files take longer to load. So, by splitting CSS files, it might be a good take on improving the performance.
  • About the responsive images, you need to use the source element as well. I have shared an example syntax I my original comment.

  Good day!

  Marked as helpful

  0

  

  Temesgen Adane•270

  @temesgen-982Posted 2 months ago

  Thanks so much. The picture element is now working as intended and I deleted the javascript file that I used to change images with. @Code-Beaker

  1