Responsive Web Design with HTML5 and CSS3 - Advanced
- Description
- Curriculum
- FAQ
- Reviews
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.
-
1
CSS Preprocessor Overview -
2
Introduction to SASS
In this video you will see how to install SASS using Compass APP.
-
3
Setting up a new project
In this video we setup a new project using Compass APP
-
4
Setting up a basic site in Dreamweaver
In this video we setup a project in Dreamweaver and test the code to make sure it's all working.
-
5
Using Partials and Import
In this video we implement partials and import to get our basic files all working.
-
6
Using Variables
In this video we examine SCSS variables
-
7
Using Nesting
In this video we examine SCSS nesting.
-
8
Using Mixins
In this video we examine SCSS mixins.
-
9
Using Extend or Inheritance
In this video we examine SCSS Extending.
-
10
Using Math Operators
In this video we examine SCSS operators
-
11
Examining a completed SASS page
In this video we examine a completed page built on SCSS.
-
12
View the Completed Example
-
13
Overview of Using PHP to Build Multiple Page Websites
In this video you will review the problems of building a multiple page website using HTML5 and how PHP can make your job easier.
-
14
Overview of Completed HTML5 Template
In this video you will see the completed HTML5 template on desktop, tablet and phone.
-
15
Breaking up an HTML5 Template into Multiple Pieces 1
In this video you will cover the theory behind breaking up a file into multiple PHP files.
-
16
Using Dreamweaver to Build the PHP Files
In this video you will you will see how to breakup a file into several PHP files using Dreamweaver.
-
17
Activating the Menu using jQuery
In this video you will see how to add a class to the current menu using jQuery.
-
18
Breaking up an HTML5 Template into Multiple Pieces 2
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.
-
19
Activating the Menu using pure CSS
In this video you will see how to activate the current menu using pure CSS. (No jQuery)
-
20
Adding Analytics Code to your Website
In this video you will see how to add the script from your Google Analytics account to your website built with multiple PHP files.
-
21
View the Completed Example
-
22
Introduction
In this video we review the advantages and disadvantages of CSS Frameworks
-
23
Getting Started
In this video we download and setup a Foundation 5 project to work on.
-
24
Creating a Basic Grid
In this video we setup a grid using Foundation5 and then show how easy it is to alter it using CSS classes.
-
25
Creating a Top Bar with Navigation and Search
In this video we build a navigation bar that includes navigation and search. We also show how to fix the CSS.
-
26
Implementing Responsive Images Loaded Using CSS
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
-
27
Creating a Block Grid
In this video we use the block grid to display images of various orientations in differerent numbers of columns.
-
28
Creating a Slider
In this video we build a slider using the Foundation 5 orbit slider.
-
29
Building an Image Thumbnail
In this video we use the "th" class to have a thumbnail image link to a full sized version.
-
30
Exploring Several Buttons
In this video we build several different kinds of buttins and style them using different classes.
-
31
Using Tabs to Display Content
In this video we build a tabbed area that displays different content depending on the tab selected.
-
32
Creating a Form
In this video we use the build in styling to create a form for collecting user information.
-
33
View the Completed Example
