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 If you would rather learn from a single, unified […]

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 premium web design course. Join 4,000+ […]

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 premium web design course. Join 4,000+ others who have already […]

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 premium web design course. Join 4,000+ others who have already learned pro-level HTML, CSS, and responsive design.

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 […]

April 2, 2014

Full Width Background with Fixed Width Content

In this video we learn how to mix full width background containers with fixed width content containers. If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my updated 8 hour video course and learn pro-level HTML, CSS, and responsive design.

March 31, 2014

How to Center an Image Horizontally

In this video we look at two of the most popular techniques to center images horizontally. If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my updated 8 hour video course and learn pro-level HTML, CSS, and responsive design.

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 […]