/web-developer-roadmap

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

Web Developer Roadmap

web 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

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

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

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

Sprint 2 - Docker, Databases and PHP

Practical 2.1

  • Install MySQL using Docker
  • Install MongoDB using Docker

References

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

Practical 2.3

  • Create a Blog application with following requirements using PHP
    • It should have two sides
        1. Admin
        1. 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

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

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

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

Sprint 4 - Node.js

Practical 4.1

  • Implement one-one real time chat application

Practical 4.2

References

Sprint 5 - Vue.js

Practical 5.1

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

Cloud

Additional