Add client-side routing to a pet adoption website using the concepts you learned in the React Router lesson.

Adopt a Pet!

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

Animal Fun Facts

Use the power of arrays to store information about color and create an RGB color generator. 

Arrays: RGB Generator

It's time to build fluency in React fundamentals. In this next Pro Project, we're going to practice state management in React so you can hone your skills and feel confident taking them to the real world.
Why? State is the ""brains"" of your component and can help you dynamically render your page.
What's next? A company in need, providing expert security, more React. You got this! 

Authorization Form

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

Black Lives Matter

In this project, you'll create a movie review board using a controller and a view.

Bolt Network 1

In this project, you'll add custom directives to your movie review board.

Bolt Network 2

Let's create an animation overflowing with colorful bouncing balls! 

Bouncing Balls

Re-create an arcade classic: Space Invaders, in the form of Bug Invaders using Phaser.js!

Bug Invaders

It's time to build fluency in Object-oriented JavaScript. In this next Pro 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 practice utilizing the power of object-oriented programming and implement non repetitive code with concepts like inheritance.
What's next?  Books-'N-Stuff, checkout service, more JavaScript. You got this! 

Build a Library

Use real data from the Reddit API and display it using React and Redux.

​​Build Your Own Reddit App

Test and fix Cake Bar's new pick up feature

Cake O'Clock

It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice routing in AngularJS so you can hone your skills and feel confident taking them to the real world.
Why? The ngRoute module allows us to navigate around our webpage without dealing with page reloading.   What's next? A calendar, routing, more AngularJS. You got this! 

Calendar

External project focused on building the backend for a a platform that will allow users to participate in photo caption contests.

Caption Contest

Keep track of contacts and appointments with React.

Challenge Project: Appointment Planner

Use your knowledge of arrays and loops to create functions that will validate credit card numbers. 

Challenge Project: Credit Card Checker

In this Challenge Project, you'll build an interactive command line game in JavaScript utilizing classes and user input.

Challenge Project: Find Your Hat

Build a flashcard app with React and Redux.

Challenge Project: Flashcards

Use your knowledge of objects to create models of deep-sea organisms for scientists to study. 

Challenge Project: Mysterious Organism

Create JavaScript functions to power a human vs. computer guessing game and watch how your functions interact with HTML.

Challenge Project: Number Guesser

It’s time to build fluency in your coding skills. In this next Pro 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.  What’s next? Interactive JavaScript, chore-assigning robots, and game time. You got this!

Chore Door

Create a bar chart using DOM elements and styling them based on the data bound to each.

Climate Change Burden of Disease Visualization

Build a program that mimics Codecademy's online store.

Codecademy Store

This project will test your skills at preventing Cross-Site Request Forgery (CSRF) attacks in Node.js.

Codey's Confectionery: Preventing Cross-Site Request Forgery (CSRF) Attacks

Practice using prepared statements and form validation to prevent SQL injection attacks. 

Codey's Confectionery: Preventing SQL Injection Attacks

Create a game that includes scene transitions, animations, and tweens! 

Codey's Counting Conundrum

Put your knowledge of conditionals to use in developing a website.

Conditionals: The Great Outdoors

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

We will test the CopyCat app by using the React Testing Library to mimic user interactions. Learners will have the opportunity to practice React Testing Library concepts such as querying for DOM nodes, jest-dom matchers and testing asynchronous interactions.

CopyCat Testing

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

Create a E-Commerce App (Part One)

Create a E-Commerce App (Part Two)

Program an action-adventure fantasy story using Phaser.js.

Create a Fantasy Adventure Game

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

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

Create an app of your own choosing that uses your knowledge of Node, Express, and all the other back-end technologies you've learned in the Back-End Engineer Career Path. 

Create Your Own Back-End Application

Create an app of your own choosing that uses your knowledge of React, Redux, and all the other front-end technologies you’ve learned in the Front-End Engineer Career Path.



Create Your Own Front-End App with React/Redux

It's time to build fluency in CSS Grid Layout. In this next Pro 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.
What's next? To-do list, project organization, more CSS Grid. You got this! 

CSS Grid: Task Board

In Codestrips, you'll build a back-end to support a small comic strip creation app. Using Express.js and Node-SQLite, create a new database, build the proper table, and create GET and POST routes to provide access to and the ability to create new comic strips.

Cumulative Project: Codestrips

Currency Comparison is a Node.js application that helps users compare their hourly salaries with other currencies and we need you to test it with Jest!

Currency Comparison

Use collections, datasets, and dynamic pages to display and collect information on a blog.

Datasets: National Parks Adventures

It's time to build fluency in JavaScript fundamentals. In this next Pro Project, we're going to practice variables and strings in JavaScript so you can hone your skills and feel confident taking them to the real world.
Why? These concepts will help you use your data to output information to your users.  What's next? Dog ages, interpolation, more JavaScript. You got this! 

Dog Years

In this project, you'll implement authentication in an Express application using `express-sessions`, `passport-local`, and `bcrypt.js`.

Dognation: Password Authentication

Use event listeners to add additional functionality and interactivity to a Wix site


Event Listeners and Selectors: See the Sale

Refactor a budgeting and expense tracking app to use Redux Toolkit.

Expense Tracker

It's time to build fluency in JavaScript testing. In this next Pro 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.
What's next? Middle school math you probably forgot, edge cases, more Mocha. You got this! 

Factorial Feature

It's time to build fluency in jQuery fundamentals. In this next Pro Project, we're going to practice event handlers in jQuery so you can hone your skills and feel confident taking them to the real world.
Why? Event handlers help to provide a natural feedback for the user when they interact with your page.   What's next? A news feed, dynamic actions, more jQuery. You got this! 

Feedster

It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice directives in AngularJS so you can hone your skills and feel confident taking them to the real world.
Why? Directives tell AngularJS's HTML compiler to attach a specified behavior to that DOM element, or even to transform the DOM element and its children.
What's next? A newsfeed, directives, more Angular. You got this! 

Use your knowledge of full-stack web development to build your dream project using the PERN stack!

Final PERN 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 classical story! 

Form a Story

Utilize all that you've learned towards building a fully-fledged Wix travel recommendations website.

Fullstack Dev: Travel Time

Use jQuery to toggle menus and submenus. 

Gameboard

In this project, you'll create a custom directive that displays the score of a game.

Let's build a tool that generates visualizations using keyboard interactions with p5.js.



Generative Art Creator

Practice using JavaScript iterator methods on arrays to hone your skills and feel confident taking them to the real world. 

Grammar Checker

Use WebSockets to help create this fast-paced multiplayer game of hot potato!

Hot Potato

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

Use your knowledge of HTTP requests to interact with the Yelp API in Ravenous.

Interacting with the Yelp API

Create a Nam June Paik-inspired interactive video sculpture using p5.js!

Interactive Video Sculpture

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

It's time to build fluency in JavaScript fundamentals. In this next Pro Project, we're going to practice variables and printing to the console in JavaScript so you can hone your skills and feel confident taking them to the real world.
Why? You've got to master the basics. Get comfortable with these fundamentals.   What's next? A mad scientist, temperature conversion, more JavaScript. You got this! 

Kelvin Weather

Put your Phaser knowledge to good use by adding in beautiful effects into an infinite jumper game!

Learn Phaser: Codey Jump

Put all of your JavaScript skills to the test implementing functionality inspired by lodash.js.

Lodash

It's time to build fluency in jQuery fundamentals. In this next Pro 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.  What's next? A market place, awesome dropdowns, more jQuery. You got this! 

Madison Square Market

Build a virtual Magic Eight Ball using control flow in JavaScript. You’ll practice building decision-making into your programs and gain confidence in writing more robust JavaScript code.

Magic Eight Ball

Create a signup system for Woofstagram (aka Instagram for dogs) using React Native.

Make an Instagram App (Part One)

Set up a navigational structure for Woofstagram (aka Instagram for dogs) using React Native.

Make an Instagram App (Part Three)

Add visual and structural components to the home screen of Woofstagram (aka Instagram for dogs) using React Native.

Make an Instagram App (Part Two)

Take a Wix template and transform it - let your creativity shine through in your own résumé website!   


Making a Résumé Site with the Wix Editor

A one player matching game that reinforces the terms you learned in the `react-redux` lesson.

Matching Memory

Practice using getters and setters in JavaScript to hone your skills and feel confident taking them to the real world.

Meal Maker

It's time to build fluency in JavaScript Modules. In this project, we're going to practice creating a modular program in a Node.js environment so you can hone your skills and feel confident taking them to the real world.

Why? You don't want to copy and paste your functions from file to file. Learn to reuse them by exporting and importing.
What's next? A mixer, creating goofy sentences, and more JavaScript. You got this! 

Message Mixer

Build a Node.js console app that generates random messages each time a user runs the program and version your project with Git/GitHub.

Mixed Messages

Practice functions by building a whack-a-mole style Phaser game with animations and more!

Mole Unearther

It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice $scope in AngularJS so you can hone your skills and feel confident taking them to the real world.
Why? Practicing using $scope will help you build AngularJS apps more efficiently.
What's next? Moving with MOVE, assigning reps, more AngularJS. You got this! 

MOVE Log

You will build a musical instrument store using HTML, CSS, JavaScript, and Handlebars.

Musicon

In this project, you'll build a location-based service using a third-party custom directive.

NearMe 1

In this project, you'll fetch data from the Wikipedia API and display it in your map.

NearMe 2

In this project, you'll map URLs to different views in your app using routing.

NearMe 3

Represent recipes as objects and create a filter to display only the ones you want to see. 

Objects: Recipe Sieve

In this project, you'll build an email app.

Outbox 1

In this project, you'll add to your email app by mapping URLs to views.

Outbox 2

In this project, you’ll use TypeScript type guards to help combine two Park Service volunteer logs to create a list of this season's top volunteers.



Park Service Volunteer Appreciation Program

Pass business information between components in Ravenous.

Passing Information

Let’s use React Hooks to build a place for your wandering thoughts.

Passing Thoughts

External portfolio project using Node and Express to build an API and implement CRUD operations.

Personal Budget 

Add a PostgreSQL database to persist the data used in the Node/Express app: Personal Budget, Part I project.

Personal Budget, Part II

It’s time to build fluency in your coding skills. In this next Pro Project, we’re going to practice building interactivity with JavaScript. Why? You will have the opportunity to build an interactive web page with events like you would in the real-world. What’s next? Create an interactive piano player. You got this!

Piano Keys

Use your knowledge of types and functions to create a program that prints out pixel art.

Pixel Smile

It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice $scope in AngularJS so you can hone your skills and feel confident taking them to the real world.
Why? $scope holds the ""state"" of your app and is a crucial part of any AngularJS app.
What's next? Pizza Planet, building a delicious menu, more AngularJS. You got this! 

Pizza Planet

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

Portfolio Website

Use web modules to query data from a pizza parlor, and display the resulting information on the frontend.

Pulling Data: Pizza Presenter

In this project, you'll use knowledge of Express.js to build a small JSON API to serve up famous and interesting quotes about computers, technology, and programming.

Quote API

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

Quote Keeper

Use TDD to develop the model layer for a quote keeper app.

Quote Keeper: Model Layer

Use TDD to develop a server level test for a quote keeper.

Quote Keeper: Server Layer

Design the logic for an app that will give runners information on race day! 

Race Day

It's time to build fluency in React fundamentals. In this next Pro 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.
What's next? Deciding on a color, family interactions, more React. You got this! 

Random Color Picker

In this multi-section project, you'll build a React app to search for restaurants using the Yelp API. In this section, start the base of your project by creating all necessary React components.

Ravenous: Create Project & Components

It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice routing in AngularJS so you can hone your skills and feel confident taking them to the real world.
Why? The ngRoute module allows us to navigate around our webpage without dealing with page reloading.   What's next? An eReader, route, more AngularJS. You got this! 

Reader

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


Projects in JavaScript

All Projects in JavaScript