admin-dashboard's Introduction

Admin Dashboard

The live site can be found here

This is the final project from The Odin Project's Intermediate HTML and CSS course. The major focus is layout design, incorporating nested grids and utilizing flexbox where beneficial. This is an all encompassing challenge and can be found here should you like to try it out for yourself.

Design Plan
Challenges Encountered and Knowledge Gained
Languages

Design Plan

The first phase of the project entails setting up the project and layout: Setting up your HTML and CSS with some simple dummy content. Applying Grid properties for the basic layout. Taking each section at a time targeting nested elements into Grid cells or Flexbox containers.

Challenges Encountered and Knowledge Gained

The ease of CSS variables is by far more convenient for updating overall styling.

    :root{
        --blue: rgb(25,146,212);
        --yellow: rgb(255,198,0);
        --lite-text: hsl(0, 2%, 12%);
    }

In my excitement to begin the project, I did not realize that icons were furnished. It was quite an experience to create my own. I faced challenges with sizing in different areas of the layout, but prevailed with a simple transform:
```
    .profile i{
        color: var(--blue);
        transform: scale(1.7);
        }
```

I found grid-template-areas to be the simplest way of defining cell placement.

    .main{
        display: grid;
        grid-gap: 1.5em;
        grid-template-columns: repeat(2, minmax(150px, 500px)) 25%;
        grid-template-areas: "project-title . announce-title"
                             "projects projects announcements"
                             "projects projects trend-title"
                             "projects projects trending";
    }