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.

Message Reactions Component

advanced

Message Reactions Component
Desktop icon

Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!

  • HTML
  • CSS
  • JavaScript

Message Pins Component

advanced

Message Pins Component
Mobile icon

Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!

  • HTML
  • CSS
  • JavaScript

Data Sorting Component

intermediate

Data Sorting Component
Mobile icon Tablet icon

Giving the end-user multiple ways to sort/view their data is a great UX feature. This can be relatively easily by thinking ahead and writing some good CSS. Of course, minimal JavaScript as well. Create a component that will allow users to see the exact same data in a minimum of 2 ways. As per the mockups; card view and list view. Use vanilla JavaScript or any framework you'd like to tackle this Code Adventure!

  • HTML
  • CSS
  • JavaScript

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

    Data Sorting Component

    intermediate

    Data Sorting Component
    Mobile icon Tablet icon

    Giving the end-user multiple ways to sort/view their data is a great UX feature. This can be relatively easily by thinking ahead and writing some good CSS. Of course, minimal JavaScript as well. Create a component that will allow users to see the exact same data in a minimum of 2 ways. As per the mockups; card view and list view. Use vanilla JavaScript or any framework you'd like to tackle this Code Adventure!

    • HTML
    • CSS
    • JavaScript

    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