How To Create Responsive Admin Dashboard Design For Self Learning Platform

Are you a web developer looking to enhance your skills and build a beautiful and functional dashboard for a self-learning platform? Look no further! In this tutorial, we will guide you through the process of creating a responsive dashboard design using HTML and CSS.

Creating a dashboard is essential for any self-learning platform that needs to provide its users with an overview of their progress, deadlines, and assignments. With a well-designed dashboard, users can easily navigate through their course content, keep track of their progress, and manage their deadlines and tasks.

In this tutorial, we will walk you through the process of creating a dashboard that is not only visually appealing but also responsive and user-friendly. We’ll use HTML to structure the dashboard layout and CSS to style it.

We’ll start by setting up our project files and linking our CSS stylesheet. Then, we’ll create a sidebar with icons and a logo, which will allow users to navigate through the different sections of the dashboard. We’ll also add a menu button that will expand and collapse the sidebar on smaller screens.

Next, we’ll create the main content area of the dashboard, where users can see their assignments and progress. We’ll use CSS Grid to create a responsive layout that adapts to different screen sizes.

Finally, we’ll add some finishing touches to our dashboard, such as hover effects, icons, and progress bars.

By following this tutorial, you’ll gain practical experience in building responsive web designs with HTML and CSS. You’ll also have a beautiful and functional dashboard design that you can use for your own self-learning platform or other web projects.

So, let’s get started and build your own responsive dashboard design today!

Here are the steps you need to follow to create your responsive dashboard design:

Create a new folder on your computer to store your project files.
Inside the folder, create two new files: “index.html” and “styles.css”.
Open “index.html” in your text editor and add the basic HTML structure, including the <html>, <head>, and <body> tags.
Inside the <head> tag, create a <link> tag to link to your “styles.css” file.
Add the necessary HTML elements to create the basic layout for your dashboard, including a sidebar with a logo, sidebar items, and a container for the main content.
Use CSS to style the different components of your dashboard, making them look similar to the visually appealing dashboard interface.
Follow the step-by-step instructions in the tutorial to add the necessary HTML elements and CSS properties to create the task and group task containers for your dashboard.
Test your responsive dashboard design in different browsers and on different devices to ensure that it is fully functional and responsive.

By following these steps, you will be able to create your very own responsive dashboard design for a self-learning platform using HTML and CSS. Be sure to check out the accompanying video tutorial for a more visual guide and code examples.

Happy coding!

Video Tutorial

Source Codes

index.html

<!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">
    <!-- Remix icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/styles.css">
    <title>Document</title>
</head>
<body>
    <div class="dashboard ">
        <div class="sidebar place-items-center ">
            <div class="logo"><i class="ri-english-input"></i></div>
            <div class="sidebar-items">
                <div class="sidebar-item s-iten-1  place-items-center ">
                    <i class="ri-layout-grid-line "></i>
                </div>
                <div class="sidebar-item s-iten-2 place-items-center">
                    <i class="ri-sound-module-line"></i>
                </div>
                <div class="sidebar-item s-iten-3 place-items-center">
                    <i class="ri-user-line"></i>
                </div>
                <div class="sidebar-item s-iten-4 place-items-center">
                    <i class="ri-line-chart-line"></i>
                </div>
            </div>
        </div>
        <div class="container d-grid">
            <section class="main-container">
                <div class="top-bar margin-b">
                    <h1 class="title ">Dashboard</h1>
                    <button class="btn place-items-center">
                        <i class="ri-menu-3-line open-menu-icon"></i>
                    </button>
                </div>
                <div class="task-container d-grid margin-b">
                    <div class="exam card-1">
                        <p class="deadline">deadline 12:00</p>
                        <h2 class="exam">Exam - Unit 5</h2>
                        <p>English for beginners</p>
                        <div class="start-testing-container d-flex">
                            <p>Are you ready?</p>
                            <a href="#">Start testing</a>
                        </div>
                    </div>
                    <div class="task-container-2 d-grid">
                        <div class="homework card-1">
                            <i class="ri-checkbox-circle-line check-mark"></i>
                            <h4>Homework</h4>
                            <p>For today's lesson</p>
                        </div>
                        <div class="reading card-1">
                            <i class="ri-checkbox-circle-line check-mark"></i>
                            <h4>Reading</h4>
                            <p>250 words per week</p>
                        </div>
                    </div>
                </div>
                <div class="group-task-container d-grid margin-b">
                    <div class="language-progress card-2">
                        <i class="ri-notification-3-fill bell-icon"></i>
                        <h2 class="margin-b">English for beginners</h2>
                        <p>75%</p>
                        <div class="progress-cover">
                            <div class="progress"></div>
                        </div>
                    </div>
                    <div class="group-info card-2">
                        <h3>Group Info</h3>
                        <p>24 students in the group</p>
                        <div class="group-homework card-1 d-flex">
                            <div>
                                <h4 class="group-homework-title">Group homework</h4>
                                <p>6 students from your group online now</p>
                            </div>
                            <i class="ri-arrow-right-s-line"></i>
                        </div>
                        <div class="today-lesson d-flex ">
                            <div>
                                <h3>Today's lesson</h3>
                                <p>Unit 6 - Articles</p>
                            </div>
                            <h3>12.00</h3>
                        </div>
                    </div>
                </div>
                <div class="grammer-course d-grid ">
                    <div class="course card-1 d-flex">
                        <div class="grammer d-flex">
                            <i class="ri-pencil-fill grammer-icon"></i>
                            <div>
                                <h3>Grammer</h3>
                                <p>+ 20 grammer rules </p>
                            </div>
                        </div>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                    <div class="course card-1 d-flex">
                        <div class="dictionary d-flex">
                            <i class="ri-book-2-line dictionary-icon"></i>
                            <div>
                                <h3>dictionary</h3>
                                <p>+ 10 new words</p>
                            </div>
                        </div>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                </div>
            </section>
            <section class="secondary-container ">
                <div class="profile d-flex">
                    <div class="profile-img-box">
                        <img src="assets/images/pexels-ali-pazani-2613260.jpg" alt="">
                    </div>
                    <h2 class="name">Madonna Miks</h2>
                    <p>Software developer</p>
                    <div class="course discount card-1 d-flex">
                        <div>
                            <h4>Get -10% sell price</h4>
                            <p>for English A2 course</p>
                        </div>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                </div>
                <div class="courses-progress">
                    <h2 class="progress-title">Courses Progress</h2>
                    <div class="course card-1 d-flex">
                        <p class="progress-text-1">63%</p>
                        <div class="progress-icon progress-bg-1 place-items-center">
                            <i class="ri-pencil-fill"></i>
                        </div>
                        <div>
                            <h3>Grammer</h3>
                            <p>Learn new rules </p>
                        </div>
                    </div>
                    <div class="course card-1 d-flex">
                        <p class="progress-text-2">75%</p>
                        <div class="progress-icon progress-bg-2 place-items-center">
                            <i class="ri-book-2-line"></i>
                        </div>
                        <div>
                            <h3>Dictionary</h3>
                            <p>Learn 5 new words </p>
                        </div>
                    </div>
                    <div class="course card-1 d-flex">
                        <p class="progress-text-3">84%</p>
                        <div class="progress-icon progress-bg-3 place-items-center">
                            <i class="ri-book-open-line"></i>
                        </div>
                        <div>
                            <h3>Reading</h3>
                            <p>Train your skill </p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>
</html>

styles.css

/* Import font */
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
 /* Custom properties */
 
 :root {
     /* colors */
     --primary-background-color: #ffffff;
     --secondary-background-color: #F0F1F4;
     --tertiary-background-color: #F8F8F8;
     --dark-purple-color: #6334BA;
     --normal-purple-color: #B3A1DE;
     --light-purple-color: #F5F2FD;
     --dark-orange-color: #ED5E31;
     --normal-orange-color: #F39E6B;
     --light-orange-color: #FBEBE4;
     --red-color: #F26C69;
     /* fonts */
     --font-family: 'Poppins', sans-serif;
     --font-size-xsm: 1.2rem;
     --font-size-sm: 1.4rem;
     --font-size-md: 1.8rem;
     --font-size-lg: 2.8rem;
     --font-size-xl: 4rem;
     --gap: 2rem;
     /* margins */
     --margin-sm: 2rem;
     --margin-md: 3rem;
     /* paddings */
     --padding-lg: 4rem;
     --padding-md: 3rem;
     --padding-sm: 2rem;
     --padding-xsm: 1rem;
 }
 /* Base styles */
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 html {
     font-size: 62.5%;
     color: #555;
 }
 
 body {
     font-family: var(--font-family);
     font-size: var(--font-size-sm);
     letter-spacing: 1px;
 }
 
 h1 {
     font-size: var(--font-size-xl);
     color: #333;
 }
 
 h2 {
     font-size: var(--font-size-lg);
     color: #444;
 }
 
 h3 {
     font-size: var(--font-size-md);
     color: #444;
 }
 
 h4 {
     font-size: var(--font-size-sm);
     color: #333;
 }
 
 a {
     text-decoration: none;
     color: inherit;
 }
 
 img {
     max-width: 100%;
     display: block;
 }
 
 ul {
     list-style: none;
 }
 
 button {
     border: none;
     background-color: transparent;
     outline: none;
     cursor: pointer;
 }
 
 i {
     font-size: var(--font-size-md);
 }
 /* scrollbar style */
 
 ::-webkit-scrollbar {
     width: 8px;
 }
 
 ::-webkit-scrollbar-track {
     background: none;
 }
 
 ::-webkit-scrollbar-thumb {
     background: transparent;
     border-radius: 5px;
 }
 
 .main-container:hover::-webkit-scrollbar-thumb {
     background: var(--normal-purple-color);
 }
 
 .secondary-container:hover::-webkit-scrollbar-thumb {
     background: var(--normal-orange-color);
 }
 /* Reusable classes */
 
 .place-items-center {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .d-grid {
     display: grid;
 }
 
 .d-flex {
     display: flex;
 }
 
 .card-1 {
     padding: var(--padding-sm);
     border-radius: 1rem;
     transition: .3s;
 }
 
 .card-2 {
     padding: var(--padding-md);
     border-radius: 1rem;
     transition: .3s;
 }
 
 .card-1:hover,
 .card-2:hover {
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
 .margin-b {
     margin-bottom: var(--margin-md);
 }
 /*sidebar */
 
 .dashboard {
     display: flex;
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100vw;
 }
 
 .sidebar {
     flex-direction: column;
     background-color: var(--secondary-background-color);
     height: 100%;
     padding: 0 2rem;
 }
 
 .sidebar-item {
     padding: 1rem;
     margin: 4rem 0;
     border-radius: 50%;
     transition: .3s;
 }
 
 .s-iten-1 {
     background-color: var(--normal-orange-color);
     color: #fff;
 }
 
 .s-iten-2:hover {
     color: #fff;
     background-color: var(--dark-purple-color);
 }
 
 .s-iten-3:hover {
     color: #fff;
     background-color: var(--red-color);
 }
 
 .s-iten-4:hover {
     color: #fff;
     background-color: var(--normal-orange-color);
 }
 
 .logo {
     position: absolute;
     top: 4rem;
     color: var(--dark-purple-color);
 }
 
 .ri-english-input {
     font-size: var(--font-size-lg);
     font-weight: 700;
 }
 /* container */
 
 .container {
     grid-template-columns: 5fr 2.3fr;
     width: 100%;
     overflow: hidden;
 }
 
 section {
     padding: var(--padding-lg);
 }
 /* main */
 
 .top-bar {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .open-menu-icon {
     font-size: var(--font-size-lg);
 }
 
 .open-menu-icon:hover {
     color: var(--dark-purple-color);
 }
 
 .main-container {
     overflow-y: scroll;
 }
 
 .task-container,
 .task-container-2 {
     grid-template-columns: 1fr 1fr;
     gap: var(--gap);
 }
 
 .exam {
     background-color: var(--dark-purple-color);
 }
 
 .deadline {
     text-transform: uppercase;
 }
 
 .exam h2 {
     color: #ffffff;
 }
 
 .exam p {
     color: var(--normal-purple-color);
 }
 
 .start-testing-container {
     align-items: center;
     justify-content: space-between;
 }
 
 .start-testing-container a {
     color: #fff;
 }
 
 .check-mark {
     font-size: var(--font-size-lg);
     display: inline-block;
     margin-bottom: var(--margin-sm);
 }
 
 .homework {
     background-color: var(--light-orange-color);
 }
 
 .homework .check-mark {
     color: var(--dark-orange-color);
 }
 
 .homework h4 {
     color: var(--dark-orange-color);
 }
 
 .homework p {
     color: var(--normal-orange-color);
 }
 
 .reading {
     background-color: var(--light-purple-color);
 }
 
 .reading .check-mark {
     color: var(--dark-purple-color);
 }
 
 .reading h4 {
     color: var(--dark-purple-color);
 }
 
 .reading p {
     color: var(--normal-purple-color);
 }
 
 .group-task-container {
     grid-template-columns: 2fr 3fr;
     gap: var(--gap);
 }
 
 .bell-icon {
     color: var(--dark-orange-color);
     background-color: var(--light-orange-color);
     padding: var(--padding-xsm);
     border-radius: 1rem;
     display: inline-block;
     margin-bottom: var(--margin-sm);
 }
 
 .progress-cover {
     position: relative;
     height: 1rem;
     width: 80%;
     background-color: #F4F5F7;
     border-radius: 5px;
     overflow: hidden;
 }
 
 .progress {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 75%;
     background-color: var(--normal-orange-color);
 }
 
 .group-info {
     box-shadow: 0 2px 38px 0 rgba(0, 0, 0, 0.1);
 }
 
 .group-homework {
     background-color: var(--normal-orange-color);
     align-items: center;
     justify-content: space-between;
     margin-block: var(--margin-sm);
     color: #fff;
 }
 
 .group-homework-title {
     color: #fff;
 }
 
 .today-lesson {
     justify-content: space-between;
 }
 
 .grammer-course {
     grid-template-columns: 1fr 1fr;
     gap: var(--gap);
 }
 
 .course {
     align-items: center;
     justify-content: space-between;
     border: 1px solid rgba(0, 0, 0, .1);
     margin-bottom: 2rem;
     width: 100%;
 }
 
 .grammer,
 .dictionary {
     align-items: center;
     gap: var(--gap);
 }
 
 .grammer-icon {
     color: var(--dark-purple-color);
     background-color: var(--light-purple-color);
     padding: var(--padding-xsm);
     border-radius: 1rem;
 }
 
 .dictionary-icon {
     color: var(--dark-orange-color);
     background-color: var(--light-orange-color);
     padding: var(--padding-xsm);
     border-radius: 1rem;
 }
 /* secondary */
 
 .secondary-container {
     background-color: var(--tertiary-background-color);
     overflow-y: scroll;
 }
 
 .profile {
     flex-direction: column;
     align-items: center;
 }
 
 .profile-img-box {
     position: relative;
     height: 10rem;
     width: 10rem;
     overflow: hidden;
     border-radius: 50%;
 }
 
 .profile-img-box img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .discount {
     margin: 2rem 0;
 }
 
 .progress-title {
     margin-bottom: 2rem;
 }
 
 .progress-icon {
     padding: 1.2rem;
     border-radius: 1rem;
     color: #fff;
 }
 
 .progress-text-1 {
     color: var(--dark-purple-color);
     font-weight: 600;
 }
 
 .progress-text-2 {
     color: var(--normal-orange-color);
     font-weight: 600;
 }
 
 .progress-text-3 {
     color: var(--red-color);
     font-weight: 600;
 }
 
 .progress-bg-1 {
     background-color: var(--dark-purple-color);
 }
 
 .progress-bg-2 {
     background-color: var(--normal-orange-color);
 }
 
 .progress-bg-3 {
     background-color: var(--red-color);
 }
 
 .courses-progress .course {
     justify-content: left;
     gap: var(--gap);
 }
 /* responsive starts here */
 
 @media screen and (max-width: 1220px) {
     .secondary-container h3 {
         font-size: var(--font-size-sm);
     }
     .secondary-container h2 {
         font-size: 2rem;
     }
 }
 
 @media screen and (max-width: 1160px) {
     .container {
         display: block;
         overflow: auto;
     }
 }
 
 @media screen and (max-width: 830px) {
      ::-webkit-scrollbar {
         width: 0px;
     }
     .task-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media screen and (max-width: 700px) {
     section {
         padding: var(--padding-md);
     }
     .group-task-container {
         grid-template-columns: 1fr;
     }
     .grammer-course {
         grid-template-columns: 1fr;
     }
 }
 
 @media screen and (max-width: 550px) {
     .sidebar {
         padding: 0 1rem;
     }
     .logo {
         top: 2rem;
     }
     section {
         padding: var(--padding-sm);
     }
     .task-container-2 {
         grid-template-columns: 1fr;
     }
     h1 {
         font-size: var(--font-size-lg);
     }
 }

Don’t forget to Subscribe to our YouTube Channel for more.

Subscribe to iMe Creative

Download complete source code and images