Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

CSS Tutorials - Complete Course with Flexbox, Grid, Animations, and Responsive Design

ByteGrad via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Master CSS fundamentals and advanced techniques through this comprehensive tutorial series covering essential layout systems, animations, responsive design, and practical problem-solving. Learn Flexbox through 9 real-world layout examples and crash course fundamentals, then advance to CSS Grid with quick tutorials and responsive dashboard implementations. Explore Sass/SCSS integration with Node.js and NPM for enhanced CSS workflow management. Dive deep into CSS animations and transitions with 20 practical examples covering transforms, keyframes, and animation properties. Master the BEM methodology for organized CSS architecture and discover box-sizing border-box for improved layout control. Solve common layout challenges including sticky footers in both CSS and React, overlapping flex items, spacing between flex elements, and creating full-height divs. Handle responsive design scenarios with techniques for full-screen background images, image sliders using only HTML and CSS, and multi-column layouts that adapt to different screen sizes. Learn advanced styling techniques for interactive elements including hover effects on buttons and images, gradient borders and overlays, and custom select list styling. Address mobile-specific issues like viewport height problems and horizontal scrollbar removal. Explore CSS properties and selectors including the differences between opacity, display none, and visibility hidden, plus :root versus html selector usage. Create practical UI components such as equal-height cards, read-more buttons, blurry background dots, and contact buttons that trigger email clients. Implement text truncation with ellipsis for both single and multiline content, and understand media query specifications for different output types. Complete hands-on projects that reinforce learning through practical application of CSS concepts in real-world scenarios.

Syllabus

Flexbox Crash Course - 9 Layout Examples
Sass / SCSS COMPLETE Tutorial (+ Node.js & NPM) with Real-World Example
CSS Animations & Transitions Course - 20 Examples (transform, keyframes, transition, animation)
Flexbox Tutorial for Beginners (+ Cheatsheet)
CSS Grid in 4 Minutes (+ Cheatsheet)
BEM in CSS Complete Tutorial (+ Examples)
Responsive Dashboard Layouts with CSS Grid
box-sizing: border-box (EASY!)
Sticky Footer in CSS (Best Solution)
Sticky Footer in React (Best Solution)
Make Flex Items Overlap in CSS Flexbox
Set Distance or Space between Flex Items in CSS Flexbox
Make a Div 100% Height of Browser Window / Screen
Make a Div Fill Height of Remaining Space (Best Solution = Flexbox)
What are the Integrity and Crossorigin Attributes?
Make Two Divs Side by Side with CSS
Make Background-Image Fit Screen (Remove White Space) with CSS
Full-Screen Background Image Slider with ONLY HTML & CSS
Display: none Not Working (SOLVED)
How to Display and Hide a Div With CSS
Make Image Darker with CSS
Also define the standard property 'box shadow' for compatibility (SOLVED)
How to Keep Active CSS Style After Click on Button
Change Select List Option Background-Color on Hover in CSS
How to Create a Responsive 3 Column Layout in HTML & CSS
How to Make Button Bigger on Hover in CSS
Make a Circle Inside a Circle in HTML & CSS
How to Create a Responsive 2 Column Layout with CSS
Make Background Image Zoom on Hover in HTML & CSS
How to Split a Background into 2 Colors with HTML & CSS
How to Draw Vertical Line with CSS
How to Create Gradient Borders in CSS
opacity: 0 vs display: none vs visibility: hidden
width 100% not working in CSS (SOLVED)
Fix Mobile Viewport Height Problem with CSS (SOLVED)
How to Blur Background Image in HTML & CSS (No White Edge) (2023)
Create Equal Height Cards Responsively with HTML & CSS Flexbox
How to Create a Read More Button with ONLY CSS
How to Add Gradient Overlay to Image in CSS
:root vs html Selector in CSS
Add Ellipse (…) to Single & Multiline Truncated Text with CSS Text Overflow: Ellipsis
Add Multiple Images with Cool Layout in HTML
Screen vs Print vs All in CSS Media Queries
Create PDF Download Button in CSS
Create Contact Me Button that Opens Email on Click in HTML & CSS
Create Blurry Dot in Background with CSS
How To Do A Simple CSS Reset
Slick Fade-In Animation with CSS
Sleek Fade-Down Animation with CSS
What is 'only screen' in CSS Media Query?
Remove Horizontal Scrollbar with CSS
HTML & CSS Project for Beginners (2024)

Taught by

ByteGrad

Reviews

Start your review of CSS Tutorials - Complete Course with Flexbox, Grid, Animations, and Responsive Design

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.