Become a Founding Member-- Enroll Today for $9.95 a Month

JavaScript Projects for Beginners

 

Projects are a great way to improve skills for new developers. Often coding skills are taught in isolation-- and it's difficult to integrate different skills to solve real coding problems. That's where projects come in. In this article, we'll list a number of JavaScript Projects for Beginners that are both fun to build, and that you'll learn from.

Why Build JavaScript Projects?

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. 

I recommend JavaScript (and related technologies HTML and CSS) for building your portfolio not just because it's the most deployed language in the world, but because it's universal.  Potential employers will be able to see the result right on their laptop or mobile device.  

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

The nice thing is coding jobs, for the most part, are a meritocracy-- If you have the skills you'll get hired.  The problem is proving you have the skills.  That's why a GitHub portfolio that includes lots of JavaScript projects can be a deciding factor.

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.

JavaScript Projects for Beginners

I'm going to break these projects into three categories. The first category is projects that are mainly HTML and CSS but can be augmented by JavaScript.  The second category is primarily JavaScript supported by HTML and CSS.  The final category of JavaScript project ideas is JavaScript projects that also require back-end technology. This last category is essentially full-stack projects.

JavaScript Projects that are primarily HTML and CSS

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 Form Page Project

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.

As you develop your own form for your JavaScript Project remember to consider a logical tab order so your form is usable.  You can include JavaScript features to make the form more secure by validating data before the form is submitted.  

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 Web Site Project

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.

You can use JavaScript to add a reservation, takeout, or menuing system to your site.  If your project turns out well, you can offer it to the restaurant for their use for free. If they accept, congratulations-- You're now a professional web developer with live work on the web to show off.

Photography Website Project

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.

For your photo gallery project site, pay special attention to the navigation.  You want to create a navigation system with JavaScript that allows the user to easily navigate through the gallery.  Users will need to move from one photo to another, see a singular photo in a lightbox, and (if you're daring!) save photos that they'd like to return to later.  There's a lot to build with a photo gallery site!

High Converting Sales Page Project

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.

You can augment the page with JavaScript, using it for user data entry validation, calculating discounts and tax, or even to create an on-page shopping cart.  You can see my version of the HTML and JavaScript sales page project on YouTube.

If you are trying to work within eCommerce, a strong sales page in your portfolio is a requirement.  

Heavy JavaScript Projects for Beginners

The projects in this category have more heavy-duty JavaScript and should form the core of your project portfolio. These projects can involve working with complex API's, shopping carts, or long-term storage within the web browser.

To-Do List Application Project

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!

Client-Side API Application Project

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.


One of the projects I enjoyed building most used the Chicago Transit API.  This API-based JavaScript Project is also available on YouTube.

 JavaScript Game Project

Game development is not easy.  

However, having a game or two in your portfolio is a great way to show some of your more advanced-level coding skills.  If you want to build a game, you should start with one of the popular game libraries available for JavaScript.  PhaserJS is one of the most popular JavaScript game libraries.  Phaser does a lot of the "heavy lifting" and has modules to assist with animation, sound, gameplay, camera angles, tile maps, and more.

Deadswitch 3 is a cool multiperson 2d shooter game built with PhaserJS.

Another JavaScript game engine is Backbone.  Because Backbone runs inside of the CocoonJS Framework, you can actually turn the JavaScript game into a native Android or iOS app.  Now, that's a cool thing to have in your portfolio!

 GeoLocation/Mapping JavaScript Project

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.

 Full Stack Projects:  JavaScript + Server-Side

With the plethora of full-stack development positions available, you might consider adding some full-stack applications to your portfolio. While these are more complex than some of the JavaScript projects for beginners, full-stack apps are impressive in your portfolio and a great way to learn to develop a complete application system.

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.

Goal Tracking Application Project

This app is similar to the To-Do list app, except individual goals are being tracked.  Since you're designing this as a full-stack app, instead of storing the goal information in the JavaScript localStorage object, you'll store them in a database.

This image is from my video guide to create a goal tracking application. This tutorial uses JavaScript and PHP to build the application.  I've also used Milligram, a lightweight CSS Framework to create a responsive design.

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.

Now Go Build Your JavaScript Projects!

I hope you found some useful suggestions for building JavaScript Projects.  All of these projects should be approachable for beginners and will help you develop your coding skills while creating a portfolio of projects that might just lead to your first job in the industry.

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!

 

Close

50% Complete

Join the Framework Family

Want to learn professional level web / or mobile development skills?  Please provide your contact information below and we'll send you free training.