Table of contents
So, in this blog, I'm gonna share what you need to become a full-stack web developer.🧑💻
Tools⚒️
OS & Computer
macOS
Windows
Linux
Web Browser
Chrome
Firefox
Brave
Text Editor/IDE
VS Code
Sublime
Terminal
iTerm
GitBash
Powershell
Default
Design Software
Figma
Adobe XD
🍁HTML and CSS
To start the journey, HTML and CSS are the building blocks of the web development
HTML Basic and semantic tags(Page Layout)
CSS Fundamentals
CSS Alignment (Flexbox and Grid )
Media Queries / Responsive Design
Simple Animations / Transitions
🍀Sass and PostCSS
Sass is a CSS pre-processor that adds to the functionality of CSS. It offers variables, nesting, mixin, functions, etc.
PostCSS is a tool for transforming CSS with JavaScript. There are plugins to add the stuff Sass offers and more.
🍀CSS Frameworks(Choose One)
| Framework | Features |
| BootStrap5 | Popular, high-level framework |
| TailWind CSS | low-level, utility-based framework |
| Materialize | based on material design |
| Bulma | mobile-first, modular framework |
| Foundation | advanced CSS framework |
🍀UI Design Principles
Color & Contrast - Text should be readable
Whitespace - Check space between Elements
Scale - relative element sizing
Visual Hierarchy - Arrange in order of importance
Typography - Typeface, sizing etc
🍀UI kits
MaterialUI
OnsenUI
Vuelify
Buefy
Angular Material
NG-Zorro
🍁JavaScript
JavaScript is the language of browsers.
JS Basics - data types, functions, loops, data structure
DOM - Document object model
Async JS - Promises, Async/ await
Fetch API & HTTP - Make requests to APIs and understand HTTP.
Array Method - filter, map, reduce
🍁TypeScript
It is a superset of JS that adds static typing and other features
Static-type checking
Class and Module Support
Other ES6+ features
Code less prone to error
code is more robust and definitive
🍁Extra Programming Tools
Git is a popular version control program. It is used with remote repositories such as GitHub, GitLab and BItBucket.
NPM is a package manager used to install packages into your project.
Browser dev tools are important for all types of developers. Element Selector, console, storage, network activity, etc.
Emmet, live server, prettier, ESLint, GitHub Copilot etc.
🍁Frontend Framework
Frontend JS Frameworks used for SPAs (Single Page App)
🍀React
Created and maintained by Facebook
Most popular framework library
Moderate learning curve
🍀Vue
A second most popular framework
Great community
Low learning curve
🍀Angular
Created and maintained by Google
Popular in Enterprise
Steep learning curve
🍀Svelte
Gaining popularity
Lightweight and performant compiler
Lowest learning curve
🍁Server-side Rendering
Unlike with a SPA, React/Vue/Svelte apps render on server-side
🍀Next.js
React-based
Data fetching method
Image optimization, SEO etc
🍀Nuxt.js
Vue based
Data fetching
Automatic transpilation and Bundling
🍁Static Side Generator
Static sites have a lot of benefits like performance, SEO, etc
🍀Gatsby
React Based
GraphQL Data Layer
Image Optimization, code splitting and more
🍀Next.js
React based
Exports fast static websites
Data Fetching Methods
🍁Headless CMS
Content Management System for creating APIs with no frontend
🍀Strapi
Open source, based on Node.js
Customizable
Self-hosted
🍀Sanity.io
Powerful and flexible platform
Great for collaboration
Sanity Studio Toolkit
🍀Contentful
Great for teams
Optimized for speed
Great for large business
🍀GraphCMS
Build a GraphQL API instantly
Lightweight and intuitive
UI Extensions
🍁Server-Side Language
Many different languages can be used on the server for web development
Node.js
GoLang
Rust
Python
Ruby
Scala
PHP
Java
Kotlin
Swift
C#
🍁Server-Side Web Framework
Frameworks are used on the backend to build apps and APIs
ExpressJS
Django
Spring
Ruby on Rails
Laravel
🍁Database
Backend & full-stack developers work with various databases & tools
PostgreSQL
MongoDB
MySQL
Firebase
SQLITE
Redis
That's all folks. If I've missed something, then you can comment down below I'd appreciate it a lot. Thanks.💖