Challenge 005–3 Column Preview Card Component🚀
Hola!! As promised in the previous CSS Grid article. Beginning today onwards we will be doing a few exercises using a CSS grid.
If you are a first-time visitor Welcome! 🤩 First and foremost, let’s begin this with a small introduction to today’s article.👇
As some of you might know, I pivoted to UI development a few weeks back and started to do challenges using HTML and CSS. Therefore we started, Challenge No 001 with a challenge called NFT Card Component, then move to Challenge No 002 with a challenge called Single Price Grid Component, then we did Challenge No 003 with a challenge called Huddle Landing Page with a single introductory section. And last but least we have completed Challenge No 004, Clipboard Landing Page.
Now that being said, we have reached to our today's challenge which mainly focuses on CSS Grid🤩.
As for today’s challenge, we will be doing a very beginner-level challenge from Front End Mentor. 👉 Challenge 005– 3 column Preview Card Component.
As always, let’s begin the challenge with a motivational quote.👇 (This is one of the quotes that helps me to keep moving, I am sharing this with you with the hope that it’ll help you all as well to keep on moving forward)
You don’t set out to build a wall. You don’t say ‘I’m going to build the biggest, baddest, greatest wall that’s ever been built.’ You don’t start there. You say, ‘I’m going to lay this brick as perfectly as a brick can be laid.’ You do that every single day. And soon you have a wall.
— Will Smith
With that head start, let us move to our first challenge in the CSS grid. 💪
Before beginning, let me highlight a small note (as always):-
For some of you, this might be a challenge that you can do with your eyes closed, for some of you this might be a challenge that you learn a new thing and for some of you this might be the beginner step for CSS Grid. So this article is for anyone from pro to beginner who loves to learn and sharpen their skills.🤓 With that…..
LET US LAY OUR FIRST BRICK ON CSS GRID💣
🔸 Challenge Name:-
3-column Preview Card Component
🔸 Description:-
Your challenge is to build out this landing page from the designs provided in the starter code. Your users should be able to:
- View the optimal layout for the page depending on their device’s screen size
🔸 Tools:-
HTML, CSS & Figma
STEP 01 — Begin With the blueprint (HTML)🚀
First and Foremost, we will do a sketch/blueprint of the card component using HTML. Afterwards, we’ll make the look and feel of the 3-column preview card component according to the Design.
🔴 STEP 1.1 ➡ Basic structure of HTML
<!DOCTYPE html>
<html lang="en"><!-- Head Section-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> Clipboard Landing Page </title>
</head><!-- Body Section-->
<body>
</body></html>
🔴 STEP 1.2 ➡ Create the main structure of the 3-column card component
So as you can see, we have three separate columns and those three columns are wrapped in a parent container
<body> <div class="container"> <!-- First Column -->
<div class="column first-column">
</div> <!-- Second Column -->
<div class="column second-column">
</div> <!-- Third Column -->
<div class="column third-column">
</div>
</div></body>
Hmmm. There is a small thing I’ll highlight from the above code snippet👆. As you can see in the above code snippet, we have used two class names in the same div tag.
You might question why we have done that? Let me tell you why.
- As you can see in the Design, we have three columns of the same width and height.
- So here is the easy trick, we can add a common class called “column” and include all the common width & height styles for it and then we can define each column's colour and radius with the separate class. For that, we used as “first-column”/”second-column” etc…
- The above intro is only to resolve your confusion. We will walk through how we do it in the styling section. Be patient till then😉.
🔴 STEP 1.3 ➡ Let Us Begin to create three separate columns
Here as you can see, all the properties in the three columns align in a similar manner. Therefore rather than walk through each column, we will walk through one column and then move to develop it.
- Step 01:- We divide the content in the column to separate parent containers as top-content and bottom-content.
- Step 02:- You can see we have a logo at the top and then we have the heading and underneath that, we have a small content. All these three sections we will include in the top content.
- Step 03:- Lastly we add the button inside the bottom-content
<body> <div class="container"> <!-- First Column-->
<div class="column first-column"> <div class="top-content"> <div class="img">
<img src="./images/icon-sedans.svg" alt="sedans">
</div> <div class="heading">
<h1> Sedans </h1>
</div> <div class="paragraph">
<p>
Choose a sedan for its affordability and excellent fuel
economy. Ideal for cruising in the city
or on your next road trip.
</p>
</div> </div> <div class="bottom-content">
<button class="button">
<a href="#"> Learn More </a>
</button>
</div> </div> <!-- Second Column-->
<div class="column second-column"> <div class="top-content"> <div class="img">
<img src="./images/icon-suvs.svg" alt="suv">
</div> <div class="heading">
<h1> SUVs </h1>
</div> <div class="paragraph">
<p>
Take an SUV for its spacious interior, power, and
versatility. Perfect for your next family vacation
and off-road adventures.
</p>
</div> </div> <div class="bottom-content"> <button class="button">
<a href="#"> Learn More </a>
</button> </div> </div> <!-- Third Column--> <div class="column third-column"> <div class="top-content"> <div class="img">
<img src="./images/icon-luxury.svg" alt="luxury"
</div> <div class="heading">
<h1> Luxury </h1>
</div> <div class="paragraph">
<p>
Cruise in the best car brands without the bloated prices.
Enjoy the enhanced comfort of a luxury rental and arrive
in style.
</p>
</div> </div> <div class="bottom-content"> <button class="button">
<a href="#"> Learn More </a>
</button> </div> </div> </div></body>
— — And with that, we have done with the blueprint. It’s time for us to check the output of our blueprint.👀👇 — —
— — HMMM, I am not a fan of this. It looks ugly and messy.🤮 But rather than complaining, shall we get into work and make it more appealing — —
STEP 02 — Time to make it more appealing (CSS)🚀
Alrighty! Now we have reached the best part. It is time to get our hands dirty by doing the styling. We are doing this challenge in the desktop-first approach. This means we start the styling for the desktop view first, and then we’ll adjust the styling for the smaller screens using media queries.
🔴 Step 2.1 ➡ First and foremost as we have done in all our Challenges, Link The External Style Sheet to the HTML file
<head> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>
3 column preview card component
</title></head>
🔴Step 2.2 ➡ Import fonts to the external style sheet
So as you can see in the Design we have used two font styles. Such as, ‘Lexend Deca’ & ‘Big Shoulders Display’. Therefore what we can first do is, go to google font, search for ‘Lexend Deca’ & ‘Big Shoulders Display’ font, click on the relevant font weights we needed, and then get the import link.
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;200;300;400;500;600;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap');
🔴Step 2.3 ➡ Include the Styling for the Universal Selector
Now let me begin with a small note🔊:- Since I have descriptively walked you through the universal selector in challenges 001, 002, 003, and 004 as well as in the CSS article, I won’t be explaining the universal selector, and why we use it again.
*, a
{
margin: 0px;
padding: 0px;
text-decoration: none;
font-family: 'Big Shoulders Display', cursive;
font-size: 12px;
color: #ffffff;
}*, a{}= It means that the styling we include will act as a default style throughout the page. Therefore, no need for separate stying.
<!-- eg:- Remove the underline in the links -->
*,a{
margin: 0px;
padding: 0px;
text-decoration: none;
font-family: 'Big Shoulders Display', cursive;
font-size: 12px;
color: #ffffff;
}
<!-- 👆Since we have put text-decoration as none we do not have to call a style seperately for <a> tag, Since we have include the style in the universal selector it will affect in all the <a> tags throughout the page -->NOW IT’S TIME FOR US TO DEVELOP THE THREE COLUMS🎯. LET'S GET STARTED…
🔴Step 2.4 ➡ Include the Styling for the Parent Container of the three columns
.container { display: grid;
align-items:center;
grid-template-columns: repeat(3, 1fr);
margin: 100px auto;
max-width:950px;}
Check out the above code snippet. As you can see, we have given grid-template-columns: repeat(3, 1fr); ➡ Here, what we have done is since we have the same size three columns, we use the repeat function to include three same-size columns instead of ( 1fr, 1fr, 1fr) and fraction unit is used to declare the size of the column to take the full space as possible.
🔴Step 2.5 ➡ Include the Common styling for all three columns
As we have explained earlier, the colours and the text-only are specified in three columns. Therefore, we have used a class called column to define the width, height and alignment of each column. ( The common once).
.column { height: 400px;
padding: 50px 50px 50px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;}
Then as follows, we define the common styles for the images, headings and paragraphs of the three columns.
.img img {
height: 40px;
width: 64px
} .heading {
padding-top: 50px;
padding-bottom: 20px;
} h1 {
font-size: 40px;
font-weight: 700;
} p {
font-family: 'Lexend Deca', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 22px;
}.button {
align-items: center;
border-radius: 25px;
border: none;
justify-items: center;
height: 50px;
width: 145px;
}
🔴Step 2.6 ➡ Include the specific styling for each column
As we have done with the common styling, it’s time to add the styling for the specific column.
First Column
.first-column {
background-color: #E28525 ;
border-radius: 12px 0px 0px 12px;
}.first-column .button a {
color: #E28525 ;
cursor: pointer;
font-family: 'Lexend Deca', sans-serif;
}
Second Column
.second-column {
background-color: #016972 ;
}.second-column .button a {
color: #016972 ;
cursor: pointer;
font-family: 'Lexend Deca', sans-serif;
}
Third Column
.third-column{
background-color: #00403F;
border-radius: 0px 12px 12px 0px;
}.third-column .button a {
color: #00403F ;
cursor: pointer;
font-family: 'Lexend Deca', sans-serif;
}
— Now let’s see the outcome of our basic styling —
— — Surprise…, The outcome of the basic styling looks amazing, isn’t it?🤩 — —
STEP 03 — Time to make responsive for all the screens (Media Query)🚀
Since we have done in a desktop-first approach, we have done our basic styling for the desktop view. Now it’s time to use the media query and make it responsive for the smaller size screens.
Once you include the styles for the media query, those styles will override the basic style for smaller screens.
🟡Step 3.1 ➡ let us Complete the challenge by adjusting the styles for screens which have a minimum value of 300px and a maximum value of 760px
Simply we adjusting the styles for mobiles and tablets.
@media screen and (min-width: 300px) and (max-width: 760px){ .container {
grid-template-columns: repeat(1, 3fr);
margin-top: 0px;
} .first-column {
border-radius: 12px 12px 0px 0px;
} .third-column{
background-color: #00403F;
border-radius: 0px 0px 12px 12px;
}}
— — WITH THAT LET US SEE OUR FINAL OUTCOME💣. TADAAA..🤩 — —
Final Thought
As we have done with the challenge, I’ll end this article with the hope that you have gained and learned something. Thank You for checking this out.
Now your time has arrived to give a try to this challenge. Trust me you would love the process.
If you are interested in gaining more knowledge, sharpening your skillset or need a small reminder, check out the following articles.👇🧠
🟡Vessel of Knowledge in CSS Grid➡ https://medium.com/@nknuranathunga/vessel-of-knowledge-in-grid-1272764725a2
🟡Understanding flexbox to make things easy➡ https://levelup.gitconnected.com/understanding-flexbox-to-make-things-easy-adf90891ff25
🟡Learn the fundamentals of CSS within a few minutes➡ https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0
🟡Beginner’s guide to HTML➡ https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182
If you like this give one or more claps and feel free to leave your thoughts and feedback in the comment section.
Thank you for checking this out and feel free to checkout my other articles by clicking the following link 👇
🔸Follow me on Twitter👀: @NathashaR97🔸
Refer to the following link for the Code Repository and other relevant links for the Challenge🧠👇
01) Code Repository:- https://github.com/NathashaR97/3-column-preview-cardcomponent.git
02) Domain Link:- https://3-column-preview-cardcomponent.vercel.app/
04) Challenge Link:- https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-
