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
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
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!