Learn Design

These days learning web design is about more than just putting a few elements on a page, and there is certainly more to it than basic HTML. As time goes by, the web (or at least the best of it) is getting more elegant, more usable, and more visually sophisticated. If you want to create outstanding sites and web apps, you’ve got to know about the design side as well as getting functionality right.

Our web design tutorials, videos, and course materials take on CSS (including advanced topics), Sass (Syntactically Awesome Stylesheets), and other subjects that will help you create a visually stunning front-end.

If you’ve already got some code experience and want to improve your visual skills, check out the Design for Developers section. There is enough meat in there to make a real difference to how you present sites, and it covers some of the latest web design trends too.

If you haven’t, the CSS training modules are a great place to start really learning web design fundamentals that can be applied across different platforms and projects. CSS is one of those core competencies every developer should have down pat.

Trails

Design

The Playbook: Video Edition

How to plan, design, develop, and launch a successful web application.

?

How to plan, design, develop, and launch a successful web application.

1 hour 51 minutes
Next Up

Planning

Unstarted

Team

Unstarted

Design

Unstarted

Development

Unstarted

Launch!

5 steps remaining
Visit trail
Design

Bourbon Smash

Managing styling and front-end design can be complicated, especially if you spend most of your time as a developer. In this course you'll learn thoughtbot's Bourbon suite, a collection of tools and frameworks that make building clean, maintainable styles a breeze.

?

Managing styling and front-end design can be complicated, especially if you spend most of your time as a developer. In this course you'll learn thoughtbot's Bourbon suite, a collection of tools and frameworks that make building clean, maintainable styles a breeze.

4 hours 45 minutes
Next Up

Bourbon Smash Introduction

Wondering what exactly Bourbon and its friends are, and why you'd want to use them to build your styling? Well look no further. In this video we cover it all and explain how we think about front-end styling here at thoughtbot.

Unstarted

Sass Overview

Sass bills itself as "CSS with superpowers" and it certainly lives up to the title. In this video we introduce the most powerful and useful features of Sass to build more maintainable and clear stylesheets, and lay the foundation for Bourbon and Neat which rely on Sass for much of their magic.

Unstarted

Sass Foundations Exercise

Put your new-found Sass knowledge to the test in this exercise as we refactor a stylesheet from plain ole' CSS to Sass. In this exercise you'll get to try out great Sass features like imports, variables, nesting, and even loops, and come away with a solid grasp on how Sass can be used to clean things up.

Unstarted

Bourbon Introduction

Bourbon is our core library that helps us build maintainable stylesheets. It’s built with Sass and provides the foundation for all of our styles as well as Neat, Bitters, and Refills. In this video we explain exactly what Bourbon provides, and how you can best use it to aid your styling work.

Unstarted

Bourbon Foundations Exercise

Take advantage of Bourbon's mixins to style a login form. You'll get to work with both Sass and Bourbon in the exercise to lock in your knowledge.

Unstarted

Neat - Semantic Grids

Design a responsive grid without having to change your HTML! Neat layers onto the foundation of Sass and Bourbon, giving us the tools we need to build a semantic responsive grid with ease.

Unstarted

Neat Grids Exercise

Use Neat to build a responsive grid based layout. You'll use Neat's mixins as well as Sass variables to build a responsive grid, all without needing to change your HTML.

Unstarted

Bitters and Refills

Ok, Sass, Bourbon, and Neat all sound great, but who wants to start completely from scratch every time? With Bitters, our style foundation for building applications, and Refills, our catalog of pre-styled components, you can stick to the clean semantic design and still be up and running quickly.

Unstarted

Bringing It All Together

In this last video, we bring together everything from Sass, Bourbon, Neat, Bitters and Refills to style a Rails application. Tyson shows us his real process, and explains the thinking and choices at each step.

9 steps remaining
Visit trail
Design

Design for Developers

Get better at visual design and create something great.

?

Get better at visual design and create something great.

1 hour 49 minutes
Next Up

Part 1: Principles of Visual Design

Unstarted

Part 2: Grid Systems

Unstarted

Part 3: Typography

Unstarted

Part 4: Color

Unstarted

Part 5: Tips, Tricks and Trends

5 steps remaining
Visit trail

The Weekly Iteration

Hosted by

Chris Toomey and Connie Chan

Chris Toomey
Connie Chan

Historically, developers and designers have reached for JavaScript to build certain presentational features such as animations and transitions. With modern CSS features, some of these capabilities can now be achieved with little to no JavaScript....

Hosted by

Ryan Coughlin and Chris Toomey

Ryan Coughlin
Chris Toomey

Responsive design is a critical approach to making sure your content is useful and readable on the increasingly large array of device sizes in use today. Tune in as Chris and Ryan discuss the ins and outs of responsive design, sharing the...

Hosted by

Lydia Damon

Lydia Damon

Lydia joins Ben to talk about the front-end tools that thoughtbot designers use: Bourbon, Neat, Bitters, and Refills. Then, see them in action while styling a production app!

Hosted by

Mike Borsare and Chris Toomey

Mike Borsare
Chris Toomey

This week we take a quick detour into the design world to learn about Flexbox, a major enhancement to defining layouts in CSS. Chris is joined by thoughtbot designer Mike Borsare to learn the ins and outs of flexbox and how it can make our lives...