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)
HTML
HyperText Markup Language (HTML) forms the structural layer of web pages. No matter what kind of website or application you want to build, this is a language you need to understand.
-
Course
- 1
Treehouse Club: HTML
If you’ve never written a line of code before, this is the place to start! In this project, you’ll learn how to edit pre-written HTML code. By the end of this course, you’ll be more comfortable with using Treehouse’s programming tool Workspaces and have a basic understanding of HTML structure.
-
Course
- 1
- 2
Accessibility For Web Developers
Accessibility is a process that specifically considers the needs of people with disabilities. In this course, you’ll learn about the standards in place to guide developers in creating experiences that are accessible to all users as well as tools and techniques to ensure your projects are up to those standards.
-
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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 -
1 minWorkshop
How to Add a Favicon
Favicons give your website a face and are easy to implement in your code. In this quick guide, we’ll go over what a favicon is and how to add one to your site.
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 -
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.
-
11 minWorkshop
HTML Dialog
Dialog boxes are a common design pattern across many websites, so the W3C created the
<dialog>element as part of the HTML standard. In this Workshop, we'll learn how to use the<dialog>element in combination with JavaScript to trigger modal and non-modal windows.Viewed -
Course
- 1
- 2
- 3
HTML Forms
The web is a two-way communication medium. There are lots of HTML elements for displaying data and producing output, and conversely, there are also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.
-
Course
- 1
- 2
HTML Tables
The web is filled with text and images, but it's also filled with information like sports scores throughout the years, lists of employee names and email addresses, or nutrition facts for your favorite foods. HTML tables enable the display information in what is commonly known as tabular data, which is information that's stored in a table-like structure of columns and rows. In general, anything that you might put into a spreadsheet could go in a table. There are many use cases for a table, so it's important to add them to your skills because it's a very common method for displaying information.
-
Course
- 1
- 2
HTML Video and Audio
Text and images have always been the foundation of web content, but more than ever, video and audio are also a part of that content mix. Fortunately, we can now create standards-based video and audio players that don't require the use of plugins. Adding video and audio to a webpage is almost as easy as adding an image or formatting some text.
-
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 -
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.
-
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 -
11 minPractice
Practice File Paths
Sharpen your HTML skills by practicing writing file paths for images and links.
Viewed -
6 minPractice
Practice Semantic HTML
In this workshop, you'll practice the basics of semantic HTML. When you write markup that clearly communicates the meaning of your content, it is said that you're writing semantic markup.
Viewed -
10 minPractice
Practice Structuring and Grouping Content
Practice the fundamentals of structuring and grouping content with markup.
Viewed -
19 minWorkshop
String Manipulation with JavaScript
Learn and practice string manipulation methods that will allow you more control over data in your JavaScript programs.
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 -
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.
-
31 minWorkshop
SVG Workflow and Tools
Learn useful tools and techniques for optimizing, organizing, and structuring your SVG files. Then learn to size and scale your SVG with inline attributes.
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.
-
39 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 -
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 -
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 -
4 hoursBonus Series
HTML5 Mobile Web Applications
Learn how to build a mobile HTML5 web app that will work across multiple devices, from start to finish using canvas, localStorage and video.
Viewed -
5 hoursBonus Series
The Treehouse Show
The Treehouse Show is our weekly conversation with the Treehouse Community.
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 -
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 -
12 hoursConference
Treehouse Festival July 2020
Treehouse Festival 2020
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 -
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
Whoops! Perhaps you can try a broader search.