HTML CSS Dashboard [video course]

£16
£16
frontendjoe
15 ratings

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.

Ratings

5.0
(15 ratings)
5 stars
100%
4 stars
0%
3 stars
0%
2 stars
0%
1 star
0%
Powered by

Checkout

HTML CSS Dashboard [video course]

Enter your info to complete your purchase

Card

or pay with
You'll be charged US$16.