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
- All Topics
- • AI
- • 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)
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.
Create a Portfolio Using HTML and CSS
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.
Pagination with GitHub Copilot
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
How to Build a Google Chrome Extension: Strong Password Generator
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
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
Build an Interactive Settings Panel - Treehouse Live
Create a Chat App UI - Treehouse Live
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
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
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
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
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
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.
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
Practice Structuring and Grouping Content
Practice the fundamentals of structuring and grouping content with markup.Viewed
Practice File Paths
Sharpen your HTML skills by practicing writing file paths for images and links.Viewed
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
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.
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.
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.
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.
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.
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.
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.
Whoops! Perhaps you can try a broader search.