The Odin Project - Admin dashboard solution

This is a solution to Project: Admin Dashboard for the Odin Project. The Odin Project provides a free open-source coding curriculum that can be taken entirely online.

Project: Admin Dashboard is one of two projects in the Intermediate HTML and CSS Course. It provides an opportunity to practice building layouts with CSS Grid.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The brief for this project was to build out an admin dashboard similar to the one in the design file, using CSS Grid for the majority of the layout work.

Screenshot

Links

• GitHub repository
• Live site

My process

Build with

• Semantic HTML
• CSS Grid
• CSS Flexbox
• SVG icons

What I learned

I used CSS Grid to lay out the sidebar, header, and main-content containers within the <main> element:

main {
  flex: 1;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: auto 1fr;
}

/* ... */

.sidebar {
  grid-row: 1 / 3;
  /* ...*/
}

In the header, I laid out the search bar, user info, and buttons with Grid:

.header {
  display: grid;
  grid-template-columns: minmax(13rem, 3fr) minmax(10rem, 2fr);
  gap: 24px;
  /* ... */
}

For the main content, I used nested grids to lay out the projects, announcements, and trending items:

.main-content {
  display: grid;
  grid-template-columns: 3fr minmax(15rem, 1fr);
  /* ... */
}

/* ... */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 20px;
  align-items: stretch;
  /* ... */
}

I did not use grids to lay out the navigation and branding sections in the sidebar. I wanted the SVG icons to be part of the links. Using inline SVGs allows them to change color when the links are active. Nesting the links in an unordered list within a <nav> element improves their accessibility with screen readers.

Continued development

With the exception of ARIA attributes, I only used HTML and CSS features that were covered in the curriculum of the Full Stack JavaScript learning path up to this project.

Responsive design is not covered until much later in the curriculum. I made my solution as responsive as possible with the tools I had available, using CSS Grid and Flexbox, but no media queries. For mobile screens, the design would have to change significantly, for example by changing the sidebar to a hamburger menu.

Web accessibility is also covered much later in the curriculum. I used what I have learned about accessibility while working on Frontend Mentor challenges.

Useful resources

For this project, I spent more time on the SVG icons than on Grid or Flexbox. Here are the resources I used to make the icons interactive and accessible:

• Icons in Learn Responsive Design on web.dev - This article was the starting point for my deep dive into working with SVG icons.
• Accessible icon links by Kitty Giraudel - This article is a step-by-step guide on how to implement a link with an SVG icon without text and make it accessible.
• Accessible Icon Buttons by Sara Soueidan - This article discusses server options buttons with SVG icons, with and without text. I chose technique #1: accessible visually hidden text for the "watch" buttons on the project cards.
• Inclusively Hidden by Scott O'Hara - This article helped me with the CSS for the "sr-only" class on the SVG icon buttons and links.

Author

I'm an aspiring web developer and a former chemist. What I bring from chemistry to software development is a systematic approach to problem solving and the perseverance to not give up easily.

• Personal Website - Sabine Emden
• Mastodon - @sabineemden

Acknowledgements

This solution uses Josh Comeau's CSS reset.

The font family used in this project is Roboto by Christian Robertson. The fonts are licensed under the Apache License, Version 2.0.

The SVG icons are available from the Material Design Icons by Pictogrammers.

The Circle Avatar Vectors were created by Laura Reed and are licensed under CC Attribution License.

I took some inspiration from the user interface of GitHub.com to figure out whether the icons on the project cards should be buttons or links.