10 Web Development Projects for 2020

Web Development Project ideas in 2020
Web Development Project ideas in 2020

A complete list of top 10 project ideas in web development for beginners to sharpen your skills and build your portfolio.

Why you must start taking up projects early on in web development?

It is important to start building projects while learning web development because you would not be able to absorb the concepts you learn until you apply them to make various projects. You could start with beginner-level projects and move onto intermediate projects and projects with higher complexity as you proceed in your learning journey of web development. The process of building a project requires planning and a large spectrum of skill-sets. It tests your knowledge, helping you understand your strong and weak points.

Notes App:

Project Level: Beginner

Create a web app in which users can add and store their notes. This is an excellent project for beginners. Some pointers to keep in mind while building a notes app are:

  • The user should be able to create, edit and delete a note.
  • When the user closes the browser window the notes should be stored and when the user returns, the data should be retrieved back.
  • User should be able to see the date and time of the creation of the note.
  • After you have made a basic app, try adding the following features to take it up to the next level-
  • The app should be able to take multiple entries per note with the new entry having the current date and time.
  • Users should be able to search a note based on a keyword.
  • Users should be able to sort and filter using date and time information.
  • To make the project even more challenging display a calendar layout so that the user can click on any date to view the notes of that particular day.

Some example projects you can refer:

To-do List:

Project Level: Beginner to Intermediate

Make a to-do list app in which the user can add daily tasks to be accomplished. Some pointers to keep in mind while building a to-do list app are:

  • User should be able to add a new item to the list.
  • The items added should be visible to the user in the to-do list.
  • User should be able to mark a task in the list as ‘completed’. The completed tasks can appear under a separate category for more organised layout.
  • Users should be able to edit or delete a task from a list.
  • After you have made a basic app, try adding the following features to take it up to the next level.
  • Display date and time of when a particular task item was added to the to-do list.
  • Use local storage so that when the user closes the browser window the data is stored and when the user opens the app again the data can be retrieved.

Example Project:

Build an online Word-Counter App:

Project Level: Beginner to Intermediate

Word count is the number of words in a document or passage of text. A word counter is a useful tool for writers to see the count of the total number of words in their article. Some pointers to keep in mind while building a word counter app are:

  • It requires you to build an app that can parse texts and show the number of words.
  • The user will enter the text of their article. The number of words in that text should be displayed.
  • Additionally, try adding the following features to take it up to the next level-
  • Display the number of characters, sentences, paragraphs and top keywords (based on word repetition).
  • Also, try displaying the reading time by using APIs.

Example Project:

Build your own Portfolio Website:

Project Level: Beginner to Intermediate

This is the project almost every web developer must have come across in their career and there’s a reason for it. It is a great way to show off your skills and strengths through your own portfolio website. You can keep adding different features and experiment with new technologies. If you are a beginner, then you could start with a simple static page and as you learn more and more concepts you could add it to your portfolio page.

Some points to keep in mind are:

  • The essential elements in any portfolio website are – a concise bio to let people know you as well as your work, your best skills, background, experience, accomplishments.
  • You can try including a logo to brand yourself and also work on the favicon.
  • Make sure to add social media buttons to link to your social profiles like GitHub, LinkedIn, etc.
  • It is essential to include a contact form on your website so that potential clients can contact you.
  • Add navigation to other pages like a contact page.
  • Experiment with Flexbox and CSS Grid for creating beautiful layouts.
  • Focus on designing and pay attention to the colours you will use to make your portfolio stand out.
  • Try to use new measurement units like VW and VH to make your website more responsive and flexible on devices with different screen sizes.
  • You could look through the CSS documentations to know about the latest features being added to the CSS language and keep updating your portfolio website.
  • Consider adding a blog page to your website wherein you can include your own blogs and articles.
  • Display your best projects and for a more organised look, you can divide them into categories.

Quiz App/ Q&A Game:

Project Level: Beginner to Intermediate

Build a quiz app in which the user can choose one out of four options for a question. At the end display the result. You can use JavaScript for this project. While learning JS is not that difficult, applying that knowledge in real-world scenarios is quite challenging. You can experiment with your skills by working on a small JavaScript-based quiz game. Through this project, you will learn about DOM manipulation and data management. Remember that, depending on your JS skills and ability to handle complex logic, you can make this game as simple or complicated as you want it to be.

Additionally, you can try adding the following features to your quiz app to make it more interesting:

  • Add multiple quizzes to the app so that the user can select which quiz he wants to take. (There will be a different page for each quiz.)
  • Add social media buttons so that the user can share their results.
  • Users can reset and retake the quiz.
  • Save and display the previous scores of the user on the dashboard.

To get started you can begin by referring to this example project:

Countdown Timer:

Project Level: Beginner

The simplest project on this list is the countdown timer. A countdown timer is a virtual clock that counts down from a certain date to indicate the beginning or end of an event. It is a webpage which basically has to update the time every second. The objective is to show a continuously decrementing display of the days, hours, minutes and seconds to a particular date or time. You can use JS for this project.

After you have created a basic countdown timer try adding the following features to your webpage:

  • Add pause, start and stop buttons.
  • Display an alert notification when the event time is reached.
  • User can input more than one events with a timer initialised for each of those events.

You can refer to these sample projects to get started:

Tic-Tac-Toe

Project Level: Intermediate to Advanced

Building games is the most fun way to learn coding. When it comes to games what’s better than the classic game of tic-tac-toe. First you could try out the basic two-player (X and O) game. After that you could take it up a notch higher by using AI to make it user vs. computer game by using necessary algorithm and logic.

Sample project to get started:

Build a Drawing Tool

Project Level: Intermediate

You must have used MS-Paint to create your own artwork as a child. Why not create an online canvas to do the same! You can use HTML, CSS and JS to build this app. User can draw using their mouse. Some essential features are- change colour, erase, change the size of drawing tool, reset/clear the canvas. Additionally, you can allow users to share their work on social media or save their work in image format.

E-commerce Site or Online Shopping Website

Project Level: Intermediate to Advanced

Most web developers end up working for a company that sells online or provides services to customers through an online interface. Nowadays, there are so many food delivery sites, online stores etc. So, there is a huge demand for web developers in this arena. It is great if you have something similar to your portfolio to get you hired. Try building an interface for an online shop. Make sure to use Flexbox for a neat layout. You can add many features to it as you want.

(Hint: add to cart, view cart, etc.) Consider all the pages that you will have to include in it and put in on the navbar. (Hint: login-registration page, contact page, user profile page, etc.) Work with databases and improve on backend logic as you proceed. (Hint: Study about recommendation algorithms used on these platforms which result in a tremendous increase in their revenues.)

Memory-Based Game

Project Level: Intermediate to Advanced

Create a card-based memory game where the user will have to flip two cards and reveal what’s underneath. If the user flips cards which have matching picture underneath then user scores point but if the pictures are different then the cards return back to the original state (face-down). It is memory-based because the user has to remember the cards to finish the game in optimal time. Additionally, you can include a timer, display previous scores, game statistics, give the user choice for difficulty level (easy, medium, hard), make it a multi-player game, etc. to make it more challenging.

Conclusion

These are our top 10 project ideas to upgrade your web development skills and advance your career as a web developer. Start right away with any of the above ideas or you can combine a few to come up with your own innovative and unique idea. We are sure it will give you a flavour of real-life development and an edge over your peers!

To read more about web development, click here.

By Shifani Ram