Responsive Web Design with HTML5 and CSS3 - Intermediate

Learn about HTML5 Forms, Image Sliders, Flexible Video, Lazy Loading, and Image Sprites
4.7 (26 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.
595 students enrolled
$35
Take This Course
  • Lectures 38
  • Contents Video: 4 hours
    Other: 2 mins
  • Skill Level Intermediate 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 6/2014 English

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

What are the requirements?

  • Web Hosting, Dreamweaver or other WYSIWYG editor, Photoshop.

What am I going to get from this course?

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

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

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

Section 1: HTML5 Forms
01:17

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

20:24

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

09:42

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.

03:01

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

07:23

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

13:12

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

08:09

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

01:49

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

09:46

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

08:17

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

03:23

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

View the completed form on SpartanDesignUniversity
Article
Section 2: Sliders and Video
01:41

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

07:57

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

06:13

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

04:33

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

01:27

In this video you will see the completed thumbnail slider

06:12

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

02:22

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

08:41

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

01:33

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

02:12

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

03:08

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

07:54

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

04:07

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

View the Completed Examples on Spartan Design University
Article
Section 3: Images and Font Graphics
05:16

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

08:41

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

16:45

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

07:50

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.

10:28

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

13:44

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

View the Completed Examples on Spartan Design University
Article
Section 4: Lazy Loading & Home Screen Icons
02:30

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

10:19

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

04:07

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

10:28

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.

Examples created in this section can be seen on Spartan Design University
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