Author
Guil is the front-end design teacher at Treehouse. You can follow Guil on Twitter at @guilh.
October 6, 2017 in Learn
Facebook recently announced the release of React 16, a complete rewrite of the React library. The new core architecture, codenamed “Fiber,” keeps most of the API intact and backward compatible. You can update your existing apps to React 16 without…
August 28, 2017 in Learn
Setting up the tools to develop a React application can be intimidating and time-consuming. There are a lot of moving parts. For example, setting up Babel to transpile JSX into browser-ready code, and configuring Webpack to bundle your project assets….
July 22, 2015 in Learn
CSS recently introduced a scroll snap points feature that gives users a fluid and precise scrolling experience for touch and input devices. There are plenty of jQuery plugins available that create scroll snap effects. But instead of installing a plugin…
February 5, 2015 in Learn
Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. There are lots of jQuery plugins we can use to…
January 21, 2015 in Learn
Many dropdown menus we see on websites use JavaScript in some way, but it’s possible to build one entirely with HTML and CSS. In this short video tutorial, we’ll take advantage of helpful CSS selectors to build a simple dropdown…
January 14, 2015 in Learn
Image sprites are still a useful feature in web design. They’re also important for website optimization because they combine several images into one image file to reduce HTTP requests. In this tutorial, we’ll learn how to create an SVG sprite sheet…
December 2, 2014 in Learn
HTML5’s local storage feature allows the browser to store and retrieve specific data. In this post, we’ll pick up where we left off in the previous post where we built a real-time CSS editor using the HTML5 contenteditable attribute. Now we’re…
November 18, 2014 in Learn
Did you know that we’re able to create client-side, in-browser content editing using basic HTML elements? We could then save that edited content to the browser’s local storage. The key to making this happen is with the HTML5 contenteditable attribute. To see how contenteditable works,…
October 13, 2014 in Learn
The last wave of new CSS3 features introduced in-browser design features like border-radius, gradients, multiple backgrounds, and box-shadow. CSS continues to evolve and today’s native features are becoming closer to tools we’d normally use in our favorite graphics editor. In…
September 22, 2014 in Learn
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 and cut down maintenance…
September 4, 2014 in Learn
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)…
July 31, 2014 in Learn
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…