Description
Course info
Rating
(30)
Level
Intermediate
Updated
Nov 13, 2017
Duration
1h 57m
Description

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.

About the author
About the author

Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in the field and share the latest technology with his students.

More from the author
Hands-on JavaScript Project: JSON
Beginner
1h 16m
Oct 26, 2018
Best Practices for Responsive Web-forms
Beginner
1h 10m
May 31, 2018
Hands-on Responsive Web Design 4: Navigation
Intermediate
1h 37m
Jan 22, 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, my name is Paul Cheney, let me tell you about this series of hands-on responsive design courses. At the heart of developing any responsive website is a thorough knowledge of how use HTML 5, CSS3, and Sass. In Responsive Web Design 3: Columns, Flexbox, and Grids, you will learn the skills you need to lay out pages using a grid with traditional floats and divisions. You will automate this process by leveraging the power of Sass operators. This approach works on all modern and older browsers. In addition, we will explore the new flexbox, which is great for laying out items both horizontally and vertically. We'll then move onto my favorite, CSS grids, which is more for overall page layout. You will learn how simple it is to build any responsive layout using named areas. You will build a mobile music player interface, which includes everything we've covered in this course. As we're moving though the course we'll also learn about image sprites, fonts for icons, clipping paths for images, and wrapping text. When you're finished with this course you will have built several functioning examples, which you can use in your next client project. Please join me as we explore flexbox, grids, icons, and paths in this third of four hands-on responsive design courses from Pluralsight.