Creating a Responsive Web Design

Discover how to use responsive web design to make your site more readable—on any device. Learn how to use HTML and CSS to adapt a layout to different screen sizes and orientations.

Introduction

• Introduction to this course
• About this course
• Terms and technology we'll be covering
• What you'll need to complete this course
• About the exercise files

1. Preparing the HTML Content and Structure

• Setting up our project
• The strategy for our layout
• Creating the main HTML containers
• Adding content into the header
• Adding content to the main section
• Adding content to the atmosphere section
• Adding content to the how-to section
• Adding the navigation
• Adding the footer content

2. Creating the Style and Layout with CSS

• Importing a Google Font
• Defining the basic text styles
• Styling the heading and page container
• Styling the logo and hero item
• Creating the button style
• Setting up a three-column row
• Adding graphics to the main section
• Clearing floats with pseudo-elements
• Styling the atmosphere section
• Styling the how-to section aside elements
• Styling the how-to section blockquote element
• Adding content with pseudo-elements
• Styling the footer

3. Creating a Menu System with CSS

• Repositioning the nav
• Styling the nav list items and links
• Showing and hiding the nav submenus
• Device compatibility options for nav
• Adding indication arrows

4. Making Layout Adjustments for Large and Medium Screens

• Making minor adjustments for larger screens
• Making adjustments for large screens
• Making adjustments for medium screens

5. Making Adjustments for Small Screens

• Moving the navigation for smaller screens
• Adjusting to the logo and hero elements
• Rearranging the main and atmosphere sections
• Rearranging the how-to section
• Rearranging the navigation
• Adjusting the spacing of the navigation and footer

6. Making Adjustments for the Smallest Screens

• Adjustments for the header and hero
• Adjusting the how-to section
• Adjusting the footer

7. Making Layout and Content Adjustments for Print

• Strategy for printing
• Linking a CSS file for print
• Setting up the base styles
• Setting up the header
• Displaying URLS when printing
• Main section
• Atmosphere section
• Switching our img tags with CSS
• Styling the footer
• Setting page breaks with CSS

Conclusion

• What's next?