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.
Rating: 4.4 out of 5 (208 ratings)
10,814 students
Responsive Web Design with HTML5 and CSS3 - Introduction
Rating: 4.4 out of 5 (208 ratings)
10,814 students
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.

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 this course is for:
  • This course is designed for an entry level student who wants to be able to build a responsive web page.
Course content
9 sections • 84 lectures • 7h 46m total length
  • An Introduction to this Course
    07:30
  • Domain Name and Hosting
    00:21
  • Introduction to Responsive Design
    09:28
  • An example with no Media Queries
    02:21
  • An example using Device Width
    03:42
  • An example using Browser Width
    02:40
  • An example using Browser Width and the Do Not Lie meta tag
    03:28
  • An example using the Text-Size-Adjust CSS
    02:02
  • An example using Media Queries In the stylesheet link
    02:05
  • An example using Media Queries In the CSS
    03:50
  • An example of Progressive Enhancement
    05:52
  • An example showing a CSS reset and Natural Box Model
    05:04
  • Download the completed example
    00:10
  • An Introduction to this Unit
    10:08
  • An example using media = print
    02:07
  • An overview of a responsive site using the mobile first approach
    04:17
  • Review the responsive start files
    06:15
  • Building the page header
    10:48
  • Build responsive navigation
    09:58
  • Add a Gradient Background to the Desktop
    03:39
  • Build the page footer
    01:14
  • Add a 100% wide graphic that scales to the browser width
    04:58
  • Add a image with text wrap
    08:43
  • Create two articles
    13:07
  • Display the articles to appear in two columns
    07:05
  • Testing your work in various browsers
    03:36
  • View the completed example site
    00:10
  • Advanced CSS3 overview
    04:00
  • Add Content to Start File
    02:36
  • Add Gooogle Font
    06:09
  • CSS graident
    06:24
  • Phone Navigation
    09:20
  • Texture Content
    07:29
  • Style the Content
    05:16
  • Add Social Icons
    08:59
  • Tablet Navigation
    06:16
  • Box Shadow
    04:00
  • Round Corners
    04:19
  • Background of stars for the desktop
    07:56
  • Glow In Wrapper
    07:46
  • Header Image
    07:48
  • CSS Transitions
    07:13
  • CSS Transitions for images
    06:16
  • Demonstrate a Ribbon Footer
    10:15
  • View the completed example
    00:10
  • Additional Resources.
    00:26
  • Craft-Overview of the finished site
    02:12
  • Craft-Explaination of the HTML artistic columns
    04:11
  • Markup the Header
    04:14
  • Craft-Markup the wrapper, left and middle divisions
    07:41
  • Craft-Markup for the phone navigation button
    04:17
  • Craft-Add the Google font and body texture
    04:06
  • Craft-Stylize the header
    04:13
  • Craft-Stylize the decorative bar
    03:36
  • Craft-Stylize the phone navigation
    11:23
  • Craft-Stylize the tablet navigation
    08:43
  • Craft-Stylize the desktop navigation
    09:52
  • Craft-Stylize the Mondrian columns
    10:41
  • Craft-Markup the main page content
    06:31
  • Craft-Stylize the page content into columns
    07:52
  • Home-Overview of the finished page
    03:19
  • Home-Code the Navigation
    03:18
  • Home-Add the JavaScript code for the phone navigation
    03:16
  • Home-Stylize the phone navigation
    02:56
  • Home-Stylize the tablet navigation
    11:08
  • Home-Stylize the desktop navigation
    09:56
  • Home-Code the page content
    06:56
  • Home-Stylize the page content
    05:28
  • Home-Create and style the social links
    06:17
  • Home-Add the background image
    06:11
  • Overview of the finished page
    02:37
  • Code the navigation
    05:16
  • Style the phone navigation
    09:05
  • Code the wrappers
    04:01
  • Code the header
    01:24
  • Stylize the desktop and tablet navigation
    06:58
  • Stylize the header
    07:16
  • Code the content
    07:46
  • Stylize the content on the phone
    05:40
  • Stylize the content on the tablet
    02:42
  • Stylize the content on the desktop
    07:55
  • Add a background image
    03:47
  • Creating a sticky navigation bar
    05:58
  • Where to go from Here
    00:23

Instructor
Web Designer and Developer
Paul Cheney
  • 4.1 Instructor Rating
  • 1,523 Reviews
  • 28,110 Students
  • 9 Courses

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.