This is an in-depth guide that goes over every major technology that has to do with web development, from languages to frameworks to utilities.
INTRODUCTION
ABOUT THIS GUIDE…
- It’s a step-by-step guide that covers major tools used in web development. It is NOT a “latest trend” video
- Choose your own path based on what you want to do and learn. You don’t have to learn anywhere near everything in this video
- I try to be as objective as possible, but I wiil mention little suggestions and underline the things that I use personally
GETTING STARTED / GOALS
YOUR OVERALL GOAL
- CAREER ADVANCEMENT
- FREELANCING / AGENCY
- CREATE PRODUCTS
- HOBBY / FUTURE PROOFING
TYPES OF WEB DEVELOPERS
I will include specific colors for technologies that are relevant for different type of developers
- Blue: Front-End Developer
- Red: Back-End Developer
- Green: Full-Stack Developer
FRONT-END DEVELOPER
Focus on the user interface (UI) of a website/web app.
- HTML & CSS
- JavaScript
- Front-End Framework
- CSS Frameworks
- Module Bundlers & Build Tools
- HTTP & Consuming APIs
- Unit Testing
BACK-END DEVELOPER
Focus on the server-side programming & databases
- Programming Language (PHP, Python, C#, JS/Node.js, etc)
- Back-End Framework
- Databases
- HTTP & Creating APIs (REST)
- ORM (Object Relational Mapper)
- Dploying To Servers
FULL-STACK DEVELOPER
Focus on the front and back-end. Usually a little more emphasis on one end
- HTML, CSS, JS
- Front-End Fromework
- Back-End Language & Framework
- Fully Understand HTTP & APIs
- Databases & ORM
- Testing
- Deployment
GETTING STARTED / THE ESSENTIALS
BASIC TOOLS
- Computer & OS: At least 8GB of RAM
- Operating System: MacOS , Windows, Linux
- Text Editor / IDE: VS Code, Sublime Text, VM, Atom
- Web Browser: Chrome, Firefox, Edge, Safari, Brave
- Terminal: Default, iTerm, Git Bash, Powershell, WSL, Hyper
FRONT-END BASICS / THE BUILDING BLOCKS
HTML & CSS
- HTML Layout, Tags & Attributes
<!DOCTYPE html />, <head>, <body>, <p>, <img> - Semantic Elements
<header>, <footer>, <section>, <aside>, etc - IDs vs Classes
IDs for unique elements, classes for styling - CSS Fundamentals
fonts, colors, box model, positioning, etc - CSS Specificity
The specific weight of selectors - Flexbox & CSS Grid
Create one and two-dimensional layouts - Responsive Layouts
Mediea queries, fluid layouts, etc
JAVASCRIPT
- Learn The Bascis
Functions, loops, conditionals, scope - The Browser Environment
The window object, execution context - Doucment Object Model
Manipulate DOM content, styling, events - ES6+ Features
Arrow functions, destructuring, template literals - Arraw Methods
forEach, filter, map, reduce, find - Asynchronous JS & HTTP
Callbacks, promises, fetch, JSON
FRONT-END BASICS / LAYOUT & STYLING TOOLS
SASS
Sass is a CSS Pre-Processor. You use a Sass complier to compile .sass or .scss files into regular CSS. It is everything that CSS is plus some additional features such as…
- Simple variable syntax
- Nesting
- Functions & Mixins
- Importing & Partials
- Extend / Inheritance
POST CSS
Post CSS is a tool that transforms your CSS using JS plugins. For instance, if you wanted to minify or auto add prefixes, you could use specific plugins to do that.
You can essentially do everything that Sass does with Post CSS, just in a different way.
Post CSS has more of a learning curver and is usually used with tooling such as Webpack, which we will talk about soon.
CSS FRAMEWORKS
- It is important that you learn CSS before jumping into any of these frameworks
- Saves your time when it comes to creating and styling layouts
- You may need to learn Sass in order to really customize your layouts
TAILWIND
- Utility-based framework
- Very popular
- Easily integrate into projects
BOOTSTRAP
- Component-based framework
- Very popular
- Includes dynamic JS components
MATERIALIZE
- Component-based framework
- Uses Google Material Design
- Includes dynamic JS components
BULMA
- Modular (Import what you need)
- Very lightweight & fast
- Easy to use
FRONT-END BASICS / UI DESIGN
UI DESIGN PRINCIPLES
- COLOR & CONTRAST
Text should always be 100% readable - WHITESPACE
The spacing between elements. Correct margin, padding, width, height, etc - SCALE
Sizing relative to other elements on the page and in that area - VISUAL HIERARCHY
Arrange your elements in the order of importance - TYPOGRAPHY
Text typefaces, font styles and sizing - ALIGNMENT & FLOW
Create visual flow. Direct the user’s eyes where they need to go
DESIGN SOFTWARE
- You may or may not need to use design software. It depends on what you are doing
- It is good to at least know the very basics and create a basic layout
ADOBE XD
- Free for “starter” version
- Easy if familiar with other Adobe products
- Collaboration & organization
FIMGA
- Web based
- Very popular
- Collaborate, prototype, wireframe
SKETCH
- Mac only
- Hig performance
- Component-based structure
INVISION
- Great for prototyping
- Sharing & collaboration
- Easy to use
FRONT-END BASICS / TOOLS & RESOURCES
TOOLS & UTILITIES
- Git & GitHub
Version control is a necessity for all developers - Browser Developer Tools
Elements, console, application, network tabs - NPM (Node Package Manager)
Install 3rd party packages, run scripts - Markdown
Lightweight markup language, used in many areas - Editor / IDE Extensions
Emmet, Prettier, ES Lint, framework-specific extensions - HTTP Clients
Axios, Postman, CURL
GITHUB COPILOT
Text editor extension for ai-powered code completion and suggestions. It was developed by GitHub and OpenAI.
Can be installed in VS Code, Neovim and JetBrains environments.
Can improve developer productivity, but it is important not to rely on it too much.
CHATGPT
AI chatbot created by OpenAI. and is the most advanced form of available to the public.
It is a large language model that has been trained on a massive amount of text data, allowing it to generate human-like responses.
It is a useful for generating code, help with debugging, suggestions, converting code, generating sample data.
FRONT-END BASICS / DEPLOYMENT
FRONT-END DEPLOYMENT
- DOMAIN NAMES
Register domain names, configure DNS, etc - HOSTING
Push your code to a platform and connect your domain
NETLIFY
- Great free tier & reasonable pricing
- Push directly from GitHub
- Form submission & other admins
VERCEL
- Great free tier & reasonable pricing
- Push directly from GitHub
- Embraces serverless & edge computing
GITHUB PAGES
- Free hosting for small, static projects
- Easy to use with your existing GitHub
- Simple deployments
CPANEL
- All-in one service (hosting, email, databases)
- Cheap pricing
- Hostinger, inMotion Hosting, Bluehost
FRONT-END BASICS / FOUNDATIONAL FRONT-END DEVELOPER
FOUNDATIONAL FE DEVELOPER
- Set up a basic dev environment
Text editor, plugins, dev server - Create layouts with HTML / CSS
Create decent looking websites - Understand simple design principles
Contrast, whitespace, alignment - JavaScript & The DOM
Dynamic pages, events, manipulate the DOM - Fetch & HTTP
Methods, status codes - Version Control
Use Git and GitHub - Basic Deployment
Deploy a basic website & connect a domain
It is optional, but good to know Sass and a CSS framework
THE NEXT STEP
YOUR NEXT MOVE
Web Design
- Leaning toward building basic websites
- Creating ana agency
- Really into the design aspect
- No-code tools
Server-Side / Back-End
- Node.js, PHP, Python, C#, etc
- Building APIs & microservices
- Learn databases
- Not really interested in UI
Front-End Framework & Tooling
- Learn modern JS workflows & tooling
- Choose a FE framework like React or Vue
- SPA & SSR
- Option for both FE & full stack
Sharpen Your JavaScript
- Work on algorithms & data structures
- Become a better problem solver
- Hobby coding
FRONT-END INTERMEDIATE / TOOLING
BUILD TOOLS
- These tools allow you to create an advanced front-end file structure and dev environment
- Some are module bundlers and some utilize ES Modules in the browser
WEBPACK
- Been around for a long time
- Very full-featured
- Bundle non-JS assets
PARCEL
- Requires no configuration
- Supports more out of the box
- CSS, SCSS, Babel, TypeScript and more
VITE
- Leverages ES Modules in browser
- Extremely fast
- Uses Rollup to bundle for production
SNOWPACK
- Also uses ES Modules
- Also uses Rollup for bundling
- Build once, cache forever
FRONT-END INTERMEDIATE / FRAMEWORKS
FRONT-END FRAMEWORKS
- Help you easily create modern websites and interfaces in an organized way
- Interfaces are created using UI components. Think of everything on the page as a component
- Component and global state can be managed within the framework tools or a 3rd-party state manager
- Created for SPAs, but now can be used with meta frameworks for server rendered content
REACT
- Backed by Facebook/Meta
- Intermediate learning curve
- Extremely popular
- Great community / resources
ECOSYSTEM
- Create React App
- React Router
- JSX
- Context API
- Hooks
- Redux, XState
- NextJS, Remix
- Gatsby
VUE
- Not backed by large company
- Easy learning curve
- Gaining popularity
- Great community / resource
ECOSYSTEM
- Vue CLI / Vue UI
- Vue Router
- Vuex / Pinia
- Composition API
- Vuetify
- NuxtJS
- Gridsome
- Vue Devtools
ANGULAR
- Backed by Google
- Steep learning curve
- Popular in enterprise
- Good for complex projects
ECOSYSTEM
- Angular CLI
- TypeScript
- Services
- Observables
- NgRx
- RxJS
- Angular Universal
SLVELTE
- Compiles into pure JavaScript
- Easy learning curve
- Very fast & lightweight
- Feels like vanilla JavaScript
ECOSYSTEM
- Svelte Stores
- SvelteKit
- Svelte Devtools
SOLIDJS
- Reactive UI library
- Similar to React in certain ways
- Extremely lightweight (6.5kb)
- Easy learning curve
ECOSYSTEM
- SolidStart (Beta)
- JSX
- solid-jest
- Hope UI
FRONT-END INTERMEDIATE
TYPESCRIPT
- Superset of JavaScript with additional features, including static types
- TypeScript can be used with any client-side framework as well as with Node.js
- There are pros and cons to TypeScript. It is up to you if you think you would benefit from it
FRONT-END INTERMEDIATE / STYLING
UI KITS
- Libraires with pre-defined styled components that you can use in your UI
- They take a lot of the work out of styling your application’s components from scratch
REACT
- Styled Components
- Material UI
- React Bootstrap
VUE
- Vuetify
- Bootstrap Vue
- Quasar
ANGULAR
- Angular Material
- ng-Bootstrap
- IgniteUI
SVELTE
- Svelte Material UI
- SvelteStrap
- SvelteFlat UI
FRONT-END ADVANCED / TESTING
TESTING
- Unit Testing
Testing individual units (functions, classes, etc) - Integration Testing
Test how different pieces of code work together - End to End Testing
Test entire app from user’s perspective - Performance Testing
Test how well the app does under heavy load
JS
- Jest
- Mocha
- Cypress
Python
- Robot
- PyTest
- DocTest
C#
- MSTest
- NUnit
- xUnit
Go
- GoTesting
- Testify
- Ginko
Java
- Selenium
- JUnit
- TestNG
Rust
- Native
- Skeptic
- QuickChk
PHP
- PHPUnit
- Behat
Ruby
- Cucumber
- MiniTest
Kotlin
- Spek
- Kotlintest
FRONT-END INTERMEDIATE / WEB & BROWSER APIS
WEB APIS
- Canvas API
Dynamic graphics & visualization - GeoLocation
Get a user’s location - Speech API
Speech recognition & synthesis - Audio & Video API
Audio/video controls and customization - Web RTC
Real-time communication with audio/video - Local Storage
Store data in the browser
FRONT-END ADVANCED / SSR
FULL STACK FRAMEWORKS (SSR)
- It has become very popular to render some things on the client and some on the server
- There are benefits to SSR, such as SEO, performance and simplicity
- SSR makes things less complex when it comes to preloading, state, authentication, etc
NEXTJS
- Uses React
- Extremely popular
- File based routing, API routes, data fetching
REMIX
- Uses React
- Gaining in popularity
- Native form component, loading states
NUXTJS
- Uses Vue
- Comparable to NextJS
- Hybrid rendering, Nitro server engine
UNIVERSAL
- Uses Angular
- Integrates with Angular-CLI
- Rich debugging tools, lazy loading
SVELTEKIT
- Uses Svelte
- SSR, SSG, Routing & More
- Loads components on server first
BLAZOR
- Uses C# & WASM
- Can render on the client-side
- Hot reload, lazy loading, virtualization
REDWOOD
- Built on top of NextJS
- Prisma, GraphQL, Jest, Storybook
- End-to-end workflow great for startups
BLITZ
- NextJS Toolkit
- Typesafe Data Layer & Scaffolding
- Authentication
FRONT-END ADVANCED / SSG
STATIC SITE GENERATORS (SSG)
- SSG frameworks are used to create extremely fast and optimized websites
- Benefits to SSG sites are SEO, performance, flexibility and security
- SSG sites can still be dynamic and fetch data from an API or headless CMS
ASTRO
- Astro components or React, Vue, Svelte
- Generates static HTML with little to no JS
- Loads components on server first
GATSBY
- Uses React components
- Has GraphQL Data Layer
- Image optimization, code splitting
GRIDSOME
- Uses Vue
- Great for progressive web apps
- SEO friendly, simple safe deployment
JEKYLL
- Ruby Based
- Uses Liquid templates
- Default generator for GitHub Pages
HUGO
- Based on GO
- Use any front-end technology
- Powerful theming
HEXO
- Based on Node.js
- Blog generator
- Highly customizable
PELICAN
- Based on Python
- Use Jinja2 templates
- Rich ecosystem of plugins
FRONT-END ADVANCED / CONTENT MANAGEMENT
HEADLESS CMS
- Admin area to create content without being bound to a specific front-end
- Output JSON, so that you can just fetch the data and use a custom front-end / UI
- Great solution for clients that want to be able to update and add their own content
STRAPI
- Built on Node.js
- Completely open source & self hosted
- Loads of features for content creation
SANITY.IO
- Fully customizable CMS
- Real-time data store for structured content
- Flexible querying API
KEYSTONE
- Powerful content management
- GraphQL API
- Primitive & advanced fields, custom schemas
CONTENTFUL
- Cloud-based CMS
- Flexible content model, rubust API
- Free and paid plans
FRONT-END ADVANCED / JAMSTACK
THE JAMSTACK
- Architectural approach to building websites with JavaScript, APIs & Markup
- Emphasizes the use of SSG, SSR, headless CMS, serverless functions
- Jamstack websites are decoupled and extremely fast, secure and easily maintained
FRONT-END ADVANCED / EXTRAS
ALPINE.JS
Alpine is technically a framework, but works more like a library. It actually labels itself modern jQuery.
- Data binding
- Event handling
- Hide / show elements
- Data synchronization
- Conditionals & loops
LIT
Library that allows you to create custom components
- Build on web components standard
- Reactive state
- Scoped styles
- Declarative template system
VISUALIZATION
- These tools allow you to create advanced visualizations and animations
- Knowing how to do this can take you to the next level as a front-end developer
MOTION UI
- Sass library for animation
- Add animated elements to your website
- Pre-built and custom
FRAMER
- Animations in React
- Fuild & dynamic UI
- Support for 3D animations
THREE.JS
- Very popular (90K Stars)
- JavaScript API for 2D/3D graphics
- Powered by WebGL
GSAP
- High-performance timeline-based animations
- uses tweens
- Don’t need to know a lot of JS
EXTRAS
NO-CODE TOOLS
- WORDPRESS
- WEBFLOW
- SHOPIFY
- OTHER TOOLS: Kajabi、WIX、SQUARESPACE
FRONT-END ADVANCED / FRONT-END SUPERSTAR
FRONT-END SUPERSTAR
- Know a front-end framework well
Understand concepts like components, state - HTTP / APIS
Very comfortable with HTTP & consuming APIS - Full stack / SSR framework
Becoming a necessity
Optional, but beneficial
- TyperScript
Really in-demand and fairly easy to learn - Jamstack technologies
SSG, headless CMS, serverless functions - Testing
Unit tests with a framework like Jest
BACK-END ESSENTIALS / PROGRAMMING LANGUAGES
SERVER-SIDE LANGUAGE
- Choose a language
Try a few out and see what feels right - Check job listings
See what companies are using in your area - Learn the fundamentals
Don’t move to a framework too fast
| NODE.JS | PYTHON | PHP |
| C# | GOLANG | RUBY |
| JAVA | KOTLIN | RUST |
| SCALA | R | SWIFT |
BACK-END ESSENTIALS / FRAMEWORKS
NODE.JS
- Express
- Fastify
- NestJS
- Adonis
PYTHON
- Django
- Flask
- Fast API
PHP
- Laravel
- Symfony
- Codeigniter
- SlimPHP
RUBY
- Rails
- Sinatra
GO
- Gin
- Beego
- Echo
JAVA
- Spring
- Struts
- Blade
KOTLIN
- Spring
- Javelin
- Ktor
C#
- ASP.NET MVC
RUST
- Rocket
BACK-END ESSENTIALS / DATA
RELATIONAL DATABASES
- Traditional table-based structure
- Data stored in columns and rows
- Usually use SQL (Structure Query Language)
- Been around since the 70s
- Great for related data (social networks, etc)
- Very rigid in terms of structure
- Good with complex queries
NOSQL DATABASES
- Many types (Document, column-based, key/value)
- Data stored in JSON-like documents (Document DB)
- Newer type of database
- Very flexible structure (schema-less)
- Used in big data applications
- Great scalability
- Not as well suited for complex queries
RELATIONAL DATABASES
PostgreSQL
- Intuitive functionality & versatile security
- Object-oriented data structure
- Used by Apple, Skype, Etsy, Cisco
MySQL
- Widely used in web development
- Strong community
- Used by Google, Udemy, Netflix, Amazon
ORACLE
- Used for large-scale enterprise
- Handles large and complex data sets
- Used by American Express, Amazon, Verizon
MS SQL
- Commercial solution for big businesses
- Commercial – free tier with limitations
- Used by UPS, Bank of America, JPMorgan
NOSQL DATABASES
MongoDB
- Most popular document database
- Very flexible, scalable and high performance
- Used by IBM, Verizon, Forbes, Adobe
Cassandra
- Column-based database
- High performance & high availability
- Apple iCloud, Twitter, eBay
Couchbase
- Document database
- Designed to handle unstructured data
- Used by Linkedin, Marriot, Walmart
DynamoDB
- Amazon proprietary document database
- Can also be used as key/value store
- Used by Amazon, Netflix, Airbnb
SERVERLESS / CLOUD DATABASES
MongoDB Atlas
- MongoDB in the cloud
- Setup user and network access
- Generous free tier
Firebase
- Owned by Google
- Real-time NoSQL database
- Authentication, file storage, serverless functions
Supabase
- Backend as a service
- Uses a PostgreSQL database
- No company lock-in
FaunaDB
- NoSQL & relational models
- Support for ACID transactions
- Support for GraphQL
FILE-BASED DATABASED
SQLite
- Most common file-based database
- Uses SQL
- Extremely easy to setup
.md Files
- Good alternative to a database
- No installations, maintenance, etc
- Only very small projects like personal blogs
H2 DB
- Lightweight and high performance
- Supports SQL
- Web-based console
Redis
- in-memory database for caching
- Data can be persisted to disk
- Fast and scalable
ORMS (OBJECT RELATIONAL MAPPER)
- Provides a way to work interact with data from within your code without writing raw SQL queries
- Simplifies database interaction, increases productivity and readability
- Allows the application to be independent of the database
PRISMA
- Type-safe database client
- Supports many databases
- Easy relation API
MONGOOSE
- ORM/ODM for MongoDB & Node.js
- Create models & schemas
- Middleware support
SEQUELIZE
- ORM for Node.js & MySQL
- Supports all SQL-based databases
- Migrations, model associations, hooks
SQLALCHEMY
- ORM for Python
- Supports MySQL, Postgres, SQLite & Oracle
- Rich API for complex queries
REST API
- “Representational State Transfer”
- Traditional client-server model
- Much more common
- Uses specific HTTP methods and endpoints
- Fetches all or nothing
GRAPHQL
- Query language and runtime for APIs
- Allows client to specify the data they want
- Improved performance
- One /graphql endpoint
- Use a client such as Apollo
BACK-END ADVANCED / SECURITY
AUTHENTICATION
- Sessions & Cookies
Server maintains session & ID stored in cookie - JSON Web Tokens
Token is stored and sent to protected routes - OAuth
Open standard to use 3rd-party services - Third Party Services
Auth0, Okta, AWS Cognito, Firebase - Other Related Topics
Password hashing, two-factor auth, protecting routes
BACK-END ADVANCED / DEPLOYMENT
BACK-END / FULLSTACK DEPLOYMENT
- PaaS
Everything is set up for you - Cloud Hosting
You create and provision a server from scratch
RENDER
- PaaS that supports many languages
- Push directly from GitHub
- Generous free tier
HEROKU
- PaaS that supports many languages
- Uses a Heroku-CLI or Git
- Embraces serverless & edge computing
LINODE
- Cloud hosting
- Install any software that you want
- Great pricing and no lock-in
AWS
- Most powerful hosting company in the world
- Tons of services
- Great for large projects with a lot of traffic
DEVOPS SKILLS
- Terminal / Linux Commands
Very comfortable with the shell and utilities - Web Servers
NGINX, Apache configuration - Containerization & Virtualization
Docker, Kubernetes, Vagrant - Assets & File Storage
Cloudinary, Amazon S3 - CI / CD
Jenkins, Travis CI, CircleCI - Infrastructure as Code (IaC)
Terraform, CloudFormation, Pulumi
BACK-END ADVANCED / BACKEND SUPERSTAR
BACKEND / FULL STACK SUPERSTAR
- Server-Side Language/Technology
Node.js, Python, PHP, Ruby, etc - Server-Side Framework
Know how to create apps/apis with a framework - Database & ORM
Relational or NoSQL database and ORM layer - REST API Creation
CRUD, HTTP response formation, GraphQL is a plus - Authentication & Authorization
Protect routes, sessions, tokens, etc - Project Deployment
Deploy on a PaaS or cloud hosting
BEYOND THE BROWSER / MOBILE DEVELOPMENT
MOBILE DEVELOPMENT
- There are many web technologies that we can use to build native and hybrid applications
- Having the skill to create mobile applications can be really beneficial for web developers
REACT NATIVE
- Uses the React libray
- React components
- Cross platform with iOS & Android
FLUTTER
- Open-source framework by Google
- Uses the Dart programming language
- Cross-platform with iOS & Android
IONIC
- Hybrid & progressive web apps
- Use any front-end framework
- Cross-platform with iOS & Android
XAMARIN
- C# framework for building mobile apps
- Utilize .NET platform
- Cross-platform with iOS & Android
MODERN TECH
PROGRESSIVE WEB APPS
- Best of both worlds including mobile and web applications
- Leverage modern web technologies such as responsive design, service workers, HTTPS
- Anyone that knows HTML, CSS & JavaScript can get into building progressive web apps
BEYOND THE BROWSER / DESKTOP APP DEVELOPMENT
DESKTOP APPS
- There are frameworks that we can use to build cross-platform desktop applications
- This includes JavaScript frameworks as well as other languages like Python
ELECTRON
- Cross platform apps with JavaScript
- Use any FE framework or library
- VS Code, Slack, Discord, Postman
NW.JS
- Native desktop apps with web technologies
- Call Node.js modules from DOM
- Cross-platform with Windows, MacOS, Linux
TKINTER
- Create-cross platform GUI apps with Python
- Python interface to the Tk GUI toolkit
- Cross-platform with iOS & Android
NATIVE
- Native apps with C#, Java, Swift, etc
- Beyond the scope of web technologies
MODERN TECH
WEB ASSEMBLY
- Binary instruction format for browsers to run code more efficiently than JavaScript
- Can be used with languages like Rust, C, C++ as well as a superset of TypeScript called AssemblyScript
- Web Assembly is reaching beyond the browser with projects in server-side and mobile apps
ADVANCED AI
- AI for art and creation
Tools like DALL-E for generating realistic images - AI powered databases
Databases + machine learning - AI powered content
Tools like Jasper and GPT-3 - Chatbots & voice
AI powered virtual assistants - Code generators
Copilot, Tabnine, Kite
WEB3
- Blockchain
Distributed database that records transactions - dAPPs
Decentralized applications - Smart contracts
Solidity development - Cryptocurrency
Facilitate transactions with Bitcoin, Ethereum, etc - Identity Solutions
Control over personal data