• Home
  • About Us
  • Courses
  • Blog
  • Become a Teacher
  • Contact Us
Cad Learner
  • Register |Login
    • Home
    • About Us
    • Courses
    • Blog
    • Become a Teacher
    • Contact Us

    Roadmaps

    • Home
    • Blog
    • Roadmaps
    • Web Development Roadmap 2022

    Web Development Roadmap 2022

    • Posted by Ashish Singh
    • Categories Roadmaps
    • Date February 3, 2022
    • Comments 0 comment
    web development roadmap

    Web Development Roadmap 2022

    This blog covers all the technologies required to become a world class web developer in 2022. I have listed all the current technologies, languages, frameworks and whatever required priority wise. All the elements of the web development route have certain alternates or competitors but it’s totally the coders choice to go for the best technology after testing all in that spectrum. So if you are a serious candidate for learning web development technologies and want to make a career in this field hang on and go through the complete guide.

     

    What is Web Development

    Website development refers to the process of building a website. This could refer to the basic HTML/CSS static websites or More interactive ones with Javascript or the full stack development which leads to higher end websites. In short any application we create and run on internet is a website.

    Reason to become a Web Developer

    • work for a company
    • Freelance or run your own business
    • Build your own product/StartUp
    • Create online content
    • Teach Development to other coders

    Types of Web Developers

    Web Developers can be classified into two ways:

    • Frontend Developer

      • Frontend Developer is a person who works on the client side | builds interfaces | They use HTML, CSS, JS, Frontend Frameworks
    • Backend Developer

      • Backend Developer is a person who works on the server and deals with databases | They use languages like JS, Python, PHP, | Databases like Postgres, MongoDB, HTTP, server configuration and know web deployment
    • Full stack Developer

      • A person who works on both frontend and backend is a frontend developer.

    Basic Requirements to become a Web Developer

    • Computer with any operating system like MacOs, Linux, Windows with a good hardware configuration ie 8GB RAM recommended
    • Web Browser like Chrome, Firefox, Brave, Edge, Safari (Chrome Recommended)
    • Text Editor or IDE  like VS Code, Sublime Text, Vim, Atom (VS Code Recommended)
    • Terminal like the default terminal in OS or Git Bash, Powershell
    • UI design software like Adobe XD, Figma or Sketch
    • Knowledge of graphic design – refer to Graphic Design Roadmap for 2021

    The Basic Building Blocks for Web Development Roadmap

    • HTML5 Basics & Semantic Tags (Page Layout)
    • CSS Fundamentals
    • CSS Alignment (Flexbox & CSS Grid)
    • Media Queries / Responsive Design
    • Simple Animations/ Transitions
    • 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 JS. There are plugins to add the stuff Sass offers and more

    CSS frameworks

    • Bootstrap 5 – It is a High level framework
    • Tailwind CSS – Low Level framework and utility based
    • Materialize – Based on material design by google
    • Bulma – Mobile-first and Modular framework
    • Foundation – Advanced CSS framework

    UI design Principles

    • Knowledge of Color & Contrast is beneficial
    • Whitespaces -Check spaces between elements
    • Scale – Relative element sizing for a great look
    • Visual Hierarchy – Arrange elements in order of importance
    • Typography – Typeface, sizing

    Javascript

    • Javascript Basics – Data Types, Data Structures, Functions, Loops
    • DOM – Document Object Model
    • Async Javascript – Promises, Async/ Await
    • Fetch API & HTTP – Make request to API and HTTP | JSON
    • Higher Order Array Methods -Map, Filter, Reduce

    Additional Programming Tools

    • Git is a 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 projects | NPM requires Node.js to be installed
    • Browser dev tools are important » Element Selector, Console, Storage, Network activity
    • Emmet, Live Server, Prettier, ESLint, Github Copilot are some extensions for VS Code

    Deploying frontend projects

    • Netlify or Vercel for hosting
    • Namecheap, goDaddy or Bluehost for domain
    • There are multiple ways to deploy to hosting platforms | GIT, SSH, FTP/SFTP

    Frontend frameworks

    • React
      – Created and maintained by facebook
      – Most popular framework/ library
      – Easy to learn
      – React Router, JSX, Hooks, Context API, Redux
    • Angular
      – Created and maintained by Google
      – Popular in enterprise
      – Steep learning curve
      – Angular CLI, Services, TypeScript, Observables
    • Vue
      – Second most popular framework
      – great community
      – low learning curve
      – Vue CLI, Vue Router, Composition API, Vuex
    • Svelte
      – Gaining popularity
      – Lightweight and Performant compiler
      – Lowest Learning curve
      – SveleteKit, Stores

    TypeScript

    • Static Type Checking for variables
    • Class & Module Support
    • Other ES6+ Features
    • Code less prone to errorsCode is more robust and definitive

    UI kits for frontend frameworks

    • React
      – React Bootstrap
      – Material UI
      – Onsen UI
      – Chakra UI
    • Vue
      – Vuetify
      – Buefy
      – Vue Material
      – Bootstrap Vue
    • Angular
      – Angular Material
      – Ng- Zorro
      – Ng- Bootstrap
      – MD Bootstrap
    • Svelte
      – Svelte material UI
      – Materialify
      – Smelte
      – Sveltestrap

     

    Server Side Rendering

    • Next.Js
      – React Based
      – Data Fetching Methods
      – Image Optimization, SEO
    • Nuxt.js
      – Vue Based
      – Data Fetching
      – Automatic transpilation and Bundling
    • Remix
      – React Based
      – Loaders & actions
      – Control http req and Res
    • SvelteKit
      – Svelte based
      – Advanced Routing
      – Code Splitting

     

    Static Site Generators

    Which allows you to generate your website and content from various sources (Markdown files| APIs | Headless CMS) High performance they get data ahead of time and preload it for user

    • Gatsby
      – react Based
      – GraphQL data layer
      – Image optimization, code Splitting
    • Next.js
      – React Based
      – Exports fast static websites
      – Data fetching Methods
    • Gridsome
      – Vue Based
      – PWA ready
      – SEO Benefits
    • Jekyll
      – Built on ruby
      – Been around a while
      – Liquid template engine

     

    Headless CMS (For creating APIs with no frontend)

    Its different from frontend CMS like WordPress as there is no frontend. We can manage only backend.

    • Strapi
      – Open source
      – Customizable
      – Self Hosted
    • Sanity.io
      – Powerful and flexible
      – gerat for colaboration
      – sanity studio toolkit
    • ContentFul
      – Great for teams and big businesses
      – Optimized for speed
    • Graph CMS
      – Build GraphQL API
      – Lightweight and intuitive
      – UI Extensions

     

    The Jamstack

    Architectural approach to build websites

    • Variety of tools/ Technologies
    • Decoupled
    • Static-first
    • Serverless Functions
    • High performance, Secure and affordable

    Backend Web Development Roadmap

    Server Side languages

    NODE.js | GoLang | Rust | Python | Ruby | Scala | PHP | Java | R | C# | Kotlin | Swift
    Node.js is a javascript runtime environment | its fast and async | event based programming
    Dino is other option for JS on backend

    Server Side web frameworks

    • Node.JS -> Express | Koa | Fastify | Nest.js
    • Python -> Django | Flask | FastAPI
    • PHP -> Laravel | Symphony | Slim
    • Java -> Spring | Struts
    • Kotlin -> Spring | Vert.X
    • Ruby -> Ruby on rails | Sinatra
    • Go -> Gin Beego
    • C# -> ASP.net MVC

     

    Databases

    • NO SQL
      MongoDB | Firebase | Superbase | Redis
    • SQL
      PostgresSQL | MySql | MS SQL Server | SQLight
    • ORMs (object relational mapper)
      Mongoose | Sequelize | Type ORM | Prisma | SQLAlchemy | Doctrine

     

    REST API

    • APIs that conform to the REST architectural style and interacts with RESTful services.
      – Representational state transfer
      – HTTP requests work with data/resources
      – Specific URL structure for endpoints
      GET PUT POST DELETE methods

     

    GraphQL

    Data query and manipulating language for APIs

    • Request specific data points
    •  Strongly typed
    • Less maintenance than REST
    • Apollo is a popular GraphQL client

     

    Authentication and Authorization

    Authentication is the process of identifying an individual generally before login or action taken by him on a web page and Authorization pertains to the permissions that individual has to access some content on a page. The following topics must be considered knowing for both authentication an authorization.

    • JSON web tokens
    • Cookies and sessions
    • OAuth ( Login via google, twitter, Github)
    • Authorization Libraries ( Passport, Grant, etc)
    • Password hashing ( Bcrypt )
    • Protecting endpoints and routes

     

    Deploying FullStack Projects and DevOps

    Hosting platforms

    • – AWS (generally used for Big Apps)
      – Heroku ( easy to use | Runs on dino )
      – Digital Ocean ( cloud servers here are called droplets | based on linux )
      – linode
    • Server Software
      – Apache
      – NGINX (easy to work with )
    • Containers and virtualization | Devops
      – Docker ( popular | os level virtualization )
      – Kubernetes
    • Image & Video
      – Cloudinary (stores and optimizes images for frontend dev)
      – Amazon S3 ( part of AWS )

     

    Backend Developer skills

    • Comfortable with a server-side programming language
    • Know how to manage and setup a database and ORM/ ODM
    • Know how to create REST APIs and implement Authentication
    • Comfortable with the terminal and Unix commands
    • Know how to deploy projects and work with servers

     

    Mobile development

    • React Native
      – React Based
      – Code Reusability
      – Large community
    • Flutter
      – Dart Programming language
      – Extremely Fast
      – Strong Documentation
    • Ionic
      – use any framework
      – Pre-designed UI components
    • Xamarin
      – Mobile Apps with .NET and C#
      – Cross-Platform Apps
      – High performance

    These technologies cover up the roadmap for web development 2022. Keep following cadlearner.com for more updates on web development. Also consider subscribing our youtube channel CadLearner  for projects based on web development. We are a team of professionals who train upcoming developers in coding and help the build great careers. Feel free to contact us to get one to one sessions online on Web Development Technologies.

     

     

    Tag:coding guide, creating a website, how to become a web developer, how to code, Learn Coding, web development guide, web development roadmap

    • Share:
    Ashish Singh
    Ashish Singh

    Previous post

    WHAT MAKES A GOOD WEBSITE?
    February 3, 2022

    You may also like

    Graphic design
    Graphic Design Roadmap for 2021
    27 April, 2021

    Leave A Reply Cancel reply

    You must be logged in to post a comment.

    Recent Posts

    • Web Development Roadmap 2022
    • WHAT MAKES A GOOD WEBSITE?
    • 6 sites for color palettes

    Recent Comments

      Archives

      • February 2022
      • May 2021
      • April 2021
      • July 2020

      (+91) 9817007177

      cadlearneronline@gmail.com

      COMPANY

      • Home
      • Blog
      • About Us
      • Contact Us

      SUPPORT

      • My account
      • Profile
      • Members
      • Register

      © Copyright 2020 All Rights Reserved With Cadlearner.com

      Login with your site account

      Lost your password?

      Not a member yet? Register now

      Register a new account

      Are you a member? Login now