Sagar Medtiya
Sagar Medtiya

Follow

Sagar Medtiya

Follow
🛣️Roadmap of becoming Full Stack Web Developer

🛣️Roadmap of becoming Full Stack Web Developer

Sagar Medtiya's photo
Sagar Medtiya
·Dec 22, 2022·

4 min read

Play this article

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)

FrameworkFeatures
BootStrap5Popular, high-level framework
TailWind CSSlow-level, utility-based framework
Materializebased on material design
Bulmamobile-first, modular framework
Foundationadvanced 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

  • ASP.net

  • 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.💖

Did you find this article valuable?

Support Sagar Medtiya by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this