Projects

Practice and develop your coding skills by building real live interactive autograded projects with solutions and video tutorials

Conditions
conditional-rendering

Conditional Profile Card Generator

beginner

Practice Dynamic Conditions with JavaScript: Build a profile card that updates dynamically based on runtime variables like username, avatar, background, and more. Strengthen your coding skills by mastering condition-based rendering in this hands-on project. Perfect for improving dynamic HTML generation.

Start project

Javascript
context.api
React.js

Contact List App Using React & Context

intermediate

Build a contact management app using React.js, React Router, and Context API. This project lets users create, read, update, and delete contacts. Fetch data from an API and manage state using Context. Implement CRUD operations and enhance UX with modals for deletion confirmation.

Start project

Javascript
Python
Flask

Authentication system with Python Flask and React.js

beginner

Almost every website in the world has user authentication, in this project you have to implement user authentication using the Python Flask framework for building a backend REST API and React.js and sessionStorage API for the front end web application.

Start project

http
HTTP
Python

Integrating with the Twitter API Project Tutorial

beginner

Connect with an API, retrieve the data and save it into a python pandas dataframe for easier manipulation and into a SQL database.

Start project

Python
The Command Line
Arrays

Compression Algorithm w/Python

beginner

Building a Compression Algorithm using Python and Emojis

Start project

Javascript
The DOM
HTML and CSS

Random Card Generator

beginner

Build a Random Poker Card Generator: Use your CSS, HTML, and JS skills to create a website that shows a random poker card every time it refreshes. Generate a card with a random suit (Hearts, Spades, Clubs, Diamonds) and value (2–10, King, Queen, Jack, Ace). Enhance with extra features like timers or buttons!

Start project

Javascript
React.js

Traffic Light

beginner

Build an interactive traffic light simulator using React.js and hooks! This project teaches you how to manage component state with useState, updating the UI dynamically when clicking on different lights.

Start project

Bootstrap
HTML and CSS
React.js

Landing Page with React

easy

Create a fully responsive landing page using React.js function components. Improve your frontend skills by structuring reusable Bootstrap elements like <Navbar />, <Jumbotron />, and <Card />. Learn to manage dynamic content with props, follow best coding practices, and optimize performance for a seamless user experience.

Start project

Javascript
React.js

Starwars blog reading list

intermediate

Build a Star Wars reading app with React.js, React Router, and Context API. Learn API integration with SWAPI, state management, and routing. Implement a 'Read Later' feature to save favorites. Master asynchronous requests and global state handling for an optimized user experience. Perfect for React developers!

Start project

postgre
Back End
Data Science

Connecting to a SQL Database Project Tutorial

beginner

Create a SQL database using the PostgreSQL engine and using a professional python project structure that includes PIP and environment variables.

Start project