Creating a Responsive Web Design
4.5 (130 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,202 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating a Responsive Web Design to your Wishlist.

Add to Wishlist

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.5 (130 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,202 students enrolled
Created by Chris Converse
Last updated 11/2015
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • Patience : )
  • A text editor
  • HTML5-enabled web browser
  • Web-enabled phone or tablet (optional)
  • Printer (optional)

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)

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)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
55 Lectures
5 Lectures 08:29

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

Preview 01:51

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

Preview 01:06

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

Preview 02:36

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

Preview 01:29

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
Preview 01:27
Preparing the HTML Content and Structure
9 Lectures 30:43
  • Download the exercise files from this lecture

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

Setting up our project

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

Preview 01:40

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

Creating the main HTML containers

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

Adding content into the header

Adding column containers and content into the main promotional section.

Add content to main section

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

Add content to atmosphere section

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

Add content to the How-To section

Creating a bullet list to be used as the navigation.

Preview 05:02

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

Adding the footer content
Creating the Style and Layout with CSS
13 Lectures 01:02:28

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

Importing a Google Font

Creating CSS rules for headings, paragraphs and anchor links.

Defining the basic text styles

Adding an image to the background of the header element.

Style the heading and page container

Transforming the anchor tag into a graphical logo link.

Style the logo and hero item

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

Preview 04:32

Learn to create columns using float properties.

Setting up three-column row

Adding SVG graphics to the columns in the main section.

Adding graphics to the main section

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

Clearing floats with CSS pseudo-elements

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

Styling the Atmosphere section

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

Styling the How-To Section aside elements

Add style and positioning properties to a pull quote.

Styling the How-To Section blockquote element

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

Adding content with pseudo-elements

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

Styling the Footer
Creating a Menu System with CSS
5 Lectures 28:00

Move the navigation menu below the content on smaller screens.

Re-positioning the Nav

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

Styling the nav list-items and links

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

Showing and Hiding the nav sub menus

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

Device compatibility options for nav

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

Adding indication arrows
Making Layout Adjustments for Large and Medium Screens
3 Lectures 16:05

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

Making minor adjustments for larger screens

Creating our first major layout adjustments for slightly smaller screens.

Making adjustments for large screens

Creating layout adjustments for medium sized screens.

Making adjustments for medium screens
Making Adjustments for Small Screens
6 Lectures 27:41

Relocating the navigation to follow to the content.

Moving the navigation for smaller screens

Using an alternate logo and header information.

Preview 03:46

Making layout adjustments to the promotional and feature areas.

Rearranging the main and atmosphere sections

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

Rearranging the how-to section

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

Rearranging the navigation

Making final layout adjustments tot he navigation and footer elements.

Adjusting the spacing of the navigation and footer
Making Adjustments for the Smallest Screens
3 Lectures 12:10

Making content and layout adjustments to the logo and hero content

Adjustments for the header and hero

Making layout changes to the How-To section

Adjusting the How-To section

Making additional adjustments to the footer content.

Adjusting the footer
Making Layout and Content Adjustments for Print
10 Lectures 41:00

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

Strategy for printing

Using a separate CSS file specifically for printing

Preview 02:33

Creating the base styles for optimizing readability for print.

Setting up the base styles

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

Setting up the header

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

Displaying URLs when printing

Adjusting the layout and styles for the main promotional area.

Setting up the Main section

Adjusting the layout and styles for the Atmosphere section.

Setting up the Atmosphere section

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

Switching our image tags with CSS

Making adjustments for printing the footer content.

Styling the footer

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

Setting page breaks with CSS
Where To Go From Here
1 Lecture 00:55

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

Preview 00:55
About the Instructor
Chris Converse
4.5 Average rating
834 Reviews
43,459 Students
8 Courses
Designer and Developer at Codify Design Studio

Chris has over 25 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.