web developer roadmap Download - web developer roadmap Source code download

web developer roadmap

Website data

1.0.0

Download

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,

Database
Backend
Frontend
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.

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

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