Web Development In 2024 – A Practical Guide

Learning From Youtube Channel: Traversy Media
Video: Web Development In 2024
Thank you!

Timestamps:

00:00:00 – Intro
00:01:12 – About This Guide
00:02:43 – Developer Roles
00:07:15 – Developer Goals
00:11:38 – Essential Tools
00:16:02 – HTML & CSS
00:18:35 – CSS Frameworks
00:22:28 – Sass
00:24:17 – Other Helpful Tools
00:29:59 – Design Principles
00:31:34 – JavaScript
00:34:00 – WordPress
00:35:54 – Basic Deployment
00:38:46 – Checkpoint #1
00:41:49 – Where To Next?
00:45:12 – Evolving Frontend Architecture
00:49:05 – Frontend Frameworks
00:49:33 – React
00:52:17 – Vue
00:54:05 – Angular
00:56:30 – Svelte
00:58:32 – React Ecosystem
01:06:14 – Vue Ecosystem
01:10:00 – Angular Ecosystem
01:12:50 – Svelte Ecosystem
01:15:11 – TypeScript
01:16:36 – Headless CMS
01:20:03 – Other Frontend Tools
01:24:23 – Web APIs
01:27:10 – Testing
01:29:16 – Checkpoint #2
01:30:49 – Server-Side Language
01:42:29 – Server-Side Framework
01:53:50 – REST API
01:54:37 – GraphQL
01:56:09 – Databases
02:04:27 – Database ORMs
02:09:14 – Authentication
02:12:03 – Serverless Architecture
02:13:54 – Full Stack Deployment
02:17:09 – Bun.js
02:18:36 – Checkpoint #3
02:20:25 – Containerization
02:23:00 – Web Assembly
02:24:15 – Mobile Development
02:27:18 – Progressive Web Apps
02:28:53 – Desktop Apps
02:31:56 – Design Trends
02:34:12 – IoT & Metaverse
02:35:03 – Artificial Intelligence
02:36:50 – DevOps
02:38:00 – Animation
02:39:50 – VR & AR
02:40:58 – Web3 & Blockchain
02:42:37 – Outro

ABOUT THIS GUIDE

Youd do NOT need to learn everything. It’s like a restaurant menu. You make choices from the selections
This is NOT a latest trends video. It includes just about every popular technology used today in web development
I keep everything objective for the most part, but I will share my opinions and preferences from time to time

PLANNING

ROLES FOR WEB DEVELOPERS

The first step is to figure out whick type of web developer that you want to be

WEB DESIGNER
Focused on creating eye-pleasing websites with limited dynamic functionality. May use no-code tools and CMS like WordPress.
FRONTEND DEVELOPER
Focused on client-side websites and web apps. In addition to HTML/CSS, they need to know a lot of JavaScript and most likely a frontend framework.
BACKEND DEVELOPER
Focuses on the server-side functionality of a website or web app. Many programming languages to choose from. Database experience as well.
FULL STACK DEVELOPER
Works on both the client-side and server-side to create more complex applications. May focus more on one side than the other.
DEV OPS ENGINEER
Responsible for the deployment & maintenance of applications and the server that they run on.

PLANNING

GOALS & PATHS OF WEB DEVELOPERS

Figure our which path you would like to take once you gain the skills

FULL TIME EMPLOYEE
Work as a developer at a company. Salary can vary greatly depending on the company and where you live.
FREELANCER
Work for yourself and directly with clients. You can work as an individual for as an agency. You could niche down and work with a certain industry.
STARTUP
Can be risky but has the potential to be very rewarding, especially if you were on of the first employees.
CREATE A PRODUCT/SAAS
Work on your own product or Software-as-a-service. This is great as a secondary goal for people that have a lot of skill.
INTERSHIPS
Internships offer real-world experience and can be a great option to get you going in the industry.

WD FE BE FS DO

ESSENTIAL TOOLS

Operating System

MacOS
Windows
Linux
Chromebook

Pick One

Text Editors & IDEs

VS Code
Sublime Text
Vim
Atom

Webstorm
PHPStorm
PyCharm
Eclipse

Pick One

Web Browser

Chrome
Firefox
Edge
Safari
Brave
Vivaldi
Polypane

Pick One

Terminals

MacOS Term
iTerm2
Windows Term
WSL
Git Bash
Linux Term
Alacrity
Tilix

Pick One

WD FE FS

HTML & CSS

Semantic markup (<header>, <footer>, <main>, etc)

Accessiblility, common tags & attributes

Basic CSS Properties, box model, specificity

Units of measurement (px, rem, em, vh, vw)

Layout methods (flex & grid)

Responsive layouts & media queries

WD FE FS

OPTIONAL

CSS FRAMEWORKS

BOOTSTRAP

Widely used & large community
Component based for rapid development
Responsive grid system
Useful JavaScript widgets

TAILWIND CSS

Very popular
Utility-based framework
Create very customized layouts
Write almost no custom CSS

BULMA

Extremely customizable
Easy-to-use classes
Fast & very small file size

MATERIALIZE CSS

Uses Google’s Material Design
Lots of components
Useful JavaScript widgets

WD FE FS

OPTIONAL

SASS

Pre-processor for added CSS functionality

CSS variables, functions, mixins

Nesting & inheriting styles

Modularize your CSS

Community and ecosystem

Easier theming

WD FE BE FS DO

OPTIONAL

OTHER HELPFUL TOOLS

Git Version Control

Basic Commands
Push To Remote
Github, Gitlab, Bitbucket
Markdown

Editor Extensions

Emmet
Live Server
Prettier
Learn Shortcuts

AI Tools

Github CoPilot
Cody
TabNine
ChatGPT

Design & Mockup

Figma
Sketch
Adobe Products
InVison
Canva
Balsamiq

WD FE FS

OPTIONAL

DESIGN PRINCIPLES

COLOR & CONTRAST

Use of color/hue/shades
Color palette choices
Difference in brightness between elements
Text readability

WHITESPACE

Empty space between elements (Negative space)
Know when there is too much or too little space
Improve readability

SCALE

Size and proportion of elements within a design
Text, images and other visual elements
Should be proportionate to each other

VISUAL HIERARCHY

Arrangement and presentation of elements
Guide the user’s attention to the most important areas
Helps user navigate your website

WD FE BE FS

JAVASCRIPT

The amount of JS to learn depends on your goals

Fundamentals: functions, loops, conditionals

DOM (Document Object Model)

Hight order array methods (forEach, map, filter, etc)

Fetch API, Promises, Async Await

JSON & HTTP basics

OPTIONAL

WORDPRESS

Great for freelancers & agencies

Build websites quickly with little to no coding

Clients can update their content

Tons of themes & plugins (free & paid)

I always recommend learning PHP

Huge community

WD FE BE FS DO

BASIC DEPLOYMENT

Make Your Projects Live
Deploy your websites and make them live for others to use.

Frontend Hosting Services
Services like Netlify and Vercel are great for frontend projects that do not require a server to run.

Domain Names
Purchase domain names and link to your hosting account via DNS.

SSL Certificates
All live projects should use HTTPS/SSL. Many services include SSL by default. “Let’s Encrypt” offers free SSL.

NETLIFY	VERCEL	GITHUB PAGES
HOSTINGER	BLUEHOST	NAMECHEAP (DOMAINS & SSL)

UP TO THIS POINT

FOUNDATIONAL FRONTEND DEVELOPER OR WEB DESIGNER

Dev Environment & Workflow
Fluent with a text editor and extensions, Git & Github, local dev server, etc.
Create Statci Websites
Create responsive layouts with HTML & CSS. You should also know some basic design principles.
Dynamic Pages
Add some basic dynamic functionality such as modals, popups, form validation, etc.
HTTP Requests
Use the fetch API to make requests to JSON apis and update data on a web page.
Basic Website Deployment
Deploy frontend projects to a hosting service such as Netlify or Vercel.
CSS Framework (Optional)
Learn a CSS framework to make styling your websites easier and more efficient. Sass is also an option.
WordPress (Optional)
Create dynamic websites with WordPress. This can be beneficial for freelance work.

PLANNING

WHERE TO NEXT?

WEB DESIGN

Get better at CSS
Learn more design
WordPress or other no-code tools
Freelance / Agency
SEO skills

FRONTEND MASTERY

Frontend framework
Get Better at JavaScript
SPA, SSR & SSG
Frontend tooling
TypeScript

BACKEND / SERVER

Server-side language (Node.js, PHP, Python, C#, etc)
Server-side frameworks
REST APIs & HTTP
Database & ORM

FE FS

EVOLVING FE ARCHITECTURE

TRADITIONAL MULTI-PAGE

Each page is rendered with separate HTML pages

UIs were not very fast or dynamic

SPA (SINGLE PAGE APPLICATION)

Single HTML page loads and the UI is bundled into JS

Fast UIs but page loads suffer & bad SEO

SSR (SERVER-SIDE RENDERED)

Pages/components load on the server but also have dynamic UIs

Meta frameworks like Next.js & Nuxt.js

SSG (STATIC SITE GENERATORS)

Builds websites into static HTML files and also has dynamic UIs

Static site generators like Gatsby, Next & Gridsome

FE FS

FRONT-END FRAMEWORKS & ECOSYSTEMS

REACT

VUE

ANGULAR

SVELTE

FS FS

REACT

VUE

Rising in popularity

Focus on Performance & simplicity

Easy to use template syntax

Good sized ecosystem

Easy learning curve

Min-range performance & bundle size

FE FS

ANGULAR

Popular in enterprise business

Full-featured (router, http, services, animations)

Uses TypeScript by default

SSR & SSG built into the CLI

Hard learning curve

Relatively larger bundle size, but still fast

FE FS

SVELTE

Compiler that builds to optimized vanilla JS

Extremely fast and lightweight

Components are clean and very vanilla-JS like

Easy learning curve

Still new and not a ton of jobs

SvelteKit offers SSR, pre-rendering, routing, etc

REACT ECOSYSTEM

Create React App

CLI To Build App
Zero Configuration
Built on Webpack
Dev Server With Hot Reload

React Router

Declarative Routing
Nested Routing
Route Matching
Route Parameters

State Management

Context API & Hooks
Redux / Redux Toolkit
MobX
Zustand

Next.js & Remix

SSR / Meta Frameworks
Performance & SEO
File-Based Routing
React Server Components

Gatsby

Static Site Generator
Extremely Performant
Good for SEO
GraphQL Data Layer

UI Kits / Libraries

Material UI
React Bootstrap
Chakra UI
Styled Components

React Native

Native Mobile Apps with React
Cross-Platform
Single Codebase

Other Tools

React Query, SWR
Formik, React Hook Form
React Testing Library, Vitest
Emotion, React Animations
React VR, React360

VUE ECOSYSTEM

Create Vue / Vite

CLI To Build SPAs
Zero Configuration
Built on Vite
Hot Reload

Vue Router

Expressive & Configurable
Multiple History Modes
Component-based Config
Fine-grained Control

State Management

Provide / Inject
Pinia / Vuex
XState
Harlem

Nuxt.js

SSR / Meta Framework
Performance & SEO
File-Based Routing
Data Fetching on Server

Gridsome

Static Site Gnerator
Extremely Performant
Good for SEO
GraphQL Data Layer

UI Kits / Libraries

Vuetify
Bootstrap Vue
Quasar
Buefy

NativeScript-Vue

Native Mobile Apps with Vue
Cross-Platform
Single Codebase

Other Tools

TanStack / Vue Query
Vue Test Utils
Native Animations
Vue VR

ANGULAR ECOSYSTEM

Angular CLI

CLI To Build SPAs
Run, Build & Scaffold Apps
Enable SSR
Dev Server With Hot Reload

@angular/router

Built-In Routing Service
Nested Routing
Route Guards
Router Animations

State Management

Built-In Services
NgRx
NGXS
Akita

Built-In SSR & SSG

Included with Angular & CLI
CommonEngine Rendering
Formerly Angular Universal
SSR & Prerender for Static

UI Kits / Libraries

Angular Material
NG Bootstrap
PrimeNG
Clarity

NativeScript-Angular

Mobile Apps with Angular
Cross-Platform
Single Codebase

Other Tools

TypeScript
Angular Fire (Firebase)
Formly
Built-In Testing
Built-In Animations

SVELTE ECOSYSTEM

SvelteKit

Built SPA, SSR & SSG
Router, images, Adapters
PWA Support
Dev Server With Hot Reload

State Management

Context API
Writeable Stores
Readable Stores
Zustand

UI Kits & Libraries

Flowbite Svelte
Svelte Headless UI
Smelte
Smeltestrap

FE BE FS

TYPESCRIPT

Superset of JavaScript

Adds static typing and other features

Makes code more robust and descriptive

Less prone to errors

IDE Intellisense

Learn JavaScript first!

WD FE BE FS

HEADLESS CMS

SANITY.IO

Hosted solution
Generates REST & GraphQL
Scalable & used by large companies

PRISMIC

Hosted solution
Generates REST & GraphQL
Well structured content model

CONTENTFUL

Hosted solution
Free for personal projects
Lots of features & extensive integration

HYGRAPH

GraphQL APIs
E-commerce capabilities
Great for large projects

STRAPI

Open-source & self hosted
Built on top of Node.js
Generates REST & GraphQL APIs

WORDPRESS

Familiar WordPress interface
Full headless capabilities
Plugin ecosystem

WD FE FS

OTHER USEFUL FRONTEND TOOLS

SOLID JS

Declarative UI library similar to React
Reactive rendering
Fairly easy to learn

ASTRO

Static & SSR websites
Can use components from React, Vue, Svelte as well as Astro components
Create API endpoints

ALPINE JS

Minimal framework for dynamic markup
More like a library like jQuery
Adds interactivity without having to use a full frontend framework

STENCIL

Build reusable, scalable component libraries
Compiler that generates web components
Use in any framework

HTMX

Dynamic web pages, write no JavaScript
Uses special attributes like ‘hx-get’
Make HTTP requests and update the DOM from within the HTML

JSDOC

API documentation generator
Scans for @JSdoc tags
Some devs moving from TS to JSDoc

FE FS

WEB APIS

Canvas: Visualization, animation, games

Geolocation: User location data

Web Storage: Store local data in browser

Web Workers API: Run scripts in background

Web Sockets: Real-time communication

Audio/Video APIs: Create & manipulate audio/video

FE BE FS DO

TESTING

Depending on your goals, testing may be something that you want to get into

Every language has testing libraries

JEST

MOCHA

CYPRESS

ENZYME

TYPES OF TESTING

UNIT TESTING
This type of testing pertains to individual units of code. This is the most common type in web development.
INTEGRATION TESTING
Integration testing is the process of seeing how different elements of your application work together.
END TO END TESTING
Process of testing your entire application from start to finish.

UP TO THIS POINT

ADVANCED FRONTEND DEVELOPER

Frontend Framework
Fluent with a frontend framework like React, Vue, Svelte or Angular and their ecosystems.
Frontend Tooling
NPM and CLI tools, module bundlers like Vite and Webpack.
Server-Side Rendering
Create server-rendered pages. Next.js, Remix, Nuxt.js, SvelteKit, Angular SSR.
Static Site Generators
Generate fast static websites. Next.js, Gatsby, Astro, Gridsome, etc.
Headless CMS (Optional)
GUI tools to create REST & GraphQL APIs. Sanity, Strapi, Contentful, etc.
Additional Tools (Optional)
Maybe learn some additional frontend tools such as TypeScript, Alpine.js, HTMX.
Web APIs
Understand some of the common APIs that are available in the browser. Canvas, speech, geolocation, etc.

BE FS

SERVER-SIDE LANGUAGES

JS / NODE

High performance (I/O)
Built on V8 JS engine
Scalable & used by large companies

PYTHON

General purpose, good for web
Ease of learning & readability
Great frameworks available

PHP

Designed for web development
Lots of freedom
Templating within HTML

GOLANG

High performance & efficiency
Vast standard library
Security & scalability

C#

Robust OOP language
.NET ecosystem
Great performance

JAVA

General purpose OOP language
Popular in business enterprise
Been around a long time

RUBY

Very readable and clean
Ruby Gems
Rapid development

RUST

Good for specific web dev
Ease of learning & readability
Great frameworks available

ELIXIR

Functional language runs on Erlang
Very scalable & fault tolerant
Real-time applications

Which programming, scripting, and markup languages have you used in the last 12 months?

JET BRAINS – Developer Ecosystem

BE FS

SERVER-SIDE FRAMEWORKS

JS / NODE

Optinionated: Nest, Adonis
Minimal: Express, Koa, Falstify

PYTHON

Opinionated: Django
Minimal: Flask

PHP

Opinional: Laravel, Symfony, CodeIgniter
Minimal: SlimPHP

GOLANG

Opinionated: Beego, Revel
Minimal: Gin, Chi, Echo

C#

Opinionated: ASP.NET MVC, Blazor
Minimal: Nancy

JAVA

Opinionated: Spring Boot, Play
Minimal: Spark

RUBY

Opinionated: Ruby On Rails
Minimal: Sinatra

RUST

Opionionated: Rocket, Actix
Minimal: Wrap

ELIXIR

Opionated: Phoenix
Minimal: Plug

FE BE FS

REST APIS

Representational State Transfer

HTTP methods (GET, POST, PUT, DELETE)

HTTP status codes (200, 400, 500, etc)

All developers shoul understand REST

FE BE FS

GRAPHQL – OPTIONAL

Query language for APIs

More targeted than REST

Optional but good to know

Backend will create, frontend will consume APIs

BE FS DO

DATABASES

RELATIONAL

Structured related data
Store data in tables and rows
SQL (Structured Query Language)
Been around a long time and still most common

POSTGRESQL

MYSQL

MS SQL

NOSQL

Never type of database
Very scalable and made for huge datasets
Documents, key-value stores
Similar to JSON documents

MONGODB

REDIS

NEO4J

CLOUD DATABASES

Hosted remotely
Easier to manage
Some services include things like auth and file storage

FIREBASE

SUPABASE

FAUNADB

FILE-BASED

Little to no setup
Good for dev, testing & small projects

SQLITE

MARKDOWN

BE FS

DATABASE ORMS

MONGOOSE

Node.js & MongoDB

SEQUELIZE

Node.js & SQL

django

DJANGO ORM

Python/Django & SQL

SQLALCHEMY

Python & SQL

PYMONGO

Python & MongoDB

ELOQUENT

PHP/Laravel & SQL

DOCTRINE

PHP & SQL

DAPPER

C# .NET & SQL

PRISMA

JS, TS, Rust, GoLang

DRIZZLE ORM

TypeScript & SQL

MIKRO ORM

PHP & SQL

KNEX.JS

Node.js & SQL

FE BE FS

AUTHENTICATION

COOKIES & SESSIONS

Session is created on the server
Cookie stored on the client
Send cookie with each request
HTTP-Only cookies

JSON WEB TOKENS

JSON object signed by the server
Sent with each request and verified by the server
Common with RESTful APIs

OAUTH

Open standard for access delegation
Log in without passwords
Use Google, Github, Twitter and many other providers

AUTH LIBRARIES

Many libraries and middleware to make this process easier
Many frameworks have these systems built-in
Libraries for password hashing such as BCrypt

FE BE FS

SERVERLESS

Run server-side code without having to manage your own server

Platforms like Vercel, Netlify, AWS Lambda, Azure Functions, Firebase, Supabase

Authentication, send emails, protect data, etc

Save money as you only pay for use-time

Big part of the Jamstack

BE FS DO

FS & API DEPLOYMENT

Web Server Technology

You will typically need a web server like Apache or NGINX.

Platform as a Service (PaaS)

Services like Render and Heroku do a TON of the configuration and setup for you.

Cloud Hosting & Infrastructure as a Service (IaaS)

Services like Linode and Digital Ocean offer a semi-managed solution

AWS and Azure offer large infrastructures of barebones servers

RENDER

HEROKU

LINODE

DIGITAL OCEAN

AWS

AZURE

FE BE FS

BUN.JS

All-In-One Toolkit for full stack JavaScript

Server-side runtime designed for speed

Includes a bundler for frontend dev

Node.js-compatible package manager

Written in the Zig programming language

UP TO THIS POINT

FULL STACK DEVELOPER

Server-Side Language
Fluent with a server-side language/technology like Node.js, Python, PHP, C#, etc.
Server-Side Framework
Know a web framework like Express, Laravel, Django, ASP.NET, etc.
Database & ORM
Relational or NoSQL database like PostgreSQL or MongoDB as well as an ORM (built in or 3rd party).
Authentication
Authentication and authorization strategies like sessions and JWT. Password hashing, etc.
REST APIs
Create RESTful APIs from scratch and fully understand the HTTP request/response cycle.
App & API Deployment
Apache & NGINX. Deploy to hosting services like Render or Digital Ocean.

BE FS DO

CONTAINERIZATION – OPTIONAL

Package software into standardized units

Same environment for everyone & everywhere

Docker is the main tool for containerization

Kubernetes is used for automating deployment, scaling and management and used with Docker

These tools are essential for DevOps

FE BE FS

WEB ASSEMBLY – OPTIONAL

Low-level assembly-like language that runs in the browser and is extremely fast

Use languages like C, C++, Rust, Go, Zig

Computationally intensive tasks in the browser

Port existing codebases to the web

Games, video editing, CAD software, etc

FE BE FS

OPTIONAL

MOBLIE DEVELOPMENT

REACT NATIVE

Use React to build native mobile applications
Single codebase for iOS and Android
Popular with many companies

FLUTTER

Build native mobile applications with Dart
Rendering engine written in C++ called Skia
Slight advantage over React Native. No bridge

NATIVESCRIPT

Build native mobiles apps with any JS framework
Set of native APIs
Not as popular as RN or Flutter, but viable option

IONIC

Mobile SDK for hybrid apps
Use HTML/CSS/JS to build mobile applications
Great for progressive web apps

FE BE FS

PWA – OPTIONAL

Web apps with a native feel on all devices

Fast, work offline, push notifications

They can be installed like a native app

Utilizes service workers for offline functionality

Use any framework that you want

FE BE FS

OPTIONAL

DESKTOP APP DEVELOPMENT

ELECTRON

Build fast desktop apps with JavaScript
Bundles Node.js/Chromium
VSCode, Atom, Postman, Discord, Slack all use Electron

TAURI

More lightweight than Electron
Built on the Rust programming language
Uses the OS native renderer

NEUTRALINOJS

Lightweight desktop apps with HTML/CSS/JS
Implements secure web socket connection
Embeds a static web server

NW.JS

Use JS (vanilla or framework) for desktop
Bundles Node.js/Chromium similar to Electron

WD FE FS

DESIGN TRENDS

Dark Mode: Sleek looking & easy on the eyes

AI Generated Designs: Midjourney, Sensei, etc

Glassmorphism: Frosted glass effect

Claymorphism: Soft, rounded shapes and pastel

Retro Futurism: Future as imagined in the past

BE FS DO

IOT & METAVERSE

Everyday objects connected to the internet

IoT-Enabled Web Applications

Real-time analytics

The Metaverse allows people to interact with one another throught a virtual environment

Could be a big part of the future of web dev

WD FE BE FS DO

ARTIFICIAL INTELLIGENCE

Tools to help aid in development (CoPilot, Cody)

Chatbots & Voice Assistants

Open AI APIs

No-Code Tools

AI Generated Design / UI

DEVOPS

Combines software development & IT Operations

Deployment & maintenance

Containerization

CI/CD Tools (TravisCI, CircleCI, etc)

Infrastructure as Code (IoC) – Terraform

WD FE FS

ANIMATION LIBRARIES

GSAP

Powerful JS animation library
Used by large companies
Can create complex animations

REACT SPRING

Library for React
Physics-based animation
Simple API for creating animations

ANIME.JS

Lightweight JS animation library
Simple & Flexible
Supports CSS properties, transforms, etc

THREE.JS

Create 3D animations
Provides high-level API for WebGL
Powerful rendering engine

VELOCITY

Known for speed & performance
Animate SVG and DOM elements
Simple syntax & good docs

TYPED.JS

Text-based animations
Typewriter effects and text transitions
Very easy to use

FE FS

VR / AR

VR – Computer generated environments

AR – Real world with generated elements

A-Frame: Web framework for VR experiences

React 360 & ViroReact

AR.js is a library for creating AR experiences on the web

FE BE FS DO

WEB3 & BLOCKCHAIN

It’s unknown where Web3 will take us

Blockchain is a very powerful technology

Ethereum, Solidity & smart contracts

Could be beneficial to learn this stuff early