Overview
-
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.
Syllabus
-
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
- 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
- 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
- Repositioning the nav
- Styling the nav list items and links
- Showing and hiding the nav submenus
- Device compatibility options for nav
- Adding indication arrows
- Making minor adjustments for larger screens
- Making adjustments for large screens
- Making adjustments for medium 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
- Adjustments for the header and hero
- Adjusting the how-to section
- Adjusting the footer
- 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
- What's next?
