Fylo landing Page With HTML, SASS and Javascript

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can fix these points:

  • @import prevents parallel downloads, use <link> instead.

  1. @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap");
  

  • Outlines should only be modified using :focus.

  201. .product-reviews .product-trial span input {
  

  • Duplicate property 'font-size' found.

  208.   font-size: 14px;
  

  • Don't use IDs in selectors.

  228. .product-reviews .product-trial #notify {
  

  • Use of !important

  253.     font-size: 2rem !important;
  

  • Too many font-size declarations (18), abstraction needed.

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  1

  ---

  

  Ratnesh sahu•410

  @alexmercer500Posted over 2 years ago

  @isprutfromua Hi, Appreciate your feedback and tips for styling. For "Use of !important" I had some trouble, in the email section card, I wasn't able to overwrite the desired value fit for the desktop media query.

  I took the mobile-first approach and I wanted to change the width of the section and font size for the desktop screen but it won't change, so I used "!important", and it worked. If it's possible can you tell me, what could be the reason?

  0

  

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  @alexmercer500 you can check order of declaration the css properties. Also it might be a tag specification issue.

  1

  

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  @alexmercer500 also, you can read about BEM or SMACSS methodologies. Using some of them prevent similar problems

  0