Web Developer Roadmap 2023

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

How to Learn Web Development?

Web development can be divided into four different parts,

Database
Backend
Frontend
Cloud(server)

Guidelines

Before starting any practical it's important to conduct research and learn the necessary concepts.
As you progress through the practical exercises, make sure to apply the new knowledge you've gained in subsequent exercises.
Follow the best practices and coding standards of particular languages for implementation.

Useful references

These references provide basic knowledge, that is necessary before diving into web development and serve as starting points for beginners. If you have prior knowledge and experience in web development, feel free to skip this section.

Basic commands and Version Control

Practical 1

Perform the following commands on the terminal and write them down for review,

Basic commands
- List all files with details in the directory
- Give only read permission to any file
- Give all read and write permissions to any file
- Get the IP address of your 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 the terminal
Version Control
- Add files to git
- Check git remotes
- Fetch remote branches
- Delete branch
- Check the git status of the repository
- Commit new/updated files into a git repository
- Push in a git repository
- Pull new changes from the repository
- Checkout new branch
- Merge branch into another
- See commit history
- Write a command to clone this repo

HTML/CSS

Practical 2

Static UI
- Create an HTML project and design a static UI given in reference.
- Use modern CSS properties like flex or grid to create UI.

Practical 3

Responsive UI
- Create an HTML project and design this UI.
- UI should be responsive for mobile and desktop devices.
- Use modern CSS properties like flex or grid to create UI.

Practical 4

Tailwind css
- Configure tailwindcss in the project.
- Create given responsive UI using swiper and tailwindcss.
- UI should be responsive till 4k devices.

Practical 5

Animations
- CSS Hover Effects:
  - Implement creative hover effects on given elements.
    - Button: Change background and text color on hover
    - Link: Add underline floating from left to right on hover
    - Image: Rotate the left image on hover
  - Utilize CSS transitions, transforms, or animations to add interactive and visually appealing effects when the user hovers over the elements.
- CSS Text Effects:
  - Implement various text effects using CSS animations or transitions.
  - Examples include text color changes, text rotations, text scaling, or text fading.
  - Play around with different timing functions and animation properties to create visually appealing text effects.
- Loading Spinner:
  - Create the spinner given in the link
  - Use keyframe animations or CSS transforms to create an effect.
  - Customize the spinner's appearance and experiment with different animation properties to achieve the desired effect.
- Bounce up and down the circle by clicking on the button
  - Utilize CSS transitions, transforms, or animations to add interactive and visually appealing effects when the user hovers over the elements.
  - Customize the circle's appearance and experiment with different animation properties to achieve the desired effect.

Docker

Practical 6

Perform following commands

Pull the latest mysql and nginx image
List the docker images
List the docker volumes
Run the nginx container on 8000 port
Run mysql container on 3307 port with volume
List the currently running containers
List the file with its details inside the nginx container
Stop nginx container
Remove nginx container and image
Show logs of the docker container
Show the latest 100 logs of the docker container
Setup docker swarm
Create a docker container with the help of the docker service

Database

Practical 7

Perform the 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, student_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, teacher_id, created_at, presence/absence fields and insert data into it
- Find the student's presence/absence on a particular day
- Find the total absence/presence of every student
- Find absent students with a percentage lower than 70.
- Find a student who has the highest presence
- Get all student's and teacher's first_name, last_name, full_name, interest, standard, subject and total absence.

Practical 8

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
- Create table student_attendances with fields id, student_id, created_at, presence/absence fields and insert data into it
- Find students with a percentage lower than 70 and an interest in sports.
- Find the total attadence of students who have not interest in sport but interest in reading.
- Count the total students with a percentage above 80

JavaScript

Practical 9

Random Quote Generator
- Use random quotes API and get random quotes.
- Display random technical quotes each time when the user refreshes the page or clicks a button.

Practical 10

Interactive Form Validation
- Create a form containing fields like name, email, phone, and password with a placeholder.
- Implement form validation using JavaScript.
- Validate input fields for required values, email formats, password strength, and other criteria. - Display error messages for invalid inputs in red color.
- If all validations pass, submit button click should insert the data into the table (without refreshing the page - Use AJAX) and show a popup with a success message

TypeScript

Practical 11

BMI Calculator
- Build a BMI (Body Mass Index) calculator that takes a person's weight and height as input and calculates their BMI.
- Add appropriate validations for input fields.
- Use TypeScript to define the data types for the inputs and outputs and provide a meaningful interpretation of the result.

Practical 12

File Uploader
- Implement a file uploader that allows users to upload files to a server.
- Allow only pdf and doc files.
- Max filesize should be 10kb.
- Display progress indicators during the upload process.
- Show the File uploaded successfully message after the upload

NodeJS

Practical 13

Real-time group chat application
- Build a real-time group chat application using Node.js, TypeScript, and a library like Socket.IO.
- Allow users to join chat rooms, send messages, and receive messages in real time.

Practical 14

Quiz Application with Firebase Realtime Database
- The application flow will be,
  - Authenticate users with firebase authentication
  - Create quiz
    - Allow authenticated users to create quiz category wise(Like science, entertainment etc...) with MCQ and their correct answers.
  - Play quiz
    - Allow authenticated users to play quiz.
    - They can play quiz based on selected category.
    - Display scores instantly as they answer questions.

Practical 15

E-commerce App authorization and admin APIs
Implementation specifications: express.js, typescript, and sequelize with PostgreSQL
- Review Ecommerce App requirements.
- Create the following REST APIs
  - Admin SignUp/SignIn
  - User SignUp/SignIn - Send mail to the users after signUP from API only
  - Admin APIs - Only authenticated admins can access these APIs
    - Create/Update/Delete categories
    - Create/Update/Delete subcategories
    - Create/Update/Delete products

Practical 16

Ecommerce App user apis (continue Practical 15)
Implementation specifications: express.js, typescript, and sequelize with PostgreSQL
- Create the following User REST APIs - Only authenticated users can access these APIs
  - FindAll/FindOne categories, subcategories, products
  - Get products of a given category/subcategory
  - Search product from given string with name, price
  - Favourite/Unfavorite products
  - Send feedback mail to the admin.

VueJS

Practical 17

E-commerce Admin panel
Implementation specifications: tailwind, vite, `vuex or pinia
- Review Ecommerce App requirements.
- Can use readymade templates.
- Use nodeJS APIs to handle the data
- Create registration/Login forms with all validations.
- Admin should be able to create, update, delete, and view categories, subcategories, and products.
- Admin should be able to see all users.
- Implement logout functionality.

Practical 18

E-commerce website
Implementation specifications: tailwind, vite, vuex or pinia
- Create a website where users can see a list of products.
- User should be able to filter products by categories and subcategories.
- Create registration/Login forms with all validations.
- LoggedIn users can favorite/unfavourite products.
- Implement logout functionality.

Golang

Practical 19

Music APP authorization and admin APIs
Implementation specifications: JWT for authentication, sqlx or gorm, gin
- Review Music APP requirements
- Use concepts of golang like go modules, generics, concurrency, etc…
- Create the following REST APIs
  - Admin Register/Login
  - User Register/Login
  - Admin APIs - Only authenticated admins can access these APIs
    - Create/Read/Update/Delete artist
    - Create/Read/Update/Delete album
    - Create/Read/Update/Delete track
    - Create/Read/Update/Delete playlist
    - Add/Remove tracks to/from the album
    - Add/Remove tracks to/from the playlist
    - Get all users

Practical 20

Music APP user apis (continue Practical 19)
Implementation specifications: JWT for authentication, sqlx or gorm, gin
- Create the following User REST APIs - Only authenticated users can access these APIs
  - Fetch all albums
  - Fetch all tracks
  - Fetch all tracks by album Id
  - Fetch all playlists
  - Get the playlist and its tracks by playlist id
  - Favourite/unfavourite tracks
  - Retrieve favorite/unfavourite tracks of own

Practical 21

Unit tests and Documentation (continue Practical 20)
- Write a test for all errors and successful response
- Write unit test for the following APIs from Music APP
  - Create playlist
  - Delete track
  - Get the playlist and its tracks by playlist id
  - Favourite/unfavourite tracks
- Write API documentation for the given APIs.
  - Should contain the following fields
    - Method
    - Endpoint
    - Path params/Query params
    - Description
    - Header
    - Request
    - Response

ReactJS

Practical 22

Music App Admin panel
Implementation specifications: tailwind, vite, and typescript
- Review Music APP requirements
- Can use readymade templates
- Use Golang APIs to handle the data
- Create an admin panel that will cover all the admin APIs.

Practical 23

Music App Website
Implementation specifications: tailwind, vite, and typescript
- Create a web app that will cover all User APIs.
- Can refer spotify UI.
- Allow users to favorite/unfavourite tracks if they have logged-in otherwise redirect to the login page on click on favorite/unfavourite

canopas/web-developer-roadmap-2023