Creating a Responsive Web Design

• Download the exercise files from this lecture

First we’ll gather files form the exercise files, then set up our main project folder.

We’ll explore the HTML structure we’ll need in order to create the desired layout.

These HTML5 elements allow us to structure the outter-most containers for our web layout.

Add a linked logo and promotional content into the header area.

Adding column containers and content into the main promotional section.

Adding an article, text and buttons to the Atmosphere section.

Adding images, text, and column containers to the How-To section

Creating a bullet list to be used as the navigation.

Add copyright text and hyperlinks to the bottom of the page.

Learn to search and implement a Google font into your web page.

Creating CSS rules for headings, paragraphs and anchor links.

Adding an image to the background of the header element.

Transforming the anchor tag into a graphical logo link.

Style an anchor link into a button with a CSS animated rollover effect.

Learn to create columns using float properties.

Adding SVG graphics to the columns in the main section.

Use pseudo-elements to add an element with clear properties to clear floating child elements.

Adding color, style and graphics in order to style the Atmosphere section.

Add CSS rules to style images and text within the How-To section.

Add style and positioning properties to a pull quote.

Keep your HTML clean by adding design-related content with CSS.

Add styles for the links and content in the footer area.

Move the navigation menu below the content on smaller screens.

Style the anchor links within the bullet list to resemble a menu.

Set the display property of nested bullet lists to create the sub menu effect.

Adding support for ARIA, for multi-input devices and operating systems.

Create triangles with CSS to indicate which menu items have sub menus.

Making minot layout adjustments when the layout touches the browser’s edges.

Creating our first major layout adjustments for slightly smaller screens.

Creating layout adjustments for medium sized screens.

Relocating the navigation to follow to the content.

Using an alternate logo and header information.

Making layout adjustments to the promotional and feature areas.

Adjusting the images, text, and blockquote in the How-To section

Converting the menus into a single, indented list for small screens.

Making final layout adjustments tot he navigation and footer elements.

Making content and layout adjustments to the logo and hero content

Making layout changes to the How-To section

Making additional adjustments to the footer content.

Considering the possibilities for transforming the display of our HTML content for the printed page.

Using a separate CSS file specifically for printing

Creating the base styles for optimizing readability for print.

Combining pseudo-elements and layout adjustments to optimize printing of the header composition.

Using CSS pseudo-elements to display the url destination of anchor links.

Adjusting the layout and styles for the main promotional area.

Adjusting the layout and styles for the Atmosphere section.

Referencing alternate images with CSS when confronted with HTML image tags.

Making adjustments for printing the footer content.

Using CSS to help inform possible page breaks when printing multiple pages.

Find more resources online that catalog and explain the full set of HTML elements and CSS properties available to you.