Web Development Project Ideas for Beginners

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.

Project Ideas

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.

Project Ideas

Lotto Numbers

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.

Web Development Project Ideas for Beginners

Dice Rolling

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.

Web Development Project Ideas for Beginners

Menu Generator

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.

Web Development Project Ideas for Beginners

Bootstrap Practice

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.

Web Development Project Ideas for Beginners

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.

Web Development Project Ideas for Beginners

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.

Web Development Project Ideas for Beginners

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:

  1. A tip calculator for an evening meal
  2. A password generator
  3. 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.

 

  • How to search in Google to find the answer – Tech Name | Keyword | problem, copy and paste an error code. This mean put, for example Javascript | Loops | Counting though array

 

  • 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.

How to become a web developer without a degree

How to become a web developer without a degree?

Some pretext about this article. I will be talking about looking for a job in Israel where the market and way of getting a job is a bit different than in Europe or the US, but the basics, I feel are still the same.

So now we ask ourselves… how to become a web developer without a degree…

I wanted to write this because often times, you see a lot of “I did a coding bootcamp and now I’m hired” posts on forums or blog posts, with the conclusion being that networking is the only way to get your first role. I got mine ultimately though a job board and I wanted to walk through the steps I took to get hired.

Lots of high tech jobs and companies in Israel are founded and run by people that have been in high tech units in the army and then use this network and knowledge to leverage the job market when they leave the army or finish a CS or engineering degree.  

People like me, where Hebrew isn’t their mother tongue, have to do things a bit differently.

I started learning web development by myself in 2015, and then in the summer of 2016, I began formally learning at John Bryce in Tel Aviv, which is a technical college or “bootcamp”  and I am now coming up on the end of my course.

Most of the time was spent learning HTML, CSS, Javascript, AngularJS, NodeJS and PHP. Obviously learning twice a week isn’t enough to get a job on its own, so a lot of homework and personal projects need to be completed too but I’ll get to this later.

So lets see how to become a web developer without a degree…

Intro to job market in Israel

If you look at aggregator website, Mapped in Israel, there are 1765 startups in Israel. This means there is lots of work. Go to the careers page of any company based here and you’ll see an ever growing list of job roles, but one that seems to stick out again and again is either, Front End Developer or Full Stack Web Developer. And there’s a reason why.

Each company needs a portal that their customers or users can connect to. If their product is an app, service, SAAS product or IoT device, their users need to be able to see their account details or tinker with settings or even sign up or purchase the product, and this is still mostly done through a web portal be it a standalone website or Single Page application.

how to become a web developer without a degree

If you look at Glassdoor, you can see that the average salaries for a web developers in Israel are:

  • A junior developer is usually around 8 – 10k per month. 0-2 years experience
  • A mid-level developers is between 15 – 20k ils per month. 2-4 years experience
  • A senior developer is usually 25-30k + 5+ years experience

Put into international terms:

  • Junior = $32k per year
  • Mid = $65k per year
  • Senior = $100k per year

Opportunities

So there is a lot of work, that pays a good salary for Israel,  at the mid and senior level, but if you haven’t done tech in the army, or done a Computer Science degree, you have a serious lack of experience, and thus, junior positions are a bit scarce as they generally get filled by friends-of-friends or graduates.  So this is when the question “How to become a web developer without a degree” really becomes real.

The age old catch of “I need experience to get a job, but to get a job, I need experience.” really rings true here.

Let’s go and look for a job

What I was looking for?

I started to look for a job at about month 5 of my studies, so I had to work to stand out. This meant opening a Github profile and just working on projects. I also threw together a personal website where I could use as a gallery for all the projects I had worked on and have live demos.

I decided to mainly apply for Front End developer roles as these seemed to be the most prevalent, and most had a preference for Nodejs or php knowledge.

But I mainly chose to go after Front end roles because I once read a piece that said in tech, try not to be a jack of all trades when you are starting out.

Get really good at one thing and always be looking to learn more. During my studies I enjoyed the front end work more than the back end stuff so this is what I want to focus on in the early stage of my career.

This is a good footnote, that even though I was looking for a Front end job, a really good knowledge of fullstack and back end technologies really went a long way.

The CV

My lecturer at my bootcamp gave some great advice about putting a CV together. To break it down into the most basic steps:

  1. Anywhere you have worked in the past related to tech – list it.
  2. List projects and the technology used to create them.

I also linked to my personal website, Github profile and Linkedin profile. The CV was a bit bare but I started to send it out.

Where?

The top places to look for a job in Israel is Alljobs and Drushim. These are the top 2 job boards. You also have a number of Facebook groups that allow users to post job roles.

These groups are mainly populated by recruiters with vague and often nonsensical posts, but there are some diamonds. Thank god for the search feature.

You also have plain old networking with you social circle and sites like meetup. As an immigrant, my in person network is pretty small, and most of the meetup events were held on days that I was learning, so I didn’t really tap into this avenue.

What to look for?

So as “Junior developer” doesn’t really appear in a job role title, you need to read between the lines to find the right roles. This means looking for jobs that are advertised with 1 or 2 years experience.

The CV Stage

Because of this, we now enter a pure numbers game. In the interest of full disclosure, I kept a running total of how many CVs I sent out. Over a 3 month period, I sent out 67 CV’s through various job boards and personal emails to job posts I saw on Facebook and jobs on Linkedin.

I saw a great post on reddit about how to make a great CV that can use SEO principles to get through software that reads CV’s. 

Out of the 67 CV’s sent, I only got 6 responses! Of these 6 responses, I had 4 phone interviews. So let’s delve into the interview process.

Interviewing

Phone screen

Most phone screens were conducted by HR personnel who opened up with a brief introduction of the company and what the job role would be.

I’m not joking when I say that every call I got was when I was at work, so it took a few minutes to focus in and find a quiet place to talk. One of the calls was with a team leader who got into some serious questions about Javascript and jQuery as those were the main technologies that the company used, but the other calls were more of just getting to know you and see if you can have a conversation. Of 4 phone screens, I ended up with 3 face-to-face interviews.

In person

My first interview was a disaster. It was for a user analytics company whose product was Javascript and relied very heavily on jQuery. I read up about the company before the interview and went over potential questions that could be asked about Javascript.

I arrived at the office about 10 minutes early, was welcomed in, sat in the kitchen with a coffee and waited another 30 minutes. The company were on the 18th floor of a new building so the view was nice.

The Tech Interview

I was interviewed by the team leader who I spoke to on the phone and another team leader for about 40 minutes. This section of the interview went fine, but they then asked me to do a test. I knew this was coming but I really wasn’t prepared for the level of work that this company was doing. After 90 minutes of reading Stack Overflow and writing some atrocious code, the interviewer came in, we talked for a few minutes about the task and then I was off. On the way out of the office the interview gave the old spiel of “we’re still interviewing others but we’ll be in touch”. 2 weeks later I got a nice copy and paste email saying they had gone with somebody else.

I wasn’t disappointed, instead I was happy. I had gotten an interview for a front end developer role with only 6 months experience and learned what my level was.

One thing to note at this point is the importance of personal projects. As I mentioned before, having a Github profile in 2017 is one of the most important things in the job seeker’s toolkit.

Every interview I had, I talked about projects I had worked on and why. What problems I was trying to solve and how I went about them. Even if your code is rubbish it shows to the interviewer that you have a passion and a willingness to take a chance and try something new.

The successful interview

After another couple of uneventful interviews where either I just wasn’t at the right level or the job role wasn’t what I wanted, I landed an interview at small startup.

The first interview was rather quick and I was asked to complete a task at home the next day. I completed the task and sent it back. Nothing. Whatever, I’ve been here before. Then a phone call. “Ben, they we’re impressed by your task and we’d like to invite you in for a second interview”. I was ecstatic. The second interview was extremely hard, with 2nd year computer science topics being covered. And once again I didn’t hear anything for a week. “Ben, can you come in and meet HR for a face-to-face?”.

After meeting HR and the chief architect, I was offered the job and start next week as a Front End Developer, 8 months after starting to study web development.

Conclusion

So basically, if you follow the steps I took, you can see how easy it is and how to become a web developer without a degree. But some further tips would be:

Passion is key

Each interview and phone call that I had, the question always came up as to why I wanted to be a developer. My answer always was that I want to work in high tech and that I want to make a career of what I personally find interesting.

Personal projects

Passion leads into personal projects. Personal projects are a great way to show off what you can do. It also gives you a great way to bring up your knowledge of what languages you know.

Now the hard work begins!