├── LICENSE ├── README.md ├── ecommerce_web_app.md ├── images ├── spinner.gif ├── static-new.png ├── swiper.gif └── title_image.png └── music_app.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Canopas 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Web Developer Roadmap 2023

2 | 3 | ![web roadmap](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/title_image.png) 4 | 5 | Web Developer Roadmap 2023 is a learning path to understand web development, including frontend, backend, and cloud(AWS). 6 | 7 | ## How to Learn Web Development? 8 | 9 | Web development can be divided into four different parts, 10 | 11 | 1. Database 12 | 2. Backend 13 | 3. Frontend 14 | 4. Cloud(server) 15 | 16 | ## Guidelines 17 | 18 | - Before starting any practical it's important to conduct research and learn the necessary concepts. 19 | 20 | - As you progress through the practical exercises, make sure to apply the new knowledge you've gained in subsequent exercises. 21 | - Follow the `best practices` and `coding standards` of particular languages for implementation. 22 | 23 | # Table of contents 24 | 25 | - [Useful references](https://github.com/canopas/web-developer-roadmap-2023#useful-references) 26 | - [Basic commands and Version Control](https://github.com/canopas/web-developer-roadmap-2023#basic-commands-and-version-control) 27 | - [Practical 1 - Basic commands](https://github.com/canopas/web-developer-roadmap-2023#practical-1) 28 | - [HTML/CSS](https://github.com/canopas/web-developer-roadmap-2023#htmlcss) 29 | - [Practical 2 - Static UI](https://github.com/canopas/web-developer-roadmap-2023#practical-2) 30 | - [Practical 3 - Responsive UI](https://github.com/canopas/web-developer-roadmap-2023#practical-3) 31 | - [Practical 4 - Tailwind CSS](https://github.com/canopas/web-developer-roadmap-2023#practical-4) 32 | - [Practical 5 - Animations](https://github.com/canopas/web-developer-roadmap-2023#practical-5) 33 | - [Docker](https://github.com/canopas/web-developer-roadmap-2023#docker) 34 | - [Practical 6 - Docker commands](https://github.com/canopas/web-developer-roadmap-2023#practical-6) 35 | - [Database](https://github.com/canopas/web-developer-roadmap-2023#database) 36 | - [Practical 7 - Mysql](https://github.com/canopas/web-developer-roadmap-2023#practical-7) 37 | - [Practical 8 - MongoDB](https://github.com/canopas/web-developer-roadmap-2023#practical-8) 38 | - [Javascript](https://github.com/canopas/web-developer-roadmap-2023#javascript) 39 | - [Practical 9 - Random Quote Generator](https://github.com/canopas/web-developer-roadmap-2023#practical-9) 40 | - [Practical 10 - Interactive Form Validation](https://github.com/canopas/web-developer-roadmap-2023#practical-10) 41 | - [Typescript](https://github.com/canopas/web-developer-roadmap-2023#typescript) 42 | - [Practical 11 - BMI Calculator](https://github.com/canopas/web-developer-roadmap-2023#practical-11) 43 | - [Practical 12 - File Uploader](https://github.com/canopas/web-developer-roadmap-2023#practical-12) 44 | - [NodeJS](https://github.com/canopas/web-developer-roadmap-2023#nodejs) 45 | - [Practical 13 - Real-time group chat application](https://github.com/canopas/web-developer-roadmap-2023#practical-13) 46 | - [Practical 14 - Firebase quiz application](https://github.com/canopas/web-developer-roadmap-2023#practical-14) 47 | - [Practical 15 - E-commerce Auth APIs](https://github.com/canopas/web-developer-roadmap-2023#practical-15) 48 | - [Practical 16 - E-commerce Product APIs](https://github.com/canopas/web-developer-roadmap-2023#practical-16) 49 | - [VueJS](https://github.com/canopas/web-developer-roadmap-2023#vuejs) 50 | - [Practical 17 - E-commerce Admin panel](https://github.com/canopas/web-developer-roadmap-2023#practical-17) 51 | - [Practical 18 - E-commerce Website](https://github.com/canopas/web-developer-roadmap-2023#practical-18) 52 | - [Golang](https://github.com/canopas/web-developer-roadmap-2023#golang) 53 | - [Practical 19 - Music APP Auth and Admin APIs](https://github.com/canopas/web-developer-roadmap-2023#practical-19) 54 | - [Practical 20 - Music APP User apis](https://github.com/canopas/web-developer-roadmap-2023#practical-20) 55 | - [Practical 21 - Unit tests and Documentation](https://github.com/canopas/web-developer-roadmap-2023#practical-21) 56 | - [ReactJS](https://github.com/canopas/web-developer-roadmap-2023#reactjs) 57 | - [Practical 22 - Music APP Admin panel](https://github.com/canopas/web-developer-roadmap-2023#practical-22) 58 | - [Practical 23 - Music App Website](https://github.com/canopas/web-developer-roadmap-2023#practical-23) 59 | 60 | # Useful references 61 | 62 | 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. 63 | 64 | - [Command line interface - CLI](https://ubuntu.com/tutorials/command-line-for-beginners#4-creating-folders-and-files) 65 | - [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/) 66 | - [Backend vs Frontend](https://www.geeksforgeeks.org/frontend-vs-backend/) 67 | - [Document object model - DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 68 | - [REST APIs](https://blog.postman.com/rest-api-examples/) 69 | - [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) 70 | - [Coding standards](https://www.geeksforgeeks.org/coding-standards-and-guidelines/) 71 | - [Docker](https://www.ibm.com/topics/docker) 72 | - [Cloud](https://www.cloudflare.com/en-gb/learning/cloud/what-is-the-cloud/) and [AWS](https://www.guru99.com/what-is-aws.html) 73 | 74 | # Basic commands and Version Control 75 | 76 | ## Practical 1 77 | 78 | Perform the following commands on the terminal and write them down for review, 79 | 80 | - Basic commands 81 | - List all files with details in the directory 82 | - Give only read permission to any file 83 | - Give all read and write permissions to any file 84 | - Get the IP address of your own pc 85 | - Observe disk space usage 86 | - View previously executed commands history 87 | - Linux command to install/uninstall PHP 88 | - Linux command to start/stop mysql service 89 | - Write and save any file from the terminal 90 | 91 | - Version Control 92 | - Add files to git 93 | - Check git remotes 94 | - Fetch remote branches 95 | - Delete branch 96 | - Check the git status of the repository 97 | - Commit new/updated files into a git repository 98 | - Push in a git repository 99 | - Pull new changes from the repository 100 | - Checkout new branch 101 | - Merge branch into another 102 | - See commit history 103 | - Write a command to clone [this](https://github.com/canopas/web-developer-roadmap-2023) repo 104 | 105 | # HTML/CSS 106 | 107 | ## Practical 2 108 | 109 | - Static UI 110 | 111 | - 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). 112 | - Use modern CSS properties like flex or grid to create UI. 113 | 114 | ## Practical 3 115 | 116 | - Responsive UI 117 | 118 | - Create an HTML project and design [this](https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm) UI. 119 | - UI should be responsive for mobile and desktop devices. 120 | - Use modern CSS properties like flex or grid to create UI. 121 | 122 | ## Practical 4 123 | 124 | - Tailwind css 125 | 126 | - Configure tailwindcss in the project. 127 | - Create [given](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/swiper.gif) responsive UI using swiper and tailwindcss. 128 | - UI should be responsive till 4k devices. 129 | 130 | ## Practical 5 131 | 132 | - Animations 133 | 134 | - CSS Hover Effects: 135 | - Implement creative hover effects on given elements. 136 | - **Button:** Change background and text color on hover 137 | - **Link:** Add underline floating from left to right on hover 138 | - **Image:** Rotate the left image on hover 139 | - Utilize CSS transitions, transforms, or animations to add interactive and visually appealing effects when the user hovers over the elements. 140 | 141 | - CSS Text Effects: 142 | - Implement various text effects using CSS animations or transitions. 143 | - Examples include text color changes, text rotations, text scaling, or text fading. 144 | - Play around with different timing functions and animation properties to create visually appealing text effects. 145 | 146 | - Loading Spinner: 147 | - Create the spinner given in the [link](https://github.com/canopas/web-developer-roadmap-2023/blob/main/images/spinner.gif) 148 | - Use keyframe animations or CSS transforms to create an effect. 149 | - Customize the spinner's appearance and experiment with different animation properties to achieve the desired effect. 150 | 151 | - Bounce up and down the circle by clicking on the button 152 | - Utilize CSS transitions, transforms, or animations to add interactive and visually appealing effects when the user hovers over the elements. 153 | - Customize the circle's appearance and experiment with different animation properties to achieve the desired effect. 154 | 155 | # Docker 156 | 157 | ## Practical 6 158 | 159 | Perform following commands 160 | 161 | - Pull the latest mysql and nginx image 162 | - List the docker images 163 | - List the docker volumes 164 | - Run the nginx container on 8000 port 165 | - Run mysql container on 3307 port with volume 166 | - List the currently running containers 167 | - List the file with its details inside the nginx container 168 | - Stop nginx container 169 | - Remove nginx container and image 170 | - Show logs of the docker container 171 | - Show the latest 100 logs of the docker container 172 | - Setup docker swarm 173 | - Create a docker container with the help of the docker service 174 | 175 | # Database 176 | 177 | ## Practical 7 178 | 179 | - Perform the following queries in **MySQL** 180 | 181 | - Create a table named `students` with fields id, first_name, last_name, standard, percentage, interest, etc… and insert data into it 182 | - Create table `student_attendances` with fields id, student_id, created_at, presence/absence fields and insert data into it 183 | - Create a table named `teachers` with fields id, first_name, last_name, subject, interests, etc… and insert data into it 184 | - Create table `teachers_attendances` with fields id, teacher_id, created_at, presence/absence fields and insert data into it 185 | - Find the student's presence/absence on a particular day 186 | - Find the total absence/presence of every student 187 | - Find absent students with a percentage lower than 70. 188 | - Find a student who has the highest presence 189 | - Get all student's and teacher's first_name, last_name, full_name, interest, standard, subject and total absence. 190 | 191 | ## Practical 8 192 | 193 | - Perform following queries in **MongoDB** (Can use [MongoDBPlayground](https://mongoplayground.net/) to peform queries) 194 | 195 | - Create a collection named `students` with fields id, first_name, last_name, standard, percentage, interest, etc… and insert data into it 196 | - Create table `student_attendances` with fields id, student_id, created_at, presence/absence fields and insert data into it 197 | - Find students with a percentage lower than 70 and an interest in sports. 198 | - Find the total attadence of students who have not interest in sport but interest in reading. 199 | - Count the total students with a percentage above 80 200 | 201 | # JavaScript 202 | 203 | ## Practical 9 204 | - Random Quote Generator 205 | - Use [random quotes API](https://api.whatdoestrumpthink.com/api/v1/quotes/random) and get random quotes. 206 | - Display random technical quotes each time when the user refreshes the page or clicks a button. 207 | 208 | ## Practical 10 209 | - Interactive Form Validation 210 | - Create a form containing fields like name, email, phone, and password with a placeholder. 211 | - Implement form validation using JavaScript. 212 | - Validate input fields for required values, email formats, password strength, and other criteria. - Display error messages for invalid inputs in red color. 213 | - 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 214 | 215 | # TypeScript 216 | 217 | ## Practical 11 218 | - BMI Calculator 219 | - Build a BMI (Body Mass Index) calculator that takes a person's weight and height as input and calculates their BMI. 220 | - Add appropriate validations for input fields. 221 | - Use TypeScript to define the data types for the inputs and outputs and provide a meaningful interpretation of the result. 222 | 223 | ## Practical 12 224 | - File Uploader 225 | - Implement a file uploader that allows users to upload files to a server. 226 | - Allow only `pdf` and `doc` files. 227 | - Max filesize should be `10kb`. 228 | - Display progress indicators during the upload process. 229 | - Show the `File uploaded successfully` message after the upload 230 | 231 | # NodeJS 232 | 233 | ## Practical 13 234 | 235 | - Real-time group chat application 236 | - Build a real-time group chat application using Node.js, TypeScript, and a library like Socket.IO. 237 | - Allow users to join chat rooms, send messages, and receive messages in real time. 238 | 239 | ## Practical 14 240 | - Quiz Application with Firebase Realtime Database 241 | - The application flow will be, 242 | - Authenticate users with firebase authentication 243 | - Create quiz 244 | - Allow authenticated users to create quiz category wise(Like science, entertainment etc...) with MCQ and their correct answers. 245 | - Play quiz 246 | - Allow authenticated users to play quiz. 247 | - They can play quiz based on selected category. 248 | - Display scores instantly as they answer questions. 249 | 250 | ## Practical 15 251 | 252 | - E-commerce App authorization and admin APIs 253 | - **Implementation specifications:** `express.js`, `typescript`, and `sequelize` with PostgreSQL 254 | 255 | - Review [Ecommerce App](https://github.com/canopas/web-developer-roadmap-2023/blob/main/ecommerce_web_app.md) requirements. 256 | - Create the following REST APIs 257 | - Admin SignUp/SignIn 258 | - User SignUp/SignIn - Send mail to the users after signUP from API only 259 | - Admin APIs - Only authenticated admins can access these APIs 260 | - Create/Update/Delete categories 261 | - Create/Update/Delete subcategories 262 | - Create/Update/Delete products 263 | 264 | ## Practical 16 265 | 266 | - Ecommerce App user apis (continue Practical 15) 267 | - **Implementation specifications:** `express.js`, `typescript`, and `sequelize` with PostgreSQL 268 | - Add authentication of APIs where it is required 269 | - Create the following User REST APIs  270 | - FindAll/FindOne categories, subcategories, products 271 | - Get products of a given category/subcategory 272 | - Search product from given string with name, price 273 | - Favourite/Unfavorite products 274 | - Send feedback mail to the admin. 275 | 276 | # VueJS 277 | 278 | ## Practical 17 279 | 280 | - E-commerce Admin panel 281 | 282 | - **Implementation specifications:** `tailwind`, `vite`, `vuex or pinia 283 | 284 | - Review [Ecommerce App](https://github.com/canopas/web-developer-roadmap-2023/blob/main/ecommerce_web_app.md) requirements. 285 | - Can use readymade templates. 286 | - Use [nodeJS](https://github.com/canopas/web-developer-roadmap-2023#7-nodejs) APIs to handle the data 287 | - Create registration/Login forms with all validations. 288 | - Admin should be able to create, update, delete, and view categories, subcategories, and products. 289 | - Admin should be able to see all users. 290 | - Implement logout functionality. 291 | 292 | ## Practical 18 293 | - E-commerce website 294 | - **Implementation specifications:** `tailwind`, `vite`, `vuex or pinia` 295 | 296 | - Create a website where users can see a list of products. 297 | - User should be able to filter products by categories and subcategories. 298 | - Create registration/Login forms with all validations. 299 | - LoggedIn users can choose their favorite/unfavourite products. 300 | - Implement logout functionality. 301 | 302 | # Golang 303 | 304 | ## Practical 19 305 | 306 | - Music APP authorization and admin APIs 307 | - **Implementation specifications:** `JWT` for authentication, `sqlx or gorm`, `gin` 308 | 309 | - Review [Music APP](https://github.com/canopas/web-developer-roadmap-2023/blob/main/music_app.md) requirements 310 | - Use concepts of golang like go modules, generics, concurrency, etc… 311 | - Create the following REST APIs 312 | - Admin Register/Login 313 | - User Register/Login 314 | - Admin APIs - Only authenticated admins can access these APIs 315 | - Create/Read/Update/Delete artist 316 | - Create/Read/Update/Delete album 317 | - Create/Read/Update/Delete track 318 | - Create/Read/Update/Delete playlist 319 | - Add/Remove tracks to/from the album 320 | - Add/Remove tracks to/from the playlist 321 | - Get all users 322 | 323 | ## Practical 20 324 | 325 | - Music APP user apis (continue Practical 19) 326 | - **Implementation specifications:** `JWT` for authentication, `sqlx or gorm`, `gin` 327 | - Add authentication of APIs where it is required 328 | - Create the following User REST APIs  329 | - Fetch all albums 330 | - Fetch all tracks 331 | - Fetch all tracks by album Id 332 | - Fetch all playlists 333 | - Get the playlist and its tracks by playlist ID 334 | - Favourite/unfavourite tracks 335 | - Retrieve favorite/unfavourite tracks of own 336 | 337 | ## Practical 21 338 | 339 | - Unit tests and Documentation (continue Practical 20) 340 | 341 | - Write a test for all errors and successful response 342 | - Write unit test for the following APIs from [Music APP](https://github.com/canopas/web-developer-roadmap-2023/blob/main/music_app.md) 343 | - Create playlist 344 | - Delete track 345 | - Get the playlist and its tracks by playlist ID 346 | - Favourite/unfavourite tracks 347 | - Write API documentation for the given APIs. 348 | - Should contain the following fields 349 | - Method 350 | - Endpoint 351 | - Path params/Query params 352 | - Description 353 | - Header 354 | - Request 355 | - Response 356 | 357 | # ReactJS 358 | 359 | ## Practical 22 360 | - Music App Admin panel 361 | - **Implementation specifications:** `tailwind`, `vite`, and `typescript` 362 | 363 | - Review [Music APP](https://github.com/canopas/web-developer-roadmap-2023/blob/main/music_app.md) requirements 364 | - Can use readymade templates 365 | - Use [Golang](https://github.com/canopas/web-developer-roadmap-2023#9-golang) APIs to handle the data 366 | - Create an admin panel that will cover all the admin APIs. 367 | 368 | ## Practical 23 369 | - Music App Website 370 | - **Implementation specifications:** `tailwind`, `vite`, and `typescript` 371 | 372 | - Create a web app that will cover all User APIs. 373 | - Can refer [spotify](https://open.spotify.com/) UI. 374 | - Allow users to favorite/unfavourite tracks if they have logged in otherwise redirect to the login page while click on favorite/unfavourite 375 | -------------------------------------------------------------------------------- /ecommerce_web_app.md: -------------------------------------------------------------------------------- 1 | # E-commerce App backend using NodeJS 2 | 3 | ### Application will have two types of users : 4 | 5 | - Admin - Should have Read/Write access. 6 | - User - Should have Read access only. 7 | 8 | **Note:** Admin is also a user. Admin should have all access same as the user. Additionally, they can modify the content(categories, subcategories, products). 9 | 10 | ## Description 11 | 12 | - This E-commerce app contains products with categories and subcategories. 13 | - Example: 14 | - category: food 15 | - subcategory: Chinese, Italian, Mexican 16 | - product: Manchurian, pasta, pizza 17 | - Admin panel, 18 | - It is used to add and manage data by admins 19 | - admins can perform CRUD operations of products, categories, and subcategories 20 | - Admin should require to SignUp/SignIn to access the admin panel 21 | - On the Website, 22 | - It should be accessible to all users and provide an interactive UI for users to use our e-commerce app. 23 | - Users can see all products and filter them by categories and subcategories 24 | - Allow users to favorite/unfavourite products if they have logged-in otherwise redirect to the login page on click on favorite/unfavourite 25 | 26 | -------------------------------------------------------------------------------- /images/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/web-developer-roadmap-2023/f311c452c6c3a2a5f6224cfc1ff2a6767a07abee/images/spinner.gif -------------------------------------------------------------------------------- /images/static-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/web-developer-roadmap-2023/f311c452c6c3a2a5f6224cfc1ff2a6767a07abee/images/static-new.png -------------------------------------------------------------------------------- /images/swiper.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/web-developer-roadmap-2023/f311c452c6c3a2a5f6224cfc1ff2a6767a07abee/images/swiper.gif -------------------------------------------------------------------------------- /images/title_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/web-developer-roadmap-2023/f311c452c6c3a2a5f6224cfc1ff2a6767a07abee/images/title_image.png -------------------------------------------------------------------------------- /music_app.md: -------------------------------------------------------------------------------- 1 | # Music App 2 | 3 | ## Description 4 | 5 | - It is a Spotify-like app, which contains albums, tracks, and playlists. 6 | - Each album should have an artist. 7 | - Only authenticated users can able to favorite/unfavourite tracks. 8 | - Admin panel used to add and manage data by admins 9 | - Website provides an interactive UI for the user to use our music app 10 | 11 | ### Application will have two types of users : 12 | 13 | - Admin - Should have Read/Write access 14 | - User - Should have Read access only, except Favourite/Unfavourite functionality 15 | 16 | **Note:** Admin is also a user. Admin should have all access the same as the user. Additionally, they can modify the content. 17 | 18 | ## Models 19 | 20 | * Artist 21 | - id 22 | - name 23 | - image_url 24 | - created_at 25 | - updated_at 26 | 27 | * Album 28 | - id 29 | - name 30 | - description 31 | - image_url 32 | - published_at 33 | - is_published 34 | - artist_id 35 | - created_at 36 | - updated_at 37 | 38 | * Track 39 | - id 40 | - name 41 | - index 42 | - track_url 43 | - image_url 44 | - album_id 45 | - is_published 46 | - created_at 47 | - updated_at 48 | 49 | * Playlist 50 | - id 51 | - name 52 | - description 53 | - image_url 54 | - is_published 55 | - created_at 56 | - updated_at 57 | 58 | * Favourite-tracks 59 | - id 60 | - track_id 61 | - user_id 62 | - index 63 | --------------------------------------------------------------------------------