Hey! You're here! Welcome to Code Adventures.

Come build awesome projects with a bit of healthy competition. Explore this page — we'll see you on an adventure.

Welcome to Treehouse Code Adventures

Looking to learn something new?

Only developers with active Treehouse accounts may embark on these Code Adventures. Great news, though — we offer a free, 7-day trial. Get started with Code Adventures and gain access to thousands of hours of videos, quizzes, and more with the Treehouse platform today.

What else does Treehouse offer?
illustration of a person with a safari hat and torch illustration of a person with a safari hat and torch

Newest

These are the most recently uploaded adventures. Ahhh, nice and fresh.

Product Details Modal

advanced

Product Details Modal
Desktop icon

Create a product details modal for a fictitious smartwatch company of the future. By effectively presenting the product, answering customer questions, and addressing potential concerns brought up in reviews, the product details page plays a direct role in converting visitors into buyers.

  • HTML
  • CSS
  • JavaScript

Yoga Studio Landing Page

beginner

Yoga Studio Landing Page
Mobile icon Desktop icon

Create a simple landing page for a yoga studio using HTML and CSS.

  • HTML
  • CSS

UI with a Dark Mode

intermediate

UI with a Dark Mode
Desktop icon

A UI with a Dark and Light Modes is an HTML and CSS-heavy code adventure with a very small amount of JavaScript to toggle the light and dark modes respectively.

  • HTML
  • CSS
  • JavaScript

Settings Panel

beginner

Settings Panel
Desktop icon

A settings panel that allows users to manage various account preferences including synchronization, online visibility, privacy controls, and the option to delete their account.

  • HTML
  • CSS
  • JavaScript

Multi-Step Form

beginner

Multi-Step Form
Mobile icon

A multi-step form that requires user input across three stages.

  • HTML
  • CSS
  • JavaScript

JavaScript Calculator with a Dark Mode

beginner

JavaScript Calculator with a Dark Mode
Desktop icon

A digital calculator with two distinct themes: a dark mode and a light mode. Implement this design using HTML, CSS, and JavaScript.

  • HTML
  • CSS
  • JavaScript

Hamburger Menu

beginner

Hamburger Menu
Mobile icon

Create a hamburger menu that can be used in the mobile view to navigate between pages on the site.

  • HTML
  • CSS
  • JavaScript

Digital Calculator Neumorphism

beginner

Digital Calculator Neumorphism
Mobile icon

A digital calculator styled in the neumorphism design trend. Implement this design using HTML, CSS, and JavaScript.

  • HTML
  • CSS
  • JavaScript

Animal Crossing API

intermediate

Animal Crossing API
Mobile icon Tablet icon Desktop icon

Create a web application that uses the Nookipedia Animal Crossing API to display information about the game's villagers.

  • HTML
  • CSS
  • JavaScript
  • API

Sort by:

  • Topic Chevron
  • Difficulty Chevron
  • Author Chevron
  • AI Short Story Generator

    intermediate

    AI Short Story Generator
    Desktop icon

    Create an interactive platform that uses artificial intelligence to dynamically generate captivating stories and accompanying images, offering users a unique narrative experience each time.

    • HTML
    • CSS
    • JavaScript
    • AI

    An Interactive Video Transcript

    intermediate

    An Interactive Video Transcript
    Desktop icon

    An interactive video transcript designed to enhance the viewer's experience by allowing them to interact with the content. Utilize HTML, CSS, and JavaScript to create a seamless interface that will integrate the transcript with the video playback.

    • HTML
    • CSS
    • JavaScript

    Animal Crossing API

    intermediate

    Animal Crossing API
    Mobile icon Tablet icon Desktop icon

    Create a web application that uses the Nookipedia Animal Crossing API to display information about the game's villagers.

    • HTML
    • CSS
    • JavaScript
    • API

    Digital Business Card

    beginner

    Digital Business Card
    Mobile icon Desktop icon

    Use HTML, CSS, and JavaScript to create a dynamic, responsive, and visually appealing digital business card.

    • HTML
    • CSS
    • JavaScript

    Digital Calculator Neumorphism

    beginner

    Digital Calculator Neumorphism
    Mobile icon

    A digital calculator styled in the neumorphism design trend. Implement this design using HTML, CSS, and JavaScript.

    • HTML
    • CSS
    • JavaScript

    Hamburger Menu

    beginner

    Hamburger Menu
    Mobile icon

    Create a hamburger menu that can be used in the mobile view to navigate between pages on the site.

    • HTML
    • CSS
    • JavaScript

    JavaScript Calculator with a Dark Mode

    beginner

    JavaScript Calculator with a Dark Mode
    Desktop icon

    A digital calculator with two distinct themes: a dark mode and a light mode. Implement this design using HTML, CSS, and JavaScript.

    • HTML
    • CSS
    • JavaScript

    Multi-Step Form

    beginner

    Multi-Step Form
    Mobile icon

    A multi-step form that requires user input across three stages.

    • HTML
    • CSS
    • JavaScript

    Product Details Modal

    advanced

    Product Details Modal
    Desktop icon

    Create a product details modal for a fictitious smartwatch company of the future. By effectively presenting the product, answering customer questions, and addressing potential concerns brought up in reviews, the product details page plays a direct role in converting visitors into buyers.

    • HTML
    • CSS
    • JavaScript

    SVG Animations

    beginner

    SVG Animations
    Desktop icon

    Use SVGs to spruce up and add a bit of character to a website. Some basic HTML and CSS are required. You'll need to use the SVG files provided to match the mockup as closely as possible.

    • HTML
    • CSS

    Settings Panel

    beginner

    Settings Panel
    Desktop icon

    A settings panel that allows users to manage various account preferences including synchronization, online visibility, privacy controls, and the option to delete their account.

    • HTML
    • CSS
    • JavaScript

    UI with a Dark Mode

    intermediate

    UI with a Dark Mode
    Desktop icon

    A UI with a Dark and Light Modes is an HTML and CSS-heavy code adventure with a very small amount of JavaScript to toggle the light and dark modes respectively.

    • HTML
    • CSS
    • JavaScript

    Yoga Studio Landing Page

    beginner

    Yoga Studio Landing Page
    Mobile icon Desktop icon

    Create a simple landing page for a yoga studio using HTML and CSS.

    • HTML
    • CSS