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.5 (49 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.
691 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 84
  • Length 8 hours
  • Skill Level Beginner Level
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 1/2014 English

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

What are the requirements?

  • Students will need a code editor like Dreamweaver, Notepad++ (Windows), or Text Wrangler (Macintosh).

What am I going to get from this course?

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

What is the target audience?

  • This course is designed for an entry level student who wants to be able to build a responsive web page.

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.

Curriculum

An Introduction to this Course
Preview
07:30
Section 1: Setup a Site
Domain Name and Hosting
Preview
Article
Section 2: Exploring Media Queries
09:28

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

02:21

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

03:42

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

02:40

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

03:28

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

02:02

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

02:05

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

03:50

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.

05:52

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

05:04

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

Download the completed example
Article
Section 3: Coding a Responsive Design Web Page
10:08

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

02:07

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

04:17

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

06:15

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

10:48

In this video we build a responsive site header

09:58

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

03:39

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.

01:14

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

04:58

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

08:43

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.

13:07

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

07:05

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

03:36

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

View the completed example site
Article
Section 4: Advanced CSS3
04:00

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

02:36

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

06:09

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

06:24

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

09:20

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

07:29

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

05:16

In this video we apply CSS to the page content.

08:59

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

06:16

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

04:00

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

04:19

In this video we show various ways to round corners.

07:56

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

07:46

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

07:48

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

07:13

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

06:16

In this video, we explore CSS3 transitions for images.

10:15

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

View the completed example
Article
Additional Resources.
Article
Section 5: Building a sample page for a Craft Store
02:12

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

04:11

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

04:14

In this video we markup the header for the sample page

07:41

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

04:17

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

04:06

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

Craft-Stylize the header
04:13
03:36

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

11:23

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

08:43

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

09:52

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

Craft-Stylize the Mondrian columns
10:41
06:31

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

07:52

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

Section 6: Building a sample page for a Home Improvement Company
03:19

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

03:18

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

03:16

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

02:56

In this video we stylize the navigation for the phone dropdown

11:08

In this video we stylize the tablet navigation

Home-Stylize the desktop navigation
09:56
06:56

In this video we markup the content of the page

05:28

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

06:17

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-Add the background image
06:11
Section 7: Building a sample page for a news site
02:37

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

05:16

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

09:05

In this video we style the navigation for the phone

04:01

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

01:24

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

Stylize the desktop and tablet navigation
06:58
07:16

In this video we apply styling to the page header

07:46

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.

Stylize the content on the phone
05:40
02:42

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

07:55

In this video we stylize the for the desktop

03:47

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

Section 8: Sticky Navigation
05:58

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.

Where to go from Here
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Paul Cheney, 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.

Ready to start learning?
Take This Course