Introduction

This video provides a practical web development guide for 2024, covering various technologies and offering personal advice. The speaker has created this guide annually since 2016/2017 and includes it all in one place for easier learning and understanding.

Common Roles and Paths

The guide outlines several common roles in web development, helping viewers decide what to learn:

Web Designer: Focuses on front-end design, static websites, and basic programming knowledge. Often incorporates SEO and marketing.
Front-End Developer: Works on the client-side (user interface), using HTML, CSS, and JavaScript along with frameworks like React, Vue, and Angular.
Back-End Developer: Works on the server-side (databases, APIs), using various languages like JavaScript (Node.js), Python, PHP, C#, etc.
Full-Stack Developer: Works on both front-end and back-end development.
DevOps: Responsible for deployment, maintenance, security, and scalability of applications.

Goals and Paths

The speaker discusses various career paths:

Full-time Employment: Working for a company, offering stability and benefits.
Freelancing: Running your own business, requiring business skills and flexibility.
Startup Employment: Working for a startup, offering potential high rewards but also higher risk.
Creating a Product/SaaS: Building and selling your own software-as-a-service.
Internships: Gaining real-world experience and building your resume.

Essential Tools

Computer: At least 8GB RAM and an SSD. OS preference (macOS, Windows, Linux) depends on individual needs.
Text Editor/IDE: Visual Studio Code is highly recommended, along with others such as Sublime Text, Atom, and Vim.
Web Browser: Chrome and Firefox are most popular. Others mentioned include Edge, Safari, Brave, and Vivaldi.
Terminal: Basic knowledge is essential for using framework CLIs, npm, and Git.

HTML and CSS

HTML: Markup language structuring web page content. Focus on semantic markup and accessibility.
CSS: Styling language for web page content. Learn core properties, selectors, layout methods (Flexbox, Grid), and responsive design (media queries).

CSS Frameworks

These frameworks simplify layout creation:

Framework	Description
Bootstrap	Widely used, component-based, quick UI creation.
Tailwind CSS	Utility-first, highly customizable.
Bulma	Easy to use, good-looking components.
Materialize	Uses Google's Material Design.

SAS

CSS preprocessor adding functionality (variables, functions, mixins). Recommended if customizing frameworks like Bootstrap.

Helpful Tools

Git: Version control system for code saving, versioning, and collaboration.
Markdown: Markup language for styling text (README files, documentation).
Editor Extensions: Emmet (HTML/CSS shortcuts), Live Server (auto-refresh), Prettier (code formatting).

AI Tools

GitHub Copilot: AI pair programmer for code completion and problem-solving.
ChatGPT: Useful for learning and problem-solving (use responsibly and don't over-rely).

Design Tools and Principles

Design Tools: Figma (recommended), Sketch, Adobe XD, InVision, Canva, Balsamiq.
Design Principles: Color & contrast, whitespace, scale, visual hierarchy.

JavaScript

Programming language of the browser. Depth of knowledge depends on chosen path (front-end, back-end, full-stack).

JavaScript Fundamentals

Variables, functions, conditionals, loops
DOM manipulation (selecting and manipulating HTML/CSS elements)
Higher-order array methods (forEach, map, filter)
Fetch API (making HTTP requests)
HTTP methods (GET, POST, PUT, DELETE)
Promises and asynchronous code
JSON (data format)

WordPress

CMS built on PHP. Useful for freelancers due to quick website building and client content update capabilities. Learning PHP is recommended for customization.

Deployment

Deploying to a live server is crucial. Options for front-end projects include Netlify, Vercel, and GitHub Pages. For larger, full-stack applications, AWS or DigitalOcean are recommended.

Front-End Frameworks and Ecosystems

The speaker discusses the evolution of front-end development, from multi-page server-rendered websites to single-page applications (SPAs), server-side rendered (SSR) websites, and static site generators (SSG).

Framework	Description	Ecosystem Highlights
React	Popular component-based framework.	Create React App (SPA), React Router, Redux/Redux Toolkit/MobX/Zustand/Recoil/XState (state management), Next.js/Remix (SSR), Gatsby (SSG), UI component libraries (Material UI, Chakra UI, Styled Components), React Native (mobile)
Vue.js	Simple, performant component-based framework.	Create Vue, Vue Router, Pinia (state management), Nuxt.js (SSR), Gridsome (SSG), UI component libraries (Vuetify), NativeScript-Vue (mobile)
Angular	Full-featured, opinionated framework. Uses TypeScript.	Angular CLI (SPA/SSR/SSG), Angular Router, NgRx (state management), Angular Material (UI kit), NativeScript (mobile)
Svelte	Modern framework compiling to optimized JavaScript.	SvelteKit (full-stack framework, SPA/SSR/SSG), UI kits (SvelteStrap), NativeScript (mobile)

TypeScript

Superset of JavaScript adding static typing. Improves code robustness, readability, and maintainability.

Headless CMS

Systems allowing content creation in a user interface, generating an API for use in any front-end. Examples include Sanity, Contentful, Strapi, Prismic, and WordPress's headless capabilities.

Other Frameworks and Tools

SolidJS: Declarative UI library, similar to React.
Alpine.js: Minimal framework for adding JavaScript behavior to HTML.
HTMX: JavaScript library for creating dynamic front-ends without writing JavaScript code.
Astro: Static site generator and SSR framework, building zero JavaScript by default.
StencilJS: Toolchain for building reusable web components.
JSDoc: API documentation generator, can add types to JavaScript code.

Web APIs

Browser APIs to be familiar with:

Canvas API (drawing graphics)
Geolocation API (user location)
Web Storage API (local/session storage)
Web Workers API (background threads)
WebSockets API (real-time communication)
Web Audio/Video APIs (audio/video manipulation)

Testing

Ensuring application reliability. Common types include unit testing, integration testing, and end-to-end testing. Popular JavaScript testing frameworks/libraries include Jest, Mocha, Cypress, and Enzyme.

Advanced Front-End Development

Fluency with a front-end framework, tooling (npm, CLIs, bundlers), server-side rendering (SSR), static site generators (SSG), and headless CMSs.

Back-End Development

Requires a server-side language, framework, understanding of databases (relational and NoSQL), ORMs, authentication (cookies/sessions, JWT, OAuth), REST APIs, GraphQL, and deployment.

Server-Side Languages

JavaScript (Node.js, Bun.js, Deno)
Python
PHP
Go
C#
Java
Ruby
Rust
Elixir

Back-End Frameworks

Frameworks are categorized as either opinionated (high-level, with many built-in features) or unopinionated (minimal, giving developers more freedom).

Opinionated/High-Level Frameworks

Node.js: NestJS, AdonisJS
Python: Django
PHP: Laravel, Symfony
Go: Gin
C#: ASP.NET
Java: Spring
Ruby: Ruby on Rails
Rust: Rocket
Elixir: Phoenix

Unopinionated/Minimal Frameworks

Node.js: Express, Koa, Fastify
Python: Flask
PHP: Slim
Rust: Actix
Elixir: Plug

Databases

Relational (SQL) and NoSQL databases are discussed. Cloud databases (AWS, MongoDB Atlas, Firebase, Supabase, FaunaDB) offer easier scaling and maintenance.

Relational Databases (SQL)

PostgreSQL
MySQL
MSSQL

NoSQL Databases

MongoDB
Redis
Cassandra
Neo4j

File-Based Databases

SQLite
Markdown files
H2

ORMs (Object-Relational Mappers)

Tools simplifying database interaction through object-oriented programming. Examples include Mongoose, Sequelize, Django ORM, SQLAlchemy, Eloquent, Doctrine, Dapper, Prisma, Drizzle ORM, MikroORM, and Next.js Query Builder.

Authentication

Methods include cookies/sessions, JSON Web Tokens (JWTs), OAuth, and authentication libraries (Passport, Grant).

Serverless Architecture

Running server-side code without managing servers. Platforms include Netlify, Vercel, AWS Lambda, Azure Functions, Firebase, and Supabase. Part of the JAMstack architecture.

Deploying Full-Stack Applications/APIs

Requires a web server (Apache, Nginx). Options include Platform as a Service (PaaS) and Infrastructure as a Service (IaaS).

Bun.js

JavaScript runtime with a full toolkit (front-end bundler, test runner, package manager). Written in Zig.

DevOps

Practices combining software development and operations. Includes deployment, maintenance, containerization (Docker, Kubernetes), CI/CD (continuous integration/continuous deployment), and Infrastructure as Code (IaC).

Animation Libraries

GSAP
Anime.js
Velocity.js
React Spring
Three.js (3D)
Typed.js (text)

VR/AR

Virtual Reality (VR) and Augmented Reality (AR) are becoming more prevalent. Frameworks/libraries include A-Frame, React 360, ViroReact, ar.js, and Three.js.

Web3

The future of the web, encompassing blockchain technology, Ethereum, smart contracts, and Solidity (smart contract language).

Design Trends (2024)

Dark Mode
AI-Generated Designs
Glassmorphism
Claymorphism
Retrofuturism

Emerging Technologies

IoT (Internet of Things)
Metaverse
AI (Chatbots, etc.)

Discover content by category