Full Height and Width Web App Style Layout

In this lesson we learn how to position and size our elements to utilize the full height and width of the browser window. We use different layout and positioning strategies for this “application” layout than we would normally use for a traditional “page” layout.

Link to demo page shown in lesson
Direct link to CSS
Direct link to JS

Posted in JavaScript Video Tutorials | Leave a comment

Sticky Navigation Tutorial

In this lesson we learn how to create a “sticky” navigation which is another way of saying an element should use “fixed” position once it would normally scroll out of view.

In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript I recommend watching these two introductory videos:

Introduction to JavaScript with jQuery
Intermediate JavaScript with jQuery

Link to demo page shown in lesson
Direct link to “script.js” file

Posted in JavaScript Video Tutorials | Leave a comment

jQuery Variables, Functions, and Conditional Logic

This lesson picks up where our original “Introduction to JavaScript with jQuery” lesson ended. We learn how to use variables, conditional logic and functions to create flexible code.

Link to demo page shown in lesson

Note: The reveal effect shown in this lesson is not terribly useful in real world applications. Most tablets and smartphones cannot run code during the middle of a swipe scroll event so the effect will only run seamlessly on traditional computers / laptops. In short, I wouldn’t necessarily use this effect on a production website, but it is a good playground for the sake of learning more about JavaScript variables, functions, and conditional logic.

Also, I recommend not using jQuery’s “animate” method whenever possible. Instead, you can simply use jQuery to add/remove a class at the desired moments, and instead use CSS transitions or animations. We’ll cover this strategy in future lessons. The jQuery animate method is more dependable in older browsers and devices, but the CSS method provides smoother performance.

Finally, we created the “on scroll reveal” functionality in this lesson from scratch as a learning exercise. If, however you’re interested in a more robust and pre-built solution, be sure to search for the existing jQuery plugin named “jQuery WayPoints.”

Posted in JavaScript Video Tutorials | Leave a comment

JavaScript and jQuery Tutorial (for Beginners)

In this lesson we learn what JavaScript is used for and how to leverage the popular JavaScript library named jQuery.

View example page shown in lesson
Direct link to “script.js” file

Posted in JavaScript Video Tutorials | Leave a comment

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 all demo files as a .zip

Posted in CSS Video Tutorials | Leave a comment

Full Width Background with Fixed Width Content

In this video we learn how to mix full width background containers with fixed width content containers.

Posted in CSS Video Tutorials | Leave a comment

How to Center an Image Horizontally

In this video we look at two of the most popular techniques to center images horizontally.

Posted in CSS Video Tutorials | Leave a comment

HTML Tables Tutorial

In this tutorial we learn how to code HTML tables, when to use tables to format our HTML content, when not to use them, and also how to add basic styling (via CSS) to our tabular data.

Posted in HTML Video Tutorials | Leave a comment

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 block values they will then have no difficulty understanding the other less commonly used values.

Posted in CSS Video Tutorials | 2 Comments

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 both given z-index values.

Posted in CSS Video Tutorials | 2 Comments