3 Column Preview Card

Community feedback

• 

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  Hi, @seancodedmathew

  Your solution looks really great. Congratulations on completing the challenge. I've gone through a CSS & got a few points to mention -

  • As you've just started, I want you to start using the CSS reset for your upcoming challenges.
  • Start using CSS variables the more elegant way to write CSS and keep us to handle the DRY(Don't repeat yourself) code. As I can see, there is a lot of repetition of CSS. So, we can handle that using CSS variables.

  For Example, what you can do is, on the :root selector you can define the variables to be used through out the CSS

  :root {
  /*For Fonts*/
   --ff-big-shoulder: 'Big Shoulders Display', cursive;
  --ff-lexend: 'Lexend Deca', sans-serif;
  /*For Colors*/
  --white: #FFFFFF;
  --light-white: #f2f2f2;
  --bg-color: #006970;
  }
  

  
  h1 {
    color: var(--light-white);
    text-transform: uppercase;
    font-family: var( --ff-big-shoulder);
    font-size: 2.2rem;
    margin: 23px 0;
  }
  
  .column-container {
    width: 100%;
    margin: 180px auto;
    color: var(--light-white);
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  

  And then you can use this variable in the class like above, so you won't need to change it in every class if something changes. You just need to change the variable value and it will reflect everywhere. Think about managing a bigger application, keep this in practice.

  • Also as we can see buttons designs are same just the color is different, so you can keep common class for buttons common CSS like fonts, background, etc.

  .defaultBtn{
  width: 130px;
    height: 40px;
    background-color: var(--light-white);
    border-radius: 30px;
    border: none;
    font-family: var(--ff-lexend);
    font-weight: 400;
  }
  .btn1 { color: #e38826; }
  .btn2 { color: #006970; }
  .btn3 { color: #004241; }
  

  Use this defaultBtn common class name with other classes in your HTML. And for the hover states you can keep the CSS like you did.

  • Media queries You can keep the CSS in one media query for until specific width or if it is getting much complex you can split it into multiple. There is no issue.

  Hope this will help you. Keep mentoring and happy Coding!

  Marked as helpful

  0