Welcome to Tracks
Treehouse Tracks are guided curriculums that cover all relevant Courses and Workshops necessary to master a subject. Treehouse’s learning library includes dozens of Tracks on a variety of topics including web design, programming, and more. With Compass, you’ll also be able to test out of subjects you already know, and create a custom curriculum for your learning goals.
View all TracksReady to start learning?
Treehouse offers a 7 day free trial for new students. Get access to 1000s of hours of content. Learn to code, land your dream job.
Start Your Free Trial-
Course
- 1
- 2
- 3
Introduction to HTML and CSS
Get started creating web pages with HTML and CSS, the basic building blocks of web development. HTML, or HyperText Markup Language, is a standard set of tags you will use to tell the web browser how the content of your web pages and applications are structured. Use CSS, or Cascading Style Sheets, to select HTML tags and tell the browser what your content should look like. Whether you are coding for fun or planning to start a career in web development, learning HTML and CSS is a great place to start.
-
Course
- 1
- 2
- 3
- 4
HTML Basics
Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.
-
Course
- 1
- 2
- 3
- 4
CSS Basics
In this course, we're going to learn the basics of CSS, one of the core technologies for designing and building websites and applications. No matter what kind of website or web application you want to build, you'll have to use CSS. If you haven't written much CSS, or even if you’ve never written CSS at all, don’t worry. That's what this course is for. We’ll start with basic CSS concepts, then gradually progress to more advanced topics and lessons.
-
Course
- 1
- 2
- 3
- 4
CSS Layout
In this course, we're going to learn techniques for better control over our CSS layouts. We’ll cover how the CSS Box Model impacts the presentation of each HTML element, learn to control the position of each element onscreen, and even begin to adjust our layouts for different screen sizes and environments.
-
Course
- 1
- 2
- 3
- 4
Enhancing Design with CSS
In this course, we're going to learn CSS properties for enhancing visual design. We’ll cover various properties for styling text, including loading web fonts from external resources. We’ll learn techniques for turning our CSS boxes into more than just rectangles. And finally, we’ll learn some really cool visual effects using CSS filters and gradients.
-
Course
- 1
- 2
- 3
- 4
JavaScript Quickstart
Get up to speed with the basics of JavaScript. In this course, you'll learn the fundamental concepts and syntax of the JavaScript programming language.
-
Course
- 1
- 2
- 3
- 4
JavaScript Basics
JavaScript is a programming language that drives the web: from front-end user interface design to server-side backend programming, you'll find JavaScript at every stage of a website and web application. In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.
-
1 minInstruction
Go Further with JavaScript
JavaScript is one of the foundational technologies for building web pages and applications. We have additional courses to help you learn more....(continue reading)
Viewed -
Course
- 1
- 2
- 3
- 4
Creating User Experiences
Join us as we learn the basic principles of User Experience Design and how it shapes everyday interactions with products. By structuring products around users’ needs, we can ensure that the products do their job. You will learn how to meet users where they are, think through intuitive experiences, and create products that more effectively meet both your goals and your end users’ goals. This course will help you think more critically through the steps and decisions a user makes while interacting with your product. If you’re considering a career in User Experience (UX) or want to learn more about it, this course will expose you to how to design and plan around the people who use your product.
-
Course
- 1
- 2
- 3
- 5
Introduction to Wireframing
Wireframing is a useful part of the design process. Throughout a website or mobile app project, you will have a lot of ideas and the best way to sort through those ideas is to brainstorm. Wireframes are a visual artifact of brainstorming, and the goal is to make them with minimal effort, as to encourage ideation. Whether you're a designer or not, wireframing is an important skill to have in your toolkit. It's beneficial for product managers, marketers, or anyone else with ideas for a website or mobile app. Wireframes are a valuable tool for visualizing user experiences, iterating on ideas, and sharing ideas with others.
-
Course
- 1
- 2
- 3
Prototyping with Figma
In this course, you'll learn how to build interactive and sharable prototypes in Figma, a web-based visual prototyping tool. You'll create a prototype for a "prosumer" mobile photography app, and by the end, you'll have a better understanding of how to create interactive prototypes that can be shared with project stakeholders and team members.
-
Course
- 1
- 2
- 3
- 4
- 5
Web Typography
As web features barrel ahead, web typography advances with it. We now have more control over type than ever before. But, as the often-quoted line from Spiderman goes, “With great power, comes great responsibility.” Well-built websites can be plagued by bad typography, creating an unpleasant experience to the user. In this course, we’ll cover all you need to know to begin building websites with good typography, giving users a great experience.
-
Course
- 1
- 2
SVG Basics
Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors. This is different from traditional raster-based image formats that use pixels, like JPEG and PNG. When used on web pages, SVG images provide an infinite level of detail, so they look sharp regardless of screen size or pixel density. In this course, we'll look at situations where SVGs are better than PNG and JPEG files, as well as when an SVG might not be the best choice. Finally, we'll learn how to modify SVGs using CSS.
-
34 minWorkshop
Rapid Website Prototyping
In this workshop, Treehouse web design teacher Nick Pettit will be demonstrating how to rapidly prototype websites using a combination of mockup tools and front-end frameworks.
Viewed -
Course
- 1
- 2
Responsive Images
Using the new source-set and sizes attributes, and the new picture element, it's possible to create images that behave better in a responsive design. These new pieces of markup allow us to deliver the right image to the right device, based on resolution, pixel density, and other factors we define. This will help web pages load faster and look better, and the most capable devices will get the best looking images possible.
-
Course
- 1
- 2
- 3
Responsive Layouts
Responsive web design is a collection of techniques for building websites that work on multiple screen sizes. In these lessons, we're going to use the foundational principles of responsive design as a framework for thinking about page layout. By the end, you should have a better understanding of how to approach common decisions in responsive design.
-
1 minInstruction
Learn Modern CSS Layout Techniques
Build your CSS skills by learning modern and efficient ways to build responsive page layouts....(continue reading)
Viewed -
61 minWorkshop
Web Design Q&A
In this live Q&A session, Nick answers student questions about responsive images, front-end frameworks, getting a job in the industry, and much more.
Viewed -
Track Completion
Web Programming Skills for Graphic Designers
We created this Track for designers who want to level up their skill set, but are not quite sure how—everything you'll need is right here!
Designers across all industries are learning that understanding design programs like Adobe Illustrator and InDesign alone aren't enough to grow their career. Commonly, modern design positions require at least a basic knowledge of web design and programming. In this track, we cover the basics of the most common Front End Web Development languages, User Experience Design, and more.
You'll start with HTML, CSS, and JavaScript basics, to build a sturdy foundation for web and email design. Next, you'll jump to our UX Basics and Creating User Experiences courses to expand your UX knowledge.
Next, you'll dive into some practical design and UX skills. Our Wireframing, Figma, prototyping, typography, and SVG courses will empower you to start designing beautiful websites and apps with confidence. This Track will wrap up with a closer look at some responsive CSS principles.
Whether you're on the job hunt and want to freshen up your resume, or you'd like to grow in your current design role, this Track is the perfect combo of courses for ambitious designers.