Welcome to the Treehouse Library
This is a sample catalog of all the courses we offer. Browse by topic or difficulty. Sign up today and get access to our entire library. Treehouse students get access to workshops, bonus content, conferences, and more.
Ready 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- Newest
-
All Topics
- All Topics
- • AI
- • JavaScript
- • Databases
- • Python
- • Design
- • React
- • HTML
- • CSS
- • Data Analysis
- • Java
- • C#
- • Android
- • Computer Science
- • PHP
- • Quality Assurance
- • APIs
- • Security
- • Digital Literacy
- • Development Tools
- • Business
- • 21st Century Skills
- • Ruby
- • Machine Learning
- • Learning Resources
- • Go Language
- • Equity, Diversity, and Inclusion (EDI)
CSS
Cascading Style Sheets (CSS) forms the presentational layer of web pages. CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.
-
34 hoursBonus Series
Code & Chill Livestreams
Watch Treehouse Developer Advocate Dustin Usey on Code & Chill, a weekly livestream on Twitch where he streams random app builds, hosts fun code-along sessions, and hangs out with the Treehouse community.
Viewed -
28 minWorkshop
Create a Portfolio Using Python and Flask
Build an impressive online portfolio with Python and the Flask framework to showcase your skills to potential employers. We'll start with provided HTML, CSS, and JavaScript files. Then, make the HTML modular and dynamic through templating. We'll also cover hosting terminal-based Python apps and the portfolio itself.
Viewed -
53 minWorkshop
Create a Portfolio Using HTML and CSS
Portfolios are a great way to show off your skills to a potential employer. In this workshop, weβll start with provided mockups and journey together through the construction of a stunning portfolio using HTML and CSS, sprinkling in a touch of JavaScript for interactivity. Prioritizing a mobile-first approach and keeping accessibility in mind, weβll ensure the portfolio is not only visually captivating but also user-friendly for all.
Viewed -
- 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.
-
41 minWorkshop
Navigate Unfamiliar Code with AI
Join Dustin as he showcases the actual process of constructing a task manager application when faced with an unfamiliar codebase. Using AI tools such as GitHub Copilot and ChatGPT to assist in bridging any gaps that come up along the way.
Viewed -
42 minWorkshop
Pagination with GitHub Copilot
Follow along with Dustin in this fun, unscripted, live coding session where he demonstrates the strengths and weaknesses of using GitHub Copilot as a co-developer. In this video, Dustin builds a friends app that utilizes pagination with vanilla JavaScript! How much do you think GitHub Copilot was able to help?
Viewed -
15 minWorkshop
Can ChatGPT Build a Website?
Leveraging the power of OpenAIβs ChatGPT is a great tool in your developer tool belt, but how accurate is ChatGPT when using it to build a website from a mockup? There are some surprising strengths as well as weaknesses. Follow along with Dustin to explore how ChatGPT fares at building a website from a mockup in this fun, AI-powered code-along.
Viewed -
15 minWorkshop
Build a Basic ChatGPT Clone with Vanilla JavaScript
Learn to build a basic ChatGPT clone with vanilla JavaScript in this video. Follow along with Dustin as he walks you through the process, from writing the HTML for the UI to integrating the OpenAI API. By the end, you'll have a functional chatbot that can generate human-like responses to user inputs!
Viewed -
35 minWorkshop
How to Build a Google Chrome Extension: Strong Password Generator
Ever wanted to make your own Google Chrome Extension? Follow along as Dustin builds a strong password generator and then converts it to a Google Chrome Extension! This project is built with HTML, SASS, and vanilla JavaScript so a good understanding of those concepts will help you understand this project. If you need a refresher, take a look at some of the courses in the Teacher's Notes that cover the basics.
Viewed -
35 minWorkshop
Auto User Search with JavaScript - Treehouse Live
Need practice working with the Document Object Model (DOM)? This project showcases some of the core concepts needed to interact with and manipulate the DOM. Follow along as Dustin builds a searchable input field that filters users based on your search query!
Viewed -
37 minWorkshop
CSS-Only Facebook Reactions UI - Treehouse Live
Most social media platforms allow users to interact with other usersβ posts. Letting users use an emoji to show how they feel about them is a fun way to add some interactivity to your project or app. Follow along as Dustin reveals how to recreate the Facebook reactions UI with just CSS!
Viewed -
33 minWorkshop
Build an Interactive Settings Panel - Treehouse Live
Want to code out a real-world project with Dustin? Follow along with our Treehouse Live replay as he builds a settings panel UI from scratch with just HTML and CSS. Then, he refactors the app with JavaScript to render parts of the UI dynamically. Stick around to the end to find out how he implements a dark mode toggle for the settings panel itself with an event listener!
Viewed -
38 minWorkshop
Create a Chat App UI - Treehouse Live
In this live demonstration, Dustin builds a chat app UI (user interface) using HTML, CSS, and JavaScript. The slick design includes a toggle button for dark mode. The GitHub link in the teacher's notes includes both the starter files and the completed code. You can follow along and build the project yourself, as well as study Dustin's version. Note that he builds only the UI, not the chat app itself.
Viewed -
8 minWorkshop
JavaScript Accordion
Accordions are everywhere on the web and even in mobile apps. Theyβre an effective way to show and hide content based on user interaction. In this guide, Iβll go over how to create an accordion using HTML, CSS, and a little bit of JavaScript.
Viewed -
10 minWorkshop
Animated Hamburger Menu
Want to set up a hamburger menu for your mobile navigation with a slick animation? It's not as hard as you may think. Follow along while I tackle this small UX feature!
Viewed -
9 minWorkshop
JavaScript Search
Letting users search through data in your application or website is a great UX feature. Building out this type of functionality isn't as hard as you may think. With some basic JavaScript, we can tackle the filtering and searching of data. Follow along as I add a search feature with vanilla JavaScript that allows the user to search for a specific author in a list of authors!
Viewed -
2 minWorkshop
Shorten Text With CSS
Ever wondered how to shorten text with an ellipsis (...)? Itβs quite easy to do and only requires a few lines of CSS. Follow along as I take you through setting this up!
Viewed -
3 minWorkshop
HTML-Only Accordion
Accordions are all over the web and mobile apps. They are a great way to show and hide content based on user interaction and arenβt very hard to build. However, they usually require a bit of HTML, CSS, and JavaScript. Did you know you can build a simple accordion with only HTML in seconds? Follow along as I explain how to set this up!
Viewed -
4 minWorkshop
CSS-Only Toggle
Toggle switches are a useful way to show a UIβs state. Itβs commonly believed that these are hard to create and require JavaScript. Thatβs simply not the case. Follow along as I walk you through how to create a toggle switch with just CSS!
Viewed -
4 minWorkshop
Dark Mode in CSS
How often do you find yourself on a website or app looking for a toggle for dark mode? Most apps nowadays, like Facebook, Twitter, Instagram, & Snapchat just to name a few, use some sort of dark mode feature. Implementing this is actually pretty quick and simple. There are many ways to go about this but the method I prefer is using CSS variables. Follow along and Iβll show you how I tackle this feature.
Viewed -
10 minWorkshop
JavaScript Tip Calculator Overview
In this quick overview geared for advanced beginners, youβll learn my thought process behind building a tip calculator with vanilla JavaScript. By the end of this video, you should have a decent understanding of what it takes to build this out and try it for yourself. Though this isnβt meant to be a step-by-step guide, you should be able to tackle this project on your own with a solid understanding of JavaScript basics as well as HTML and CSS. If any of the topics discussed are confusing to you, I suggest taking a look at the courses in the Teacher's Notes.
Viewed -
14 hoursConference
Treehouse Festival June 2021
Treehouse Festival is an online conference designed for Treehouse students and all aspiring developers and designers. The presentations will empower those that attend with skills and a network to transition to a tech career or level-up in their current roles. Sessions include βDesigning with a Developer Mindset,β βComputer Science, Emulation, and the NES,β βInterview with a Treehouse Gradβ, and more!
Viewed -
6 minPractice
Practice the CSS Box Model
In this practice session, weβll be working with the CSS Box Model.
Viewed -
10 minPractice
Practice Enhancing Design with CSS
In this practice session, weβll be practicing enhancing a web layout with CSS.
Viewed -
8 minPractice
Practice CSS Media Queries
In this practice session, weβll be working with CSS Media Queries.
Viewed -
8 minPractice
Practice CSS Length Units
In this practice session, weβll be working with CSS Length Units.
Viewed -
3 hoursBonus Series
Treehouse Live
Enjoy our full collection of Treehouse Live sessions with our amazing Treehouse Instructors! Follow along as they teach live and take questions from students like you.
Viewed -
33 minWorkshop
Hello Front-End Web Development (FEWD)
Front-end web developers write the code that turns a static mockup into an interactive web page. In this workshop, weβll take a look at the types of code front-end developers write, and even try it out ourselves. But before we do that, letβs take a closer look at the term front-end. Front-end developers are sometimes referred to as client-side developers, since everything we code is directly viewable by the clientβin other words, the visitor to our website or app.
Viewed -
12 hoursConference
Treehouse Festival December 2020
Treehouse Festival is an online conference designed for Treehouse students and all aspiring developers and designers. The presentations will empower those that attend with skills and a network to transition to a tech career or level-up in their current roles. Sessions include βDesigning with a Developer Mindset,β βComputer Science, Emulation, and the NES,β βInterview with a Treehouse Gradβ, and more!
Viewed -
- 1
Mobile-First CSS Layout
In this course, you'll get hands-on practice using CSS layout techniques such as a CSS Reset with Normalize, a layout wrapper, a sticky footer, and centered content with a full-width header. In addition, you'll learn principles that will help you approach your next project with a mobile-first mindset.
-
- 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.
-
- 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.
-
- 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.
-
5 minWorkshop
Process Sass with Scout-App
Learn one of the quickest and easiest ways to set up and use Sass in your front-end web development projects, with Scout-App.
Viewed -
- 1
- 2
- 3
CSS Selectors Quickstart
An introduction to CSS selectors for JavaScript programmers. This course covers what you need to know about CSS selectors to complete common DOM programming tasks.
-
37 minWorkshop
Using CSS Variables
Learn how to use native CSS variables to make your stylesheets less repetitive, easier to maintain and more.
Viewed -
- 1
- 2
- 3
- 4
Bootstrap Basics
Learn to build with Bootstrap, one of the most popular open source front end frameworks, to help you build a functional design and layout in little time.
-
5 minPractice
Practice CSS Grid: Columns, Rows and Gaps
Practice declaring row and column tracks, as well as applying gutters between them.
Viewed -
6 minPractice
Practice Flexible CSS Grid Layout
Practice using CSS Grid features that adapt your content to available space and intelligently size and position items within the grid container.
Viewed -
8 minPractice
Practice Grid Template Areas
Let's practice using grid template areas, a feature of CSS Grid that lets you assign named grid areas to items, and use those names to position items on the grid.
Viewed -
- 1
- 2
- 3
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser. It brings a new set of properties, functions and flexible units that let you control the exact placement and sizing of grid components.
-
- 1
- 2
- 3
Introduction to Selenium
As web applications grow in size it becomes difficult to reliably and thoroughly verify that the application behaves as intended. Manually stepping through the system gets tedious and time consuming. That's where automated testing tools become invaluable. In this course we will learn to use Selenium WebDriver, one of the most popular utilities for automating interactions with web browsers, to build automated tests for the purpose of verifying and maintaining a quality application.
-
- 1
- 2
Prototyping in the Browser
Before you design a website, it's important to have some kind of a plan or a wireframe to guide your efforts. But sometimes when you go from a simple sketch to digital pixels, the results aren't exactly what you expect. When you work with real HTML and CSS, and you're able to see your site on a real screens, you're able to see a more accurate representation of the final result. In this course, we're going to build a website prototype using the Bootstrap web framework.
-
35 minWorkshop
Debugging CSS with Chrome DevTools
In this workshop, we'll explore the most useful and efficient tool for debugging CSS: Chrome Developer Tools.
Viewed -
- 1
- 2
- 3
- 4
Sass Basics
Sass is a stylesheet language that extends CSS with features like variables, nested rules, mixins, and functions, in a CSS-compatible syntax. In this course, you'll learn to use the powers of Sass to boost your front end workflow. The examples will teach you why you should use Sass in your projects. By the end, you will be writing more efficient CSS using code that is easy to read and maintain.
-
7 minPractice
Practice CSS Box Model Basics
Practice working with the core components of the CSS box model.
Viewed -
6 minPractice
Practice CSS Floats
Practice laying out a web page and wrapping text around elements, with CSS floats.
Viewed -
5 hoursBonus Series
The Treehouse Show
The Treehouse Show is our weekly conversation with the Treehouse Community.
Viewed -
5 minPractice
Practice Media Queries
Practice writing CSS media queries by adjusting the layout of a simple web page.
Viewed -
5 minPractice
Practice CSS Selectors
Practice basic CSS selectors by targeting and styling elements of a web page.
Viewed -
49 minWorkshop
Introduction to PostCSS
Learn PostCSS, a popular CSS processing tool for styling your websites and applications.
Viewed -
- 1
- 2
- 3
- 4
CSS Transitions and Transforms
CSS transitions and transforms can create simple animations that enhance user interactions in websites and apps. In this course, you'll build an interactive image gallery using CSS transitions and transforms. You'll use transition properties to define durations, delays, and easing functions. Then, you'll learn how to rotate, scale, and move elements in 2D and 3D space, with CSS transforms.
-
- 1
- 2
- 3
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content. With flexbox you can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. You can even stretch and shrink elements and distribute space, all with just a few lines of CSS!
-
- 1
- 2
- 3
- 4
- 5
Adobe Illustrator for Web Design
Using a project-based learning approach to Illustratorβs core features, walk through the process of designing a simple website beginning with making a wireframe, and then using that wireframe as the basis for creating a page mock up for mobile and desktop platforms. Along the way, use the basic drawing and shape tools to create an illustrated graphic logo. And with responsive web design in mind, weβll utilize the benefits of both scalable vector graphics (SVGs) and CSS export capabilities.
-
21 minWorkshop
The CSS calc() Function
The CSS calc() function performs a calculation and returns a result. calc() allows mathematical expressions that add β+β, subtract β-β, multiply β*β, and divide values β/β. In this workshop, you'll learn three useful ways to use calc() in your projects.
Viewed -
22 minWorkshop
Build a Responsive Navigation with Flexbox
Learn how to build a responsive website navigation, using CSS media queries and flexbox layout.
Viewed -
- 1
- 2
Animating SVG with CSS
SVG (Scalable Vector Graphics) also supports interactivity and animation, so you can animate and interact with SVG like you're able to do with HTML. This short course covers the most common methods for animating SVG: CSS transitions, transforms, and keyframe animations.
-
14 minWorkshop
Create Tooltips with CSS
Tooltips are a great way to provide additional information to your users. This pure CSS technique that we are about to learn employs both pseudo-elements and custom data- attributes.
Viewed -
16 minWorkshop
Create a Fullscreen Slider with CSS
Learn to create a full-screen, horizontal slider using pure CSS. Image carousels have been a popular design pattern for many years and there are hundreds of jQuery plugins out there to create them. This workshop will demonstrate that HTML and CSS are more than capable of handling the task.
Viewed -
8 minWorkshop
Create an Accordion Menu with CSS
Learn to create a content accordion menu with CSS. Content accordions are great for when space is limited and you have a lot of content that you want to present in a cleaner fashion.
Viewed -
8 minWorkshop
Create a Modal Window with CSS
Learn how to create a popular UI design pattern, the modal window, with CSS. Although usually built with JavaScript, CSS can provide fallbacks and replacements for many of the JavaScript interactions.
Viewed -
12 minWorkshop
CSS Clipping Paths
In this workshop, you will learn about an advanced CSS feature called clipping paths.
Viewed -
- 1
How the Web Works
In order to surf the world wide web, you need an application called a web browser. You're probably familiar with this, you might even be learning HTML, CSS, and JavaScript to program for the web, but have you ever looked into how it works? In this course, we'll dissect each aspect of how the web works. You'll learn about URLs, domain names, IP addresses, the domain name system, and the HTTP protocol, to be fully prepared for web development or just a more knowledgeable web user.
-
8 minWorkshop
CSS Masks
In this workshop, we're going to cover an exciting CSS design effect: Masks.
Viewed -
14 minWorkshop
CSS Blend Modes
In this workshop, Guil covers how to use blend modes, an exciting CSS feature that resembles a tool you'd normally find in your favorite graphics editor.
Viewed -
- 1
- 2
- 3
CSS to Sass
If you're not sure where to begin when converting CSS over to Sass, this is the place to start. In this course, you'll learn how to convert a simple web project over to Sass (http://sass-lang.com/), the most widely used CSS preprocessor. This course aims to clear up common misconceptions about Sass, and help you fit Sass into your front-end workflow.
-
- 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
- 2
- 3
- 4
Introduction to Front End Performance Optimization
People want to use websites that load quickly, and every second counts. If a website takes more than 3 seconds to load, you can lose 40% of your audience. Every additional second in page response can result in a 7% reduction in conversions. In these lessons, we're going to take a slow website and make it load faster using front end performance optimization. By the end, you'll know many practical techniques that can speed up any website.
-
- 1
- 2
- 3
CSS Selectors
In this short course, we're going to go beyond the basic selector concepts covered in CSS Basics. Besides the common ways to select elements with type, ID and class selectors, we're able to target elements based on their attributes, position in the HTML document, even their relation to other elements. By the end of this course, you'll have gained a better understanding of the power and flexibility behind CSS selectors. You'll have a new set of valuable tools in your CSS toolkit to use on your next project.
-
- 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.
-
- 1
- 2
- 3
- 4
- 5
Modular CSS with Sass
Todayβs websites and applications are larger than ever and a lot hinges on the CSS architecture. CSS that is poorly thought-out can be a strain on development and maintenance in the long run. In this course, we're going to build a UI toolkit using many of the best practices and principles of modular CSS architecture. We'll learn how a modular approach with Sass can boost our workflow and cut down maintenance by reducing the amount of code we write. It can also improve how our code scales because we're able to reuse it on other parts of our project.
-
- 1
Treehouse Club: JavaScript
In the Car Sounds project, you learn how to edit pre-written HTML, CSS, and JavaScript code to add functionality to a web page. Some features you will use are buttons, audio tags, and JavaScript events.
-
- 1
Treehouse Club: CSS
In this project, you will learn how to edit pre-written code to style a web page for desktops, tablets, and mobile devices. Youβll begin by seeing how to connect a CSS stylesheet to an HTML document. Next youβll edit some CSS and be exposed to basic CSS structure. Finally, you'll use new tags to make text colorful, choose fonts, upload pictures, and more.
-
73 minWorkshop
Creating Wireframe and Photoshop Mockups
In this live Workshop, Nick creates a mockup for the website of a fictional to-do list app. He starts out with wireframes using Balsamiq, then moves on to Photoshop and creates a high fidelity mockup. Finally, Nick shows how to prototype the mockup in HTML and CSS.
Viewed -
50 minWorkshop
Creating a CSS Marquee
In this live Workshop, Nick tinkers around with CodePen and creates a movie theater marquee in HTML and CSS. He also takes questions from our YouTube audience!
Viewed -
33 minWorkshop
CSS Best Practices
Thereβs more to writing good CSS than simply knowing all the latest and greatest features and techniques. In this workshop, we'll cover best practices for making our CSS more efficient, maintainable, and scalable.
Viewed -
2 hoursBonus Series
Code Racer
Learn how we built Code Racer, which is a real-time multiplayer game where people learn how to create a basic HTML web page while competing with others.
Viewed -
75 minBonus Series
CSS3 Master Class
Learn how to build a real-world site using everything from Border Radius, Border Image, Box Shadow, Linear and Radial Gradients and more.
Viewed -
60 minBonus Series
Media Queries
In this Master Class Series, we'll prepare our project and write all the media queries and CSS we need to make our layout respond. Then we will test our layout across a few browsers.
Viewed -
6 hoursBonus Series
Design and Development
Learn how a designer and developer can effectively collaborate to build a web app.
Viewed -
78 minBonus Series
Fluid Grids
Learn how to create fluid grid layouts using percentage based widths. We'll go over everything you need to know to extract fluid grid calculations from high fidelity mockups.
Viewed -
3 hoursBonus Series
Treehouse Quick Tips
Treehouse Quick Tips are fast and easy lessons that you can start applying now. Learn to create stunning designs in Photoshop, beautiful websites, and useful mobile apps for Android and iOS.
Viewed -
16 minBonus Series
Web Design Q&A with Nick
In this series, Nick Pettit answers your questions about web design, web development, and anything else you're interested in knowing.
Viewed -
30 hoursBonus Series
The Treehouse Show (2012 - 2015)
The Treehouse Show is your weekly dose of web design and web development news, hosted by Nick Pettit and Jason Seifer.
Viewed -
105 minBonus Series
Exercise Your Creative
How do you practice creativity? In the Exercise Your Creative series, Mat gives us some insight by taking us through his creative process.
Viewed -
10 hoursBonus Series
Treehouse Friends
Treehouse Friends is a series of interviews with interesting people in the web design and dev fields and other industry experts.
Viewed
Whoops! Perhaps you can try a broader search.