Creating Responsive Pages with CSS FlexBox

By Jeff Batt
Flexboxes make creating web page layouts quicker, easier, and offer greater flexibility than rows and columns. This course will teach you how to get started with Flexboxes using nothing but CSS.
Play course overview
Course info
Rating
(28)
Level
Intermediate
Updated
May 1, 2020
Duration
1h 21m
Table of contents
Course Overview
Course Overview 2m
Understanding Flexboxes
Breaking down a Design to Flexboxes 3m Defining Direction with Rows and Columns 2m Exploring the Main and Cross Axes 1m Exploring the Project Files 1m Knowing the Basics and Flexbox Terminology 1m Module Conclusion 1m Module Introduction 1m Understanding the Flexbox Container 1m
Setting up the Flexbox Container
Adjusting the Content along the Cross Axis 3m Adjusting the Flex Direction 3m Aligning Items along the Cross Axis 3m Creating the Container 5m Module Conclusion 1m Module Introduction 0m Nesting Containers within Containers 7m Spacing Content along the Main Axis with Justify 7m Wrapping Content to the Next Line 4m
Adjusting the Flexbox Items
Adjusting the Size of Specific Items with Grow 5m Aligning Specific Flex Items 3m Changing the Order of Items 4m Defining the Flex Item Default Size 3m Fine Tuning Content with CSS 3m Making Flex Items Shrink 3m Module Conclusion 1m Module Introduction 1m
Solving Flexbox Challenges
Module Conclusion 1m Module Introduction 0m Setting up Challenge One 0m Setting up Challenge Two 1m Walking through the Challenge One Solution 4m Walking through the Challenge Two Solution 4m When Not to Use Flexbox 1m
Description
Course info
Rating
(28)
Level
Intermediate
Updated
May 1, 2020
Duration
1h 21m
Description

Creating flexible web page layouts could take complex CSS floats and media queries or require using into third party frameworks that use rows and columns, that then add a lot of extra code to your website. In this course, Creating Responsive Pages with CSS Flexbox, you’ll learn to create responsive webpages using CSS flexboxes. First, you’ll explore the basic concept of the CSS flexbox. Next, you’ll discover how to quickly layout content with the Flexbox using the axis. Then, you'll learn to get your content to be responsive with Flexbox. Finally, you’ll be presented options you can use to scale and align elements within the Flexbox container. When you’re finished with this course, you’ll have the skills and knowledge of using CSS flexboxes needed to create responsive web pages.

About the author
Jeff Batt
About the author

Jeff has 10+ years experience in the digital learning and media industry. Currently he is Founder and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software ninja in a variety of eLearning, web, and mobile related software applications.

More from the author
Creating Interactivity with JavaScript Based Bootstrap Components
Intermediate
2h 39m
Sep 1, 2020
JavaScript Arrays and Collections
Beginner
1h 57m
Dec 31, 2019
More courses by Jeff Batt
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Jeff Batt, and welcome to my course on Creating Responsive Pages with CSS FlexBox. I am the head trainer with learningdojo.net. CSS3 introduced flexboxes, which allow you to easily create responsive layouts without having to use CSS floats. You can quickly lay out content in horizontal or vertical stacks with very little CSS and even make it responsive without having to use extensive media queries. This course is designed to walk you through hands‑on examples of how to create responsive web layouts using nothing but CSS flexboxes, and even turn non‑responsive content into responsive layouts pretty quickly. Some of the major topics will include understanding the flexbox container, quickly stacking content in rows and columns, adjusting layout options with FlexBox attributes, modifying specific items within the flexbox, having content wrap and adjust based on the browser size. By the end of this course, you'll be comfortable with how to create CSS flexboxes to design responsive web pages without having to rely on any external JavaScript libraries. You'll even get to work through some flexbox challenges. Before beginning this course, you should be familiar with HTML and CSS basics. I hope you'll join me on this journey to learn CSS flexboxes with the Creating Responsive Pages with CSS FlexBox course, at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT