Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Html & CSS Flexbox: Learn and Build Responsive Websites in 2020
Introduction
Course Structure & Kick off (2:41)
Introduction (2:55)
Flexbox Layout Model (3:26)
Create Overall Layout With Parent Properties
Introduction (1:48)
Display (3:59)
Flexbox! What is the default behavior? (3:38)
Define container direction using Flex-direction (4:19)
Wrap items using Flex-wrap (3:26)
Shorthand Flex-flow property (1:59)
Justify-content aligment property (3:49)
Align-items (4:22)
Align-content (3:26)
Flex Item Properties to Fine Tune Layout
Define flex items order with Order property (3:21)
Flex-grow (4:55)
Flex-shrink (2:29)
Flex-basis (2:07)
Flex shorthand property (4:32)
Align-self (2:43)
Create your First Layout with Flexbox
Introduction (0:56)
Holy Grail layout - Create your first real layout (1st version) (5:22)
Holy Grail with Nested Flex Containers (2nd version) (2:09)
Holy Grail Layout - header content (5:35)
Holy Grail Layout - nav content (2:32)
Holy Grail Layout - article content (3:05)
Holy Grail Layout - aside content (1:42)
Holy Grail Layout - footer content (2:08)
Advanced Layout Technique - Part 1 (4:43)
Advanced Layout Technique - Part 2 (Holy Grail) (3:22)
Responsive Design & Media Queries
Introduction and importance of Media Queries (6:05)
Responsive Design without Media Queries (With Flex-Wrap) (2:57)
Make your Webpage with Responsive Layout (Holy Grail Layout) (4:35)
Page content Made With Flexbox for real world
Introduction (0:37)
Responsive Web Gallery (Part 1) - Plan and define the main elements (5:01)
Responsive Web Gallery (Part 2) - Fine-tune your layout (6:41)
Responsive Form built with Flexbox (Part 1) (8:37)
Responsive Form built with Flexbox (Part 2) - Change elements order (3:16)
Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation (6:53)
Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout
Mini Projects With Flexbox & Jquery - Add Interactivity
Introduction (0:35)
Create a FAQS Page with Flexbox & Jquery (9:56)
Create Section Tabs Using Jquery (12:41)
Flexbox Model with Bootstrap Framework
Bootstrap Flex Intro (1:40)
Bootstrap display utility classes and use of Breakpoints for responsive design (7:21)
Flex direction (2:27)
Flex wrap using bootstrap (2:28)
Justify Content (2:18)
Align Items (2:11)
Align Content (2:28)
Align Self (2:16)
Order property applied with Bootstrap (2:40)
Flex Grow/Shrink utility classes (4:14)
Introduction and importance of Media Queries
Complete and Continue