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.
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.
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.