The Valley of Code

/* your web
development
manual */

1:	Fundamentals
2:	HTML and CSS
3:	Tools
4:	Deployment
5:	JavaScript
6:	TypeScript
7:	More CSS
8:	More JavaScript
9:	DOM and Events
10:	Networking
11:	Browser API
12:	Server Runtimes
13:	HTTP Servers
14:	Forms
15:	Databases
16:	Libraries and frameworks

The Valley of Code

Fundamentals

Welcome to The Valley of Code. Your journey in Web Development starts here. In the fundamentals section you'll learn the basic building blocks of the Internet, the Web and how its fundamental protocol (HTTP) works.

The Internet

The basics of computer networks and protocols, introducing URLs, DNS, TCP, and UDP

0:	Introduction
1:	What is a URL
2:	What is a port
3:	The DNS protocol
4:	The TCP protocol
5:	The UDP protocol

The Web

The key concepts of the web: HTTP, what is a Web browser, and what is a Web server

0:	Introduction
1:	The HTTP protocol
2:	Hyperlinks
3:	What is a Web server
4:	What is a Web browser

HTML and CSS

This section introduces the basics of HTML and CSS: how we define content, and how we style it. There's much more about HTML and CSS and we'll learn more about both later. But here's an intro to both.

HTML

Let's learn the basics of HTML

0:	Introduction
1:	Your first HTML page
2:	Text tags
3:	Attributes
4:	Links
5:	Images
6:	Lists
7:	Head tags
8:	Container tags
9:	DEMO Using CodePen
10:	DEMO Using VS Code

CSS

Let's learn the basics of CSS

0:	Introduction
1:	Colors
2:	More selectors
3:	Cascade
4:	Specificity
5:	Units
6:	Advanced selectors
7:	Typography
8:	The box model
9:	The display property
10:	Responsive design
11:	DEMO Create a simple design

Tools

We could do nothing without good tools. In this section I introduce a few very powerful tools you will use every day: VS Code, Git, and GitHub

VS Code

VS Code is a very powerful editor with countless great features and 3rd party extensions to do basically anything

0:	Introduction
1:	The interface
2:	Opening folders
3:	Editing
4:	Search
5:	Source control
6:	Extensions
7:	Themes
8:	Recommended extensions
9:	The command palette
10:	Shortcuts
11:	Customization
12:	Terminal

Git

We use Git to save our code in snapshots that we can go back to whenever we want. And it lets people work together on code.

0:	Introduction
1:	Installing Git
2:	Initialize a repository
3:	Commit changes
4:	Branches
5:	Push and pull
6:	Working with a remote
7:	Solving conflicts
8:	.gitignore

GitHub

GitHub is the de-facto centralized store for anything related to code, based upon Git. Not just that, it is an essential tool in collaboration, project management and deployment workflows.

0:	Introduction
1:	GitHub issues
2:	Social coding
3:	Pull requests
4:	Project management
5:	Comparing changes
6:	Webhooks and integrations
7:	What happens after pushing
8:	DEMO Create a GitHub account
9:	DEMO Using GitHub desktop
10:	DEMO Using Git in VS Code

Deployment

Deployment is the process of putting your code "out there", on the Internet, for everyone else to use. We commonly work on local machines, but when it is time to release, we deploy the code on a service or cloud server.

Netlify

Netlify is a great deployment platform, ideal for simple sites.

0:	Introduction
1:	Create a Netlify account
2:	DEMO Deploy to Netlify

Vercel

Vercel is a great deployment platform, ideal for more complex sites.

0:	Introduction
1:	Create a Vercel account
2:	DEMO Deploy to Vercel

JavaScript

JavaScript is "the Web programming language" because it has one key feature: it is the only language that browsers understand. As a Web developer, it is essential that you learn this language very well.

Basics

The fundamentals of JavaScript

0:	Introduction
1:	Literals, identifiers and variables
2:	Comments
3:	The difference between let, const and var
4:	Types
5:	Operators and expressions
6:	Let's start with arithmetic operators
7:	The assignment operator
8:	Operators precedence
9:	Strings
10:	Numbers
11:	Semicolons, white space and sensitivity

Arrays

Learn how to use arrays in JavaScript

0:	Introduction
1:	Number of items in an array
2:	Create a new array from an existing array
3:	Adding an item to an existing array
4:	Adding at the beginning of an array
5:	Adding multiple items to the array
6:	Removing an item from an array
7:	Modifying an existing array without mutating it
8:	Arrays of arrays
9:	Filling an array
10:	Array destructuring
11:	Check if an array contains a specific value

Conditionals

Decisions, decisions. Conditionals are how we do something, or something else.

0:	Introduction
1:	Comparison operators
2:	`if` statements
3:	How to use `else`
4:	`switch`
5:	The ternary operator

Loops

Loops are one key control flow structure of any programming language. JavaScript provides quite a few different ways to loop.

0:	Introduction
1:	The `for` loop
2:	The `do-while` loop
3:	The `while` loop
4:	The `for-of` loop
5:	The `for-in` loop
6:	Other kinds of loops

Functions

We separate tiny portions of our code into a function so we can call this function multiple times, move it to a separate file, and much more.

0:	Introduction
1:	Function parameters
2:	Returning values from a function
3:	Arrow functions
4:	Nesting functions
5:	Immediately-invoked functions
6:	Recursive functions

Objects

Objects are a super powerful data structure we use all the time in JavaScript.

0:	Introduction
1:	How to create an object
2:	Object properties
3:	Objects are passed by reference
4:	Methods
5:	Passing objects as function arguments or returning objects from a function
6:	Accessing a property of the object inside a method using `this`
7:	Object destructuring
8:	Cloning objects
9:	Sort an array of objects by a property value
10:	Merging two objects into one
11:	apply, call, bind

TypeScript

0:	Introduction
1:	Your first TypeScript program
2:	Types
3:	Typing functions
4:	The editor helps you with type errors
5:	Running TypeScript code
6:	Valid types
7:	Type aliases and interfaces
8:	Union types
9:	Typing arrays with generics
10:	The DX of editing TypeScript
11:	There's more...

More CSS

We saw the fundamentals of CSS previously. Let's now learn more CSS features.

CSS Grid

CSS Grid is the best way to organize content on a, guess what, grid.

0:	Introduction
1:	grid-template-columns and grid-template-rows
2:	Setting columns and rows dimensions
3:	Gap between the cells
4:	Span items on multiple columns and/or rows
5:	Minimum row width
6:	Layout using grid-template-areas
7:	DEMO Example: simple grid layout
8:	DEMO Example: grid layout with header, sidebar, content and footer

Flexbox

If you need to organize items in a single row, on a single column, you might prefer using Flexbox over Grid.

0:	Introduction
1:	Align rows or columns
2:	Vertical and horizontal alignment
3:	Wrap
4:	Moving items before / after another one using order
5:	Vertical alignment using align-self
6:	Grow or shrink an item if necessary
7:	DEMO Create a layout using Flexbox

Positioning

We can use different positioning strategies in CSS. It is important you know them all well.

0:	Introduction
1:	Relative positioning
2:	Absolute positioning
3:	Fixed positioning
4:	Sticky positioning

Tailwind CSS

Tailwind CSS is a library that lets you apply CSS to your project by adding a class to an HTML element rather than writing a CSS rule in a CSS file. It is a very popular technology, I love it, lots of people love it, you might love it too.

0:	Introduction
1:	Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind

More JavaScript

We previously learned the most essential JavaScript basics, including functions, objects, arrays. Now we will learn some more.

Arrays + functions

Combine arrays, a very useful data structure, with the power of functions, to do awesome things.

0:	Introduction
1:	map()
2:	filter()
3:	reduce()
4:	sort()
5:	find() and findIndex()
6:	forEach()

OOP in JS

We learned about objects before. Now let's learn about object-oriented programming.

0:	Introduction
1:	Classes
2:	Class methods
3:	Private class properties
4:	Constructors
5:	Inheritance
6:	Prototypes

Asynchronous

These days you can rarely write a JavaScript program without thinking about asynchronous code. You must understand this deeply.

0:	Introduction
1:	Callbacks
2:	Timers
3:	Promises
4:	Async functions
5:	Chaining promises
6:	Orchestrating promises

Scope, hoisting, event loop

A bit more advanced concepts, but essentials to know if you want to write programs that run correctly as you want.

0:	Introduction
1:	Global scope
2:	Function scope
3:	Block scope
4:	Shadowing
5:	Hoisting
6:	Closures
7:	An issue with `var` variables and loops
8:	The event loop

ES Modules

Learn how to import functions and variables from other files and libraries

0:	Introduction
1:	Using import and export
2:	.mjs files
3:	Default exports
4:	Multiple exports
5:	Renaming exports
6:	Using the `script` tag

Errors and exceptions

Handling errors and exceptions is how you write programs that never crash badly but always print nice error messages in case something bad happens.

0:	Introduction
1:	Types of errors
2:	Creating exceptions
3:	Handling exceptions
4:	Finally
5:	Nested try blocks

Built-in objects

JavaScript offers a ton of useful function and built-in objects.

0:	Introduction
1:	The global object
2:	Object properties
3:	Number
4:	String
5:	Math
6:	JSON
7:	Date
8:	Intl
9:	Set and Map

More operators

There is an operator for everything. Almost.

0:	Introduction
1:	More assignment operators
2:	Logical operators
3:	Nullish coalescing
4:	Optional chaining
5:	Logical nullish assignment

DOM and Events

Using JavaScript we can "hook" into a Web page and change everything about it, and listen for events when something happens, so we can do whatever we want.

The DOM

Learn how to use the DOM APIs with JavaScript.

0:	Introduction
1:	The `window` object
2:	The `document` object
3:	Types of nodes
4:	Traversing the DOM
5:	Editing the DOM

Browser events

We can listen for any kind of event using JavaScript, including browser-initiated events, or user-initiated events.

0:	Introduction
1:	Handling events
2:	The `DOMContentLoaded` event
3:	The `event` object
4:	Mouse events
5:	Keyboard events
6:	`preventDefault()`
7:	Stopping event propagation
8:	Bubbling and capturing
9:	Form submit event
10:	Input fields events
11:	Creating custom events

Networking

The fundamentals of HTTP networking, and how to use fetch(), and Request / Response

HTTP

The protocol of the Web: Hyper Text Transfer Protocol

0:	Introduction
1:	An HTTP request
2:	HTTP Methods
3:	HTTP Status Codes
4:	HTTP Client/Server communication
5:	HTTP Request Headers
6:	HTTP Response Headers
7:	HTTPS
8:	HTTP/2
9:	HTTP/3

Fetch

How to execute network requests using JavaScript. And how to inspect the Request and Response objects.

0:	Introduction
1:	How to use Fetch
2:	Catching errors in network requests
3:	The Response object
4:	Getting the body content
5:	The Request object
6:	Request headers
7:	POST requests

Browser API

0:	Introduction
1:	Setting cookies
2:	Setting a cookie expiration date
3:	Setting a cookie path
4:	Setting a cookie domain
5:	Cookies security
6:	Updating a cookie
7:	Deleting a cookie
8:	Accessing the value of a cookie
9:	Checking if a cookie exists
10:	Inspecting cookies

Storage

0:	Introduction
1:	Session vs local storage
2:	Setting an item
3:	Getting an item value
4:	Removing an item
5:	Clearing storage
6:	Storage size limits

History API

0:	Introduction
1:	Navigating the history
2:	Add an entry to the history
3:	Modify history entries
4:	Access the current history entry state
5:	The `popstate` event
6:	The `hashchange` event

IndexedDB

0:	Introduction
1:	Loading the idb library
2:	Creating a database and a store
3:	Adding data into a store
4:	Retriving data from a store
5:	Deleting data
6:	Migrations
7:	Unique keys

Geolocation

0:	Introduction
1:	Getting the user's position
2:	Watching the position for changes
3:	If the user denies the position
4:	Adding more options

Drag and Drop

0:	Introduction
1:	Drop targets
2:	Drag events
3:	Dragging data
4:	Set / get the effect
5:	The data being transferred

Server Runtimes

Server Runtimes are tools that let us run JavaScript on the server. In this section we'll learn about Node.js and Bun. Deno is another popular server runtime, but other more niche ones exist, mostly to power specific deployment platforms. Your takeaway is that there are several ways to run JavaScript on the server. Node.js is the most popular, Bun the most up-and-coming.

Node.js

Node.js is the foundational runtime for server-side JavaScript. It was the one that created everything back in 2009.

0:	Introduction
1:	Installing Node.js on your computer
2:	How to write your first Node.js program
3:	Importing other files
4:	Using npm to install packages
5:	Using built-in modules

Bun

Bun is a new runtime for server-side JavaScript, optimized for speed and performance, and developer experience.

0:	Introduction
1:	Installing Bun
2:	Running your first Bun program
3:	Working with packages
4:	Bun's built-in features

HTTP Servers

There are quite a few lightweight libraries/frameworks that build upon Server Runtimes to provide an easy to use set of features to build HTTP servers. We can call them microframeworks too. I picked Hono as the modern, feature-rich one

Express

Express is historically the most popular Node.js framework, and while more modern alternatives exist, it is still a foundational framework you will find all the time, so it is worth learning it

0:	Introduction
1:	Introduction to Express
2:	Request parameters
3:	Send a response to the client
4:	Send a JSON response
5:	Manage cookies
6:	Work with HTTP headers
7:	Handling redirects
8:	Routing
9:	Template engines
10:	Middleware
11:	Serving Static Assets with Express
12:	Send files to the client
13:	Sessions
14:	Validating and sanitizing input
15:	Handling form data

Hono

A server-side lightweight Web Framework similar to Express but with modern features

0:	Introduction
1:	Your first Hono app
2:	The Request object
3:	Send a response to the client
4:	Manage cookies
5:	Work with HTTP headers
6:	Handling redirects
7:	Routing
8:	JSX templates
9:	Middleware
10:	Hono on Node.js

Forms

Of all the HTML tags, forms need their own section because of how important they are.

Forms 101

The basics of building and submitting forms

0:	Introduction
1:	Creating a form
2:	Submitting a form
3:	Receiving the form data
4:	Form validation
5:	More tags useful in forms

Form fields

How to use all the built-in form fields you can think of!

0:	Introduction
1:	Form submit field
2:	Specialized input fields
3:	Checkboxes
4:	Radio buttons
5:	File input fields
6:	Textarea
7:	Select
8:	Autocompleting form fields

Forms and JavaScript

How to interact with forms using JavaScript

0:	Introduction
1:	Inspect the value of an item
2:	Listen to events on input fields
3:	Intercepting a form submit event using JavaScript

Databases

We use databases to store and retrieve data dynamically. In this section we'll talk about relational databases.

SQL

Introduction to SQL, the language we use to talk to a relational database. Focusing on Postgres

0:	Introduction
1:	Using TablePlus
2:	Create a Postgres database
3:	Create a new table
4:	Add data to a table
5:	Query data with SELECT
6:	Delete data from the database
7:	Update data with UPDATE
8:	Null constraints
9:	Unique and primary keys
10:	Updating a table structure
11:	Joins

Kysely

Kysely is an awesome library to use SQL easily using JavaScript

0:	Introduction
1:	Installing Kysely
2:	Select queries
3:	Inserting data
4:	Deleting data
5:	Updating data
6:	Joins

Libraries and frameworks

UI libraries are tools that we use to abstract the browser DOM API and event handling, to help us create User Interfaces more easily.

React

Learn the most popular JavaScript library used to build UIs

0:	Introduction
1:	DEMO Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	Handling user events
8:	Managing state
9:	Component props
10:	Data flow
11:	Lifecycle events
12:	Managing forms in React
13:	Install the React Developer Tools
14:	DEMO Installing Tailwind CSS in a React app
15:	DEMO Build a counter in React

Alpine.js

Alpine.js is a great library to bring pages to life with client-side interactions, without the need to write a lot of custom JavaScript or use a more heavy UI library.

0:	Introduction
1:	Installing Alpine
2:	The basics of Alpine
3:	Events
4:	Defining data
5:	Looping
6:	Binding user input to variables
7:	Watching variables change
8:	Stores

htmx

Learn this very interesting library that lets you build dynamic Web applications with client/server communication without writing any JavaScript

0:	Introduction
1:	Why htmx
2:	The core idea of htmx
3:	Installing htmx
4:	Doing a GET request
5:	Swap
6:	POST request
7:	Targets
8:	Loading indicator
9:	Confirming actions, and prompts
10:	Triggers
11:	Request headers
12:	Response headers
13:	Events

Astro

Astro is a great tool, ideal for building websites and in particular content sites, but not limiting you to that.

0:	Introduction
1:	Your first Astro site
2:	The structure of an Astro site
3:	Astro components
4:	Adding more pages
5:	Dynamic routing
6:	Markdown in Astro
7:	Images
8:	Content collections
9:	CSS in Astro
10:	JavaScript in Astro
11:	Client-side routing and view transitions
12:	SSR in Astro
13:	API endpoints in Astro

Remix

Remix is an excellent Web Application Framework I would use when building complex React-based applications.

0:	Introduction
1:	Create your first Remix app
2:	The root route
3:	File based routing
4:	Linking your pages
5:	Styling with CSS and Tailwind
6:	Create a navigation
7:	Dynamic routes and nested routes
8:	Connecting a database
9:	Data mutations using forms and actions