Let’s Take a Pivot to UI Dev 🚀 — Challenge No 001
Welcome 👋, Recently I heard a great saying called “ small changes eventually add up to huge results”. Since I have kept writing about UI/UX, I thought of changing a route and moving to UI development with you all. It would help us to freshen up our minds a bit, learn something new and, sharpen our skills as well.
Due to the fact I have already written articles about Beginner Guide to HTML, CSS Basics and FlexBox, why not start from there isn’t it?
To begin with, I have found an easy peasy challenge from Front End Mentor. 👉 Challenge 01 — NFT Preview Card Component
Before beginning, let me highlight a small note:-
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 UI Dev. So this article is for anyone from pro to beginner who loves to learn and sharpen their skills.🤓 With that…..
LET’S THE CHALLENGE BEGIN💣
🔸 Challenge Name:-
🔸 Description:-
Your challenge is to build out this preview card component and get it looking as close to the design as possible. Your users should be able to:
- View the optimal layout depending on their device’s screen size (Responsive)
- See hover states for interactive elements
🔸 Tools:-
HTML, CSS & Figma
STEP 01 — Begin With the blueprint (HTML)🚀
As you can see in the Design the card component is in the middle of the page. First and Foremost we will do a sketch/blueprint of the card component using HTML.
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> NFT Preview Card Component </title>
</head><!-- Body Section-->
<body>
</body>
</html>
step 1.2 ➡ Linking Fonts
Let us link the font called ‘Outfit’ from google fonts in the 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"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <title>
NFT Card Componet
</title>
</head>
Step 1.3 ➡ Creating the structure of the card component
01) Start by dividing the main three classes as shown in the above snap
<body><!-- Parent container -->
<div class="container"><!-- Child 01 container -->
<div class="image-container">
<img src="./images/image-equilibrium.jpg" alt="dice">
</div><!-- Child 02 container -->
<div class="bottom-container">
</div> </div></body>
02) Since we have divided the card component into three classes and done the layout for the image section let’s move to sketch the layout of the bottom section👇
<!-- Child 02 container --><!-- PARENT CLASS FOR BOTTOM SECTION -->
<div class="bottom-container">
<h1>
Equilibrium #3429
</h1>
<p>
Our Equilibrium collection promotes balance and calm.
</p> <!-- Child 01 Class for bottom section -->
<div class="details">
<div class="ethereum">
<img src="./images/icon-ethereum.svg" alt="ethereum">
<p class="amount"> 0.041 ETH </p>
</div>
<div class="days">
<img src="./images/icon-clock.svg" alt="clock">
<p class="amount"> 3 days left </p>
</div>
</div> <!-- Horizontal Line -->
<div class="horizontal-line"></div><!-- Child 02 Class for bottom section -->
<div class="creator-details">
<div class="creator-image">
<img src="./images/image-avatar.png" alt=" creator image
</div>
<div class="creator">
<p class="des"> Creation of </p>
<p class="creator-name"> Jules Wyvern </p>
</div>
</div><!-- END OF PARENT CLASS FOR BOTTOM SECTION -->
</div></div>
</body>
Here is what the output looks like when we sketched the card component using just HTML.
Looks Ugly Nah??? 🤮
Don’t worry same as our life here also gives the messy look at the beginning, cuz best things come at the end😎.
Roll up your sleeves and get your coffee ready, It’s time for us to make it more appealing….🎨
STEP 02 — Let’s do the interior decorating scheme (CSS)🚀
Now we have done sketching the basic layout for NFT Card Component using HTML. It's time to style the NFT card as shown in the Design.
Step 2.1 ➡ First and foremost, 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"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <title>NFT Card Componet</title></head>
Step 2.2 ➡ Include the Styling for the Universal Selector
For instance, we are using the same font-family, font-size throughout the page. Rather than including the same style over and over again, what we can simply do is we can include the common styling for the universal selector, which will act as the default styling throughout the page.
*{
align-items: center;
color: #ffffff;
font-size: 18px;
font-family: 'Outfit', sans-serif;
margin: 0px;
}Step 2.3 ➡ Include the Styling for the Body Section
As you can see in the Design there is a dark blue background colour has been used for the whole page. As a simple solution for this, we use that colour as the body background colour.
body{
background-color: #0D1A2D;
}Step 2.4 ➡ Add the Styling for the parent container of the NFT Preview Card Component
.container {
border-radius:16px;
background-color:#15273F;
max-height: 595px;
margin-left: auto;
margin-right: auto;
padding-top: 22px
padding-right: 22px;
padding-bottom: 22px;
padding-left: 22px;
width: 350px;
}Step 2.5 ➡ Add the Styling of the first Child Container
.container .image-container {
height: 330px;
border-radius: 11px;
margin-left: auto;
margin-right: auto;
width: 330px;
}.image-container img {
height: 330px;
border-radius: 11px;
width: 330px;
}
Step 2.6 ➡ Add the Styling of the second Child Container
So as we have done in the HTML section we have taken class=”bottom-container” as the main class of the bottom section and we have included two child classes inside that main class. So in this section, we will walk through each step descriptively.
Step 2.6.1 ➡ Style the main bottom container wrap
/*main bottom container */
.container .bottom-container {
padding-left: 8px;
padding-right: 8px;
}.bottom-container h1 {
color:#ffffff;
font-family: 'Outfit', sans-serif;
font-weight:600;
padding-top: 30px;
padding-bottom: 10px;
}.bottom-container p {
color:#8BACDA;
font-weight:400;
padding-top: 10px;
padding-bottom: 20px;
}
Step 2.6.2 ➡ Style the detail section (Child Class 01 inside the parent Bottom Container)
/*Child container 01 inside the main parent bottom container */
.bottom-container .details {
align-items: center;
display: flex;
justify-content: space-between;
}.details .ethereum,
.details .days {
align-items: center;
display: flex;
flex-direction: row;
}.details .ethereum img,
.details .days img {
bottom: 5px;
position: relative;
}.details .ethereum img {
height:18px;
width:11px;
}.details .days img {
height:18px;
width:18px;
}.ethereum .amount,
.days .amount {
font-weight:600;
padding-left: 10px;
}.ethereum .amount {
color:#00FFF7;
}.days .amount {
color:#8BACD9;
}.bottom-container .horizontal-line {
border-bottom: 1px solid #8BACDA;
}
Step 2.6.3 ➡ Style the creator section (Child Class 02 inside the parent Bottom Container)
/*Child container 02 inside the main parent bottom container */
.bottom-container .creator-details {
align-items: center;
display:flex;
flex-direction: row;
padding-top: 22px;
}.creator-details .creator-image {
border: 1px solid white;
border-radius: 100%;
height: 30px;
width: 30px;
}.creator-details .creator-image img {
height: 30px;
width: 30px;
}.creator-details .creator {
display: flex;
flex-direction: row;
}.creator-details .creator .des {
font-weight:400;
color:#8BACD9;
padding-left: 10px;
padding-bottom: 10px;
}.creator-details .creator .creator-name {
color:#ffffff;
font-weight:400;
padding-left: 5px;
padding-bottom: 10px;
}
Step 2.7 ➡ Make Responsive
It’s time for us to add a media query. Now we have styled it for the desktop view, now it’s time for us to make the styling responsive for the mobile view as well.
/* MOBILE */@media screen and (min-width: 300px) and (max-width: 760px){
.container {
width: 280px;
}.container .image-container{
height: 280px;
width: 280px;
}
}
It’s time to see the outcome🤩👇
What do you guys say about the outcome? Does it come as you expected? You guys let me know your feedback and thoughts. But before that, we have to do one more thing
STEP 03 —Apply The Hover Effect🚀
Here we have deleted the image tag inside the image-container class and replaced the image inside the image-container as a background.
HTML file
<div class="image-container">
<!-- <img src="./images/image-equilibrium.jpg" alt="dice">
<div class="hover-option">
<img src="./images/icon-view.svg" alt="">
</div> -->
</div>CSS file
.container .image-container {
height: 330px;
border-radius: 11px;
background: url("./images/image-equilibrium.jpg") no-repeat;
background-position: center;
background-size: contain;
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 345px;
}.container .image-container:hover {
background: url("./images/hover-image-equilibrium.png") no-repeat;
background-position: center;
background-size: contain;
height: 330px;
width: 345px;
}
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 and do not hesitate to try this challenge.
If you are interested in gaining more knowledge, sharpening your skillset or need a small reminder, check out the following articles.👇🧠
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 Design
01) Code Repository:- https://github.com/NathashaR97/NFT-Preview-Card-Component.git
