Aside from the educational value of building projects, there are practical reasons to build projects. Perhaps the most important reason is to build a portfolio of work that potential employers or recruiters can use to assess your skills and learning progress.
When it comes to portfolios there are actually two types of portfolios I'd recommend that you build. The first type of portfolio is a GitHub presence. Your GitHub code repositories might be the deciding factor when it comes to getting your first job. If the employer is a technical employer you're interview might go something like this:
"Hi. Please sit down. Nice to meet you. Let's see your GitHub."
Keep in mind that you want your GitHub to not only have correct, well-formed code, but you want to show a project history with recent updates and inclusions. It's a turn-off to employers to see a GitHub repository that hasn't been touched in 90 days.
But, not every employer is technical. You may be applying to be the web developer at a small manufacturer or small distributor. (I once spent four months building an e-commerce presence from scratch for an artisanal pet food company.)
When you're talking to a non-technical employer or business owner, they're not going to know a GitHub from a peanut butter sandwich. That's why it's also important to have a web-based portfolio as well. Your web-based portfolio should include the same projects as your GitHub, but, in a consumer-friendly format.
Each project should be described well, and have a link to the working project so a site visitor can see how it works.
These projects are primarily HTML and CSS driven but can be augmented by CSS. You may want to include these projects if you are interested in front-end development or designer positions.
Responsive Design allows you to create content that is usable and looks good across the array of screen sizes and resolutions used today.
For this project, find a long-form, like an admissions form for a hospital, or a registration form for a summer camp.
A beautifully designed and functional form from UXProject.com.
Do your research before starting this coding project and look at some excellent forms on commercial websites. "Steal" ideas that you like and incorporate them into your form. Remember, that with forms, usability, and optics count! You need a form that looks good and is easy to use.
Restaurant websites are a great place to exercise your creative chops. This is another type of site where optics matter. You want to create a site that is as appetizing as the food.
Many restaurants have terrible websites. I'd recommend starting with a number of local restaurants sites and find one that you'd like to redesign. For the purpose of privately redesigning the site, it's probably ok to use the site photos, but, if you're uncomfortable you can ask the restaurant owner or manager if it's okay to do.
New Haven, Connecticut's Union League Cafe has a site that is both beautiful and functional.
Photo gallery sites can look really fantastic and can also include some neat functionality. They are a great addition to your portfolio of work. Most important is to find a pleasing way to show off the photos. The photos themselves are the star of your site layout.
For this project, you can create a gallery of your own photos, or, use free stock photos from a site like Pexels.com. (Of course, make sure you aren't using copyright photos with permission).
James Maher Photography offers a beautiful example of photo galleries. This one is of New York City Photos.
The web is a vehicle for commerce, so it's not a bad idea to show off your chops by creating a high-converting sales page and placing it in your portfolio.
There dozens of layout ideas on the web for high-converting sales pages. Like with all sites, the layout must be clean and usable, while providing the credibility necessary for the user to take out their credit card.
If you are trying to work within eCommerce, a strong sales page in your portfolio is a requirement.
To-Do List applications are CRUD apps. CRUD stands for Create, Retrieve, Update Delete. CRUD refers to most apps that keep records, similar to a database. To-do list apps are a great place to start with CRUD apps because the records are very simple-- they consist of a To-Do list item and, perhaps, a date. You should also have a status field that records whether or not a To-Do list item has been completed.
With this type of app, you have to store data in the browser. You can use the browser's localStorage object or a storage library like localForage to store the individual To-Do items. Be sure to use a CSS framework to ensure that your app is responsive and looks good.
The number of CRUD apps you can develop and place in your portfolio is limitless. This a great area to be creative and have fun!
There are hundreds of free API's that you can build projects around. Since service-based architecture is so popular, it's important to show that you understand how to work with APIs in your portfolio.
These projects can be a lot of fun. You can build a beer-pairing app with the Punk API which suggests beer to consume with your food choices. The OpenWeatherMap API has weather forecasting and conditions information that can be used as the basis for your app. The free tier offered for the OpenWeatherMap API offers plenty to power your portfolio application. Transit apps are also an option and can be a great deal of fun to build.
Game development is not easy.
Deadswitch 3 is a cool multiperson 2d shooter game built with PhaserJS.
It's hard to remember life before geolocation and mapping applications. I have some vague memories of being in the back of the car as my mother and father argued looking at a gigantic folding map.
I can't remember the last time I asked for directions.
Geolocation and mapping applications are a large application category and working with the Google Mapping API and Google Geolocation API you can get a lot done!
Of course, having mapping apps in your portfolio is almost always impressive. It shows that you can work with a professional level API and massage the API results into a useful application.
If you want to get started, here's a Google Maps Tutorial I created that uses Long Island Railroad geolocation data to create a map of all the stations in the LIRR system.
The types of geolocation apps you can do are limited only by your imagination. You can start with local mapping apps-- Perhaps a map showing where all the local restaurants are and then add more features with each iteration of development.
Often, full-stack apps will include a database like SQLite or mySQL. These apps are usually robust CRUD apps and while complex, are a great deal of fun to develop.
Quiz Show Project Application
This is another straight forward full-stack application. Create an administrative panel where an administrator can store questions and answers. Make sure they have the ability to delete and update questions that are already stored in the database.
On another page build a "Quiz Show" page where a subset of the questions are randomly selected, asked, and the score is kept.
This type of application that has both a standard user interface and an administrative interface is another great addition to your portfolio. You can build in layers of complexity with each iteration of application development. You can add features like question categories and categorized quizzes, multiplayer options, or the ability to play an opponent over the internet.
What project ideas do you think would be good for beginners? Are there any projects that you've completed yourself? Please leave your answer below!
Before you go, I want to offer you the opportunity to sign up free training content.