[VIP] 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.