Simple play icon Course
Skills Expanded

Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids

by Paul Cheney

This course will teach you how to implement multiple column layouts using standard divisions, Flexbox, and CSS Grids. You'll also examine CSS shapes for interesting text wrapping.

Preview this course

What you'll learn

At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids, you'll learn the skills you need to layout a page using standard divisions and CSS, as well as newer technologies like Flexbox and CSS Grids. First, you'll discover how to automate this process by leveraging the power of SASS operators. Next, you'll explore how to use CSS shapes to create text wrapping. Finally, you'll delve into using CSS Grids for the overall page layout. By the end of this course, you'll have a mobile music player app project that adapts to vertical or horizontal orientation of mobile screens.

Table of contents

Course Overview
1min
Introduction
2mins
Twelve Column Grid
28mins
CSS Shapes
17mins
Flexbox
16mins
CSS Grid
23mins
Music Player Project
27mins

About the author

Paul Cheney

Paul Cheney specializes in Responsive Design, Content Management Systems, and Virtual Reality Photography. He teaches courses for Pluralsight and runs a web development business and Spartan Design University where he hosts resources for many online courses.

See more courses by Paul Cheney
Ready to upskill? Get started