Web Developer Roadmap

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

How to Learn Web development?

A web development can be divided into four different parts,

1. Database
2. Backend
3. Frontend
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 - Basic linux commands, Version control, Web technologies and coding conventions
• Sprint 2 - Docker, Databases and PHP
• Sprint 3 - Golang
• Sprint 4 - Node.js
• Sprint 5 - Vue.js
• Sprint 6 - Useful concepts

Sprint 1 - Basic linux commands, Version control, Web technologies and coding conventions

Practical 1.1 - Basic commands and Version control

• Write a commands for following operations in terminal

  • List all files with details in directory
  • Give only read permission to any file
  • Give all read and write permissions to any file
  • Get IP address of own pc
  • Observe disk space usage
  • View previously executed commands history
  • Linux command to install/uninstall PHP
  • Linux command to start/stop mysql service
  • Write and save any file from terminal

• Perform following operations in gitlab

  • Create a repository to GitLab
  • Check git status of repository
  • Commit new/updated files into a git repository
  • Push in a git repository
  • Pull new changes from repository
  • Checkout new branch
  • Merge branch into another
  • Rebase and Squash
  • Create merge request
  • Write a command to clone this repo

References

• Basic linux commands

• 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 - Basic web technologies with coding conventions

• UI design with coding standards
  • 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
  • What is Flexbox?
  • Bootstrap from Frontend libraries in Free Code Camp
  • Finish Responsive web design certification course from Free Code Camp

• Code formatting and best practices

  • 25 Most Used VS Code Shortcuts
  • Code formatting in VS Code
  • Web development best practices

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
  • Create a table named teachers with fields id, first_name, last_name, subject, interests etc... and insert data into it
  • Create table teachers_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.
  • Find a student who has higest presence
  • Get all student's and teacher's first_name, last_name, full_name, interest, standard, subject and total absence.

• 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
• Mysql Subquery and Union query

Practical 2.3

• Create a Blog application with following requirements using PHP
  • 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 first)

References

• PHP: Language Reference
• PHP: Introduction
• Coding standard

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 Music App 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

• gofmt

• Best practicies

• 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 App with given requirements

References

• yarn

• npm

• yarn vs npm

• node

• Why node.js?

• Basic concepts:

  • CommonJS and ESModule
  • Console
  • Scope
  • 'this' keyword part 1
  • 'this' keyword part 2
  • Understanding package.json
  • Import/export require
  • Callbacks
  • async-await
  • async.waterfall()
  • Ref
  • Event loop
  • Node mailer to send emails
  • Best practices

• Express.js

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

Sprint 5 - Vue.js

Practical 5.1

• Implement frontend of Ecommerce App using Vue.js with given requirements

References

• Get started with Vue.js

• Tailwind css for beginners

• Tailwind css tutorial

• Pinia

• 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
  • State management

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
• SSH, SSL, certificates and keys

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