This project recreates a dashboard provided from a mockup design using CSS Grid and Flexbox. It also includes animations on the buttons and cards.
You can clone the repository and open index.html on your Web browser.
Alternatively, you can view the live version without having to download the source code.
- To understand how to use Grid in conjunction with Flexbox.
- To understand situations where CSS Grid might be more appropriate than Flexbox.
- To understand situations where Flexbox might be more appropriate than CSS Grid.
Through this project, I learned two important tasks -- understanding how to convert a mockup design into an implementation and to understand situations where CSS Grid and Flexbox can be used in conjunction or one over the other for certain situations.
What I concluded is that CSS Grid can be used to provide the foundation for a page's layout. Flexbox can also do the same, but CSS Grid makes this task easier. Another situation where CSS Grid shines is when making cards. This can be applied for elements that describe products, items, or pictures on a website.
Flexbox really excels at laying out small items. Doing so makes us not having to declare grids inside grids (which can become) quite complicated.
I also learned how to implement animations on items. I mainly focused on making animations that would trigger when hovering over the different items of the dashboard.
You can use this website as you wish or improve upon it if you feel like it.