Table of Contents
Simple dashboard design code in HTML and CSS | dashboard design
Dashboard Design | Dashboard Design using HTML and CSS.
Hello Learners…….Welcome to code with the random blog….Today in this blog we aregoing to learn how to build Dashboard Using HTML and CSS only……And I damn sure that after reading this blog you will able to create dashboard.
What is dashboard?
It is a short report which allow to display visual data in given of time in a meaningful manner and aid of chart for easy reference and quick inference.
A dashboard is a visual display of all of your data. While it can be used in all kinds of different ways, its primary intention is to provide information at-a-glance, such as KPIs.
A dashboard usually sits on its own page and receives information from a linked database. In many cases it’s configurable, allowing you the ability to choose which data you want to see and whether you want to include charts or graphs to visualize the numbers.
HTML CODE:-
Here we want to add section id which is sidebar div class is white label.Then we want to list dashboard one by one.
So here are basic styling we are using CSS and for icons we are using Font awesome and inserting their cdn(content-delivery network) in the HMTL file’s title tag.
So you can go through the font-awesome website for more details and how to use Link
We are making two main sections one for sidebar-navigation while other for main- content. So we made two section using section tag(semantic-tag).
Semantic elements = elements with a meaning.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.
Semantic Elements in HTMLMany web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web page:
- <article>
- <aside>
- <details>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
Hope you clearly understand about the section tag.Before going through the content firstly go through the basic concepts of HTML like div tag,span tag,image tag,semantic tag,classes and ids.
In the code we are also using some photos uploaded on the amazon aws.Don’t worry you don’t need to know about the Amazon AWS service but for basic information .AWS service is a cloud service provided by the Amazon.
<section id="sidebar"> <div class="white-label"> </div> <div id="sidebar-nav"> <ul> <li class="active"><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li> <li><a href="#"><i class="fa fa-desktop"></i> My Website</a></li> <li><a href="#"><i class="fa fa-usd"></i> Ecommerce</a></li> <li><a href="#"><i class="fa fa-pencil-square-o"></i> My Blog</a></li> <li><a href="#"><i class="fa fa-sitemap"></i> SEO Tools</a></li> <li><a href="#"><i class="fa fa-line-chart"></i> Reporting</a></li> <li><a href="#"><i class="fa fa-comments-o"></i>Social Marketing</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Get Traffic</a></li> <li><a href="#"><i class="fa fa-users"></i> Employees</a></li> <li><a href="#"><i class="fa fa-calendar-o"></i> Reservations</a></li> <li><a href="#"><i class="fa fa-calendar"></i> Calendar</a></li> </ul> </div> </section>
<section id="content">
<div id="header">
<div class="header-nav">
<div class="menu-button">
<!--<i class="fa fa-navicon"></i>-->
</div>
<div class="nav">
<ul>
<li class="nav-settings">
<div class="font-icon"><i class="fa fa-tasks"></i></div>
</li>
<li class="nav-mail">
<div class="font-icon"><i class="fa fa-envelope-o"></i></div>
</li>
<li class="nav-calendar">
<div class="font-icon"><i class="fa fa-calendar"></i></div>
</li>
<li class="nav-chat">
<div class="font-icon"><i class="fa fa-comments-o"></i></div>
</li>
<li class="nav-profile">
<div class="nav-profile-image">
<img src="https://skynet.marketecture.com/user_avatars/258800/Hayley-Helsten.jpg" alt="profile-img" alt="profile image">
<div class="nav-profile-name">Jane Smith<i class="fa fa-caret-down"></i></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="content-header">
<h1>Dashboard</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="widget-box sample-widget">
<div class="widget-header">
<h2>Widget Header</h2>
<i class="fa fa-cog"></i>
</div>
<div class="widget-content">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png">
</div>
</div>
<div class="widget-box sample-widget">
<div class="widget-header">
<h2>Widget Header</h2>
<i class="fa fa-cog"></i>
</div>
<div class="widget-content">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png">
</div>
</div>
<div class="widget-box sample-widget">
<div class="widget-header">
<h2>Widget Header</h2>
<i class="fa fa-cog"></i>
</div>
<div class="widget-content">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png">
</div>
</div>
<div class="widget-box sample-widget">
<div class="widget-header">
<h2>Widget Header</h2>
<i class="fa fa-cog"></i>
</div>
<div class="widget-content">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png">
</div>
</div>
</div>
</section>
HTML OUTPUT:-
CSS CODE:-
As our basic layout is done for the dashboard page but it still looks boring and disturbed.So what to do now?
I think what if we add some colors and alignment.Let’s see:-
50+ Frontend Project With Code
We will use basic CSS concepts for styling the HTML content.I hope you are properly concerned with the concepts of classes and ids their selectors if you are then move forward to the CSS code.Basically we are using Border-Box model,Flex-box for styling and more basic concepts like padding,margin,float.
html, body {
font-family: 'Open Sans', sans-serif;
height: 100%;
}
body {
background: #FFFFFF;
height: 100%;
}
img {
max-width: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#header {
float: left;
width: 100%;
background: #ffffff;
position: relative;
}
.white-label {
float: left;
background: #33373B;
max-width: 210px;
padding: 10px;
min-height: 44px;
background: #279BE4;
width: 100%;
max-height: 44px;
}
.white-label img {
max-height: 43px;
}
.header-nav {
min-height: 64px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #279BE4;
}
.menu-button {
float: left;
font-size: 29px;
color: #fff;
padding: 12px 19px;
}
.nav ul {
height: 64px;
float: right;
}
.nav ul li {
float: left;
position: relative;
padding: 11px;
}
.nav > ul > li:first-child {
border-left: none;
}
.nav ul li a {
color: #fff;
padding: 1px;
float: left;
}
.nav ul li i {
color: #fff;
}
.nav ul li:hover {
background: #01A9F0;
color: #fff;
}
.user-profile {
float: right;
}
.user-profile > div {
float: left;
padding: 20px 8px;
position: relative;
}
.user-profile i {
font-size: 1.2em;
color: #5F6F86;
}
.user-profile i:hover {
color: #397AC5;
}
.font-icon i:after {
position: absolute;
content: '3';
background: #E74C3C;
color: #fff;
font-size: 12px;
border-radius: 50%;
width: 10px;
height: 10px;
padding: 3px 4px 4px 3px;
text-align: center;
top: 12px;
right: 11px;
}
.font-icon {
padding: 8px 10px;
}
.font-icon i {
font-size: 24px;
}
.nav-mail .font-icon i:after {
background: #2ECC71;
}
div.user-image {
padding: 9px 5px;
margin: 0 5px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.nav-profile {
background: #0274BD;
}
.nav-profile-image img {
width: 39px;
height: 41px;
border-radius: 50%;
float: left;
}
.nav-profile-name {
float: right;
margin: 11px 7px 8px 14px;
color: #fff;
}
.nav-profile-name i {
padding: 0 0 0 11px;
}
.nav-chat i:after {
display: none;
}
#sidebar {
overflow: hidden;
width: 210px;
height: 100%;
float: left;
background: #2A2D33;
}
#sidebar-nav {
width: 106%;
height: calc(100% - 95px);
padding: 0;
background: #2A2D33;
border-right: 1px solid #E0E0E0;
overflow-y: scroll;
}
#sidebar-nav h2 {
color: #60636B;
float: left;
width: 100%;
font-size: .8em;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
padding: 3px 0 2px 20px;
border-top: 1px solid #4D4C4C;
box-sizing: border-box;
margin: 10px 0;
}
#sidebar-nav ul {
}
#sidebar-nav ul li {
}
#sidebar-nav ul li a {
color: #C2C2C2;
font-size: .95em;
padding: 15px 20px;
float: left;
width: 100%;
font-weight: 600;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar-nav ul li:hover a, #sidebar-nav ul li:hover a i, #sidebar-nav li.active a, #sidebar-nav li.active a i {
color: #333;
}
#sidebar-nav ul li:hover a {
background: #fff;
color: #333;
}
#sidebar-nav ul li.active a {
background: #fff;
color: #333;
}
#sidebar-nav ul li.active a i {
background: #fff;
}
#sidebar-nav i {
padding-right: 8px;
font-size: 1.3em;
color: #60636B;
width: 25px;
text-align: center;
}
#content {
float: left;
width: calc(100% - 210px);
height: 100%;
word-wrap: break-word;
background: #FFFFFF;
font-family: Raleway, sans-serif;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.content {
float: left;
background: #E9EEF4;
width: 100%;
height: calc(100% - 64px);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content-header {
background: #fff;
float: left;
width: 100%;
margin-bottom: 15px;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
}
.content-header h1 {
margin: 0;
font-weight: normal;
padding-bottom: 5px;
}
.content-header p {
margin: 0;
padding-left: 2px;
}
.widget-box {
background: #fff;
border: 1px solid #E0E0E0;
float: left;
width: 100%;
margin: 0 0 15px 15px;
}
.widget-header {
background: #279BE4;
}
.widget-header h2 {
font-size: 15px;
font-weight: normal;
margin: 0;
padding: 11px 15px;
color: #F9F9F9;
display: inline-block;
}
.sample-widget {max-width: 47%;}
.widget-box .fa-cog {
float: right;
color: #fff;
margin: 11px 11px 0 0;
font-size: 20px;
}
CSS OUTPUT:-
Hope you liked this tutorial and able to make your own dashboard using HTML and CSS and improved your efficiency in Frontend Devlopement.
If you are acing any problem Please feel free to contact me or you can comment down your problems.
Also feel free to comment down your appreciation so that It will motivate more such content.
THANKYOU…..