Are you currently embarking on a journey to learn coding? If so, you can’t go wrong with Javascript, a language that some call one of the core technologies of the world wide web. This interactive programming language is used to create webpages and applications of all kinds, in fact, 97 percent of websites use JS on the client-side of their webpages. Given its ubiquity, it’s no surprise that Javascript Developers remain in high demand.
In order to land a role in the software or web development fields, candidates are expected to have a portfolio of their past projects to display. But, how can one prove their proficiency at the beginning stages of a career if they lack past professional experience? That’s where projects such as the ones listed here come in.
Speaking generally, there’s no better way to learn coding than with hands-on experience. Not only will playing around with these interactive projects reinforce key JS skills you need to know, but it can also be more rewarding and fun than watching a video or reading a tutorial! Plus, the finished products can serve the purpose of filling out your personal portfolio. As you level up your abilities and progress to more challenging tasks, recruiters and other interested parties can see how you’ve incorporated advanced techniques over time.
To simplify your experience, we’ve broken down the examples in this article by framework. Working with each of the frameworks listed gets progressively harder, so this should roughly outline your learning curve. The projects linked here pull from a variety of trusted sources across the web. They take multiple forms, including written, video and interactive, in order to cater to all types of learners. Hopefully, you’re able to find one on this list that suits your needs!
Vanilla Javascript Projects for Beginners
“Vanilla” is a slang term from the programming world, referring to the use of “plain” Javascript without any libraries. In other words, the projects here can be accomplished by beginners, without having to learn any additional skills beyond the basic tenets of the language. Since frameworks are essentially “prepackaged” chunks of code, mastering the vanilla variation means you’ll always understand how your frameworks are behaving and why.
Create a Countdown Clock
This basic tutorial will take you through the creation of a countdown timer, that can be used across ecommerce sites to indicate a new product launch or the exact moment a coveted item or event tickets go on sale. This covers window.setInterval(), getDate(), clearInterval() and more.
Build a Landing Page
The journey to building an entire website, starts with a single page (that’s the expression, right?) A landing page can be found across an extremely broad spectrum of sites and refers to the page in which users “land” after clicking an ad from another location on the web. This tutorial will get you well on your way towards building a site with a detailed explanation on crafting your own landing page you can interact with a save to local storage. Traversy Media, the tutorial creator has more than 1.7 million subscribers and offers the full code to work through.
Custom Video Player
All the tutorials within this Udemy course are useful, but we’re highlighting the custom embedded video player tutorial for its practicality and use of the popular HTML5 Video and Audio API. Plus, at 36 minutes, it’s definitely doable on any time frame.
Create a Grocery List
Updating and deleting items from a grocery list sounds deceptively simple, but it actually utilizes a vital skill. Create, Read, Update and Delete (CRUD) applications are an important part of full stack applications, and can be applied to tasks like editing or deleting posts on social media platforms. The tutorial provider here is freeCodeCamp which is well known for its detailed and intuitive coding videos.
Build a Platformer Game
A project you might find yourself actually using! Many popular games run on Javascript, so this project is a great way to familiarize yourself with key concepts such as object-oriented programming, loops, switch statements and OOP principles. If you’re interested in revisiting an old favorite, you can even view tutorials to recreate classics like Flappy Bird and Doodle Jump.
Vue.js Javascript Projects for Beginners
Vue.js is one of the most popular Javascript frameworks and renowned for its ease of use and lightweight nature, making it the perfect next step for beginner developers. The open-source framework specifically focuses on building user interfaces and single-page applications. The core library is extremely adoptable and integrates with other libraries, so here are some projects to get you started!
VueCalculator
Start simple with a basic four-function calculator that covers some of the major components of this adaptive framework. This tutorial covers the command-line tool Vue CLI, single file components, vue directives, custom vue events and even velocity.js integration for animation.
The RealWorld Vue Example App
RealWorld is a group that maintains repositories on GitHub explicitly designed to give beginners projects to practice on. This app, which is essentially a clone of Medium.com, adheres to the Vue.js community style guides and best practices, and demonstrates the use of a fully fledged fullstack application. Learn about incorporating methods such as CRUD operations, authentication, routing and more.
Build a Recipes App
If you’re interested in learning more about combining frameworks, or just love preparing and looking at pictures of delicious food, this could be the project for you. The app itself requires the constructor to create three elements: recipe listings, forms to add new recipes, and a detailed view of the selected recipe and utilizes vue2, vuex, vuetify and Cosmic.js frameworks.
Vue Stock Trading Game
This simple simulator game is another great introduction to the vue ecosystem, and makes use of both the framework and Vue Router routing systems. Users have an end goal of acquiring $1,00,000 with the option to buy and sell stocks from the market each “day”. Building this project will grant you hands-on experience with mixins, filters, custom directives and enter/leave transitions.
Create a Temperature Converter
Another project with a great potential to be useful in real life, especially if you frequent both sides of the pond. What’s nice about this project is that it lays out the basic elements that your UI should contain, while still allowing you to interpret the requirements however you’d like. This can serve as a great bridge for developers ready to take the next step to creating their own code. And if you’re stuck, no worries. A separate tab allows you to view more than 40 other coders solutions in order to ask questions, share feedback and compare approaches.
React Javascript Projects for Beginners
React is one of the most widely used libraries across websites and mobile applications, and definitely a tool any developer should at least consider mastering. The language is declarative, making it both easy to create programs and debug, and can interact with other frameworks and libraries. Since React is flexible and standardized to work with any back-end programming, coders and companies can use React no matter their background skills or the specifics of the tech stack they have adopted. Given that fact, why not start with one or more of these projects?
Build a Tic-Tac-Toe Game
As you can see, online games are often a great place to start with incorporating new frameworks and libraries to your coding repertoire. This tutorial from freeCodeCamp is available in article or video form and is a great place to start getting comfortable with React basics like useState(), import/export and JSX.
Design a Custom Photo Gallery
This project was created in collaboration with well-known online coding instructor Net Ninja, and covers React.js basics and fundamentals, as well as the use of the Firebase database. You’ll also learn how to create your own custom hooks in this engaging tutorial.
Create a Payment Page
Once you’ve totally mastered the landing page, you might want to dive into this project, which walks you through the creation of a payment menu page. Not only will you get experience with integrating the widely used third-party payment processor Stripe, you’ll also cover key concepts like React Icons, useRef(), useEffect(), useState() and useContext(). A must-do for anyone who might find themselves in the ecommerce space.
Create an Accordion Menu
From the same video as the project listed above, this is another example of a feature that you’ll see all over the web. Follow along and this basic, but essential menu can be completed in about ten minutes. Concepts used include React icons, useState() and map().
Construct a Spotify Clone
Build a better Spotify? That’s the claim of this one hour video tutorial from Web Dev Simplified. In addition to the fundamentals, gain experience with working with Application Programming Interfaces (API) and hooks. Although this one is more geared towards intermediate developers, you’ll be rewarded with your very own streaming app that has the ability to look up lyrics to any song you choose.
Angular Javascript Projects for Beginners
Angular is a framework and a platform for building single-page client applications with HTML and TypeScript. This is a more complex tool to work with after you’ve spent some time with the language, but once learned, it boasts a full suite of powerful features. With Angular, the same code can be deployed across multiple platforms for web, mobile web and native desktop, and resulting projects are incredibly expressive, readable and easy to develop. Here are some of the most popular projects and tutorials that will get your feet wet in the Angular world.
The HelloWorld Bare Bones Project
“Hello World” programs are about as simple as it gets. They display the output: “Hello World!” and are used to demonstrate the basic syntax of a language or framework. Considering the complex nature of Angular, this project is an excellent starting point to get a sense of the look and feel of what you need to know. In this starter pack, the npm modules, configuration, scripts, folders and routing are already in place. This app will get you up and running quickly, and ready to move on to the next stage of your developer development.
Build an Admin Dashboard Panel
This tutorial brings together several key skills to create a practical Angular dashboard completely from scratch. Within the hour you spend with this video, you’ll gain an understanding of shared modules, reusable components, routing and how to use charts within a project. This specific tutorial is an MIT-licensed solution, which grants you access to free responsive layouts and high-resolution templates.
Integrates Google Maps Within Your App
Integrating libraries is an important and common aspect of working with frameworks. This tutorial uses AGM, which is a CoffeeScript and JavaScript-based library that allows for the integration of Google Maps within Angular apps. The Github repository linked here includes several examples you can explore and additional instruction for specific tasks like calculating the distance between two positions.
Construct a Chat Application
A standard chat application consists of three main models: message, thread and user. This app makes use of Node.js, npm and the Angular CLI package. Users are walked through signing up for streams, bootstrapping the angular app, setting up the server and building the chat interface.
Create the Front-end of Your Blog
Of course once you’ve completed all your excellent projects, you absolutely need a portfolio to create a public display of all your hard work! This written project is extremely detailed and will ultimately allow you to customize your website however you see fit. Plus, it’s always impressive to tell recruiters or colleagues that you built your own site completely from scratch.
Learn More about Coding and Javascript
If you’re ready to take the next step in your coding journey beyond self-guided tutorials, a great step to consider is enrolling in a coding bootcamp. These programs are available in-person and online in both full-time and part-time capacities. In a matter of weeks or months, you’ll learn comprehensive job critical skills and be ready to land a dream career in tech! Be sure to check out our bootcamp listings or browse additional resource pages below.
