Chris Converse – Creating a Responsive Web Design

Chris Converse – Creating a Responsive Web Design

This course was designed to teach you to create a web page that can adapt it’s layout to fit on any screen sizes across devices, as well as on paper when printed.

Web design requires the coordination of HTML, CSS, and graphics in order to construct a layout and design that can respond to the varying needs of your websites visitors.

In this step-by-step course, we’ll cover every aspect of converting a design into a fully functioning web page. We’ll create navigation menus, style typography, format and position graphics, create CSS animations, import free web fonts from Google, as well adjust our layout to fit a wide range of screens and devices.

And for those new to HTML, CSS or web graphics, we have a few lessons explaining the core fundamentals of each, so you’ll be able to work through the course without missing a beat.

To get a full sense of the scope of this course, watch the first chapter — it’s FREE.

Running Time: 3:47 (227 minutes)

Course Curriculum

Chapter 1: Introduction

• Introduction to this course (1:51)
• About this course (1:06)
• Terms and technology we’ll be covering (2:36)
• What you’ll need to complete this course (1:29)
• About the exercise files (1:27)

Chapter 2: Preparing the HTML Content and Structure

• Setting up our project (4:07)
• The strategy for our layout (1:40)
• Creating the main HTML containers (2:40)
• Adding content into the header (3:52)
• Add content to main Section (3:25)
• Add content to atmosphere section (2:18)
• Add content to how-to section (5:19)
• Adding the navigation (5:02)
• Adding the footer content (2:20)

Chapter 3: Creating the Style and Layout with CSS

• Importing a Google Font (3:54)
• Defining the basic text styles (4:18)
• Style the heading and page container (4:45)
• Style the logo and hero item (6:50)
• Creating the button style (4:32)
• Setting up three column row (6:04)
• Adding graphics to the main section (4:54)
• Clearing floats with pseudo-elements (4:03)
• Styling the Atmosphere section (3:25)
• Styling the How-To Section aside elements (5:09)
• Styling the How-To Section blockquote element (5:37)
• Adding content with pseudo-elements (5:35)
• Styling the Footer (3:22)

Chapter 4: Creating a Menu System with CSS

• Re-positioning the Nav (4:39)
• Styling the nav list-items and links (6:50)
• Showing and Hiding the nav sub menus (5:42)
• Device compatibility options for nav (3:25)
• Adding indication arrows (7:24)

Chapter 5: Making Layout Adjustments for Large and Medium Screens

• Making minor adjustments for larger screens (4:51)
• Making adjustments for large screens (5:50)
• Making adjustments for medium screens (5:24)

Chapter 6: Making Adjustments for Small Screens

• Moving the navigation for smaller screens (4:04)
• Adjusting to the logo and hero elements (3:46)
• Rearranging the main and atmosphere sections (4:26)
• Rearranging the how-to section (5:24)
• Rearranging the navigation (6:07)
• Adjusting the spacing of the navigation and footer (3:54)

Chapter 7: Making Adjustments for the Smallest Screens

• Adjustments for the header and hero (5:26)
• Adjusting the How To section (2:48)
• Adjusting the footer (3:56)

Chapter 8: Making Layout and Content Adjustments for Print

• Strategy for printing (3:58)
• Linking a CSS file for print (2:33)
• Setting up the base styles (4:36)
• Setting up the header (4:34)
• Displaying URLS when printing (6:05)
• Section Main (4:41)
• Atmosphere section (2:34)
• Switching our image tags with CSS (5:05)
• Styling the footer (4:24)
• Setting page breaks with CSS (2:30)

Chapter 9: Where To Go From Here

• Where to go from here (0:55)

Get Chris Converse – Creating a Responsive Web Design at Tenlibrary.com