How to Create a Sticky Navigation
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...
View ArticleNew Courses: CSS, PHP, and Ruby
Here’s a look at the newest courses now available at Treehouse! CSS Selectors In this course taught by our resident CSS expert, Guil Hernandez, you’ll go beyond the basic selector concepts covered in...
View ArticleHow to Create a Simple CSS Dropdown Menu
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...
View ArticleCreate an SVG Sprite Sheet
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...
View ArticleWhat is CSS?
If you’re new to building websites, you’ve probably heard about CSS, or Cascading Style Sheets. But what is CSS exactly, and why do we use it on the Web? In this clip from the new CSS Basics course at...
View ArticleNew Courses: AngularJS, CSS Basics & Ruby Objects
New Courses: CSS Basics CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of web pages. Whereas HTML is what forms the structure of a web page, CSS is what we use...
View ArticleNew 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...
View ArticleClik here to view.
Customize Ordered Lists with the ::before Pseudo- Element
Web browsers let you customize the look of most aspects of a page using CSS. But when rendering some page elements, web browsers are resistant to your styling efforts. For example, form elements like...
View ArticleSmarter Sass Mixins with Null
code {background: none; padding: 0; font-size: 15px;} 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...
View ArticleModular Pseudo-Elements with Sass
code {background: none; padding: 0; font-size: 15px;} When generating pseudo-elements with CSS, we usually need to define certain properties to display the elements. This often means repeating CSS...
View ArticleClik here to view.
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...
View Article3 Quick Tips for Less Repetition in Stylesheets
When you hear the word “Sass,” what comes to mind? For a lot of people it’s the most popular CSS precompiler to date. Sass takes vanilla CSS and adds variables, nesting, functions, math and more to...
View ArticleHow to Create Smoother Animations and Transitions in the Browser
In order to achieve smooth transitions and animations, a browser needs to avoid doing extra work on its main thread, the part that’s in charge of handling tasks like JavaScript, style calculations,...
View ArticleHow to Evaluate Front-End Code for Inefficiencies
There’s more to writing good front-end code than knowing every HTML tag, CSS selector, or the latest front-end features and techniques. And as I mentioned in a recent blog post, writing good code takes...
View ArticleClik here to view.
How to Remember the Code You’re Learning
One of the most common questions I get from students is: “What’s the best way to retain what I’m learning?” @guilh I started treehouse and have been going through various HTML & CSS tracks but...
View ArticleLearn CSS Layout on Treehouse
Our new course on CSS layout has been released! In CSS Layout Techniques, you’ll learn to use the most common layout and positioning methods of web design. Throughout the course, we’ll build a layout...
View ArticleClik here to view.
How to Use The HTML List Elements
Some of the most commonly used elements for marking up web content are unordered, ordered, and definition lists. In this post you’re going to learn how to use these HTML list elements in your own web...
View ArticleClik here to view.
A Tale of Front-end Sanity: Beware the Sass @import
Imagine coming into work on your first day as a front-end designer or dev and getting your Rails development system up and running for the first time. You’re really excited to start working on...
View ArticleSass Tip: The Double Ampersand Selector
In Sass, the ampersand (&) symbol is used to reference the parent selector in a nested rule. For example, the following targets .btn on :hover: .btn { ... &:hover { background: dodgerblue; } }...
View ArticleClik here to view.
Challenges & Solutions for Your Responsive Navigation
One of the most biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well....
View Article
