Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Html & CSS Flexbox: Learn and Build Responsive Websites in 2020
Introduction
Course Structure & Kick off
Introduction
Flexbox Layout Model
Create Overall Layout With Parent Properties
Introduction
Display
Flexbox! What is the default behavior?
Define container direction using Flex-direction
Wrap items using Flex-wrap
Shorthand Flex-flow property
Justify-content aligment property
Align-items
Align-content
Flex Item Properties to Fine Tune Layout
Define flex items order with Order property
Flex-grow
Flex-shrink
Flex-basis
Flex shorthand property
Align-self
Create your First Layout with Flexbox
Introduction
Holy Grail layout - Create your first real layout (1st version)
Holy Grail with Nested Flex Containers (2nd version)
Holy Grail Layout - header content
Holy Grail Layout - nav content
Holy Grail Layout - article content
Holy Grail Layout - aside content
Holy Grail Layout - footer content
Advanced Layout Technique - Part 1
Advanced Layout Technique - Part 2 (Holy Grail)
Responsive Design & Media Queries
Introduction and importance of Media Queries
Responsive Design without Media Queries (With Flex-Wrap)
Make your Webpage with Responsive Layout (Holy Grail Layout)
Page content Made With Flexbox for real world
Introduction
Responsive Web Gallery (Part 1) - Plan and define the main elements
Responsive Web Gallery (Part 2) - Fine-tune your layout
Responsive Form built with Flexbox (Part 1)
Responsive Form built with Flexbox (Part 2) - Change elements order
Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation
Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout
Mini Projects With Flexbox & Jquery - Add Interactivity
Introduction
Create a FAQS Page with Flexbox & Jquery
Create Section Tabs Using Jquery
Flexbox Model with Bootstrap Framework
Bootstrap Flex Intro
Bootstrap display utility classes and use of Breakpoints for responsive design
Flex direction
Flex wrap using bootstrap
Justify Content
Align Items
Align Content
Align Self
Order property applied with Bootstrap
Flex Grow/Shrink utility classes
Align-self
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock