Web Developer Roadmap 2022

Web Developer Roadmap 2022 is a learning path to understand web development, including frontend, backend and cloud(AWS).

How to Learn Web development?

In web development, there are mainly four ends.

1. Backend
2. Frontend
3. Database
4. Cloud(server)

This roadmap consists of widely used technologies/frameworks for frontend and backend. It also includes overview about cloud(AWS) and some information about server.

Table of contents

• Sprint 1
• Sprint 2
• Sprint 3
• Sprint 4
• Sprint 5
• Sprint 6

Sprint 1 - Version control, Basic web technologies and coding conventions

Practical 1.1

• Perform following operations in gitlab
  • Create a repository to GitLab
  • Add new files into a git repository
  • Modify some files and commit them into a git repository
  • Push in a git repository
  • Create Commits, tags, and branches
  • Checkout new branch
  • Merge branch into another
  • Rebase
  • Create merge request

References

• What Is Version Control?
• How to use git
  • Version control with git
  • Git: The Beginner's Guide to Understanding Core Version Control Concepts
  • Git commands

Practical 1.2

• UI Design
  • Design static UI given in the link
  • Design responsive UI given in the link

References

• HTML5

  • Web development bootcamp course on udemy - section 2 and 3
  • Basic HTML and HTML5 from Free Code Camp

• CSS3

  • Web development bootcamp course on udemy - section 4 and 5
  • Bootstrap from Web development bootcamp course on udemy - section 6 and 8
  • Bootstrap from Frontend libraries in Free Code Camp
  • Flexbox
  • Finish Responsive web design certification course from Free Code Camp

Practical 1.3

• Unit converter
  • Create a unit converter that should take input from users and output the value in the asked unit (conversion units can be centimeters, meters, and kilometers)

References

• Javascript & jQuery

  • Basic javascript from Web development bootcamp course on udemy - section 9 and 10
  • Basic javascript, ES6, Regular expressions, and Debugging from Free Code Camp
  • Web development bootcamp course on udemy - section 11 and 13
  • JSON, APIs, and ajax from Free Code Camp
  • Finish Javascript algorithms and data structures from Free Code Camp
  • Web development bootcamp course on udemy - section 14 to 16
  • Finish Frontend libraries projects from Free Code Camp
  • Difference between == and ===
  • Basics of jQuery

• Coding conventions

  • Coding standards-1
  • Coding standards-2

Sprint 2 - Docker, Databases and PHP

Practical 2.1

• Install MySQL using Docker
• Install MongoDB using Docker

References

• What is docker
• Getting started with docker
• Install MySQL using Docker
• Install MongoDB using Docker

Practical 2.2

• Perform following queries in MySQL

  • Create a table named students with fields id, first_name, last_name, standard, percentage, interest, etc... and insert data into it
  • Create table student_attendances with fields id, created_at, presence/absence fields and insert data into it
  • Prepare queries to find student's presence/absence on a particular day
  • Find total absence/presence of every student
  • Find absent students with a percentage lower than 70.

• Perform following queries in MongoDB (Can use MongoDBPlayground to peform queries)

  • Create a collection named students with fields id, first_name, last_name, standard, percentage, interest, etc... and insert data into it
  • Form a query to find students with a percentage lower than 70 and interest in sport.
  • Count the total students with a percentage above 70

References

• Web Development Bootcamp course udemy - section 24 and 25

Practical 2.3

• Create a Blog application with following requirements
  • It should have two sides
    • 1. Admin
    • 2. User
  • Implement Register and login functionality for both user and admin
  • Admin can add posts ( post fields - title, description, created_date, author, category, image )
  • Admin can decide which user can see the post
  • Added Posts will be visible on user side (latest posts first)

References

• PHP: Language Reference
• PHP: Introduction

Basic Concepts

• Installation WAMP/MAMP/XAMPP
• How it exactly works ?
• Basic Syntax
• Variables, Constants, Operators & Control Structures
• Conditions, Loops, Switch cases
• Arrays, String and various string functions
• Functions
• Includes & Required
• Classes & Objects & Constructors
• Namespaces
• Extensions
• Exceptions
• JSON Encode & Decode
• Sessions
• Cookies
• File Manipulation
• Indexed Array vs Associative Array
• Object vs stdObject
• Timeout of PHP script

Predefined variables

• http://php.net/manual/en/reserved.variables.php
• $GLOBAL
• $_SERVER
• $_GET
• $_POST
• $_FILES
• $_REQUEST
• $_SESSION
• $_COOKIE

Advanced options

• Interfaces
• Traits
• Crons
• Composer
• php.ini tweaks

Keywords

• Private
• Public
• Static

Sprint 3 - Golang

Practical 3.1

• Implement APIs for music application with given requirements

Basic concepts

• Why Go?

• Run the hello world program in Go

• Go modules

• Gin framework

• Constants, variable types

• Functions, multi return functions, init()

• Packages and import

• Conditional Statements and Loops

• Arrays and slices

• Pointers, structs, and methods

• Error handling

• Others

  • JWT
  • JSON
  • REST API

Advance concepts

• Maps in Go
• Concurrency and Goroutine
• defer
• Error handling
• Panic and recover
• Reflection
• Type conversion
• File manipulations
• Logging
• Authentication with JWT (JSON Web Token)

Packages

• Gin
• Mysql package
• net/http
• File compressor
• Logging
• Mongodb
• ioutil
• os
• strings
• parse static file to binary
• null value handler
• JWT
• socket.io
• sentry

Sprint 4 - Node.js

Practical 4.1

• Implement one-one real time chat application

Practical 4.2

• Implement an Ecommerce Web application with given requirements

References

• npm

• node

• Why node.js?

• Basic concepts:

  • Console
  • Scope
  • 'this' keyword part 1
  • 'this' keyword part 2
  • Understanding package.json
  • Importing exporting require
  • Callbacks
  • async-await
  • async.waterfall()
  • Ref
  • Event loop
  • Node mailer to send emails

• Express.js

  • Installation
  • Express Generator
  • Routing
  • Host static files
  • Template engine(ejs)
  • Body parser

Sprint 5 - Vue.js

Practical 5.1

• Implement an Ecommerce App using Vue.js with given requirements

References

• Get started with Vue.js

• Concepts

  • What is vue.js ?
  • Getting started
  • Installation
  • Application and component instances
  • Template syntax
  • Data properties and Methods
  • Computed Properties and Watchers
  • Class and Style Bindings
  • Conditional rendering, conditional style binding
  • List rendering
  • Event Handling
  • Form input bindings
  • Component Basics
  • Props
  • Component registration
  • Slots
  • Template refs

Sprint 6 - Useful concepts

Concepts

• Http Protocols
• Asynchronous vs synchronous behaviour
• Caching(Understanding of Redis)
• Testing : unit and feature testing overview
• Docker in detail
• Nginx vs Apache server
• Server Login with Password/SSH Keys
• IP tables
• Php-fpm and httpd
• Basic linux commands

Cloud

• What is AWS?
• S3
• EC2
• RDS
• Elasticache
• Route 53
• SES
• Cloudwatch
• VPC
• AWS Lamda
• AWS API Gateway
• Microservices
• What are microservices? How AWS implement it?
• Microservices implementation using Go

Additional

• Golang roadmap
• NodeJS roadmap