Css Flexbox In Depth 2022
Last updated 11/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.34 GB | Duration: 6h 1m

Don't just learn CSS Flexbox. Gain experience in it. Take your HTML and CSS to a new level.

What you'll learn

All the CSS properties that are used for Flexbox

How to build some common layouts using Flexbox

How to build some advanced layouts using Flexbox

Gain experience in designing a chat application using Flexbox

Requirements

Reasonable knowledge in CSS

Reasonable knowledge in HTML

Description

In this course you will go deep into understanding how Flexbox can help you design website layouts. We cover what Flexbox is and why we use it. We then step through Flex Containers and Flex Items and what CSS properties are available for both, and how we can configure them correctly. You will also be tested with a helpful quiz after each section.Once gaining the academic knowledge, we ensure you gain some experience, by taking you through some real life examples. We start off with some simple layout problems that were once difficult to solve, but are now easier. Then after we look at some advanced layout problems. We then wrap up your experience by working through building a complete chat application from start to end. This can be use to help you boost your portfolio.In any case Flexbox in modern webpage design is very important to understand. Even when using modern UI framework. All important topics are covered here and this course will take you one step closer to be a web master ;).Do not hesitate to ask questions during this course, we have a great community and the instructor always tries to respond to any questions as soon as posslble.

Overview

Section 1: Introduction

Lecture 1 Welcome

Lecture 2 What you need for this course

Lecture 3 Flexbox 101

Section 2: Flex Containers

Lecture 4 Creating a Flex Container

Lecture 5 Changing the Main Axis Direction

Lecture 6 Controlling the wrapping of Items

Lecture 7 Setting Flex Flow

Lecture 8 Justifying content along the Main Axis

Lecture 9 Aligning content along the Cross Axis

Lecture 10 Controlling Alignment of Wrapped Items

Section 3: Flex Items

Lecture 11 Ordering Flex Items

Lecture 12 Controlling Flex Item Growth Basics

Lecture 13 Flex Item Growth Ratios

Lecture 14 Controlling Flex Item Shrinking

Lecture 15 A review on Box-Sizing

Lecture 16 Explicitly Sizing Flex Items

Lecture 17 Flex Basis Gotchas

Lecture 18 The Flex Property

Lecture 19 Aligning Individual Flex Items

Section 4: Simple Flexbox Use Cases

Lecture 20 Building a 3 column layout

Lecture 21 Building a Basic Sidebar

Lecture 22 Vertically aligning text

Lecture 23 Centering a Modal Dialog

Lecture 24 Creating a Simple Sticky Footer

Lecture 25 Simplifying Form Field Alignment

Lecture 26 Simple Form Input Designs

Section 5: More Advanced Flexbox Use Cases

Lecture 27 The Holygrail layout

Lecture 28 The Media Objects layout

Lecture 29 A Bootstrap Grid System

Lecture 30 Enhancing the Bootstrap Grid System

Lecture 31 Building Cards

Lecture 32 Building a Netflix movie gallery

Section 6: Build a Chat App using Flexbox

Lecture 33 The app we are building

Lecture 34 Building the basic shell

Lecture 35 Building the side bar

Lecture 36 Building the search section

Lecture 37 Building the add conversation section

Lecture 38 Building the chat window

Lecture 39 Building the chat title section

Lecture 40 Building the chat form

Lecture 41 Building an individual conversation item

Lecture 42 Fixing conversation item sizing issues

Lecture 43 Adding more conversation items

Lecture 44 Building chat messages

Lecture 45 Sizing chat messages

Lecture 46 Aligning chat messages

Lecture 47 Adding chat profile pictures

Lecture 48 The finishing touches

Section 7: Conclusion

Lecture 49 Congratulations!!!

Lecture 50 BONUS LECTURE- NEW CSS GRID COURSE!!!!!

Web designers or developers who are looking to advance their knowledge in building complex layouts using CSS,Developers looking to improve their knowledge in CSS,Any developer interested in getting a deep understanding of Flexbox