Web development has evolved significantly over the past decade. Today's developers work with sophisticated frameworks, build APIs, manage databases, and create responsive user interfaces. The ecosystem continues to grow with new tools emerging regularly.

This tutorial will get you started learning some of the most used tools and technologies of the trade. You'll learn about JavaScript, HTTP, Node, Express, JSON, SQLite, Mongo, HTML, CSS, Web Components, React, and GraphQL.

Even though there are 35 different programs in it, there are a lot of cool technologies that I am not covering. Hopefully, this material sparks your interest and you begin a journey to learn about the wonderful ecosystem built around the web.

An Animated Introduction to Web Development

To make learning web development more accessible, I have created an interactive tutorial called "An Introduction to Web Development from Back to Front." This 'book' uses annotated code playbacks to demonstrate how to build web applications step by step.

Unlike traditional tutorials that mix partial code snippets with partial explanations, code playbacks make all of the code visible with links to it in the explanation. You'll see exactly how I build up each program.

To view a code playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI tutor if you have questions. For more information about code playbacks, you can watch a short demo here.

You can access the free 'book' of code playbacks here: https://playbackpress.com/books/webdevbook

Note on Prerequisites: This is not an introduction to programming. You should have some programming experience as I won't cover basics like if statements, loops, and functions. If you've programmed before in any language, you should be able to follow along.

If you are looking for an introduction to programming, I do have other books that introduce programming in C++ and Python along with others on the Playback Press site.

Table of Contents

1. JavaScript

• Ancient JavaScript

• Modern JavaScript

• JavaScript and Types

• Closures

• Classes in JavaScript

• Promises and async/await

• More with async and await

2. The Back End: Node, Express, SQLite, and Mongo

• Node Modules and npm

• Creating Your Own Modules

• The Http Module

• Express Basics

• Returning JSON Data

• Reading and Writing Data to a JSON File

• Express and SQLite

• Express and MongoDB

3. The Front End: HTML, CSS, Bootstrap, and Express Views

• Basic HTML and CSS

• HTML5 and More CSS

• Bootstrap

• Using Views in Express

• Dynamic JavaScript

• Sessions and Password Hashing

• A Very Brief Introduction to the Firebase Cloud Firestore

• Web Components Part 1: LegendHeader

• Web Components Part 2: LegendTable

• Web Components Part 3: NewLegendForm

• Web Components Part 4: AuthBox

4. React

• Basic React

• Using Vite to Create a React App

• Using React and Express Together

5. GraphQL

• A Traditional API

• GraphQL Query Syntax

• A GraphQL Server Without a Database

• A GraphQL Server that Uses a Database

• Accessing a GraphQL Server Using fetch() and graphql-request

• Using React to Access a GraphQL Server

Get Started

I hope this animated introduction helps you grasp the fundamental concepts of web development and empowers you to start building your own web applications. Dive in, experiment, and let me know what you think!

If you have any questions or feedback, I'd love to hear it. Comments and thoughts are welcome anytime: mark@playbackpress.com

If you'd like to support my work and help keep Playback Press free for all, consider donating using GitHub Sponsors. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!

Web Components are a set of standardized browser APIs that allow you to create custom, reusable HTML elements with encapsulated functionality. They help developers create self-contained components that can be used across different frameworks or even without any framework at all.

This tutorial assumes you have some basic programming experience and are comfortable reading and writing JavaScript. You should understand variables, functions, loops, objects, classes, and how JavaScript works in the browser. You don’t need to know anything about Web Components to get started.

The four lessons presented here are taken from my free book of code playbacks:

An Introduction to Web Development from Back to Front
By Mark Mahoney

This book is available for free on Playback Press. The book is a hands-on guide to modern web development, covering everything from core JavaScript features to building full-stack apps with various tools and technologies.

Each lesson is presented as a code playback, which is an interactive code walkthrough that shows how a program changes over time along with my explanation about what's happening. This format helps you focus on the reasoning behind the code changes.

To view a playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI tutor if you have questions. Here's a short video that shows how to use a code playback:

After this introduction, you might want to explore the official Web Components resources: MDN Web Components Guide.

Table of Contents

• Web Components Part 1: Your First Custom Element

• Web Components Part 2: Data Communication

• Web Components Part 3: Custom Events

• Web Components Part 4: Building a Complete App

• React vs Web Components Comparison

Web Components Part 1: Your First Custom Element

This first lesson introduces building user interfaces using Web Components, which let you bundle together HTML, CSS, and JavaScript into a single reusable element.

These elements can be treated just like built-in HTML elements such as h1, div, and img. They're particularly useful when you want to break a page into smaller, self-contained, and reusable parts like headers, tables, or forms, while keeping the code for each organized and isolated.

In this playback, you'll learn:

• How to create a JavaScript class that represents a custom HTML element

• How to access the attributes of the web component

• How to create and use a web component in HTML

The lesson focuses on creating a LegendHeader component that can be reused throughout a web application. You'll see how custom elements can have attributes just like regular HTML elements (such as src in an img tag), and how these attributes can be changed from JavaScript code, triggering methods in response.

View the playback here: Web Components Part 1- LegendHeader

Web Components Part 2: Data Communication

Building on the previous lesson, this playback demonstrates how to create multiple components that share data. I'll enhance the LegendHeader component to display the count of legends being tracked, and add a new LegendTable component that displays all the CS legends in a database using an HTML table.

A key concept introduced in this lesson is having a top-level element hold the web app's data and letting it communicate changes to the components that rely on it. This approach makes component management more organized and maintainable.

In this playback, you'll learn:

• How to create and work with multiple components

• How to set up and use 'observable attributes' in a web component

• How a top-level element can manage data and inform components when data changes

View the playback here: Web Components Part 2- LegendTable

Web Components Part 3: Custom Events

This lesson expands the application by adding a NewLegendForm component that allows users to add new legends to the database. The playback introduces the concept of custom events that 'bubble' up through the DOM, enabling top-level elements to control requests for data.

You'll learn why it's often better for components not to manage app-wide data themselves. Having a top-level element manage the entire web app's data makes components simpler and more reusable, as they don't need to know about each other or communicate directly.

In this playback, you'll learn:

• How components can generate custom events to request data instead of managing it themselves

• How a top-level element can listen for events and handle them

• How a top-level element accesses data and passes it to components that need it

View the playback here: Web Components Part 3- NewLegendForm

Web Components Part 4: Building a Complete App

In this final lesson, I bring everything together to create a complete application with authentication. I'll add a new AuthBox component and implement a light authentication system so that only registered, logged-in users can add new legends to the database.

The playback uses sessions on the server to control user access and reinforces the importance of centralized data management in component-based architecture.

In this playback, you'll learn:

• How to implement user authentication with a web component

• How to integrate all components into a complete, functional application

• Best practices for data management in component-based web applications

View the playback here: Web Components Part 4- AuthBox

React vs Web Components Comparison

Some of the main differences between React and web components can be summarized like this:

Wrapping Up

These four lessons cover the fundamentals of Web Components, but there's much more to explore. Web Components provide a standards-based way to create reusable elements without the need for external libraries or frameworks, making them particularly valuable for building maintainable and portable code.

If you found this format helpful, explore the rest of the book to see how full web apps are built from scratch using modern tools and approaches.

Web Components represent just one approach to component-based web development. Keep building, keep reading, and try out the other playbacks when you're ready to go further.

If you have feedback about the playbacks I'd love to hear from you. You can reach me here mark@playbackpress.com.

If you'd like to support my work and help keep Playback Press free for all, consider donating using GitHub Sponsors. I use all of the donations for hosting costs. Your support helps me continue creating educational content like this. Thank you!