From c7589b8325123fbe07ecef9aa71d58b5a452aa7c Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Fri, 6 Dec 2019 18:18:33 +0400 Subject: [PATCH] Update summary pages for roadmaps --- scripts/roadmaps-meta.js | 4 +- static/sitemap.xml | 202 ++++++++++-------- storage/roadmaps.json | 189 ++++++++-------- .../roadmaps/1-frontend/0-About/0-Summary.md | 15 ++ .../1-Skill-Summary.md} | 25 +-- .../1-frontend/0-About/2-Job-Titles.md | 12 ++ .../1-Landscape/1-Junior-Developer.md | 18 ++ .../2-Mid-Level-Developer.md | 0 .../3-Senior-Developer.md | 0 .../{learn => 2-Learn}/1-Job-Ready.md | 0 .../{learn => 2-Learn}/2-Write-Better-CSS.md | 0 .../{learn => 2-Learn}/3-Build-Tools.md | 0 .../4-Modern-Applications.md | 0 .../{learn => 2-Learn}/5-Automated-Testing.md | 0 .../6-Static-Type-Checkers.md | 0 .../7-Server-Side-Rendering.md | 0 .../{learn => 2-Learn}/8-Go-Beyond.md | 0 .../1-frontend/landscape/0-Summary.md | 50 ----- .../{landscape => 0-About}/0-Summary.md | 0 .../1-Junior.md => 1-Landscape/0-Summary.md} | 0 .../1-Landscape}/1-Junior.md | 0 .../2-Intermediate.md | 0 .../{landscape => 1-Landscape}/3-Senior.md | 0 .../{landscape => 0-About}/0-Summary.md | 0 .../1-Junior.md} | 0 .../2-Intermediate.md} | 0 .../roadmaps/3-devops/1-Landscape/3-Senior.md | 0 .../{landscape => 0-About}/0-Summary.md | 0 .../5-qa/{landscape => 0-About}/0-Summary.md | 0 29 files changed, 271 insertions(+), 244 deletions(-) create mode 100644 storage/roadmaps/1-frontend/0-About/0-Summary.md rename storage/roadmaps/1-frontend/{landscape/1-Junior-Developer.md => 0-About/1-Skill-Summary.md} (54%) create mode 100644 storage/roadmaps/1-frontend/0-About/2-Job-Titles.md create mode 100644 storage/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md rename storage/roadmaps/1-frontend/{landscape => 1-Landscape}/2-Mid-Level-Developer.md (100%) rename storage/roadmaps/1-frontend/{landscape => 1-Landscape}/3-Senior-Developer.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/1-Job-Ready.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/2-Write-Better-CSS.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/3-Build-Tools.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/4-Modern-Applications.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/5-Automated-Testing.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/6-Static-Type-Checkers.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/7-Server-Side-Rendering.md (100%) rename storage/roadmaps/1-frontend/{learn => 2-Learn}/8-Go-Beyond.md (100%) delete mode 100644 storage/roadmaps/1-frontend/landscape/0-Summary.md rename storage/roadmaps/2-backend/{landscape => 0-About}/0-Summary.md (100%) rename storage/roadmaps/2-backend/{landscape/1-Junior.md => 1-Landscape/0-Summary.md} (100%) rename storage/roadmaps/{3-devops/landscape => 2-backend/1-Landscape}/1-Junior.md (100%) rename storage/roadmaps/2-backend/{landscape => 1-Landscape}/2-Intermediate.md (100%) rename storage/roadmaps/2-backend/{landscape => 1-Landscape}/3-Senior.md (100%) rename storage/roadmaps/3-devops/{landscape => 0-About}/0-Summary.md (100%) rename storage/roadmaps/3-devops/{landscape/2-Intermediate.md => 1-Landscape/1-Junior.md} (100%) rename storage/roadmaps/3-devops/{landscape/3-Senior.md => 1-Landscape/2-Intermediate.md} (100%) create mode 100644 storage/roadmaps/3-devops/1-Landscape/3-Senior.md rename storage/roadmaps/4-fullstack/{landscape => 0-About}/0-Summary.md (100%) rename storage/roadmaps/5-qa/{landscape => 0-About}/0-Summary.md (100%) diff --git a/scripts/roadmaps-meta.js b/scripts/roadmaps-meta.js index 1c88fdd40..67197206c 100644 --- a/scripts/roadmaps-meta.js +++ b/scripts/roadmaps-meta.js @@ -16,7 +16,7 @@ const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => { // We can't use the absolute path in the build e.g. ~/Users/user/where-build-is-running/storage // So, we remove it and use the path relative to storage directory - const summaryFilePath = path.join(roadmapDir.replace(STORAGE_PATH, ''), '/landscape/0-Summary.md') + const summaryFilePath = path.join(roadmapDir.replace(STORAGE_PATH, ''), '/0-About/0-Summary.md'); const contributors = exec(`git log --pretty=format:"%an%x09" ${roadmapDir} | uniq`) .toString() @@ -42,7 +42,7 @@ const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => { // learn: [{ title: "Job Ready", path: "/path/to/file.md"}, ...], // } const sidebar = menuDirs.reduce((menus, menuDir) => { - const menuItemName = path.basename(menuDir); + const menuItemName = path.basename(menuDir).replace(/\d+-/, '').replace('-', ' '); const pageFiles = fs.readdirSync(menuDir) .filter(pageFileName => pageFileName.endsWith('.md')) // Sort by the titles `1-something.md, 2-another.md` diff --git a/static/sitemap.xml b/static/sitemap.xml index cf3326a11..b41df234f 100644 --- a/static/sitemap.xml +++ b/static/sitemap.xml @@ -3,7 +3,91 @@ https://roadmap.sh/frontend monthly - 2019-12-01T21:54:34.830Z + 2019-12-06T13:51:09.764Z + 1.0 + + + https://roadmap.sh/frontend/summary + monthly + 2019-12-06T13:51:09.764Z + 1.0 + + + https://roadmap.sh/frontend/skill-summary + monthly + 2019-12-06T13:54:20.593Z + 1.0 + + + https://roadmap.sh/frontend/job-titles + monthly + 2019-12-06T13:50:08.390Z + 1.0 + + + https://roadmap.sh/frontend/junior-developer + monthly + 2019-12-06T13:51:35.989Z + 1.0 + + + https://roadmap.sh/frontend/mid-level-developer + monthly + 2019-12-06T13:06:00.298Z + 1.0 + + + https://roadmap.sh/frontend/senior-developer + monthly + 2019-12-06T13:06:00.298Z + 1.0 + + + https://roadmap.sh/frontend/job-ready + monthly + 2019-12-06T13:06:00.298Z + 1.0 + + + https://roadmap.sh/frontend/write-better-css + monthly + 2019-12-06T13:06:00.298Z + 1.0 + + + https://roadmap.sh/frontend/build-tools + monthly + 2019-12-06T13:06:00.299Z + 1.0 + + + https://roadmap.sh/frontend/modern-applications + monthly + 2019-12-06T13:06:00.299Z + 1.0 + + + https://roadmap.sh/frontend/automated-testing + monthly + 2019-12-06T13:06:00.299Z + 1.0 + + + https://roadmap.sh/frontend/static-type-checkers + monthly + 2019-12-06T13:06:00.299Z + 1.0 + + + https://roadmap.sh/frontend/server-side-rendering + monthly + 2019-12-06T13:06:00.299Z + 1.0 + + + https://roadmap.sh/frontend/go-beyond + monthly + 2019-12-06T13:06:00.299Z 1.0 @@ -12,160 +96,94 @@ 2019-12-01T13:03:35.218Z 0.5 - - https://roadmap.sh/frontend/summary - monthly - 2019-12-01T21:54:34.830Z - 1.0 - - - https://roadmap.sh/frontend/junior-developer - monthly - 2019-12-01T21:30:13.428Z - 1.0 - - - https://roadmap.sh/frontend/mid-level-developer - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/senior-developer - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/job-ready - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/write-better-css - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/build-tools - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/modern-applications - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/automated-testing - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/static-type-checkers - monthly - 2019-11-25T16:18:18.890Z - 1.0 - - - https://roadmap.sh/frontend/server-side-rendering - monthly - 2019-11-25T16:18:18.891Z - 1.0 - - - https://roadmap.sh/frontend/go-beyond - monthly - 2019-11-25T16:18:18.891Z - 1.0 - https://roadmap.sh/backend monthly - 2019-11-30T10:14:31.255Z + 2019-12-06T13:56:34.151Z 1.0 https://roadmap.sh/backend/summary monthly - 2019-11-30T10:14:31.255Z + 2019-12-06T13:56:34.151Z + 1.0 + + + https://roadmap.sh/backend/summary + monthly + 2019-12-06T13:56:34.154Z 1.0 https://roadmap.sh/backend/junior monthly - 2019-11-25T16:18:18.000Z + 2019-12-06T11:47:29.778Z 1.0 https://roadmap.sh/backend/intermediate monthly - 2019-11-25T16:18:18.000Z + 2019-12-06T11:47:29.779Z 1.0 https://roadmap.sh/backend/senior monthly - 2019-11-25T16:18:18.000Z + 2019-12-06T11:47:29.779Z 1.0 https://roadmap.sh/devops monthly - 2019-11-30T10:24:46.555Z + 2019-12-06T14:05:44.157Z 1.0 https://roadmap.sh/devops/summary monthly - 2019-11-30T10:24:46.555Z + 2019-12-06T14:05:44.157Z 1.0 https://roadmap.sh/devops/junior monthly - 2019-11-25T16:18:18.000Z + 2019-12-06T11:47:29.780Z 1.0 https://roadmap.sh/devops/intermediate monthly - 2019-11-25T16:18:18.000Z + 2019-12-06T11:47:29.780Z 1.0 https://roadmap.sh/devops/senior monthly - 2019-11-25T16:18:18.000Z + 2019-12-06T11:47:29.780Z 1.0 https://roadmap.sh/fullstack monthly - 2019-11-27T20:14:37.663Z + 2019-12-06T14:06:43.870Z 1.0 https://roadmap.sh/fullstack/summary monthly - 2019-11-27T20:14:37.663Z + 2019-12-06T14:06:43.870Z 1.0 https://roadmap.sh/qa monthly - 2019-11-27T20:14:50.558Z + 2019-12-06T14:06:57.267Z 1.0 https://roadmap.sh/qa/summary monthly - 2019-11-27T20:14:50.558Z + 2019-12-06T14:06:57.267Z 1.0 @@ -195,31 +213,31 @@ https://roadmap.sh/about monthly - 2019-11-16T09:32:19.324Z + 2019-12-06T11:47:29.739Z 0.8 https://roadmap.sh/guides monthly - 2019-11-16T09:32:19.324Z + 2019-12-06T11:47:29.740Z 1.0 https://roadmap.sh/ monthly - 2019-11-16T09:32:19.325Z + 2019-12-06T11:47:29.740Z 1.0 https://roadmap.sh/roadmaps monthly - 2019-11-16T09:32:19.325Z + 2019-12-06T11:47:29.741Z 1.0 https://roadmap.sh/signup monthly - 2019-11-16T09:32:19.325Z + 2019-12-06T11:47:29.741Z 0.9 \ No newline at end of file diff --git a/storage/roadmaps.json b/storage/roadmaps.json index 4e75332ca..fb5010980 100644 --- a/storage/roadmaps.json +++ b/storage/roadmaps.json @@ -17,78 +17,90 @@ "contributorsCount": 1, "contributorsUrl": "/frontend/contributors", "url": "/frontend", - "path": "/roadmaps/1-frontend/landscape/0-Summary.md", + "path": "/roadmaps/1-frontend/0-About/0-Summary.md", "sidebar": { + "About": [ + { + "url": "/frontend/summary", + "title": "Summary", + "path": "/roadmaps/1-frontend/0-About/0-Summary.md" + }, + { + "url": "/frontend/skill-summary", + "title": "Skill Summary", + "path": "/roadmaps/1-frontend/0-About/1-Skill-Summary.md" + }, + { + "url": "/frontend/job-titles", + "title": "Job Titles", + "path": "/roadmaps/1-frontend/0-About/2-Job-Titles.md" + } + ], + "Landscape": [ + { + "url": "/frontend/junior-developer", + "title": "Junior Developer", + "path": "/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md" + }, + { + "url": "/frontend/mid-level-developer", + "title": "Mid Level Developer", + "path": "/roadmaps/1-frontend/1-Landscape/2-Mid-Level-Developer.md" + }, + { + "url": "/frontend/senior-developer", + "title": "Senior Developer", + "path": "/roadmaps/1-frontend/1-Landscape/3-Senior-Developer.md" + } + ], + "Learn": [ + { + "url": "/frontend/job-ready", + "title": "Job Ready", + "path": "/roadmaps/1-frontend/2-Learn/1-Job-Ready.md" + }, + { + "url": "/frontend/write-better-css", + "title": "Write Better CSS", + "path": "/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md" + }, + { + "url": "/frontend/build-tools", + "title": "Build Tools", + "path": "/roadmaps/1-frontend/2-Learn/3-Build-Tools.md" + }, + { + "url": "/frontend/modern-applications", + "title": "Modern Applications", + "path": "/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md" + }, + { + "url": "/frontend/automated-testing", + "title": "Automated Testing", + "path": "/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md" + }, + { + "url": "/frontend/static-type-checkers", + "title": "Static Type Checkers", + "path": "/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md" + }, + { + "url": "/frontend/server-side-rendering", + "title": "Server Side Rendering", + "path": "/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md" + }, + { + "url": "/frontend/go-beyond", + "title": "Go Beyond", + "path": "/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md" + } + ], "_others": [ { "url": "/frontend/contributors", "title": "contributors", "path": "/roadmaps/1-frontend/_others/contributors.md" } - ], - "landscape": [ - { - "url": "/frontend/summary", - "title": "Summary", - "path": "/roadmaps/1-frontend/landscape/0-Summary.md" - }, - { - "url": "/frontend/junior-developer", - "title": "Junior Developer", - "path": "/roadmaps/1-frontend/landscape/1-Junior-Developer.md" - }, - { - "url": "/frontend/mid-level-developer", - "title": "Mid Level Developer", - "path": "/roadmaps/1-frontend/landscape/2-Mid-Level-Developer.md" - }, - { - "url": "/frontend/senior-developer", - "title": "Senior Developer", - "path": "/roadmaps/1-frontend/landscape/3-Senior-Developer.md" - } - ], - "learn": [ - { - "url": "/frontend/job-ready", - "title": "Job Ready", - "path": "/roadmaps/1-frontend/learn/1-Job-Ready.md" - }, - { - "url": "/frontend/write-better-css", - "title": "Write Better CSS", - "path": "/roadmaps/1-frontend/learn/2-Write-Better-CSS.md" - }, - { - "url": "/frontend/build-tools", - "title": "Build Tools", - "path": "/roadmaps/1-frontend/learn/3-Build-Tools.md" - }, - { - "url": "/frontend/modern-applications", - "title": "Modern Applications", - "path": "/roadmaps/1-frontend/learn/4-Modern-Applications.md" - }, - { - "url": "/frontend/automated-testing", - "title": "Automated Testing", - "path": "/roadmaps/1-frontend/learn/5-Automated-Testing.md" - }, - { - "url": "/frontend/static-type-checkers", - "title": "Static Type Checkers", - "path": "/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md" - }, - { - "url": "/frontend/server-side-rendering", - "title": "Server Side Rendering", - "path": "/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md" - }, - { - "url": "/frontend/go-beyond", - "title": "Go Beyond", - "path": "/roadmaps/1-frontend/learn/8-Go-Beyond.md" - } ] } }, @@ -104,28 +116,35 @@ "contributorsCount": 1, "contributorsUrl": "/backend/contributors", "url": "/backend", - "path": "/roadmaps/2-backend/landscape/0-Summary.md", + "path": "/roadmaps/2-backend/0-About/0-Summary.md", "sidebar": { - "landscape": [ + "About": [ { "url": "/backend/summary", "title": "Summary", - "path": "/roadmaps/2-backend/landscape/0-Summary.md" + "path": "/roadmaps/2-backend/0-About/0-Summary.md" + } + ], + "Landscape": [ + { + "url": "/backend/summary", + "title": "Summary", + "path": "/roadmaps/2-backend/1-Landscape/0-Summary.md" }, { "url": "/backend/junior", "title": "Junior", - "path": "/roadmaps/2-backend/landscape/1-Junior.md" + "path": "/roadmaps/2-backend/1-Landscape/1-Junior.md" }, { "url": "/backend/intermediate", "title": "Intermediate", - "path": "/roadmaps/2-backend/landscape/2-Intermediate.md" + "path": "/roadmaps/2-backend/1-Landscape/2-Intermediate.md" }, { "url": "/backend/senior", "title": "Senior", - "path": "/roadmaps/2-backend/landscape/3-Senior.md" + "path": "/roadmaps/2-backend/1-Landscape/3-Senior.md" } ] } @@ -147,28 +166,30 @@ "contributorsCount": 1, "contributorsUrl": "/devops/contributors", "url": "/devops", - "path": "/roadmaps/3-devops/landscape/0-Summary.md", + "path": "/roadmaps/3-devops/0-About/0-Summary.md", "sidebar": { - "landscape": [ + "About": [ { "url": "/devops/summary", "title": "Summary", - "path": "/roadmaps/3-devops/landscape/0-Summary.md" - }, + "path": "/roadmaps/3-devops/0-About/0-Summary.md" + } + ], + "Landscape": [ { "url": "/devops/junior", "title": "Junior", - "path": "/roadmaps/3-devops/landscape/1-Junior.md" + "path": "/roadmaps/3-devops/1-Landscape/1-Junior.md" }, { "url": "/devops/intermediate", "title": "Intermediate", - "path": "/roadmaps/3-devops/landscape/2-Intermediate.md" + "path": "/roadmaps/3-devops/1-Landscape/2-Intermediate.md" }, { "url": "/devops/senior", "title": "Senior", - "path": "/roadmaps/3-devops/landscape/3-Senior.md" + "path": "/roadmaps/3-devops/1-Landscape/3-Senior.md" } ] } @@ -185,13 +206,13 @@ "contributorsCount": 1, "contributorsUrl": "/fullstack/contributors", "url": "/fullstack", - "path": "/roadmaps/4-fullstack/landscape/0-Summary.md", + "path": "/roadmaps/4-fullstack/0-About/0-Summary.md", "sidebar": { - "landscape": [ + "About": [ { "url": "/fullstack/summary", "title": "Summary", - "path": "/roadmaps/4-fullstack/landscape/0-Summary.md" + "path": "/roadmaps/4-fullstack/0-About/0-Summary.md" } ] } @@ -208,13 +229,13 @@ "contributorsCount": 1, "contributorsUrl": "/qa/contributors", "url": "/qa", - "path": "/roadmaps/5-qa/landscape/0-Summary.md", + "path": "/roadmaps/5-qa/0-About/0-Summary.md", "sidebar": { - "landscape": [ + "About": [ { "url": "/qa/summary", "title": "Summary", - "path": "/roadmaps/5-qa/landscape/0-Summary.md" + "path": "/roadmaps/5-qa/0-About/0-Summary.md" } ] } diff --git a/storage/roadmaps/1-frontend/0-About/0-Summary.md b/storage/roadmaps/1-frontend/0-About/0-Summary.md new file mode 100644 index 000000000..ca31f1b85 --- /dev/null +++ b/storage/roadmaps/1-frontend/0-About/0-Summary.md @@ -0,0 +1,15 @@ +#### What is a Frontend Developer? +A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers. + +They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows + +> [According to Wikipedia](https://en.wikipedia.org/wiki/Front-end_web_development): +> +> Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. + +#### Key Components of a Website +If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable. + +Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript. + +To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript. diff --git a/storage/roadmaps/1-frontend/landscape/1-Junior-Developer.md b/storage/roadmaps/1-frontend/0-About/1-Skill-Summary.md similarity index 54% rename from storage/roadmaps/1-frontend/landscape/1-Junior-Developer.md rename to storage/roadmaps/1-frontend/0-About/1-Skill-Summary.md index 64944196e..5cbb96a93 100644 --- a/storage/roadmaps/1-frontend/landscape/1-Junior-Developer.md +++ b/storage/roadmaps/1-frontend/0-About/1-Skill-Summary.md @@ -1,4 +1,4 @@ -#### Soft Skills required +#### Soft Skills Before we jump on to the technical skills there are few non-technical or soft skills that every employer is going to demand, so make sure to work on that side of the things as well when you are preparing yourself technically * **Communication skills** — Talking to your colleagues, writing emails, use of language @@ -9,20 +9,13 @@ Before we jump on to the technical skills there are few non-technical or soft sk * **Be Curious** — Your curiosity is going to help you a great deal in evolving yourself. Don't just take things as they are, look at the reasoning behind the things. Look at the things that others are building, learn from them. Look at what community is most excited about these days. #### Technical Skills -The sections below describe different steps required to become a frontend developer +In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money +* HTML +* CSS +* JavaScript -#### Learning How Things Work -As a web developer, frontend, backend or fullstack, you should have a good understanding of how the internet works +Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ...lots of them. This is how you will hone your skillset and continue to grow. Having said that, the skills and the relevant expertise in those skills varies from the job level, follow the links below to get an idea of the skills required for each of the role levels. -![](/static/roadmaps/frontend/beginner-1.png) - -Learn the below listed in the order given below -* What is Internet and how does it work? -* What is HTTP, how it evolved and where is it now? -* How do the browsers work? Engines behind different browsers -* What is DNS? How a website is found on the internet? -* What's in a domain name? What is an IP Address? -* What is Web Hosting? - -#### Writing Some Code -Now that you understand how things work, next step is getting your hands dirty and start actual coding +* [Entry Level Developer](/frontend/junior-developer) +* [Mid Level Developer](/frontend/mid-level-developer) +* [Senior Developer](/frontend/senior-developer) diff --git a/storage/roadmaps/1-frontend/0-About/2-Job-Titles.md b/storage/roadmaps/1-frontend/0-About/2-Job-Titles.md new file mode 100644 index 000000000..8fa136562 --- /dev/null +++ b/storage/roadmaps/1-frontend/0-About/2-Job-Titles.md @@ -0,0 +1,12 @@ +#### Common Job Titles +If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities + +* Frontend Developer / Engineer +* JavaScript Developer +* JavaScript Engineer +* HTML / CSS Developer +* UI Developer +* Web Developer +* FullStack Developer + +Having Web Developer or FullStack developer in the title would normally mean that you need to have some backend skills as well. Most of the small or service based companies require you to have backend and some UI designing skills as well so it is better to look at the job description also once you have shortlisted the jobs to apply to. diff --git a/storage/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md b/storage/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md new file mode 100644 index 000000000..de3fc2a27 --- /dev/null +++ b/storage/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md @@ -0,0 +1,18 @@ +#### Technical Skills +The sections below describe different steps required to become a frontend developer + +#### Learning How Things Work +As a web developer, frontend, backend or fullstack, you should have a good understanding of how the internet works + +![](/static/roadmaps/frontend/beginner-1.png) + +Learn the below listed in the order given below +* What is Internet and how does it work? +* What is HTTP, how it evolved and where is it now? +* How do the browsers work? Engines behind different browsers +* What is DNS? How a website is found on the internet? +* What's in a domain name? What is an IP Address? +* What is Web Hosting? + +#### Writing Some Code +Now that you understand how things work, next step is getting your hands dirty and start actual coding diff --git a/storage/roadmaps/1-frontend/landscape/2-Mid-Level-Developer.md b/storage/roadmaps/1-frontend/1-Landscape/2-Mid-Level-Developer.md similarity index 100% rename from storage/roadmaps/1-frontend/landscape/2-Mid-Level-Developer.md rename to storage/roadmaps/1-frontend/1-Landscape/2-Mid-Level-Developer.md diff --git a/storage/roadmaps/1-frontend/landscape/3-Senior-Developer.md b/storage/roadmaps/1-frontend/1-Landscape/3-Senior-Developer.md similarity index 100% rename from storage/roadmaps/1-frontend/landscape/3-Senior-Developer.md rename to storage/roadmaps/1-frontend/1-Landscape/3-Senior-Developer.md diff --git a/storage/roadmaps/1-frontend/learn/1-Job-Ready.md b/storage/roadmaps/1-frontend/2-Learn/1-Job-Ready.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/1-Job-Ready.md rename to storage/roadmaps/1-frontend/2-Learn/1-Job-Ready.md diff --git a/storage/roadmaps/1-frontend/learn/2-Write-Better-CSS.md b/storage/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/2-Write-Better-CSS.md rename to storage/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md diff --git a/storage/roadmaps/1-frontend/learn/3-Build-Tools.md b/storage/roadmaps/1-frontend/2-Learn/3-Build-Tools.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/3-Build-Tools.md rename to storage/roadmaps/1-frontend/2-Learn/3-Build-Tools.md diff --git a/storage/roadmaps/1-frontend/learn/4-Modern-Applications.md b/storage/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/4-Modern-Applications.md rename to storage/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md diff --git a/storage/roadmaps/1-frontend/learn/5-Automated-Testing.md b/storage/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/5-Automated-Testing.md rename to storage/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md diff --git a/storage/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md b/storage/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md rename to storage/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md diff --git a/storage/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md b/storage/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md rename to storage/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md diff --git a/storage/roadmaps/1-frontend/learn/8-Go-Beyond.md b/storage/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md similarity index 100% rename from storage/roadmaps/1-frontend/learn/8-Go-Beyond.md rename to storage/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md diff --git a/storage/roadmaps/1-frontend/landscape/0-Summary.md b/storage/roadmaps/1-frontend/landscape/0-Summary.md deleted file mode 100644 index 68e58dbdb..000000000 --- a/storage/roadmaps/1-frontend/landscape/0-Summary.md +++ /dev/null @@ -1,50 +0,0 @@ -#### What is a Frontend Developer? -A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers. - -They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows - -> [According to Wikipedia](https://en.wikipedia.org/wiki/Front-end_web_development): -> -> Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. - -#### Key Components of a Website -If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable. - -Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript. - -To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript. - -#### Common Job Titles -If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities - -* Frontend Developer / Engineer -* JavaScript Developer -* JavaScript Engineer -* HTML / CSS Developer -* UI Developer -* Web Developer -* FullStack Developer - -Having Web Developer or FullStack developer in the title would normally mean that you need to have some backend skills as well. Most of the small or service based companies require you to have backend and some UI designing skills as well so it is better to look at the job description also once you have shortlisted the jobs to apply to. - -#### Skills Required -In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money -* HTML -* CSS -* JavaScript - -Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ...lots of them. This is how you will hone your skillset and continue to grow. Having said that, the skills and the relevant expertise in those skills varies from the job level, follow the links below to get an idea of the skills required for each of the role levels. - -* [Entry Level Developer](/frontend/junior-developer) -* [Mid Level Developer](/frontend/mid-level-developer) -* [Senior Developer](/frontend/senior-developer) - -#### Before you Start -Before we start with the skills, there are few things that you should keep in mind which are going to help you a great deal when you are learning. They don't just apply to frontend development but to any other field as well - -* Do not let the huge list of skills scare you away. HTML / CSS and JavaScript are the key skills to start building. Once you have acquired these, rest of the skills can be acquired over time when you are doing projects. -* Don't feel overwhelmed by looking at the "experts" in the field. They started at the same level as you are. With consistency, time and practice there is nothing stopping you to get there. -* Do lots of projects, lots and lots of projects. Without practice, you will just be stuck in the tutorial hell, you will start to feel that the things you are doing aren't sticking. Only projects can help you escape that. -* Even when you are learning, polish your experiments, publish them, share it with people. You will be surprised by the support you will be able to get. - -And with that said, head on to the [next section](/frontend/junior-developer) where we see the list of necessary skillset required. diff --git a/storage/roadmaps/2-backend/landscape/0-Summary.md b/storage/roadmaps/2-backend/0-About/0-Summary.md similarity index 100% rename from storage/roadmaps/2-backend/landscape/0-Summary.md rename to storage/roadmaps/2-backend/0-About/0-Summary.md diff --git a/storage/roadmaps/2-backend/landscape/1-Junior.md b/storage/roadmaps/2-backend/1-Landscape/0-Summary.md similarity index 100% rename from storage/roadmaps/2-backend/landscape/1-Junior.md rename to storage/roadmaps/2-backend/1-Landscape/0-Summary.md diff --git a/storage/roadmaps/3-devops/landscape/1-Junior.md b/storage/roadmaps/2-backend/1-Landscape/1-Junior.md similarity index 100% rename from storage/roadmaps/3-devops/landscape/1-Junior.md rename to storage/roadmaps/2-backend/1-Landscape/1-Junior.md diff --git a/storage/roadmaps/2-backend/landscape/2-Intermediate.md b/storage/roadmaps/2-backend/1-Landscape/2-Intermediate.md similarity index 100% rename from storage/roadmaps/2-backend/landscape/2-Intermediate.md rename to storage/roadmaps/2-backend/1-Landscape/2-Intermediate.md diff --git a/storage/roadmaps/2-backend/landscape/3-Senior.md b/storage/roadmaps/2-backend/1-Landscape/3-Senior.md similarity index 100% rename from storage/roadmaps/2-backend/landscape/3-Senior.md rename to storage/roadmaps/2-backend/1-Landscape/3-Senior.md diff --git a/storage/roadmaps/3-devops/landscape/0-Summary.md b/storage/roadmaps/3-devops/0-About/0-Summary.md similarity index 100% rename from storage/roadmaps/3-devops/landscape/0-Summary.md rename to storage/roadmaps/3-devops/0-About/0-Summary.md diff --git a/storage/roadmaps/3-devops/landscape/2-Intermediate.md b/storage/roadmaps/3-devops/1-Landscape/1-Junior.md similarity index 100% rename from storage/roadmaps/3-devops/landscape/2-Intermediate.md rename to storage/roadmaps/3-devops/1-Landscape/1-Junior.md diff --git a/storage/roadmaps/3-devops/landscape/3-Senior.md b/storage/roadmaps/3-devops/1-Landscape/2-Intermediate.md similarity index 100% rename from storage/roadmaps/3-devops/landscape/3-Senior.md rename to storage/roadmaps/3-devops/1-Landscape/2-Intermediate.md diff --git a/storage/roadmaps/3-devops/1-Landscape/3-Senior.md b/storage/roadmaps/3-devops/1-Landscape/3-Senior.md new file mode 100644 index 000000000..e69de29bb diff --git a/storage/roadmaps/4-fullstack/landscape/0-Summary.md b/storage/roadmaps/4-fullstack/0-About/0-Summary.md similarity index 100% rename from storage/roadmaps/4-fullstack/landscape/0-Summary.md rename to storage/roadmaps/4-fullstack/0-About/0-Summary.md diff --git a/storage/roadmaps/5-qa/landscape/0-Summary.md b/storage/roadmaps/5-qa/0-About/0-Summary.md similarity index 100% rename from storage/roadmaps/5-qa/landscape/0-Summary.md rename to storage/roadmaps/5-qa/0-About/0-Summary.md