14 and older
Responsive web design is a relatively new approach to website design that ensures users have a great viewing experience on any device. It has become increasingly important over the last few years as mobile device ownership has exploded and traditional PC sales have slowed.
And now that Google is prioritizing mobile-friendly sites in its search results algorithm, it's essential to make sure your site is optimized for mobile by using responsive design.
Live face-to-face instructor. No minimum class size - all classes guaranteed to run!
Students should have completed Web Development Level 2 or have the equivalent experience before attending this class.
Detailed course outline
Flix: Setting the Viewport Meta Tag
This is the first in a series of exercises where you will work on a mobile website for Flix, a movie review website. In this exercise, you will learn how to set the very important viewport meta tag.
Flix: SVG (Scalable Vector Graphics) & .htaccess Files
Most of today's mobile devices feature high resolution screens that are typically 2-3 times the pixel density of older screens. SVG (scalable vector graphics) work really well for graphics such as icons and logos.
Flix: Mobile-Friendly Forms
HTML5 has new input types and attributes that you can use in forms. In this exercise you will see how HTML 5 input types improve mobile usability.
Flix: Creating a Scrollable Area
In this exercise, you will learn how to make one section of a page scrollable. You will add the "native" scroll bounce people expect on iOS devices.
Flix: Media Queries for Retina/HiDPI Graphics
In this exercise, you will learn how to use a media query to load a high-resolution background image for hi-res devices (which Apple calls Retina displays).
Mobile First vs. Desktop First
How you order media queries is important. Using a mobile first approach, we put mobile rules first, and with a desktop first approach, we put desktop rules first. In this exercise you will explore and weight the pros and cons of both options.
Box Model: CSS3 Box-Sizing & Calc()
In this exercise, you will take a deeper look at the box model, and see how padding affects the size of an element. You will learn how to switch to an alternate box model that makes building CSS layouts easier and more intuitive.
Jive Factory: Creating a Basic Wireframe
This is the first in a series of exercises in which you will create a responsive website for The Jive Factory, using the mobile first approach. We will start by designing the page structure using a wireframe.
Jive Factory: Finishing the Wireframe
In this exercise, we will finish the wireframe by adding the structure for the page at different breakpoints.
Jive Factory: Creating CSS Gradient Patterns
In this exercise, we will add a background pattern using pure CSS gradients. We will also choose a couple of Google-hosted fonts to enhance the typographic style of the site.
Jive Factory: Starting the Header
In this exercise, we will add the HTML for the Logo & Nav and add the CSS for mobile. Then we will style the header for phones and tablets.
Jive Factory: SVG Sprites & Styling the Header for Desktop
In this exercise, we will finish styling the header for tablets and desktops. You will also learn how to use SVG for sprites.
Jive Factory: Final Touches & Limiting Flexible Content
In this exercise, you will optimize the content for specific screen sizes. You will also give the page a centered look by setting some limits on how wide the content can get.
Jive Factory: Responsive Slideshow
In this exercise, you will learn how to create a responsive slideshow using a free jQuery plugin called FlexSlider2.
Off-Screen Side Nav Using Only CSS
Full Screen Backgrounds & Viewport Sizing Units vh & vw
In this exercise, you will create a page header that fills the entire screen with an image and heading. This is often called a hero image.
Bootstrap: Getting Started
Bootstrap 3 is a powerful framework that can make web development faster and easier. In this exercise, you will start coding a page using Bootstrap's basic elements.
Bootstrap: More Elements & Nesting Grids
In this exercise, you will learn about some more of Bootstrap's components and use the grid system to nest columns within other columns.
Bootstrap: Controlling Grids & Layout
In this exercise, you will take a closer look at Bootstrap's grid. you will refine the layout so the content fits better at various breakpoints.
Bootstrap: Creating a Photo Grid
In this exercise you will learn about Bootstrap's fluid-width grid that fills the entire screen width.
Bootstrap: Skinning/Customizing Appearance
In this exercise you will learn how to customize the appearance of layouts created with Bootstrap, which is a process known as skinning.
Bootstrap: Adding a Slideshow (Carousel)