Introduction
- Introduction
- About this course
- Terms and technology we'll be covering
- What you'll need to complete this course
- About the exercise files
Preparing the HTML Content and Structure
- Setting up our project
- The HTML strategy for our layout
- Creating the main HTML containers
- Adding content into the header
- Add content to main section
- Add content to atmosphere section
- Add content to the How-To section
- Adding the navigation
- Adding the footer content
Creating the Style and Layout with CSS
- Importing a Google Font
- Defining the basic text styles
- Style the heading and page container
- Style the logo and hero item
- Creating the button style
- Setting up three-column row
- Adding graphics to the main section
- Clearing floats with CSS 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
Creating a Menu System with CSS
- Re-positioning the Nav
- Styling the nav list-items and links
- Showing and Hiding the nav sub menus
- Device compatibility options for nav
- Adding indication arrows
Making Layout Adjustments for Large and Medium Screens
- Making minor adjustments for larger screens
- Making adjustments for large screens
- Making adjustments for medium screens
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
Making Adjustments for the Smallest Screens
- Adjustments for the header and hero
- Adjusting the How-To section
- Adjusting the footer
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
- Setting up the Main section
- Setting up the Atmosphere section
- Switching our image tags with CSS
- Styling the footer
- Setting page breaks with CSS
Where To Go From Here
- Where to go from here
