Project Level 1 (Beginner)

Projects

Poem
Learn how to format a poem in any style using HTML. When you’re finished, you’ll have a one-of-a-kind page that can be shared with family and friends.

Meme MakerDesign your own meme with a custom image and text. Along the way, learn how HTML and CSS are used together.

Character Card
Create a simple Character Card that shows the character name with an image. Students will also add character attributes like “likes” and “dislikes”. After students complete the project, it can be customized in Sandbox.

Simple Infographic
Create a simple infographic using HTML and CSS to present your research and findings or reflections on any topic. This project can easily be adapted to share information on any subject with three subsections.

Digital Diary
Build a digital diary using HTML and CSS to practice expressing yourself. You can make a diary about your own experiences or choose a character from fiction or history.

Timeline
Make a horizontal timeline of events using HTML and CSS. This project is designed to be viewed on a mobile device and can be customized to include more events.

Project Level 2 (Intermediate)

Projects

Interactive Story
Build an interactive story using a combination of logic, JavaScript conditionals, and creativity to make an organized story tree. Make a short story in the Guided Project or add more scenes in the sandbox to expand the story.

Blog
Make your own blog with images and descriptions using HTML and CSS. You can create custom themes and blog about your favorite interests and adventures.

Review App
Create a book review app using HTML and CSS to write an introduction to introduce your app, along with 2 reviews of any book of your choosing.

Quiz Maker
Build a multiple choice trivia game that can be used across a variety of topics using HTML and JavaScript! You can easily add more questions to the trivia game after completing the project.

Pie Chart
By using HTML and JavaScript, make your own pie chart. In this project, you will learn how to use a JavaScript array to visualize data. Once you learn how to add the data, you can customize the pie chart with new sections.

Retro TV
Learn how to design a retro-style television with animated GIFs using HTML, CSS and JavaScript. Customize the project with your own GIFs and add multiple channels.

Mad Libs
Build a digital Mad Libs style story using HTML and JavaScript. Practice using a wide range of vocabulary elements in a fun way that allows for creative storytelling.

Digital Pocket Guide
Learn how to make a digital field guide of rocks using HTML, CSS and JavaScript. Customize the projects by adding your own images, descriptions and titles.

Project Level 3 (Advanced)

Projects

Card Sorting Filter
Create a card sorting filter that displays cards in different categories. Learn how to use lists in HTML and how to style the lists in CSS.

Carrot Picker
Learn how to build a “whack-a-mole” style game using HTML, CSS and JavaScript. Learn to set up a scoring system and how to customize the characters.

Coin CollectorLearn to make a coin collector game using Phaser, a JavaScript framework for designing games. Customize the game with your own player, background and items to collect.

Digital Assistant
Learn advanced skills in JavaScript like making arrays and how to combine strings and variables through concatenation to make a personalized digital assistant.