From 3c5ea2131d8ab8bcae3076dfe1bb8e117320bf76 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 29 Jan 2020 12:48:18 +0500 Subject: [PATCH] Add detailed version for frontend roadmap --- components/detailed-roadmap/index.js | 17 +++++++--- components/detailed-roadmap/style.js | 16 ++++++++++ content/roadmaps.json | 32 +++++++++---------- .../0-About/{1-Summary.md => 0-Summary.md} | 0 .../{2-Basic-Skills.md => 1-Basic-Skills.md} | 7 ++-- .../{0-Landscape.md => 2-Landscape.md} | 0 .../{2-Learn => 1-Learn}/1-Job-Ready.md | 3 -- .../2-Write-Better-CSS.md | 0 .../{2-Learn => 1-Learn}/3-Build-Tools.md | 0 .../4-Modern-Applications.md | 0 .../5-Automated-Testing.md | 0 .../6-Static-Type-Checkers.md | 0 .../7-Server-Side-Rendering.md | 0 .../{2-Learn => 1-Learn}/8-Go-Beyond.md | 0 content/roadmaps/1-frontend/meta.json | 2 +- public/sitemap.xml | 32 +++++++++---------- 16 files changed, 64 insertions(+), 45 deletions(-) rename content/roadmaps/1-frontend/0-About/{1-Summary.md => 0-Summary.md} (100%) rename content/roadmaps/1-frontend/0-About/{2-Basic-Skills.md => 1-Basic-Skills.md} (75%) rename content/roadmaps/1-frontend/0-About/{0-Landscape.md => 2-Landscape.md} (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/1-Job-Ready.md (83%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/2-Write-Better-CSS.md (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/3-Build-Tools.md (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/4-Modern-Applications.md (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/5-Automated-Testing.md (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/6-Static-Type-Checkers.md (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/7-Server-Side-Rendering.md (100%) rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/8-Go-Beyond.md (100%) diff --git a/components/detailed-roadmap/index.js b/components/detailed-roadmap/index.js index f5f341c81..cd3dfc566 100644 --- a/components/detailed-roadmap/index.js +++ b/components/detailed-roadmap/index.js @@ -32,19 +32,25 @@ const DetailedRoadmap = ({ roadmap }) => { author = {} } = roadmap; - const roadmapPages = Object.keys(sidebar || {}).map(groupTitle => { + const roadmapPages = Object.keys(sidebar || {}).map((groupTitle, groupCounter) => { if (groupTitle.startsWith('_')) { return; } + // @todo remove it after completing the frontend roadmap + const isInProgress = groupCounter !== 0; + return ( -
-

{ groupTitle }

+
+

+ { groupTitle } + { isInProgress && In Progress } +

    { sidebar[groupTitle].map(page => { const isActivePage = page.url === currentPage.url; // e.g. /frontend should mark `/frontend/landscape` as active - const isSummaryPage = page.url === `${currentPage.url}/landscape`; + const isSummaryPage = page.url === `${currentPage.url}/summary`; return (
  • @@ -71,7 +77,8 @@ const DetailedRoadmap = ({ roadmap }) => {

    { roadmap.title }

    Roadmap contributed by { author.name } - { roadmap.contributorsCount > 1 && ` and ${roadmap.contributorsCount} others`}

    + { roadmap.contributorsCount > 1 && ` and ${roadmap.contributorsCount} others`} +

    diff --git a/components/detailed-roadmap/style.js b/components/detailed-roadmap/style.js index b68e6ffb5..2d1b66aef 100644 --- a/components/detailed-roadmap/style.js +++ b/components/detailed-roadmap/style.js @@ -113,6 +113,16 @@ export const Sidebar = styled.div` } } + .progress-badge { + position: relative; + top: -2px; + margin-left: 5px; + } + + .links-group.in-progress { + opacity: 0.3; + } + .links-group li { list-style: none; margin: 7px 0; @@ -180,4 +190,10 @@ export const MobileSidebar = styled(Sidebar)` .links-group { width: auto; } + + .progress-badge { + position: relative; + top: -2px; + margin-left: 5px; + } `; diff --git a/content/roadmaps.json b/content/roadmaps.json index 89503e9c4..2e3f0d5d5 100644 --- a/content/roadmaps.json +++ b/content/roadmaps.json @@ -35,7 +35,7 @@ "url": "https://twitter.com/kamranahmedse" }, "featured": true, - "path": "/roadmaps/1-frontend/0-About/0-Landscape.md", + "path": "/roadmaps/1-frontend/0-About/0-Summary.md", "detailed": true, "versions": [ "latest", @@ -47,20 +47,20 @@ "url": "/frontend", "sidebar": { "About": [ - { - "url": "/frontend/landscape", - "title": "Landscape", - "path": "/roadmaps/1-frontend/0-About/0-Landscape.md" - }, { "url": "/frontend/summary", "title": "Summary", - "path": "/roadmaps/1-frontend/0-About/1-Summary.md" + "path": "/roadmaps/1-frontend/0-About/0-Summary.md" }, { "url": "/frontend/basic-skills", "title": "Basic Skills", - "path": "/roadmaps/1-frontend/0-About/2-Basic-Skills.md" + "path": "/roadmaps/1-frontend/0-About/1-Basic-Skills.md" + }, + { + "url": "/frontend/landscape", + "title": "Landscape", + "path": "/roadmaps/1-frontend/0-About/2-Landscape.md" }, { "url": "/frontend/job-titles", @@ -72,42 +72,42 @@ { "url": "/frontend/job-ready", "title": "Job Ready", - "path": "/roadmaps/1-frontend/2-Learn/1-Job-Ready.md" + "path": "/roadmaps/1-frontend/1-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" + "path": "/roadmaps/1-frontend/1-Learn/2-Write-Better-CSS.md" }, { "url": "/frontend/build-tools", "title": "Build Tools", - "path": "/roadmaps/1-frontend/2-Learn/3-Build-Tools.md" + "path": "/roadmaps/1-frontend/1-Learn/3-Build-Tools.md" }, { "url": "/frontend/modern-applications", "title": "Modern Applications", - "path": "/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md" + "path": "/roadmaps/1-frontend/1-Learn/4-Modern-Applications.md" }, { "url": "/frontend/automated-testing", "title": "Automated Testing", - "path": "/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md" + "path": "/roadmaps/1-frontend/1-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" + "path": "/roadmaps/1-frontend/1-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" + "path": "/roadmaps/1-frontend/1-Learn/7-Server-Side-Rendering.md" }, { "url": "/frontend/go-beyond", "title": "Go Beyond", - "path": "/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md" + "path": "/roadmaps/1-frontend/1-Learn/8-Go-Beyond.md" } ] } diff --git a/content/roadmaps/1-frontend/0-About/1-Summary.md b/content/roadmaps/1-frontend/0-About/0-Summary.md similarity index 100% rename from content/roadmaps/1-frontend/0-About/1-Summary.md rename to content/roadmaps/1-frontend/0-About/0-Summary.md diff --git a/content/roadmaps/1-frontend/0-About/2-Basic-Skills.md b/content/roadmaps/1-frontend/0-About/1-Basic-Skills.md similarity index 75% rename from content/roadmaps/1-frontend/0-About/2-Basic-Skills.md rename to content/roadmaps/1-frontend/0-About/1-Basic-Skills.md index 01e031918..6ca3feacc 100644 --- a/content/roadmaps/1-frontend/0-About/2-Basic-Skills.md +++ b/content/roadmaps/1-frontend/0-About/1-Basic-Skills.md @@ -10,12 +10,11 @@ Before we jump on to the technical skills there are few non-technical or soft sk ## Technical Skills 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. +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. -* [Entry Level Developer](/frontend/junior-developer) -* [Mid Level Developer](/frontend/mid-level-developer) -* [Senior Developer](/frontend/senior-developer) +Having said that, the skills and the relevant expertise in those skills varies from the job level, have a look at the landscape to get an idea about everything that is there in Frontend Development. diff --git a/content/roadmaps/1-frontend/0-About/0-Landscape.md b/content/roadmaps/1-frontend/0-About/2-Landscape.md similarity index 100% rename from content/roadmaps/1-frontend/0-About/0-Landscape.md rename to content/roadmaps/1-frontend/0-About/2-Landscape.md diff --git a/content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md b/content/roadmaps/1-frontend/1-Learn/1-Job-Ready.md similarity index 83% rename from content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md rename to content/roadmaps/1-frontend/1-Learn/1-Job-Ready.md index 885594503..de0f77e1f 100644 --- a/content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md +++ b/content/roadmaps/1-frontend/1-Learn/1-Job-Ready.md @@ -13,6 +13,3 @@ Learn the below listed in the order given below * 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/content/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md b/content/roadmaps/1-frontend/1-Learn/2-Write-Better-CSS.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md rename to content/roadmaps/1-frontend/1-Learn/2-Write-Better-CSS.md diff --git a/content/roadmaps/1-frontend/2-Learn/3-Build-Tools.md b/content/roadmaps/1-frontend/1-Learn/3-Build-Tools.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/3-Build-Tools.md rename to content/roadmaps/1-frontend/1-Learn/3-Build-Tools.md diff --git a/content/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md b/content/roadmaps/1-frontend/1-Learn/4-Modern-Applications.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md rename to content/roadmaps/1-frontend/1-Learn/4-Modern-Applications.md diff --git a/content/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md b/content/roadmaps/1-frontend/1-Learn/5-Automated-Testing.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md rename to content/roadmaps/1-frontend/1-Learn/5-Automated-Testing.md diff --git a/content/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md b/content/roadmaps/1-frontend/1-Learn/6-Static-Type-Checkers.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md rename to content/roadmaps/1-frontend/1-Learn/6-Static-Type-Checkers.md diff --git a/content/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md b/content/roadmaps/1-frontend/1-Learn/7-Server-Side-Rendering.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md rename to content/roadmaps/1-frontend/1-Learn/7-Server-Side-Rendering.md diff --git a/content/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md b/content/roadmaps/1-frontend/1-Learn/8-Go-Beyond.md similarity index 100% rename from content/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md rename to content/roadmaps/1-frontend/1-Learn/8-Go-Beyond.md diff --git a/content/roadmaps/1-frontend/meta.json b/content/roadmaps/1-frontend/meta.json index 3c662dc96..665938838 100644 --- a/content/roadmaps/1-frontend/meta.json +++ b/content/roadmaps/1-frontend/meta.json @@ -34,7 +34,7 @@ "url": "https://twitter.com/kamranahmedse" }, "featured": true, - "path": "./0-About/0-Landscape.md", + "path": "./0-About/0-Summary.md", "detailed": true, "versions": [ "latest", diff --git a/public/sitemap.xml b/public/sitemap.xml index 0e7088abc..e2224eb27 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -3,23 +3,23 @@ https://roadmap.sh/frontend monthly - 2020-01-20T07:22:49.852Z + 2020-01-29T06:08:22.238Z 1.0 - https://roadmap.sh/frontend/landscape + https://roadmap.sh/frontend/summary monthly - 2020-01-20T07:22:49.852Z + 2020-01-29T06:08:22.238Z 1.0 - https://roadmap.sh/frontend/summary + https://roadmap.sh/frontend/basic-skills monthly - 2020-01-20T07:22:49.852Z + 2020-01-29T07:33:57.619Z 1.0 - https://roadmap.sh/frontend/basic-skills + https://roadmap.sh/frontend/landscape monthly 2020-01-20T07:22:49.852Z 1.0 @@ -27,55 +27,55 @@ https://roadmap.sh/frontend/job-titles monthly - 2020-01-20T07:22:49.852Z + 2020-01-29T07:30:19.876Z 1.0 https://roadmap.sh/frontend/job-ready monthly - 2020-01-28T12:31:18.160Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/write-better-css monthly - 2020-01-20T07:22:49.853Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/build-tools monthly - 2020-01-20T07:22:49.853Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/modern-applications monthly - 2020-01-20T07:22:49.853Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/automated-testing monthly - 2020-01-20T07:22:49.853Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/static-type-checkers monthly - 2020-01-20T07:22:49.853Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/server-side-rendering monthly - 2020-01-20T07:22:49.853Z + 2020-01-29T07:27:26.467Z 1.0 https://roadmap.sh/frontend/go-beyond monthly - 2020-01-20T07:22:49.854Z + 2020-01-29T07:27:26.467Z 1.0 @@ -231,7 +231,7 @@ https://roadmap.sh/roadmaps monthly - 2020-01-28T12:48:07.715Z + 2020-01-29T07:15:48.617Z 1.0