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

October 17, 2012

Z-Index CSS Tutorial

In this CSS tutorial we take a look at Z-Index property. We learn that this property is used to control which elements will overlap other elements when they are positioned in such a way that overlapping is possible. We also cover the way that browsers interpret z-index values when both parent and child elements are […]

July 10, 2012

CSS Sprites Tutorial

In this CSS tutorial we take a look at CSS Sprites. We learn both why and how to use this wonderful technique which reduces the HTTP requests a page makes. CSS Sprites are made possible by the “background-position” property, and a basic understanding of placing images in a grid in one unified file. View Live […]

May 29, 2012

CSS Dropdown Navigation Menu (part 2)

In this CSS tutorial we take a look at styling dropdown menus, and also how we can use JavaScript to add support for our menu in older versions of Internet Explorer. View Live Demo Link to download files used in this tutorial (.zip file)

May 29, 2012

CSS Dropdown Navigation Menu (part 1)

In this CSS tutorial we take a look at dropdown navigation menus and the their HTML structure as well as the CSS needed to style them accordingly. Part 2 of the video will explain additional details, and include links to example code.