Course info
Nov 13, 2017
1h 56m

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
1h 16m
Oct 26, 2018
Best Practices for Responsive Web-forms
1h 10m
May 31, 2018
Hands-on Responsive Web Design 4: Navigation
1h 36m
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.

Twelve Column Grid
Hello, and welcome back. I'm excited to have you here with me for this module. Since we're taking a holistic approach to learning, we're going to not only build the 12-column grid, but also learn about image sprites, which are used as the social icons in this example's header. First, we will explore image sprites, and then review progressive enhancement, then we'll look at several advanced SaaS capabilities, and finally, we'll build a 12-column grid example with social icons as sprites.

CSS Shapes
Hello and welcome back. I'm excited to have you with me for this module. Since we're building a complete project we're going to cover using Font Awesome, CSS shapes, and clipping paths. First we will build our social icon set using an external font, and then try clipping paths for changing a square graphic into some other shape, and finally, explore the CSS shapes for a text wrapping.

Hello, and welcome back. I'm excited to have you with me for this flexbox module. We will begin by changing the navigation from floats to flexbox. Then we're going to implement a Sass mixin to create a reusable gradient. Next we will review the problems with columns and floats and look at a flexbox solution that works for text. Then we'll look at many of the flexbox parameters using a gallery of images, which I will provide. We will implement a CSS transition on the gallery images, finally, we will test our work on many browsers and devices. The flexbox model provides an efficient way to lay out a line and distribute space among elements within your document. So, what does that mean to you? It means that you can control the layout of children in a parent container. You can tell the children to line up left to right or right to left. You can tell them to line up top to bottom, or bottom to top. You can have them all fit on one line or wrapped to multiple lines. You can control the spacing around the images and text, and align the items, either top or bottom. In short you can do a whole lot of stuff that makes responsive design much easier. Let's get started by grabbing a copy of the start file from the demos for this unit.

CSS Grid
Hello, this is Paul Cheney, let's jump in and explore CSS grid; it's great for responsive layouts. First we'll contrast the difference between flexbox and grids. Next we'll build a page of text with grids, then we'll try an image gallery, and then do a complete page layout using only CSS grids. Finally, we'll test our work in multiple browsers and mobile devices. So what is CSS grid and how does it compare to flexbox. As we saw in the previous module, flexbox is great for laying out items in a single dimension, in a row or a column. Grid is for a layout of items in a two-dimensions, rows and columns. If you want to let your content control the way it's displayed, on a row-by-row or a column-by-column basis, use flexbox. If you want to define a grid and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using CSS or grid templates, that's grid. In this module, we will build three layouts using CSS grids. The first one is just text. The second one will be a new site with the top seven storied represented as images. you can see how the phone, tablet, and desktop are all presented in different ways. In this example we will only use grids on the content of the main tag. In the third example we lay out an entire site, including these six items and position them differently in each of our three layouts. Grab a copy of the start file from the demos for this module. open it in your text editor and let's get started.

Music Player Project
Congratulations, you made it to the end. In this module we are going to combine everything we've learned together to build a music player for mobile devices. First, we will design and build the template, then we're going to design and build the Album page, and then the Artist page. And finally, a Player page, which is linked from the Album and Artist page. In the demos folder I have two Photoshop files with images that are ready to export using Adobe Photoshop generate assets. We learned about that in depth in the second course in this series. In case you don't have Photoshop I have provide the assets as well. I also have a start HTML folder, and I have included a Photoshop file for generating four images that are sized correctly for Safari's add-to-home feature, which we'll demonstrate later.