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.
PHP Include & Automatic Menu Activation
-
1CSS Preprocessor Overview
-
2Introduction to SASS
In this video you will see how to install SASS using Compass APP.
-
3Setting up a new project
In this video we setup a new project using Compass APP
-
4Setting 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.
-
5Using Partials and Import
In this video we implement partials and import to get our basic files all working.
-
6Using Variables
In this video we examine SCSS variables
-
7Using Nesting
In this video we examine SCSS nesting.
-
8Using Mixins
In this video we examine SCSS mixins.
-
9Using Extend or Inheritance
In this video we examine SCSS Extending.
-
10Using Math Operators
In this video we examine SCSS operators
-
11Examining a completed SASS page
In this video we examine a completed page built on SCSS.
-
12View the Completed Example
CSS Frameworks
-
13Overview 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.
-
14Overview of Completed HTML5 Template
In this video you will see the completed HTML5 template on desktop, tablet and phone.
-
15Breaking 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.
-
16Using 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.
-
17Activating the Menu using jQuery
In this video you will see how to add a class to the current menu using jQuery.
-
18Breaking 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.
-
19Activating the Menu using pure CSS
In this video you will see how to activate the current menu using pure CSS. (No jQuery)
-
20Adding 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.
-
21View the Completed Example
jQuery Mobile Framework
-
22Introduction
In this video we review the advantages and disadvantages of CSS Frameworks
-
23Getting Started
In this video we download and setup a Foundation 5 project to work on.
-
24Creating 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.
-
25Creating 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.
-
26Implementing 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
-
27Creating a Block Grid
In this video we use the block grid to display images of various orientations in differerent numbers of columns.
-
28Creating a Slider
In this video we build a slider using the Foundation 5 orbit slider.
-
29Building an Image Thumbnail
In this video we use the "th" class to have a thumbnail image link to a full sized version.
-
30Exploring Several Buttons
In this video we build several different kinds of buttins and style them using different classes.
-
31Using Tabs to Display Content
In this video we build a tabbed area that displays different content depending on the tab selected.
-
32Creating a Form
In this video we use the build in styling to create a form for collecting user information.
-
33View the Completed Example