Responsive Web Design with HTML5 and CSS3 - Intermediate
4.3 (110 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.
839 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

Responsive Web Design with HTML5 and CSS3 - Intermediate

Learn about HTML5 Forms, Image Sliders, Flexible Video, Lazy Loading, and Image Sprites
4.3 (110 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.
839 students enrolled
Created by Paul Cheney
Last updated 3/2017
English
Current price: $13 Original price: $35 Discount: 63% off
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 4 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of this course you will be able to create an HTML5 form with pattern matching, user feedback, and required.
  • By the end of this course you will be able to implement a responsive image slider.
  • By the end of this course you will be able to implement responsive video proportional resizing.
  • By the end of this course you will be able to use a sprite graphics for social media icons.
  • By the end of this course you will be able to use two different methods to swap images based on your users browser width.
  • By the end of this course you will be able to use a font for web page graphics.
View Curriculum
Requirements
  • Web Hosting, Dreamweaver or other WYSIWYG editor, Photoshop.
Description

This course coves advanced responsive web design topics on HTML5 forms with sprite feedback, responsive video and sliders, and using sprites for social media. Additionally, it covers two different ways to deliver different graphics based on screen width, how to use fonts for icons, and lazy loading images for a gallery. We also toss in a unit covering the Add 2 Home capabilities of Apple handheld devices.

Prior to taking this course you should complete the introductory course in this series.

Who is the target audience?
  • Successful students will have completed the "Responsive Web Design with HTML5 and CSS3 - Introduction" course by Paul Cheney.
  • Students should know basic responsive design including HTML5, adaptive navigation, media queries, Dreamweaver, etc.
Curriculum For This Course
38 Lectures
03:56:10
+
HTML5 Forms
12 Lectures 01:26:28

In this video I setup the problems with forms and prepare you for a form walkthrough.

Preview 01:17

In this video we take a look at some forms and problems they can cause.

Preview 20:24

In this video, you will see the completed form on desktop, tablet and smart phone. you will see how the keyboards are affected by the input type in some browsers.

Overview of the Completed Page
09:42

In this video, you will see how to implement the new progress bar.

Progress Bar
03:01

In this video, you will see how to get started bulding an HTML5 form

Build a Form Part 1
07:23

In this video, you will see how to finishing coding the HTML5 form.

Build a Form Part 2
13:12

In this video, you will see how to use CSS to style the presentation of a form.

Style the Form
08:09

In this video, you will see the sprite I built on Photoshop and how it was built.

Building a Sprite in Photoshop
01:49

In this video, you will see the new psudo classes for forms being used with the sprite graphic.

Implementing Pseudo Classes for Form Inputs
09:46

In this video, you will see how to download, configure and implement a php file that send you an email from your website.

Hooking up the FormToEmail.php File
08:17

In this video, you will see a future development in providing feedback for required fields.

Giving Feedback with the Title Tag on Inputs
03:23

View the completed form on SpartanDesignUniversity
00:05
+
Sliders and Video
14 Lectures 58:18

In this video you will see the completed version of the sliders page.

Introduction to Sliders
01:41

In this video you will see how access and setup the code for a basic slider. A link to the woo themes FlexSlider2 used in this course in located on the Spartan Design University website under section 7

Setup the File
07:57

In this video you will see how to add captions to your sliders.

Add a Caption to the Sliders
06:13

In this video you will see how to customize the slider timing, direction and speed.

Customize the Sliders
04:33

In this video you will see the completed thumbnail slider

Overview of a Slider with Thumbnails
01:27

In this video you will see how to build a thumbnail slider. A link to the woo themes FlexSlider2 used in this course in located on the Spartan Design University website under section 7

Build a Slider with Thumbnails
06:12

In this video you will see the completed page for flexible videos

Overview of Flexible Video
02:22

In this video you will see how to build a flexible video page for youtube, vimeo and bliptv. A link to the FitVids.js used in this section in located on the Spartan Design University website under section 7

Build a Page with Flexible Video
08:41

In this video you will see a completed sprite used for social icons.

Overview of Sprites
01:33

In this video you will see how to build a sprite in Photoshop.

Creating a Sprite in Photoshop
02:12

In this video you will see how to code a social icons unordered list.

Coding a Sprite
03:08

In this video you will see how to style a sprite as a CSS background image.

Styling a Sprite
07:54

In this video you will see two additional options for presenting sprites.

Additional Options for Styling a Sprite
04:07

View the Completed Examples on Spartan Design University
00:18
+
Images and Font Graphics
7 Lectures 01:02:50

In this video you will see an overview of this lesson on responsive images, twitter and font based icons.

Overview of Images and Font Graphics
05:16

In this video you will see how to load different background images through CSS for phone, tablet, and desktop. This method has some advantages.

Responsive Images using CSS and background-image
08:41

In this video you will use javascript to swam images based on the end users screen size. A link to the picturefill used in this tutorial in located on the Spartan Design University website under section 8

Responsive Images Using JavaScript
16:45

In this video you will create a twitter feed from your account and then use a widget to display your feed into your own website.

Embedding a Twitter Feed into a Responsive Column
07:50

In this video you will use a font instead of graphics to insert social media icons onto your page. A link to the FontAwsome used in this tutorial in located on the Spartan Design University website under section 8

Using Fonts for Social Media Icons
10:28

In this video you will learn to structure your contact and address information so it can be read by the Google Structured Data Test.

Using Structured Data for your Address and Contact Information
13:44

View the Completed Examples on Spartan Design University
00:06
+
Lazy Loading & Home Screen Icons
5 Lectures 27:50

In this video we will take a look at a lazy loading gallery page on multiple devices.

Overview of Lazy Loading
02:30

In this video you will setup a lazy loading file. A link to the lazy load plugin used in this tutorial in located on the Spartan Design University website under section 9

Create a Lazy Loading Responsive Gallery with Grey Placeholders
10:19

In this video we will adapt the lazy load gallery to use highly compressed greyscale images as placeholders.

Modifying the Lazy Load Gallery using Greyscale Thumbnails
04:07

In this video we will implement the Add to Home script to encourage returning visitors to create an icon on their home screen for our website.

Implementing an Add To Home script for Mobile Devices
10:28

Examples created in this section can be seen on Spartan Design University
00:26
About the Instructor
Paul Cheney
4.5 Average rating
457 Reviews
3,871 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.