A Practical Guide

Web Development 2022

~ $ —created —by bradtraversy
> F i n d i n g Yo u r P a t h

Why Learn To Code?

There are many reasons to learn to code. Figure out what you want to do
with this skill.

Work as a developer for a compan

Freelance or run your own busines
Build your own products or SaaS (Software as a Service
Create educational content
Code as a hobby
y

> F i n d i n g Yo u r P a t h

Types Of Web Developers

Frontend Developer
Works on the client side / browser and creates user interfaces.
They use tools like HTML, CSS, JS, DOM, FE frameworks, etc.

Backend Developer
Works on the server and deals with databases
They use languages like JS, Python, PHP, etc. Databases like Postgres,
MongoDB. HTTP, server configuration, deployment, etc.

Full Stack Developer

Works on the frontend and backend and works with a combination of the
tools above.
.

> B a s i c To o l s

Tools: The Necessities

Basic tools that every web developer uses

Computer & O MacOS | Windows | Linux | WSL

Web Browse Chrome | Firefox | Brave | Edge | Safari
Text Editor / ID VS Code | Sublime Text | Vim | Webstorm
Terminal Default | iTerm2 | Powershell | Git Bash | Hyper
Design Software Figma | Adobe XD | Sketch
r

> Building Blocks

HTML & CSS

HTML & CSS are the building blocks of web development

HTML5 Basic & Semantic Tags (Page Layout)

CSS Fundamentals
CSS Alignment (Flexbox & CSS Grid)
Media Queries / Responsive Design
Simple Animations / Transitions
> E x t r a To o l s

Sass & PostCSS

Sass is a CSS pre-processor that adds to the functionality of CSS. It

offers variables, nesting, mixins, functions, etc.

PostCSS is a tool for transforming CSS with JavaScript. There are

plugins to add the stuff Sass offers and more.
> E x t r a To o l s

CSS Frameworks (Choose One)

CSS frameworks give you predefined classes/components to style
elements. The can rapidly speed up the process of creating layouts.

Bootstrap Popular, high level framework

Tailwind CS Low-level, utility based framework

Materialize Based on material design
Bulma Mobile-first, modular framework

Foundation Advanced CSS framework

5

> Extra Skills

UI Design Principles
Frontend devs & web designers should know some basic design principles.

Color & Contrast Text should be readable

Whitespace Check space between elements
Scal Relative element sizing
Visual Hierarchy Arrange in order of importance
Typography Typeface, sizing, et
e

> Programming

JavaScript
JavaScript is the language of the browser
Every web developer should have some level of JS knowledge.

JS Basics Data types, data structures, functions, loops

DOM Document object model
Async J Promises, Async/Await
Fetch API & HTTP Make requests to API’s & understand HTTP
Array Methods map, filter, reduce, et
S

> E x t r a To o l s

Extra Programming Tools

GIT is a popular version control system. It is used with remote

repositories such as GitHub, GitLab and BitBucket.

NPM is a package manager used to install packages into your

project. NPM requires Node.js to be installed.

Browser dev tools are important for all types of developer

Element selector, console, storage, network activity, etc.

Emmet, Live Server, Prettier, ESLint, GitHub Copilot, etc.

> Going Live

Deploying Frontend Projects

Popular Platforms Domain Name Registrars

There are multiple ways to deploy to a hosting platform

GIT, SSH, FTP/SFTP
> U p To T h i s P o i n t

Basic Frontend Developer

A basic frontend developer should be able to do the following…

Create website layouts with HTML/CS

Understand some basic design principle
Know JavaScript and how to work with the DO
Create basic interactive frontend applications
Connect to APIs and make requests via Fetch
Work with GIT and use version control
Deploy and manage small production projects
S

> C h o o s i n g Yo u r P a t h

Where To Go From Here (Choose one)

Frontend Framework
✓ React, Vue, Svelt
✓ State Manager
✓ Server-Side Rendering

Web Design Backend

✓ Learn More Desig ✓ Node.js, Python, PHP, C#, G
✓ Get Better at CS ✓ Databases - Postgres, MongoD
✓ Simple Websites ✓ HTTP & API Development

Advanced JS
✓ Module Bundler
✓ Testin
✓ Design Patterns
g

> Frontend Superstar

Frontend Frameworks (Choose One)

Frontend JS frameworks used for SPAs (Single Page Apps)

React Vue
✓ Created & Maintained by Facebook ✓ Second Most Popular Framewor
✓ Most Popular Framework / Librar ✓ Great Communit
✓ Moderate Learning Curve ✓ Low Learning Curve

React Router, JSX, Hooks, Context API, Redux Vue CLI, Vue Router, Composition API, Vuex

Angular Svelte
✓ Created & Maintained by Google ✓ Gaining Popularit
✓ Popular In Enterpris ✓ Lightweight & Performant Compile
✓ Steep Learning Curve ✓ Lowest Learning Curve

Angular CLI, Services, TypeScript, Observables SvelteKit, Stores

y

> Frontend Superstar

TypeScript
Superset of JavaScript that adds static typing and other features

Static-Type Checkin
Class & Module Suppor
Other ES6+ Features
Code less prone to errors
Code is more robust and definitive
g

> Frontend Superstar

UI Kits (Choose One)

Reusable design elements / components

Material UI Onsen UI Vuetify Buefy

Chakra UI React Bootstrap Vue Material Bootstrap Vue

Angular Material Ng-Zorro Svelte Material UI Materialify

Ng-Bootstrap MD Bootstrap Smelte Sveltestrap
> Frontend Superstar

Testing
Common types of testing in programming

Unit Testing - Test blocks of code (functions, modules, classes

Integration Testing - Modules are combined and tested togethe
E2E Testing - Emulating a user

JS testing tools include Jest, Cypress and Puppeteer

Other languages have testing tools as well

> Frontend Superstar

Server-Side Rendering (Choose One)

Unlike with a SPA, React/Vue/Svelte apps render on the server-side

Next.js Nuxt.js
✓ React Based ✓ Vue Base
✓ Data Fetching Method ✓ Data Fetchin
✓ Image Optimization, SEO, etc ✓ Automatic transpilation & Bundling

Remix SvelteKit
✓ React Base ✓ Svelte Base
✓ Loaders & Action ✓ Advanced Routin
✓ Most Control Over HTTP Request/Response ✓ Code Splitting & Other features
d

> Frontend Superstar

Static Site Generators (Choose One)

Static sites have a lot of benefits such as performance, SEO and more

Gatsby Next.js
✓ React Base ✓ React Base
✓ GraphQL Data Laye ✓ Exports Fast Static Website
✓ Image Optimization, Code Splitting & More ✓ Data Fetching Methods

Gridsome Jekyll
✓ Vue Base ✓ Built on Rub
✓ PWA Read ✓ Been Around a Whil
✓ SEO Benefits ✓ Liquid Template Engine
d

> Frontend Superstar

Headless CMS (Choose One)

Content management systems for creating APIs with no frontend

Strapi Sanity.io
✓ Open Source, Based on Node.js ✓ Powerful & Flexible Platfor
✓ Customizabl ✓ Great for Collaboratio
✓ Self hosted ✓ Sanity Studio Toolkit

ContentFul GraphCMS
✓ Great for Teams ✓ Build a GraphQl API instantl
✓ Optimized for Spee ✓ Lightweight & Intuitiv
✓ Great for Large Businesses ✓ UI Extensions
e

> Frontend Superstar

The JamStack
Broad term to refer to an architectural approach for building websites.

Variety Of Tools / Technologie

Decouple
Static-First
Serverless Functions
High Performance, Secure & Affordable
d

> U p To T h i s P o i n t

Frontend Superstar
We have gone over just about everything a FE developer could do

Build user interfaces with a frontend framewor

Understand how to work with local and global stat
Work with REST APIs & HTT

Added Skills

Create applications with TypeScript

Work with SSR & Jamstack technologies (SSG, headless CMS)
Write unit, integration & e2e tests
P

> The Backend

Server-Side Language (Choose One)

Many different languages can be used on the server for web development

Node.js GoLang Rust

Python Ruby Scala

PHP Java R

C# Kotlin Swift
> The Backend

Server-Side Web Framework (Choose One)

Frameworks are used on the backend to build apps and APIs

Express Fastify ASP.NET Spring Rocket

Koa Nest.js ASP.NET MVC Struts Actix Web

Django Flask Gin Spring

FastAPI Beego Vert.x

Laravel Symfony Ruby on Rails Play

Slim Sinatra Lift
> The Backend

Databases (Choose One)

Backend & full stack developers work with various databases & tools

ORMs
PostgreSQL MongoDB
Sequelize

MySQL Firebase TypeORM

Mongoose
MS SQL Server Supabase Prisma
SQLAlchemy
SQLite Redis
Doctrine
> Full Stack

REST APIs
APIs that conform to the REST architectural style and interacts with
RESTful services

Representational State Transfe

HTTP requests work with data/resource
Specific URL structure for endpoints
GET /api/todo
POST /api/todo
PUT /api/todos/10
DELETE /api/todos/100
s

> Full Stack

GraphQL
Data query & manipulation language for APIs

Request specific data point

Strongly type
Less maintenance than REST
Apollo is a popular GraphQL client
d

> Full Stack

Authentication & Authorization

Authentication is the process of identifying an individual and authorizatio
pertains to the permissions that individual has

JSON Web Token

Cookies & Session
OAuth (Login via Google, Twitter, GitHub
Authentication libraries (Passport, Grant, etc)
Password hashing (Bcrypt)
Protecting endpoints and routes
s

> Full Stack

Wordpress
Full-featured PHP content management system

Wordpress is still widely use

It is great for freelancin
Small business clients like it
It can also be used as a headless CMS
g

> Going Live

Deploying Full Stack Projects & DevOps

Hosting Platforms Server Software

Containers & Virtualization Image & Video

> U p To T h i s P o i n t

Backend & Full Stack Web Developer

A backend web developer should know how to do the following…

Comfortable with a server-side programming languag

Know how to setup and manage a database & ORM / OD
Know how to create REST APIs and implement authenticatio
Comfortable with the terminal and Unix commands
Know how to deploy projects and work with servers

A full stack developer can do this as well as frontend tasks

> Web Dev & Beyond

Mobile Development (Choose One)

There are many web technologies that allow us to create mobile apps

React Native Flutter

✓ React Based ✓ Dart Programming Languag
✓ Code Reusabilit ✓ Extremely Fas
✓ Large Community ✓ Strong Documentation

Ionic Xamarin
✓ Use Any Framewor ✓ Mobile Apps With .NET & C
✓ Pre-Designed UI Component ✓ Cross-Platform App
✓ Developer-Friendly Tooling ✓ High Performance

> Web Dev & Beyond

Web3
Web3 opens up a whole new possibility of decentralized apps (Dapps) that
offer benefits such as transparency, security, anonymity and more.

Blockchai
Ethereum & Smart Contracts
Solidity Programming
NFTs (Non-Fungible Tokens
n

> Web Dev & Beyond

Web Assembly
A low-level assembly-like language or bytecode for the web 

Develop high-performance web application

Write programs in Rust, C, C++ and compile to WAS
AssemblyScript is a TypeScript varian
NOT a replacement for JS! t

> Web Dev & Beyond

Artificial Intelligence
Machine Learning and AI have a role in web development

Programming Tools (GitHub Copilot

Testing Tool
ML API
Chatbots, Spam Filters, Suggestions, etc
s

Thank You!