CSS

• 60 min
  Bonus 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
  • Courses Plus
  • CSS
• 8 min
  Workshop

  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
  • JavaScript
  • Beginner
• 35 min
  Workshop

  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
  • JavaScript
  • Beginner
• 10 min
  Workshop

  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
  • CSS
  • Beginner
• 38 min
  Workshop

  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
  • JavaScript
  • Beginner
• 2 min
  Workshop

  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
  • CSS
  • Beginner
• 35 min
  Workshop

  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
  • JavaScript
  • Beginner
• 33 min
  Workshop

  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
  • JavaScript
  • Beginner
• 44 hours
  Bonus 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
  • JavaScript
• 78 min
  Bonus 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
  • Courses Plus
  • HTML
• 4 min
  Workshop

  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
  • CSS
  • Beginner
• 37 min
  Workshop

  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
  • CSS
  • Beginner
• 75 min
  Bonus 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
  • Courses Plus
  • HTML
• 4 min
  Workshop

  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
  • CSS
  • Beginner
• 41 min
  Workshop

  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
  • AI
  • Intermediate
• 42 min
  Workshop

  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
  • AI
  • Intermediate
• 15 min
  Workshop

  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
  • AI
  • Beginner
• 15 min
  Workshop

  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
  • AI
  • Beginner
• 8 min
  Practice

  Practice CSS Media Queries

  In this practice session, we’ll be working with CSS Media Queries.

  Viewed
  • CSS
  • Beginner
• 37 min
  Workshop

  Using CSS Variables

  Learn how to use native CSS variables to make your stylesheets less repetitive, easier to maintain and more.

  Viewed
  • CSS
  • Advanced
• 22 min
  Workshop

  Build a Responsive Navigation with Flexbox

  Learn how to build a responsive website navigation, using CSS media queries and flexbox layout.

  Viewed
  • CSS
  • Intermediate
• 8 min
  Workshop

  CSS Masks

  In this workshop, we're going to cover an exciting CSS design effect: Masks.

  Viewed
  • CSS
  • Intermediate
• 12 min
  Workshop

  CSS Clipping Paths

  In this workshop, you will learn about an advanced CSS feature called clipping paths.

  Viewed
  • CSS
  • Beginner
• 35 min
  Workshop

  Debugging CSS with Chrome DevTools

  In this workshop, we'll explore the most useful and efficient tool for debugging CSS: Chrome Developer Tools.

  Viewed
  • CSS
  • Beginner
• 49 min
  Workshop

  Introduction to PostCSS

  Learn PostCSS, a popular CSS processing tool for styling your websites and applications.

  Viewed
  • CSS
  • Intermediate
• 5 min
  Practice

  Practice Media Queries

  Practice writing CSS media queries by adjusting the layout of a simple web page.

  Viewed
  • CSS
  • Beginner
• 7 min
  Practice

  Practice CSS Box Model Basics

  Practice working with the core components of the CSS box model.

  Viewed
  • CSS
  • Beginner
• 8 min
  Workshop

  Dark Mode with React & Tailwind

  In this workshop, Dustin walks you through how to set up a sleek and functional dark mode toggle using React & Tailwind. You’ll learn how to configure Tailwind for dark mode support, manage theme state with React, and create a toggle switch that makes switching themes feel seamless. This workshop is perfect for developers who already have the basics of React and Tailwind down and are ready to level up their UI!

  Viewed
  • React
  • Intermediate
• 5 min
  Practice

  Practice CSS Grid: Columns, Rows and Gaps

  Practice declaring row and column tracks, as well as applying gutters between them.

  Viewed
  • CSS
  • Intermediate
• 6 min
  Practice

  Practice CSS Floats

  Practice laying out a web page and wrapping text around elements, with CSS floats.

  Viewed
  • CSS
  • Beginner
• 5 min
  Practice

  Practice CSS Selectors

  Practice basic CSS selectors by targeting and styling elements of a web page.

  Viewed
  • CSS
  • Beginner
• 50 min
  Workshop

  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
  • CSS
  • Beginner
• 8 min
  Workshop

  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
  • CSS
  • Intermediate
• 8 min
  Practice

  Practice CSS Length Units

  In this practice session, we’ll be working with CSS Length Units.

  Viewed
  • CSS
  • Beginner
• 10 min
  Practice

  Practice Enhancing Design with CSS

  In this practice session, we’ll be practicing enhancing a web layout with CSS.

  Viewed
  • CSS
  • Beginner
• • 1
  • 2
  • 3

  2 hours
  Course

  Introduction to HTML and CSS

  | 3332 students

  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.

  • HTML
  • Beginner
• 6 min
  Practice

  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
  • CSS
  • Intermediate
• 5 min
  Workshop

  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
  • CSS
  • Beginner
• 8 min
  Practice

  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
  • CSS
  • Beginner
• 14 min
  Workshop

  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
  • CSS
  • Intermediate
• 14 min
  Workshop

  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
  • CSS
  • Intermediate
• 16 min
  Workshop

  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
  • CSS
  • Intermediate
• 8 min
  Workshop

  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
  • CSS
  • Intermediate
• 21 min
  Workshop

  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
  • CSS
  • Intermediate
• 33 min
  Workshop

  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
  • CSS
  • Intermediate
• 6 min
  Practice

  Practice the CSS Box Model

  In this practice session, we’ll be working with the CSS Box Model.

  Viewed
  • CSS
  • Beginner
• • 1
  • 2
  • 3

  47 min
  Course

  Responsive Layouts

  | 46883 students

  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.

  • CSS
  • Advanced
• 6 hours
  Bonus Series

  Design and Development

  Learn how a designer and developer can effectively collaborate to build a web app.

  Viewed
  • Courses Plus
  • CSS
• • 1
  • 2
  • 3
  • 4

  2 hours
  Course

  Bootstrap Basics

  | 19938 students

  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.

  • CSS
  • Beginner
• • 1

  38 min
  Course

  Mobile-First CSS Layout

  | 5874 students

  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.

  • CSS
  • Beginner
• • 1
  • 2
  • 3

  105 min
  Course

  CSS Flexbox Layout

  | 44002 students

  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!

  • CSS
  • Intermediate
• • 1
  • 2
  • 3
  • 4

  2 hours
  Course

  CSS Layout

  | 11160 students

  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.

  • CSS
  • Beginner
• • 1
  • 2
  • 3
  • 4

  2 hours
  Course

  Enhancing Design with CSS

  | 7585 students

  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.

  • CSS
  • Beginner
• • 1
  • 2

  85 min
  Course

  Animating SVG with CSS

  | 14211 students

  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.

  • CSS
  • Intermediate
• • 1
  • 2
  • 3

  111 min
  Course

  CSS Grid Layout

  | 12277 students

  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.

  • CSS
  • Intermediate
• 53 min
  Workshop

  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
  • CSS
  • Beginner
• • 1
  • 2
  • 3
  • 4

  3 hours
  Course

  CSS Transitions and Transforms

  | 16102 students

  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.

  • CSS
  • Beginner
• • 1
  • 2
  • 3

  117 min
  Course

  CSS to Sass

  | 13692 students

  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.

  • CSS
  • Intermediate
• • 1
  • 2
  • 3
  • 4

  3 hours
  Course

  CSS Basics

  | 14259 students

  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.

  • CSS
  • Beginner
• • 1
  • 2
  • 3

  2 hours
  Course

  CSS Selectors

  | 46627 students

  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.

  • CSS
  • Beginner
• • 1
  • 2
  • 3
  • 4

  4 hours
  Course

  Sass Basics

  | 12301 students

  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.

  • CSS
  • Beginner
• • 1

  56 min
  Course

  Treehouse Club: CSS

  | 31949 students

  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.

  • CSS
  • Novice
• 14 hours
  Conference

  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
  • HTML
• • 1
  • 2
  • 3
  • 4
  • 5

  3 hours
  Course

  Modular CSS with Sass

  | 9193 students

  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.

  • CSS
  • Intermediate
• 10 hours
  Bonus 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
  • Courses Plus
  • CSS
• 12 hours
  Conference

  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
  • HTML
• 5 hours
  Bonus Series

  The Treehouse Show

  The Treehouse Show is our weekly conversation with the Treehouse Community.

  Viewed
  • HTML
• 3 hours
  Bonus 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
  • HTML
• 30 hours
  Bonus 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
  • HTML

Whoops! Perhaps you can try a broader search.

Reset all filters