3 Dashboard Design Inspirations on CodePen

An easy to read dashboard has from 5-9 pieces of information on it. By combining color, fonts and icons, you can make a dashboard simple and easy to use. I found these three examples on CodePen that you can use to inspire your own designs.

3 Dashboard Designs CodePen
Photo by Lukas from Pexels

Bootstrap 4 Dashboard Stats Example

It shows 6 different statistics using Bootstrap 4. Each statistics is in a separate box that was built using the card layout. @elmorabityounes uses the default classes from Bootstrap to color the background, border and text. The text formatting is kept simple by using header tags to display the copy. Each box has its own icon from Font Awesome. The result is a simple design with no additional CSS or JavaScript.

Bootstrap Dashboard Indicators

When you design a dashboard, you’ll need to use different type of indictors to display information. Herman Starikov shows you how to use Bootstrap to create different indicators. He combines Font Awesome, Flexbox and CSS Animation. Herman also uses icons as decorative background elements. With CSS and Animation, your dashboard doesn’t have to be plain or boring.

Full Dashboard Design

CodePen Admin Dashboard

This complete Dashboard has a statistics, charts, a map and a chat box. Haidarali Nadi Shah demonstrates how to use Flat design, Font Awesome and JavaScript for functionality and additional theming. It includes a side menu bar that shrinks and expands when you click on it.

With the above examples, you can include different pieces of information in your design. You can choose to HTML and CSS, a CSS Framework like Bootstrap or include JavaScript to create more complex functionality. No matter what methods you choose, you can create a dashboard that provides your customers with the information that they need. Before you design your next dashboard, remember to review these 3 Dashboard Design Tips.

Learning JSON

JSON stands for JavaScript Object Notation, which is a format for sharing data. As the name suggests, JSON is derived from JavaScript. Other languages like PHP, Python, Java, C# and Ruby can use it.

Learning JSON
Photo By: Image by xresch on Pixabay

Why use it?

JSON is readable and light weight. It requires less formatting than XML. JSON’s structure is a key-value pair format that is rendered in curly braces. You can choose to use it in a file (*.json), a string or as an object.

How do I create a JSON object?

  • Use curly braces to define the beginning and ending of the object
  • Put data in key/value pairs
  • Use a colon to separate the key from the value
  • Keys are strings
  • Values can numbers, strings, objects, arrays, booleans or null
  • Use a comma to separate each key/value pair

{
	"name" :  "Isaac",
	"age" : 50,
	"job" : "writer",
	"car" : null
}

Build a simple website with JSON

The key/value pair makes it easy to share data in web applications. You’ll need a language like JavaScript to display the data. The Mozilla Developer Network walks you through a simple example in their tutorial using JSON on a website. You build a one page website that lists 3 superheroes.

Modifying the website

The superhero website is a bit plain without images. I downloaded three images from Pixabay and updated the superhero.json file. I added a key/value pair for each image like “imageUrl”: “images/molecule-man.png”. Then, I modified the JavaScript to display the image.

I tweaked the CSS to put a border on each superhero member to make it look a little more card-like.

Screenshot of JSON Superhero Website

Where can I learn more?

Variable Fonts on the Web

Variable fonts is an OpenType font specification that puts different variations of a typeface into one single file instead of multiple font files for every variation that you may need. With a standard font, your visitors have to download multiple files which leads to more HTTP requests and data to their browsers. With a variable font, the file size may be about the same but you’ll have access to a much wider range of styles than currently available. For example, a font like Roboto has twelve font files which includes twelve variants. The variable font has one file and unlimited variants.

Variable Fonts on the Web
Photo By: Maret Hosemann

Can I Use It?

Not all browsers and operating systems support variable fonts. For example, Linux OSes need to download the latest Linux Freetype version and Macs need to use a Mac High Sierra (10.14) and Mojave.

For non-supporting browsers, you can use CSS Feature Queries to determine if it should load a standard font instead.

Why use Variable Fonts?

You can use a single font file that provides you with a wide range of widths, weights, slants and more. With less font files to download, your visitors don’t have as much to download. With a variable font, you have greater flexibility on how your text displays. You can use a wider variety of font variants to create certain affects that help define your style and voice. With most major browsers supporting this font type, you can start to use them in your next project.

Where can I see Variable Fonts in action?

You can try them out on v-fonts and Axis-Praxis.

Where can I learn more?

Coding Challenges

Want to improve your skills as a programmer? You can solve a coding puzzle or challenge. By solving different types of coding puzzles, you can sharpen your problem-solving skills.

Coding Challenges
Photo by Matthew Henry from Burst

Why do a coding challenge?

You want to learn a new programming language. You want to practice software design. You want to keep your programing skills current. You want to get ready for a programming interview. You want to have fun completing a challenge.

What can I do with the code from my challenge?

Write a blog post and share your solution. Share your solution on Twitter and other Social Media platforms. Make it part of an app.

Where do I find them?

It depends on what type of coding challenges that you want to do. Some coding challenges are mathematical, front end or part of a competition. You may need to sign up for an account before solving the challenge.

Project Euler

Project Euler
Project Euler has a series of mathematical and computer programming challenges for you to solve. You can use your own computer and favorite coding editor to solve their problems. Then, you can post your solution on their website.

CodePen Challenges

CodePen Challenges
CodePen has themed challenges that help you to improve your skills by building things. You need a CodePen account to sign up.

Scotch.io Code Challenges

Scotch.io Challenges
Scotch has monthly challenges to help you expand your skills in React, JavaScript or CSS. When you join their community, you receive the challenges by email. You can build your solutions in CodePen or CodeSandbox.

Daily Programmer on Reddit

Reddit Daily Programmer
Daily Programmer has 3 weekly challenges. They are easy, intermediate and hard. These challenges are open to beginners and experienced programmers. You need to join the Reddit Daily Programmer community to post your solution.

Whether you want to join a coding community or not, coding challenges can help you to learn more about programming and keep your skills sharp.

What tools do you use for creating great content?

What tools do you use for creating great content? Writing is challenging. When you need to write for the web, the pressure to create and publish great content makes it even harder.

What tools do you use for creating great content?
Photo by Peter Pryharski on Unsplash

You can choose to start writing. Force yourself to start with an idea and a blank page. Which may result in not so great content. Or you can use a tool or framework to plan out what you want to talk about.

You can use simple tools like mindmapping or an outline like you used in school to write an essay. These are great tools for getting started planning. For some types of writing, you are going to need a different technique.

  • The Core Model
  • Content Framework
  • Pair Writing

The Core Model

What is the Core Model? It is a tool that helps you to map out your business goals, user tasks and context. The Core Model is useful in deciding how users find the content you are planning and sketching out the main content. It helps you to focus on your business goals and user needs before you start writing.

Content Framework

The Content Framework is a form that you can use to answer questions that are vital to the writing process. Questions like who is going to read this, what business goals does this page support, and what tasks do we want the user to do. It helps you do think about what you want to say and who is your audience before you start writing.

Pair Writing

What is Pair Writing? It is borrowed from an agile software development technique called “pair programming“. In Pair Programming, two programmers work together on writing code. One programmer writes the code while the other one reviews it. The second programmer offers suggestions for improvements. The two programmers frequently switch roles. This technique takes longer but generally produces better quality of code.

Pair Writing follows a similar pattern. One person writes while the second person observes, asks questions and provides suggestions. The two writers switch roles to take turns writing and offering suggestions for improvements. This technique can take longer but you get greater involvement from all members of your team.

Writing for the web is challenging. When you have a team of designers, developers, content writers and management, using a writing process like The Core Model makes thing easier. It helps you to plan out your goals, answer questions on what the content should be about and do and create content that focuses on your customers.