Responsive Web Design with HTML5 and CSS3 - Intermediate

Learn about HTML5 Forms, Image Sliders, Flexible Video, Lazy Loading, and Image Sprites
Rating: 3.7 out of 5 (315 ratings)
14,082 students
Responsive Web Design with HTML5 and CSS3 - Intermediate
Rating: 3.7 out of 5 (315 ratings)
14,082 students
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.

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 this course is for:
  • 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.
Course content
4 sections • 38 lectures • 3h 56m total length
  • Introduction to Forms part 1
    01:17
  • Introduction to Forms part 2
    20:24
  • Overview of the Completed Page
    09:42
  • Progress Bar
    03:01
  • Build a Form Part 1
    07:23
  • Build a Form Part 2
    13:12
  • Style the Form
    08:09
  • Building a Sprite in Photoshop
    01:49
  • Implementing Pseudo Classes for Form Inputs
    09:46
  • Hooking up the FormToEmail.php File
    08:17
  • Giving Feedback with the Title Tag on Inputs
    03:23
  • View the completed form on SpartanDesignUniversity
    00:10
  • Introduction to Sliders
    01:41
  • Setup the File
    07:57
  • Add a Caption to the Sliders
    06:13
  • Customize the Sliders
    04:33
  • Overview of a Slider with Thumbnails
    01:27
  • Build a Slider with Thumbnails
    06:12
  • Overview of Flexible Video
    02:22
  • Build a Page with Flexible Video
    08:41
  • Overview of Sprites
    01:33
  • Creating a Sprite in Photoshop
    02:12
  • Coding a Sprite
    03:08
  • Styling a Sprite
    07:54
  • Additional Options for Styling a Sprite
    04:07
  • View the Completed Examples on Spartan Design University
    00:32
  • Overview of Images and Font Graphics
    05:16
  • Responsive Images using CSS and background-image
    08:41
  • Responsive Images Using JavaScript
    16:45
  • Embedding a Twitter Feed into a Responsive Column
    07:50
  • Using Fonts for Social Media Icons
    10:28
  • Using Structured Data for your Address and Contact Information
    13:44
  • View the Completed Examples on Spartan Design University
    00:11
  • Overview of Lazy Loading
    02:30
  • Create a Lazy Loading Responsive Gallery with Grey Placeholders
    10:19
  • Modifying the Lazy Load Gallery using Greyscale Thumbnails
    04:07
  • Implementing an Add To Home script for Mobile Devices
    10:28
  • Examples created in this section can be seen on Spartan Design University
    00:45

Instructor
Web Designer and Developer
Paul Cheney
  • 4.0 Instructor Rating
  • 1,529 Reviews
  • 28,199 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.