Check out our FREE Web Developer Track!

JavaScript

Browse through javascript practice projects for new age web developers and get started with a step-by-step plan.

Online Code Editor (React)

Want to take your frontend development skills to the next level? Build an online code editor in React and start using it to edit your source code. All you enthusiastic frontend developers reading this, make sure to tick this off from your bucket list of react projects for beginners.

Author

Kevin Paulose

Collaborator(s)

Mridula Sivanandan
,
Kiran BS

Prerequisite(s)

HTML, CSS, React (Intermediate level)
35 hours
Difficulty: Intermediate

Skills to be Learned

React
Web development
Website hosting
View Project

Online Code Editor (JQuery)

Have you been looking for javascript project ideas to take your skills to the next level? If yes, complete this project and have your own online code editor to edit your source code. This is the perfect project to test your understanding of HTML, CSS, Javascript.

Author

Kevin Paulose

Collaborator(s)

Mridula Sivanandan
,
Kiran BS

Prerequisite(s)

HTML, CSS, JQuery (Introductory level)
20 hours
Difficulty: Beginner

Skills to be Learned

JQuery
Web application development
Website hosting
View Project

Slack clone using React

If you’ve been looking for challenging react native projects to apply React-Redux concepts along with an opportunity to get acquainted with the fundamentals of Firebase databases, this is the perfect project to include in your resume. By the end of this project, you will be flaunting a web messaging app that provides useful features similar to Slack.

Author

Kevin Paulose

Collaborator(s)

Mridula Sivanandan
,
Kiran BS

Prerequisite(s)

React, Redux (Basic Level)
80 hours
Difficulty: Advanced

Skills to be Learned

Advanced React - Redux
Firebase
Web application development
Website hosting
View Project

WhatsApp Web Clone

We all have used WhatsApp web on our PCs. Ever thought of making it yourself? The interface that we will be making for our project will look alike. Firebase real time database will give you seemless messaging feature.

Author

Sheetal Singh

Prerequisite(s)

HTML, CSS, Javascript, ES6
60 hours
Difficulty: Advanced

Skills to be Learned

React basics
React Hooks
Firebase Firestore integration
CRUD
React Context API
View Project

Realtime Video Processing using ChromaKey (GreenScreen) Effect

Hollywood studios use green screen to create all kinds of incredible special effects. Your local weatherperson uses it to look like they’re standing in front of a cool weather map. You can learn the secret behind the effects by building an web application which captures webcam video with green screen and replaces it with background video or image of your choice.

Author

Yakshit Ravindra Jain

Prerequisite(s)

HTML, CSS, JavaScript (Intermediate level)
15 hours
Difficulty: Beginner

Skills to be Learned

Video Processing
View Project

Submit your Projects!

Would you like to contribute your own projects to Crio Projects Hub? Share your project with us and we will work with you to feature it here.

Submit Project