Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Creating a Responsive Web Design
Chapter 1: Introduction
Introduction to this course (1:51)
About this course (1:06)
Terms and technology we'll be covering (2:36)
What you'll need to complete this course (1:29)
About the exercise files (1:27)
Chapter 2: Preparing the HTML Content and Structure
Setting up our project (4:07)
The strategy for our layout (1:40)
Creating the main HTML containers (2:40)
Adding content into the header (3:52)
Add content to main Section (3:25)
Add content to atmosphere section (2:18)
Add content to how-to section (5:19)
Adding the navigation (5:02)
Adding the footer content (2:20)
Chapter 3: Creating the Style and Layout with CSS
Importing a Google Font (3:54)
Defining the basic text styles (4:18)
Style the heading and page container (4:45)
Style the logo and hero item (6:50)
Creating the button style (4:32)
Setting up three column row (6:04)
Adding graphics to the main section (4:54)
Clearing floats with pseudo-elements (4:03)
Styling the Atmosphere section (3:25)
Styling the How-To Section aside elements (5:09)
Styling the How-To Section blockquote element (5:37)
Adding content with pseudo-elements (5:35)
Styling the Footer (3:22)
Chapter 4: Creating a Menu System with CSS
Re-positioning the Nav (4:39)
Styling the nav list-items and links (6:50)
Showing and Hiding the nav sub menus (5:42)
Device compatibility options for nav (3:25)
Adding indication arrows (7:24)
Chapter 5: Making Layout Adjustments for Large and Medium Screens
Making minor adjustments for larger screens (4:51)
Making adjustments for large screens (5:50)
Making adjustments for medium screens (5:24)
Chapter 6: Making Adjustments for Small Screens
Moving the navigation for smaller screens (4:04)
Adjusting to the logo and hero elements (3:46)
Rearranging the main and atmosphere sections (4:26)
Rearranging the how-to section (5:24)
Rearranging the navigation (6:07)
Adjusting the spacing of the navigation and footer (3:54)
Chapter 7: Making Adjustments for the Smallest Screens
Adjustments for the header and hero (5:26)
Adjusting the How To section (2:48)
Adjusting the footer (3:56)
Chapter 8: Making Layout and Content Adjustments for Print
Strategy for printing (3:58)
Linking a CSS file for print (2:33)
Setting up the base styles (4:36)
Setting up the header (4:34)
Displaying URLS when printing (6:05)
Section Main (4:41)
Atmosphere section (2:34)
Switching our image tags with CSS (5:05)
Styling the footer (4:24)
Setting page breaks with CSS (2:30)
Chapter 9: Where To Go From Here
Where to go from here (0:55)
About the exercise files
Learn about the project files, as well as the final project, that are provided with this course.
Download
rwd_exercise_files.zip
Complete and Continue