Hands On Responsive Web Design

This course provides a hands-on experience where you will build several responsive HTML5 web pages ready to use on your next project.
Course info
Rating
(345)
Level
Beginner
Updated
Dec 3, 2014
Duration
4h 22m
Table of contents
Building a Responsive Start File
Navigation Using Pure CSS
Navigation Using jQuery Show/Hide
Navigation Using Option/Select and Suckerfish for Desktop
Navigation Using an Expanding Navigation Button
Responsive Columns Using a 12-column Grid
Responsive Images
Icons
CSS Preprocessor
Description
Course info
Rating
(345)
Level
Beginner
Updated
Dec 3, 2014
Duration
4h 22m
Description

This is a hands-on, project-based course where you follow along as Paul Cheney demonstrates how to build responsive web pages. You will learn about media queries, mobile navigation, responsive images, sprite icons, font icons, partials, and importing with a CSS preprocessor. At the end of the course, you will have several templates ready to use in your next web project.

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 36m
Jan 22, 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Navigation Using Pure CSS
Hello, this is Paul Cheney with Pluralsight. In this project, we're going to begin by taking a quick overview of the Start file that's provided. We're then going to implement a pure CSS navigation for the phone. Now, the purpose of this one is to handle sites with very few navigation items. In this case, I've got an example of four items, which works well with this style of navigation. We're then going to use a clearfix solution which helps us with the tablet enhancement. Notice here that I'm now using a horizontal layout of my navigation elements to take up less space. But on the tablet, I have more space to work with. Then we'll do some desktop enhancements with hover states, which simply don't exist on the other two. Finally, we'll test the entire finished project in multiple browsers and mobile devices.

Navigation Using an Expanding Navigation Button
Hello. This is Paul Cheney with Pluralsight. In the last three modules, we have explored various ways to handle mobile navigation. In this module, we'll explore yet another option for mobile navigation that works well with two level deep menu items. Our Flavors menu will have a drop-down with several choices displayed beneath it. First, we will examine the Start file that's provided. Next, we'll copy a jQuery script that changes the class on the unordered list and the button that we still need to build. We will then test it using Chrome's Inspect element. Next, we will add the CSS and custom open and close graphics. Then we will style the phone and tablet navigation, which will be the same for this module. Next, we'll style the desktop navigation using the same horizontal suckerfish menus we used in the last module. Finally, we will test our code on mobile devices and desktops. Matt has created the phone menu solution which we will use in this project. You can download a copy from his website. If you end up using it for any of your projects, you may consider making a donation.

Responsive Images
Hello. This is Paul Cheney with Pluralsight. Images that respond to the end user's device are an important part of responsive design. You can either scale an image to fit or use a different image depending on the screen size. We will explore both solutions in this module. First, we will set up the local source folder using the Start file provided. Then, we will use the CSS background image property to load different images based on the screen size. Next, we will scale a single image to fit on the phone, the tablet, and the desktop. Then, we will combine both of these solutions into a single solution that allows us to scale and switch images based on the end user's screen width. Finally, we will test our solution on mobile devices and browsers.

Icons
Hello, this is Paul Cheney with Pluralsight. At the conclusion of this module, you will know how to create social icon sprite sheets and how to implement them in your Web page. You will also learn how to use a font for social and other icons. First, we will set up the local source folder using the Start file provided. Then, we will use Photoshop to create a sprite sheet for social media icons. Next, we will implement the stylesheet on our Web page. After that, we will use icons from a font instead of bitmap graphics. Finally, we will test our finished project on desktop and mobile devices.