Top 10 Project-Based Tutorials for Learning Javascript
💡 Interested in accessing more beginner-friendly resources for aspiring coders? Subscribe to TechTogether’s bi-weekly newsletter.
1. Intro to JavaScript on the server, and APIs
For this tutorial specifically, you will learn how to use Javascript on the backend of a web application to handle incoming user requests. You will also integrate a 3rd-party API to explore how engineers interface with external data sources.
2. Find Bigfoot: Build a Simple game to find Bigfoot using HTML, CSS and JS
Take this tutorial to: learn how to do event handling and how to create pop-up boxes in JavaScript, set a background image for a web page, and directly set the coordinates of an element.
3. How to build an HTML calculator app from scratch using JavaScript
This is an epic article where you learn how to build a calculator from scratch. They will focus on the JavaScript you need to write — how to think about building the calculator, how to write the code, and eventually, how to clean up your code.
4. Designing Animated Book Store With JavaScript, jQuery and CSS.
Learn how to animate a bookshelf using CSS grid, flex, JavaScript, and jQuery. This tutorial is great for beginners with a shared interest in design and programming.
5. Pure JavaScript — Building A Real-World Application From Scratch
Modern JavaScript Frameworks like Angular, React and Vue.js make it very easy to build complex single-page web applications. However, using those frameworks is not mandatory and you can also go with plain and pure JavaScript. This tutorial guides you through building a web application in pure JavaScript step-by-step.
6. How to build a simple URL shortener with just HTML and JavaScript
Learn how to build a simple URL shortener that does not need a database system to host it. Learn how to use, jsonstore.io. This tutorial assumes that you already know some basic HTML & JavaScript.
7. Memory Game in Vanilla JavaScript
This tutorial explains some basic HTML5, CSS3 and JavaScript concepts. We will discuss data attribute, positioning, perspective, transitions, flexbox, event handling, timeouts and ternaries. You are not expected to have much prior knowledge in programming. If you know what HTML, CSS and JS are for, it’s more than enough!
8. How to Build a Todo List App with JavaScript
If you’re not turned off by the idea of building yet another todo list app, and you’re relatively new to JavaScript and Front-End development, this tutorial is for you.
9. Creating JavaScript Animations with Anime.js
Anime.js is a very lightweight JavaScript animation engine, 14kb minified, and only 6kb gzipped. It supports all modern browsers and can practically animate anything from CSS properties to arbitrary JavaScript values. In this article, you will learn the basics of Anime.js.
10. How to Build a Simple Gantt Chart With CSS and JavaScript
Unlike the other chart tutorials, you’ll be making heavy use of JavaScript to implement various aspects of the chart. You’ll be able to use this basis as a Gantt chart template for future projects.
