Learn how to build an admin dashboard from scratch using HTML, Materialize CSS, and JavaScript. Get step-by-step guidance for creating responsive layouts and implementing interactive features.
Table of Contents
Admin dashboards play a pivotal role in managing web applications efficiently. They provide administrators with insights, analytics, and controls to oversee various aspects of the system. In this guide, we'll walk through the process of creating a robust admin dashboard using HTML, Materialize CSS, and JavaScript.
Source Code
Step 1 (HTML Code):
Begin by structuring the HTML markup for the admin dashboard. Define the layout and navigation menus. Utilize semantic HTML elements for better accessibility and SEO.
Here's a breakdown of its components:
1. <!DOCTYPE html>: Declares the document type and version of HTML being used.
2. <html lang="en">: The root element of the HTML document, indicating the language used in the document (English, in this case).
3. <head>: Contains meta-information about the HTML document, such as its title, character encoding, and links to external resources like stylesheets and scripts.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Provides instructions to the browser to use the latest rendering engine for Internet Explorer.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive web design, ensuring the page displays correctly on various devices and screen sizes.
- <title>Admin Dashboard</title>: Sets the title of the web page to "Admin Dashboard".
- <link rel='stylesheet' href='...'>: Links to external stylesheets for styling the page. It includes Materialize CSS framework and custom styles defined in styles.css.
- <link href="https://fonts.goog..." rel="stylesheet">: Imports Google's Material Icons font for use in the page.
4. <body>: Contains the content of the web page visible to users.
- <ul id="slide-out" class="side-nav fixed z-depth-2">: Defines a side navigation menu with various menu items for navigation.
- <header>: Represents the header section of the page containing navigation elements.
- <main>: Contains the main content of the dashboard, including various sections like user management, product management, brand management, and category management.
- <footer>: Represents the footer section of the page, providing information about icon credits and the creator of the dashboard.
- <script>: Links to external JavaScript files for interactive functionality. It includes jQuery and Materialize JavaScript framework, as well as a custom script defined in script.js.
5. External resources:
- Materialize CSS and JavaScript frameworks are used for styling and adding interactive elements to the page.
- Google's Material Icons font is imported for using icons in the dashboard.
- Cloudinary is used to host and serve images.
Step 2 (CSS Code):
Incorporate Materialize CSS framework to style the admin dashboard. Customize the appearance to align with the application's branding and requirements.
Let's break it down:
1. header, main, footer:
- These selectors target the <header>, <main>, and <footer> elements in the HTML.
- They all have a padding-left of 240px, which means there will be space of 240px on the left side of these elements.
2. @media query:
- This part applies styles based on the screen width.
- It targets screens with a maximum width of 992px.
- When the screen width is less than or equal to 992px, the padding on the left side of header, main, and footer is reset to 0, effectively removing the extra space.
3. #credits li, #credits li a:
- These selectors target <li> elements and <a> elements within an element with the ID of credits.
- They set the text color to white for both <li> and <a> elements.
4. #credits li a:
- This selector specifically targets <a> elements within #credits.
- It sets the font weight to bold for these <a> elements.
5. .footer-copyright .container, .footer-copyright .container a:
- These selectors target elements with the class container within elements with the class footer-copyright.
- They set the text color to #BCC2E2 for both the .container element and <a> elements inside it.
6. .fab-tip:
- This selector targets elements with the class fab-tip.
- It styles a floating element that appears fixed on the screen.
- It's positioned fixed on the screen, right aligned 85px from the right side.
- It has padding, text alignment, background color, border radius, and text color defined to create a styled tooltip or information box.
header,
main,
footer {
padding-left: 240px;
}
@media only screen and (max-width: 992px) {
header,
main,
footer {
padding-left: 0;
}
}
#credits li,
#credits li a {
color: white;
}
#credits li a {
font-weight: bold;
}
.footer-copyright .container,
.footer-copyright .container a {
color: #BCC2E2;
}
.fab-tip {
position: fixed;
right: 85px;
padding: 0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width: auto;
} Step 3 (JavaScript Code):
Finally, Enhance the dashboard's functionality with JavaScript. Let me explain what each line does:
1. $('.button-collapse').sideNav();: This line selects all elements with the class "button-collapse" and initializes them as side navigation menus using the sideNav() function. This is typically used in mobile responsive designs where a menu collapses into a side navigation bar.
2. $('.collapsible').collapsible();: This line selects all elements with the class "collapsible" and initializes them as collapsible elements using the collapsible() function. Collapsible elements allow users to expand and collapse sections of content, often used for FAQ sections or nested content.
3. $('select').material_select();: This line selects all <select> elements on the page and initializes them as materialize selects using the material_select() function. Materialize is a front-end framework that provides material design components, and material_select() enhances the styling and functionality of dropdown select menus.
Create a JavaScript file with the name 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.
$('.button-collapse').sideNav();
$('.collapsible').collapsible();
$('select').material_select();Final Output:
Conclusion:
Building an admin dashboard with HTML, Materialize CSS, and JavaScript offers a powerful solution for managing web applications. By following the steps outlined in this guide, developers can create visually appealing and functional admin panels tailored to their specific needs. Start developing your admin dashboard today and streamline your web application management process.
Code by: Tirth Patel
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 😊
