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
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.
Unstarted
Team
Unstarted
Design
Unstarted
Development
Unstarted
Launch!
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.
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.
Design for Developers
Get better at visual design and create something great.
Get better at visual design and create something great.
Unstarted
Part 2: Grid Systems
Unstarted
Part 3: Typography
Unstarted
Part 4: Color
Unstarted
Part 5: Tips, Tricks and Trends
The Weekly Iteration
Chris Toomey and 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....
Ryan Coughlin and 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...
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!
Mike Borsare and 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...