Creating a Responsive Web Design

Course details

Discover how to use responsive web design to make your site more readable and efficient—on any device. Chris Converse shares his own specialized techniques for combining HTML and CSS into a web layout that can adapt to different screen sizes and orientations. The course takes the site from start to finish, from setting up the HTML page and containers to styling established elements for small, medium, and large screens. Along the way, Chris shows how to reposition the nav bar for better viewing on mobile devices, create animated transitions, and turn bulleted lists into interactive menus with full touch support. Plus, learn how to use CSS pseudo-elements and adapt layouts for print to save ink and paper.

Learning objectives
Planning your layout
Creating HTML containers, content, and links
Creating and styling the layout with CSS
Creating a menu system
Styling headings, body text, and footers
Styling and repositioning navigation links
Swapping high-resolution graphics for Retina displays
Making sure content is printable

Concepts

0. Introduction

01 - Introduction to this course
02 - About this course
03 - Terms and technology we'll be covering
04 - What you'll need to complete this course
05 - About the exercise files

1. Preparing the HTML Content and Structure

06 - Setting up our project
07 - The strategy for our layout
08 - Creating the main HTML containers
09 - Adding content into the header
10 - Adding content to the main section
11 - Adding content to the atmosphere section
12 - Adding content to the how-to section
13 - Adding the navigation
14 - Adding the footer content

2. Creating the Style and Layout with CSS

15 - Importing a Google Font
16 - Defining the basic text styles
17 - Styling the heading and page container
18 - Styling the logo and hero item
19 - Creating the button style
20 - Setting up a three-column row
21 - Adding graphics to the main section
22 - Clearing floats with pseudo-elements
23 - Styling the atmosphere section
24 - Styling the how-to section aside elements
25 - Styling the how-to section blockquote element
26 - Adding content with pseudo-elements
27 - Styling the footer

3. Creating a Menu System with CSS

28 - Repositioning the nav
29 - Styling the nav list items and links
30 - Showing and hiding the nav submenus
31 - Device compatibility options for nav
32 - Adding indication arrows

4. Making Layout Adjustments for Large and Medium Screens

33 - Making minor adjustments for larger screens
34 - Making adjustments for large screens
35 - Making adjustments for medium screens

5. Making Adjustments for Small Screens

36 - Moving the navigation for smaller screens
37 - Adjusting to the logo and hero elements
38 - Rearranging the main and atmosphere sections
39 - Rearranging the how-to section
40 - Rearranging the navigation
41 - Adjusting the spacing of the navigation and footer

6. Making Adjustments for the Smallest Screens

42 - Adjustments for the header and hero
43 - Adjusting the how-to section
44 - Adjusting the footer

7. Making Layout and Content Adjustments for Print

45 - Strategy for printing
46 - Linking a CSS file for print
47 - Setting up the base styles
48 - Setting up the header
49 - Displaying URLS when printing
50 - Main section
51 - Atmosphere section
52 - Switching our img tags with CSS
53 - Styling the footer
54 - Setting page breaks with CSS

Conclusion

55 - What's next