HTML CSS Dashboard [video course]
Intro
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
Part Three
- Add images to the project
- Create a flexbox avatar list
- Build semantic headers using flexbox space-between
- Compose a timeline component using pseudo elements
- Introduction to the CSS calc function
- Debugging code in browser dev tools
Part Four
- Refactor dashboard layout to use CSS grid
- Break styles.css down into separate files
- Explore grid for responsive design with less media queries
- Introduction to the bootstrap framework
- Showcase the advantages of grid over flexbox
Part Five
- Add an animated preloader to our dashboard
- Create an elegant pure CSS dropdown
- Build a floating sidebar only visible on desktop
- Declare and use our "Rule Of 3" variables
- Showcase the power of "Rule Of 3" variables
- Use browser dev tools to compose a range of themed dashboards
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 code
What's included
🔥 Over 4.5 hours of video content (5 videos)
🔥 HTML and CSS source code for each part
🔥 Free lifetime updates
Disclaimers
- This course is an ongoing project and updates will be made regularly.
- As it's a digital product, refunds will be offered on a personal basis.
- All thoughts and opinions are my own.