Web Development Project Ideas for Beginners
Now if you read my previous article, or watched this video on Youtube , the one thing I didn’t stop talking about is doing personal projects. I think that doing personal projects is the main factor that contributed to me getting my first job as a developer. So this article will discuss what kind of web development project ideas for beginners that you can use to kick start your web development career.
I don’t mean that it was the projects themselves that got me the job, but it was the confidence that I gained by actually completing a small page application or a website. And then that turned into a confidence boost in job interviews.
I feel that by being able to swing a job interview to a project you have worked on it can really fill the gap by not having any professional experience as a developer.
Another reason is that as I have been learning to program, I’ve found that ideas and or inspiration for projects that are more geared towards beginners is pretty thin on the ground.
So I wanted to show you some of the projects that I worked on while I was learning. Hopefully this will inspire you to build what I built or take inspiration from what I’ve made and do it better.
I started building projects on my own at about month 3 of my bootcamp and in the beginning it was really basic stuff. Just an HTML and JS file but as I learned more and my confidence grew, I started expanding until I started building projects in the main framework we learnt which is AngularJS and even a full stack app as a bootcamp project.
Obviously when you start learning your not going to be building the next Facebook or Reddit, so set your sights on smaller targets and just solve some problems you may have so that is what I did.
I started by building a personal website. In the beginning it was just an HTML file with CSS for design, and then I advanced onto some more in-depth web development project ideas for beginners, so look at the following examples for things that you can build too.
All over Israel there are lotto booths, and I thought it would be a cool way to practice the knowledge that I had learned up to this point by building a random number generator that gave you numbers to play with and a bonus number.
Dice Rolling came about on a national holiday here in Israel, a number of friends and I wanted to play a board game, but there were no dice in the box, so I became antisocial for a few hours while I built a program that simulates the rolling of 2 dice.
Menu Generator is the project where I really stepped it up a gear. I’d just learnt jQuery, and was back in London visiting family. My brother, who is a chef, was telling me about how it was a hassle for him to be coming up with a new menu every week without it being boring or dull for his diners. So I made him a piece of software that in a few clicks gave him a new, random menu for the coming week.
As part of my Bootcamp we also got milestone projects we have had to complete. The first one I made was a client side, ToDo list that saves your notes in an array in localstorage.
When we learnt the Bootstrap framework and had to build a small mock travel website that was not only responsive, but could also use AJAX to do an API request to get the weather in 8 major cities around the world.
Full Stack MEAN App
Playlistim is a full stack app that we had to build using AngularJS, Mongo DB, Express and NodeJS or the MEAN stack. This was the first time that I had done anything beyond just client side and it was really hard to get finished with the flow from front end to back end but once the penny dropped it was a great feeling.
AngularJS Framework Example Website
I built a landing page for Hanoi, which is a restaurant in Tel Aviv using AngularJS as a way to practice building with the framework.
I found a couple of great places to get inspiration for projects. Free code camp and The Odin Project are online courses to learn web development but they are free and are a great resource for finding project ideas. There is also a blog that I found built by Jennifer dewalt who set herself a challenge to code 180 days in a row and she made the projects available to everybody. This was an amazing website to really get inspiration for new projects.
Also you could build:
- A tip calculator for an evening meal
- A password generator
- A website for your favorite restaurant
So these are just a number of ideas for web development project ideas for beginners.
How to build projects
A break down
- Find problems you are having and solve them – I built the dice app because we didn’t have any dice to play a board game with. To expand on this, look at what you are doing at home or at work and see if there is anything that can be made easier with a website or app. Maybe a shopping list app? Or a weekly schedule?
- Write out what you want on a piece of paper, in steps – before I sit down and write code, I take a piece of paper and a pen and sketch out what steps the code need to take to give an outcome. If I use the Lotto numbers as an example, how do I go from an array of numbers -> to random selection of numbers -> displaying it to the user
- Work with free APIs to learn data handling and AJAX – There are tons of free APIs that can be accessed to provide data. Be it the weather or random user profiles, API’s can give you data in JSON format that you can display to a user however you like.
- Experiment until you get things right – I like to learn by doing, so after I have sketched out my idea and have a good understanding of how I want to show my data I start writing code and testing as I go and just tackle bugs as they come up.
- Be flexible – If you start making a website or app and are finding it difficult, or have thought about adding to many features, don’t be afraid to change the plan halfway though. The whole idea of learning is to learn. Everybody learns at their own pace so just take it slowly until you really understand what you are trying to achieve.
- Praise stack overflow. – this is the holy grail of programing. Upvote good answers or add to the conversation. If you used a solution and it worked, then leave the author a comment. It helps with the accountability on the site.
So what did this article about web development project ideas for beginners cover?
A this point I would like to point out, that despite being really proud of myself for building all these web apps and websites, I look back at them now months later and see bugs, errors, lack of Object Orientated principles and lack of commenting in my code. But that’s the fun of learning, to be able to look back and see how far you’ve come and know what to do better next time.
I would also say that web design isn’t my strong suit, but again, if you are starting out, just focus on building apps or websites that work. Design can be implemented after the fact. With my newer projects I do try and implement modern design but it isn’t essential. This can also be used as a plus in a job interview situation where an interviewer may ask you what your weaknesses are.
Ask for feedback and take it constructively. What you may think is rubbish or bad other people will look at it in wonder. When I finished the menu app for my brother, he was in shock that his job had gotten easier after a couple of days work on my side.
Finally, just have fun. That should be the whole point about learning.
See below for the video that I made about web development project ideas for beginners.