November 25, 2014

Google “Mobile-friendly” label in Search Results

In this lesson we learn how to have Google’s new “Mobile-friendly” label appear next to our websites in search results. We perform a complete “mobile makeover” on an outdated desktop website in order to practice key concepts. Demo site from video Zip Download of demo files

November 25, 2014

Photo Gallery with Modal Window Tutorial

In this lesson we learn how to create a photo gallery with a neatly aligned grid for thumbnails. When a thumbnail is clicked / tapped a modal windows (lightbox) will be opened with a higher resolution version of the photo. This lesson is a snippet from my 8 hour web design course. Learn more about […]

October 21, 2014

Sass Tutorial for Beginners

This Sass tutorial is for absolute beginners or anyone who has been intimidated by preprocessors in the past. We cover the basic features of Sass and even write two mixins by hand (gradients and media queries). This lesson is a snippet from my 8 hour web design course. Learn more about the course and how […]

October 21, 2014

CSS Background Image Tutorial

Learn how to add background images with CSS (repeat or tile, position, size, and multiple images assigned to a single element). This lesson is a snippet from my 8 hour web design course. Learn more about the course and how to save 50% off the list price.

June 19, 2014

Bootstrap Responsive Layout Tutorial

In this lesson we learn how the Bootstrap column grid system makes creating responsive layouts incredibly simple. We also put together a responsive navigation menu, and finally, learn about Bootstrap’s “responsive utility classes” which we can use to hide and display certain content for certain viewport sizes. Responsive Web Design principles are easy to implement […]

June 15, 2014

Responsive Web Design Navigation Menu Tutorial

In this lesson we learn how to create a responsive navigation menu. For larger screens we use a traditional horizontal menu bar, but for smaller screens we initially hide the navigation until a “menu” button is tapped or clicked. For an overall introduction to JavaScript you can view this tutorial. For an overall introduction to […]

April 2, 2014

Responsive Web Design Tutorial

In this video we learn what Responsive Web Design is and how to write the necessary code to create our own custom responsive web layouts. A more technical term for this lesson would be “An Introduction to Media Queries.” Demo Page Shown in Lesson Direct link to “Desktop” CSS Direct link to “Mobile” CSS Download […]

October 30, 2012

CSS Display Property Tutorial

In this CSS tutorial we take a look at display property. We learn about the three most popular values for the property, when they are used, and how they are used. There is an emphasis on the way these three values relate to one another with the hope that if one can understand these building […]