To Do List

front-end-engineering-with-react

qa-automation-using-playwright

In this project, you need to build a to-do list app. This app should allow anyone to create, remove, edit and list all of their tasks. To get started, please scroll down and look at the tasks listed below.

Project Preview

To Do List Project

Login Form

Basic CSS - Login Page Project

In this project, you need to style a form that allows people to login to an application. This form will collect different user information like name, email and address. To get started, please scroll down and look at the tasks listed below.

Profile picture

Background Image

Login Form Project

News Explorer

In this project, you'll build an application that displays all the news items in one single webpage. You'll add features for sorting and filtering the news items. To get started, please scroll down and look at the tasks listed below.

neetoCode with the news data set

Calculator

front-end-engineering-with-css

In this project, you will build a calculator with all basic functionalities like addition, multiplication, division, and subtraction. With this, you'll get a good understanding of DOM manipulation, JavaScript logic & CSS design. To get started, please scroll down and look at the tasks listed below.

Password Generator

In this project, you'll make an application that creates strong passwords for the user. You will add features to control which characters are allowed in the password. Finally, you'll provide the user the ability to copy this password and use it. To get started, please scroll down and look at the tasks listed below.

Yellow Container Background

Movie Details

Basic HTML - Movie Details Project

You need to build a webpage using HTML. This webpage will be about a movie of your choice. You'll be adding movie details like plot, cast and posters in this webpage. To get started, please scroll down and look at the tasks listed below.

Toby Maguire

Andrew Garfield

Tom Holland

Spiderman - 2002

Spiderman and Green Goblin

Spiderman and Mary Jane

Spiderman 2004

Doctor Octavious

Spiderman 2007

Spiderman 3 - Cover

The Amazing Spiderman

The Amazing Spiderman 2

Spiderman - Homecoming

Spiderman - Far From Home

Spiderman - No Way Home

Spiderman - Face Icon

Spiderman - Emoji

Movie Details Project

Sticky Notes

In this project, you will create an application that creates and removes notes from a dashboard. To get started, please scroll down and look at the tasks listed below.

Wordle

front-end-engineering-with-javascript

In this project, you'll create the Wordle game. This is a single-player game where the player tries to guess a five-letter word within six attempts. After each guess, the letters are marked as correct, present, or absent based on the secret word. You'll create the layout of the game and handle the feedback mechanism for correct, present, or absent letters. To get started, please scroll down and look at the tasks listed below.

neetoCode with list of 600 words

Wordle Game

Tic-Tac-Toe

In this project, you'll create the tic-tac-toe game. This is a two-player game. Player 1 will click on a cell to mark an 'X' in it. Player 2 will then click on a different cell to mark an 'O' in it. This will continue till a player gets three marks of the same kind in a row. The three consecutive marks can be horizontal, vertical or even diagonal. You'll create the layout of the game and handle the winning, losing or tie conditions. To get started, please scroll down and look at the tasks listed below.

Icons

Currency Converter

In this project, you'll build an application that converts one currency to another. You will get the current conversion data using an API. You will also create the layout to provide the user the option to choose the two currencies and the quantity. Finally, you'll convert one currency to the other and show it to the user. To get started, please scroll down and look at the tasks listed below.

Country list API endpoint

Exchange Rate API Website

Battleship Game

Basic HTML DOM - Battleship Game Project

In this project, you'll create the battleship game. In the game, players will click on cells to reveal either a battleship image or the image of water. You'll create the complete layout of the game along with the winning and losing conditions. To get started, please scroll down and look at the tasks listed below.

Water

Battleship

Battleship Game Project

Personal Resume

In this project, you'll create a resume webpage which will display all your web development work in one place. Here, you'll add your details and links to the projects that you have built. To get started, please scroll down and take a look at the tasks listed below.

Store All Your Project Images Here

Personal Resume Project

Chess Board

In this project, you'll style a Chess Board using HTML and CSS. You will create an 8x8 chessboard with alternating light and dark squares. You'll add icons for the chess pieces from the resource we provide below. Please ensure that you use only CSS Grid for this project. Avoid using CSS Flexbox. To get started, please scroll down and look at the tasks listed below.

Font Awesome Icons

Shopping Cart

In this project, you'll create a shopping cart webpage for a shoe store. You'll create the main dashboard where the shoes will be listed. You'll also create functionality for filtering and sorting the shoes. Finally, you'll add a shopping cart where the users can add the shoes of their choice and place an order. To get started, please scroll down and look at the tasks listed below.