Web Dev Tutorials & Projects

Below, you'll find a select few of web development tutorials and projects featured on my YouTube channel, dcode.

This list covers a wide variety of beginner, intermediate and advanced guides.

Build a Single Page Application with JavaScript (No Frameworks)
1. Build a Single Page Application with JavaScript (No Frameworks)
In this project you'll build a Single Page Application using HTML, CSS and JavaScript. The backend is written in Node.js and Express.js, and you'll be creating a frontend router from the ground up using only JavaScript (no usage of third-party lib...
How to Style HTML Tables with CSS
2. How to Style HTML Tables with CSS
In this tutorial you'll learn how to create beautiful HTML tables using a bit of simple CSS. It also features the ability to "highlight" a row, making it easy for users to see important data.
Build a Notes App with JavaScript and Local Storage (No Frameworks)
3. Build a Notes App with JavaScript and Local Storage (No Frameworks)
In this tutorial you'll be creating a Notes App using only JavaScript and Local Storage. This project is perfect if you've got some JavaScript knowledge under your belt and want to learn new ways to structure an app like this.
How to Create a Login and Sign Up Form with HTML, CSS and JavaScript
4. How to Create a Login and Sign Up Form with HTML, CSS and JavaScript
In this tutorial you'll be building a hybrid Login & Sign Up form using HTML, CSS & JavaScript. This is all very easy to do, and it's all done without a library or framework!
How to Create a Progressive Web App (PWA) with HTML, CSS and JavaScript
5. How to Create a Progressive Web App (PWA) with HTML, CSS and JavaScript
In this tutorial, you'll build a simple Progressive Web Application (PWA) for the web. Progressive Web Applications are simply web apps that behave like native applications, and are typically "offline-first" meaning we can take advantage of Servic...
Build a Kanban Board with HTML, CSS & JavaScript (No Frameworks)
6. Build a Kanban Board with HTML, CSS & JavaScript (No Frameworks)
In this tutorial, you'll build a Kanban Board from scratch using HTML, CSS and JavaScript. This doesn't require any external frameworks or libraries such as React, Vue, jQuery etc.
Simple Drag & Drop File Upload Interface with HTML, CSS & JavaScript
7. Simple Drag & Drop File Upload Interface with HTML, CSS & JavaScript
In this tutorial, you'll create a "drag and drop" file upload form using HTML, CSS & JavaScript. This makes use of the HTML Drag & Drop API.
Image Hover Text Overlay Effect with HTML & CSS
8. Image Hover Text Overlay Effect with HTML & CSS
In this tutorial, you'll create an "image hover text" effect using HTML and CSS. This is perfect for photo galleries or company websites when listing employees.
How to Create an AJAX Submit Form with JavaScript
9. How to Create an AJAX Submit Form with JavaScript
You can use AJAX within JavaScript to create a form submission that does not require a page reload or redirection. This can enhance the user experience and you'll learn that from this tutorial.
Build a Full Stack Voting App with JavaScript and Node.js
10. Build a Full Stack Voting App with JavaScript and Node.js
In this project you'll create a full stack voting app (a.k.a. poll system) with a frontend and backend. We'll use HTML, CSS and JavaScript to build the client-side (frontend) and use Node.js and Express to build the server-side (backend).
How to Easily Sort HTML Tables with CSS & JavaScript
11. How to Easily Sort HTML Tables with CSS & JavaScript
In this tutorial I'll be demonstrating how you can use a simple bit of JavaScript to sort your HTML tables - this is super easy to do and is extendable if you'd like to add your own logic to the sorting!
How to Easily Create Buttons with Icons Using HTML & CSS
12. How to Easily Create Buttons with Icons Using HTML & CSS
In this tutorial I'll be showing you how to create a button with icons using HTML & CSS. This is easily done, and can be added to your own website or project.
How to Create an Image Grid Gallery with HTML & CSS
13. How to Create an Image Grid Gallery with HTML & CSS
In this tutorial we'll be using CSS3 Grid to build an Image/Photo Grid Gallery, which you can easily add to your existing websites or apps. This is a responsive, mobile friendly solution that doesn't require too many lines of CSS.
How to Build a REST API with Node.js & Express
14. How to Build a REST API with Node.js & Express
In this tutorial we're going to take a look at how easy it is to build a simple REST API using Node.js and the Express framework. This API is going to allow users to post comments to a web server, as well as retrieve a comment once posted.
How to Extract Text from a PDF Document Using JavaScript & Express.js
15. How to Extract Text from a PDF Document Using JavaScript & Express.js
In this post we'll use Express.js and pdf-parse to extract text from a PDF document.
Build a Budget Tracker with JavaScript & Local Storage
16. Build a Budget Tracker with JavaScript & Local Storage
In this tutorial we'll be building a Budget Tracker (or Planner) using HTML, CSS & JavaScript. This is easily done using JavaScript Classes and the Import/Export syntax.
3+ Ways to Write Clean Code in JavaScript
17. 3+ Ways to Write Clean Code in JavaScript
Coding is an art, so why not make it as clean as possible? In this video I go over 3 techniques I like to implement to help make my JavaScript code easier to read and extend upon.
How to Create 3D Buttons with HTML & CSS
18. How to Create 3D Buttons with HTML & CSS
It's super easy to style 3D buttons using CSS - in this video we'll a look at how to do just that. This will work for both anchor (<a>) tags, and button (<button>) tags.
The Easiest Way to Export to CSV File in JavaScript
19. The Easiest Way to Export to CSV File in JavaScript
In this video I'll be showing you one of the easiest ways to export some JavaScript data (e.g. arrays or objects) into CSV or even a downloadable file.
Learn the JavaScript DOM With This Project - Memory Game
20. Learn the JavaScript DOM With This Project - Memory Game
The best way to learn the JavaScript DOM is to build something with it. In this video, we'll be building a memory game.
Build a To-Do List with ONLY HTML & CSS (No JavaScript Needed!)
21. Build a To-Do List with ONLY HTML & CSS (No JavaScript Needed!)
You might be asking - how is it possible to build a to-do list using only HTML and CSS? Well, CSS has come a long way 🙂
How to Add an Alert Box to Your Websites with HTML & CSS
22. How to Add an Alert Box to Your Websites with HTML & CSS
In today's video I'll be showing you how to add an alert box to your websites using HTML, CSS and JavaScript. These are available in different styles such as a success green, warning yellow or error red. Use these with your favourite framework or ...
How to Create a Dice Roll Game using HTML CSS & JavaScript
23. How to Create a Dice Roll Game using HTML CSS & JavaScript
In today's project we'll take a look at creating a dice roll game using HTML, CSS and JavaScript. This will allow you to "roll" dice in 2D, giving you a random set of dice after 1 second. This project is great for improving your CSS and JavaScript...
How to Generate Your Own Wallpapers with JavaScript
24. How to Generate Your Own Wallpapers with JavaScript
In this video we'll take a look at how we can use the HTML5 canvas to generate wallpapers using JavaScript. This is easy to do using the Canvas API, linear and radial gradients.
How to Create a Responsive Gauge Component with Vue 3
25. How to Create a Responsive Gauge Component with Vue 3
Learn how to create a gauge component using Vue 3 in this video tutorial. A gauge component like this is perfect for dashboard user interfaces or displaying data.
How to Create a Like and Dislike Button with HTML, CSS & JavaScript
26. How to Create a Like and Dislike Button with HTML, CSS & JavaScript
Learn how to create a like and dislike button using only HTML, CSS & JavaScript in this tutorial. This is great for when you want to give your website users the ability to rate something such as a post, image or video.
How to Build a Counter Component with Web Components
27. How to Build a Counter Component with Web Components
In this video, learn how to build a basic counter component with JavaScript Web Components. If you're new to web components, this is a perfect beginners tutorial to start building your own custom elements and components.