No Time Dad

A blog about web development written by a busy dad

Responsive Dashboard Tutorial - Part 1

What Is This?

This is the first of several articles in a tutorial series on building a responsive dashboard using HTML, CSS, and a sprinkle of JavaScript. The goal will be to learn about responsive design using plain css and html, and to build an awesome dashboard! The tutorials aren’t meant to be a deep dive on html or css, but they should give you some working knowledge and tools to improve your existing skills.

Each tutorial will be relatively short and can be completed in less than an hour, but it is perfectly fine if it takes you more or less time. Figure out your own pace and stick to it. In this tutorial series you might discover that completing small parts of a large project at a time can be really rewarding and fun. The smaller chunks also allow you to digest and process the information more easily.

Who Is This For?

This is for anyone who only has short blocks of time to work on projects. I am mostly thinking of parents who might only have 30-60 minutes at the end of the day to tinker with things, or just busy people in general who want to keep learning new things. Each part of this tutorial is designed to be “bite-sized”.

With that being said, I think anyone who wants to learn how to build a responsive dashboard, regardless of your schedule, can benefit from these tutorials. For these tutorials, I do expect that you have a basic understanding of HTML and CSS but you do not need to be an expert.

Time Commitment & Goals

This part of the tutorial should take about 30 minutes to complete. Our goals for part 1 are as follows:

  1. Create the project structure and files
  2. Setup our development environment
  3. Scaffold our dashboard with a side nav, toolbar, and content sections

Tutorial

So, let’s get started. We are going to be designing “mobile first” in this tutorial, which means that our primary viewport will be small during development. We’ll use Chrome or Firefox dev tool’s device mode for this. I strongly encourage you to type everything out instead of copying and pasting (except for the css resets, feel free to copy & past those).

Project Structure

We’ll need to create a directory with a couple files for our project. We’ll also need a way to serve our index.html file. There are a few ways we can serve the file, the easiest being just drag the file into your browser and let the browser serve it. The only issue with that, and it is a minor issue, is that you’ll have to remember to refresh the page each time you make a change.

I like to use live-server because it has automatic refreshing, but to install it you need to have npm (Nodejs) installed on your system. A third option would be to use Python’s HttpServer module via python3 -m http.server but you won’t get automatic refreshing. So, the third step below is going to be for live-server and I’ll assume it is being used moving forward. You can choose not to use it in lieu of something else, but just be sure to remember to refresh or do whatever is needed to see changes in the browser.

  1. Wherever you want your project to live, create a new directory called responsive_dashboard and change directory into that directory.
mkdir responsive_dashboard
cd responsive_dashboard
  1. In the responsive_dashboard directory create a file called index.html and a file called styles.css
touch index.html styles.css
  1. Install live-server and start the server in the responsive_dashboard directory. You should be able to load the blank index.html at http://127.0.0.1:8080/ when the server is running
npm install -g live-server
live-server
  1. Open your browser’s dev tools (F12, typically) and toggle the device toolbar (Ctrl+Shift+M in Chrome), and select a small viewport like 300x600
Adding the HTML

Our index.html file is going to contain a link to our stylesheet, as well as a link to the Roboto font that we’ll be using throughout the dashboard.

As mentioned at the start, our dashboard is primarily going to consist of a sidenav, a toolbar, and a content section. All three of these are going to sit in a flexbox container and they will each use flexbox themselves.

  1. Add the following html to your index.html file.
<!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">
  <link rel="stylesheet" href="./styles.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
  <title>Responsive Dashboard</title>
</head>
<body>
  <div class="container">
    <div class="sidenav text-bright">Sidenav</div>
    <div class="content text-bright">
      <div class="toolbar text-bright">Toolbar</div>
      Content
    </div>
  </div>
</body>
</html>

If you open your browser to http://127.0.0.1:8080/ you should see the text Sidenav, Toolbar, and Content stacked on top of each other.

Adding the CSS

We are going to start off with some css resets, which basically just give us a blank slate and level playing field between browsers. I’ll mention them here, but I am going to omit the presets from future css examples in this tutorial. I am also going to define the color palette we’ll be using for the tutorial.

Our dashboard is going to be a dark variant, so I grabbed a random palette from the wonderful Coolors.co that looked nice. The color palette will be defined in the :root selector using CSS custom properties. Custom properties are super convenient for colors because it is easy to get hex or rgb numbers wrong when typing them out in a bunch of different places.

The main thing we are doing with our initial css is just lining things up and giving them a backgground-color property so it is easier to see how our elements align. The other important thing to note here is that we are giving our .sidenav selector a display value of none. We then create a media query with a min-width of 640px that then changes the display to flex. What that means is that the sidenav is going to be hidden on screens smaller than 640px. Later, in another tutorial, we are going to add a drop-down menu to the toolbar to replace the sidenav on small screens. This will be our first taste of “mobile first” since the sidenav will be completely hidden on our small 300x600 viewport in the browser. Once you complete the steps below, try re-sizing the viewport over and under 640px to see how the sidenav shows and hides.

We will first add our container selector, which is the parent that each child section will be inside of. We’ll then add our sidenav selector that will have a height of 100vh because we want the sidenav to go all the way to the top and bottom. After that we’ll add a media query (@media) for all screens with a min-wdith of 640px. This means that the styles inside the media query will not be applied until the screen is larger than 640px. Next we’ll add our content selector that will also have a 100vh and it’s own flexbox. We’ll use flex-grow: 1 to ensure that the content takes up the entire width of the page. Lastly, we’ll define a toolbar selector that will also have its own flexbox. Each div will also have its own background-color so we can tell them apart and see the text. For our dashboard we’ll set the sidenav and toolbar to be the same color.

We also have a text-bright selector which acts as a modifier so we can see the text on the dark background. We will probably remove this later as we apply styles directly to the text on the dashboard, but for now it is a convenient way to change the text color without modifying our more concrete selectors. With modifier selectors you have to be sure that they are defined after the selector they are modifying in the css file, otherwise they will be overwritten by the styles behind them. The other of the selectors in the html itself does not matter, only the order in the css file matters.

  1. In your styles.css file add the css resets to the top.
/* START RESETS */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}

ul,
ol,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
}
/* END RESETS */
  1. After the resets add the remaining css selectors to styles.css
/* START RESETS */
...
/* END RESETS */

/* START DASHBOARD */
:root {
  --oxford-blue: #0b132bff;
  --space-cadet: #1c2541ff;
  --independence: #3a506bff;
  --maximum-blue-green: #5bc0beff;
  --turquoise-blue: #6fffe9ff;
}

.container {
  display: flex;
}

.sidenav {
  /* We want the sidenav to take up the entire height of the viewport */
  height: 100vh;
  /* Hide the sidenav on screens less than 640px */
  display: none;
  flex-direction: column;
  background-color: var(--oxford-blue);
}

@media (min-width: 640px) {
  /* Show the sidenav on screens larger than 640px */
  .sidenav {
    display: flex;
  }
}

.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--space-cadet);
}

.toolbar {
  display: flex;
  background-color: var(--oxford-blue);
}

.text-bright {
  color: var(--turquoise-blue);
}
/* END DASHBOARD */
  1. Switch over to your browser and ensure that you see the toolbar and content sections if you are viewing on a 300x600 viewport.
  2. Expand the viewport to over 640 width (say 650x600) and ensure that you can now see the sidenav, toolbar, and content sections.

Wrapping Up

Awesome! That was a fun first step towards building our dashboard, and we actually accomplished a lot in this short tutorial. In the next tutorial in this series we’ll be focusing on building out the toolbar and how it should look on different size screens.