Treehouse: Grow your CSS skills. Land your dream job.

Moving to HTTPS on WordPress

I just recently took CSS-Tricks "HTTPS everywhere". That is, every URL on this site enforces the HTTPS (SSL) protocol. Non-secure HTTP requests get redirected to HTTPS. Here's some notes on that journey.…

Read Article →

Sponsored: Win a Full Scholarship to Attend Launch Academy 

For two years now, Launch Academy has given the gift of loving what you do to each of their 250+ graduates. To celebrate, they want to provide someone with that same gift, for free. Show them your love for code, and you could win a full scholarship (worth $12,500) to attend Launch Academy this summer! You can become a software developer at a technology company in 10 weeks at no cost to you.

Simply submit a solution to the coding challenge with your application. The best submission will receive a full scholarship. Just by submitting an entry you are eligible to win one of 10 free Macbook Airs.

The contest ends March 20th, so get started today. Good luck and have some fun with it!

I like how percentage background-position works

I learned something the other day when we were fleshing out the background properties in the Almanac. It's such an intuitive thing, that I guess I just never stopped to think about it before.

By default, background-position is 0 0, the top left corner. Now imagine you set it to 50% 0. That background image is now center top. It figures out the size of that image, and positions the center of it at the center of …

Read Article →

Quantity Queries for CSS 

Heydon Pickering with some clever CSS selectors like:

li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
  /* Selects all list items if there are 6 or more */
}

Similar to Matt Mastracci's article where he focuses on styles for groups of specific numbers.

Using AngularJS for Data Visualisations

The following is a guest post by Nick Moreton. I gotta say I find this idea rather intriguing. I know that I love working in HTML, SVG, and CSS, so when Nick shares that we can use that for structure and use the data directly to style a chart, that appeals to me. And then to know that, because you're using Angular, the chart can automatically change when the data changes... that's just dang cool.

Read Article →

Dropdown Menus with More Forgiving Mouse Movement Paths

This is a fairly old UX concept that I haven't heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to in a dropdown menu. It's easy to screw up (have the mouse pointer leave the path) and be penalized by having it close up on you. Perhaps we can make that less …

Read Article →

Polylion

The following is a guest post by Dennis Gaebel. Dennis created some pretty captivating polygon SVG effects on CodePen, and here he'll share how he did it.

Read Article →

#136: Moving Things to a CMS as Needed

In this video, I prattle on about a particular "real world" situation I was in involving how I handle the CodePen Meetups page.

At the very beginning days of CodePen Meetups, we just had a single one planned. It was to be the first ever CodePen Meetup in Austin, Texas. So I made a page for it as part of the main CodePen website (a Rails project) at the URL /meetups/. There, I got to design it however I wanted. …

Watch Video →

More Blog Posts →