Newsletter Sign-Up Form with HTML, SASS, JAVASCRIPT

Community feedback

• 

  P

  Zakhar Polikarpov•260

  @ZPolikarpovPosted 4 months ago

  Hello there!

  Good job on finishing the challenge. Here are some ideas of scss that you could implement to make your code cleaner:

  Try to group your scss by the classes you create. I see that your first scss block looks a lot like your HTML structure. This makes it harder to look through your code, as card__title and card__text are in different "blocks". Usually if you want to change something about your card it's easier when all the associated classes are in their own block or document. As a rule of thumb: When you start nesting your 5th class in scss you should consider creating a separate scss block for your code.

  Since you're already using double underscores in your classes, you could use & to refer to the wrapping selector

  .card {
   &__title{
    font-size: 3.4rem;
    font-weight: 700;
   }
  }
  

  sets the class .card__title with the according font-size and font-weight.

  Look into @mixin. Scss provides lots of code like functionalities that prove very useful. In your solution (and likely in many others you'll make) it would be nice to shorten @media only screen and (max-width: 758px) to something like @include mq(758px). You could combine it with variables to have fixed breakpoints based on what you think the different screen sizes are like @include mq($tablet)

  Marked as helpful

  0