Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

In the software development world, practice makes perfect. Therefore, we should find as many ways to practice programming as possible.

In this article, we’ll look at some practice project ideas that level up our coding skills.

Membership Site

We can build a website that lets users look at the content when they sign up for an account and log in.

This way, we practice building apps that have user management and authentication, which is used in almost all apps.

We can use it to display items of our choice once the user logged in.

To make it fancy, we can add a user management portal to let us manage users.

Cookies and tokens can be used for authentication to keep authentication data.

Product Landing Page

A landing page promotes a product with a beautiful page. We can build landing pages to practice our design chops and make good looking front ends.

Also, we can learn about layouts with flexbox and grid.

Quiz Game

We can make a quiz game that loads questions and let players answer them. The questions can be hard-coded in our app, use an existing API like Open Trivia to load questions, or build our own API and load questions into a database and read them from there,

Our app will let people pick or enter answers and then we check them against our questions.

Also, we can add a timer so that people have limited time to answer questions.

EBook App

An app to display an ebook is useful. The content can be loaded from a local database or from an API.

We can even load it from a file written in Markdown or HTML.

There’re many ways to make an ebook app, including static site generators like Gridsome and Gatsby, or we can stick with traditional dynamic apps that load things on the fly.

Survey Form

The survey form is great for practicing building dynamic forms. We can build a UI for managing survey questions and letting people answer questions.

To make creating dynamic forms easier, we can use frameworks like React, Angular, and Vue to do this.

The questions can be stored in an API.

We can let users add questions with various kinds of controls like text input, checkbox, radio buttons, and more.

To-Do List

To-do list apps are a very popular project for a practice app. we can let users add, edit, and remove tasks.

Also, we have to let users check off the tasks that they’ve done.

To make it even better, we can add reminder capabilities, which aren’t in most practice or tutorial to-do list apps.

Sliding JavaScript Drawers

A sliding drawer menu takes some skill to build. It opens from one side of the screen and slows it as an overlay of the web page.

Photo by Jon Tyson on Unsplash

Personal Portfolio Website

A personal portfolio is always needed if we want to get various opportunities as developers.

Therefore, we should make one that looks good and have some sample projects in them.

To make a portfolio site, we can make a static website to display our projects with a neat layout, lots of pictures, and nicely designed graphics.

Also, we should make sure that our site loads fast so people can see our stuff right away.

Recipes App

A recipe app is not only useful, but we can also use it to practice our own coding skills.

It has many moving parts, including managing recipes with a UI. Also, we have to add a page for people to look at our recipes and flip through them.

The form to let people add a recipe should let people enter the title, content, and one or more image or even videos.

Therefore, a simple-looking recipe app actually has lots of things that we can do to make it work more functional than the rest.

We can also add different categories and let the user tag them with the categories.

Conclusion

There’re lots of apps we can build to practice our programming skills. Simple looking projects like recipes app, to-do list and membership sites all have a lot small moving parts that we have to implement.

To practice building dynamic forms, a survey app is a great one to build.

The post Practice Project Ideas to Sharpen Our Web Development Skills appeared first on The Web Dev.