0% completed

All LessonsFree Lessons (7)

Getting Started

Course Introduction

Box Model Review

The Process of Layouting

Challenges with Traditional Layouting

Traditional Layouting - Solution with Flexbox

Media Queries, Responsive Design, Mobile-First

Flexbox Layouting Exercise

Flexbox Layouting Solution

CSS Review Quiz

CSS Review Summary

Using Flexbox Containers

Introduction to Flexbox Using Flexbox - Exercise Using Flexbox - Solutions Flex-direction Flex-direction Exercise Flex-direction Solution Justify-content Justify-content Exercises Justify-content Solution Align-items Align-items Exercises Align-items Solution Flex-wrap Flex-wrap Exercises Flex-wrap Solution Flex-flow: Combining flex-direction and flex-wrap Align-content Align-content Exercise Align-content Solution Flex Container Quiz Using Flexbox Containers - Summary

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 Flex Items Quiz Aligning Individual Flexbox Items - Summary

Designing a Mobile-first Website Using Flexbox

Project Introduction

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

Flexbox Conclusion and Next Steps

Conclusion and Next Steps

Designing Web Layouts with CSS and Flexbox/

...

/

CSS Review Summary

CSS Review Summary

This lesson is a review summary of the first chapter.

We'll cover the following...

The objective of the first chapter of the course is to prepare you for Flexbox and review some CSS required to understand the rest of the course.

The anatomy of

...