Profile Picturefrontendjoe

HTML CSS Dashboard [video course]

15 ratings


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).


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


- 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.

Add to cart


(15 ratings)
5 stars
4 stars
3 stars
2 stars
1 star

HTML CSS Dashboard [video course]

15 ratings
Add to cart