5 practical web dev projects that aren't todo lists

I first learned web development by finding interesting sites around the web and trying to create them for myself. This of course isn't everyone's style of learning, but if you're one of those who thrive on doing to move forward, keep on reading!

Usually when I see examples pop up of beginner projects, they're pretty much the same things: todo lists, text editors, forms, etc. These aren't necessarily bad but they can get a little boring, especially when you start moving up your skillset and want to try to expand your knowledge with more complex projects.

So I put together this little list of ones that I think might be good to try your hand at. They go up in complexity as you go down the list, so just keep that in mind. I've given each one a list of terms you can search to help build them, as well as programming languages or frameworks that might be good to use.

While a project might seem daunting, all of these are made up of smaller parts, so it can be easy to break them down into manageable chunks!

Alright, here they are.

Image slideshow

This will mostly test your frontend abilities, and there's a few ways you can build a slideshow of pictures that rotates through each one. You might be able to try to do something with pure CSS, but adding a bit of JavaScript to the mix will really hone the effect and overall user experience.

Search these terms to help with the project:

• CSS transitions
• Animating HTML elements
• Click events in JavaScript and how to handle them
• Image resizing with CSS
• Keyboard navigation and accessibility

Some languages and technologies you can use to build this:

• HTML
• CSS
• JavaScript

Markdown previewer

Either with a website or with a command-line application, try creating a way to preview markdown files and convert them to HTML a browser can understand. I write a lot of notes in markdown, but seeing them nicely formatted helps with readability.

Search these terms to help with the project:

• Parsing and using command-line arguments
• Leveraging third-party libraries
• Handling file input
• Outputting and styling pre-formatted HTML
• Building and distributing a compiled executable

Some languages and technologies you can use to build this:

• Go
• Node (JavaScript)
• PHP

Weather app

This is great because you get to play around with some real-life data. Try creating a website or a mobile application that takes in weather information from your area, and displays it in a nicely formatted way. You can be super complex and show every single data point, or go minimal with just the temperature and basic conditions.

Search these terms to help with the project:

• Ingesting and using an external API
• Clean layout design and styling
• Live updates without having to refresh
• Styles changing based on current data
• Handling unexpected errors from an API

Some languages and technologies you can use to build this:

• Vue (JavaScript)
• React Native (JavaScript compiled to mobile code)
• Python

Twitter clone

This one you can make as complicated or as simple as you'd like, but it will definitely bring you across both the frontend and backend stacks. At its heart, this project should let someone sign up for an account, create a username, and submit small messages that can be seen on their main feed page.

Feel free to add additional complexity to it in the form of notifications, likes, blocked accounts, reblogs, user settings, etc.

Search these terms to help with the project:

• Database design + relationships (one post -> many comments)
• Sending notifications
• Input sanitization and form submissions
• Infinite scrolling
• Account authentication and security

Some languages and technologies you can use to build this:

• Laravel + Vue (PHP + JavaScript)
• Django + React (Python + JavaScript)
• Kotlin + Svelte (Java + JavaScript)

Stock market watcher

This takes complexity up another notch by running code in the background, not just while someone is on your site. As a user of this project, I'd want to be able to track specific stock tickers and see their current price on the market.

I'd also want to be notified whenever a price drops below, or goes up to, a certain amount. This will require you to run code in the background of your website to constantly refresh and compare the data coming in from the stock broker.

Search these terms to help with the project:

• Background (cron) jobs to watch stock prices
• Ingesting and displaying lots of data from external APIs
• User authentication and storing personal settings
• Formatting and sending email and text notifications
• Intricate graphing with or without third-party libraries

Some languages and technologies you can use to build this:

• Rails + Hotwire (Ruby)
• ASP.NET + Blazor (C#)
• Laravel + LiveWire (PHP)

Conclusion

I hope some of these projects have inspired you to look in more uncommon directions for ways to help you hone your programming skills. To this day I'm still building things in my free time in order to learn new frameworks, languages, or just to see if I can actually do it.

If you have any questions about this, or anything else related to web dev, feel free to let me know in the comments or reach out to me on Twitter!