Update summary pages for roadmaps

pull/1657/head
Kamran Ahmed 5 years ago
parent 67f8658b4e
commit 52c2e0d2ad
  1. 4
      scripts/roadmaps-meta.js
  2. 90
      static/sitemap.xml
  3. 103
      storage/roadmaps.json
  4. 15
      storage/roadmaps/1-frontend/0-About/0-Summary.md
  5. 25
      storage/roadmaps/1-frontend/0-About/1-Skill-Summary.md
  6. 12
      storage/roadmaps/1-frontend/0-About/2-Job-Titles.md
  7. 18
      storage/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md
  8. 0
      storage/roadmaps/1-frontend/1-Landscape/2-Mid-Level-Developer.md
  9. 0
      storage/roadmaps/1-frontend/1-Landscape/3-Senior-Developer.md
  10. 0
      storage/roadmaps/1-frontend/2-Learn/1-Job-Ready.md
  11. 0
      storage/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md
  12. 0
      storage/roadmaps/1-frontend/2-Learn/3-Build-Tools.md
  13. 0
      storage/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md
  14. 0
      storage/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md
  15. 0
      storage/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md
  16. 0
      storage/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md
  17. 0
      storage/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md
  18. 50
      storage/roadmaps/1-frontend/landscape/0-Summary.md
  19. 0
      storage/roadmaps/2-backend/0-About/0-Summary.md
  20. 0
      storage/roadmaps/2-backend/1-Landscape/0-Summary.md
  21. 0
      storage/roadmaps/2-backend/1-Landscape/1-Junior.md
  22. 0
      storage/roadmaps/2-backend/1-Landscape/2-Intermediate.md
  23. 0
      storage/roadmaps/2-backend/1-Landscape/3-Senior.md
  24. 0
      storage/roadmaps/3-devops/0-About/0-Summary.md
  25. 0
      storage/roadmaps/3-devops/1-Landscape/1-Junior.md
  26. 0
      storage/roadmaps/3-devops/1-Landscape/2-Intermediate.md
  27. 0
      storage/roadmaps/3-devops/1-Landscape/3-Senior.md
  28. 0
      storage/roadmaps/4-fullstack/0-About/0-Summary.md
  29. 0
      storage/roadmaps/5-qa/0-About/0-Summary.md

@ -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 // 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 // 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`) const contributors = exec(`git log --pretty=format:"%an%x09" ${roadmapDir} | uniq`)
.toString() .toString()
@ -42,7 +42,7 @@ const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => {
// learn: [{ title: "Job Ready", path: "/path/to/file.md"}, ...], // learn: [{ title: "Job Ready", path: "/path/to/file.md"}, ...],
// } // }
const sidebar = menuDirs.reduce((menus, menuDir) => { const sidebar = menuDirs.reduce((menus, menuDir) => {
const menuItemName = path.basename(menuDir); const menuItemName = path.basename(menuDir).replace(/\d+-/, '').replace('-', ' ');
const pageFiles = fs.readdirSync(menuDir) const pageFiles = fs.readdirSync(menuDir)
.filter(pageFileName => pageFileName.endsWith('.md')) .filter(pageFileName => pageFileName.endsWith('.md'))
// Sort by the titles `1-something.md, 2-another.md` // Sort by the titles `1-something.md, 2-another.md`

@ -3,169 +3,187 @@
<url> <url>
<loc>https://roadmap.sh/frontend</loc> <loc>https://roadmap.sh/frontend</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-12-01T21:54:34.830Z</lastmod> <lastmod>2019-12-06T13:51:09.764Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/contributors</loc> <loc>https://roadmap.sh/frontend/summary</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-12-01T13:03:35.218Z</lastmod> <lastmod>2019-12-06T13:51:09.764Z</lastmod>
<priority>0.5</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/summary</loc> <loc>https://roadmap.sh/frontend/skill-summary</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-12-01T21:54:34.830Z</lastmod> <lastmod>2019-12-06T13:54:20.593Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/frontend/job-titles</loc>
<changefreq>monthly</changefreq>
<lastmod>2019-12-06T13:50:08.390Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/junior-developer</loc> <loc>https://roadmap.sh/frontend/junior-developer</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-12-01T21:30:13.428Z</lastmod> <lastmod>2019-12-06T13:51:35.989Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/mid-level-developer</loc> <loc>https://roadmap.sh/frontend/mid-level-developer</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.298Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/senior-developer</loc> <loc>https://roadmap.sh/frontend/senior-developer</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.298Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/job-ready</loc> <loc>https://roadmap.sh/frontend/job-ready</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.298Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/write-better-css</loc> <loc>https://roadmap.sh/frontend/write-better-css</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.298Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/build-tools</loc> <loc>https://roadmap.sh/frontend/build-tools</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.299Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/modern-applications</loc> <loc>https://roadmap.sh/frontend/modern-applications</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.299Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/automated-testing</loc> <loc>https://roadmap.sh/frontend/automated-testing</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.299Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/static-type-checkers</loc> <loc>https://roadmap.sh/frontend/static-type-checkers</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.890Z</lastmod> <lastmod>2019-12-06T13:06:00.299Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/server-side-rendering</loc> <loc>https://roadmap.sh/frontend/server-side-rendering</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.891Z</lastmod> <lastmod>2019-12-06T13:06:00.299Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/frontend/go-beyond</loc> <loc>https://roadmap.sh/frontend/go-beyond</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.891Z</lastmod> <lastmod>2019-12-06T13:06:00.299Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url>
<loc>https://roadmap.sh/frontend/contributors</loc>
<changefreq>monthly</changefreq>
<lastmod>2019-12-01T13:03:35.218Z</lastmod>
<priority>0.5</priority>
</url>
<url> <url>
<loc>https://roadmap.sh/backend</loc> <loc>https://roadmap.sh/backend</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-30T10:14:31.255Z</lastmod> <lastmod>2019-12-06T13:56:34.151Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/backend/summary</loc>
<changefreq>monthly</changefreq>
<lastmod>2019-12-06T13:56:34.151Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/backend/summary</loc> <loc>https://roadmap.sh/backend/summary</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-30T10:14:31.255Z</lastmod> <lastmod>2019-12-06T13:56:34.154Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/backend/junior</loc> <loc>https://roadmap.sh/backend/junior</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.000Z</lastmod> <lastmod>2019-12-06T11:47:29.778Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/backend/intermediate</loc> <loc>https://roadmap.sh/backend/intermediate</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.000Z</lastmod> <lastmod>2019-12-06T11:47:29.779Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/backend/senior</loc> <loc>https://roadmap.sh/backend/senior</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.000Z</lastmod> <lastmod>2019-12-06T11:47:29.779Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/devops</loc> <loc>https://roadmap.sh/devops</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-30T10:24:46.555Z</lastmod> <lastmod>2019-12-06T14:05:44.157Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/devops/summary</loc> <loc>https://roadmap.sh/devops/summary</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-30T10:24:46.555Z</lastmod> <lastmod>2019-12-06T14:05:44.157Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/devops/junior</loc> <loc>https://roadmap.sh/devops/junior</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.000Z</lastmod> <lastmod>2019-12-06T11:47:29.780Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/devops/intermediate</loc> <loc>https://roadmap.sh/devops/intermediate</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.000Z</lastmod> <lastmod>2019-12-06T11:47:29.780Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/devops/senior</loc> <loc>https://roadmap.sh/devops/senior</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-25T16:18:18.000Z</lastmod> <lastmod>2019-12-06T11:47:29.780Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/fullstack</loc> <loc>https://roadmap.sh/fullstack</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-27T20:14:37.663Z</lastmod> <lastmod>2019-12-06T14:06:43.870Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/fullstack/summary</loc> <loc>https://roadmap.sh/fullstack/summary</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-27T20:14:37.663Z</lastmod> <lastmod>2019-12-06T14:06:43.870Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/qa</loc> <loc>https://roadmap.sh/qa</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-27T20:14:50.558Z</lastmod> <lastmod>2019-12-06T14:06:57.267Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/qa/summary</loc> <loc>https://roadmap.sh/qa/summary</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-27T20:14:50.558Z</lastmod> <lastmod>2019-12-06T14:06:57.267Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
@ -195,31 +213,31 @@
<url> <url>
<loc>https://roadmap.sh/about</loc> <loc>https://roadmap.sh/about</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-16T09:32:19.324Z</lastmod> <lastmod>2019-12-06T11:47:29.739Z</lastmod>
<priority>0.8</priority> <priority>0.8</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/guides</loc> <loc>https://roadmap.sh/guides</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-16T09:32:19.324Z</lastmod> <lastmod>2019-12-06T11:47:29.740Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/</loc> <loc>https://roadmap.sh/</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-16T09:32:19.325Z</lastmod> <lastmod>2019-12-06T11:47:29.740Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/roadmaps</loc> <loc>https://roadmap.sh/roadmaps</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-16T09:32:19.325Z</lastmod> <lastmod>2019-12-06T11:47:29.741Z</lastmod>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
<url> <url>
<loc>https://roadmap.sh/signup</loc> <loc>https://roadmap.sh/signup</loc>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<lastmod>2019-11-16T09:32:19.325Z</lastmod> <lastmod>2019-12-06T11:47:29.741Z</lastmod>
<priority>0.9</priority> <priority>0.9</priority>
</url> </url>
</urlset> </urlset>

@ -17,77 +17,89 @@
"contributorsCount": 1, "contributorsCount": 1,
"contributorsUrl": "/frontend/contributors", "contributorsUrl": "/frontend/contributors",
"url": "/frontend", "url": "/frontend",
"path": "/roadmaps/1-frontend/landscape/0-Summary.md", "path": "/roadmaps/1-frontend/0-About/0-Summary.md",
"sidebar": { "sidebar": {
"_others": [ "About": [
{
"url": "/frontend/contributors",
"title": "contributors",
"path": "/roadmaps/1-frontend/_others/contributors.md"
}
],
"landscape": [
{ {
"url": "/frontend/summary", "url": "/frontend/summary",
"title": "Summary", "title": "Summary",
"path": "/roadmaps/1-frontend/landscape/0-Summary.md" "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", "url": "/frontend/junior-developer",
"title": "Junior Developer", "title": "Junior Developer",
"path": "/roadmaps/1-frontend/landscape/1-Junior-Developer.md" "path": "/roadmaps/1-frontend/1-Landscape/1-Junior-Developer.md"
}, },
{ {
"url": "/frontend/mid-level-developer", "url": "/frontend/mid-level-developer",
"title": "Mid Level Developer", "title": "Mid Level Developer",
"path": "/roadmaps/1-frontend/landscape/2-Mid-Level-Developer.md" "path": "/roadmaps/1-frontend/1-Landscape/2-Mid-Level-Developer.md"
}, },
{ {
"url": "/frontend/senior-developer", "url": "/frontend/senior-developer",
"title": "Senior Developer", "title": "Senior Developer",
"path": "/roadmaps/1-frontend/landscape/3-Senior-Developer.md" "path": "/roadmaps/1-frontend/1-Landscape/3-Senior-Developer.md"
} }
], ],
"learn": [ "Learn": [
{ {
"url": "/frontend/job-ready", "url": "/frontend/job-ready",
"title": "Job Ready", "title": "Job Ready",
"path": "/roadmaps/1-frontend/learn/1-Job-Ready.md" "path": "/roadmaps/1-frontend/2-Learn/1-Job-Ready.md"
}, },
{ {
"url": "/frontend/write-better-css", "url": "/frontend/write-better-css",
"title": "Write Better CSS", "title": "Write Better CSS",
"path": "/roadmaps/1-frontend/learn/2-Write-Better-CSS.md" "path": "/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md"
}, },
{ {
"url": "/frontend/build-tools", "url": "/frontend/build-tools",
"title": "Build Tools", "title": "Build Tools",
"path": "/roadmaps/1-frontend/learn/3-Build-Tools.md" "path": "/roadmaps/1-frontend/2-Learn/3-Build-Tools.md"
}, },
{ {
"url": "/frontend/modern-applications", "url": "/frontend/modern-applications",
"title": "Modern Applications", "title": "Modern Applications",
"path": "/roadmaps/1-frontend/learn/4-Modern-Applications.md" "path": "/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md"
}, },
{ {
"url": "/frontend/automated-testing", "url": "/frontend/automated-testing",
"title": "Automated Testing", "title": "Automated Testing",
"path": "/roadmaps/1-frontend/learn/5-Automated-Testing.md" "path": "/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md"
}, },
{ {
"url": "/frontend/static-type-checkers", "url": "/frontend/static-type-checkers",
"title": "Static Type Checkers", "title": "Static Type Checkers",
"path": "/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md" "path": "/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md"
}, },
{ {
"url": "/frontend/server-side-rendering", "url": "/frontend/server-side-rendering",
"title": "Server Side Rendering", "title": "Server Side Rendering",
"path": "/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md" "path": "/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md"
}, },
{ {
"url": "/frontend/go-beyond", "url": "/frontend/go-beyond",
"title": "Go Beyond", "title": "Go Beyond",
"path": "/roadmaps/1-frontend/learn/8-Go-Beyond.md" "path": "/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md"
}
],
"_others": [
{
"url": "/frontend/contributors",
"title": "contributors",
"path": "/roadmaps/1-frontend/_others/contributors.md"
} }
] ]
} }
@ -104,28 +116,35 @@
"contributorsCount": 1, "contributorsCount": 1,
"contributorsUrl": "/backend/contributors", "contributorsUrl": "/backend/contributors",
"url": "/backend", "url": "/backend",
"path": "/roadmaps/2-backend/landscape/0-Summary.md", "path": "/roadmaps/2-backend/0-About/0-Summary.md",
"sidebar": { "sidebar": {
"landscape": [ "About": [
{ {
"url": "/backend/summary", "url": "/backend/summary",
"title": "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", "url": "/backend/junior",
"title": "Junior", "title": "Junior",
"path": "/roadmaps/2-backend/landscape/1-Junior.md" "path": "/roadmaps/2-backend/1-Landscape/1-Junior.md"
}, },
{ {
"url": "/backend/intermediate", "url": "/backend/intermediate",
"title": "Intermediate", "title": "Intermediate",
"path": "/roadmaps/2-backend/landscape/2-Intermediate.md" "path": "/roadmaps/2-backend/1-Landscape/2-Intermediate.md"
}, },
{ {
"url": "/backend/senior", "url": "/backend/senior",
"title": "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, "contributorsCount": 1,
"contributorsUrl": "/devops/contributors", "contributorsUrl": "/devops/contributors",
"url": "/devops", "url": "/devops",
"path": "/roadmaps/3-devops/landscape/0-Summary.md", "path": "/roadmaps/3-devops/0-About/0-Summary.md",
"sidebar": { "sidebar": {
"landscape": [ "About": [
{ {
"url": "/devops/summary", "url": "/devops/summary",
"title": "Summary", "title": "Summary",
"path": "/roadmaps/3-devops/landscape/0-Summary.md" "path": "/roadmaps/3-devops/0-About/0-Summary.md"
}, }
],
"Landscape": [
{ {
"url": "/devops/junior", "url": "/devops/junior",
"title": "Junior", "title": "Junior",
"path": "/roadmaps/3-devops/landscape/1-Junior.md" "path": "/roadmaps/3-devops/1-Landscape/1-Junior.md"
}, },
{ {
"url": "/devops/intermediate", "url": "/devops/intermediate",
"title": "Intermediate", "title": "Intermediate",
"path": "/roadmaps/3-devops/landscape/2-Intermediate.md" "path": "/roadmaps/3-devops/1-Landscape/2-Intermediate.md"
}, },
{ {
"url": "/devops/senior", "url": "/devops/senior",
"title": "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, "contributorsCount": 1,
"contributorsUrl": "/fullstack/contributors", "contributorsUrl": "/fullstack/contributors",
"url": "/fullstack", "url": "/fullstack",
"path": "/roadmaps/4-fullstack/landscape/0-Summary.md", "path": "/roadmaps/4-fullstack/0-About/0-Summary.md",
"sidebar": { "sidebar": {
"landscape": [ "About": [
{ {
"url": "/fullstack/summary", "url": "/fullstack/summary",
"title": "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, "contributorsCount": 1,
"contributorsUrl": "/qa/contributors", "contributorsUrl": "/qa/contributors",
"url": "/qa", "url": "/qa",
"path": "/roadmaps/5-qa/landscape/0-Summary.md", "path": "/roadmaps/5-qa/0-About/0-Summary.md",
"sidebar": { "sidebar": {
"landscape": [ "About": [
{ {
"url": "/qa/summary", "url": "/qa/summary",
"title": "Summary", "title": "Summary",
"path": "/roadmaps/5-qa/landscape/0-Summary.md" "path": "/roadmaps/5-qa/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.

@ -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 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 * **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. * **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 #### 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 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.
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) * [Entry Level Developer](/frontend/junior-developer)
* [Mid Level Developer](/frontend/mid-level-developer)
Learn the below listed in the order given below * [Senior Developer](/frontend/senior-developer)
* 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

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

@ -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

@ -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.
Loading…
Cancel
Save