You are currently viewing Simple Dashboard Design Code in HTML & CSS

Simple Dashboard Design Code in HTML & CSS

Simple Dashboard Design Code in HTML & CSS

 
 
Simple Dashboard Design Code in HTML & CSS
Simple Dashboard Design Code in HTML & CSS
 
 
 

Dashboard Design Code in HTML & CSS

 
Hello Learners…….Welcome to code with the random blog…Today in this blog we are going to learn how to build Dashboard Design  Using HTML and CSS only……And I am damn sure that after reading this blog you will able to create a dashboard Design Using HTML & CSS.
Code byN/A
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYES
Dashboard Design Table
 
What is a dashboard?
 
It is a short report which allows displaying of visual data in a given time in a meaningful manner and aids a 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.

 

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

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 Dashboard Design :-

Here we want to add section id which is sidebar div class is white label. Then we want to list the dashboard one by one.
So here is the 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 and while other for main- content. So we made two sections using the 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 amazon AWS.Don’t worry you don’t need to know about the Amazon AWS service for basic information.AWS service is a cloud service provided by 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>

More HTML Code For Dashboard Design

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

<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:-

 
Simple Dashboard Design Code in HTML & CSS
Simple Dashboard Design Code in HTML & CSS
 

CSS CODE Dashboard Design:-

As our basic layout is done for the dashboard page but it still looks boring and disturbing. So what to do now?

I think what if we add some colors and alignment? Let’s see:-

50+ Html ,Css & Javascript Projects With Source 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 and their selectors if you are then move forward to the CSS code. Basically, we are using the Border-Box model, Flex-box for styling, and more basic concepts like padding, margin, and 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: 0.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: 0.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:-

 
Simple Dashboard Design Code in HTML & CSS
Simple Dashboard Design Code in HTML & CSS
 
Hope you liked this tutorial and are able to make your own Dashboard Design using HTML and CSS and improve your efficiency in Frontend development.
 
 
If you are facing any problems please feel free to contact me or you can comment on your problems.
Also, feel free to comment down your appreciation so that It will motivate more such content.
 
 
THANK YOU…..

Which code editor do you use for this dashboard Design project coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!

Leave a Reply