Creating a Responsive Web Design
4.4 (129 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,193 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.4 (129 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,193 students enrolled
Created by Chris Converse
Last updated 11/2015
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • Patience : )
  • A text editor
  • HTML5-enabled web browser
  • Web-enabled phone or tablet (optional)
  • Printer (optional)
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)

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
03:47:31
+
Introduction
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
04:07

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
02:40

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

Adding content into the header
03:52

Adding column containers and content into the main promotional section.

Add content to main section
03:25

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

Add content to atmosphere section
02:18

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

Add content to the How-To section
05:19

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
02:20
+
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
03:54

Creating CSS rules for headings, paragraphs and anchor links.

Defining the basic text styles
04:18

Adding an image to the background of the header element.

Style the heading and page container
04:45

Transforming the anchor tag into a graphical logo link.

Style the logo and hero item
06:50

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
06:04

Adding SVG graphics to the columns in the main section.

Adding graphics to the main section
04:54

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

Clearing floats with CSS pseudo-elements
04:03

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

Styling the Atmosphere section
03:25

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

Styling the How-To Section aside elements
05:09

Add style and positioning properties to a pull quote.

Styling the How-To Section blockquote element
05:37

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

Adding content with pseudo-elements
05:35

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

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

Move the navigation menu below the content on smaller screens.

Re-positioning the Nav
04:39

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

Styling the nav list-items and links
06:50

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

Showing and Hiding the nav sub menus
05:42

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

Device compatibility options for nav
03:25

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

Adding indication arrows
07:24
+
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
04:51

Creating our first major layout adjustments for slightly smaller screens.

Making adjustments for large screens
05:50

Creating layout adjustments for medium sized screens.

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

Relocating the navigation to follow to the content.

Moving the navigation for smaller screens
04:04

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
04:26

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

Rearranging the how-to section
05:24

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

Rearranging the navigation
06:07

Making final layout adjustments tot he navigation and footer elements.

Adjusting the spacing of the navigation and footer
03:54
+
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
05:26

Making layout changes to the How-To section

Adjusting the How-To section
02:48

Making additional adjustments to the footer content.

Adjusting the footer
03:56
+
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
03:58

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
04:36

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

Setting up the header
04:34

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

Displaying URLs when printing
06:05

Adjusting the layout and styles for the main promotional area.

Setting up the Main section
04:41

Adjusting the layout and styles for the Atmosphere section.

Setting up the Atmosphere section
02:34

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

Switching our image tags with CSS
05:05

Making adjustments for printing the footer content.

Styling the footer
04:24

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

Setting page breaks with CSS
02:30
+
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.6 Average rating
800 Reviews
43,368 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.