Filter for SVG color, use only flex

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  **Hello Jetyun, congrats on finishing the challenge I'm glad that you found out how to change the color for svg, good job with the layout and the responsiveness, it looks great! **

  Let me try to answer your question:

  • First of all, consider moving to a preprocessor like SASS / LESS to have a more readable / mantainable code, you will have everything separated, mixins, variables, indentation, functions... impossible to make a more mantinable code as making CSS almost like a programing language.

  Apart from that point of view, if you don't want to go for SASS, there are a lot of tricks that you can do in your CSS to make it more readable and easyt to change, let me try to resume them:

  1. Use a naming convention such as BEM, it will give your classes more sense, they will be easier to understand and you will also never run about ideas for selectors or classnames.

  2. Try giving the default styles of different elements right on the start of your CSS file, for example the sizes of headings, size of paragraph, colors, for example:

  h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 2.2;
    color: #fff;
  }
  h2, h3, h4 {
     font-size: 1.8rem;
    font-weight: 400;
     line-height: 3;
  }
  

  3. Create utility classes like containers, margins etc... Why someone would write margin-top; 4rem for every section? just add the class margin-top that you created to stop repeating margin-top! (I saw that you used this trick in your solution).

  4. Don't use pixels, try to use always relative units such as ems and rems, pixels just for special cases.

  Hope my feedback helps you, great work with the solution, if you have any questions, don't hesitate to ask!

  Marked as helpful

  0