{"id":13619556,"url":"https://github.com/canopas/web-developer-roadmap","last_synced_at":"2025-04-15T18:43:13.693Z","repository":{"id":86025883,"uuid":"453426102","full_name":"canopas/web-developer-roadmap","owner":"canopas","description":"Web Developer Roadmap is a path to understand web development including frontend, backend and cloud.","archived":false,"fork":false,"pushed_at":"2023-05-30T07:25:49.000Z","size":8259,"stargazers_count":111,"open_issues_count":0,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T23:51:08.806Z","etag":null,"topics":["backend","backend-application","backend-development","backend-development-roadmap","developer-roadmap","development-roadmap","html","javascript","mysql","php","web","web-application","web-development","web-development-roadmap"],"latest_commit_sha":null,"homepage":"https://canopas.com","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/canopas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-01-29T14:48:04.000Z","updated_at":"2025-03-28T18:42:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"f486adb7-5f88-4111-9c24-3d5a73dbbd50","html_url":"https://github.com/canopas/web-developer-roadmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fweb-developer-roadmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fweb-developer-roadmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fweb-developer-roadmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fweb-developer-roadmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canopas","download_url":"https://codeload.github.com/canopas/web-developer-roadmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249131443,"owners_count":21217744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","backend-application","backend-development","backend-development-roadmap","developer-roadmap","development-roadmap","html","javascript","mysql","php","web","web-application","web-development","web-development-roadmap"],"created_at":"2024-08-01T21:00:44.679Z","updated_at":"2025-04-15T18:43:13.674Z","avatar_url":"https://github.com/canopas.png","language":null,"readme":"\u003ch1 align=\"center\"\u003eWeb Developer Roadmap\u003c/h1\u003e\n\n![web roadmap](https://github.com/canopas/web-developer-roadmap/blob/master/images/title_image.png)\n\nWeb Developer Roadmap is a learning path to understand web development, including frontend, backend and cloud(AWS).\n\n## How to Learn Web development?\n\nA web development can be divided into four different parts,\n\n1. Database\n2. Backend\n3. Frontend\n4. Cloud(server)\n\nThis roadmap consists of widely used technologies/frameworks for frontend and backend.\nIt also includes overview about cloud(AWS) and some information about server.\n\n# Table of contents\n\n- [Sprint 1 - Basic linux commands, Version control, Web technologies and coding conventions](https://github.com/canopas/web-developer-roadmap#sprint-1---version-control-basic-web-technologies-and-coding-conventions)\n- [Sprint 2 - Docker, Databases and PHP](https://github.com/canopas/web-developer-roadmap#sprint-2---docker-databases-and-php)\n- [Sprint 3 - Golang](https://github.com/canopas/web-developer-roadmap#sprint-3---golang)\n- [Sprint 4 - Node.js](https://github.com/canopas/web-developer-roadmap#sprint-4---nodejs)\n- [Sprint 5 - Vue.js](https://github.com/canopas/web-developer-roadmap#sprint-5---vuejs)\n- [Sprint 6 - Useful concepts](https://github.com/canopas/web-developer-roadmap#sprint-6---useful-concepts)\n\n## Sprint 1 - Basic linux commands, Version control, Web technologies and coding conventions\n\n### Practical 1.1 - Basic commands and Version control\n\n- Write a commands for following operations in terminal\n  - List all files with details in directory\n  - Give only read permission to any file\n  - Give all read and write permissions to any file\n  - Get IP address of own pc\n  - Observe disk space usage\n  - View previously executed commands history\n  - Linux command to install/uninstall PHP\n  - Linux command to start/stop mysql service\n  - Write and save any file from terminal\n\n- Perform following operations in gitlab\n  - Create a repository to GitLab\n  - Check git status of repository\n  - Commit new/updated files into a git repository\n  - Push in a git repository\n  - Pull new changes from repository\n  - Checkout new branch\n  - Merge branch into another\n  - Rebase and Squash\n  - Create merge request\n  - Write a command to clone [this](https://github.com/canopas/web-developer-roadmap) repo\n\n#### References\n\n- [Basic linux commands](https://www.digitalocean.com/community/tutorials/linux-commands)\n\n- [What Is Version Control?](https://about.gitlab.com/topics/version-control/)\n- How to use git\n  - [Version control with git](https://www.udacity.com/course/version-control-with-git--ud123)\n  - [Git: The Beginner's Guide to Understanding Core Version Control Concepts](https://www.freecodecamp.org/news/git-the-laymans-guide-to-understanding-the-core-concepts/)\n  - [Git commands](https://dzone.com/articles/top-20-git-commands-with-examples)\n\n### Practical 1.2 - Basic web technologies with coding conventions\n\n- UI design with coding standards\n  - Design static UI given in the [link](https://github.com/canopas/web-developer-roadmap/blob/master/images/static.png) \n  - Design responsive UI given in the [link](https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm) \n\n#### References\n\n- HTML5\n\n  - [Web development bootcamp course on udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 2 and 3\n  - [Basic HTML and HTML5 from Free Code Camp](https://www.freecodecamp.org/)\n\n- CSS3\n  - [Web development bootcamp course on udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 4 and 5\n  - [Bootstrap from Web development bootcamp course on udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 6 and 8\n  - [What is Flexbox?](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n  - [Bootstrap from Frontend libraries in Free Code Camp](https://www.freecodecamp.org/)\n  - [Finish Responsive web design certification course from Free Code Camp](https://www.freecodecamp.org/)\n\n- Code formatting and best practices\n  - [25 Most Used VS Code Shortcuts](https://www.crio.do/blog/vs-code-shortcuts/)\n  - [Code formatting in VS Code](https://mkyong.com/vscode/how-to-format-source-code-in-visual-studio-code-vscode/)\n  - [Web development best practices](https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741)\n\n\n### Practical 1.3\n\n- Unit converter\n  - 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)\n\n#### References\n\n- Javascript \u0026 jQuery\n\n  - [Basic javascript from Web development bootcamp course on udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 9 and 10\n  - [Basic javascript, ES6, Regular expressions, and Debugging from Free Code Camp](https://www.freecodecamp.org/)\n  - [Web development bootcamp course on udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 11 and 13\n  - [JSON, APIs, and ajax from Free Code Camp](https://www.freecodecamp.org/)\n  - [Finish Javascript algorithms and data structures from Free Code Camp](https://www.freecodecamp.org/)\n  - [Web development bootcamp course on udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 14 to 16\n  - [Finish Frontend libraries projects from Free Code Camp](https://www.freecodecamp.org/)\n  - Difference between == and ===\n  - [Basics of jQuery](https://learn.jquery.com/using-jquery-core/)\n\n- Coding conventions\n  - [Coding standards-1](https://medium.com/@luqman.qureshi/think-twice-code-once-c49faa8cd18)\n  - [Coding standards-2](https://google.github.io/styleguide/htmlcssguide.html#:~:text=Use%20only%20lowercase.,with%20the%20exception%20of%20strings)\n\n## Sprint 2 - Docker, Databases and PHP\n\n### Practical 2.1\n\n- Install MySQL using Docker\n- Install MongoDB using Docker\n\n#### References\n\n- [What is docker](https://opensource.com/resources/what-docker)\n- [Getting started with docker](https://docs.docker.com/get-started/overview/)\n- [Install MySQL using Docker](https://hub.docker.com/_/mysql)\n- [Install MongoDB using Docker](https://hub.docker.com/_/mongo/)\n\n### Practical 2.2\n\n- Perform following queries in MySQL\n\n  - Create a table named `students` with fields id, first_name, last_name, standard, percentage, interest, etc... and insert data into it\n  - Create table `student_attendances` with fields id, created_at, presence/absence fields and insert data into it\n  - Create a table named `teachers` with fields id, first_name, last_name, subject, interests etc... and insert data into it\n  - Create table `teachers_attendances` with fields id, created_at, presence/absence fields and insert data into it\n  - Prepare queries to find student's presence/absence on a particular day\n  - Find total absence/presence of every student\n  - Find absent students with a percentage lower than 70.\n  - Find a student who has higest presence\n  - Get all student's and teacher's first_name, last_name, full_name, interest, standard, subject and total absence.\n\n- Perform following queries in MongoDB (Can use [MongoDBPlayground](https://mongoplayground.net/) to peform queries)\n  - Create a collection named `students` with fields id, first_name, last_name, standard, percentage, interest, etc... and insert data into it\n  - Form a query to find students with a percentage lower than 70 and interest in sport.\n  - Count the total students with a percentage above 70\n\n#### References\n\n- [Web Development Bootcamp course udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299746?start=0#overview) - section 24 and 25\n- [Mysql Subquery](https://www.mysqltutorial.org/mysql-subquery/) and [Union query](https://www.mysqltutorial.org/sql-union-mysql.aspx)\n\n### Practical 2.3\n\n- Create a Blog application with following requirements using PHP\n  - It should have two sides\n    - 1. Admin\n    - 2. User\n  - Implement Register and login functionality for both user and admin\n  - Admin can add posts ( post fields - title, description, created_date, author, category, image )\n  - Admin can decide which user can see the post\n  - Added Posts will be visible on user side (latest first)\n\n#### References\n\n- [PHP: Language Reference](https://www.php.net/manual/en/langref.php)\n- [PHP: Introduction](https://www.w3schools.com/php/)\n- [Coding standard](https://flowframework.readthedocs.io/en/stable/TheDefinitiveGuide/PartV/CodingGuideLines/PHP.html)\n\n#### Basic Concepts\n\n- Installation WAMP/MAMP/XAMPP\n- How it exactly works ?\n- Basic Syntax\n- Variables, Constants, Operators \u0026 Control Structures\n- Conditions, Loops, Switch cases\n- Arrays, String and various string functions\n- Functions\n- Includes \u0026 Required\n- Classes \u0026 Objects \u0026 Constructors\n- Namespaces\n- Extensions\n- Exceptions\n- JSON Encode \u0026 Decode\n- Sessions\n- Cookies\n- File Manipulation\n- Indexed Array vs Associative Array\n- Object vs stdObject\n- Timeout of PHP script\n\n#### Predefined variables\n\n- http://php.net/manual/en/reserved.variables.php\n- $GLOBAL\n- $\\_SERVER\n- $\\_GET\n- $\\_POST\n- $\\_FILES\n- $\\_REQUEST\n- $\\_SESSION\n- $\\_COOKIE\n\n#### Advanced options\n\n- Interfaces\n- Traits\n- Crons\n- Composer\n- php.ini tweaks\n\n#### Keywords\n\n- Private\n- Public\n- Static\n\n## Sprint 3 - Golang\n\n### Practical 3.1\n\n- Implement [Music App](https://github.com/canopas/web-developer-roadmap/blob/master/music_app.md) with given requirements\n\n#### Basic concepts\n\n- [Why Go?](https://yourbasic.org/golang/advantages-over-java-python/)\n- [Run the hello world program in Go](https://golang.org/doc/tutorial/getting-started)\n- [Go modules](https://golang.org/doc/tutorial/create-module)\n- [Gin framework](https://www.educative.io/edpresso/what-is-gin-in-golang)\n- Constants, variable types\n- Functions, multi return functions, init()\n- Packages and import\n- Conditional Statements and Loops\n- Arrays and slices\n- Pointers, structs, and methods\n- Error handling\n- [gofmt](https://go.dev/blog/gofmt)\n- [Best practicies](https://go.dev/talks/2013/bestpractices.slide#20)\n\n- Others\n  - [JWT](https://jwt.io/introduction)\n  - [JSON](https://www.w3schools.com/whatis/whatis_json.asp)\n  - [REST API](https://www.edureka.co/blog/what-is-rest-api/)\n\n#### Advance concepts\n\n- Maps in Go\n- Concurrency and Goroutine\n- defer\n- Error handling\n- Panic and recover\n- Reflection\n- Type conversion\n- File manipulations\n- Logging\n- Authentication with JWT (JSON Web Token)\n\n#### Packages\n\n- [Gin](https://github.com/gin-gonic/gin)\n- [Mysql package](https://github.com/jmoiron/sqlx)\n- [net/http](https://golang.org/pkg/net/http/)\n- [File compressor](https://github.com/gin-contrib/gzip)\n- [Logging](https://github.com/sirupsen/logrus)\n- [Mongodb](https://godoc.org/go.mongodb.org/mongo-driver/mongo)\n- [ioutil](https://golang.org/pkg/io/ioutil/)\n- [os](https://golang.org/pkg/os/)\n- [strings](https://golang.org/pkg/strings/?m=all)\n- [parse static file to binary](https://github.com/markbates/pkger)\n- [null value handler](https://github.com/guregu/null/tree/v3.5.0)\n- [JWT](https://github.com/dgrijalva/jwt-go)\n- [socket.io](https://github.com/googollee/go-socket.io)\n- [sentry](https://github.com/evalphobia/logrus_sentry)\n\n## Sprint 4 - Node.js\n\n### Practical 4.1\n\n- Implement one-one real time chat application\n\n### Practical 4.2\n\n- Implement an [Ecommerce App](https://github.com/canopas/web-developer-roadmap/blob/master/ecommerce_web_app_backend.md) with given requirements\n\n#### References\n\n- [yarn](https://classic.yarnpkg.com/en/docs/getting-started)\n- [npm](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/)\n- [yarn vs npm](https://www.knowledgehut.com/blog/web-development/yarn-vs-npm)\n- [node](https://nodejs.org/en/about/)\n- [Why node.js?](https://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js)\n- Basic concepts:\n  - [CommonJS and ESModule](https://www.freecodecamp.org/news/modules-in-javascript/)\n  - [Console](https://nodejs.org/api/console.html)\n  - [Scope](https://scotch.io/tutorials/understanding-scope-in-javascript)\n  - ['this' keyword part 1](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch1.md)\n  - ['this' keyword part 2](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch2.md)\n  - Understanding package.json\n  - Import/export require\n  - Callbacks\n  - async-await\n  - async.waterfall()\n  - [Ref](https://webapplog.com/node-js-fundamentals-a-concise-overview-of-the-main-concepts/)\n  - [Event loop](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/)\n  - Node mailer to send emails\n  - [Best practices](https://code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399)\n\n- Express.js\n  - [Installation](https://expressjs.com/en/starter/installing.html)\n  - [Express Generator](https://expressjs.com/en/starter/generator.html)\n  - [Routing](https://expressjs.com/en/starter/basic-routing.html)\n  - [Host static files](https://expressjs.com/en/starter/static-files.html)\n  - [Template engine(ejs)](https://expressjs.com/en/guide/using-template-engines.html)\n  - Body parser\n\n## Sprint 5 - Vue.js\n\n### Practical 5.1\n\n- Implement frontend of [Ecommerce App using Vue.js](https://github.com/canopas/web-developer-roadmap/blob/master/ecommerce_web_app_frontend.md) with given requirements\n\n#### References\n\n- [Get started with Vue.js](https://v3.vuejs.org/)\n- [Tailwind css for beginners](https://www.youtube.com/watch?v=bxmDnn7lrnk\u0026list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw)\n- [Tailwind css tutorial](https://tsh.io/blog/tailwind-css-tutorial/)\n- [Pinia](https://pinia.vuejs.org/introduction.html)\n\n- Concepts\n  - What is vue.js ?\n  - Getting started\n  - Installation\n  - Application and component instances\n  - Template syntax\n  - Data properties and Methods\n  - Computed Properties and Watchers\n  - Class and Style Bindings\n  - Conditional rendering, conditional style binding\n  - List rendering\n  - Event Handling\n  - Form input bindings\n  - Component Basics\n  - Props\n  - Component registration\n  - Slots\n  - Template refs\n  - State management\n\n## Sprint 6 - Useful concepts\n\n#### Concepts\n\n- [Http Protocols](https://www.tutorialspoint.com/http/)\n- [Asynchronous vs synchronous behaviour](https://www.geekinsta.com/difference-between-synchronous-and-asynchronous-programming/)\n- Caching(Understanding of Redis)\n- Testing : unit and feature testing overview\n- [Docker in detail](https://docker-curriculum.com/)\n- Nginx vs Apache server\n- Server Login with Password/SSH Keys\n- IP tables\n- Php-fpm and httpd\n- SSH, SSL, certificates and keys\n\n#### Cloud\n\n- [What is AWS?](https://searchaws.techtarget.com/definition/Amazon-Web-Services)\n- S3\n- EC2\n- RDS\n- Elasticache\n- Route 53\n- SES\n- Cloudwatch\n- VPC\n- [AWS Lamda](https://www.guru99.com/aws-lambda-function.html)\n- [AWS API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html)\n- [Microservices](https://www.educative.io/blog/microservices-architecture-tutorial-all-you-need-to-get-started?affiliate_id=5082902844932096\u0026utm_source=google\u0026utm_medium=cpc\u0026utm_campaign=platform2\u0026utm_content=ad-1-dynamic\u0026gclid=Cj0KCQjwk8b7BRCaARIsAARRTL6juttpPjrgo_hRVSuYm_PvM-KenAvrRRsxNxt1zyfp8R2mQn5_zHwaAtaiEALw_wcB)\n- [What are microservices? How AWS implement it?](https://relevant.software/blog/microservices-on-aws/)\n- [Microservices implementation using Go](https://blog.canopas.com/golang-serverless-microservices-with-gin-f3c2a4943a6d)\n\n#### Additional\n\n- [Golang roadmap](https://github.com/Alikhll/golang-developer-roadmap)\n- [NodeJS roadmap](https://github.com/aliyr/Nodejs-Developer-Roadmap)\n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopas%2Fweb-developer-roadmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanopas%2Fweb-developer-roadmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopas%2Fweb-developer-roadmap/lists"}