Hi to all of you! Are you excited to discover how to use HTML and CSS to create a gorgeous glass dashboard? We will walk you through the process of creating an engaging dashboard that you can use for both personal and professional reasons in this step-by-step tutorial.
Step 1: Configuring the Project: | CSS and HTML
Make a new folder on your computer to house your project files before you embark on this adventure. You should create two necessary files, “index.html” and “styles.css,” inside this tidy folder. The “styles.css” file will contain the CSS rules needed to perfectly style your dashboard, while the “index.html” file will act as the cornerstone, providing the fundamental framework for your dashboard.
Step 2: Configuring HTML
Include the necessary meta tags to define the character set, viewport settings, and page title in the section of your “index.html” file. Additionally, use the tag to link your HTML file to your “styles.css” file.
Step 3: Creating the Structure of the Dashboard: | HTML and CSS
A combination of HTML and CSS will be used to build the dashboard. To start, make a
that will be the main container and give it the class “dashboard.” Make another
with the class of “sidebar” inside the “dashboard”
to house the Pro section, navigation, and profile.
Step 4: Sidebar Section: | HTML And CSS
Inside the “sidebar” <div>, create a <div> with a class of “profile” to contain the user’s picture, name, and description. Following that, create another <div> with a class of “sidebar-items” to house the navigation links. Within the “sidebar-items” <div>, create four <a> tags with a class of “sidebar-item”. Each <a> tag will encompass an image and a title.
Step 5: Pro Section:
Next, create a <div> with a class of “pro” to accommodate the Pro section. Within the “pro” <div>, add a heading and an image.
Step 6: Section of the Main Content:
Create a new one now with the class “main” to house the content of the dashboard. Within the “primary”
incorporate two links and a heading with the class “skill.” A title, a progress bar, and an image will all be included with each link.
<!DOCTYPE html>
<html lang="en">
<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>Dashboard</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="dashboard">
<div class="sidebar">
<div class="profile">
<div class="profile-img-box">
<img src="assets/images/profile.jpg" alt="">
</div>
<h3 class="name">John Doe</h3>
<p class="desc">Beginner</p>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">
<div class="si-img-box">
<img src="assets/images/skills.png" alt="">
</div>
<h4 class="si-name active">Skills</h4>
</a>
<a href="#" class="sidebar-item">
<div class="si-img-box">
<img src="assets/images/courses.png" alt="">
</div>
<h4 class="si-name">Courses</h4>
</a>
<a href="#" class="sidebar-item">
<div class="si-img-box">
<img src="assets/images/upcoming.png" alt="">
</div>
<h4 class="si-name">Upcoming</h4>
</a>
<a href="#" class="sidebar-item">
<div class="si-img-box">
<img src="assets/images/library.png" alt="">
</div>
<h4 class="si-name">Library</h4>
</a>
</div>
<div class="pro">
<h4 class="pro-text">Join pro for <br> free courses</h4>
<div class="pro-img-box">
<img src="assets/images/premium-quality.png" alt="">
</div>
</div>
</div>
<div class="main">
<h1>My English Skills</h1>
<div class="skill">
<div class="skill-content">
<div class="skill-img-box">
<img src="assets/images/read.png" alt="">
</div>
<div class="skill-detail">
<h2 class="skill-title">Reading</h2>
<p>211 Days</p>
<div class="skill-progress">
<div class="progress progress-1"></div>
</div>
</div>
</div>
<h2 class="percent">60%</h2>
</div>
<div class="skill">
<div class="skill-content">
<div class="skill-img-box">
<img src="assets/images/writing.png" alt="">
</div>
<div class="skill-detail">
<h2 class="skill-title">Writing</h2>
<p>114 Days</p>
<div class="skill-progress">
<div class="progress progress-2"></div>
</div>
</div>
</div>
<h2 class="percent">40%</h2>
</div>
<div class="skill">
<div class="skill-content">
<div class="skill-img-box">
<img src="assets/images/speaking.png" alt="">
</div>
<div class="skill-detail">
<h2 class="skill-title">Speaking</h2>
<p>371 Days</p>
<div class="skill-progress">
<div class="progress progress-3"></div>
</div>
</div>
</div>
<h2 class="percent">80%</h2>
</div>
</div>
</div>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
</body>
</html>Step 7: Dashboard Styling
It’s time to use CSS to style your dashboard! Use CSS to alter your dashboard’s fonts, colors, borders, backgrounds, and other design components. To improve the user experience, you can also use CSS to create eye-catching animations, seamless transitions, and eye-catching effects.
Step 8: HTML and CSS for Testing and Responsiveness
Lastly, in Step 8, confirm that your dashboard is responsive and fully operational. Make sure it works flawlessly for users by thoroughly testing it across a range of devices and web browsers.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
}
p {
color: #7351b3;
}
h1,
h2.skill-title {
color: #4e2599;
}
body {
background: linear-gradient(35deg, #BA38D7, #7332EB, #A200DA);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.dashboard {
width: 60%;
min-height: 80vh;
background: linear-gradient(to right bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2));
display: grid;
grid-template-columns: 1fr 2fr;
border-radius: 1rem;
overflow: hidden;
backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, .5);
z-index: 3;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
}
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 2rem;
background-color: rgba(255, 255, 255, .2);
}
.profile {
display: flex;
flex-direction: column;
align-items: center;
}
.profile-img-box {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.name {
margin-top: 1rem;
color: #4e2599;
}
.si-img-box {
position: relative;
width: 25px;
height: 25px;
margin-right: 1rem;
}
.sidebar-item {
display: flex;
align-items: center;
margin-bottom: .7rem;
}
.sidebar-item:hover .si-name {
color: #A200DA;
}
.si-name {
color: #4e2599;
font-weight: 500;
}
.active {
color: #A200DA;
}
.pro-img-box {
position: relative;
width: 40px;
height: 40px;
margin-left: 1rem;
}
.pro {
display: flex;
align-items: center;
background-color: #7332EB;
padding: 1rem;
border-radius: 1rem;
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: .3s;
}
.pro:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* main */
.main {
padding: 2rem;
height: max-content;
}
.skill {
background-color: rgba(255, 255, 255, .3);
padding: 1rem 2rem;
border-radius: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: .3s;
}
.skill:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.skill-content {
display: flex;
align-items: center;
width: 80%;
}
.skill-img-box {
position: relative;
min-width: 60px;
height: 60px;
margin-right: 2rem;
}
.skill-detail {
width: 100%;
}
.skill-title {
color: #333;
}
.skill-progress {
position: relative;
height: 1rem;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 1rem;
overflow: hidden;
}
.progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #7332EB;
}
.progress-1 {
width: 60%;
}
.progress-2 {
width: 40%;
}
.progress-3 {
width: 80%;
}
.percent {
color: #4e2599;
}
/* circles */
.circle-1 {
height: 200px;
width: 200px;
background-color: aqua;
position: absolute;
border-radius: 50%;
top: 5%;
right: 13%;
}
.circle-2 {
height: 300px;
width: 300px;
background-color: #d3dfdb;
position: absolute;
border-radius: 50%;
bottom: -5%;
left: 10%;
}
.circle-3 {
height: 100px;
width: 100px;
background-color: #35d19d;
position: absolute;
border-radius: 50%;
bottom: 65%;
left: 40%;
}In summary:
Best wishes! You now know how to use CSS and HTML to create an amazing glass dashboard.
Finally, this tutorial has walked you through the process of using HTML and CSS to design an amazing glass dashboard. You can make a visually appealing and intuitive dashboard by following these steps and adding more transition words to your sentences. Now let’s get started and create the dashboard of your dreams! Please feel free to use this tutorial as a guide for any projects you work on in the future. Have fun with coding!
