Creating a Responsive Web Design


Creating a Responsive Web Design

English | 2015 | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 47m | 625 MB
eLearning | Skill level: Beginner | by Chris Converse

Download part1   Download part 1

Download part 2  Download part 2

Discover how to use responsive web design to make your site more readable and efficient—on any device. Chris Converse shares his own specialized techniques for combining HTML and CSS into a web layout that can adapt to different screen sizes and orientations. The course takes the site from start to finish, from setting up the HTML page and containers to styling established elements for small, medium, and large screens. Along the way, Chris shows how to reposition the nav bar for better viewing on mobile devices, create animated transitions, and turn bulleted lists into interactive menus with full touch support. Plus, learn how to use CSS pseudo-elements and adapt layouts for print to save ink and paper.

The exercise files for this course are free to all members. Download them and start creating your own responsive websites today.

Topics include:

  • Planning your layout
  • Creating HTML containers, content, and links
  • Creating and styling the layout with CSS
  • Creating a menu system
  • Styling headings, body text, and footers
  • Styling and repositioning navigation links
  • Swapping high-resolution graphics for Retina displays
  • Making sure content is printable

Table of Contents

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

What’s next?