Here are some simple projects that beginners can use to practice with:
A sort list is a way in which you can list words into alphabetical order with a sort button. When this button is pressed the words are sorted into alphabetical order.
This project allows you to input a username and password and then validate it by providing two input boxes and two buttons, one to Login and one to Cancel. Upon loading you can disable the Login button and then enables it when both inputs have been entered. You are also able to make it so that the password entered is not visible by using encryption as well as alert the user if the password or username is incorrect.
With this project you can build a battery charger progress bar and animate the charging process of the battery. You will master the process of getting the element and setting the HTML in it.
Music Player & Video Player
The Music Player project enables you to build a button to show how to play and stop a song. You can make it a little more challenging for yourself by adding a progress meter to show how far into the song the listener is. The Video Player project allows you to use the HTML tag to display the “video” element and allow the user to make use of two buttons to start and pause the video.
Here you can setup a webpage that is able to display images and provide buttons that allow the user to advance or go backwards when looking at the images. You can even set up features such as automatic advancement to the next image, input boxes to accept timing in seconds and interval times between each image.
Memory Game, Tic Tac Toe and Tetris
Eating Out Bill Splitter
This is a fun project to do as it can be widely used by many restaurant-goers. This calculator enables the user to split a bill before or after a tip has been added. HTML is used to build the necessary fields such as accepting the bill amount, the number of people eating out with you as well as buttons to split the bill or to reset the fields.
This project makes use of two web pages, one with a smart home panel and another one to show the status of the home. In the first web page the designer is able to build a series of drop down lists from the smart home panel and input start and end times into these boxes from a list with smart home devices such as the front door, back door, dryer, lounge fan, bedroom light, washer and many more. Each of these devices allow for a start and end time that the user can put in which will then turn the device on automatically. The second web page allows the user to see the status of the home as well as the option to press the “Run” button to start the simulation and get the current time as well as save it in a variable. You can also build a gradient page to the home status page which will indicate whether it is daytime or evening.
Shopping Mall Map
This project is a variation of the traditional to-do-list projects and uses primary and secondary drop-down lists in HTML and input them with the initial categories such as snacks, fruits, bakery, frozen foods, vegetables, perishables, non-perishables etc. You are then able to add in the secondary categories for example pumpkin and cauliflower under the vegetable category by providing an input box where a user can enter a grocery item under the category that they have selected. In short, this provides the basic functionality and then validation to a project. If you would like to check if your code has been properly written, then it is advisable to provide a “Show List” button that will show you the entire grocery list when pressed.