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.8 (25 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.
749 students enrolled
Instructed by Paul Cheney Design / Web Design
$35
Take This Course
  • Lectures 53
  • Contents Video: 4 hours
    Other: 1 min
  • Skill Level Expert 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

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.

What are the 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

What am I going to get from this course?

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

What is the target audience?

  • Advanced Responsive Designers who have a solid foundation in HTML5, CSS3, media queries, responsive images and design.

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: CSS Preprocessors (SASS)
CSS Preprocessor Overview
Preview
03:05
01:46

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

03:44

In this video we setup a new project using Compass APP

02:48

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

10:01

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

10:02

In this video we examine SCSS variables

13:35

In this video we examine SCSS nesting.

09:58

In this video we examine SCSS mixins.

06:03

In this video we examine SCSS Extending.

05:06

In this video we examine SCSS operators

06:53

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

View the Completed Example
Article
Section 2: PHP Include & Automatic Menu Activation
03:10

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

01:44

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

02:35

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

11:21

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

05:48

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

06:46

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.

05:20

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

02:58

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

View the Completed Example
Article
Section 3: CSS Frameworks
01:26

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

03:57

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

08:06

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

09:07

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

07:24

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

06:43

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

08:55

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

03:19

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

09:27

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

06:19

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

06:18

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

View the Completed Example
Article
Section 4: jQuery Mobile Framework
Download the jQuery Start Files
Article
03:36

In this video you will see the final kite site.

05:49

In this video you will how the template is oprganized.

02:43

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

02:16

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

03:00

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

01:24

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

01:04

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

02:09

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

01:22

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

01:41

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

04:28

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

03:05

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

01:38

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

04:37

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

01:29

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

02:16

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

02:31

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

10: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.

View the Completed Example
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