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?Newest
These are the most recently uploaded adventures. Ahhh, nice and fresh.
Message Reactions Component
advanced
Message Reactions Component
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
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
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
Product Details Modal
advanced
Product Details Modal
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
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
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
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
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
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
AI Short Story Generator
intermediate
AI Short Story Generator
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
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
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
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
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
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
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
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
Message Pins Component
advanced
Message Pins Component
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 Reactions Component
advanced
Message Reactions Component
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
Multi-Step Form
beginner
Multi-Step Form
A multi-step form that requires user input across three stages.
- HTML
- CSS
- JavaScript
Product Details Modal
advanced
Product Details Modal
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
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
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
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
Create a simple landing page for a yoga studio using HTML and CSS.
- HTML
- CSS