Hola…Hola… Welcome Back!!
Suppose 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. Then I have done four challenges using Flexbox ( Challenge 01, Challenge 02, Challenge 03 & Challenge 04). Afterwards, I have done another three challenges using CSS Grid( Challenge 05, Challenge 06 & Challenge 07 ). Last but not least, our final challenge was done using Flexbox and CSS (Challenge 08 ).
Even though we have completed several challenges using pure CSS, I thought why did we stop there, while we are moving to our next session we will continue to keep on doing what we have started with. Isn’t it better??
So as for me and hopefully for all of you, I have decided to do several teeny tiny Challenges from Frontend Mentor using CSS. I thoroughly believe that every time there is at least one thing for us to learn.
With Thaaaat…..Let’s get into our Today’s Challenge.
As for today’s challenge, we will be doing a beginner challenge from Front End Mentor. 👉 Challenge 009– QR Code 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)
“it’s not the big moves that change everything — it’s the smallest ones in your everyday life that do.”
~Mel Robbins~
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…..
ARE YOU READY FOR THE CHALLENGE??💣
🔸 Challenge Name:-
🔸 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 QR 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> QR Card Component</title>
</head> <!-- Body Section-->
<body>
</body>
</html>
🔴 STEP 1.2 ➡ Create the main structure for the QR Card Component
<body> <div class="main-container"> <!-- image section -->
<div class="image-container">
</div> <!-- bottom content section -->
<div class="bottom-container">
</div> </div></body>
🔴 STEP 1.3 ➡ Create the structure for each section
Now we are done with the basic structure. It’s time for us to dig deep into each container and do the layout for each section for our headstart.
01) Layout the Image Section
<div class="image-container"> <img src="./images/qr-code-icon.png" alt="qr image"></div>
02) Layout the Bottom Content Section
<div class="bottom-container"> <h1>
Improve your front-end skills by building projects
</h1> <p>
Scan the QR code to visit Frontend Mentor and take your coding
skills to the next level
</p></div>
— — 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.🤮 But rather than wasting our time on complaining, shall we get into work and make it more appealing — —
STEP 02— Time to make it more appealing (CSS)🚀
Here We start the styling for the mobile view first, and then we’ll adjust the styling for the larger screens using media queries.
🔴 Step 2.1 ➡ First and foremost let us start by Linking 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> QR 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 a font called ‘Poppins’. Therefore what we can first do is, go to google font, search for ‘Poppins’ font, click on the relevant font weights we needed, and then get the import link.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');🔴Step 2.3 ➡ Use root: to declare the colours we are using
:root { --white: #ffffff;
--black: #000000;
--lightgrey: #B0B4B7;
--lightblue:#D5E1EF;}
For a thorough explanation of :root check out Challenge No 002, where I descriptively walked you through why and what we use :root.
🔴Step 2.4 ➡ 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 previous challenges (001, 002, 003, 004, 005,006) as well as in the CSS article, I won’t be explaining the universal selector, and why we use it again.
* { color:var(--black);
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 600;
margin: 0px;
margin-left: auto;
margin-right: auto;}
🔴Step 2.5 ➡ Include the background colour for the full page
As you can see there is a light blue colour background effect for the full page
body { background-color: #D5E1EF;}
🔴Step 2.6 ➡ Let us get into styling the whole page
.main-container { background-color: var(--white);
border-radius: 24px;
box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.25);
width:320px;
padding: 16px 16px 40px 16px;
margin-top: 100px;}.image-container img { border-radius: 24px;
width:100%;
height:auto;}.bottom-container { text-align: center;}.bottom-container h1 { font-size: 21px;
width:260px;
padding-top: 20px;
padding-bottom: 16px;}.bottom-container p { color: var(--lightgrey);
font-size: 12px;
font-weight: 500;
line-height: 18px;
padding-left: 60px;
padding-right: 60px;}
Note:- We are not going to use media query because there isn't a difference when you adjust the width size of the screen.➡ The width of the card is the same throughout all the screen sizes
— — LET’S SEE THE OUTCOME IN MOBILE & DESKTOP VIEW💣. 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 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 Figma File🧠👇
01) Code Repository:-https://github.com/NathashaR97/QR-card-Component.git
02) Hosting Link:-https://qr-card-component-snowy.vercel.app/
03) Challenge Link:-https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
Do not hesitate to check the previous Challenge in grid and flexbox as well👇
Grid & Flexbox Both ➡
Challenge 008
Grid ➡
Challenge 005
Challenge 006
Challenge 007
Click on the challenge to check the Challenges 01- 04, which are done using flexbox
