View live site on GitHub Pages
Now that you’ve had plenty of practice using Grid, we are going to build a full dashboard design.
In this The Odin Project assignment we are tasked with building a modern, CRM/SaaS-styled admin dashboard. This exercise was specifically designed to build our CSS Grid skills.
- Fully responsive design
- Mobile friendly menu
- Javascript
- CSS
- HTML
I discovered a whole lot about planning your web page/app out! And why a UI/UX designer and Front-End Developer are two different jobs (although I realize sometimes you have to accomplish both). Even though we had a mockup design to base our final web page on, we were also encouraged to make it our own. This led to some serious planning before I even touched the keyboard. Once I had a rough design laid out the next step was getting the CSS Grid exactly how I wanted it. I took it step by step, section by section, but this also took some trial and error to make sure the fractional units weren't stretching any content in ways I didn't want. Using a mix of Grid and Flexbox was extremely gratifying for manipulating the layout just they way I wanted. Especially how easy it was to change only a few lines to transform the desktop layout to a mobile friendly layout. I can't wait to start using more of these properties in my future projects.