Hey everyone
I have finally decided to release my Flexbox course on YouTube for FREE. This course is approximately 6 hours long, however you can pick and choose which parts of the course you may want to learn about.
This course covers the following:-
– Flex Containers
– Flex Items
– Simple Use Cases
– Advanced Use Cases
– A practical project – A Chat Application User Interface (UI)
All resources needed to follow along with this course is available on my Github account. The repository is here: https://github.com/lyraddigital/flexbox-in-depth-course-material
There is also a VSCode extension that contains snippets for the purpose of speeding up the app development. You can either search for “Flexbox In Depth – Course Snippets” in the extensions search box in VSCode itself or you can go to the following link https://marketplace.visualstudio.com/items?itemName=lyrad-digital.ld-fc-snippets
Here is the ultimately breakdown of the course
00:00 Course Introduction
04:27 What you will need for this course
09:09 Flexbox 101
14:37 Creating a Flex Container
17:23 Changing the Main Axis Direction
21:12 Controlling the wrapping of Items
27:00 Setting Flex Flow
30:24 Justifying content along the Main Axis
38:12 Aligning content along the Cross Axis
44:19 Controlling Alignment of Wrapped Items
54:18 Ordering Flex Items
01:04:24 Controlling Flex Item Growth Basics
01:12:14 Flex Item Growth Ratios
01:23:40 Controlling Flex Item Shrinking
01:34:12 A review on Box-Sizing
01:40:51 Explicitly Sizing Flex Items
01:51:56 Flex Basis Gotchas
02:00:34 The Flex Property
02:14:55 Aligning Individual Flex Items
02:17:56 Building a 3 column layout
02:25:04 Building a Basic Sidebar
02:33:11 Vertically aligning text
02:36:00 Centering a Modal Dialog
02:42:55 Creating a Simple Sticky Footer
02:51:18 Simplifying Form Field Alignment
03:04:57 Simple Form Input Designs
03:14:37 The Holygrail layout
03:21:50 The Media Objects layout
03:31:12 A Bootstrap Grid System
03:40:58 Enhancing the Bootstrap Grid System
03:47:02 Building Cards
04:01:00 Building a Netflix movie gallery
04:12:39 The app we are building
04:15:10 Building the basic shell
04:26:46 Building the side bar
04:34:12 Building the search section
04:38:30 Building the add conversation section
04:44:29 Building the chat window
04:49:34 Building the chat title section
04:57:36 Building the chat form
05:03:36 Building an individual conversation item
05:19:27 Fixing conversation item sizing issues
05:27:01 Adding more conversation items
05:29:05 Building chat messages
05:36:55 Sizing chat messages
05:45:38 Aligning chat messages
05:48:49 Adding chat profile pictures
05:55:18 The finishing touches
05:56:47 Conclusion
source
