CodeNewbie Community 🌱

Cover image for Build 10 CSS Projects in 10 days: Project 1
Amrin
Amrin

Posted on • Updated on • Originally published at coderamrin.hashnode.dev

Build 10 CSS Projects in 10 days: Project 1

This is Build 10 CSS project in 10 days series. In this series, I will build 10 CSS projects in 10 days.

I will be using vanilla CSS for the projects.

This is Project 1 and Day 1.

Project 1: 3-column preview card component

Project 1 is from frontend mentor challenges. It is 3-column preview card component project

Today's project is built with vanilla CSS.

Before starting, download the starter files from the frontend mentor
And extract/unzip it.

Part 1: HTML

The main goal of this series is to learn to build CSS projects.
So, we won’t go into every detail of HTML.
So, I'll just paste it here.

<body>
  <div class="cardContainer">
    <div class="card card--orange">
      <img src="images/icon-sedans.svg" class="card__icon"> 
      <h1 class="card__title">Sedans</h1> <p class="card__description">
          Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the cityor on your next road trip.
      </p>
      <button class="btn btn--orange">
        Learn More 
      </button>
    </div>

    <div class="card card--cyan">
      <img src="images/icon-suvs.svg" class="card__icon" >
      <h1 class="card__title">SUVS</h1> <p class="card__description">
          Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
      </p>
      <button class="btn btn--cyan">
        Learn More 
      </button> 
    </div>

    <div class="card card--d-cyan">
      <img src="images/icon-luxury.svg" class="card__icon">
      <h1 class="card__title">Luxury</h1> <p class="card__description">
          Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
      </p>
      <button class="btn btn--d-cyan">
        Learn More 
      </button>
    </div>        
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Part 2: CSS

Here comes css.

One quick note inside the starter files you downloaded there is a file name “syle-guide.md”. This file contains all the color and fonts we need.

We are now going to import the fonts from google fonts

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
Enter fullscreen mode Exit fullscreen mode

Let's add some global styles

/*global styles*/ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body, html {
    height: 100%;
}

body {
    font-size: 15px; 
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column; 
}
Enter fullscreen mode Exit fullscreen mode

We just removed all the margin and padding from everything with the * (global) selector. And senterd everything vertically and horizontally using flex box.

/*variables*/
:root {
    --orange: hsl(31, 77%, 52%);
    --dark-cyan: hsl(184, 100%, 22%);
    --v-dark-cyan: hsl(179, 100%, 13%);

    --t-white: hsla(0, 0%, 100%, 0.75);
    --light-gray: hsl(0, 0%, 95%);
}
Enter fullscreen mode Exit fullscreen mode

For ease of use we just extract all the colors from “syle-guide.md” and create css variables.

/*card styles */
.cardContainer { 
    display: flex; 
    width: 690px; 
    line-height: 1.5;  
}

.card {
    background-color: var(--dark-cyan); 
    padding: 28px;  
}

.card__title {
    color: var(--light-gray); 
    text-transform: uppercase;
    font-family: 'Big Shoulders Display', cursive; 
}

.card__description {
    color: var(--t-white);
    line-height: 1.8;  
}
Enter fullscreen mode Exit fullscreen mode

We give the cardContainer to display flex to align the cards next to one another. And added fixed width 690px

Then styled the card. Added padding of 28px to make space inside the card.
Styled the card_title and card_description. Added colors and some text styles.

This is how it looks.

card1.png


/*btn styles*/

.btn {
    border: 0; 
    padding: 10px 25px;
    border-radius: 5rem;
    margin-top: 3rem; 
    border: 2px solid var(--t-white);
    cursor: pointer;    
}

.btn--orange {
    color: var(--orange); 
}

.btn--cyan {
    color: var(--dark-cyan);
} 

.btn--d-cyan {
    color: var(--v-dark-cyan);  
}

.card__icon,
.card__title,
.card__description,
.btn { 
    margin-bottom: 1rem; 
    font-family:'Lexend Deca', sans-serif;   
}

.btn:hover {
    border: 2px solid var(--t-white); 
    background: 0;
    color: var(--t-white);
}
Enter fullscreen mode Exit fullscreen mode

Styled the buttons. Added padding and border and border-radius to make the rounded style.
And added different colors to individual buttons.
Also added hover effect. On hover, the background changes to 0 which is another way of saying none.

This is how it looks

Screenshot_1.png

/*card backgrounds*/
.card--orange {
    background: var(--orange); 
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.card--cyan {
    background: var(--dark-cyan); 
}

.card--d-cyan {
    background: var(--v-dark-cyan); 
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;  
}
Enter fullscreen mode Exit fullscreen mode

Changed the background of each card to match the design.

And this is how the desktop design looks.

card 3.png

/*media query for smaller screen*/
@media screen and (max-width: 728px) {
    .cardContainer {
        width: 250px;
        flex-direction: column;  
        height: 100%;  
    }

    .card {
        padding: 30px;
    }

    .card--orange {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card--d-cyan { 
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;  
    }   
}
Enter fullscreen mode Exit fullscreen mode

This is the Mobile design. The Responsive design part.
In this one, we changed the cardContainer class to flex-direction column.
That stack one card on top of another one.
And removed the border radius of the middle cards.

This is how it looks on the mobile

card 5.png

Source code: https://github.com/Coderamrin/3_column_card_component

Live Preview: https://coderamrin.github.io/3_column_card_component/

This is for today's Project.
If you have any questions and suggestions let me know in the comment below. I will be more than happy to talk to you.

If you like this type of content and want more of these. Consider Following me at @coderamrin

Thanks for Reading.

This is Build 10 CSS project in 10 days series. In this series, I will build 10 CSS projects in 10 days.

I will be using vanilla CSS for the projects.

This is Project 1 and Day 1.

Project 1: 3-column preview card component

Project 1 is from frontend mentor challenges. It is 3-column preview card component project

Today's project is built with vanilla CSS.

Before starting, download the starter files from the frontend mentor
And extract/unzip it.

Part 1: HTML

The main goal of this series is to learn to build CSS projects.
So, we won’t go into every detail of HTML.
So, I'll just paste it here.

<body>
  <div class="cardContainer">
    <div class="card card--orange">
      <img src="images/icon-sedans.svg" class="card__icon"> 
      <h1 class="card__title">Sedans</h1> <p class="card__description">
          Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the cityor on your next road trip.
      </p>
      <button class="btn btn--orange">
        Learn More 
      </button>
    </div>

    <div class="card card--cyan">
      <img src="images/icon-suvs.svg" class="card__icon" >
      <h1 class="card__title">SUVS</h1> <p class="card__description">
          Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
      </p>
      <button class="btn btn--cyan">
        Learn More 
      </button> 
    </div>

    <div class="card card--d-cyan">
      <img src="images/icon-luxury.svg" class="card__icon">
      <h1 class="card__title">Luxury</h1> <p class="card__description">
          Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
      </p>
      <button class="btn btn--d-cyan">
        Learn More 
      </button>
    </div>        
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Part 2: CSS

Here comes css.

One quick note inside the starter files you downloaded there is a file name “syle-guide.md”. This file contains all the color and fonts we need.

We are now going to import the fonts from google fonts

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
Enter fullscreen mode Exit fullscreen mode

Let's add some global styles

/*global styles*/ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body, html {
    height: 100%;
}

body {
    font-size: 15px; 
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column; 
}
Enter fullscreen mode Exit fullscreen mode

We just removed all the margin and padding from everything with the * (global) selector. And senterd everything vertically and horizontally using flex box.

/*variables*/
:root {
    --orange: hsl(31, 77%, 52%);
    --dark-cyan: hsl(184, 100%, 22%);
    --v-dark-cyan: hsl(179, 100%, 13%);

    --t-white: hsla(0, 0%, 100%, 0.75);
    --light-gray: hsl(0, 0%, 95%);
}
Enter fullscreen mode Exit fullscreen mode

For ease of use we just extract all the colors from “syle-guide.md” and create css variables.

/*card styles */
.cardContainer { 
    display: flex; 
    width: 690px; 
    line-height: 1.5;  
}

.card {
    background-color: var(--dark-cyan); 
    padding: 28px;  
}

.card__title {
    color: var(--light-gray); 
    text-transform: uppercase;
    font-family: 'Big Shoulders Display', cursive; 
}

.card__description {
    color: var(--t-white);
    line-height: 1.8;  
}
Enter fullscreen mode Exit fullscreen mode

We give the cardContainer to display flex to align the cards next to one another. And added fixed width 690px

Then styled the card. Added padding of 28px to make space inside the card.
Styled the card_title and card_description. Added colors and some text styles.

This is how it looks.

card1.png


/*btn styles*/

.btn {
    border: 0; 
    padding: 10px 25px;
    border-radius: 5rem;
    margin-top: 3rem; 
    border: 2px solid var(--t-white);
    cursor: pointer;    
}

.btn--orange {
    color: var(--orange); 
}

.btn--cyan {
    color: var(--dark-cyan);
} 

.btn--d-cyan {
    color: var(--v-dark-cyan);  
}

.card__icon,
.card__title,
.card__description,
.btn { 
    margin-bottom: 1rem; 
    font-family:'Lexend Deca', sans-serif;   
}

.btn:hover {
    border: 2px solid var(--t-white); 
    background: 0;
    color: var(--t-white);
}
Enter fullscreen mode Exit fullscreen mode

Styled the buttons. Added padding and border and border-radius to make the rounded style.
And added different colors to individual buttons.
Also added hover effect. On hover, the background changes to 0 which is another way of saying none.

This is how it looks

Screenshot_1.png

/*card backgrounds*/
.card--orange {
    background: var(--orange); 
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.card--cyan {
    background: var(--dark-cyan); 
}

.card--d-cyan {
    background: var(--v-dark-cyan); 
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;  
}
Enter fullscreen mode Exit fullscreen mode

Changed the background of each card to match the design.

And this is how the desktop design looks.

card 3.png

/*media query for smaller screen*/
@media screen and (max-width: 728px) {
    .cardContainer {
        width: 250px;
        flex-direction: column;  
        height: 100%;  
    }

    .card {
        padding: 30px;
    }

    .card--orange {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card--d-cyan { 
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;  
    }   
}
Enter fullscreen mode Exit fullscreen mode

This is the Mobile design. The Responsive design part.
In this one, we changed the cardContainer class to flex-direction column.
That stack one card on top of another one.
And removed the border radius of the middle cards.

This is how it looks on the mobile

card 5.png

Source code: https://github.com/Coderamrin/3_column_card_component

Live Preview: https://coderamrin.github.io/3_column_card_component/

This is for today's Project.
If you have any questions and suggestions let me know in the comment below. I will be more than happy to talk to you.

If you like this type of content and want more of these. Consider Following me at @coderamrin

Thanks for Reading.

Top comments (0)