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.
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.”
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.”
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.
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.