Three columns challenge solution html css

Community feedback

• 

  IO•690

  @i000oPosted 3 months ago

  Hiii! I can help you -

  I just posted my solution to this challenge and I make use of Sass here. It's really useful to keep your code simple and stop you repeating yourself. I recommend you start here Sass basics which is what I did.

  Some of the things that Sass can offer you are - mixins, variables, nesting and partials.

  1 Mixins - You can declare multiple lines of code at once on multiple selectors! This saves you writing the same lines over and over again in different places in your CSS. For e.g.

  display: flex; 
  justify-content: center; 
  align-items: center;
  

  You declare it at the top and then refer to it later with @include. So much faster.

  2 Variables - If you know you are going to reuse a value again and again throughout the design, you can make it a variable with $ and use that instead. It contains the value for you so for e.g. you don't write 20px over and over for a margin property. In my Sass, I used one for the border-radius and called it $rounded-corner.

  3 Nesting - This allows you to correctly target selectors and understand this. It's very helpful to use Sass and then compare it to the CSS output file and see well-written CSS that you didn't write directly 😂 It teaches you what it's supposed to look like.

  It also keeps your code neatly organised into sections instead of having a loooong scroll of CSS. This means you can focus better and put aside lines/segments that aren't part of the current problem you're solving.

  3 Partials - Partials are where you can call on pieces of modular code to save yourself writing sections of code everytime. For e.g. I use this for my CSS reset at the top of the document. It uses one line instead of 10.

  Secondly, it's not :hover! It's :active. I did the same thing and learnt the importance of the different - from focus, too. I think once you adjust this, your code will behave more how you expect.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  DrMetr•270

  @DrMetrPosted 3 months ago

  @i000o, thank you for your answer! Coincidentally, I started diving into Sass just yesterday) And thank you for pointing out that there's difference between :hover and :active, I'll remember that next time

  0