Share Description
In this course, you will learn :
- You will gain practical experience designing mobile-responsive web layouts with Flexbox. You will begin with the fundamentals, such as the Box Model and the layouting process.
- Then you'll move on to more advanced concepts like Flexbox containers and aligning individual Flexbox items.
- You will be able to use Flexbox to create beautiful layouts in your own projects.
- Learn the fundamentals of creating web layouts.
- How Flexbox works.
- Gain practical experience designing mobile-responsive web layouts with Flexbox.
Syllabus :
1. Getting Started
- CSS Basics
- Box Model Review
- The Process of Layouting
- Challenges with Traditional Layouting
- Traditional Layouting - Solution with Flexbox
- Media Queries, Responsive Design, Mobile-First
- CSS Review Summary
2. Using Flexbox Containers
- Flex-direction
- Justify-content
- Align-items
- Flex-wrap
- Flex-flow: Combining flex-direction and flex-wrap
- Align-content
- Using Flexbox Containers - Summary
3. Aligning Individual Flexbox Items
- Introduction to Flexbox Item Properties
- Align-self
- Align-self Exercise
- Align-self Solution
- Flex-grow and flex-basis
- Flex-grow and Flex-basis Exercise
- Flex-grow and Flex-basis Solution
- Flex-shrink
- Flex-shrink Exercise
- Flex-shrink Solution
- Flex Shorthand Notation
- Flex Shorthand Notation Exercise
- Flex Shorthand Notation Solution
- Order
- Order Exercise
- Order Solution
- Aligning Individual Flexbox Items - Summary
4. Designing a Mobile-first Website Using Flexbox
- Project Introduction
- Page Layout
- Header Component Layout
- Footer Component
- Main Banner Title and Tagline
- Blog post Box Layouting
- Highlighted Blogposts
- Flexbox Wrapping in Incomplete Rows
- Form Input Field Markup and Layout
- Contact Form Markup
- Removing the Layout Indicators
