Responsive Web Design with HTML5 and CSS3 - Advanced
4.4 (39 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.
924 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

Responsive Web Design with HTML5 and CSS3 - Advanced

Learn the SASS CSS Preprocessor, Building a site with php includes, the Foundation 5 CSS Framework, and jQuery Mobile
4.4 (39 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.
924 students enrolled
Created by Paul Cheney
Last updated 6/2014
English
Current price: $13 Original price: $35 Discount: 63% off
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 5 Articles
  • 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 build a webpage using the CSS Preprocessor SASS
  • By the end of this course, you will be able to leverage PHP to build a website with reusable code.
  • By the end of this course, you will be able to use the Foundation 5 framework to build a webpage.
  • By the end of this course, you will be able to use jQuery mobile to build a site and then redirect handheld traffic to that site.
View Curriculum
Requirements
  • You will need web hosting where you can upload and test your PHP files
  • You will need an HTML editor like Dreamweaver
  • It is recommended that you have an image editing program like Photoshop or GIMP
Description

If you have been building responsive websites and you're ready to take your skills to the next level, then this course is for you. This is the third course in this series on Responsive Web Design by Paul Cheney and covers the following topics.

  • Using a CSS preprocessor to build a webpage.
  • Using PHP include() so that you can build a multiple page website and take advantage of reusable code.
  • Using a CSS frameworks and how to build a page using Foundation 5.
  • Using jQuery Mobile and a PHP redirect for handheld devices.
Who is the target audience?
  • Advanced Responsive Designers who have a solid foundation in HTML5, CSS3, media queries, responsive images and design.
Curriculum For This Course
53 Lectures
04:00:36
+
CSS Preprocessors (SASS)
12 Lectures 01:13:06

In this video you will see how to install SASS using Compass APP.

Preview 01:46

In this video we setup a new project using Compass APP

Preview 03:44

In this video we setup a project in Dreamweaver and test the code to make sure it's all working.

Preview 02:48

In this video we implement partials and import to get our basic files all working.

Using Partials and Import
10:01

In this video we examine SCSS variables

Using Variables
10:02

In this video we examine SCSS nesting.

Using Nesting
13:35

In this video we examine SCSS mixins.

Using Mixins
09:58

In this video we examine SCSS Extending.

Using Extend or Inheritance
06:03

In this video we examine SCSS operators

Using Math Operators
05:06

In this video we examine a completed page built on SCSS.

Examining a completed SASS page
06:53

View the Completed Example
00:05
+
PHP Include & Automatic Menu Activation
9 Lectures 39:47

In this video you will review the problems of building a multiple page website using HTML5 and how PHP can make your job easier.

Overview of Using PHP to Build Multiple Page Websites
03:10

In this video you will see the completed HTML5 template on desktop, tablet and phone.

Overview of Completed HTML5 Template
01:44

In this video you will cover the theory behind breaking up a file into multiple PHP files.

Breaking up an HTML5 Template into Multiple Pieces 1
02:35

In this video you will you will see how to breakup a file into several PHP files using Dreamweaver.

Using Dreamweaver to Build the PHP Files
11:21

In this video you will see how to add a class to the current menu using jQuery.

Activating the Menu using jQuery
05:48

In this video you will see how to break up a file into several PHP files. In this video we leave the <body> tag in place.

Breaking up an HTML5 Template into Multiple Pieces 2
06:46

In this video you will see how to activate the current menu using pure CSS. (No jQuery)

Activating the Menu using pure CSS
05:20

In this video you will see how to add the script from your Google Analytics account to your website built with multiple PHP files.

Adding Analytics Code to your Website
02:58

View the Completed Example
00:05
+
CSS Frameworks
12 Lectures 01:11:06

In this video we review the advantages and disadvantages of CSS Frameworks

Introduction
01:26

In this video we download and setup a Foundation 5 project to work on.

Getting Started
03:57

In this video we setup a grid using Foundation5 and then show how easy it is to alter it using CSS classes.

Creating a Basic Grid
08:06

In this video we build a navigation bar that includes navigation and search. We also show how to fix the CSS.

Creating a Top Bar with Navigation and Search
09:07

In this video we show how to implement responsive images using CSS and loading them as background-image. You can download the override.css file I used in this video from Spartan Design Univesity

Implementing Responsive Images Loaded Using CSS
07:24

In this video we use the block grid to display images of various orientations in differerent numbers of columns.

Creating a Block Grid
06:43

In this video we build a slider using the Foundation 5 orbit slider.

Creating a Slider
08:55

In this video we use the "th" class to have a thumbnail image link to a full sized version.

Building an Image Thumbnail
03:19

In this video we build several different kinds of buttins and style them using different classes.

Exploring Several Buttons
09:27

In this video we build a tabbed area that displays different content depending on the tab selected.

Using Tabs to Display Content
06:19

In this video we use the build in styling to create a form for collecting user information.

Creating a Form
06:18

View the Completed Example
00:05
+
jQuery Mobile Framework
20 Lectures 56:04
Download the jQuery Start Files
00:19

In this video you will see the final kite site.

Demonstration
03:36

In this video you will how the template is oprganized.

Template Explained
05:49

In this video you will see how to build an accordian.

Accordian
02:43

In this video you will see how to add a button and then apply a color theme.

Button Theme
02:16

In this video you will learn how to add checkboxes to your project.

Checkboxes
03:00

In this video you will see how to implement a set of radio buttons.

Radio Buttons
01:24

In this video you will see how to create a popup dialog box.

Dialog
01:04

In this video you will learn how to stick the footer to the bottom of the screen.

Fixed Position
02:09

In this video you will see how to implement a flop switch in a form.

Flip Switch
01:22

In this video you will see how to build a slider for a form

Slider
01:41

In this video you will see how to build a multi-column grid.

Grids
04:28

In this video you will see how to customize any icon.

Icons
03:05

In this video you will see how to build a horizontal navigation bar.

Navigation Bar
01:38

In this video you will learn how to manipulate a data table.

Tables
04:37

In this video you will see how to create a text input box.

Text Input
01:29

In this video you will see how to add a transition to an anchor tag.

Transitions
02:16

In this video you will see how to add your own CSS to your project.

Custom CSS
02:31

In this video you will learn how to add a PHP script to your site so it redirects to the jQuery version when accessed from a mobile device.

PHP Redirect for mobile devices
10:31

View the Completed Example
00:06
About the Instructor
Paul Cheney
4.6 Average rating
519 Reviews
4,068 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.