Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/canopas/web-developer-roadmap-2023

Web Developer Roadmap 2023 is a path to understand web development including frontend, backend and cloud.
https://github.com/canopas/web-developer-roadmap-2023

2023 backend backend-development database developer-roadmap development-roadmap docker frontend frontend-development golang html javascript linux-command php reactjs typescript vuejs web web-development web-development-roadmap

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
Web Developer Roadmap 2023



![web roadmap](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/title_image.png)



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,



1. Database

2. Backend

3. Frontend

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



# Table of contents



- [Useful references](https://github.com/canopas/web-developer-roadmap-2023#useful-references)

- [Basic commands and Version Control](https://github.com/canopas/web-developer-roadmap-2023#basic-commands-and-version-control)

  - [Practical 1 - Basic commands](https://github.com/canopas/web-developer-roadmap-2023#practical-1)

- [HTML/CSS](https://github.com/canopas/web-developer-roadmap-2023#htmlcss)

  - [Practical 2 - Static UI](https://github.com/canopas/web-developer-roadmap-2023#practical-2)

  - [Practical 3 - Responsive UI](https://github.com/canopas/web-developer-roadmap-2023#practical-3)

  - [Practical 4 - Tailwind CSS](https://github.com/canopas/web-developer-roadmap-2023#practical-4)

  - [Practical 5 - Animations](https://github.com/canopas/web-developer-roadmap-2023#practical-5)

- [Docker](https://github.com/canopas/web-developer-roadmap-2023#docker)

  - [Practical 6 - Docker commands](https://github.com/canopas/web-developer-roadmap-2023#practical-6)

- [Database](https://github.com/canopas/web-developer-roadmap-2023#database)

  - [Practical 7 - Mysql](https://github.com/canopas/web-developer-roadmap-2023#practical-7)

  - [Practical 8 - MongoDB](https://github.com/canopas/web-developer-roadmap-2023#practical-8)

- [Javascript](https://github.com/canopas/web-developer-roadmap-2023#javascript)

  - [Practical 9 - Random Quote Generator](https://github.com/canopas/web-developer-roadmap-2023#practical-9)

  - [Practical 10 - Interactive Form Validation](https://github.com/canopas/web-developer-roadmap-2023#practical-10)

- [Typescript](https://github.com/canopas/web-developer-roadmap-2023#typescript)

  - [Practical 11 - BMI Calculator](https://github.com/canopas/web-developer-roadmap-2023#practical-11)

  - [Practical 12 - File Uploader](https://github.com/canopas/web-developer-roadmap-2023#practical-12)

- [NodeJS](https://github.com/canopas/web-developer-roadmap-2023#nodejs)

  - [Practical 13 - Real-time group chat application](https://github.com/canopas/web-developer-roadmap-2023#practical-13)

  - [Practical 14 - Firebase quiz application](https://github.com/canopas/web-developer-roadmap-2023#practical-14)

  - [Practical 15 - E-commerce Auth APIs](https://github.com/canopas/web-developer-roadmap-2023#practical-15)

  - [Practical 16 - E-commerce Product APIs](https://github.com/canopas/web-developer-roadmap-2023#practical-16)

- [VueJS](https://github.com/canopas/web-developer-roadmap-2023#vuejs)

  - [Practical 17 - E-commerce Admin panel](https://github.com/canopas/web-developer-roadmap-2023#practical-17)

  - [Practical 18 - E-commerce Website](https://github.com/canopas/web-developer-roadmap-2023#practical-18)

- [Golang](https://github.com/canopas/web-developer-roadmap-2023#golang)

  - [Practical 19 - Music APP Auth and Admin APIs](https://github.com/canopas/web-developer-roadmap-2023#practical-19)

  - [Practical 20 - Music APP User apis](https://github.com/canopas/web-developer-roadmap-2023#practical-20)

  - [Practical 21 - Unit tests and Documentation](https://github.com/canopas/web-developer-roadmap-2023#practical-21)

- [ReactJS](https://github.com/canopas/web-developer-roadmap-2023#reactjs)

  - [Practical 22 - Music APP Admin panel](https://github.com/canopas/web-developer-roadmap-2023#practical-22)

  - [Practical 23 -  Music App Website](https://github.com/canopas/web-developer-roadmap-2023#practical-23)

 

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



- [Command line interface - CLI](https://ubuntu.com/tutorials/command-line-for-beginners#4-creating-folders-and-files)

- [Version control system - VCS](https://about.gitlab.com/topics/version-control/) and [Git](https://about.gitlab.com/topics/version-control/what-is-git-version-control/)

- [Backend vs Frontend](https://www.geeksforgeeks.org/frontend-vs-backend/)

- [Document object model - DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

- [REST APIs](https://blog.postman.com/rest-api-examples/)

- [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON)

- [Coding standards](https://www.geeksforgeeks.org/coding-standards-and-guidelines/)

- [Docker](https://www.ibm.com/topics/docker)

- [Cloud](https://www.cloudflare.com/en-gb/learning/cloud/what-is-the-cloud/) and [AWS](https://www.guru99.com/what-is-aws.html)



# 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](https://github.com/canopas/web-developer-roadmap-2023) repo



# HTML/CSS



## Practical 2



- Static UI

  

  - Create an HTML project and design a static UI given in [reference](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/static-new.png).

  - Use modern CSS properties like flex or grid to create UI.



## Practical 3



- Responsive UI

  

  - Create an HTML project and design [this](https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm) 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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/swiper.gif) 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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/spinner.gif)

    - 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](https://mongoplayground.net/) 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](https://api.whatdoestrumpthink.com/api/v1/quotes/random) 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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/ecommerce_web_app.md) 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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/ecommerce_web_app.md) requirements.

  - Can use readymade templates.

  - Use [nodeJS](https://github.com/canopas/web-developer-roadmap-2023#7-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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/music_app.md) 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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/music_app.md)

    - 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](https://github.com/canopas/web-developer-roadmap-2023/blob/main/music_app.md) requirements

  - Can use readymade templates

  - Use [Golang](https://github.com/canopas/web-developer-roadmap-2023#9-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](https://open.spotify.com/) UI.

  - Allow users to favorite/unfavourite tracks if they have logged-in otherwise redirect to the login page on click on favorite/unfavourite