December 18, 2014 in Learn
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 experience, images tend to…
September 4, 2014 in Learn
Smarter 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 ($disp, $padding, $l-margin, $r-margin)…
August 6, 2014 in Learn
CSS 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. Thousands of students have…
July 31, 2014 in Learn
Modular 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 Sass, we’re able to…
July 29, 2014 in Learn
jQuery 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, but unfortunately that message sometimes…
July 17, 2014 in Learn
Which Design 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 even a project stakeholder…
July 15, 2014 in Learn
What 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 use is fairly natural. The…
July 1, 2014 in Learn
Should 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 v3.2) and Foundation (currently…
June 24, 2014 in Learn
How 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 it for 15 years…
June 11, 2014 in Learn
Box-Sizing: The Secret to Simple CSS Layouts
(Photograph from Flickr user Rachel Kramer) Box-sizing is a CSS property that makes CSS layouts work intuitively. If you’ve been working with CSS for any period of time, you know that using properties like width, padding, and border can be confusing….
June 2, 2014 in Learn
The 2014 Guide to Responsive Web Design
(Image from Flickr user Davidd) Responsive web design has changed a lot over the last few years. Front end development teacher, Nick Pettit updates you on all that’s changed when it comes to making websites work on mobile devices. Responsive…
May 27, 2014 in Learn
Tips for Debugging HTML & CSS
(Image from Flickr user Kevin Dooley) Debugging HTML and CSS problems can really ruin your creative momentum, but they’re inevitable when building almost any web project. It’s annoying when you’re designing a page and suddenly you notice that something isn’t quite aligned right…