Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Creating a Responsive Web Design
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)
Preparing the HTML Content and Structure
Setting up our project (4:07)
The HTML 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 the How-To section (5:19)
Adding the navigation (5:02)
Adding the footer content (2:20)
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 CSS 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)
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)
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)
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)
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)
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)
Setting up the Main section (4:41)
Setting up the Atmosphere section (2:34)
Switching our image tags with CSS (5:05)
Styling the footer (4:24)
Setting page breaks with CSS (2:30)
Where To Go From Here
Where to go from here (0:55)
Styling the How-To Section blockquote element
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock