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!
Top comments (1)
Thinking outside of the box is great for creativity. I agree the to do list app has become too generic even though it is a good way to learn how to build CRUD apps. If a developer was to choose a to do list project I would be looking for new innovations and features that make it stand out.