Responsive Web Design with HTML5 and CSS3 - Introduction
4.7 (69 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.
777 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Responsive Web Design with HTML5 and CSS3 - Introduction to your Wishlist.

Add to Wishlist

Responsive Web Design with HTML5 and CSS3 - Introduction

An introduction to the code snippets necessary to make a web page responsive, including media queries, jQuery, and CSS.
4.7 (69 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.
777 students enrolled
Created by Paul Cheney
Last updated 6/2014
English
Current price: $10 Original price: $35 Discount: 71% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 6 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of this course, students will be able to describe two milestones in Mobile Market
  • By the end of this course, students will see Dreamweaver used to create responsive web pages.
  • By the end of this course, students will be able to build a responsive web page that includes all code necessary to work on modern browsers and ild IE.
  • By the end of this course students will be able to implement 9 advanced CSS techniques.
View Curriculum
Requirements
  • Students will need a code editor like Dreamweaver, Notepad++ (Windows), or Text Wrangler (Macintosh).
Description

This course is about the underpinnings of a responsive web page and the code snippets necessary to make it function properly.

Although I will be using Adobe Dreamweaver as my code editor, you could use Notepad ++ on Windows or TextWrangler on a Macintosh. Both programs are free to download.

This course is structured so that each lesson builds on the previous one. There is an example file at the end of each lesson that summarizes what was covered. When appropriate, the lessons will have available a start file so you can follow along.

Who is the target audience?
  • This course is designed for an entry level student who wants to be able to build a responsive web page.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
84 Lectures
07:46:22
+
An Introduction to this Course
1 Lecture 07:30
+
Setup a Site
1 Lecture 00:16
+
Exploring Media Queries
11 Lectures 40:37

An overview to various ways to use media queries to create a responsive page.

Preview 09:28

In this video you will see an example of an old web page and how it reacts on mobile devices.

Preview 02:21

In this video, you will see an example of a web page that uses Device Width

Preview 03:42

In this video you will see browser width used to detect mobile devices.

An example using Browser Width
02:40

In this video you will see the effect of adding a meta tag which instructs the phone to report its correct width.

An example using Browser Width and the Do Not Lie meta tag
03:28

In this video we solve the problem of having text resize between landscape and portrait orientation

An example using the Text-Size-Adjust CSS
02:02

In this video, we add external stylesheets using media queries as part of the link. This does not work in old IE.

An example using Media Queries In the stylesheet link
02:05

In this video we use a separate style sheet for each targeted group such as phone, tablet, and desktop and we include the media queries in the stylesheets.

An example using Media Queries In the CSS
03:50

In this video we use a stylesheet layout that uses the progressive enhancement approach.

An example of Progressive Enhancement
05:52

In this video, we add a forth CSS reset stylesheet as well as the natural box model CSS.

An example showing a CSS reset and Natural Box Model
05:04

Download the completed example
00:05
+
Coding a Responsive Design Web Page
14 Lectures 01:26:01

An introduction to this unit and the concepts that will be covered.

Preview 10:08

In this video we view an example of the media = print option for a media query.

An example using media = print
02:07

In this video we take a tour a responsive legal site on the desktop, tablet and phone.

An overview of a responsive site using the mobile first approach
04:17

In this video, we take a look at the features of the responsive template which you can download here from Spartan Design University.

Review the responsive start files
06:15

In this video we build a responsive site header

Building the page header
10:48

In this video we build a responsive menu for phone and desktop.

Build responsive navigation
09:58

In this video we add a graident background only to the desktop vesion of our site. This background fills the space beyond the page width.

Add a Gradient Background to the Desktop
03:39

In this video, we add a page footer to the site

Build the page footer
01:14

In this video, we add an image that is alwayse the full width of the page but scale for phone and tablet use.

Add a 100% wide graphic that scales to the browser width
04:58

In this video, we add an image that displays full width on the phone, 6 columns on the tablet and 4 columns on the desktop.

Add a image with text wrap
08:43

In this video we crete two articles and style them with CSS.

Create two articles
13:07

In this video we create two side by side articles for the desktop and then stack them for phone and tables viewing.

Display the articles to appear in two columns
07:05

In this video we demonstrate how this page functions in various versions of Internet Explorer.

Testing your work in various browsers
03:36

View the completed example site
00:06
+
Advanced CSS3
19 Lectures 01:52:25

In this video we look at the goals for this unit.

Advanced CSS3 overview
04:00

In this video we add content to the start file. You can download the start file for this unit from Spartan Design University

Add Content to Start File
02:36

In this video we add two different Google fonts and then combine them into a single HTTP request.

Add Gooogle Font
06:09

In this video we add a CSS generated gradient to the project.

CSS graident
06:24

In this video, we style the navigation to work for phones.

Phone Navigation
09:20

In this video, we use a repeating texture in the content area of the page.

Texture Content
07:29

In this video we apply CSS to the page content.

Style the Content
05:16

In this video, we style the social icons for multiple devices.

Add Social Icons
08:59

In this video, we update the CSS to style the tablet navigation.

Tablet Navigation
06:16

In this video, we add various box shadows to the page.

Box Shadow
04:00

In this video we show various ways to round corners.

Round Corners
04:19

In this video, we add a background of stars only for the desktop version of our page.

Background of stars for the desktop
07:56

In this video we use the wrapper division to add a glow around the top of the page which displays only on the desktop.

Glow In Wrapper
07:46

In this video we add a header graphic and then position it above and to the side of the header.

Header Image
07:48

In this video we explore CSS3 transitions and apply them to colors and background colors.

CSS Transitions
07:13

In this video, we explore CSS3 transitions for images.

CSS Transitions for images
06:16

In this video we show you how to create a ribbon footer using only CSS.

Demonstrate a Ribbon Footer
10:15

View the completed example
00:05

Additional Resources.
00:17
+
Building a sample page for a Craft Store
14 Lectures 01:29:32

In this video we take a look at the finished page we will be building.

Craft-Overview of the finished site
02:12

In this video we examin the use of artistic side columns prior to coding.

Craft-Explaination of the HTML artistic columns
04:11

In this video we markup the header for the sample page

Markup the Header
04:14

In this video we markup the HTML for the artistic side columns used in this example page.

Craft-Markup the wrapper, left and middle divisions
07:41

In this video we markup the HTML for the phone navigation. You can DOWNLOAD the hidemenu.js file on Spartan Design University

Craft-Markup for the phone navigation button
04:17

In this video we add the new Google font and a repeating texture to the sample page.

Craft-Add the Google font and body texture
04:06

Craft-Stylize the header
04:13

In this video we add the CSS for the decorative bar for the phone, tablet and desktop.

Craft-Stylize the decorative bar
03:36

In this video we add the CSS for the phone navigation.

Craft-Stylize the phone navigation
11:23

In this video we add the CSS for the tablet navigation.

Craft-Stylize the tablet navigation
08:43

In this video we add the CSS for the desktop navigation.

Craft-Stylize the desktop navigation
09:52

Craft-Stylize the Mondrian columns
10:41

In this video we add the CSS for the page content.

Craft-Markup the main page content
06:31

In this video we add the CSS to create multiple columns.

Craft-Stylize the page content into columns
07:52
+
Building a sample page for a Home Improvement Company
10 Lectures 58:45

In this video we take a look at the finished page for a home Center site.

Home-Overview of the finished page
03:19

In this video we code the nested unordered list needed for the navigation.

Home-Code the Navigation
03:18

In this video we add the external javaScript file to dynamically create a dropdown menu using the option-select form element. you can download the OptionSelect.js file from Spartan Design University

Home-Add the JavaScript code for the phone navigation
03:16

In this video we stylize the navigation for the phone dropdown

Home-Stylize the phone navigation
02:56

In this video we stylize the tablet navigation

Home-Stylize the tablet navigation
11:08

Home-Stylize the desktop navigation
09:56

In this video we markup the content of the page

Home-Code the page content
06:56

In this video we apply CS to the content of the page

Home-Stylize the page content
05:28

In this video we create six links at the bottom of the page and apply styling so they change from two rows of three to one row of six.

Home-Create and style the social links
06:17

Home-Add the background image
06:11
+
Building a sample page for a news site
12 Lectures 01:04:27

In this video we take a look at the completed News example page

Overview of the finished page
02:37

In this video we markup the unordered list we will use for navigation.

Code the navigation
05:16

In this video we style the navigation for the phone

Style the phone navigation
09:05

In this video we markup the artistic side columns which need full height color.

Code the wrappers
04:01

In this video we markup the html for the header of our page.

Code the header
01:24

Stylize the desktop and tablet navigation
06:58

In this video we apply styling to the page header

Stylize the header
07:16

In this video we markup the content for the page with the desktop view in mind. Later we will style it starting with the phone.

Code the content
07:46

Stylize the content on the phone
05:40

In this video we continue by styling the content for the tablet

Stylize the content on the tablet
02:42

In this video we stylize the for the desktop

Stylize the content on the desktop
07:55

In this video we add a background image only for the desktop.

Add a background image
03:47
+
Sticky Navigation
2 Lectures 06:16

In this video we make a nav bar sticky for the desktop only. A sticky navigation bar never goes above the top of the screen.

Creating a sticky navigation bar
05:58

Where to go from Here
00:18
About the Instructor
Paul Cheney
4.5 Average rating
460 Reviews
3,882 Students
7 Courses
Web Designer and Developer

Paul received his master's degree from Utah State University in Instructional Technology and worked as a civilian for the United States Air Force doing interactive computer-based firefighter training. He and his family then moved to Provo, Utah where he worked at Brigham Young University for five years in the Instructional Technology Center. While there, he was involved in authoring multimedia, digitizing video, training faculty in instructional technology. He then moved with his family to Buena Vista, VA where he joined the faculty at Southern Virginia University. While there he taught digital media courses. Ten years later he returned to Utah where he is now an Assistant Professor at Utah Valley University teaching courses in their Digital Media department in the Internet and Web Technologies degree.