Creating a Responsive Web Design

A step-by-step course showing how to create a web layout that responds to screen sizes and printing.
4.4 (113 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,120 students enrolled
Instructed by Chris Converse Design / Web Design
Take This Course
  • Lectures 55
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 English

Course Description

This course was designed to teach you to create a web page that can adapt it’s layout to fit on any screen size, 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 (225 minutes)

What are the requirements?

  • Patience : )
  • A text editor
  • HTML5-enabled web browser
  • Web-enabled phone or tablet (optional)
  • Printer (optional)

What am I going to get from this course?

  • Strategize the HTML needed for a web design
  • Create CSS rules to target specific HTML elements
  • Work with web graphics (in HTML and CSS)
  • Transform user experiences with CSS
  • Adapt layouts for varying screen sizes
  • Optimize a web page's printing capabilities

Who is the target audience?

  • Graphic Designers
  • Web Designers
  • UX Designers
  • Front-End Web Developers
  • Developers (looking to enhance their design sensitivities)
  • Content Editors (responsible for HTML and CSS)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

Get an overview of what’s covered in this step-by-step course, including the final project, and technologies that will be covered.


See how we’ll be creating a web design that will provide an optimal reading experience across various devices, as well as paper.


For those new to HTMl and CSS, we’ll briefly talk about the anatomy of HTML elements and CSS rules.


This provides a list of software you’ll need, if you want to follow along with the course.


Learn about the project files, as well as the final project, that are provided with this course.

  • Download the files in the next lecture -- Section 2, Lecture 1
Section 2: Preparing the HTML Content and Structure
  • 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.

Section 3: Creating the Style and Layout with CSS

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.

Section 4: Creating a Menu System with CSS

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.

Section 5: Making Layout Adjustments for Large and Medium Screens

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.

Section 6: Making Adjustments for Small 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.

Section 7: Making Adjustments for the Smallest Screens

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.

Section 8: Making Layout and Content Adjustments for Print

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.

Section 9: Where To Go From Here

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Chris Converse, Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngularJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Ready to start learning?
Take This Course