We will be building a fully responsive HTML and CSS dashboard from the ground up. Throughout the 5 videos we will explore a variety of CSS tricks and techniques to achieve our end goal - including a detailed comparison between flexbox and grid (with use cases).
Agenda
Part One
- Setup project and create files- Import icons and fonts via CDN's
- Create reset and card CSS styles
- Declare and implement CSS variables
- Build dashboard top row with flexbox
- Start to explore @media queries
Part Two
- Build a donut chart using pure CSS
- Expose our first pseudo element
- Harness the power of grid to build charts
- Create chart gridlines using CSS gradients
- Introduction to responsive flex ordering
Skills you'll gain
Basic HTML including semantic and non-semantic elements Advanced CSS including variables, animations and transitions Responsive design with flex, grid and media queries How to build charts with just HTML and CSS How to use font and icon libraries via CDN's Expert tips on how to write clean and reusable codeWhat's included
Over 1.5 hours of video content (2 videos) HTML and CSS source code for each part Free lifetime updates
