Learn how to create a responsive product dashboard with HTML, CSS, and JavaScript in this step-by-step guide. Get tips on how to build a grid system and make it interactive.
Table of Contents
A product dashboard is a web application that provides users with key information about a company's products in a visually appealing and easy-to-understand format. It allows users to quickly access information about the products they are interested in, such as price, availability, and customer reviews. A product dashboard can be an essential tool for businesses as it helps them to showcase their products and improve their sales.
However, it is important to note that a responsive design is crucial for a product dashboard as it ensures that the dashboard looks great on any device, including desktops, laptops, tablets, and smartphones. With more people accessing the internet on their mobile devices, having a responsive product dashboard can help improve the user experience and increase engagement.
In this article, we will provide a step-by-step guide on how to create a responsive product dashboard using HTML, CSS, and JavaScript. We will start by setting up the HTML structure, move on to styling with CSS, and finally add dynamic interactions with JavaScript. By the end of this article, you should be able to create your own product dashboard that looks great on any device.
Let's start making an amazing responsive product dashboard using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our product dashboard.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's a breakdown of the code:
The <!DOCTYPE html> declaration at the top of the code tells the web browser what version of HTML the page is using.
The <html lang="en"> element creates the root element of the HTML page and specifies the language of the page.
The <head> element contains metadata about the page such as the page title and information about how the page should be displayed.
The <title> element sets the title of the page, which is displayed in the browser tab.
The <meta> element sets the character encoding for the page and specifies how the page should be displayed on different devices.
The <link> element links to an external stylesheet called styles.css, which is used to apply styles to the HTML elements on the page.
The <body> element contains the content of the web page that will be displayed in the browser.
The <div> element with the class app-container defines a container that holds the entire app.
The <div> element with the class sidebar defines a sidebar container that contains navigation links.
The <ul> element with the class sidebar-list defines an unordered list of navigation items.
The <li> element with the class sidebar-list-item defines a list item for each navigation item.
The <a> element creates a hyperlink to another page or section within the same page.
The <svg> element defines an inline SVG image.
The <span> element defines a section of text within a document.
The <div> element with the class app-content defines the main content of the app.
The <h1> element with the class app-content-headerText creates a header for the content section.
The <input> element with the class search-bar creates a search bar for filtering content.
The <div> element with the class filter-button-wrapper creates a button to open a filter menu for the content.
The <select> element creates a dropdown list of options for filtering content.
The <label> element creates a label for the dropdown list.
The <div> element with the class filter-menu-buttons contains buttons to reset or apply the selected filters.
The <button> element creates a button for resetting or applying filters.
This is the basic structure of our product dashboard using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the product dashboard is in place, the next step is to add styling to the product dashboard using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our product dashboard.
The code defines variables using the :root selector to specify the main colors and styles that will be used throughout the page. The --app-bg variable is used to specify the background color of the page. The --sidebar variable specifies the color of the sidebar, and the --app-content-main-color variable specifies the main color of the page content.
The code also defines two different sets of variables for the :root selector and the .light:root selector, which allows for the page to have a light or dark mode.
The rest of the code defines the layout of the page. The body and html elements have their margins and padding set to 0, and their height and width set to 100% to ensure that the page fills the entire browser window. The font-family is set to "Poppins", a sans-serif font from Google Fonts.
The .app-container class defines a container that holds the entire page content. It has a border-radius of 4 pixels, a max-width of 2000 pixels, and a box-shadow of 0px 2px 8px to give the container some depth.
The .sidebar class defines the sidebar that appears on the left-hand side of the page. It has a fixed width of 200 pixels and a flex-shrink value of 0, which means it won't shrink if the screen size is reduced. The .sidebar-list and .sidebar-list-item classes define the list of links that appear in the sidebar. The .sidebar-list-item class has a position of relative to allow for absolute positioning of the active link indicator.
The .mode-switch class defines the button that allows the user to switch between light and dark mode. The .account-info class defines the section that shows the user's account information.
This will give our product dashboard an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
* {
box-sizing: border-box;
}
:root {
--app-bg: #101827;
--sidebar: rgba(21, 30, 47,1);
--sidebar-main-color: #fff;
--table-border: #1a2131;
--table-header: #1a2131;
--app-content-main-color: #fff;
--sidebar-link: #fff;
--sidebar-active-link: #1d283c;
--sidebar-hover-link: #1a2539;
--action-color: #2869ff;
--action-color-hover: #6291fd;
--app-content-secondary-color: #1d283c;
--filter-reset: #2c394f;
--filter-shadow: rgba(16, 24, 39, 0.8) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.light:root {
--app-bg: #fff;
--sidebar: #f3f6fd;
--app-content-secondary-color: #f3f6fd;
--app-content-main-color: #1f1c2e;
--sidebar-link: #1f1c2e;
--sidebar-hover-link: rgba(195, 207, 244, 0.5);
--sidebar-active-link: rgba(195, 207, 244, 1);
--sidebar-main-color: #1f1c2e;
--filter-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
font-family: "Poppins", sans-serif;
background-color: var(--app-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.app-container {
border-radius: 4px;
width: 100%;
height: 100%;
max-height: 100%;
display: flex;
overflow: hidden;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
max-width: 2000px;
margin: 0 auto;
}
.sidebar {
flex-basis: 200px;
max-width: 200px;
flex-shrink: 0;
background-color: var(--sidebar);
display: flex;
flex-direction: column;
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
}
.sidebar-list {
list-style-type: none;
padding: 0;
}
.sidebar-list-item {
position: relative;
margin-bottom: 4px;
}
.sidebar-list-item a {
display: flex;
align-items: center;
width: 100%;
padding: 10px 16px;
color: var(--sidebar-link);
text-decoration: none;
font-size: 14px;
line-height: 24px;
}
.sidebar-list-item svg {
margin-right: 8px;
}
.sidebar-list-item:hover {
background-color: var(--sidebar-hover-link);
}
.sidebar-list-item.active {
background-color: var(--sidebar-active-link);
}
.sidebar-list-item.active:before {
content: "";
position: absolute;
right: 0;
background-color: var(--action-color);
height: 100%;
width: 4px;
}
@media screen and (max-width: 1024px) {
.sidebar {
display: none;
}
}
.mode-switch {
background-color: transparent;
border: none;
padding: 0;
color: var(--app-content-main-color);
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: 8px;
cursor: pointer;
}
.mode-switch .moon {
fill: var(--app-content-main-color);
}
.mode-switch.active .moon {
fill: none;
}
.account-info {
display: flex;
align-items: center;
padding: 16px;
margin-top: auto;
}
.account-info-picture {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.account-info-picture img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.account-info-name {
font-size: 14px;
color: var(--sidebar-main-color);
margin: 0 8px;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-info-more {
color: var(--sidebar-main-color);
padding: 0;
border: none;
background-color: transparent;
margin-left: auto;
}
.app-icon {
color: var(--sidebar-main-color);
}
.app-icon svg {
width: 24px;
height: 24px;
}
.app-content {
padding: 16px;
background-color: var(--app-bg);
height: 100%;
flex: 1;
max-height: 100%;
display: flex;
flex-direction: column;
}
.app-content-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px;
}
.app-content-headerText {
color: var(--app-content-main-color);
font-size: 24px;
line-height: 32px;
margin: 0;
}
.app-content-headerButton {
background-color: var(--action-color);
color: #fff;
font-size: 14px;
line-height: 24px;
border: none;
border-radius: 4px;
height: 32px;
padding: 0 16px;
transition: 0.2s;
cursor: pointer;
}
.app-content-headerButton:hover {
background-color: var(--action-color-hover);
}
.app-content-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 4px;
}
.app-content-actions-wrapper {
display: flex;
align-items: center;
margin-left: auto;
}
@media screen and (max-width: 520px) {
.app-content-actions {
flex-direction: column;
}
.app-content-actions .search-bar {
max-width: 100%;
order: 2;
}
.app-content-actions .app-content-actions-wrapper {
padding-bottom: 16px;
order: 1;
}
}
.search-bar {
background-color: var(--app-content-secondary-color);
border: 1px solid var(--app-content-secondary-color);
color: var(--app-content-main-color);
font-size: 14px;
line-height: 24px;
border-radius: 4px;
padding: 0px 10px 0px 32px;
height: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-size: 16px;
background-repeat: no-repeat;
background-position: left 10px center;
width: 100%;
max-width: 320px;
transition: 0.2s;
}
.light .search-bar {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.search-bar:placeholder {
color: var(--app-content-main-color);
}
.search-bar:hover {
border-color: var(--action-color-hover);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236291fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.search-bar:focus {
outline: none;
border-color: var(--action-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.action-button {
border-radius: 4px;
height: 32px;
background-color: var(--app-content-secondary-color);
border: 1px solid var(--app-content-secondary-color);
display: flex;
align-items: center;
color: var(--app-content-main-color);
font-size: 14px;
margin-left: 8px;
cursor: pointer;
}
.action-button span {
margin-right: 4px;
}
.action-button:hover {
border-color: var(--action-color-hover);
}
.action-button:focus, .action-button.active {
outline: none;
color: var(--action-color);
border-color: var(--action-color);
}
.filter-button-wrapper {
position: relative;
}
.filter-menu {
background-color: var(--app-content-secondary-color);
position: absolute;
top: calc(100% + 16px);
right: -74px;
border-radius: 4px;
padding: 8px;
width: 220px;
z-index: 2;
box-shadow: var(--filter-shadow);
visibility: hidden;
opacity: 0;
transition: 0.2s;
}
.filter-menu:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--app-content-secondary-color);
bottom: 100%;
left: 50%;
transform: translatex(-50%);
}
.filter-menu.active {
visibility: visible;
opacity: 1;
top: calc(100% + 8px);
}
.filter-menu label {
display: block;
font-size: 14px;
color: var(--app-content-main-color);
margin-bottom: 8px;
}
.filter-menu select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
padding: 8px 24px 8px 8px;
background-position: right 4px center;
border: 1px solid var(--app-content-main-color);
border-radius: 4px;
color: var(--app-content-main-color);
font-size: 12px;
background-color: transparent;
margin-bottom: 16px;
width: 100%;
}
.filter-menu select option {
font-size: 14px;
}
.light .filter-menu select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.filter-menu select:hover {
border-color: var(--action-color-hover);
}
.filter-menu select:focus, .filter-menu select.active {
outline: none;
color: var(--action-color);
border-color: var(--action-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.filter-menu-buttons {
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-button {
border-radius: 2px;
font-size: 12px;
padding: 4px 8px;
cursor: pointer;
border: none;
color: #fff;
}
.filter-button.apply {
background-color: var(--action-color);
}
.filter-button.reset {
background-color: var(--filter-reset);
}
.products-area-wrapper {
width: 100%;
max-height: 100%;
overflow: auto;
padding: 0 4px;
}
.tableView .products-header {
display: flex;
align-items: center;
border-radius: 4px;
background-color: var(--app-content-secondary-color);
position: sticky;
top: 0;
}
.tableView .products-row {
display: flex;
align-items: center;
border-radius: 4px;
}
.tableView .products-row:hover {
box-shadow: var(--filter-shadow);
background-color: var(--app-content-secondary-color);
}
.tableView .products-row .cell-more-button {
display: none;
}
.tableView .product-cell {
flex: 1;
padding: 8px 16px;
color: var(--app-content-main-color);
font-size: 14px;
display: flex;
align-items: center;
}
.tableView .product-cell img {
width: 32px;
height: 32px;
border-radius: 6px;
margin-right: 6px;
}
@media screen and (max-width: 780px) {
.tableView .product-cell {
font-size: 12px;
}
.tableView .product-cell.image span {
display: none;
}
.tableView .product-cell.image {
flex: 0.2;
}
}
@media screen and (max-width: 520px) {
.tableView .product-cell.category, .tableView .product-cell.sales {
display: none;
}
.tableView .product-cell.status-cell {
flex: 0.4;
}
.tableView .product-cell.stock, .tableView .product-cell.price {
flex: 0.2;
}
}
@media screen and (max-width: 480px) {
.tableView .product-cell.stock {
display: none;
}
.tableView .product-cell.price {
flex: 0.4;
}
}
.tableView .sort-button {
padding: 0;
background-color: transparent;
border: none;
cursor: pointer;
color: var(--app-content-main-color);
margin-left: 4px;
display: flex;
align-items: center;
}
.tableView .sort-button:hover {
color: var(--action-color);
}
.tableView .sort-button svg {
width: 12px;
}
.tableView .cell-label {
display: none;
}
.status {
border-radius: 4px;
display: flex;
align-items: center;
padding: 4px 8px;
font-size: 12px;
}
.status:before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 4px;
}
.status.active {
color: #2ba972;
background-color: rgba(43, 169, 114, 0.2);
}
.status.active:before {
background-color: #2ba972;
}
.status.disabled {
color: #59719d;
background-color: rgba(89, 113, 157, 0.2);
}
.status.disabled:before {
background-color: #59719d;
}
.gridView {
display: flex;
flex-wrap: wrap;
margin: 0 -8px;
}
@media screen and (max-width: 520px) {
.gridView {
margin: 0;
}
}
.gridView .products-header {
display: none;
}
.gridView .products-row {
margin: 8px;
width: calc(25% - 16px);
background-color: var(--app-content-secondary-color);
padding: 8px;
border-radius: 4px;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}
.gridView .products-row:hover {
transform: scale(1.01);
box-shadow: var(--filter-shadow);
}
.gridView .products-row:hover .cell-more-button {
display: flex;
}
@media screen and (max-width: 1024px) {
.gridView .products-row {
width: calc(33.3% - 16px);
}
}
@media screen and (max-width: 820px) {
.gridView .products-row {
width: calc(50% - 16px);
}
}
@media screen and (max-width: 520px) {
.gridView .products-row {
width: 100%;
margin: 8px 0;
}
.gridView .products-row:hover {
transform: none;
}
}
.gridView .products-row .cell-more-button {
border: none;
padding: 0;
border-radius: 4px;
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: rgba(16, 24, 39, 0.7);
color: #fff;
cursor: pointer;
display: none;
}
.gridView .product-cell {
color: var(--app-content-main-color);
font-size: 14px;
margin-bottom: 8px;
}
.gridView .product-cell:not(.image) {
display: flex;
align-items: center;
justify-content: space-between;
}
.gridView .product-cell.image span {
font-size: 18px;
line-height: 24px;
}
.gridView .product-cell img {
width: 100%;
height: 140px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 4px;
margin-bottom: 16px;
}
.gridView .cell-label {
opacity: 0.6;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
The first block of code adds an event listener to an element with the class "jsFilter". When this element is clicked, it toggles the "active" class on an element with the class "filter-menu". This is commonly used to show or hide a dropdown menu when a button is clicked.
The second and third blocks of code add event listeners to elements with the classes "grid" and "list". When the "grid" element is clicked, it removes the "active" class from the "list" element, adds the "active" class to the "grid" element, and adds the class "gridView" to an element with the class "products-area-wrapper" while removing the class "tableView". This is commonly used to switch between grid and list view for products or other items on a webpage.
Similarly, when the "list" element is clicked, it adds the "active" class to the "list" element, removes the "active" class from the "grid" element, and removes the "gridView" class while adding the "tableView" class to the "products-area-wrapper" element.
The final block of code adds an event listener to an element with the class "mode-switch". When this element is clicked, it toggles the "light" class on the "html" element and the "active" class on the "mode-switch" element. This is commonly used to switch between light and dark mode on a webpage.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
Credit: Aybuke Ceylan
document.querySelector('.jsFilter').addEventListener('click', function () {
document.querySelector('.filter-menu').classList.toggle('active');
});
document.querySelector('.grid').addEventListener('click', function () {
document.querySelector('.list').classList.remove('active');
document.querySelector('.grid').classList.add('active');
document.querySelector('.products-area-wrapper').classList.add('gridView');
document
.querySelector('.products-area-wrapper')
.classList.remove('tableView');
});
document.querySelector('.list').addEventListener('click', function () {
document.querySelector('.list').classList.add('active');
document.querySelector('.grid').classList.remove('active');
document.querySelector('.products-area-wrapper').classList.remove('gridView');
document.querySelector('.products-area-wrapper').classList.add('tableView');
});
var modeSwitch = document.querySelector('.mode-switch');
modeSwitch.addEventListener('click', function () {
document.documentElement.classList.toggle('light');
modeSwitch.classList.toggle('active');
});Final Output:
Conclusion:
In conclusion, creating a responsive product dashboard with HTML, CSS, and JavaScript is a great way to showcase your products in a visually appealing and user-friendly way. By following the steps outlined in this article, you should be able to create a dashboard that is easy to navigate and provides users with the information they need to make informed decisions.
Remember, a responsive design is essential for a product dashboard as it ensures that the dashboard looks great on any device, from desktops to smartphones. By using HTML, CSS, and JavaScript, you can create a dynamic and interactive dashboard that provides users with a seamless experience.
In addition, there are many ways you can customize your product dashboard to fit your brand and business needs. You can add features such as search filters, sorting options, and product categories to make it easier for users to find what they are looking for.
Overall, a product dashboard is a powerful tool that can help businesses improve their sales and engage with their customers. We hope that this article has provided you with the knowledge and tools you need to create your own responsive product dashboard.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
