You've likely encountered cards while browsing various websites. These versatile elements are perfect for showcasing short articles, product descriptions, or user profiles. For aspiring web developers, creating responsive cards can be an excellent project to grasp essential CSS concepts like positioning, flexbox, and grid layouts.
What You'll Learn:
- Creating responsive card layouts using HTML and CSS.
- Utilizing HTML elements such as <div>, <a>, <img>, and <h1> to structure the card.
- Applying CSS properties to style the card and ensure responsiveness.
This project is beginner-friendly and straightforward, making it an ideal starting point for web development enthusiasts. You'll have no trouble following the steps and understanding the code.
Step-by-Step Guide
Step 1: Setting Up Your Project
- Begin by creating a project folder with a name of your choice.
-
Inside the folder, create the following files:
index.html(Main HTML file)style.css(CSS stylesheet)
-
Download the
Imagesfolder and place it in your project directory; this folder contains all the images you'll need for the card project.
Step 2: Creating the HTML Structure
Now, let's structure the HTML for our responsive cards. Here's a sample HTML code snippet to get you started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card | Nabin Khair</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<div class="box1">
<div class="box2">
<div class="profile">
<img src="https://shorturl.at/almIK" height="100px" width="100px">
</div>
</div>
<div class="name">Nabin Khair</div>
<p>Front End Developer and Blogger</p>
<div class="social-media">
<a href="https://www.facebook.com/nabinkhair2">
<i class="bi bi-facebook"></i></a>
<a href="https://www.instagram.com/nabinkhair2"><i class="bi bi-instagram"></i></a>
<a href="https://www.twitter.com/nabinkhair2"><i class="bi bi-twitter-x"></i></a>
<a href="https://www.github.com/nabinkhair42"><i class="bi bi-github"></i></a>
</div>
<div class="button">
<a class="about" href="https://www.nabinkhair.com.np/p/about-us.html">About</a>
<a class="hire-Me" href="#">Hire Me</a>
</div>
<div class="stats">
<i class="bi bi-heart"></i> 60K |
<i class="bi bi-chat"></i> 12K |
<i class="bi bi-share"></i> 3K
</div>
</div>
</body>
</html>
This code provides the essential HTML structure using semantic tags like <div>, <img>, <h1>, and <a> to create the card layout. In the subsequent steps, we'll apply CSS styles to make it responsive.
Step 3: Adding CSS Styles
Now, let's style our responsive cards. You can create a file called
style.css and include it in your project folder. Here's an
example of the CSS code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: aliceblue;
font-family: 'Josefin Sans', sans-serif;
}
.box1{
height: 50vh;
width:50vb;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aliceblue;
border-radius:16px;
box-shadow: #b6b5b5 0px 0px 10px 0px ;
margin-top: 0px;
border: 1px solid white;
}
a{
text-decoration: none;
margin-left: 10px;
}
.box2{
height: 60vh;
width: 50vb;
background-color: rgb(89, 248, 182);
border-radius: 16px 16px 0 0;
margin-top: 0px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.profile{
height:100px;
width: 100px;
border-radius: 50%;
border:5px solid white;
margin-bottom: -20px;
background-color: aliceblue;
box-shadow: #b1b2b3 0px 0px 5px 0px;
}
.name{
font-size: 30px;
font-weight: bold;
margin-top: 40px;
}
.button{
display: flex;
margin-bottom: 20px;
}
.social-media{
margin-top: 10px;
margin-bottom: 20px;
}
.about{
height: 35px;
width: 100px;
background-color: rgb(89, 248, 182);
display: flex;
justify-content: center;
align-items: center;
border-radius: 18px;
color: #fff;
}
.about:hover{
height: 35px;
width: 100px;
background-color: rgb(89, 248, 182);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 18px;
color: #fff;
box-shadow: #b1b2b3 0px 0px 10px 0px;
font-weight: bold;
}
.hire-Me{
margin-left: 20px;
height: 35px;
width: 100px;
background-color: rgb(89, 248, 182);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 18px;
color: #fff;
}
.hire-Me:hover{
margin-left: 20px;
height: 35px;
width: 100px;
background-color: rgb(89, 248, 182);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 18px;
color: #fff;
box-shadow: #b1b2b3 0px 0px 10px 0px;
font-weight: bold;
}
.stats{
margin-top: 10px;
column-gap: normal;
margin-bottom: 20px;
}
Conclusion
Creating responsive cards using HTML and CSS is a fundamental skill for web developers. This project allows you to grasp core concepts like layout, styling, and interactivity while producing a visually appealing component for your websites.
With the step-by-step guide provided, you've learned how to structure your project, create the HTML foundation for your cards, and style them with CSS. Remember that this is just the beginning, and there are endless possibilities for customization and enhancement.
As you continue your web development journey, consider expanding on this project by adding more cards, experimenting with different styles, and integrating JavaScript for dynamic interactions. Building responsive cards is a small but important step towards becoming a proficient web developer.
We hope you found this guide valuable and enjoyable. Feel free to explore and create your own unique card designs, and don't hesitate to share your creations with the world. Happy coding!
Final Output:
Get Code