4.77 out of 5
4.77
263 reviews on Udemy

Creating a Responsive Web Design

A step-by-step course showing how to create a web layout that responds to screen sizes and printing.
Instructor:
Chris Converse
2,012 students enrolled
English [Auto]
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

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)

Introduction

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.

2
About this course

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

3
Terms and technology we'll be covering

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

4
What you'll need to complete this course

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

5
About the exercise files

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

Preparing the HTML Content and Structure

1
Setting up our project
  • Download the exercise files from this lecture

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

2
The HTML strategy for our layout

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

3
Creating the main HTML containers

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

4
Adding content into the header

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

5
Add content to main section

Adding column containers and content into the main promotional section.

6
Add content to atmosphere section

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

7
Add content to the How-To section

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

8
Adding the navigation

Creating a bullet list to be used as the navigation.

9
Adding the footer content

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

Creating the Style and Layout with CSS

1
Importing a Google Font

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

2
Defining the basic text styles

Creating CSS rules for headings, paragraphs and anchor links.

3
Style the heading and page container

Adding an image to the background of the header element.

4
Style the logo and hero item

Transforming the anchor tag into a graphical logo link.

5
Creating the button style

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

6
Setting up three-column row

Learn to create columns using float properties.

7
Adding graphics to the main section

Adding SVG graphics to the columns in the main section.

8
Clearing floats with CSS pseudo-elements

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

9
Styling the Atmosphere section

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

10
Styling the How-To Section aside elements

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

11
Styling the How-To Section blockquote element

Add style and positioning properties to a pull quote.

12
Adding content with pseudo-elements

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

13
Styling the Footer

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

Creating a Menu System with CSS

1
Re-positioning the Nav

Move the navigation menu below the content on smaller screens.

2
Styling the nav list-items and links

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

3
Showing and Hiding the nav sub menus

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

4
Device compatibility options for nav

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

5
Adding indication arrows

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

Making Layout Adjustments for Large and Medium Screens

1
Making minor adjustments for larger screens

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

2
Making adjustments for large screens

Creating our first major layout adjustments for slightly smaller screens.

3
Making adjustments for medium screens

Creating layout adjustments for medium sized screens.

Making Adjustments for Small Screens

1
Moving the navigation for smaller screens

Relocating the navigation to follow to the content.

2
Adjusting to the logo and hero elements

Using an alternate logo and header information.

3
Rearranging the main and atmosphere sections

Making layout adjustments to the promotional and feature areas.

4
Rearranging the how-to section

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

5
Rearranging the navigation

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

6
Adjusting the spacing of the navigation and footer

Making final layout adjustments tot he navigation and footer elements.

Making Adjustments for the Smallest Screens

1
Adjustments for the header and hero

Making content and layout adjustments to the logo and hero content

2
Adjusting the How-To section

Making layout changes to the How-To section

3
Adjusting the footer

Making additional adjustments to the footer content.

Making Layout and Content Adjustments for Print

1
Strategy for printing

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

2
Linking a CSS file for print

Using a separate CSS file specifically for printing

3
Setting up the base styles

Creating the base styles for optimizing readability for print.

4
Setting up the header

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

5
Displaying URLs when printing

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

6
Setting up the Main section

Adjusting the layout and styles for the main promotional area.

7
Setting up the Atmosphere section

Adjusting the layout and styles for the Atmosphere section.

8
Switching our image tags with CSS

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

9
Styling the footer

Making adjustments for printing the footer content.

10
Setting page breaks with CSS

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

Where To Go From Here

1
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.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 out of 5
263 Ratings

Detailed Rating

Stars 5
153
Stars 4
77
Stars 3
25
Stars 2
7
Stars 1
1
69dd3affd665a5fafc89b7bb7829a6c9
30-Day Money-Back Guarantee

Includes

4 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday 9:30 am - 3.00 pm
Sunday Closed
Creating a Responsive Web Design
Category:
Price:
$19.99 $14