Use your knowledge of Bootstrap, documentation reading skills, and creative lens to create a website!

Adhoc

Using a variety of JSX concepts, build an interactive interface that will display a selection of animal images and allow users to click an image for a fun fact.

Animal Fun Facts

In this project, we're going to practice animation in Sass so you can hone your skills and feel confident taking them to the real world.
Why? No modern website is complete without a little bit of animation.

Animated Company Logo

In this project, we're going to practice merging to master in Git so you can hone your skills and feel confident taking them to the real world.
Why? Learning how to merge your branch to master will allow you safely include your code with the main codebase.

Birthday Party

Create a perceptual art in honor of the Black Lives Matter movement.

Black Lives Matter

In this project, we're going to practice element positioning in CSS so you can hone your skills and feel confident taking them to the real world.
Why? Applying the display and position properties on a certain element is something you'll be doing plenty of with CSS, so exploring and practicing it now will help you a lot.

Broadway

Test and fix Cake Bar's new pick up feature

Cake O'Clock

Build a style guide for your web projects, including custom fonts, colors, text styles, and more.

Challenge Project: Build a Website Design System

Collect all your HTML/CSS knowledge in one place by building a reference website.

Challenge Project: Build Your Own Cheat Sheet

In this project, you'll use flexbox to design the layout for a company of your choosing.

Challenge Project: Company Home Page with Flexbox

Utilize your Responsive Design knowledge to create your ideal MeetUp group! Your page should look clean and crisp - regardless of the screen size!

Challenge Project: Responsive Club Website

In this project, we’re going to practice building an interactive webpage in HTML, CSS, and JavaScript so you can hone your skills and feel confident taking them to the real world.   Why? These three languages are the backbone of all web development.

Chore Door

Update a blog to meet common CSS accessibility standards.

Code! Blog

Build a program that mimics Codecademy's online store.

Codecademy Store

We will build an app to demonstrate how to use a variety of advanced React techniques, including inline styles, separating container and presentational components, proptypes, and forms.

Copycat

Program a React app that lets users create custom Spotify playlists.

Create a Playlist App With the Spotify API (Part One)

Create the technical design document for a feature request built on the Jammming project

Create a Playlist App With the Spotify API (Part Two)

Make a full-stack e-commerce app that lets users register accounts, browse products, and make purchases.

Create an E-Commerce App (Part Two)

Use your knowledge of logic gates to create a circuit that computes the sum of binary digits.

Creating an Adder Circuit

In this project, we're going to practice Positioning in CSS so you can hone your skills and feel confident taking them to the real world.
Why? Proficiency in the positioning of elements on your web page, specifically overlapping, will prove very useful with building projects in CSS.

CSS Grid: Architecture Blog

In this project, we're going to practice organization in CSS so you can hone your skills and feel confident taking them to the real world.
Why? You'll need to get comfortable with defining columns and rows and controlling the elements within them in order to build beautiful websites.

CSS Grid: Task Board

Create various themes and reactive elements for a bird-watching website using CSS variables and functions.


Curious Ornithologist

Utilize the Django framework to create an app that helps track a restaurant's inventory and sales. 

Django Delights

In this project, we're going to practice setup, exercise, and verify in Mocha so you can hone your skills and feel confident taking them to the real world.
Why? You'll learn three steps to guide you in writing perfect tests.

Factorial Feature

It's time to build fluency in HTML Fundamentals. In this next project, we're going to practice Structure in HTML so you can hone your skills and feel confident taking them to the real world.
Why? This project will help you to understand and master the building blocks of a webpage. It'll all build up from these foundations.  What's next? A blogger, a developer, a stylish website. You got this! 

Fashion Blog

Set the Flexbox properties for a to-do app.

Flexbox: To-Do App

Build a Flower of Life geometrical figure in a 3D virtual environment using the `<a-circle>` primitive.

Flower of Life

Use your knowledge of HTML forms to collect input users and put a spin on a classic story! 

Form a Story

Add breadcrumbs to an online grocery store.

FreshDeals: Blueberries

Apply your new Page Model skills to help Grocer.ly build an online shopping site

Grocer.ly

Using CSS selectors, you’ll give a recipe website style.

Healthy Recipes

Apply your understanding of handling HTML forms in PHP to create a calculator.

HTML - PHP Calculator

Create an inspirational homepage where you can check the weather, read an inspirational quote, view a pretty image, and write down your goals for the day.

Inspirational Homepage

In this project, you'll use the knowledge you gained from the color theory lesson and apply colors to a website.

Journey Around the World

In this project, we're going to practice mouse actions in jQuery so you can hone your skills and feel confident taking them to the real world.
Why? The easiest way to get a hang of jQuery events and actions is to start with events triggered by your mouse.

Madison Square Market

Create a blog about New York City using various semantic elements to show off how amazing the Big Apple is!

New York City Blog

In this project, you'll build a simple website for a fictional arts and crafts store using the tools on your own computer.

Off-Platform Project: Dasmoto's Arts & Crafts

Create a web page which advertises a product called "Excursion" using HTML, CSS, Command Line Interface, Git, and GitHub.

Off-Platform Project: Excursion

Create a fictional tea store on your computer using image assets and a design spec.

Off-Platform Project: Tea Cozy

In this project, we're going to practice Visual Rules in CSS so you can hone your skills and feel confident taking them to the real world.
Why? It's important to have a good grasp on the basic styling principles of a webpage.

Olivia Woodruff Portfolio

In this project, we're going to practice design in CSS so you can hone your skills and feel confident taking them to the real world.
Why? You'll feel comfortable with the various forms of color representation in CSS. 

Paint Store

Practice using React Hooks to build a place for your wandering thoughts.

Passing Thoughts

For this project, you'll apply the knowledge gained from the Color For UI lesson and update an e-commerce checkout page to ensure the user is aware of different actions, errors, and other elements on the screen.

Pinpoint E-Commerce

Build your own portfolio website to showcase the projects that you make on Codecademy!

Portfolio Website

In this next project, we're going to practice Grid Positioning in CSS so you can hone your skills and feel confident taking them to the real world.
Why? Using CSS grid allows you to conveniently organize data so that you can then easily manipulate across all platforms.

PupSpa

Use TDD to develop a feature test for a quote keeper.

Quote Keeper

In this project, we're going to practice working with multiple components in React so you can hone your skills and feel confident taking them to the real world.
Why? It's important to understand the relationship between parent and child components and how they can interact.

Random Color Picker

Practice creating React components by working on the first part of Ravenous, a React app to search for restaurants using the Yelp API.

Ravenous Part 1: Creating Project & Components

Are you up to the challenge of recreating Mondrian's Composition II in Red, Blue, and Yellow using Bootstrap's grid?

Recreate a painting using Bootstrap's grid

Build a news reader app using the concepts you learned in the middleware and managing promise lifecycle states lessons.


Redux News Reader

Help the movie review site _Reel Good Reviews_ update the text design on their site to improve readability and user satisfaction.

Reel Good Reviews

Transition a CSS codebase to embrace clean and organized SCSS.

Refactor CSS to SCSS

It's time to build fluency in a CSS preprocessor. In this next Pro Project, we're going to practice charts in Sass so you can hone your skills and feel confident taking them to the real world.
Why? Sass is a powerful tool that allows you to build awesome visualizations with pure styling.
What's next? Top 10 produce, charts without code, more Sass. You got this! 

Sass Bar Chart

In this project, we're going to practice parallax scrolling in Sass so you can hone your skills and feel confident taking them to the real world.
Why? Parallax scrolling is a popular method used on many landing pages to give them a professional feel.

Sassy Parallax Banner

In this project, we're going to practice Classes in JavaScript so you can hone your skills and feel confident taking them to the real world.
Why? You'll gain confidence in extending classes to their subclasses, then linking their shared methods and properties.

School Catalogue

Let’s use React to build a simple social network for pets.

Social Network for Pets

Build your very own solar system in VR using A-Frame.

Solar System (Part I)

Build your very own solar system in VR using A-Frame.



Solar System (Part II)

In this project, we're going to practice box manipulation so you can hone your skills and feel confident taking them to the real world.
Why? You'll be able to hone the skill of accurately setting up your box model properties and sizing each element on your webpage.

The Box Model: Davie's Burgers

Demonstrate the interactive navigation elements of a site with CSS styles.

The Summit

Use your knowledge of templates and forms to create a tourist attraction logging application!

Tourist Attractions

Follow step-by-step instructions to add animations to an existing static web page for an online reader.

Transitions - 20,000 Leagues Under the Sea

In this project, we're going to practice responsive design in CSS so you can hone your skills and feel confident taking them to the real world.

Why? Making a responsive design for your webpage will ensure, no matter the screen, the user will always see the design you intended.

Tsunami Coffee

In this project, we're going to practice text styling in CSS so you can hone your skills and feel confident taking them to the real world.
Why? The arrangement and style of text on your webpage has a large impact on your user's experience. You want to make sure it's done right!

Typography

Practice applying React programming patterns to create a responsive video player.

Video Player

Welcome! In this project, we will be going through an introductory lesson on using JavaScript with `p5.js`! This project was part of our Learn From Home Conference from April 2020.
 

Welcome To p5.js

In this project, we're going to practice tabular organization in HTML so you can hone your skills and feel confident taking them to the real world. Why? If you're going to have data on a webpage, you've got to master the skill of effectively and aesthetically organizing it – an HTML table is the perfect solution.

Projects in HTML & CSS

All Projects in HTML & CSS

Adhoc

Animal Fun Facts

Animated Company Logo

Birthday Party

Black Lives Matter

Broadway

Cake O'Clock

Challenge Project: Build a Website Design System

Challenge Project: Build Your Own Cheat Sheet

Resources

Support

Resources

Support

Plans

Community

Subjects

Languages

Career building

Mobile

Mobile