Optimize Images for the Web
One of the best ways to create fast websites is to optimize images for the web. HTML, CSS, JavaScripts, and fonts can add up, but nothing will slow a page down like tons of unoptimized graphics. In my…
Read MoreNew Courses: Java Objects & SVG Basics
New Courses: SVG Basics Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors. This is different from traditional raster-based image formats that use pixels, like JPEG and PNG. When used…
Read MoreNew Course: Modular CSS with Sass
In this new course, you’re going to build a UI toolkit using Sass and many of the best practices and principles of modular CSS architecture. You’ll learn how a modular approach with Sass can boost your workflow…
Read MoreSmarter Sass Mixins with Null
With Sass mixins we’re able to pass a list of arguments to set the values of properties. For example, the following mixin uses four variables as arguments to define the display, padding and margin properties of an element. @mixin display…
Read MoreCSS Hover Effects for Photos
One of the most popular courses on Treehouse is How to Make a Website, which walks through the process of building a complete portfolio site from scratch. However, even after completing the course, the learning is only just beginning….
Read MoreModular Pseudo-Elements with Sass
When generating pseudo-elements with CSS, we usually need to define certain properties to display the elements. This often means repeating CSS declarations for content, display and position, the most common properties used for generating shapes with pseudo-elements. With…
Read MorejQuery Plugins for HTML Tables
(Photo from Flickr user Jeremy Levine) HTML tables have a bad reputation. In the 1990’s and 2000’s, many web professionals would use tables for positioning text and images on web pages. Using tables for layout is bad,…
Read MoreWhich Layout? Static, Liquid, Adaptive, or Responsive
(Photo from Flickr user Will Scullin) When discussing a page layout, web designers will often use terms like fixed, static, liquid, adaptive, responsive, and a few others. If you’re a web designer, a web developer, or…
Read MoreWhat Are Affordances in Web Design?
(Photograph by Flickr user Banzai Hiroaki) Affordances are clues about how an object should be used, typically provided by the object itself or its context. For example, even if you’ve never seen a coffee mug before, its…
Read MoreShould You Use Bootstrap or Foundation?
(Photograph from Flickr user Uppy Chatterjee) I’ve been teaching web design in some capacity for about 5 years now, and lately one of the most frequently asked questions is, “Should I use Bootstrap or Foundation?” Bootstrap (currently at…
Read MoreHow to Use the Input Element
(Image from Flickr user Canada Science and Tech) The input element is a deceptively simple HTML form element. After all, <input> is just one HTML element, right? Whether you’re still new to HTML or if you’ve been writing…
Read MoreHow to Stay Motivated
(Photograph by Flickr user Chris Waits) Staying motivated can be tough, especially on longer projects. Recently a professional acquaintance told me about a 3-year-long client project. This is an extreme case, but long projects are not uncommon in the…
Read More