-
-
-[roadmap.sh](https://roadmap.sh) is the community effort to create knowledge that is approachable for the developers.
-
-The website is built with Next.js, contains roadmaps which are the step by step guides for developers, guides which are the easier to understand explanations on the complex topics. Anyone can contribute to the website by suggesting changes to existing paths, adding learning resources, becoming an author by adding new guides, updating the existing guides.
-
-## Development
-
-Clone the repository, install the dependencies and start the application
-
-```bash
-git clone https://github.com/kamranahmedse/roadmap.sh
-yarn install
-yarn dev
-```
-
-## Contributions
-
-* Add new Roadmap
-* Suggest changes to existing roadmap
-* Write an article
-* Improve the site's codebase
-* Write tests
-
diff --git a/code_of_conduct.md b/code_of_conduct.md
new file mode 100644
index 000000000000..51b44888f079
--- /dev/null
+++ b/code_of_conduct.md
@@ -0,0 +1,76 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at . All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
diff --git a/components/dimmed-more.tsx b/components/dimmed-more.tsx
index fda55c8a8f6e..1a24772da709 100644
--- a/components/dimmed-more.tsx
+++ b/components/dimmed-more.tsx
@@ -17,7 +17,7 @@ export function DimmedMore(props: DimmedMoreProps) {
bottom={0}
height='200px'
width='100%'
- background='linear-gradient(180deg, transparent, white)'
+ background='linear-gradient(180deg, rgb(255 255 255 / 40%), white)'
/>
+
@@ -65,8 +65,8 @@ export function Footer() {
-
- {process.env.GA_SECRET && false && (
+ {/**/}
+ {process.env.GA_SECRET && (
+
Roadmaps
Guides
Videos
- YouTube
+ Thanks
Subscribe
- setIsOpen(false)} pos='fixed' top='3px' right='15px' size='lg' />
+ setIsOpen(false)} pos='fixed' top='40px' right='15px' size='lg' />
)}
);
}
-export function GlobalHeader() {
+type GlobalHeaderProps = {
+ variant?: 'transparent' | 'solid'
+};
+
+export function GlobalHeader(props: GlobalHeaderProps) {
+ const { variant = 'solid' } = props;
+
return (
-
+
@@ -98,7 +106,7 @@ export function GlobalHeader() {
fontWeight={600}
_hover={{ textDecoration: 'none' }}
fontSize='18px'>
-
+ roadmap.sh
diff --git a/components/helmet.tsx b/components/helmet.tsx
index e5302a340cee..6d14636f7c19 100644
--- a/components/helmet.tsx
+++ b/components/helmet.tsx
@@ -1,73 +1,165 @@
import NextHead from 'next/head';
import siteConfig from '../content/site.json';
+import { RoadmapType } from '../lib/roadmap';
+import { roadmapTheme } from '../styles/theme';
type HelmetProps = {
title?: string;
keywords?: string[];
canonical?: string;
description?: string;
+ roadmap?: RoadmapType;
};
-const Helmet = (props: HelmetProps) => (
-
-
+function getRichSnippetJson(roadmap: RoadmapType) {
+ return {
+ '@context': 'https://schema.org',
+ '@type': 'Article',
+ mainEntityOfPage: {
+ '@type': 'WebPage',
+ '@id': `https://roadmap.sh/${roadmap.id}`,
+ },
+ headline: roadmap.seo.title,
+ description: roadmap.seo.description,
+ image: roadmap.jsonUrl
+ ? `https://roadmap.sh/roadmaps/${roadmap.id}.png`
+ : undefined,
+ author: {
+ '@type': 'Person',
+ name: 'Kamran Ahmed',
+ url: 'https://twitter.com/kamranahmedse',
+ },
+ publisher: {
+ '@type': 'Organization',
+ name: 'roadmap.sh',
+ logo: {
+ '@type': 'ImageObject',
+ url: 'https://roadmap.sh/brand-square.png',
+ },
+ },
+ };
+}
- {props.title || siteConfig.title}
-
+const Helmet = (props: HelmetProps) => {
+ const { roadmap, title, canonical, description, keywords } = props;
-
-
+ return (
+
+
-
- {props.canonical && }
-
+ {title || siteConfig.title}
+
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
+
+ {canonical && }
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
- { /* Global Site Tag (gtag.js) - Google Analytics */}
- {process.env.GA_SECRET && (
- <>
-
-
+
+
+
+
+
+ {roadmap?.id && (
+
+ )}
+
+ {/* Global Site Tag (gtag.js) - Google Analytics */}
+ {process.env.GA_SECRET && (
+ <>
+
+
-
- )}
-
-
-);
+ `,
+ }}
+ />
+
+ )}
+
+ );
+};
export default Helmet;
diff --git a/components/icons/roadmap.svg b/components/icons/roadmap.svg
new file mode 100644
index 000000000000..cf860c413a5b
--- /dev/null
+++ b/components/icons/roadmap.svg
@@ -0,0 +1,4 @@
+
diff --git a/components/icons/youtube.svg b/components/icons/youtube.svg
new file mode 100644
index 000000000000..b37541c96fca
--- /dev/null
+++ b/components/icons/youtube.svg
@@ -0,0 +1,3 @@
+
diff --git a/components/links-list-item.tsx b/components/links-list-item.tsx
index a2022e1f9b8e..5577a09e13e8 100644
--- a/components/links-list-item.tsx
+++ b/components/links-list-item.tsx
@@ -6,15 +6,17 @@ type LinksListItemProps = {
title: string;
subtitle: string;
badgeText?: string;
+ target?: string;
icon?: React.ReactChild;
hideSubtitleOnMobile?: boolean;
};
export function LinksListItem(props: LinksListItemProps) {
- const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
+ const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
return (
{
// Is external URL or is a media URL
- const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
+ const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+ props.href
+ );
+
+ const linkProps: Record = {
+ target: '_self',
+ ...(isExternalUrl
+ ? {
+ rel: 'nofollow',
+ target: '_blank',
+ }
+ : {}),
+ };
return (
-
+
{props.children}
);
};
export default EnrichedLink;
-
diff --git a/components/md-renderer/mdx-components/badge-link.tsx b/components/md-renderer/mdx-components/badge-link.tsx
index d6e287f9fc00..9de1d4538d7f 100644
--- a/components/md-renderer/mdx-components/badge-link.tsx
+++ b/components/md-renderer/mdx-components/badge-link.tsx
@@ -1,22 +1,53 @@
import React from 'react';
+import { Link, Text, Badge } from '@chakra-ui/react';
type BadgeLinkType = {
target: string;
- variant: string;
badgeText: string;
href: string;
- children: React.ReactNode
+ colorScheme?: string;
+ children: React.ReactNode;
};
export function BadgeLink(props: BadgeLinkType) {
- const { target = '_blank', variant = 'success', badgeText, href, children } = props;
+ const {
+ target = '_blank',
+ colorScheme = 'purple',
+ badgeText,
+ href,
+ children,
+ } = props;
+
+ // Is external URL or is a media URL
+ const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+ props.href
+ );
+
+ const linkProps: Record = {
+ ...(isExternalUrl
+ ? {
+ rel: 'nofollow',
+ }
+ : {}),
+ };
return (
-
+
+
+
+ {badgeText}
+
+ {children}
+
+
);
}
diff --git a/components/md-renderer/mdx-components/heading.tsx b/components/md-renderer/mdx-components/heading.tsx
index 42aa7d5572eb..ea94a5e40219 100644
--- a/components/md-renderer/mdx-components/heading.tsx
+++ b/components/md-renderer/mdx-components/heading.tsx
@@ -5,7 +5,7 @@ import LinkIcon from 'components/icons/link.svg';
const linkify = (Component: React.FunctionComponent) => {
return function EnrichedHeading(props: { children: string }): React.ReactNode {
const text = props.children;
- const id = text.toLowerCase && text
+ const id = text?.toLowerCase && text
.toLowerCase()
.replace(/[^\x00-\x7F]/g, '')
.replace(/\s+/g, '-')
@@ -35,10 +35,10 @@ const HeaderLink = styled.a`
const H1 = styled.h1`
position: relative;
- font-size: 42px;
+ font-size: 32px;
line-height: 40px;
font-weight: 700;
- margin: 32px 0 10px !important;
+ margin: 20px 0 10px !important;
&:hover ${HeaderLink} {
display: flex;
@@ -46,12 +46,12 @@ const H1 = styled.h1`
`;
const H2 = styled(H1).attrs({ as: 'h2' })`
- font-size: 32px;
+ font-size: 30px;
`;
const H3 = styled(H1).attrs({ as: 'h3' })`
margin: 22px 0 8px;
- font-size: 30px;
+ font-size: 28px;
`;
const H4 = styled(H1).attrs({ as: 'h4' })`
@@ -70,12 +70,12 @@ const H6 = styled(H1).attrs({ as: 'h6' })`
`;
const Headings = {
- h1: linkify(H1),
- h2: linkify(H2),
- h3: linkify(H3),
- h4: linkify(H4),
- h5: linkify(H5),
- h6: linkify(H6)
+ h1: H1,
+ h2: H2,
+ h3: H3,
+ h4: H4,
+ h5: H5,
+ h6: H6
};
export default Headings;
diff --git a/components/md-renderer/mdx-components/index.tsx b/components/md-renderer/mdx-components/index.tsx
index 2a3f1a819c87..c3b21e448483 100644
--- a/components/md-renderer/mdx-components/index.tsx
+++ b/components/md-renderer/mdx-components/index.tsx
@@ -10,6 +10,7 @@ import EnrichedLink from './a';
import { BadgeLink } from './badge-link';
import { Li, Ul } from './ul';
import PremiumBlock from './premium-block';
+import { ResourceGroupTitle } from './resource-group-title';
const MdxComponents = {
p: P,
@@ -22,6 +23,7 @@ const MdxComponents = {
img: Img,
code: Code,
BadgeLink: BadgeLink,
+ ResourceGroupTitle: ResourceGroupTitle,
PremiumBlock: PremiumBlock,
ul: Ul,
li: Li
diff --git a/components/md-renderer/mdx-components/resource-group-title.tsx b/components/md-renderer/mdx-components/resource-group-title.tsx
new file mode 100644
index 000000000000..c66635e46ab8
--- /dev/null
+++ b/components/md-renderer/mdx-components/resource-group-title.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Heading } from '@chakra-ui/react';
+
+type ResourceGroupTitleProps = {
+ children: React.ReactNode;
+};
+
+export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
+ const { children } = props;
+
+ return {children};
+}
diff --git a/components/md-renderer/mdx-components/ul.tsx b/components/md-renderer/mdx-components/ul.tsx
index 815af200d40b..7ab0cf024eb3 100644
--- a/components/md-renderer/mdx-components/ul.tsx
+++ b/components/md-renderer/mdx-components/ul.tsx
@@ -5,6 +5,10 @@ import styled from 'styled-components';
export const Ul = styled.ul`
margin-left: 40px;
margin-bottom: 18px;
+
+ ul {
+ margin-top: 18px;
+ }
`;
export const Li = styled.li`
diff --git a/components/opensource-banner.tsx b/components/opensource-banner.tsx
index f2e4b5564cb7..8327605cbdd7 100644
--- a/components/opensource-banner.tsx
+++ b/components/opensource-banner.tsx
@@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
export function OpensourceBanner() {
return (
-
+ Open SourceThe project is OpenSource,
diff --git a/components/page-header.tsx b/components/page-header.tsx
index 6a97df0e96f0..97a1125bf469 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -1,28 +1,31 @@
-import { Box, Container, Heading, Text } from '@chakra-ui/react';
+import { Badge, Box, Container, Heading, Link, Text } from '@chakra-ui/react';
import React from 'react';
+import siteConfig from '../content/site.json';
type PageHeaderProps = {
title: string;
subtitle: string;
children?: React.ReactNode;
+ beforeTitle?: React.ReactNode;
};
export function PageHeader(props: PageHeaderProps) {
- const { title, subtitle, children } = props;
+ const { title, subtitle, children, beforeTitle = null } = props;
return (
+ {beforeTitle}
{title}
- {subtitle}
+ {subtitle}
{children && (
diff --git a/components/page-wrapper.tsx b/components/page-wrapper.tsx
new file mode 100644
index 000000000000..626e0147136f
--- /dev/null
+++ b/components/page-wrapper.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+type PageWrapperProps = {
+ children: React.ReactNode;
+}
+
+export function PageWrapper(props: PageWrapperProps) {
+ const { children } = props;
+
+ return (
+
+ { children }
+
+ );
+}
diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
new file mode 100644
index 000000000000..60443ea68a82
--- /dev/null
+++ b/components/roadmap/content-drawer.tsx
@@ -0,0 +1,116 @@
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { RemoveScroll } from 'react-remove-scroll';
+import { RoadmapType } from '../../lib/roadmap';
+import RoadmapGroup from '../../pages/[roadmap]/[group]';
+import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
+import { queryGroupElementsById } from '../../lib/renderer/utils';
+
+type ContentDrawerProps = {
+ roadmap: RoadmapType;
+ groupId: string;
+ onClose?: () => void;
+};
+
+export function ContentDrawer(props: ContentDrawerProps) {
+ const { roadmap, groupId, onClose = () => null } = props;
+ if (!groupId) {
+ return null;
+ }
+
+ const isDone = localStorage.getItem(groupId) === 'done';
+
+ return (
+
+
+
+
+
+ {!isDone && (
+
+ )}
+ {isDone && (
+
+ )}
+ }
+ iconSpacing={0}
+ size="xs"
+ >
+
+ Close
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/roadmap/edit-content-page-link.tsx b/components/roadmap/edit-content-page-link.tsx
new file mode 100644
index 000000000000..ebdf303434ee
--- /dev/null
+++ b/components/roadmap/edit-content-page-link.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
+
+type EditContentPageLinkProps = {
+ href: string;
+};
+
+export function EditContentPageLink(props: EditContentPageLinkProps) {
+ const { href } = props;
+
+ return (
+
+
+
+ This page is a work in progress. Help us by writing a small
+ introduction to the topic and suggesting a few links to read more
+ about this topic.
+
+
+
+ );
+}
diff --git a/components/roadmap/home-roadmap-item.tsx b/components/roadmap/home-roadmap-item.tsx
index 8c56e6ed1833..bed4a6c9a6cf 100644
--- a/components/roadmap/home-roadmap-item.tsx
+++ b/components/roadmap/home-roadmap-item.tsx
@@ -1,47 +1,114 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
type RoadmapGridItemProps = {
title: string;
subtitle: string;
isCommunity?: boolean;
+ isUpcoming?: boolean;
colorIndex?: number;
url: string;
};
const bgColorList = [
- 'blue.900',
- 'red.800',
- 'green.800',
- 'teal.800',
- 'gray.800',
- 'red.900'
+ 'red.100',
+ 'yellow.100',
+ 'green.200',
+ 'teal.200',
+ 'blue.200',
+ 'red.200',
+ 'gray.200',
+ 'teal.200',
+ 'yellow.100',
+ 'green.200',
+ 'red.200',
];
export function HomeRoadmapItem(props: RoadmapGridItemProps) {
- const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
+ const {
+ title,
+ subtitle,
+ isCommunity,
+ colorIndex = 0,
+ url,
+ isUpcoming,
+ } = props;
return (
{isCommunity && (
-
-
+
+
)}
- {title}
- {subtitle}
+
+ {title}
+
+
+ {subtitle}
+
+
+ {isUpcoming && (
+
+
+ Upcoming
+
+
+
+ )}
);
}
diff --git a/components/roadmap/new-alert-banner.tsx b/components/roadmap/new-alert-banner.tsx
new file mode 100644
index 000000000000..c390261f2440
--- /dev/null
+++ b/components/roadmap/new-alert-banner.tsx
@@ -0,0 +1,50 @@
+import { Badge, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+import { event } from '../../lib/gtag';
+import React from 'react';
+
+export function NewAlertBanner() {
+ return (
+
+ event({
+ category: 'Subscription',
+ action: 'Clicked the YouTube banner',
+ label: 'YouTube Alert on Roadmap',
+ })
+ }
+ >
+
+ New
+
+
+ Roadmap topics to be covered on our YouTube Channel
+
+
+ Topic videos being made on YouTube
+
+
+ »
+
+
+ );
+}
diff --git a/components/roadmap/roadmap-error.tsx b/components/roadmap/roadmap-error.tsx
new file mode 100644
index 000000000000..f776da99e7d6
--- /dev/null
+++ b/components/roadmap/roadmap-error.tsx
@@ -0,0 +1,26 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { Container, Heading, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+
+type RoadmapProps = {
+ roadmap: RoadmapType;
+};
+
+export function RoadmapError(props: RoadmapProps) {
+ const { roadmap } = props;
+
+ return (
+
+ Oops! There's an error
+ Try refreshing or report a bug and use the non-interactive version
+
+ );
+}
diff --git a/components/roadmap/roadmap-loader.tsx b/components/roadmap/roadmap-loader.tsx
new file mode 100644
index 000000000000..e683b49e85cd
--- /dev/null
+++ b/components/roadmap/roadmap-loader.tsx
@@ -0,0 +1,20 @@
+import { Container, Spinner } from '@chakra-ui/react';
+
+export function RoadmapLoader() {
+ return (
+
+
+
+ );
+}
diff --git a/components/roadmap/roadmap-page-header.tsx b/components/roadmap/roadmap-page-header.tsx
new file mode 100644
index 000000000000..1f1c0d4886c8
--- /dev/null
+++ b/components/roadmap/roadmap-page-header.tsx
@@ -0,0 +1,113 @@
+import { isInteractiveRoadmap, RoadmapType } from '../../lib/roadmap';
+import { NewAlertBanner } from './new-alert-banner';
+import {
+ Badge,
+ Box,
+ Button,
+ Container,
+ Flex,
+ Heading,
+ Link,
+ Stack,
+ Text,
+} from '@chakra-ui/react';
+import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
+import React from 'react';
+
+type RoadmapPageHeaderType = {
+ roadmap: RoadmapType;
+};
+
+export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
+ const { roadmap } = props;
+
+ return (
+
+
+
+
+ {roadmap.title}
+
+ {roadmap.description}
+
+
+
+
+ {roadmap.pdfUrl && (
+ }
+ colorScheme="yellow"
+ variant="solid"
+ _hover={{ textDecoration: 'none' }}
+ >
+ Download
+
+ )}
+ }
+ _hover={{ textDecoration: 'none' }}
+ >
+ Subscribe
+
+
+
+ {isInteractiveRoadmap(roadmap.id) && (
+
+
+ New
+
+ Resources are here, try clicking any nodes.
+
+ )}
+
+
+ );
+}
diff --git a/components/sticky-banner.tsx b/components/sticky-banner.tsx
new file mode 100644
index 000000000000..1627539bc2e4
--- /dev/null
+++ b/components/sticky-banner.tsx
@@ -0,0 +1,33 @@
+import { Flex, Link, Text } from '@chakra-ui/react';
+import YouTubeLogo from '../components/icons/youtube.svg';
+import siteConfig from '../content/site.json';
+import { event } from '../lib/gtag';
+
+export function StickyBanner() {
+ return (
+ event({
+ category: 'Subscription',
+ action: 'Clicked the YouTube banner',
+ label: 'Sticky YouTube banner on Top'
+ })}
+ >
+
+
+ We now have a YouTube Channel. Subscribe for the video
+ content.
+
+
+ );
+}
diff --git a/components/updates-banner.tsx b/components/updates-banner.tsx
index 9e6c6ad9dea1..ca6309140a27 100644
--- a/components/updates-banner.tsx
+++ b/components/updates-banner.tsx
@@ -1,37 +1,77 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
+import {
+ Box,
+ Button,
+ Container,
+ Flex,
+ Heading,
+ Link,
+ Text,
+} from '@chakra-ui/react';
import siteConfig from '../content/site.json';
export function UpdatesBanner() {
return (
-
-
- Stay
- Informed
- Subscribe yourself to get
- updates, new
- guides, videos and roadmaps in your inbox.
+
+
+
+ Stay Informed
+
+
+ Subscribe yourself to get updates, new guides, videos and roadmaps in
+ your inbox.
+
-
-
- Support the project by paying as little as 5$
- per month
+
+
+ Support the project by paying as little as{' '}
+
+ 5$ per month
+
+
diff --git a/components/watch/video-grid-item.tsx b/components/watch/video-grid-item.tsx
index f25dfbf2d6af..e2c82b44494d 100644
--- a/components/watch/video-grid-item.tsx
+++ b/components/watch/video-grid-item.tsx
@@ -5,6 +5,7 @@ type VideoGridItemProps = {
title: string;
subtitle: string;
date: string;
+ target?: string;
isNew?: boolean;
isPro?: boolean;
colorIndex?: number;
@@ -53,10 +54,10 @@ const bgColorList = [
];
export function VideoGridItem(props: VideoGridItemProps) {
- const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
+ const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
return (
-
{isNew && New}
diff --git a/content/guides.json b/content/guides.json
index 36dd4ab56705..45a3d1b79fe8 100644
--- a/content/guides.json
+++ b/content/guides.json
@@ -1,12 +1,39 @@
[
+ {
+ "id": "avoid-render-blocking-javascript-with-async-defer",
+ "title": "Async and Defer Script Loading",
+ "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
+ "isPro": false,
+ "authorUsername": "kamranahmedse",
+ "updatedAt": "2021-09-10T19:59:14.191Z",
+ "createdAt": "2021-09-10T19:59:14.191Z"
+ },
+ {
+ "id": "what-are-web-vitals",
+ "title": "What are Web Vitals?",
+ "description": "Learn what are the core web vitals and how to measure them.",
+ "isPro": false,
+ "authorUsername": "kamranahmedse",
+ "updatedAt": "2021-09-05T19:59:14.191Z",
+ "createdAt": "2021-09-05T19:59:14.191Z"
+ },
+ {
+ "id": "what-is-sli-slo-sla",
+ "title": "SLIs, SLOs and SLAs",
+ "description": "Learn what are different indicators for performance identification of any service.",
+ "isPro": false,
+ "authorUsername": "kamranahmedse",
+ "updatedAt": "2021-08-31T19:59:14.191Z",
+ "createdAt": "2021-08-31T19:59:14.191Z"
+ },
{
"id": "ci-cd",
"title": "What is CI and CD?",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-07-09T19:59:14.191Z",
- "createdAt": "2020-07-09T19:59:14.191Z"
+ "updatedAt": "2021-07-09T19:59:14.191Z",
+ "createdAt": "2021-07-09T19:59:14.191Z"
},
{
"id": "sso",
@@ -14,8 +41,8 @@
"description": "Learn the basics of SAML and understand how does Single Sign On work.",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-07-01T19:59:14.191Z",
- "createdAt": "2020-07-01T19:59:14.191Z"
+ "updatedAt": "2021-07-01T19:59:14.191Z",
+ "createdAt": "2021-07-01T19:59:14.191Z"
},
{
"id": "oauth",
@@ -23,8 +50,8 @@
"description": "Learn and understand what is OAuth and how it works",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-06-28T19:59:14.191Z",
- "createdAt": "2020-06-28T19:59:14.191Z"
+ "updatedAt": "2021-06-28T19:59:14.191Z",
+ "createdAt": "2021-06-28T19:59:14.191Z"
},
{
"id": "jwt-authentication",
@@ -32,8 +59,8 @@
"description": "Understand what is JWT authentication and how is it implemented",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-06-20T19:59:14.191Z",
- "createdAt": "2020-06-20T19:59:14.191Z"
+ "updatedAt": "2021-06-20T19:59:14.191Z",
+ "createdAt": "2021-06-20T19:59:14.191Z"
},
{
"id": "token-authentication",
@@ -41,8 +68,8 @@
"description": "Understand what is token based authentication and how it is implemented",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-06-02T20:59:14.191Z",
- "createdAt": "2020-06-02T20:59:14.191Z"
+ "updatedAt": "2021-06-02T20:59:14.191Z",
+ "createdAt": "2021-06-02T20:59:14.191Z"
},
{
"id": "session-authentication",
@@ -50,8 +77,8 @@
"description": "Understand what is session based authentication and how it is implemented",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-05-26T20:59:14.191Z",
- "createdAt": "2020-05-26T20:59:14.191Z"
+ "updatedAt": "2021-05-26T20:59:14.191Z",
+ "createdAt": "2021-05-26T20:59:14.191Z"
},
{
"id": "basic-authentication",
@@ -59,8 +86,8 @@
"description": "Understand what is basic authentication and how it is implemented",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-05-19T20:59:14.191Z",
- "createdAt": "2020-05-19T20:59:14.191Z"
+ "updatedAt": "2021-05-19T20:59:14.191Z",
+ "createdAt": "2021-05-19T20:59:14.191Z"
},
{
"id": "character-encodings",
@@ -68,8 +95,8 @@
"description": "Covers the basics of character encodings and explains ASCII vs Unicode",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-05-14T20:59:14.191Z",
- "createdAt": "2020-05-14T20:59:14.191Z"
+ "updatedAt": "2021-05-14T20:59:14.191Z",
+ "createdAt": "2021-05-14T20:59:14.191Z"
},
{
"id": "unfamiliar-codebase",
@@ -77,8 +104,8 @@
"description": "Tips on getting getting familiar with an unfamiliar codebase",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-05-04T20:59:14.191Z",
- "createdAt": "2020-05-04T20:59:14.191Z"
+ "updatedAt": "2021-05-04T20:59:14.191Z",
+ "createdAt": "2021-05-04T20:59:14.191Z"
},
{
"id": "why-build-it-and-they-will-come-wont-work-anymore",
@@ -86,8 +113,8 @@
"description": "Why “build it and they will come” alone won’t work anymore",
"isPro": false,
"authorUsername": "spekulatius",
- "updatedAt": "2020-05-04T12:59:14.191Z",
- "createdAt": "2020-05-04T12:59:14.191Z"
+ "updatedAt": "2021-05-04T12:59:14.191Z",
+ "createdAt": "2021-05-04T12:59:14.191Z"
},
{
"id": "dhcp-in-one-picture",
@@ -95,8 +122,8 @@
"description": "Here is what happens when a new device joins the network.",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-04-28T15:48:21.191Z",
- "createdAt": "2020-04-28T15:48:21.191Z"
+ "updatedAt": "2021-04-28T15:48:21.191Z",
+ "createdAt": "2021-04-28T15:48:21.191Z"
},
{
"id": "ssl-tls-https-ssh",
@@ -104,8 +131,8 @@
"description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-04-22T15:48:21.191Z",
- "createdAt": "2020-04-22T15:48:21.191Z"
+ "updatedAt": "2021-04-22T15:48:21.191Z",
+ "createdAt": "2021-04-22T15:48:21.191Z"
},
{
"id": "asymptotic-notation",
@@ -113,8 +140,8 @@
"description": "Learn the basics of measuring the time and space complexity of algorithms",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-04-03T15:48:21.191Z",
- "createdAt": "2020-04-03T15:48:21.191Z"
+ "updatedAt": "2021-04-03T15:48:21.191Z",
+ "createdAt": "2021-04-03T15:48:21.191Z"
},
{
"id": "big-o-notation",
@@ -122,8 +149,8 @@
"description": "Easy to understand explanation of Big-O notation without any fancy terms",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-03-15T15:48:21.191Z",
- "createdAt": "2020-03-15T15:48:21.191Z"
+ "updatedAt": "2021-03-15T15:48:21.191Z",
+ "createdAt": "2021-03-15T15:48:21.191Z"
},
{
"id": "random-numbers",
@@ -131,8 +158,8 @@
"description": "Learn how they are generated and why they may not be truly random.",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-03-14T15:48:21.191Z",
- "createdAt": "2020-03-14T15:48:21.191Z"
+ "updatedAt": "2021-03-14T15:48:21.191Z",
+ "createdAt": "2021-03-14T15:48:21.191Z"
},
{
"id": "scaling-databases",
@@ -140,8 +167,8 @@
"description": "Learn the ups and downs of different database scaling strategies",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2020-02-18T15:48:21.191Z",
- "createdAt": "2020-02-18T15:48:21.191Z"
+ "updatedAt": "2021-02-18T15:48:21.191Z",
+ "createdAt": "2021-02-18T15:48:21.191Z"
},
{
"id": "what-is-internet",
@@ -149,8 +176,8 @@
"description": "Learn the basics of internet and everything involved with this short video series",
"isPro": false,
"authorUsername": "dmytrobol",
- "updatedAt": "2020-02-29T15:48:21.191Z",
- "createdAt": "2020-02-29T15:48:21.191Z"
+ "updatedAt": "2021-02-29T15:48:21.191Z",
+ "createdAt": "2021-02-29T15:48:21.191Z"
},
{
"id": "torrent-client",
@@ -158,8 +185,8 @@
"description": "Learn everything you need to know about BitTorrent by writing a client in Go",
"isPro": false,
"authorUsername": "jesse",
- "updatedAt": "2020-01-17T15:48:21.191Z",
- "createdAt": "2020-01-17T15:48:21.191Z",
+ "updatedAt": "2021-01-17T15:48:21.191Z",
+ "createdAt": "2021-01-17T15:48:21.191Z",
"canonical": "https://blog.jse.li/posts/torrent/"
},
{
@@ -168,8 +195,8 @@
"description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
"isPro": false,
"authorUsername": "kamranahmedse",
- "updatedAt": "2019-12-03T12:13:00.860Z",
- "createdAt": "2019-12-03T12:13:00.860Z"
+ "updatedAt": "2020-12-03T12:13:00.860Z",
+ "createdAt": "2020-12-03T12:13:00.860Z"
},
{
"id": "design-patterns-for-humans",
@@ -223,7 +250,7 @@
"description": "How do proxy servers work and what are forward and reverse proxies?",
"isPro": false,
"authorUsername": "ebrahimbharmal007",
- "createdAt": "2020-07-24T12:40:18",
- "updatedAt": "2020-07-24T12:40:18"
+ "createdAt": "2017-10-24T17:00:00.860Z",
+ "updatedAt": "2017-10-24T17:00:00.860Z"
}
]
diff --git a/content/guides/asymptotic-notation.md b/content/guides/asymptotic-notation.md
index e61f0c866aca..ac09738c4419 100644
--- a/content/guides/asymptotic-notation.md
+++ b/content/guides/asymptotic-notation.md
@@ -13,4 +13,3 @@ Asymptotic notation is the standard way of measuring the time and space that an
[](/guides/asymptotic-notation.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1243861514907418624) where this image was posted.
diff --git a/content/guides/avoid-render-blocking-javascript-with-async-defer.md b/content/guides/avoid-render-blocking-javascript-with-async-defer.md
new file mode 100644
index 000000000000..7588c9efd25a
--- /dev/null
+++ b/content/guides/avoid-render-blocking-javascript-with-async-defer.md
@@ -0,0 +1,2 @@
+[](/guides/avoid-render-blocking-javascript-with-async-defer.png)
+
diff --git a/content/guides/basic-authentication.md b/content/guides/basic-authentication.md
index 5a078e5e56a8..294e78140ef3 100644
--- a/content/guides/basic-authentication.md
+++ b/content/guides/basic-authentication.md
@@ -1,3 +1,2 @@
[](/guides/basic-authentication.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1261783266044063748) where this image was posted.
diff --git a/content/guides/big-o-notation.md b/content/guides/big-o-notation.md
index b5eac0b5b712..9ffa3778e8b6 100644
--- a/content/guides/big-o-notation.md
+++ b/content/guides/big-o-notation.md
@@ -2,4 +2,3 @@ Big-O notation is the mathematical notation that helps analyse the algorithms to
[](/guides/big-o-notation.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1235708842610212864) where this image was posted.
diff --git a/content/guides/character-encodings.md b/content/guides/character-encodings.md
index c02b3758d0c0..ed492860e391 100644
--- a/content/guides/character-encodings.md
+++ b/content/guides/character-encodings.md
@@ -1,3 +1,2 @@
[](/guides/character-encodings.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1259631582362689537) where this image was posted.
diff --git a/content/guides/ci-cd.md b/content/guides/ci-cd.md
index e6ed9fa2c57f..9662f8cca358 100644
--- a/content/guides/ci-cd.md
+++ b/content/guides/ci-cd.md
@@ -2,4 +2,3 @@ The image below details the differences between the continuous integration and c
[](/guides/ci-cd.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1282806173939511298) where this image was posted.
diff --git a/content/guides/dhcp-in-one-picture.md b/content/guides/dhcp-in-one-picture.md
index 3f83dcdf1e4f..64c31b55ba83 100644
--- a/content/guides/dhcp-in-one-picture.md
+++ b/content/guides/dhcp-in-one-picture.md
@@ -1,3 +1,2 @@
[](/guides/dhcp.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1254142557417857025) where this image was posted.
diff --git a/content/guides/jwt-authentication.md b/content/guides/jwt-authentication.md
index 33ec3e50c616..6bf63572c630 100644
--- a/content/guides/jwt-authentication.md
+++ b/content/guides/jwt-authentication.md
@@ -1,3 +1,2 @@
[](/guides/jwt-authentication.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1273375903511465990) where this image was posted.
diff --git a/content/guides/oauth.md b/content/guides/oauth.md
index 8ea3283ed59b..cc269c68b117 100644
--- a/content/guides/oauth.md
+++ b/content/guides/oauth.md
@@ -1,3 +1,2 @@
[](/guides/oauth.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1276994010423361540) where this image was posted.
diff --git a/content/guides/random-numbers.md b/content/guides/random-numbers.md
index 64e968c54354..5cfeff0f4527 100644
--- a/content/guides/random-numbers.md
+++ b/content/guides/random-numbers.md
@@ -2,4 +2,3 @@ Random numbers are everywhere from computer games to lottery systems, graphics s
[](/guides/random-numbers.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1237851549302312962) where this image was posted.
diff --git a/content/guides/scaling-databases.md b/content/guides/scaling-databases.md
index d3cb4cf2c2f0..07144f115691 100644
--- a/content/guides/scaling-databases.md
+++ b/content/guides/scaling-databases.md
@@ -2,4 +2,3 @@ The chart below aims to give you a really basic understanding of how the capabil
[](/guides/scaling-databases.svg)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1234209674003611650) where this image was posted.
diff --git a/content/guides/session-authentication.md b/content/guides/session-authentication.md
index 33b08bd0dfb1..8977881424f4 100644
--- a/content/guides/session-authentication.md
+++ b/content/guides/session-authentication.md
@@ -1,3 +1,2 @@
[](/guides/session-authentication.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1264113498520465410) where this image was posted.
diff --git a/content/guides/ssl-tls-https-ssh.md b/content/guides/ssl-tls-https-ssh.md
index bc916a00f302..983776e75227 100644
--- a/content/guides/ssl-tls-https-ssh.md
+++ b/content/guides/ssl-tls-https-ssh.md
@@ -1,3 +1,2 @@
[](/guides/ssl-tls-https-ssh.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1252717722724642822) where this image was posted.
diff --git a/content/guides/sso.md b/content/guides/sso.md
index 5ec9a39a1657..3f264cc0b3e2 100644
--- a/content/guides/sso.md
+++ b/content/guides/sso.md
@@ -1,3 +1,2 @@
[](/guides/sso.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1280266408434302979) where this image was posted.
diff --git a/content/guides/threads-and-concurrency.md b/content/guides/threads-and-concurrency.md
new file mode 100644
index 000000000000..b6038a96e0e4
--- /dev/null
+++ b/content/guides/threads-and-concurrency.md
@@ -0,0 +1,8 @@
+# Threads and Concurrency
+
+A thread is an execution context in which the instructions to the CPU can be scheduled and executed independently of the parent process. Concurrency is the concept of multiple threads in a shared memory space being computed simultaneously (or intermittently executed in succession to provide that illusion). Concurrency allows multiple processes to execute at once and can apply to programming languages as well as operating systems.
+
+Free Content
+Threading Tutorial #1 - Concurrency, Threading and Parallelism
+Operating System: Threads and Concurrency
+Reading 17: Concurrency
diff --git a/content/guides/token-authentication.md b/content/guides/token-authentication.md
index 410041cc8c4b..e8633a50affc 100644
--- a/content/guides/token-authentication.md
+++ b/content/guides/token-authentication.md
@@ -1,3 +1,2 @@
[](/guides/token-authentication.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1266832006782103552) where this image was posted.
diff --git a/content/guides/unfamiliar-codebase.md b/content/guides/unfamiliar-codebase.md
index 457489c6f488..31a192a11c5d 100644
--- a/content/guides/unfamiliar-codebase.md
+++ b/content/guides/unfamiliar-codebase.md
@@ -1,3 +1,2 @@
[](/guides/unfamiliar-codebase.png)
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1256340163573231616) where this image was posted.
diff --git a/content/guides/what-are-web-vitals.md b/content/guides/what-are-web-vitals.md
new file mode 100644
index 000000000000..072dcbc9c823
--- /dev/null
+++ b/content/guides/what-are-web-vitals.md
@@ -0,0 +1,2 @@
+[](/guides/web-vitals.png)
+
diff --git a/content/guides/what-is-sli-slo-sla.md b/content/guides/what-is-sli-slo-sla.md
new file mode 100644
index 000000000000..dbb762486a09
--- /dev/null
+++ b/content/guides/what-is-sli-slo-sla.md
@@ -0,0 +1,2 @@
+[](/guides/sli-slo-sla.jpeg)
+
diff --git a/content/pages/about.md b/content/pages/about.md
index 98f2b0f39292..ab5555242781 100644
--- a/content/pages/about.md
+++ b/content/pages/about.md
@@ -19,8 +19,8 @@ learnings, get feedbacks on their projects etc.
## How did you build roadmap.sh?
The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can
-be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the
-people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
+be found on [github](https://github.com/kamranahmedse/developer-roadmap). It was hastily done to get it out in front of the
+people and get people to start contributing, so it might be rough on the edges, but that is where we need your help.
## How does it make money?
@@ -37,7 +37,7 @@ creates value for the people.
## Can I contribute?
You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The
-source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can
+source code of the website can be [found on Github](https://github.com/kamranahmedse/developer-roadmap). Your contributions can
be:
* Adding a new roadmap
@@ -51,7 +51,7 @@ be:
* Becoming a sponsor
Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing) when you
decide to contribute.
## Can I redistribute the content?
diff --git a/content/roadmaps.json b/content/roadmaps.json
index 4d9d8835cd6f..28c9546087ae 100644
--- a/content/roadmaps.json
+++ b/content/roadmaps.json
@@ -1,9 +1,12 @@
[
{
"seo": {
- "title": "Learn to become a modern frontend developer",
- "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "title": "Frontend Developer Roadmap: Learn to become a modern frontend developer",
+ "description": "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.",
"keywords": [
+ "javascript roadmap 2022",
+ "frontend roadmap 2022",
+ "frontend developer roadmap 2022",
"guide to becoming a developer",
"guide to becoming a frontend developer",
"frontend developer",
@@ -13,6 +16,7 @@
"javascript developer",
"frontend development skills",
"frontend development skills test",
+ "frontend roadmap",
"frontend engineer roadmap",
"frontend developer roadmap",
"become a frontend developer",
@@ -28,27 +32,33 @@
]
},
"title": "Frontend Developer",
- "description": "Step by step guide to becoming a modern frontend developer in 2021",
+ "description": "Step by step guide to becoming a modern frontend developer in 2022",
"featuredTitle": "Frontend",
- "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
+ "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"featured": true,
- "imagePath": "/roadmaps/frontend.png",
- "resourcesPath": "/roadmaps/1-frontend/resources.md",
+ "imageUrl": "/roadmaps/frontend.png",
+ "jsonUrl": "/project/frontend.json",
+ "resourcesPath": "/roadmaps/100-frontend/resources.md",
"pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
+ "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
"id": "frontend",
+ "metaPath": "/roadmaps/100-frontend/meta.json",
"isUpcoming": false
},
{
"seo": {
- "title": "Learn to become a modern backend developer",
- "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "title": "Backend Developer Roadmap: Learn to become a modern backend developer",
+ "description": "Learn to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
"keywords": [
+ "backend roadmap 2022",
+ "backend developer roadmap 2022",
"guide to becoming a developer",
"guide to becoming a backend developer",
+ "backend roadmap",
"backend developer",
"backend engineer",
"backend skills",
@@ -71,18 +81,21 @@
]
},
"title": "Backend Developer",
- "description": "Step by step guide to becoming a modern backend developer in 2021",
+ "description": "Step by step guide to becoming a modern backend developer in 2022",
"featuredTitle": "Backend",
- "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
+ "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
"featured": true,
- "imagePath": "/roadmaps/backend.png",
- "resourcesPath": "/roadmaps/2-backend/resources.md",
+ "imageUrl": "/roadmaps/backend.png",
+ "jsonUrl": "/project/backend.json",
+ "resourcesPath": "/roadmaps/101-backend/resources.md",
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
+ "contentPathsFilePath": "/roadmaps/101-backend/content-paths.json",
"id": "backend",
+ "metaPath": "/roadmaps/101-backend/meta.json",
"isUpcoming": false
},
{
@@ -90,6 +103,9 @@
"title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
"description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [
+ "devops roadmap 2022",
+ "sre roadmap 2022",
+ "operations roadmap 2022",
"guide to becoming a devops enginer",
"devops roadmap",
"sre roadmap",
@@ -108,12 +124,13 @@
]
},
"title": "DevOps Roadmap",
- "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
+ "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
"featuredTitle": "DevOps",
- "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
+ "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
"featured": true,
- "imagePath": "/roadmaps/devops.png",
- "resourcesPath": "/roadmaps/3-devops/resources.md",
+ "imageUrl": "/roadmaps/devops.png",
+ "jsonUrl": "/project/devops.json",
+ "resourcesPath": "/roadmaps/102-devops/resources.md",
"versions": [
"latest",
"2018",
@@ -125,6 +142,7 @@
},
"pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
"id": "devops",
+ "metaPath": "/roadmaps/102-devops/meta.json",
"isUpcoming": false
},
{
@@ -132,6 +150,8 @@
"title": "React Developer Roadmap: Learn to become a React developer",
"description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [
+ "react roadmap 2022",
+ "react developer roadmap 2022",
"guide to becoming a react developer",
"react developer roadmap",
"react roadmap",
@@ -146,14 +166,15 @@
]
},
"title": "React Developer",
- "description": "Everything that is there to learn about React and the ecosystem in 2021.",
+ "description": "Everything that is there to learn about React and the ecosystem in 2022.",
"featuredTitle": "React",
- "featuredDescription": "Step by step guide to become a React Developer in 2021",
+ "featuredDescription": "Step by step guide to become a React Developer in 2022",
"isTextHeavy": false,
"isCommunity": false,
"featured": true,
- "contentPath": "/roadmaps/4-react/landscape.md",
- "resourcesPath": "/roadmaps/4-react/resources.md",
+ "landingPath": "/roadmaps/103-react/landscape.md",
+ "resourcesPath": "/roadmaps/103-react/resources.md",
+ "jsonUrl": "/project/react.json",
"versions": [
"latest",
"2018",
@@ -165,8 +186,235 @@
},
"pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
"id": "react",
+ "metaPath": "/roadmaps/103-react/meta.json",
"isUpcoming": false
},
+ {
+ "seo": {
+ "title": "Angular Developer Roadmap: Learn to become a Angular developer",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "keywords": [
+ "guide to becoming a angular developer",
+ "angular developer roadmap",
+ "angular roadmap",
+ "become angular developer",
+ "angular developer skills",
+ "angular skills test",
+ "skills for angular development",
+ "learn angular development",
+ "what is angular",
+ "angular quiz",
+ "angular interview questions"
+ ]
+ },
+ "title": "Angular Developer",
+ "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
+ "featuredTitle": "Angular",
+ "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
+ "isTextHeavy": false,
+ "isCommunity": false,
+ "featured": true,
+ "jsonUrl": "/project/angular.json",
+ "landingPath": "/roadmaps/104-angular/landscape.md",
+ "resourcesPath": "/roadmaps/104-angular/resources.md",
+ "versions": [
+ "latest",
+ "2018",
+ "2017"
+ ],
+ "author": {
+ "name": "Kamran Ahmed",
+ "url": "https://twitter.com/kamranahmedse"
+ },
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/angular-roadmap",
+ "id": "angular",
+ "metaPath": "/roadmaps/104-angular/meta.json",
+ "isUpcoming": false
+ },
+ {
+ "seo": {
+ "title": "Android Developer Roadmap: Learn to become an Android developer",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "keywords": [
+ "guide to becoming an android developer",
+ "android developer roadmap",
+ "android roadmap",
+ "become android developer",
+ "android developer skills",
+ "android skills test",
+ "skills for android development",
+ "learn android development",
+ "what is android",
+ "android quiz",
+ "android interview questions"
+ ]
+ },
+ "title": "Android Developer",
+ "description": "Step by step guide to becoming an Android developer in 2022",
+ "featuredTitle": "Android",
+ "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
+ "isTextHeavy": true,
+ "isCommunity": false,
+ "featured": true,
+ "jsonUrl": "/project/android.json",
+ "landingPath": "/roadmaps/105-android/landscape.md",
+ "resourcesPath": "/roadmaps/105-android/resources.md",
+ "versions": [
+ "latest",
+ "2018",
+ "2017"
+ ],
+ "author": {
+ "name": "Kamran Ahmed",
+ "url": "https://twitter.com/kamranahmedse"
+ },
+ "id": "android",
+ "metaPath": "/roadmaps/105-android/meta.json",
+ "isUpcoming": false
+ },
+ {
+ "seo": {
+ "title": "Learn to become a modern Python developer",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "keywords": [
+ "guide to becoming an python developer",
+ "python developer roadmap",
+ "python roadmap",
+ "become python developer",
+ "python developer skills",
+ "python skills test",
+ "skills for python development",
+ "learn python development",
+ "what is python",
+ "python quiz",
+ "python interview questions"
+ ]
+ },
+ "title": "Python Developer",
+ "description": "Step by step guide to becoming a Python developer in 2022",
+ "featuredTitle": "Python",
+ "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
+ "isTextHeavy": true,
+ "isCommunity": false,
+ "featured": true,
+ "jsonUrl": "/project/python.json",
+ "resourcesPath": "/roadmaps/106-python/resources.md",
+ "landingPath": "/roadmaps/106-python/landscape.md",
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/python-roadmap",
+ "versions": [
+ "latest"
+ ],
+ "author": {
+ "name": "Kamran Ahmed",
+ "url": "https://twitter.com/kamranahmedse"
+ },
+ "id": "python",
+ "metaPath": "/roadmaps/106-python/meta.json",
+ "isUpcoming": false
+ },
+ {
+ "seo": {
+ "title": "Learn to become a Go developer",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for Go development. Learn to become a modern Go developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "keywords": [
+ "guide to becoming a golang developer",
+ "guide to becoming a go developer",
+ "golang developer",
+ "go developer",
+ "guide to golang",
+ "guide to go",
+ "golang roadmap",
+ "go roadmap",
+ "golang skills",
+ "go skills",
+ "golang skills test",
+ "go skills test",
+ "skills for golang",
+ "skills for go",
+ "cloud development",
+ "what is golang",
+ "what is go",
+ "golang quiz",
+ "go quiz",
+ "golang interview questions",
+ "go interview questions"
+ ]
+ },
+ "title": "Go Developer",
+ "description": "Step by step guide to becoming a Go developer in 2022",
+ "featuredTitle": "Go",
+ "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
+ "isTextHeavy": false,
+ "isCommunity": false,
+ "isUpcoming": false,
+ "featured": true,
+ "jsonUrl": "/project/golang.json",
+ "landingPath": "/roadmaps/107-golang/landscape.md",
+ "resourcesPath": "/roadmaps/107-golang/resources.md",
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/go-roadmap",
+ "versions": [
+ "latest",
+ "2018",
+ "2017"
+ ],
+ "author": {
+ "name": "Kamran Ahmed",
+ "url": "https://twitter.com/kamranahmedse"
+ },
+ "id": "golang",
+ "metaPath": "/roadmaps/107-golang/meta.json"
+ },
+ {
+ "seo": {
+ "title": "Learn to become a modern Java developer",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for java development. Learn to become a modern Java developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "keywords": [
+ "guide to becoming a developer",
+ "guide to becoming a java developer",
+ "java developer",
+ "java engineer",
+ "java skills",
+ "guide to java",
+ "java roadmap",
+ "java skills",
+ "java skills test",
+ "skills for java",
+ "cloud development",
+ "what is java",
+ "java quiz",
+ "java interview questions",
+ "java engineer roadmap",
+ "java developer roadmap",
+ "become a java developer",
+ "java developer career path",
+ "java developer",
+ "modern java developer"
+ ]
+ },
+ "title": "Java Developer",
+ "description": "Step by step guide to becoming a Java developer in 2022",
+ "featuredTitle": "Java",
+ "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
+ "isTextHeavy": false,
+ "isCommunity": false,
+ "isUpcoming": false,
+ "featured": true,
+ "jsonUrl": "/project/java.json",
+ "landingPath": "/roadmaps/108-java/landscape.md",
+ "resourcesPath": "/roadmaps/108-java/resources.md",
+ "versions": [
+ "latest",
+ "2018",
+ "2017"
+ ],
+ "author": {
+ "name": "Kamran Ahmed",
+ "url": "https://twitter.com/kamranahmedse"
+ },
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/java-roadmap",
+ "id": "java",
+ "metaPath": "/roadmaps/108-java/meta.json"
+ },
{
"seo": {
"title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
@@ -193,50 +441,50 @@
]
},
"title": "PostgreSQL DBA",
- "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
+ "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
"featuredTitle": "DBA",
- "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
- "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
- "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
+ "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
+ "landingPath": "/roadmaps/109-postgresql-dba/landscape.md",
+ "resourcesPath": "/roadmaps/109-postgresql-dba/resources.md",
"author": {
"name": "Alexey Lesovsky",
"url": "https://github.com/lesovsky"
},
- "isCommunity": true,
+ "isCommunity": false,
"isTextHeavy": true,
"featured": true,
"detailed": false,
"versions": [],
"id": "postgresql-dba",
+ "metaPath": "/roadmaps/109-postgresql-dba/meta.json",
"isUpcoming": false
},
{
"seo": {
- "title": "Android Developer Roadmap: Learn to become an Android developer",
- "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "title": "AWS Roadmap: Learn to use AWS",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [
- "guide to becoming an android developer",
- "android developer roadmap",
- "android roadmap",
- "become android developer",
- "android developer skills",
- "android skills test",
- "skills for android development",
- "learn android development",
- "what is android",
- "android quiz",
- "android interview questions"
+ "guide to aws",
+ "aws roadmap",
+ "aws skills",
+ "aws skills test",
+ "skills for aws",
+ "cloud development",
+ "what is aws",
+ "aws quiz",
+ "aws interview questions"
]
},
- "title": "Android Developer",
- "description": "Step by step guide to becoming an Android developer in 2021",
- "featuredTitle": "Android",
- "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
- "isTextHeavy": true,
- "isCommunity": true,
+ "title": "AWS",
+ "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
+ "featuredTitle": "AWS",
+ "featuredDescription": "Step by step guide to learn AWS in 2022",
+ "isTextHeavy": false,
+ "isCommunity": false,
+ "isUpcoming": true,
"featured": true,
- "contentPath": "/roadmaps/6-android/landscape.md",
- "resourcesPath": "/roadmaps/6-android/resources.md",
+ "landingPath": "/roadmaps/110-aws/landscape.md",
+ "resourcesPath": "/roadmaps/110-aws/resources.md",
"versions": [
"latest",
"2018",
@@ -246,8 +494,8 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
- "id": "android",
- "isUpcoming": false
+ "id": "aws",
+ "metaPath": "/roadmaps/110-aws/meta.json"
},
{
"seo": {
@@ -269,16 +517,18 @@
]
},
"title": "QA Engineer",
- "description": "Steps to follow in order to become a modern QA Engineer in 2021",
+ "description": "Steps to follow in order to become a modern QA Engineer in 2022",
"featuredTitle": "QA",
- "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
+ "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
"isUpcoming": true,
- "contentPath": "/roadmaps/7-qa/landscape.md",
- "resourcesPath": "/roadmaps/7-qa/resources.md",
+ "featured": true,
+ "landingPath": "/roadmaps/111-qa/landscape.md",
+ "resourcesPath": "/roadmaps/111-qa/resources.md",
"author": {
"name": "Anas Fitiani",
"url": "https://github.com/anas-qa"
},
- "id": "qa"
+ "id": "qa",
+ "metaPath": "/roadmaps/111-qa/meta.json"
}
]
\ No newline at end of file
diff --git a/content/roadmaps/1-frontend/resources.md b/content/roadmaps/1-frontend/resources.md
deleted file mode 100644
index c60e71242804..000000000000
--- a/content/roadmaps/1-frontend/resources.md
+++ /dev/null
@@ -1,76 +0,0 @@
-
- This page is incomplete and is being worked upon. Please check back later or subscribe / follow me on twitter to get notified. Also, feel free to contribute by suggesting the resources in the issues.
-
-
-# Become a Frontend Developer
-Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way.
-
-## Internet and how it works?
-
-Get the basic understanding of internet, browsers, networks and other relevant knowledge.
-
-* What is Internet?
-* How the internet works in 5 minutes
-* What is HTTP and how it evolved?
-* HTTP/3: the past, the present, and the future
-* What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol
-* How Browsers Work: Behind the scenes of modern web browsers
-* DNS as Fast As Possible
-* How DNS works?
-* DNS in One Picture
-
-## Learn HTML
-HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them.
-
-Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
-
-
-* HTML Crash Course For Absolute Beginners
-* W3Schools – HTML Tutorial
-* HTML Full Course - Build a Website Tutorial
-* A few HTML tips
-* Six tips to set up a better HTML document
-* HTML Semantic Elements
-* HTML elements reference
-
-## Style your pages with CSS
-With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
-
-* W3Schools – CSS Tutorial
-* CSS Crash Course For Absolute Beginners
-* Build An HTML5 Website With A Responsive Layout
-* Flexbox CSS In 20 Minutes
-
-## Basics of JavaScript
-JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
-
-* W3Schools – JavaScript Tutorial
-* JavaScript Crash Course for Beginners
-* Build a Netflix Landing Page Clone with HTML, CSS & JS
-
-## Version Control Systems and Git
-
-Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
-
-In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.
-
-* Version Control System Introduction
-* Git & GitHub Crash Course For Beginners
-* Learn Git in 20 Minutes
-
-Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
-
-## Modern JavaScript
-
-In this section you will learn how to use package managers and get started with the "modern JavaScript".
-
-* Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)
-* What is NPM and how to use it
-* NPM Crash Course
-
-
-
-
-
-
-
diff --git a/content/roadmaps/100-frontend/content-paths.json b/content/roadmaps/100-frontend/content-paths.json
new file mode 100644
index 000000000000..503f905bff3e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content-paths.json
@@ -0,0 +1,136 @@
+{
+ "home": "/roadmaps/100-frontend/content/readme.md",
+ "internet": "/roadmaps/100-frontend/content/100-internet/readme.md",
+ "internet:how-does-the-internet-work": "/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md",
+ "internet:what-is-http": "/roadmaps/100-frontend/content/100-internet/101-what-is-http.md",
+ "internet:browsers-and-how-they-work": "/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md",
+ "internet:dns-and-how-it-works": "/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md",
+ "internet:what-is-domain-name": "/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md",
+ "internet:what-is-hosting": "/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md",
+ "html": "/roadmaps/100-frontend/content/101-html/readme.md",
+ "html:learn-the-basics": "/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md",
+ "html:writing-semantic-html": "/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md",
+ "html:forms-and-validations": "/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md",
+ "html:conventions-and-best-practices": "/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md",
+ "html:accessibility": "/roadmaps/100-frontend/content/101-html/104-accessibility.md",
+ "html:seo-basics": "/roadmaps/100-frontend/content/101-html/105-seo-basics.md",
+ "css": "/roadmaps/100-frontend/content/102-css/readme.md",
+ "css:learn-the-basics": "/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md",
+ "css:making-layouts": "/roadmaps/100-frontend/content/102-css/101-making-layouts.md",
+ "css:responsive-design-and-media-queries": "/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md",
+ "javascript": "/roadmaps/100-frontend/content/103-javascript/readme.md",
+ "javascript:syntax-and-basic-constructs": "/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md",
+ "javascript:learn-dom-manipulation": "/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md",
+ "javascript:learn-fetch-api-ajax-xhr": "/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md",
+ "javascript:es6-and-modular-javascript": "/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md",
+ "javascript:concepts": "/roadmaps/100-frontend/content/103-javascript/104-concepts.md",
+ "version-control-systems": "/roadmaps/100-frontend/content/104-version-control-systems/readme.md",
+ "version-control-systems:basic-usage-of-git": "/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md",
+ "repo-hosting-services": "/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md",
+ "repo-hosting-services:github": "/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md",
+ "repo-hosting-services:gitlab": "/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md",
+ "repo-hosting-services:bitbucket": "/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md",
+ "web-security-knowledge": "/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md",
+ "web-security-knowledge:cors": "/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md",
+ "web-security-knowledge:https": "/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md",
+ "web-security-knowledge:content-security-policy": "/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md",
+ "web-security-knowledge:owasp-security-risks": "/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md",
+ "package-managers": "/roadmaps/100-frontend/content/107-package-managers/readme.md",
+ "package-managers:npm": "/roadmaps/100-frontend/content/107-package-managers/100-npm.md",
+ "package-managers:yarn": "/roadmaps/100-frontend/content/107-package-managers/101-yarn.md",
+ "css-architecture": "/roadmaps/100-frontend/content/108-css-architecture/readme.md",
+ "css-architecture:bem": "/roadmaps/100-frontend/content/108-css-architecture/100-bem.md",
+ "css-architecture:oocss": "/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md",
+ "css-architecture:smacss": "/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md",
+ "css-preprocessors": "/roadmaps/100-frontend/content/109-css-preprocessors/readme.md",
+ "css-preprocessors:sass": "/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md",
+ "css-preprocessors:postcss": "/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md",
+ "css-preprocessors:less": "/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md",
+ "build-tools": "/roadmaps/100-frontend/content/110-build-tools/readme.md",
+ "build-tools:task-runners": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md",
+ "build-tools:task-runners:npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md",
+ "build-tools:linters-formatters": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md",
+ "build-tools:linters-formatters:prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md",
+ "build-tools:linters-formatters:eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md",
+ "build-tools:linters-formatters:standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md",
+ "build-tools:module-bundlers": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md",
+ "build-tools:module-bundlers:webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md",
+ "build-tools:module-bundlers:esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md",
+ "build-tools:module-bundlers:rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md",
+ "build-tools:module-bundlers:parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md",
+ "build-tools:module-bundlers:vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md",
+ "pick-a-framework": "/roadmaps/100-frontend/content/111-pick-a-framework/readme.md",
+ "pick-a-framework:react-js": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md",
+ "pick-a-framework:react-js:recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md",
+ "pick-a-framework:react-js:redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md",
+ "pick-a-framework:react-js:mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md",
+ "pick-a-framework:angular": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md",
+ "pick-a-framework:angular:rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md",
+ "pick-a-framework:angular:ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md",
+ "pick-a-framework:vue-js": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md",
+ "pick-a-framework:vue-js:vuex": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md",
+ "modern-css": "/roadmaps/100-frontend/content/112-modern-css/readme.md",
+ "modern-css:styled-components": "/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md",
+ "modern-css:css-modules": "/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md",
+ "modern-css:styled-jsx": "/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md",
+ "modern-css:emotion": "/roadmaps/100-frontend/content/112-modern-css/103-emotion.md",
+ "web-components": "/roadmaps/100-frontend/content/113-web-components/readme.md",
+ "web-components:html-templates": "/roadmaps/100-frontend/content/113-web-components/100-html-templates.md",
+ "web-components:custom-elements": "/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md",
+ "web-components:shadow-dom": "/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md",
+ "css-frameworks": "/roadmaps/100-frontend/content/114-css-frameworks/readme.md",
+ "css-frameworks:js-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md",
+ "css-frameworks:js-first:chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md",
+ "css-frameworks:js-first:material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md",
+ "css-frameworks:js-first:radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md",
+ "css-frameworks:js-first:tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md",
+ "css-frameworks:css-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md",
+ "css-frameworks:css-first:bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md",
+ "css-frameworks:css-first:bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md",
+ "testing-your-apps": "/roadmaps/100-frontend/content/115-testing-your-apps/readme.md",
+ "testing-your-apps:jest": "/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md",
+ "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md",
+ "testing-your-apps:cypress": "/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md",
+ "testing-your-apps:enzyme": "/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md",
+ "testing-your-apps:other-options": "/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md",
+ "testing-your-apps:mocha": "/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md",
+ "testing-your-apps:chai": "/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md",
+ "testing-your-apps:ava": "/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md",
+ "testing-your-apps:jasmine": "/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md",
+ "type-checkers": "/roadmaps/100-frontend/content/116-type-checkers/readme.md",
+ "type-checkers:typescript": "/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md",
+ "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md",
+ "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md",
+ "progressive-web-apps:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md",
+ "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md",
+ "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md",
+ "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md",
+ "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md",
+ "server-side-rendering:react-js:after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md",
+ "server-side-rendering:angular": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md",
+ "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md",
+ "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md",
+ "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md",
+ "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md",
+ "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md",
+ "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md",
+ "static-site-generators": "/roadmaps/100-frontend/content/120-static-site-generators/readme.md",
+ "static-site-generators:next-js": "/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md",
+ "static-site-generators:gatsbyjs": "/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md",
+ "static-site-generators:nuxt-js": "/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md",
+ "static-site-generators:vuepress": "/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md",
+ "static-site-generators:jekyll": "/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md",
+ "static-site-generators:hugo": "/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md",
+ "static-site-generators:gridsome": "/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md",
+ "static-site-generators:eleventy": "/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md",
+ "mobile-applications": "/roadmaps/100-frontend/content/121-mobile-applications/readme.md",
+ "mobile-applications:react-native": "/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md",
+ "mobile-applications:nativescript": "/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md",
+ "mobile-applications:flutter": "/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md",
+ "mobile-applications:ionic": "/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md",
+ "desktop-applications": "/roadmaps/100-frontend/content/122-desktop-applications/readme.md",
+ "desktop-applications:electron": "/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md",
+ "desktop-applications:carlo": "/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md",
+ "desktop-applications:proton-native": "/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md",
+ "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md"
+}
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md b/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md
new file mode 100644
index 000000000000..ef14a4d6edd4
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md
@@ -0,0 +1,10 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+Free Content
+The Internet Explained
+How Does the Internet Work?
+Introduction to Internet
+How does the Internet work?
+How the Internet Works in 5 Minutes
diff --git a/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md b/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md
new file mode 100644
index 000000000000..3c4229aca4d3
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md
@@ -0,0 +1,10 @@
+# What is HTTP?
+
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
+
+Free Content
+What is HTTP?
+An overview of HTTP
+Journey to HTTP/2
+HTTP/3 From A To Z: Core Concepts
+HTTP Crash Course & Exploration
diff --git a/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md b/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
new file mode 100644
index 000000000000..c07b24906c60
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
@@ -0,0 +1,9 @@
+# Browsers
+
+A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.
+
+Free Content
+How Browsers Work
+Role of Rendering Engine in Browsers
+Populating the Page: How Browsers Work
+How Do Web Browsers Work?
diff --git a/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md b/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md
new file mode 100644
index 000000000000..abcad0eb7792
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md
@@ -0,0 +1,7 @@
+# DNS
+The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+Free Content
+What is DNS?
+DNS and How does it Work?
+DNS Records
diff --git a/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md b/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md
new file mode 100644
index 000000000000..1fb0a759ee34
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md
@@ -0,0 +1,8 @@
+# Domain Name
+
+A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
+
+Free Content
+What is a Domain Name?
+What is a Domain Name? | Domain name vs. URL
+A Beginners Guide to How Domain Names Work
diff --git a/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md b/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md
new file mode 100644
index 000000000000..7ab9b4f76f5b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md
@@ -0,0 +1,8 @@
+# Hosting
+
+Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
+
+Free Content
+What Is Web Hosting? Explained
+Different Types of Web Hosting Explained
+Where to Host a Fullstack Project on a Budget
diff --git a/content/roadmaps/100-frontend/content/100-internet/readme.md b/content/roadmaps/100-frontend/content/100-internet/readme.md
new file mode 100644
index 000000000000..ef14a4d6edd4
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/100-internet/readme.md
@@ -0,0 +1,10 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+Free Content
+The Internet Explained
+How Does the Internet Work?
+Introduction to Internet
+How does the Internet work?
+How the Internet Works in 5 Minutes
diff --git a/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md b/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
new file mode 100644
index 000000000000..b5d46a681f74
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
@@ -0,0 +1,9 @@
+# HTML Basics
+
+HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+Free Content
+W3Schools: Learn HTML
+HTML Full Course - Build a Website Tutorial
+HTML Tutorial for Beginners: HTML Crash Course
+Build 15 JavaScript Projects - Vanilla JavaScript
diff --git a/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md b/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
new file mode 100644
index 000000000000..de52665c0c9d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
@@ -0,0 +1,9 @@
+# Semantic HTML
+
+Semantic element clearly describes its meaning to both the browser and the developer.
+
+Free Content
+W3Schools: Semantic HTML
+How To Write Semantic HTML
+
+
diff --git a/content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md b/content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md
new file mode 100644
index 000000000000..138885ab8873
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md
@@ -0,0 +1,6 @@
+# Forms and Validations
+
+Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
+
+Free Content
+MDN Web Docs: Client-side form validation
diff --git a/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md b/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
new file mode 100644
index 000000000000..1c2a4bfd1cbf
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
@@ -0,0 +1,7 @@
+# Best Practices
+
+Learn to follow the best practices for writing maintainable and scalable HTML documents.
+
+Free Content
+HTML Best Practices
+
diff --git a/content/roadmaps/100-frontend/content/101-html/104-accessibility.md b/content/roadmaps/100-frontend/content/101-html/104-accessibility.md
new file mode 100644
index 000000000000..a00893550f57
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/104-accessibility.md
@@ -0,0 +1,8 @@
+# Accessibility
+Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily.
+
+Free Content
+Complete Playlist on Accessibility
+Accessibility Tutorial
+
+A Complete Guide To Accessible Front-End Components
diff --git a/content/roadmaps/100-frontend/content/101-html/105-seo-basics.md b/content/roadmaps/100-frontend/content/101-html/105-seo-basics.md
new file mode 100644
index 000000000000..e9a12a8a6f46
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/105-seo-basics.md
@@ -0,0 +1,12 @@
+# Basics of SEO
+
+SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.
+
+
+Free Content
+
+Google Search Central — SEO Docs
+SEO Guide
+SEO for Developers
+Complete SEO Course for Beginners
+SEO Expert Course
diff --git a/content/roadmaps/100-frontend/content/101-html/readme.md b/content/roadmaps/100-frontend/content/101-html/readme.md
new file mode 100644
index 000000000000..e4861113db81
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/101-html/readme.md
@@ -0,0 +1,10 @@
+# HTML
+
+HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+Free Content
+W3Schools: Learn HTML
+HTML Full Course - Build a Website Tutorial
+HTML Tutorial for Beginners: HTML Crash Course
+Codecademy - Learn HTML
+Interactive HTML Course
diff --git a/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md b/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
new file mode 100644
index 000000000000..ad9e72046cdc
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
@@ -0,0 +1,11 @@
+# CSS Basics
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+Free Content
+W3Schools — Learn CSS
+freeCodeCamp — Responsive Web Design
+Learn to Code HTML & CSS
+CSS Crash Course For Absolute Beginners
+HTML and CSS Tutorial
+CSS Masterclass - Tutorial & Course for Beginners
diff --git a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
new file mode 100644
index 000000000000..547aff6cb2b1
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
@@ -0,0 +1,12 @@
+# Making layouts
+
+Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics:
+
+Free Content
+
+Learn and Practice Flexbox
+Game for learning CSS Grid
+All about Floats
+Positioning Types: How Do They Differ?
+The Box Model
+The CSS Display Property
diff --git a/content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md b/content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md
new file mode 100644
index 000000000000..80cf49706457
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md
@@ -0,0 +1,9 @@
+# Responsive Web Design
+
+Responsive Web Designing is the technique to make your webpages look good on all screen sizes. There are certain techniques used to achieve that e.g. CSS media queries, percentage widths, min or max widths heights etc.
+
+Free Content
+
+Responsive Web Design
+Learn Responsive Design
+Introduction To Responsive Web Design
diff --git a/content/roadmaps/100-frontend/content/102-css/readme.md b/content/roadmaps/100-frontend/content/102-css/readme.md
new file mode 100644
index 000000000000..687a52abce84
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/102-css/readme.md
@@ -0,0 +1,15 @@
+# CSS
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+Free Content
+W3Schools — Learn CSS
+Web.dev by Google — Learn CSS
+freeCodeCamp — Responsive Web Design
+Learn to Code HTML & CSS
+CSS Crash Course For Absolute Beginners
+HTML and CSS Tutorial
+CSS Masterclass - Tutorial & Course for Beginners
+What The Flexbox!
+Learn CSS | Codecademy
+Learn Intermediate CSS | Codecademy
diff --git a/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md b/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md
new file mode 100644
index 000000000000..f8708aa4134e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md
@@ -0,0 +1,9 @@
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+Free Content
+W3Schools – JavaScript Tutorial
+The Modern JavaScript Tutorial
+JavaScript Crash Course for Beginners
+Build a Netflix Landing Page Clone with HTML, CSS & JS
diff --git a/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md b/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md
new file mode 100644
index 000000000000..563aa6e44733
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md
@@ -0,0 +1,11 @@
+# DOM Manipulation
+
+The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
+
+Free Content
+What is the DOM?
+JavaScript HTML DOM
+JavaScript DOM
+What is DOM, Shadow DOM and Virtual DOM?
+JavaScript DOM Crash Course
+
diff --git a/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md b/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md
new file mode 100644
index 000000000000..6c80398a935a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md
@@ -0,0 +1,7 @@
+# Fetch API
+
+Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updaing the user profile or asynchronously fetch the list of searched products without reloading the page.
+
+Free Content
+Fetch API MDN Docs
+JavaScript Fetch API
diff --git a/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md b/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md
new file mode 100644
index 000000000000..ea91a272fd59
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md
@@ -0,0 +1,9 @@
+# Modern JavaScript
+
+ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards.
+
+Free Content
+ES6 Tutorial
+Learn Modern JavaScript in 1 Hour
+JavaScript ES6, ES7, ES8
+
diff --git a/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md b/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md
new file mode 100644
index 000000000000..e52e3eefc318
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md
@@ -0,0 +1,13 @@
+# JavaScript Concepts
+
+Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict.
+
+Free Content
+JavaScript Hoisting
+Event Bubbling and Capturing
+Scope in JavaScript
+Var, Let and Const — What's the difference?
+Inheritance and Prototype Chain
+JavaScript Strict Mode
+JavaScript Visualized (7 Part Series)
+DOM vs Shadow DOM vs Virtual DOM
diff --git a/content/roadmaps/100-frontend/content/103-javascript/readme.md b/content/roadmaps/100-frontend/content/103-javascript/readme.md
new file mode 100644
index 000000000000..59a321c6861e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/103-javascript/readme.md
@@ -0,0 +1,10 @@
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+Free Content
+W3Schools – JavaScript Tutorial
+The Modern JavaScript Tutorial
+JavaScript Crash Course for Beginners
+Build a Netflix Landing Page Clone with HTML, CSS & JS
+Learn the basics of JavaScript
diff --git a/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md b/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
new file mode 100644
index 000000000000..dca611bbf94e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
@@ -0,0 +1,8 @@
+# Git
+
+[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
+
+Free Content
+Version Control System Introduction
+Git & GitHub Crash Course For Beginners
+Learn Git in 20 Minutes
diff --git a/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md b/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
new file mode 100644
index 000000000000..d9d2d2bf4586
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
@@ -0,0 +1,8 @@
+# Version Control Systems
+
+Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
+
+Free Content
+Version Control System Introduction
+Git & GitHub Crash Course For Beginners
+Learn Git in 20 Minutes
diff --git a/content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md b/content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
new file mode 100644
index 000000000000..5fef2cf130b8
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
@@ -0,0 +1,11 @@
+# GitHub
+
+[GitHub](https://github.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+Free Content
+
+GitHub: Quickstart
+What is GitHub?
+Git vs. GitHub: What's the difference?
+Git and GitHub for Beginners
+Git and GitHub - CS50 Beyond 2019
diff --git a/content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md b/content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md
new file mode 100644
index 000000000000..46ac31e110b3
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md
@@ -0,0 +1,8 @@
+# GitLab
+
+[GitLab](https://gitlab.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+Free Content
+
+GitLab Website
+GitLab Documentation
diff --git a/content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md b/content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
new file mode 100644
index 000000000000..2ba118ef920b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
@@ -0,0 +1,8 @@
+# BitBucket
+
+[BitBucket](https://bitbucket.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+Free Content
+
+BitBucket Website
+How to use BitBucket?
diff --git a/content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md b/content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
new file mode 100644
index 000000000000..a9357ef8721d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
@@ -0,0 +1,8 @@
+# Repo Hosting Services
+
+There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
+
+Services Links
+GitHub: Where the world builds software
+GitLab: Iterate faster, innovate together
+BitBucket: The Git solution for professional teams
diff --git a/content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md b/content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md
new file mode 100644
index 000000000000..92e8664dc820
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md
@@ -0,0 +1,12 @@
+# HTTPS
+
+HTTPS is a secure way to send data between a web server and a browser.
+
+Free Content
+What is HTTPS?
+Why HTTPS Matters
+Enabling HTTPS on Your Servers
+SSL, TLS, HTTP, HTTPS Explained
+HTTPS — Stories from the field
+
+
diff --git a/content/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md b/content/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md
new file mode 100644
index 000000000000..b01265589c86
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md
@@ -0,0 +1,8 @@
+# Content Security Policy
+
+Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
+
+Free Content
+MDN — Content Security Policy (CSP)
+Google Devs — Content Security Policy (CSP)
+
diff --git a/content/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md b/content/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md
new file mode 100644
index 000000000000..1fc8e60d487a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md
@@ -0,0 +1,6 @@
+# CORS
+
+Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
+
+Free Content
+CORS — Cross-Origin Resource Sharing
diff --git a/content/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md b/content/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md
new file mode 100644
index 000000000000..e43f263cec8d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md
@@ -0,0 +1,9 @@
+# OWASP Security Risks
+
+OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.
+
+Free Content
+Wikipedia - OWASP
+OWASP Web Application Security Testing Checklist
+OWASP Top 10 Security Risks
+OWASP Cheatsheets
diff --git a/content/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md b/content/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md
new file mode 100644
index 000000000000..bee608013e18
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md
@@ -0,0 +1,11 @@
+# Web Security Knowledge
+
+Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business.
+
+Free Content
+Why HTTPS Matters
+Wikipedia - OWASP
+OWASP Web Application Security Testing Checklist
+OWASP Top 10 Security Risks
+OWASP Cheatsheets
+Content Security Policy (CSP)
diff --git a/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md b/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md
new file mode 100644
index 000000000000..a658a528039c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md
@@ -0,0 +1,10 @@
+# npm
+
+npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
+
+Free Content
+Modern JavaScript for Dinosaurs
+An Absolute Beginner's Guide to Using npm
+NPM tutorial for Beginners
+NPM Crash Course
+How to NPM
diff --git a/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md b/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md
new file mode 100644
index 000000000000..dba71b91a362
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md
@@ -0,0 +1,8 @@
+# Yarn
+
+Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).
+
+Free Content
+Modern JavaScript for Dinosaurs
+Yarn - Getting Started
+Yarn Crash Course
diff --git a/content/roadmaps/100-frontend/content/107-package-managers/readme.md b/content/roadmaps/100-frontend/content/107-package-managers/readme.md
new file mode 100644
index 000000000000..cf7dcf8a70d3
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/107-package-managers/readme.md
@@ -0,0 +1,13 @@
+# Package Managers
+
+Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
+
+Free Content
+Modern JavaScript for Dinosaurs
+An Absolute Beginner's Guide to Using npm
+NPM tutorial for Beginners
+NPM Crash Course
+Yarn - Getting Started
+Yarn Crash Course
+
+
diff --git a/content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md b/content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md
new file mode 100644
index 000000000000..d546122bbf58
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md
@@ -0,0 +1,9 @@
+# BEM
+
+The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
+
+Free Content
+BEM Official Website
+BEM Documentation
+BEM 101
+BEM Tutorials
diff --git a/content/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md b/content/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md
new file mode 100644
index 000000000000..fa240338bbf9
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md
@@ -0,0 +1,7 @@
+# OOCSS
+
+As with any object-based coding method, the purpose of OOCSS or Object Oriented CSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
+
+Free Content
+OOCSS Official Website
+Introduction to Object Oriented CSS
diff --git a/content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md b/content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md
new file mode 100644
index 000000000000..ca2c502f98ce
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md
@@ -0,0 +1,6 @@
+# SMACSS
+
+SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
+
+Free Content
+SMACSS Official Website
diff --git a/content/roadmaps/100-frontend/content/108-css-architecture/readme.md b/content/roadmaps/100-frontend/content/108-css-architecture/readme.md
new file mode 100644
index 000000000000..eb01b49bf65b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/108-css-architecture/readme.md
@@ -0,0 +1,10 @@
+# CSS Architecture
+
+CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS.
+
+Free Content
+A Look at Some CSS Methodologies
+BEM Official Website
+OOCSS Official Website
+SMACSS Official Website
+
diff --git a/content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md b/content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md
new file mode 100644
index 000000000000..aa7476f3c231
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md
@@ -0,0 +1,8 @@
+# Sass
+
+Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.
+
+Free Content
+Sass Website
+Official Documentation
+ Sass Tutorial for Beginners
diff --git a/content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md b/content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md
new file mode 100644
index 000000000000..293c38326bb9
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md
@@ -0,0 +1,6 @@
+# PostCSS
+
+PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
+
+Free Resources
+Official Website
diff --git a/content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md b/content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md
new file mode 100644
index 000000000000..7518d881db02
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md
@@ -0,0 +1,8 @@
+# Less
+
+Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
+
+Free Content
+Official Website
+Official Documentation
+ Less CSS Pre-Processor Tutorial
diff --git a/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md b/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
new file mode 100644
index 000000000000..689a71c566dc
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
@@ -0,0 +1,7 @@
+# CSS Preprocessors
+
+CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.
+
+Free Content
+CSS Preprocessors Explained
+Why Use Preprocessors?
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md b/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md
new file mode 100644
index 000000000000..23401920c3f2
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md
@@ -0,0 +1,8 @@
+# npm Scripts
+
+npm scripts are the entries in the scripts field of the package.json file. The scripts field holds an object where you can specify various commands and scripts that you want to expose.
+
+Free Content
+Introduction to npm scripts
+Codevolution: npm scripts
+
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md b/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md
new file mode 100644
index 000000000000..8578f4294e5b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md
@@ -0,0 +1 @@
+# Task runners
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md
new file mode 100644
index 000000000000..9b6e10f126d3
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md
@@ -0,0 +1,8 @@
+# Webpack
+
+Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
+
+Free Content
+
+Webpack Official Website
+Webpack Documentation
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md
new file mode 100644
index 000000000000..60ae8daca6fc
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md
@@ -0,0 +1,7 @@
+# esbuild
+
+Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.
+
+Esbuild Official Website
+Esbuild Documentation
+Why are People Obsessed with esbuild?
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md
new file mode 100644
index 000000000000..0e695daedfff
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md
@@ -0,0 +1,8 @@
+# Rollup
+
+Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
+
+Free Content
+
+Official Website and Docs
+How to Set Up JavaScript Bundling Using Rollup
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md
new file mode 100644
index 000000000000..4d2da5b950ee
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md
@@ -0,0 +1,8 @@
+# Parcel
+
+Parcel is a web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration.
+
+Free Content
+
+Official Website and Docs
+Using Parcel Bundler with React
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md
new file mode 100644
index 000000000000..97144ede706a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md
@@ -0,0 +1,8 @@
+# Vite
+
+Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+Free Content
+Vite Website
+Vite Documentation
+Vite Crash Course
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md
new file mode 100644
index 000000000000..c0318608f1c8
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md
@@ -0,0 +1 @@
+# Module bundlers
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md
new file mode 100644
index 000000000000..28b4cabf8af2
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md
@@ -0,0 +1,6 @@
+# Prettier
+
+Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, and more.
+
+Free Content
+Prettier Website
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
new file mode 100644
index 000000000000..1d6d6a686bba
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
@@ -0,0 +1,8 @@
+# ESLint
+
+With ESLint you can impose the coding standard using a certain set of standalone rules.
+
+Free Content
+ESLint Official Website
+Introduction to ESLint
+ESLint Quickstart - find errors automatically
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
new file mode 100644
index 000000000000..cb069e24299b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
@@ -0,0 +1,9 @@
+# StandardJS
+
+Standardjs is a Style guide, with linter & automatic code fixer. It is a way to enforce consistent style in your project. It automatically formats code.
+Standard JS is a tool in the Code Review category of a tech stack.
+
+Free Content
+Official Website
+Standard JS Tutorial with React, Prettier
+
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
new file mode 100644
index 000000000000..fac87ba02951
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
@@ -0,0 +1 @@
+# Linters formatters
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/110-build-tools/readme.md b/content/roadmaps/100-frontend/content/110-build-tools/readme.md
new file mode 100644
index 000000000000..d4ce60793891
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/110-build-tools/readme.md
@@ -0,0 +1 @@
+# Build tools
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md
new file mode 100644
index 000000000000..673e1ed90c98
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md
@@ -0,0 +1,9 @@
+# Redux
+
+Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
+
+Free Content
+Official Website
+Official Getting Started to Redux
+Official Tutorial to Learn Redux
+Fundamentals of Redux Course from Dan Abramov
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md
new file mode 100644
index 000000000000..55e9ca1c2d5d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md
@@ -0,0 +1,8 @@
+# MobX
+
+MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
+
+Free Content
+
+MobX Official Website
+Intro to MobX Tutorial
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md
new file mode 100644
index 000000000000..9511c63f53b1
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md
@@ -0,0 +1,9 @@
+# Recoil
+
+Recoil is a new state management library built by the Facebook team that simplifies global state management.
+
+Free Content
+
+Recoil Official Website
+Official Documentation
+Learn the basics of Recoil.js
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
new file mode 100644
index 000000000000..900255043153
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
@@ -0,0 +1,11 @@
+# React
+
+React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
+
+Free Content
+React Website
+Official Getting Started
+The Beginner's Guide to React
+React JS Course for Beginners
+React Course - Beginner's Tutorial for React JavaScript Library [2022]
+Understanding React's UI Rendering Process
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
new file mode 100644
index 000000000000..1feb9e390f0b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
@@ -0,0 +1,10 @@
+# RxJS
+
+RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.
+
+Free Content
+
+RxJS Official Website
+RxJS Angular Docs
+RxJS Quick Start
+RxJS Crash Course
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
new file mode 100644
index 000000000000..d426fb030a4c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
@@ -0,0 +1,9 @@
+# NgRx
+
+NgRx is an open source library that provides reactive state management for your Angular applications
+
+Free Content
+
+Official Documentation
+Angular NgRx Redux Quick Start Tutorial
+NgRx Course
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md
new file mode 100644
index 000000000000..bff19387c736
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md
@@ -0,0 +1,6 @@
+# Angular
+
+Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
+
+Free Content
+Official - Getting started with Angular
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md
new file mode 100644
index 000000000000..88280e6cb12a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md
@@ -0,0 +1,7 @@
+# Vuex
+
+Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
+
+Free Content
+Official Documentation
+Vuex Crash Course
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
new file mode 100644
index 000000000000..b2eb37dc7854
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
@@ -0,0 +1,10 @@
+# Vue.js
+
+Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
+
+Free Content
+Vue.js Website
+Official Getting Started
+Vue.js Course for Beginners
+Vue.js Crash Course
+
diff --git a/content/roadmaps/100-frontend/content/111-pick-a-framework/readme.md b/content/roadmaps/100-frontend/content/111-pick-a-framework/readme.md
new file mode 100644
index 000000000000..4afcc16df41d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/readme.md
@@ -0,0 +1,7 @@
+# Pick a Framework
+
+Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.
+
+Free Content
+What is the difference between a framework and a library?
+ Which JS Framework is best?
diff --git a/content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md b/content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
new file mode 100644
index 000000000000..9daecf6fd1a1
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
@@ -0,0 +1,9 @@
+# Styled components
+
+Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
+
+Free Content
+
+Official Website
+Official Docs
+Styled Components Crash Course & Project
diff --git a/content/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md b/content/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md
new file mode 100644
index 000000000000..d46d4d1cdec5
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md
@@ -0,0 +1,9 @@
+# CSS Modules
+
+CSS files in which all class names and animation names are scoped locally by default.
+
+Free Content
+Project GitHub Repository
+Using CSS Modules In React App
+CSS Modules: Why are they great?
+
diff --git a/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md b/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md
new file mode 100644
index 000000000000..081d031c93e9
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md
@@ -0,0 +1,8 @@
+# Styled JSX
+
+Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
+
+Free Content
+
+Getting started
+Styled JSX in Next.js: Master Next.js
diff --git a/content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md b/content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
new file mode 100644
index 000000000000..0f846c4361ef
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
@@ -0,0 +1,8 @@
+# Emotion
+
+Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
+
+Free Content
+
+Official Website and Docs
+Styled components using emotion in React
diff --git a/content/roadmaps/100-frontend/content/112-modern-css/readme.md b/content/roadmaps/100-frontend/content/112-modern-css/readme.md
new file mode 100644
index 000000000000..3c356def3f05
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/112-modern-css/readme.md
@@ -0,0 +1 @@
+# Modern css
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/113-web-components/100-html-templates.md b/content/roadmaps/100-frontend/content/113-web-components/100-html-templates.md
new file mode 100644
index 000000000000..d7b57244b89c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/113-web-components/100-html-templates.md
@@ -0,0 +1 @@
+# Html templates
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md b/content/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md
new file mode 100644
index 000000000000..826d079b1842
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md
@@ -0,0 +1 @@
+# Custom elements
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md b/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md
new file mode 100644
index 000000000000..913240cdde30
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md
@@ -0,0 +1 @@
+# Shadow dom
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/113-web-components/readme.md b/content/roadmaps/100-frontend/content/113-web-components/readme.md
new file mode 100644
index 000000000000..7ee4157ae86e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/113-web-components/readme.md
@@ -0,0 +1 @@
+# Web components
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
new file mode 100644
index 000000000000..9d3264c118c4
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
@@ -0,0 +1,7 @@
+# Bootstrap
+
+Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+Free Content
+Bootstrap Website
+Bootstrap CSS Framework - Full Course for Beginners
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
new file mode 100644
index 000000000000..e711f9286534
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
@@ -0,0 +1,9 @@
+# Bulma
+
+Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
+
+Free Content
+Bulma Website
+Bulma CSS Tutorial
+Learn Bulma CSS
+How To Build A ? Responsive Blog Design With Bulma CSS
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md
new file mode 100644
index 000000000000..45842652e8de
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md
@@ -0,0 +1 @@
+# Css first
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
new file mode 100644
index 000000000000..ba7135d1c97c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
@@ -0,0 +1,10 @@
+# Tailwind CSS
+
+CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
+
+Free Content
+Tailwind Website
+Official Screencasts
+Should You Use Tailwind CSS?
+Tailwind CSS: An Introduction
+Tailwind CSS Crash Course
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
new file mode 100644
index 000000000000..733a5806331a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
@@ -0,0 +1,12 @@
+# Chakra UI
+
+Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
+
+Free Content
+Chakra UI Website
+Chakra UI Official Getting Started
+Build a Modern User Interface with Chakra UI
+
+Official Getting Started Video
+Chakra UI Crash Course
+Why You Should Start Using Chakra UI
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
new file mode 100644
index 000000000000..aba1b9f9669b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
@@ -0,0 +1,8 @@
+# Material UI
+
+Material-UI is an open-source framework that features React components that implement Google’s Material Design.
+
+Free Content
+Official Website
+Official Documentation
+Material UI React Tutorial
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
new file mode 100644
index 000000000000..9f3e60ef7821
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
@@ -0,0 +1,7 @@
+# Radix UI
+
+An open-source UI component library for building high-quality, accessible design systems and web apps.
+
+Free Content
+Official Website
+Official Documentation
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md
new file mode 100644
index 000000000000..c567e1651370
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md
@@ -0,0 +1 @@
+# Js first
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/114-css-frameworks/readme.md b/content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
new file mode 100644
index 000000000000..2fb17959ce39
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
@@ -0,0 +1 @@
+# Css frameworks
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md
new file mode 100644
index 000000000000..593951e3847c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md
@@ -0,0 +1,6 @@
+# Jest
+Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
+It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
+
+Free Content
+Jest Website
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
new file mode 100644
index 000000000000..49f6c4bb56d0
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
@@ -0,0 +1,6 @@
+# React Testing Library
+
+The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
+
+Free Content
+
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
new file mode 100644
index 000000000000..704ea86a7199
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
@@ -0,0 +1,8 @@
+# Cypress
+
+Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
+
+Free Resources
+Official Website
+Official Documentation
+Cypress End-to-End Testing
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md
new file mode 100644
index 000000000000..9635b994893b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md
@@ -0,0 +1,6 @@
+# Enzyme
+
+Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
+
+Free Content
+Enzyme Website
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md
new file mode 100644
index 000000000000..db2d32e194bc
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md
@@ -0,0 +1 @@
+# Other options
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md
new file mode 100644
index 000000000000..ab5cc98e49d6
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md
@@ -0,0 +1,7 @@
+# Mocha
+
+Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
+
+Free Resources
+Official Website and Docs
+Testing Node.js with Mocha
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md
new file mode 100644
index 000000000000..a16ee932f5e3
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md
@@ -0,0 +1,8 @@
+# Chai
+
+Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
+
+Free Resources
+Official Website and Docs
+Official Docs
+Intro To JavaScript Unit Testing With Mocha JS & Chai
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md
new file mode 100644
index 000000000000..f8791fcf00c4
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md
@@ -0,0 +1,8 @@
+# Ava
+
+Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and runs concurrent tests, thereby vastly decreasing your test times.
+
+Free Resources
+Official Repository
+Testing your Node.js applications with Ava.js
+AVA Tutorial
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md
new file mode 100644
index 000000000000..7dd26a1c08da
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md
@@ -0,0 +1,9 @@
+# Jasmine
+
+Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code.
+
+Free Resources
+Official Website
+Official Docs
+Official Repository
+Javascript Unit Testing with Jasmine
diff --git a/content/roadmaps/100-frontend/content/115-testing-your-apps/readme.md b/content/roadmaps/100-frontend/content/115-testing-your-apps/readme.md
new file mode 100644
index 000000000000..24c02738404a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/readme.md
@@ -0,0 +1,7 @@
+# Testing your apps
+Before delivering your application to users, you need to be sure that your app meets the requirements it was designed for, and that it doesn't do any weird, unintended things (called 'bugs'). To accomplish this, we 'test' our applications in different ways.
+
+Free Content
+A comprehensive dive into software testing.
+The different types of software tests
+Testing React apps with Jest
diff --git a/content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md b/content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
new file mode 100644
index 000000000000..d84078de20c7
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
@@ -0,0 +1,10 @@
+# TypeScript
+
+TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
+
+Free Resources
+Official Website
+Official Docs for Deep Dives
+The TypeScript Handbook
+TypeScript Tutorial
+TypeScript for Beginners
diff --git a/content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md b/content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
new file mode 100644
index 000000000000..f1dc2d67b514
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
@@ -0,0 +1,8 @@
+# Flow
+
+Flow is a static type checker, designed to find type errors in JavaScript programs.
+
+Free Resources
+Official Website
+Official Documentation
+Flow for Beginners
diff --git a/content/roadmaps/100-frontend/content/116-type-checkers/readme.md b/content/roadmaps/100-frontend/content/116-type-checkers/readme.md
new file mode 100644
index 000000000000..5b654ff102d1
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/116-type-checkers/readme.md
@@ -0,0 +1 @@
+# Type checkers
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md
new file mode 100644
index 000000000000..db412acd9a17
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md
@@ -0,0 +1 @@
+# Apis
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md
new file mode 100644
index 000000000000..55cb80a3ac6d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md
@@ -0,0 +1 @@
+# Performance
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md
new file mode 100644
index 000000000000..765c0cf4f94e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md
@@ -0,0 +1,8 @@
+# Progressive Web Apps
+
+Progressive Web Apps (PWAs) are websites that are progressively enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers.
+
+Free Content
+Progressive Web Apps for Beginners
+Learn PWA
+Build a Progressive Web App
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md
new file mode 100644
index 000000000000..8022bce3b40f
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md
@@ -0,0 +1,12 @@
+# Next.js
+
+Next.js is an open-source development framework built on top of Node.js
+enabling React based web applications functionalities such as server-side
+rendering and generating static websites.
+
+Free Resources
+Official Website
+Official Docs for Getting Started
+Mastering Next.js
+Next.js for Beginners - freeCodeCamp
+The Next.js Handbook — freeCodeCamp
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md
new file mode 100644
index 000000000000..6367e636235f
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md
@@ -0,0 +1 @@
+# After js
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md
new file mode 100644
index 000000000000..350f33f88228
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md
@@ -0,0 +1 @@
+# React js
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md
new file mode 100644
index 000000000000..10a734e5b601
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md
@@ -0,0 +1 @@
+# Universal
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md
new file mode 100644
index 000000000000..42970c422529
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md
@@ -0,0 +1 @@
+# Angular
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md
new file mode 100644
index 000000000000..98d9a55e5a16
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md
@@ -0,0 +1,10 @@
+# Nuxt.js
+
+Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
+
+Free Content
+Nuxt Website
+Nuxt Docs
+Get Started with Nuxt
+Nuxt.js Fundamentals
+Nuxt Tutorials
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md
new file mode 100644
index 000000000000..285f88f27f6f
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md
@@ -0,0 +1 @@
+# Vue js
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md b/content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md
new file mode 100644
index 000000000000..a2c1486ab57d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md
@@ -0,0 +1 @@
+# Server side rendering
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/119-graphql/100-apollo.md b/content/roadmaps/100-frontend/content/119-graphql/100-apollo.md
new file mode 100644
index 000000000000..7d1fa06ba82e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/119-graphql/100-apollo.md
@@ -0,0 +1,9 @@
+# Apollo
+
+Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
+
+Free Content
+Apollo Website
+Official Docs
+Official YouTube Channel
+GraphQL With React Tutorial - Apollo Client
diff --git a/content/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md b/content/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md
new file mode 100644
index 000000000000..55722ec2e0d0
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md
@@ -0,0 +1,7 @@
+# Relay Modern
+
+Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
+
+Free Content
+Official Website
+Introduction to Relay modern
diff --git a/content/roadmaps/100-frontend/content/119-graphql/readme.md b/content/roadmaps/100-frontend/content/119-graphql/readme.md
new file mode 100644
index 000000000000..83ffa621d17c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/119-graphql/readme.md
@@ -0,0 +1,9 @@
+# Graphql
+
+GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
+
+Free Content
+Introduction to GraphQL
+The Fullstack Tutorial for GraphQL
+GraphQL Tutorials
+GraphQL Course for Beginners
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md b/content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md
new file mode 100644
index 000000000000..776a225f2248
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md
@@ -0,0 +1,12 @@
+# Next.js
+
+Next.js is an open-source development framework built on top of Node.js
+enabling React based web applications functionalities such as server-side
+rendering and generating static websites.
+
+Free Resources
+Official Website
+Official Docs for Getting Started
+Mastering Next.js
+Next.js for Beginners - Full Course at freeCodeCamp YouTube Channel
+The Next.js Handbook — FreeCodeCamp
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md b/content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md
new file mode 100644
index 000000000000..229c9a6ed977
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md
@@ -0,0 +1,8 @@
+# Gatsby
+
+Gatsby is a React-based open source framework with performance, scalability and security built-in.
+
+Free Resources
+Gatsby Website
+Gatsby Docs
+Gatsby Tutorial
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md b/content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md
new file mode 100644
index 000000000000..1d96a28adb90
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md
@@ -0,0 +1,11 @@
+# Nuxt js
+
+Nuxt.js is an open-source development framework built on top of Node.js
+enabling Vue based web applications functionalities such as server-side
+rendering and generating static websites.
+
+Free Resources
+Official Website
+Official Docs for Getting Started
+Mastering Nuxt.js
+Vue.js for Beginners - Full Course at freeCodeCamp YouTube Channel
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md b/content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md
new file mode 100644
index 000000000000..1747915aa994
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md
@@ -0,0 +1,8 @@
+# Vuepress
+
+VuePress is composed of two parts: a minimalistic static site generator (opens new window)with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects.
+
+Free Resources
+Official Website
+Official Docs for Getting Started
+Introduction to VuePress
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md b/content/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md
new file mode 100644
index 000000000000..2bc96f811eec
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md
@@ -0,0 +1,7 @@
+# Jekyll
+
+Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
+
+Free Content
+Jekyll Website
+Jekyll Docs
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md b/content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md
new file mode 100644
index 000000000000..4b7b82169c5a
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md
@@ -0,0 +1,8 @@
+# Hugo
+
+Hugo is the world’s fastest static website engine. It’s written in Go (aka Golang) and developed by bep, spf13 and friends.
+
+Free Resources
+Official Website
+Official Docs for Getting Started
+Introduction to Hugo - Static Site Generator
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md b/content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md
new file mode 100644
index 000000000000..210a1a9f56d6
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md
@@ -0,0 +1,7 @@
+# Gridsome
+
+Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default.
+
+Free Content
+Gridsome Website
+Gridsome Documentation
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md b/content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md
new file mode 100644
index 000000000000..fff7df488f3c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md
@@ -0,0 +1,9 @@
+# Eleventy
+
+Eleventy (11ty) is a simple to use, easy to customize, highly performant and powerful static site generator with a helpful set of plugins (e.g. navigation, build-time image transformations, cache assets). Pages can be built and written with a variety of template languages (HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug or JS template literals). But it also offers the possibility to dynamically create pages from local data or external sources that are compiled at build time. It has zero client-side JavaScript dependencies.
+
+Free Content
+Official Website
+Introduction to Eleventy
+A collection of 11ty starters, projects, plugins, and resources
+
diff --git a/content/roadmaps/100-frontend/content/120-static-site-generators/readme.md b/content/roadmaps/100-frontend/content/120-static-site-generators/readme.md
new file mode 100644
index 000000000000..1e5a6dc0284f
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/readme.md
@@ -0,0 +1,10 @@
+# Static Site Generators
+
+A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
+
+Free Content
+What is a static site generator?
+Next.js SSG
+Gatsby SSG
+SSG — An 11ty, Vite And JAM Sandwich
+
diff --git a/content/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md b/content/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md
new file mode 100644
index 000000000000..63ed95d780da
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md
@@ -0,0 +1,8 @@
+# React Native
+
+React Native is a popular JavaScript-based mobile app framework that allows you to build natively-rendered mobile apps for iOS and Android. The framework lets you create an application for various platforms by using the same codebase.
+
+Free Content
+Official Website
+Official Getting Started to React Native
+Tutorial to Learn React Native
diff --git a/content/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md b/content/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md
new file mode 100644
index 000000000000..991116f1264c
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md
@@ -0,0 +1,8 @@
+# NativeScript
+
+NativeScript is an open source framework for creating native iOS and Android apps in Angular, TypeScript, or JavaScript.
+
+Free Content
+Official Website
+Official Getting Started to NativeScript
+NativeScript Tutorial for Beginners
diff --git a/content/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md b/content/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md
new file mode 100644
index 000000000000..9813b35b2313
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md
@@ -0,0 +1,20 @@
+# Flutter
+
+Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
+
+Flutter consists of two important parts:
+
+- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
+- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.
+To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.
+
+Dart focuses on front-end development, and you can use it to create mobile and web applications.
+
+If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript.
+
+Free Content
+Flutter Website
+Flutter Tutorial
+Flutter Tutorial for Beginners
+Flutter Tutorial
+Learn Dart Programming
diff --git a/content/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md b/content/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md
new file mode 100644
index 000000000000..8c58a658c96d
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md
@@ -0,0 +1,8 @@
+# Ionic
+
+Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript.
+
+Free Content
+Official Website
+Official Getting Started to Ionic framework
+Ionic Framework 4 - Full Tutorial
diff --git a/content/roadmaps/100-frontend/content/121-mobile-applications/readme.md b/content/roadmaps/100-frontend/content/121-mobile-applications/readme.md
new file mode 100644
index 000000000000..dcc7dcb8cafb
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/121-mobile-applications/readme.md
@@ -0,0 +1 @@
+# Mobile applications
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md b/content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md
new file mode 100644
index 000000000000..a4c178f5eeee
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md
@@ -0,0 +1,7 @@
+# Electron
+
+Electron allows you to build cross-platform desktop applications with HTML, CSS, and Javascript/Typescript. It uses Chromium and Node.js, so essentially it is a "Browser" like application that is compatbile with Mac, Windows, and Linux.
+
+Free Content
+Electron Website
+Electron Docs
diff --git a/content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md b/content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md
new file mode 100644
index 000000000000..a722d66a374b
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md
@@ -0,0 +1,7 @@
+# Carlo
+
+Carlo is a headful Node app framework for building desktop applications.
+
+Free Content
+Github Repository
+Carlo development on a web server
diff --git a/content/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md b/content/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md
new file mode 100644
index 000000000000..03b94393bb69
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md
@@ -0,0 +1,7 @@
+# Proton native
+
+Proton Native allows you to create desktop applications through a React syntax, on all platforms.
+
+Free Content
+Official Website and Docs
+Getting Started With Proton Native
diff --git a/content/roadmaps/100-frontend/content/122-desktop-applications/readme.md b/content/roadmaps/100-frontend/content/122-desktop-applications/readme.md
new file mode 100644
index 000000000000..63838e5cf4ef
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/readme.md
@@ -0,0 +1 @@
+# Desktop applications
\ No newline at end of file
diff --git a/content/roadmaps/100-frontend/content/123-web-assembly.md b/content/roadmaps/100-frontend/content/123-web-assembly.md
new file mode 100644
index 000000000000..fe5d5c36735f
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/123-web-assembly.md
@@ -0,0 +1,8 @@
+# Web Assembly
+
+WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
+
+Free Content
+Official Website
+Official Getting Started to Web Assembly
+An introduction to WebAssembly
diff --git a/content/roadmaps/100-frontend/content/readme.md b/content/roadmaps/100-frontend/content/readme.md
new file mode 100644
index 000000000000..4e768b56d84e
--- /dev/null
+++ b/content/roadmaps/100-frontend/content/readme.md
@@ -0,0 +1 @@
+#
\ No newline at end of file
diff --git a/content/roadmaps/1-frontend/meta.json b/content/roadmaps/100-frontend/meta.json
similarity index 70%
rename from content/roadmaps/1-frontend/meta.json
rename to content/roadmaps/100-frontend/meta.json
index 08a0470abc85..84ea4ed9b754 100644
--- a/content/roadmaps/1-frontend/meta.json
+++ b/content/roadmaps/100-frontend/meta.json
@@ -1,8 +1,11 @@
{
"seo": {
- "title": "Learn to become a modern frontend developer",
- "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "title": "Frontend Developer Roadmap: Learn to become a modern frontend developer",
+ "description": "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.",
"keywords": [
+ "javascript roadmap 2022",
+ "frontend roadmap 2022",
+ "frontend developer roadmap 2022",
"guide to becoming a developer",
"guide to becoming a frontend developer",
"frontend developer",
@@ -12,6 +15,7 @@
"javascript developer",
"frontend development skills",
"frontend development skills test",
+ "frontend roadmap",
"frontend engineer roadmap",
"frontend developer roadmap",
"become a frontend developer",
@@ -27,15 +31,17 @@
]
},
"title": "Frontend Developer",
- "description": "Step by step guide to becoming a modern frontend developer in 2021",
+ "description": "Step by step guide to becoming a modern frontend developer in 2022",
"featuredTitle": "Frontend",
- "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
+ "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"featured": true,
- "imagePath": "/roadmaps/frontend.png",
+ "imageUrl": "/roadmaps/frontend.png",
+ "jsonUrl": "/project/frontend.json",
"resourcesPath": "./resources.md",
- "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap"
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
+ "contentPathsFilePath": "./content-paths.json"
}
diff --git a/content/roadmaps/100-frontend/resources.md b/content/roadmaps/100-frontend/resources.md
new file mode 100644
index 000000000000..12d9198c15ce
--- /dev/null
+++ b/content/roadmaps/100-frontend/resources.md
@@ -0,0 +1,3 @@
+
+
+The resources have been moved to the [interactive frontend roadmap](/frontend) — try clicking any nodes!
diff --git a/content/roadmaps/101-backend/content-paths.json b/content/roadmaps/101-backend/content-paths.json
new file mode 100644
index 000000000000..7de329b8cd06
--- /dev/null
+++ b/content/roadmaps/101-backend/content-paths.json
@@ -0,0 +1,138 @@
+{
+ "home": "/roadmaps/101-backend/content/readme.md",
+ "internet": "/roadmaps/101-backend/content/100-internet/readme.md",
+ "internet:how-does-the-internet-work": "/roadmaps/101-backend/content/100-internet/100-how-does-the-internet-work.md",
+ "internet:what-is-http": "/roadmaps/101-backend/content/100-internet/101-what-is-http.md",
+ "internet:browsers-and-how-they-work": "/roadmaps/101-backend/content/100-internet/102-browsers-and-how-they-work.md",
+ "internet:dns-and-how-it-works": "/roadmaps/101-backend/content/100-internet/103-dns-and-how-it-works.md",
+ "internet:what-is-domain-name": "/roadmaps/101-backend/content/100-internet/104-what-is-domain-name.md",
+ "internet:what-is-hosting": "/roadmaps/101-backend/content/100-internet/105-what-is-hosting.md",
+ "basic-frontend": "/roadmaps/101-backend/content/101-basic-frontend/readme.md",
+ "basic-frontend:html": "/roadmaps/101-backend/content/101-basic-frontend/100-html.md",
+ "basic-frontend:css": "/roadmaps/101-backend/content/101-basic-frontend/101-css.md",
+ "basic-frontend:javascript": "/roadmaps/101-backend/content/101-basic-frontend/102-javascript.md",
+ "os-general-knowledge": "/roadmaps/101-backend/content/102-os-general-knowledge/readme.md",
+ "os-general-knowledge:terminal-usage": "/roadmaps/101-backend/content/102-os-general-knowledge/100-terminal-usage.md",
+ "os-general-knowledge:how-oss-work-in-general": "/roadmaps/101-backend/content/102-os-general-knowledge/101-how-oss-work-in-general.md",
+ "os-general-knowledge:process-management": "/roadmaps/101-backend/content/102-os-general-knowledge/102-process-management.md",
+ "os-general-knowledge:threads-and-concurrency": "/roadmaps/101-backend/content/102-os-general-knowledge/103-threads-and-concurrency.md",
+ "os-general-knowledge:basic-terminal-commands": "/roadmaps/101-backend/content/102-os-general-knowledge/104-basic-terminal-commands.md",
+ "os-general-knowledge:memory-management": "/roadmaps/101-backend/content/102-os-general-knowledge/105-memory-management.md",
+ "os-general-knowledge:interprocess-communication": "/roadmaps/101-backend/content/102-os-general-knowledge/106-interprocess-communication.md",
+ "os-general-knowledge:io-management": "/roadmaps/101-backend/content/102-os-general-knowledge/107-io-management.md",
+ "os-general-knowledge:posix-basics": "/roadmaps/101-backend/content/102-os-general-knowledge/108-posix-basics.md",
+ "os-general-knowledge:basic-networking-concepts": "/roadmaps/101-backend/content/102-os-general-knowledge/109-basic-networking-concepts.md",
+ "learn-a-language": "/roadmaps/101-backend/content/103-learn-a-language/readme.md",
+ "learn-a-language:go": "/roadmaps/101-backend/content/103-learn-a-language/100-go.md",
+ "learn-a-language:rust": "/roadmaps/101-backend/content/103-learn-a-language/101-rust.md",
+ "learn-a-language:java": "/roadmaps/101-backend/content/103-learn-a-language/102-java.md",
+ "learn-a-language:csharp": "/roadmaps/101-backend/content/103-learn-a-language/103-csharp.md",
+ "learn-a-language:php": "/roadmaps/101-backend/content/103-learn-a-language/103-php.md",
+ "learn-a-language:javascript": "/roadmaps/101-backend/content/103-learn-a-language/105-javascript.md",
+ "learn-a-language:python": "/roadmaps/101-backend/content/103-learn-a-language/106-python.md",
+ "learn-a-language:ruby": "/roadmaps/101-backend/content/103-learn-a-language/107-ruby.md",
+ "version-control-systems": "/roadmaps/101-backend/content/104-version-control-systems/readme.md",
+ "version-control-systems:git": "/roadmaps/101-backend/content/104-version-control-systems/100-basic-usage-of-git.md",
+ "repo-hosting-services": "/roadmaps/101-backend/content/105-repo-hosting-services/readme.md",
+ "repo-hosting-services:github": "/roadmaps/101-backend/content/105-repo-hosting-services/100-github.md",
+ "repo-hosting-services:gitlab": "/roadmaps/101-backend/content/105-repo-hosting-services/101-gitlab.md",
+ "repo-hosting-services:bitbucket": "/roadmaps/101-backend/content/105-repo-hosting-services/102-bitbucket.md",
+ "relational-databases": "/roadmaps/101-backend/content/106-relational-databases/readme.md",
+ "relational-databases:postgresql": "/roadmaps/101-backend/content/106-relational-databases/100-postgresql.md",
+ "relational-databases:mysql": "/roadmaps/101-backend/content/106-relational-databases/101-mysql.md",
+ "relational-databases:mariadb": "/roadmaps/101-backend/content/106-relational-databases/102-mariadb.md",
+ "relational-databases:mssql": "/roadmaps/101-backend/content/106-relational-databases/103-mssql.md",
+ "relational-databases:oracle": "/roadmaps/101-backend/content/106-relational-databases/104-oracle.md",
+ "nosql-databases": "/roadmaps/101-backend/content/107-nosql-databases/readme.md",
+ "nosql-databases:document-databases": "/roadmaps/101-backend/content/107-nosql-databases/100-document-databases.md",
+ "nosql-databases:column-databases": "/roadmaps/101-backend/content/107-nosql-databases/101-column-databases.md",
+ "nosql-databases:timeseries-databases": "/roadmaps/101-backend/content/107-nosql-databases/102-timeseries-databases.md",
+ "nosql-databases:realtime-databases": "/roadmaps/101-backend/content/107-nosql-databases/103-realtime-databases.md",
+ "more-about-databases": "/roadmaps/101-backend/content/108-more-about-databases/readme.md",
+ "more-about-databases:orms": "/roadmaps/101-backend/content/108-more-about-databases/100-orms.md",
+ "more-about-databases:acid": "/roadmaps/101-backend/content/108-more-about-databases/101-acid.md",
+ "more-about-databases:transactions": "/roadmaps/101-backend/content/108-more-about-databases/102-transactions.md",
+ "more-about-databases:n-plus-one-problem": "/roadmaps/101-backend/content/108-more-about-databases/103-n-plus-one-problem.md",
+ "more-about-databases:database-normalization": "/roadmaps/101-backend/content/108-more-about-databases/104-database-normalization.md",
+ "more-about-databases:database-indexes": "/roadmaps/101-backend/content/108-more-about-databases/105-database-indexes.md",
+ "more-about-databases:data-replication": "/roadmaps/101-backend/content/108-more-about-databases/106-data-replication.md",
+ "more-about-databases:sharding-strategies": "/roadmaps/101-backend/content/108-more-about-databases/107-sharding-strategies.md",
+ "more-about-databases:cap-theorem": "/roadmaps/101-backend/content/108-more-about-databases/108-cap-theorem.md",
+ "apis": "/roadmaps/101-backend/content/109-apis/readme.md",
+ "apis:rest": "/roadmaps/101-backend/content/109-apis/100-rest.md",
+ "apis:json-apis": "/roadmaps/101-backend/content/109-apis/101-json-apis.md",
+ "apis:soap": "/roadmaps/101-backend/content/109-apis/102-soap.md",
+ "apis:grpc": "/roadmaps/101-backend/content/109-apis/103-grpc.md",
+ "apis:hateoas": "/roadmaps/101-backend/content/109-apis/104-hateoas.md",
+ "apis:open-api-spec": "/roadmaps/101-backend/content/109-apis/105-open-api-spec.md",
+ "apis:authentication": "/roadmaps/101-backend/content/109-apis/106-authentication/readme.md",
+ "apis:authentication:cookie-based": "/roadmaps/101-backend/content/109-apis/106-authentication/100-cookie-based.md",
+ "apis:authentication:oauth": "/roadmaps/101-backend/content/109-apis/106-authentication/101-oauth.md",
+ "apis:authentication:basic-authentication": "/roadmaps/101-backend/content/109-apis/106-authentication/102-basic-authentication.md",
+ "apis:authentication:token-authentication": "/roadmaps/101-backend/content/109-apis/106-authentication/103-token-authentication.md",
+ "apis:authentication:jwt": "/roadmaps/101-backend/content/109-apis/106-authentication/104-jwt.md",
+ "apis:authentication:openid": "/roadmaps/101-backend/content/109-apis/106-authentication/105-openid.md",
+ "apis:authentication:saml": "/roadmaps/101-backend/content/109-apis/106-authentication/105-saml.md",
+ "caching": "/roadmaps/101-backend/content/110-caching/readme.md",
+ "caching:cdn": "/roadmaps/101-backend/content/110-caching/100-cdn.md",
+ "caching:server-side": "/roadmaps/101-backend/content/110-caching/101-server-side/readme.md",
+ "caching:server-side:redis": "/roadmaps/101-backend/content/110-caching/101-server-side/100-redis.md",
+ "caching:server-side:memcached": "/roadmaps/101-backend/content/110-caching/101-server-side/101-memcached.md",
+ "caching:client-side": "/roadmaps/101-backend/content/110-caching/102-client-side.md",
+ "web-security-knowledge": "/roadmaps/101-backend/content/111-web-security-knowledge/readme.md",
+ "web-security-knowledge:md5": "/roadmaps/101-backend/content/111-web-security-knowledge/100-md5.md",
+ "web-security-knowledge:sha-family": "/roadmaps/101-backend/content/111-web-security-knowledge/101-sha-family.md",
+ "web-security-knowledge:bcrypt": "/roadmaps/101-backend/content/111-web-security-knowledge/102-bcrypt.md",
+ "web-security-knowledge:scrypt": "/roadmaps/101-backend/content/111-web-security-knowledge/104-scrypt.md",
+ "web-security-knowledge:https": "/roadmaps/101-backend/content/111-web-security-knowledge/105-https.md",
+ "web-security-knowledge:content-security-policy": "/roadmaps/101-backend/content/111-web-security-knowledge/105-content-security-policy.md",
+ "web-security-knowledge:cors": "/roadmaps/101-backend/content/111-web-security-knowledge/106-cors.md",
+ "web-security-knowledge:ssl-tls": "/roadmaps/101-backend/content/111-web-security-knowledge/107-ssl-tls.md",
+ "web-security-knowledge:owasp": "/roadmaps/101-backend/content/111-web-security-knowledge/108-owasp.md",
+ "testing": "/roadmaps/101-backend/content/112-testing/readme.md",
+ "testing:integration-testing": "/roadmaps/101-backend/content/112-testing/100-integration-testing.md",
+ "testing:unit-testing": "/roadmaps/101-backend/content/112-testing/101-unit-testing.md",
+ "testing:functional-testing": "/roadmaps/101-backend/content/112-testing/102-functional-testing.md",
+ "ci-cd": "/roadmaps/101-backend/content/113-ci-cd.md",
+ "design-and-development-principles": "/roadmaps/101-backend/content/114-design-and-development-principles/readme.md",
+ "design-and-development-principles:gof-design-patterns": "/roadmaps/101-backend/content/114-design-and-development-principles/100-gof-design-patterns.md",
+ "design-and-development-principles:domain-driven-design": "/roadmaps/101-backend/content/114-design-and-development-principles/101-domain-driven-design.md",
+ "design-and-development-principles:test-driven-development": "/roadmaps/101-backend/content/114-design-and-development-principles/102-test-driven-development.md",
+ "design-and-development-principles:solid": "/roadmaps/101-backend/content/114-design-and-development-principles/103-solid.md",
+ "design-and-development-principles:kiss": "/roadmaps/101-backend/content/114-design-and-development-principles/104-kiss.md",
+ "design-and-development-principles:yagni": "/roadmaps/101-backend/content/114-design-and-development-principles/105-yagni.md",
+ "design-and-development-principles:dry": "/roadmaps/101-backend/content/114-design-and-development-principles/106-dry.md",
+ "architectural-patterns": "/roadmaps/101-backend/content/115-architectural-patterns/readme.md",
+ "architectural-patterns:monolithic-apps": "/roadmaps/101-backend/content/115-architectural-patterns/100-monolithic-apps.md",
+ "architectural-patterns:microservices": "/roadmaps/101-backend/content/115-architectural-patterns/101-microservices.md",
+ "architectural-patterns:soa": "/roadmaps/101-backend/content/115-architectural-patterns/102-soa.md",
+ "architectural-patterns:cqrs": "/roadmaps/101-backend/content/115-architectural-patterns/103-cqrs.md",
+ "architectural-patterns:serverless": "/roadmaps/101-backend/content/115-architectural-patterns/104-serverless.md",
+ "search-engines": "/roadmaps/101-backend/content/116-search-engines/readme.md",
+ "search-engines:elasticsearch": "/roadmaps/101-backend/content/116-search-engines/100-elasticsearch.md",
+ "search-engines:solr": "/roadmaps/101-backend/content/116-search-engines/101-solr.md",
+ "message-brokers": "/roadmaps/101-backend/content/117-message-brokers/readme.md",
+ "message-brokers:rabbitmq": "/roadmaps/101-backend/content/117-message-brokers/100-rabbitmq.md",
+ "message-brokers:kafka": "/roadmaps/101-backend/content/117-message-brokers/101-kafka.md",
+ "containerization": "/roadmaps/101-backend/content/118-containerization/readme.md",
+ "containerization:docker": "/roadmaps/101-backend/content/118-containerization/100-docker.md",
+ "containerization:rkt": "/roadmaps/101-backend/content/118-containerization/101-rkt.md",
+ "containerization:lxc": "/roadmaps/101-backend/content/118-containerization/102-lxc.md",
+ "graphql": "/roadmaps/101-backend/content/119-graphql/readme.md",
+ "graphql:apollo": "/roadmaps/101-backend/content/119-graphql/100-apollo.md",
+ "graphql:relay-modern": "/roadmaps/101-backend/content/119-graphql/101-relay-modern.md",
+ "graph-databases": "/roadmaps/101-backend/content/120-graph-databases/readme.md",
+ "graph-databases:neo4j": "/roadmaps/101-backend/content/120-graph-databases/100-neo4j.md",
+ "web-sockets": "/roadmaps/101-backend/content/121-web-sockets.md",
+ "web-servers": "/roadmaps/101-backend/content/122-web-servers/readme.md",
+ "web-servers:nginx": "/roadmaps/101-backend/content/122-web-servers/100-nginx.md",
+ "web-servers:apache": "/roadmaps/101-backend/content/122-web-servers/101-apache.md",
+ "web-servers:caddy": "/roadmaps/101-backend/content/122-web-servers/102-caddy.md",
+ "web-servers:ms-iis": "/roadmaps/101-backend/content/122-web-servers/103-ms-iis.md",
+ "scalability": "/roadmaps/101-backend/content/123-scalability/readme.md",
+ "scalability:mitigation-strategies": "/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies.md",
+ "scalability:instrumentation-monitoring-telemetry": "/roadmaps/101-backend/content/123-scalability/101-instrumentation-monitoring-telemetry.md",
+ "scalability:migration-strategies": "/roadmaps/101-backend/content/123-scalability/102-migration-strategies.md",
+ "scalability:horizontal-vertial-scaling": "/roadmaps/101-backend/content/123-scalability/103-horizontal-vertial-scaling.md",
+ "scalability:observability": "/roadmaps/101-backend/content/123-scalability/104-observability.md"
+}
diff --git a/content/roadmaps/101-backend/content/100-internet/100-how-does-the-internet-work.md b/content/roadmaps/101-backend/content/100-internet/100-how-does-the-internet-work.md
new file mode 100644
index 000000000000..ef14a4d6edd4
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/100-how-does-the-internet-work.md
@@ -0,0 +1,10 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+Free Content
+The Internet Explained
+How Does the Internet Work?
+Introduction to Internet
+How does the Internet work?
+How the Internet Works in 5 Minutes
diff --git a/content/roadmaps/101-backend/content/100-internet/101-what-is-http.md b/content/roadmaps/101-backend/content/100-internet/101-what-is-http.md
new file mode 100644
index 000000000000..3c4229aca4d3
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/101-what-is-http.md
@@ -0,0 +1,10 @@
+# What is HTTP?
+
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
+
+Free Content
+What is HTTP?
+An overview of HTTP
+Journey to HTTP/2
+HTTP/3 From A To Z: Core Concepts
+HTTP Crash Course & Exploration
diff --git a/content/roadmaps/101-backend/content/100-internet/102-browsers-and-how-they-work.md b/content/roadmaps/101-backend/content/100-internet/102-browsers-and-how-they-work.md
new file mode 100644
index 000000000000..2202067c8a67
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/102-browsers-and-how-they-work.md
@@ -0,0 +1,8 @@
+# Browsers
+
+A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.
+
+Free Content
+How Browsers Work
+Role of Rendering Engine in Browsers
+Populating the Page: How Browsers Work
diff --git a/content/roadmaps/101-backend/content/100-internet/103-dns-and-how-it-works.md b/content/roadmaps/101-backend/content/100-internet/103-dns-and-how-it-works.md
new file mode 100644
index 000000000000..abcad0eb7792
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/103-dns-and-how-it-works.md
@@ -0,0 +1,7 @@
+# DNS
+The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+Free Content
+What is DNS?
+DNS and How does it Work?
+DNS Records
diff --git a/content/roadmaps/101-backend/content/100-internet/104-what-is-domain-name.md b/content/roadmaps/101-backend/content/100-internet/104-what-is-domain-name.md
new file mode 100644
index 000000000000..1fb0a759ee34
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/104-what-is-domain-name.md
@@ -0,0 +1,8 @@
+# Domain Name
+
+A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
+
+Free Content
+What is a Domain Name?
+What is a Domain Name? | Domain name vs. URL
+A Beginners Guide to How Domain Names Work
diff --git a/content/roadmaps/101-backend/content/100-internet/105-what-is-hosting.md b/content/roadmaps/101-backend/content/100-internet/105-what-is-hosting.md
new file mode 100644
index 000000000000..7ab9b4f76f5b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/105-what-is-hosting.md
@@ -0,0 +1,8 @@
+# Hosting
+
+Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
+
+Free Content
+What Is Web Hosting? Explained
+Different Types of Web Hosting Explained
+Where to Host a Fullstack Project on a Budget
diff --git a/content/roadmaps/101-backend/content/100-internet/readme.md b/content/roadmaps/101-backend/content/100-internet/readme.md
new file mode 100644
index 000000000000..ef14a4d6edd4
--- /dev/null
+++ b/content/roadmaps/101-backend/content/100-internet/readme.md
@@ -0,0 +1,10 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+Free Content
+The Internet Explained
+How Does the Internet Work?
+Introduction to Internet
+How does the Internet work?
+How the Internet Works in 5 Minutes
diff --git a/content/roadmaps/101-backend/content/101-basic-frontend/100-html.md b/content/roadmaps/101-backend/content/101-basic-frontend/100-html.md
new file mode 100644
index 000000000000..e4861113db81
--- /dev/null
+++ b/content/roadmaps/101-backend/content/101-basic-frontend/100-html.md
@@ -0,0 +1,10 @@
+# HTML
+
+HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+Free Content
+W3Schools: Learn HTML
+HTML Full Course - Build a Website Tutorial
+HTML Tutorial for Beginners: HTML Crash Course
+Codecademy - Learn HTML
+Interactive HTML Course
diff --git a/content/roadmaps/101-backend/content/101-basic-frontend/101-css.md b/content/roadmaps/101-backend/content/101-basic-frontend/101-css.md
new file mode 100644
index 000000000000..062019ea9921
--- /dev/null
+++ b/content/roadmaps/101-backend/content/101-basic-frontend/101-css.md
@@ -0,0 +1,14 @@
+# CSS
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+Free Content
+W3Schools — Learn CSS
+freeCodeCamp — Responsive Web Design
+Learn to Code HTML & CSS
+CSS Crash Course For Absolute Beginners
+HTML and CSS Tutorial
+CSS Masterclass - Tutorial & Course for Beginners
+What The Flexbox!
+Learn CSS | Codecademy
+Learn Intermediate CSS | Codecademy
diff --git a/content/roadmaps/101-backend/content/101-basic-frontend/102-javascript.md b/content/roadmaps/101-backend/content/101-basic-frontend/102-javascript.md
new file mode 100644
index 000000000000..f8708aa4134e
--- /dev/null
+++ b/content/roadmaps/101-backend/content/101-basic-frontend/102-javascript.md
@@ -0,0 +1,9 @@
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+Free Content
+W3Schools – JavaScript Tutorial
+The Modern JavaScript Tutorial
+JavaScript Crash Course for Beginners
+Build a Netflix Landing Page Clone with HTML, CSS & JS
diff --git a/content/roadmaps/101-backend/content/101-basic-frontend/readme.md b/content/roadmaps/101-backend/content/101-basic-frontend/readme.md
new file mode 100644
index 000000000000..73ef4141f087
--- /dev/null
+++ b/content/roadmaps/101-backend/content/101-basic-frontend/readme.md
@@ -0,0 +1,8 @@
+# Basic Frontend Knowledge
+
+As a backend developer, you may not need to have proficient knowledge of the frontend stack but you should at least have some basic understanding of HTML, CSS and JavaScript.
+
+Free Content
+W3Schools: Learn HTML
+W3Schools: Learn CSS
+W3Schools: JavaScript Tutorial
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/100-terminal-usage.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/100-terminal-usage.md
new file mode 100644
index 000000000000..91c19ea122f0
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/100-terminal-usage.md
@@ -0,0 +1,6 @@
+# Terminal usage
+
+Terminals, also known as command lines or consoles, allow us to accomplish and automate tasks on a computer without the use of a graphical user interface.
+
+Command line crash course
+Basic Terminal Usage - Cheat Sheet to make the command line EASY
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/101-how-oss-work-in-general.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/101-how-oss-work-in-general.md
new file mode 100644
index 000000000000..192caaaa8e82
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/101-how-oss-work-in-general.md
@@ -0,0 +1 @@
+# Operating Systems
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/102-process-management.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/102-process-management.md
new file mode 100644
index 000000000000..40833c1d9117
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/102-process-management.md
@@ -0,0 +1,7 @@
+# Process Management
+
+Process management involves various tasks like creation, scheduling, termination of processes, and a deadlock. Process is a program that is under execution, which is an important part of modern-day operating systems. The OS must allocate resources that enable processes to share and exchange information. It also protects the resources of each process from other methods and allows synchronization among processes.
+
+Free Content
+Operating System: Process and Process Management
+Process Management in OS: PCB in Operating System
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/103-threads-and-concurrency.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/103-threads-and-concurrency.md
new file mode 100644
index 000000000000..f38f1e5bc0c6
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/103-threads-and-concurrency.md
@@ -0,0 +1,12 @@
+# Threads and Concurrency
+
+A thread is the smallest unit of processing that can be performed in an OS. In most modern operating systems, a thread exists within a process - that is, a single process may contain multiple threads.
+
+Concurrency refers to the execution of multiple threads at the same time. It occurs in an operating system when multiple process threads are executing concurrently. These threads can interact with one another via shared memory or message passing. Concurrency results in resource sharing, which causes issues like deadlocks and resource scarcity. It aids with techniques such as process coordination, memory allocation, and execution schedule to maximize throughput.
+
+Free Content
+What’s the Diff: Programs, Processes and Threads
+Concurrency in Operating System
+Intro to Processes & Threads
+Introduction to Concurrency
+Concurrency, Threading and Parallelism Explained
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/104-basic-terminal-commands.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/104-basic-terminal-commands.md
new file mode 100644
index 000000000000..910d351e0de7
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/104-basic-terminal-commands.md
@@ -0,0 +1 @@
+# Basic terminal Commands
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/105-memory-management.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/105-memory-management.md
new file mode 100644
index 000000000000..9f48b95ab10f
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/105-memory-management.md
@@ -0,0 +1,9 @@
+# Memory Management
+
+The term Memory can be defined as a collection of data in a specific format. It is used to store instructions and process data. The memory comprises a large array or group of words or bytes, each with its own location. The primary motive of a computer system is to execute programs. These programs, along with the information they access, should be in the main memory during execution. The CPU fetches instructions from memory according to the value of the program counter.
+
+To achieve a degree of multiprogramming and proper utilization of memory, memory management is important. There are several memory management methods, reflecting various approaches, and the effectiveness of each algorithm depends on the situation.
+
+Demystifying memory management in modern programming languages
+Memory Management in Operating System
+
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/106-interprocess-communication.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/106-interprocess-communication.md
new file mode 100644
index 000000000000..145f6e3ff473
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/106-interprocess-communication.md
@@ -0,0 +1,6 @@
+# Interprocess Communication
+
+Interprocess communication (IPC) refers specifically to the mechanisms an operating system provides to allow the processes to manage shared data
+
+Interprocess Communication
+Interprocess Communication - Neso Academy
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/107-io-management.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/107-io-management.md
new file mode 100644
index 000000000000..0c20a796b9b4
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/107-io-management.md
@@ -0,0 +1 @@
+# Io management
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/108-posix-basics.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/108-posix-basics.md
new file mode 100644
index 000000000000..babfb2c69dd3
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/108-posix-basics.md
@@ -0,0 +1 @@
+# Posix basics
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/109-basic-networking-concepts.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/109-basic-networking-concepts.md
new file mode 100644
index 000000000000..fd00d8f4fb34
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/109-basic-networking-concepts.md
@@ -0,0 +1 @@
+# Basic networking concepts
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/102-os-general-knowledge/readme.md b/content/roadmaps/101-backend/content/102-os-general-knowledge/readme.md
new file mode 100644
index 000000000000..286fe3ca8579
--- /dev/null
+++ b/content/roadmaps/101-backend/content/102-os-general-knowledge/readme.md
@@ -0,0 +1,8 @@
+# General Knowledge
+
+Operating System is a program that manages a computer’s resources, especially the allocation of those resources among other programs. Typical resources include the central processing unit (CPU), computer memory, file storage, input/output (I/O) devices, and network connections.
+
+Free Content
+What is an operating system?
+Operating Systems: Crash Course Computer Science #18
+Introduction to Operating System
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md b/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md
new file mode 100644
index 000000000000..abfa64445cc1
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/100-go.md
@@ -0,0 +1,10 @@
+# Go
+
+Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.
+
+Free Content
+A Tour of Go – Go Basics
+Go Reference Documentation
+Go by Example - annotated example programs
+Learn Go | Codecademy
+W3Schools Go Tutorial
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/101-rust.md b/content/roadmaps/101-backend/content/103-learn-a-language/101-rust.md
new file mode 100644
index 000000000000..7a5822c9815b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/101-rust.md
@@ -0,0 +1,7 @@
+# Rust
+
+Rust is a modern systems programming language focusing on safety, speed, and concurrency. It accomplishes these goals by being memory safe without using garbage collection.
+
+Free Content
+The Rust Programming Language - online book
+Rust by Example - collection of runnable examples
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md b/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md
new file mode 100644
index 000000000000..ab4f8f7856be
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/102-java.md
@@ -0,0 +1,10 @@
+# Java
+
+Java is general-purpose language, primarily used for Internet-based applications.
+It was created in 1995 by James Gosling at Sun Microsystems and is one of the most popular options for backend developers.
+
+Free Content
+Java Website
+Codeacademy - Free Course
+W3 Schools Tutorials
+Java Crash Course
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/103-csharp.md b/content/roadmaps/101-backend/content/103-learn-a-language/103-csharp.md
new file mode 100644
index 000000000000..aa272829d350
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/103-csharp.md
@@ -0,0 +1,8 @@
+# Csharp
+C# (pronounced "C sharp") is a general purpose programming language made by Microsoft. It is used to perform different tasks and can be used to create web apps, games, mobile apps, etc.
+
+Free Content
+C# Learning Path
+C# on W3 schools
+Introduction to C#
+C# tutorials
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/103-php.md b/content/roadmaps/101-backend/content/103-learn-a-language/103-php.md
new file mode 100644
index 000000000000..204386d61afe
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/103-php.md
@@ -0,0 +1,8 @@
+# PHP
+
+PHP is a server scripting language and a powerful tool for making dynamic and interactive Web pages. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1994. The PHP reference implementation is now produced by The PHP Group.
+
+Free Content
+PHP Website
+Learn PHP - W3Schools
+PHP For Absolute Beginners
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/105-javascript.md b/content/roadmaps/101-backend/content/103-learn-a-language/105-javascript.md
new file mode 100644
index 000000000000..49e66286c413
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/105-javascript.md
@@ -0,0 +1,13 @@
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. Apart from being used on the frontend in browsers, there is Node.js which is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
+
+Free Content
+
+W3Schools – JavaScript Tutorial
+The Modern JavaScript Tutorial
+JavaScript Crash Course for Beginners
+
+Node.js Crash Course
+Node.js Tutorial for Beginners
+Codecademy - Learn JavaScript
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md b/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md
new file mode 100644
index 000000000000..72d9e196e3ba
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/106-python.md
@@ -0,0 +1,11 @@
+# Python
+
+Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedureal or object-oriented programmatic ways.
+
+Free Content
+Python Website
+Python Getting Started
+W3Schools - Python Tutorial
+Python Crash Course
+Automate the Boring Stuff
+Codecademy - Learn Python 2
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/107-ruby.md b/content/roadmaps/101-backend/content/103-learn-a-language/107-ruby.md
new file mode 100644
index 000000000000..651bc592ef95
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/107-ruby.md
@@ -0,0 +1,8 @@
+# Ruby
+
+Ruby is a high-level, interpreted programming language that blends Perl, Smalltalk, Eiffel, Ada, and Lisp. Ruby focuses on simplicity and productivity along with a syntax that reads and writes naturally. Ruby supports procedural, object-oriented and functional programming and is dynamically typed.
+
+Free Content
+Ruby Website
+Learn Ruby in 20 minutes
+Learn Ruby | Codecademy
diff --git a/content/roadmaps/101-backend/content/103-learn-a-language/readme.md b/content/roadmaps/101-backend/content/103-learn-a-language/readme.md
new file mode 100644
index 000000000000..00ac1d80ac7a
--- /dev/null
+++ b/content/roadmaps/101-backend/content/103-learn-a-language/readme.md
@@ -0,0 +1 @@
+# Learn a language
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/104-version-control-systems/100-basic-usage-of-git.md b/content/roadmaps/101-backend/content/104-version-control-systems/100-basic-usage-of-git.md
new file mode 100644
index 000000000000..e6ec03032f1b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/104-version-control-systems/100-basic-usage-of-git.md
@@ -0,0 +1,9 @@
+# Git
+
+[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
+
+Free Content
+Version Control System Introduction
+Git & GitHub Crash Course For Beginners
+Learn Git in 20 Minutes
+Learn Git on the command line
diff --git a/content/roadmaps/101-backend/content/104-version-control-systems/readme.md b/content/roadmaps/101-backend/content/104-version-control-systems/readme.md
new file mode 100644
index 000000000000..3e9bee47db9d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/104-version-control-systems/readme.md
@@ -0,0 +1,9 @@
+# Version Control Systems
+
+Version control/source control systems allow developers to track and control changes to code over time. These services often include the ability to make atomic revisions to code, branch/fork off of specific points, and to compare versions of code. They are useful in determining the who, what, when, and why code changes were made.
+
+
+Free Content
+Git
+Mercurial
+What is Version Control?
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/105-repo-hosting-services/100-github.md b/content/roadmaps/101-backend/content/105-repo-hosting-services/100-github.md
new file mode 100644
index 000000000000..ea477f633c5b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/105-repo-hosting-services/100-github.md
@@ -0,0 +1,13 @@
+# GitHub
+
+GitHub is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+Free Content
+
+GitHub Website
+GitHub Documentation
+What is GitHub?
+Git vs. GitHub: What's the difference?
+Git and GitHub for Beginners
+Git and GitHub - CS50 Beyond 2019
+How to Use Git in a Professional Dev Team
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/105-repo-hosting-services/101-gitlab.md b/content/roadmaps/101-backend/content/105-repo-hosting-services/101-gitlab.md
new file mode 100644
index 000000000000..ed8109bd6127
--- /dev/null
+++ b/content/roadmaps/101-backend/content/105-repo-hosting-services/101-gitlab.md
@@ -0,0 +1,8 @@
+# GitLab
+
+GitLab is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+Free Content
+
+GitLab Website
+GitLab Documentation
diff --git a/content/roadmaps/101-backend/content/105-repo-hosting-services/102-bitbucket.md b/content/roadmaps/101-backend/content/105-repo-hosting-services/102-bitbucket.md
new file mode 100644
index 000000000000..e5de098c28f8
--- /dev/null
+++ b/content/roadmaps/101-backend/content/105-repo-hosting-services/102-bitbucket.md
@@ -0,0 +1,13 @@
+# Bitbucket
+
+Bitbucket is a Git based hosting and source code repository service that is Atlassian's alternative to other products like GitHub, GitLab etc
+
+Bitbucket offers hosting options via Bitbucket Cloud (Atlassian's servers), Bitbucket Server (customer's on-premise) or Bitbucket Data Centre (number of servers in customers on-premise or cloud environment)
+
+Free Content
+Bitbucket Website
+A brief overview of Bitbucket
+Getting started with Bitbucket
+Using Git with Bitbucket Cloud
+Bitbucket tutorial | How to use Bitbucket Cloud
+Bitbucket Tutorial | Bitbucket for Beginners
diff --git a/content/roadmaps/101-backend/content/105-repo-hosting-services/readme.md b/content/roadmaps/101-backend/content/105-repo-hosting-services/readme.md
new file mode 100644
index 000000000000..574869a99e9c
--- /dev/null
+++ b/content/roadmaps/101-backend/content/105-repo-hosting-services/readme.md
@@ -0,0 +1,9 @@
+# Repo Hosting Services
+
+When working on a team, you often need a remote place to put your code so others can access it, create their own branches, and create or review pull requests. These services often include issue tracking, code review, and continuous integration features. A few popular choices are GitHub, GitLab, BitBucket, and AWS CodeCommit.
+
+Free Content
+GitHub
+GitLab
+BitBucket
+How to choose the best source code repository
diff --git a/content/roadmaps/101-backend/content/106-relational-databases/100-postgresql.md b/content/roadmaps/101-backend/content/106-relational-databases/100-postgresql.md
new file mode 100644
index 000000000000..cbafee87695d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/106-relational-databases/100-postgresql.md
@@ -0,0 +1,9 @@
+# PostgreSQL
+
+PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.
+
+Free Content
+Official Website
+What is PostgreSQL
+Learn PostgreSQL Tutorial - Full Course for Beginners
+Postgres tutorial for Beginners
diff --git a/content/roadmaps/101-backend/content/106-relational-databases/101-mysql.md b/content/roadmaps/101-backend/content/106-relational-databases/101-mysql.md
new file mode 100644
index 000000000000..51a250472825
--- /dev/null
+++ b/content/roadmaps/101-backend/content/106-relational-databases/101-mysql.md
@@ -0,0 +1,8 @@
+# MySQL
+
+MySQL is an incredibly popular open source relational database management system (RDBMS). MySQL can be used as a stand-alone client or in conjunction with other services to provide database connectivity. The **M** in LAMP stack stands for MySQL; that alone should provide an idea of its prevalence.
+
+Free Content
+MySQL website
+W3Schools - MySQL tutorial
+MySQL tutorial for beginners
diff --git a/content/roadmaps/101-backend/content/106-relational-databases/102-mariadb.md b/content/roadmaps/101-backend/content/106-relational-databases/102-mariadb.md
new file mode 100644
index 000000000000..2efaf2286e4f
--- /dev/null
+++ b/content/roadmaps/101-backend/content/106-relational-databases/102-mariadb.md
@@ -0,0 +1 @@
+# Mariadb
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/106-relational-databases/103-mssql.md b/content/roadmaps/101-backend/content/106-relational-databases/103-mssql.md
new file mode 100644
index 000000000000..a983174f4819
--- /dev/null
+++ b/content/roadmaps/101-backend/content/106-relational-databases/103-mssql.md
@@ -0,0 +1,8 @@
+# MS SQL
+
+MS SQL (or Microsoft SQL Server) is the Microsoft developed relational database management system (RDBMS). MS SQL uses the T-SQL (Transact-SQL) query language to interact with the relational databases. There are many different versions and editions available of MS SQL
+
+Free Content
+MS SQL website
+Tutorials for SQL Server
+SQL Server tutorial for beginners
diff --git a/content/roadmaps/101-backend/content/106-relational-databases/104-oracle.md b/content/roadmaps/101-backend/content/106-relational-databases/104-oracle.md
new file mode 100644
index 000000000000..1d05ecc39ec5
--- /dev/null
+++ b/content/roadmaps/101-backend/content/106-relational-databases/104-oracle.md
@@ -0,0 +1 @@
+# Oracle
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/106-relational-databases/readme.md b/content/roadmaps/101-backend/content/106-relational-databases/readme.md
new file mode 100644
index 000000000000..601f0904dbf7
--- /dev/null
+++ b/content/roadmaps/101-backend/content/106-relational-databases/readme.md
@@ -0,0 +1,10 @@
+# Relational Databases
+
+A relational database is **a type of database that stores and provides access to data points that are related to one another**. Relational databases store data in a series of tables. Interconnections between the tables are specified as foreign keys. A foreign key is a unique reference from one row in a relational table to another row in a table, which can be the same table but is most commonly a different table.
+
+Free Content
+Relational Databases
+51 Years of Relational Databases
+Databases and SQL
+Intro To Relational Databases
+What is Relational Database
diff --git a/content/roadmaps/101-backend/content/107-nosql-databases/100-document-databases.md b/content/roadmaps/101-backend/content/107-nosql-databases/100-document-databases.md
new file mode 100644
index 000000000000..abc6621d1589
--- /dev/null
+++ b/content/roadmaps/101-backend/content/107-nosql-databases/100-document-databases.md
@@ -0,0 +1,12 @@
+# Document databases
+
+## MongoDB
+
+MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License (SSPL).
+
+Free Content
+
+MongoDB Website
+MongoDB Documentation
+Learning Path for MongoDB Developers
+MongoDB Online Sandbox
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/107-nosql-databases/101-column-databases.md b/content/roadmaps/101-backend/content/107-nosql-databases/101-column-databases.md
new file mode 100644
index 000000000000..11f96ea48b4d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/107-nosql-databases/101-column-databases.md
@@ -0,0 +1 @@
+# Column databases
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/107-nosql-databases/102-timeseries-databases.md b/content/roadmaps/101-backend/content/107-nosql-databases/102-timeseries-databases.md
new file mode 100644
index 000000000000..6db12a000c2d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/107-nosql-databases/102-timeseries-databases.md
@@ -0,0 +1 @@
+# Timeseries databases
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/107-nosql-databases/103-realtime-databases.md b/content/roadmaps/101-backend/content/107-nosql-databases/103-realtime-databases.md
new file mode 100644
index 000000000000..ac39b1522b49
--- /dev/null
+++ b/content/roadmaps/101-backend/content/107-nosql-databases/103-realtime-databases.md
@@ -0,0 +1 @@
+# Realtime databases
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/107-nosql-databases/readme.md b/content/roadmaps/101-backend/content/107-nosql-databases/readme.md
new file mode 100644
index 000000000000..02ad6fd9b6a4
--- /dev/null
+++ b/content/roadmaps/101-backend/content/107-nosql-databases/readme.md
@@ -0,0 +1,9 @@
+# NoSQL databases
+
+NoSQL databases offer data storage and retrieval that is modelled differently to "traditional" relational databases. NoSQL databases typically focus more on horizontal scaling, eventual consistency, speed and flexibility and is used commonly for big data and real-time streaming applications.
+NoSQL is often described as a BASE system (**B**asically **A**vailable, **S**oft state, **E**ventual consistency) as opposed to SQL/relational which typically focus on ACID (Atomicity, Consistency, Isolation, Durability). Common NoSQL data structures include key-value pair, wide column, graph and document.
+
+Free Content
+NoSQL Explained
+How do NoSQL Databases work
+SQL vs NoSQL Explained
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/100-orms.md b/content/roadmaps/101-backend/content/108-more-about-databases/100-orms.md
new file mode 100644
index 000000000000..0774e010e395
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/100-orms.md
@@ -0,0 +1 @@
+# Orms
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/101-acid.md b/content/roadmaps/101-backend/content/108-more-about-databases/101-acid.md
new file mode 100644
index 000000000000..de97e274144c
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/101-acid.md
@@ -0,0 +1,7 @@
+# ACID
+
+ACID are the four properties of any database system that help in making sure that we are able to perform the transactions in a reliable manner. It's an acronym which refers to the presence of four properties: atomicity, consistency, isolation and durability
+
+Free Content
+ACID Explained: Atomic, Consistent, Isolated & Durable
+What is ACID Compliant Database?What is ACID Compliance?: Atomicity, Consistency, Isolation
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/102-transactions.md b/content/roadmaps/101-backend/content/108-more-about-databases/102-transactions.md
new file mode 100644
index 000000000000..0125c964d91d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/102-transactions.md
@@ -0,0 +1 @@
+# Transactions
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/103-n-plus-one-problem.md b/content/roadmaps/101-backend/content/108-more-about-databases/103-n-plus-one-problem.md
new file mode 100644
index 000000000000..34e34b4dcd41
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/103-n-plus-one-problem.md
@@ -0,0 +1,6 @@
+# N plus one problem
+
+The N+1 query problem happens when your code executes N additional query statements to fetch the same data that could have been retrieved when executing the primary query.
+
+Free Content
+In Detail Explanation of N+1 Problem
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/104-database-normalization.md b/content/roadmaps/101-backend/content/108-more-about-databases/104-database-normalization.md
new file mode 100644
index 000000000000..780e08a1b537
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/104-database-normalization.md
@@ -0,0 +1 @@
+# Database normalization
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/105-database-indexes.md b/content/roadmaps/101-backend/content/108-more-about-databases/105-database-indexes.md
new file mode 100644
index 000000000000..6aa95691af80
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/105-database-indexes.md
@@ -0,0 +1 @@
+# Database indexes
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/106-data-replication.md b/content/roadmaps/101-backend/content/108-more-about-databases/106-data-replication.md
new file mode 100644
index 000000000000..cf578cd09386
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/106-data-replication.md
@@ -0,0 +1 @@
+# Data replication
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/107-sharding-strategies.md b/content/roadmaps/101-backend/content/108-more-about-databases/107-sharding-strategies.md
new file mode 100644
index 000000000000..8da2891b680b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/107-sharding-strategies.md
@@ -0,0 +1 @@
+# Sharding strategies
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/108-cap-theorem.md b/content/roadmaps/101-backend/content/108-more-about-databases/108-cap-theorem.md
new file mode 100644
index 000000000000..3fa66cdafbf1
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/108-cap-theorem.md
@@ -0,0 +1,10 @@
+# CAP Theorem
+
+CAP is an acronym that stands for Consistency, Availability and Partition Tolerance. According to CAP theorem, any distributed system can only guarantee two of the three properties at any point of time. You can't guarantee all three properties at once.
+
+Free Content
+What is CAP Theorem?
+What is CAP Theorem?
+CAP Theorem - Wikipedia
+An Illustrated Proof of the CAP Theorem
+CAP Theorem and it's applications in NoSQL Databases
diff --git a/content/roadmaps/101-backend/content/108-more-about-databases/readme.md b/content/roadmaps/101-backend/content/108-more-about-databases/readme.md
new file mode 100644
index 000000000000..9b82db219df1
--- /dev/null
+++ b/content/roadmaps/101-backend/content/108-more-about-databases/readme.md
@@ -0,0 +1 @@
+# More about databases
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/100-rest.md b/content/roadmaps/101-backend/content/109-apis/100-rest.md
new file mode 100644
index 000000000000..36dbc8e7cce8
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/100-rest.md
@@ -0,0 +1,9 @@
+# REST
+
+REST, or REpresentational State Transfer, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other.
+
+Free Content
+
+What is REST?
+What is a REST API?
+Roy Fielding's dissertation chapter, "Representational State Transfer (REST)"
diff --git a/content/roadmaps/101-backend/content/109-apis/101-json-apis.md b/content/roadmaps/101-backend/content/109-apis/101-json-apis.md
new file mode 100644
index 000000000000..c37be7d18c03
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/101-json-apis.md
@@ -0,0 +1 @@
+# Json apis
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/102-soap.md b/content/roadmaps/101-backend/content/109-apis/102-soap.md
new file mode 100644
index 000000000000..388cb826ff75
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/102-soap.md
@@ -0,0 +1 @@
+# Soap
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/103-grpc.md b/content/roadmaps/101-backend/content/109-apis/103-grpc.md
new file mode 100644
index 000000000000..5d543f43cc51
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/103-grpc.md
@@ -0,0 +1 @@
+# Grpc
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/104-hateoas.md b/content/roadmaps/101-backend/content/109-apis/104-hateoas.md
new file mode 100644
index 000000000000..56a8d49392c7
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/104-hateoas.md
@@ -0,0 +1,6 @@
+# Hateoas
+
+HATEOAS is an acronym for Hypermedia As The Engine Of Application State, it's the concept that when sending information over a RESTful API the document received should contain everything the client needs in order to parse and use the data i.e they don't have to contact any other endpoint not explicitly mentioned within the Document
+
+Free Content
+Oktane17: Designing Beautiful REST + JSON APIs (3:56 - 5:57)
diff --git a/content/roadmaps/101-backend/content/109-apis/105-open-api-spec.md b/content/roadmaps/101-backend/content/109-apis/105-open-api-spec.md
new file mode 100644
index 000000000000..08f465abede0
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/105-open-api-spec.md
@@ -0,0 +1,11 @@
+# Open api spec
+
+The OpenAPI Specification (OAS) defines a standard, language-agnostic interface to RESTful APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection. When properly defined, a consumer can understand and interact with the remote service with a minimal amount of implementation logic.
+
+An OpenAPI definition can then be used by documentation generation tools to display the API, code generation tools to generate servers and clients in various programming languages, testing tools, and many other use cases.
+
+Free Content
+OpenAPI Specification Website
+Open API Live Editor
+OpenAPI 3.0: How to Design and Document APIs with the Latest OpenAPI Specification 3.0
+Official training guide
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/100-cookie-based.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/100-cookie-based.md
new file mode 100644
index 000000000000..72735c138b79
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/100-cookie-based.md
@@ -0,0 +1 @@
+# Cookie based
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/101-oauth.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/101-oauth.md
new file mode 100644
index 000000000000..be4eae79ecd5
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/101-oauth.md
@@ -0,0 +1,13 @@
+# OAuth
+
+OAuth stands for **O**pen **Auth**orization and is an open standard for authorization. It works to authorize devices, APIs, servers and applications using access tokens rather than user credentials, known as "secure delegated access".
+
+In its most simplest form, OAuth delegates authentication to services like Facebook, Amazon, Twitter and authorizes third-party applications to access the user account **without** having to enter their login and password.
+
+It is mostly utilized for REST/APIs and only provides a limited scope of a user's data.
+
+Free Content
+Okta - What the Heck is OAuth
+DigitalOcean - An Introduction to OAuth 2
+What is OAuth really all about
+OAuth 2.0: An Overview
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/102-basic-authentication.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/102-basic-authentication.md
new file mode 100644
index 000000000000..771370c96787
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/102-basic-authentication.md
@@ -0,0 +1 @@
+# Basic authentication
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/103-token-authentication.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/103-token-authentication.md
new file mode 100644
index 000000000000..368549660048
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/103-token-authentication.md
@@ -0,0 +1 @@
+# Token authentication
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/104-jwt.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/104-jwt.md
new file mode 100644
index 000000000000..f461608e3c30
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/104-jwt.md
@@ -0,0 +1,10 @@
+# JWT
+
+JWT stands for JSON Web Token is a token-based encryption open standard/methodology that is used to transfer information securely as a JSON object. Clients and Servers use JWT to securely share information, with the JWT containing encoded JSON objects and claims. JWT tokens are designed to be compact, safe to use within URLs, and ideal for SSO contexts.
+
+Free Content
+jwt.io Website
+Introduction to JSON Web Tokens
+What is JWT?
+What Is JWT and Why Should You Use JWT
+What is JWT? JSON Web Token Explained
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/105-openid.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/105-openid.md
new file mode 100644
index 000000000000..70dd95853ca0
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/105-openid.md
@@ -0,0 +1 @@
+# Openid
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/105-saml.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/105-saml.md
new file mode 100644
index 000000000000..9cec137564a4
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/105-saml.md
@@ -0,0 +1 @@
+# Saml
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/106-authentication/readme.md b/content/roadmaps/101-backend/content/109-apis/106-authentication/readme.md
new file mode 100644
index 000000000000..66a783b302dc
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/106-authentication/readme.md
@@ -0,0 +1 @@
+# Authentication
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/109-apis/readme.md b/content/roadmaps/101-backend/content/109-apis/readme.md
new file mode 100644
index 000000000000..db412acd9a17
--- /dev/null
+++ b/content/roadmaps/101-backend/content/109-apis/readme.md
@@ -0,0 +1 @@
+# Apis
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/110-caching/100-cdn.md b/content/roadmaps/101-backend/content/110-caching/100-cdn.md
new file mode 100644
index 000000000000..6cfa909bc14e
--- /dev/null
+++ b/content/roadmaps/101-backend/content/110-caching/100-cdn.md
@@ -0,0 +1,12 @@
+# CDN (Content Delivery Network)
+
+A Content Delivery Network (CDN) service aims to provide high availability and performance improvements of websites. This is achieved with fast delivery of website assets and content typically via geographically closer endpoints to the client requests.
+Traditional commercial CDNs (Amazon CloudFront, Akamai, CloudFlare and Fastly) provide servers across the globe which can be used for this purpose.
+Serving assets and contents via a CDN reduces bandwidth on website hosting, provides an extra layer of caching to reduce potential outages and can improve website security as well
+
+
+Free Content
+CloudFlare - What is a CDN? | How do CDNs work?
+Wikipedia - Content Delivery Network
+What is Cloud CDN?
+What is a Content Delivery Network (CDN)?
diff --git a/content/roadmaps/101-backend/content/110-caching/101-server-side/100-redis.md b/content/roadmaps/101-backend/content/110-caching/101-server-side/100-redis.md
new file mode 100644
index 000000000000..0de4bc736248
--- /dev/null
+++ b/content/roadmaps/101-backend/content/110-caching/101-server-side/100-redis.md
@@ -0,0 +1 @@
+# Redis
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/110-caching/101-server-side/101-memcached.md b/content/roadmaps/101-backend/content/110-caching/101-server-side/101-memcached.md
new file mode 100644
index 000000000000..a77571adae37
--- /dev/null
+++ b/content/roadmaps/101-backend/content/110-caching/101-server-side/101-memcached.md
@@ -0,0 +1 @@
+# Memcached
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/110-caching/101-server-side/readme.md b/content/roadmaps/101-backend/content/110-caching/101-server-side/readme.md
new file mode 100644
index 000000000000..ed3765dd85a6
--- /dev/null
+++ b/content/roadmaps/101-backend/content/110-caching/101-server-side/readme.md
@@ -0,0 +1 @@
+# Server side
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/110-caching/102-client-side.md b/content/roadmaps/101-backend/content/110-caching/102-client-side.md
new file mode 100644
index 000000000000..2d237652039d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/110-caching/102-client-side.md
@@ -0,0 +1 @@
+# Client side
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/110-caching/readme.md b/content/roadmaps/101-backend/content/110-caching/readme.md
new file mode 100644
index 000000000000..07f88797af7d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/110-caching/readme.md
@@ -0,0 +1 @@
+# Caching
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/100-md5.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/100-md5.md
new file mode 100644
index 000000000000..0cce1f539e68
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/100-md5.md
@@ -0,0 +1,8 @@
+# MD5
+
+MD5 (Message-Digest Algorithm 5) is a hash function that is currently advised not to be used due to it's extensive vulnerabilities. It is still used as a checksum to verify data integrity.
+
+Free Content
+Wikipedia - MD5
+What is MD5?
+Why is MD5 not safe?
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/101-sha-family.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/101-sha-family.md
new file mode 100644
index 000000000000..4ab9c4f9bfcf
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/101-sha-family.md
@@ -0,0 +1 @@
+# Sha family
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/102-bcrypt.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/102-bcrypt.md
new file mode 100644
index 000000000000..0fc3327a59e0
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/102-bcrypt.md
@@ -0,0 +1,8 @@
+# Bcrypt
+
+bcrypt is a password hashing function, that has proven been proven reliable and secure since it's release in 1999.It has been implemented into most commonly-used programming languages.
+
+Free Content
+bcrypt explained
+Understanding bcrypt
+bcrypt's npm package
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/104-scrypt.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/104-scrypt.md
new file mode 100644
index 000000000000..fd0de9978922
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/104-scrypt.md
@@ -0,0 +1 @@
+# Scrypt
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/105-content-security-policy.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/105-content-security-policy.md
new file mode 100644
index 000000000000..3e536d4ecef6
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/105-content-security-policy.md
@@ -0,0 +1,7 @@
+# Content Security Policy
+
+Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
+
+Free Content
+MDN — Content Security Policy (CSP)
+Google Devs — Content Security Policy (CSP)
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/105-https.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/105-https.md
new file mode 100644
index 000000000000..eaf2307f2843
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/105-https.md
@@ -0,0 +1,10 @@
+# HTTPS
+
+HTTPS is a secure way to send data between a web server and a browser.
+
+Free Content
+What is HTTPS?
+Why HTTPS Matters
+Enabling HTTPS on Your Servers
+SSL, TLS, HTTP, HTTPS Explained
+HTTPS — Stories from the field
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/106-cors.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/106-cors.md
new file mode 100644
index 000000000000..1079e74cbbb0
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/106-cors.md
@@ -0,0 +1,7 @@
+# Cors
+
+Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
+Free Content
+Cross-Origin Resource Sharing (CORS)
+CORS in 100 Seconds
+CORS in 6 minutes
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/107-ssl-tls.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/107-ssl-tls.md
new file mode 100644
index 000000000000..064964cdff61
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/107-ssl-tls.md
@@ -0,0 +1 @@
+# Ssl tls
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/108-owasp.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/108-owasp.md
new file mode 100644
index 000000000000..e43f263cec8d
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/108-owasp.md
@@ -0,0 +1,9 @@
+# OWASP Security Risks
+
+OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.
+
+Free Content
+Wikipedia - OWASP
+OWASP Web Application Security Testing Checklist
+OWASP Top 10 Security Risks
+OWASP Cheatsheets
diff --git a/content/roadmaps/101-backend/content/111-web-security-knowledge/readme.md b/content/roadmaps/101-backend/content/111-web-security-knowledge/readme.md
new file mode 100644
index 000000000000..bee608013e18
--- /dev/null
+++ b/content/roadmaps/101-backend/content/111-web-security-knowledge/readme.md
@@ -0,0 +1,11 @@
+# Web Security Knowledge
+
+Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business.
+
+Free Content
+Why HTTPS Matters
+Wikipedia - OWASP
+OWASP Web Application Security Testing Checklist
+OWASP Top 10 Security Risks
+OWASP Cheatsheets
+Content Security Policy (CSP)
diff --git a/content/roadmaps/101-backend/content/112-testing/100-integration-testing.md b/content/roadmaps/101-backend/content/112-testing/100-integration-testing.md
new file mode 100644
index 000000000000..70eda5e3f76f
--- /dev/null
+++ b/content/roadmaps/101-backend/content/112-testing/100-integration-testing.md
@@ -0,0 +1,7 @@
+# Integration Testing
+
+Integration testing a broad category of tests where multiple software modules are __integrated__ and tested as a group. It is meant to test the __interaction__ between multiple services, resources, or modules. For example, an API's interaction with a backend service, or a service with a database.
+
+Free Content
+Integration Testing
+What is Integration Testing?
diff --git a/content/roadmaps/101-backend/content/112-testing/101-unit-testing.md b/content/roadmaps/101-backend/content/112-testing/101-unit-testing.md
new file mode 100644
index 000000000000..c2bd3c9dae51
--- /dev/null
+++ b/content/roadmaps/101-backend/content/112-testing/101-unit-testing.md
@@ -0,0 +1,7 @@
+# Unit Testing
+
+Unit testing is where individual __units__ (modules, functions/methods, routines, etc.) of software are tested to ensure their correctness. This low-level testing ensures smaller components are functionally sound while taking the burden off of higher-level tests. Generally, a developer writes these tests during the development process and they are run as automated tests.
+
+Free Content
+Unit Testing Tutorial
+What is Unit Testing?
diff --git a/content/roadmaps/101-backend/content/112-testing/102-functional-testing.md b/content/roadmaps/101-backend/content/112-testing/102-functional-testing.md
new file mode 100644
index 000000000000..0b20907a2ef6
--- /dev/null
+++ b/content/roadmaps/101-backend/content/112-testing/102-functional-testing.md
@@ -0,0 +1,8 @@
+# Functional Testing
+
+Functional testing is where software is tested to ensure functional requirements are met. Usually, it is a form of black box testing in which the tester has no understanding of the source code; testing is performed by providing input and comparing expected/actual output.
+It contrasts with non-functional testing, which includes performance, load, scalability, and penetration testing.
+
+Free Content
+What is Functional Testing?
+Functional Testing vs Non-Functional Testing
diff --git a/content/roadmaps/101-backend/content/112-testing/readme.md b/content/roadmaps/101-backend/content/112-testing/readme.md
new file mode 100644
index 000000000000..1a310f6c0c16
--- /dev/null
+++ b/content/roadmaps/101-backend/content/112-testing/readme.md
@@ -0,0 +1,7 @@
+# Testing
+
+A key to building software that meets requirements without defects is testing. Software testing helps developers know they are building the right software. When tests are run as part of the development process (often with continuous integration tools), they build confidence and prevent regressions in the code.
+
+Free Content
+What is Software Testing?
+Testing Pyramid
diff --git a/content/roadmaps/101-backend/content/113-ci-cd.md b/content/roadmaps/101-backend/content/113-ci-cd.md
new file mode 100644
index 000000000000..5248a5956e79
--- /dev/null
+++ b/content/roadmaps/101-backend/content/113-ci-cd.md
@@ -0,0 +1,7 @@
+# CI/CD
+
+CI/CD (Continuous Integration/Continuous Deployment) is the practice of automating building, testing, and deployment of applications with the main goal of detecting issues early, and provide quicker releases to the production environment.
+
+Free Content
+DevOps CI/CD Explained in 100 Seconds by Fireship
+Automate your Workflows with GitHub Actions
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/100-gof-design-patterns.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/100-gof-design-patterns.md
new file mode 100644
index 000000000000..b73a4a471dd8
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/100-gof-design-patterns.md
@@ -0,0 +1,12 @@
+# Design Patterns
+
+Design patterns are typical solutions to commonly occurring problems in software design. They can be broken into three categories:
+
+- Creational Patterns for the creation of objects
+- Structural Patterns to provide relationship between objects
+- Behavioral Patterns to help define how objects interact
+
+Free Content
+Design Patterns for Humans
+GOF design patterns
+Design Patterns
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/101-domain-driven-design.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/101-domain-driven-design.md
new file mode 100644
index 000000000000..27cc770b3bff
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/101-domain-driven-design.md
@@ -0,0 +1 @@
+# Domain driven design
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/102-test-driven-development.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/102-test-driven-development.md
new file mode 100644
index 000000000000..dd0e772fe1b4
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/102-test-driven-development.md
@@ -0,0 +1,8 @@
+# Test Driven Development
+
+Test driven development (TDD) is the process of writing tests for software's requirements which will fail until the software is developed to meet those requirements. Once those tests pass, then the cycle repeats to refactor code or develop another feature/requirement. In theory, this ensures that software is written to meet requirements in the simplest form, and avoids code defects.
+
+Free Content
+What is Test Driven Development (TDD)?
+Test-driven development
+Agile in Practice: Test Driven Development
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/103-solid.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/103-solid.md
new file mode 100644
index 000000000000..93341b0d80d9
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/103-solid.md
@@ -0,0 +1,15 @@
+# SOLID
+
+SOLID is a set of principles applied to object-oriented design (OOD) to create maintainable, understandable, and flexible code, while avoiding code smells and defects. The principles are:
+
+- Single Responsibility
+- Open/Closed
+- Liskov Substitution
+- Interface Segregation
+- Dependency Inversion
+
+Free Content
+Design Principles and
+Design Patterns
+SOLID Principles
+SOLID: The First 5 Principles of Object Oriented Design
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/104-kiss.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/104-kiss.md
new file mode 100644
index 000000000000..870ba4e9aa47
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/104-kiss.md
@@ -0,0 +1,7 @@
+# KISS
+
+Keep It Simple, Stupid (KISS) is a software design principle that states avoiding needless complexity is the best way to build software that is easier to maintain, understand, and contains fewer defects. A simple product that does a single thing well is better than a complex product that does many things poorly.
+
+Free Content
+Keep It Simple
+Keep It Simple, Stupid (Kiss)
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/105-yagni.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/105-yagni.md
new file mode 100644
index 000000000000..9072b3653fa5
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/105-yagni.md
@@ -0,0 +1,7 @@
+# YAGNI
+
+You Aren't Going to Need It (YAGNI) is a software design principle from the Extreme Programming (XP) framework that states when developing software, functionality or features should not be added until they are necessary. Within agile software development in general, requirements are always open to change; any extra functionality may end up being wasted time and resources.
+
+Free Content
+Yagni
+YAGNI
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/106-dry.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/106-dry.md
new file mode 100644
index 000000000000..5ca661937318
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/106-dry.md
@@ -0,0 +1,7 @@
+# DRY
+
+Don't Repeat Yourself (DRY) is a software design principle which encourages developers to not repeat software patterns or code. DRY encourages code reusability, often in the form of methods, functions, or subroutines. When DRY is implemented successfully, developers are able to make one change to update many related elements while avoiding making changes to unrelated elements.
+
+Free Content
+Software Design Principles DRY and KISS
+Best Practices for Scientific Computing
diff --git a/content/roadmaps/101-backend/content/114-design-and-development-principles/readme.md b/content/roadmaps/101-backend/content/114-design-and-development-principles/readme.md
new file mode 100644
index 000000000000..46706a444a64
--- /dev/null
+++ b/content/roadmaps/101-backend/content/114-design-and-development-principles/readme.md
@@ -0,0 +1 @@
+# Design and development principles
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/115-architectural-patterns/100-monolithic-apps.md b/content/roadmaps/101-backend/content/115-architectural-patterns/100-monolithic-apps.md
new file mode 100644
index 000000000000..ba0dab670f44
--- /dev/null
+++ b/content/roadmaps/101-backend/content/115-architectural-patterns/100-monolithic-apps.md
@@ -0,0 +1,7 @@
+# Monolithic Apps
+
+Monolithic architecture is a pattern in which an application handles requests, executes business logic, interacts with the database, and creates the HTML for the front end. In simpler terms, this one application does many things. It's inner components are highly coupled and deployed as one unit.
+
+Free Content
+Pattern: Monolithic Architecture
+Monolithic Architecture - Advantages & Disadvantages
diff --git a/content/roadmaps/101-backend/content/115-architectural-patterns/101-microservices.md b/content/roadmaps/101-backend/content/115-architectural-patterns/101-microservices.md
new file mode 100644
index 000000000000..8aab78c7d7e3
--- /dev/null
+++ b/content/roadmaps/101-backend/content/115-architectural-patterns/101-microservices.md
@@ -0,0 +1,7 @@
+# Microservices
+
+Microservice architecture is a pattern in which highly cohesive, loosely coupled services are separately developed, maintained, and deployed. Each component handles an individual function, and when combined, the application handles an overall business function.
+
+Free Content
+Pattern: Microservice Architecture
+What is Microservices?
diff --git a/content/roadmaps/101-backend/content/115-architectural-patterns/102-soa.md b/content/roadmaps/101-backend/content/115-architectural-patterns/102-soa.md
new file mode 100644
index 000000000000..f5538ff660bf
--- /dev/null
+++ b/content/roadmaps/101-backend/content/115-architectural-patterns/102-soa.md
@@ -0,0 +1 @@
+# Soa
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/115-architectural-patterns/103-cqrs.md b/content/roadmaps/101-backend/content/115-architectural-patterns/103-cqrs.md
new file mode 100644
index 000000000000..53209f872613
--- /dev/null
+++ b/content/roadmaps/101-backend/content/115-architectural-patterns/103-cqrs.md
@@ -0,0 +1 @@
+# Cqrs
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/115-architectural-patterns/104-serverless.md b/content/roadmaps/101-backend/content/115-architectural-patterns/104-serverless.md
new file mode 100644
index 000000000000..65f49a4e9da2
--- /dev/null
+++ b/content/roadmaps/101-backend/content/115-architectural-patterns/104-serverless.md
@@ -0,0 +1,8 @@
+# Serverless
+
+Serverless is an architecture in which a developer builds and runs applications without provisioning or managing servers. With cloud computing/serverless, servers exist but are managed by the cloud provider. Resources are used as they are needed, on demand and often using auto scaling.
+
+Free Content
+Serverless
+AWS Services
+Serverless Computing in 100 Seconds
diff --git a/content/roadmaps/101-backend/content/115-architectural-patterns/readme.md b/content/roadmaps/101-backend/content/115-architectural-patterns/readme.md
new file mode 100644
index 000000000000..9dc6d42a6c05
--- /dev/null
+++ b/content/roadmaps/101-backend/content/115-architectural-patterns/readme.md
@@ -0,0 +1 @@
+# Architectural patterns
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/116-search-engines/100-elasticsearch.md b/content/roadmaps/101-backend/content/116-search-engines/100-elasticsearch.md
new file mode 100644
index 000000000000..882db2bc2ef8
--- /dev/null
+++ b/content/roadmaps/101-backend/content/116-search-engines/100-elasticsearch.md
@@ -0,0 +1,10 @@
+# Elasticsearch
+
+Elastic search at its core is a document-oriented search engine. It is a document based database that lets you INSERT, DELETE , RETRIEVE and even perform analytics on the saved records. But, Elastic Search is unlike any other general purpose database you have worked with, in the past. It's essentially a search engine and offers an arsenal of features you can use to retrieve the data stored in it, as per your search criteria. And that too, at lightning speeds.
+
+Free Content
+
+Elasticsearch Website
+Elasticsearch Documentation
+
+
diff --git a/content/roadmaps/101-backend/content/116-search-engines/101-solr.md b/content/roadmaps/101-backend/content/116-search-engines/101-solr.md
new file mode 100644
index 000000000000..54c3caa9451c
--- /dev/null
+++ b/content/roadmaps/101-backend/content/116-search-engines/101-solr.md
@@ -0,0 +1 @@
+# Solr
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/116-search-engines/readme.md b/content/roadmaps/101-backend/content/116-search-engines/readme.md
new file mode 100644
index 000000000000..bc600ec99069
--- /dev/null
+++ b/content/roadmaps/101-backend/content/116-search-engines/readme.md
@@ -0,0 +1 @@
+# Search engines
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/117-message-brokers/100-rabbitmq.md b/content/roadmaps/101-backend/content/117-message-brokers/100-rabbitmq.md
new file mode 100644
index 000000000000..dc5fc1d4810e
--- /dev/null
+++ b/content/roadmaps/101-backend/content/117-message-brokers/100-rabbitmq.md
@@ -0,0 +1 @@
+# Rabbitmq
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/117-message-brokers/101-kafka.md b/content/roadmaps/101-backend/content/117-message-brokers/101-kafka.md
new file mode 100644
index 000000000000..96fba0ab7cd7
--- /dev/null
+++ b/content/roadmaps/101-backend/content/117-message-brokers/101-kafka.md
@@ -0,0 +1 @@
+# Kafka
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/117-message-brokers/readme.md b/content/roadmaps/101-backend/content/117-message-brokers/readme.md
new file mode 100644
index 000000000000..08e76c75e08f
--- /dev/null
+++ b/content/roadmaps/101-backend/content/117-message-brokers/readme.md
@@ -0,0 +1 @@
+# Message brokers
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/118-containerization/100-docker.md b/content/roadmaps/101-backend/content/118-containerization/100-docker.md
new file mode 100644
index 000000000000..dc37fc5fcb7b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/118-containerization/100-docker.md
@@ -0,0 +1,8 @@
+# Docker
+
+Docker is a platform for working with containerized applications. Among its features are a daemon and client for managing and interacting with containers, registries for storing images, and a desktop application to package all these features together.
+
+Free Content
+Docker Documentation
+What is Docker | AWS
+Docker Tutorial
diff --git a/content/roadmaps/101-backend/content/118-containerization/101-rkt.md b/content/roadmaps/101-backend/content/118-containerization/101-rkt.md
new file mode 100644
index 000000000000..916fd70a9d08
--- /dev/null
+++ b/content/roadmaps/101-backend/content/118-containerization/101-rkt.md
@@ -0,0 +1 @@
+# Rkt
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/118-containerization/102-lxc.md b/content/roadmaps/101-backend/content/118-containerization/102-lxc.md
new file mode 100644
index 000000000000..5b04c84c2d4f
--- /dev/null
+++ b/content/roadmaps/101-backend/content/118-containerization/102-lxc.md
@@ -0,0 +1 @@
+# Lxc
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/118-containerization/readme.md b/content/roadmaps/101-backend/content/118-containerization/readme.md
new file mode 100644
index 000000000000..c2c3e67926f7
--- /dev/null
+++ b/content/roadmaps/101-backend/content/118-containerization/readme.md
@@ -0,0 +1,7 @@
+# Containerization vs. Virtualization
+
+Containers and virtual machines are the two most popular approaches to setting up a software infrastructure for your organization.
+
+Free Content
+Containerization vs. Virtualization: Everything you need to know
+Containerization or Virtualization - The Differences
diff --git a/content/roadmaps/101-backend/content/119-graphql/100-apollo.md b/content/roadmaps/101-backend/content/119-graphql/100-apollo.md
new file mode 100644
index 000000000000..7d1fa06ba82e
--- /dev/null
+++ b/content/roadmaps/101-backend/content/119-graphql/100-apollo.md
@@ -0,0 +1,9 @@
+# Apollo
+
+Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
+
+Free Content
+Apollo Website
+Official Docs
+Official YouTube Channel
+GraphQL With React Tutorial - Apollo Client
diff --git a/content/roadmaps/101-backend/content/119-graphql/101-relay-modern.md b/content/roadmaps/101-backend/content/119-graphql/101-relay-modern.md
new file mode 100644
index 000000000000..55722ec2e0d0
--- /dev/null
+++ b/content/roadmaps/101-backend/content/119-graphql/101-relay-modern.md
@@ -0,0 +1,7 @@
+# Relay Modern
+
+Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
+
+Free Content
+Official Website
+Introduction to Relay modern
diff --git a/content/roadmaps/101-backend/content/119-graphql/readme.md b/content/roadmaps/101-backend/content/119-graphql/readme.md
new file mode 100644
index 000000000000..83ffa621d17c
--- /dev/null
+++ b/content/roadmaps/101-backend/content/119-graphql/readme.md
@@ -0,0 +1,9 @@
+# Graphql
+
+GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
+
+Free Content
+Introduction to GraphQL
+The Fullstack Tutorial for GraphQL
+GraphQL Tutorials
+GraphQL Course for Beginners
diff --git a/content/roadmaps/101-backend/content/120-graph-databases/100-neo4j.md b/content/roadmaps/101-backend/content/120-graph-databases/100-neo4j.md
new file mode 100644
index 000000000000..42258d939e11
--- /dev/null
+++ b/content/roadmaps/101-backend/content/120-graph-databases/100-neo4j.md
@@ -0,0 +1 @@
+# Neo4j
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/120-graph-databases/readme.md b/content/roadmaps/101-backend/content/120-graph-databases/readme.md
new file mode 100644
index 000000000000..54a5a164054a
--- /dev/null
+++ b/content/roadmaps/101-backend/content/120-graph-databases/readme.md
@@ -0,0 +1 @@
+# Graph databases
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/121-web-sockets.md b/content/roadmaps/101-backend/content/121-web-sockets.md
new file mode 100644
index 000000000000..e787ac5b6313
--- /dev/null
+++ b/content/roadmaps/101-backend/content/121-web-sockets.md
@@ -0,0 +1,7 @@
+# Web sockets
+
+Web sockets are defined as a two-way communication between the servers and the clients, which mean both the parties, communicate and exchange data at the same time. This protocol defines a full duplex communication from the ground up. Web sockets take a step forward in bringing desktop rich functionalities to the web browsers.
+
+Free Content
+Introduction to WebSockets
+A Beginner's Guide to WebSockets
diff --git a/content/roadmaps/101-backend/content/122-web-servers/100-nginx.md b/content/roadmaps/101-backend/content/122-web-servers/100-nginx.md
new file mode 100644
index 000000000000..a99b98d97c6b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/122-web-servers/100-nginx.md
@@ -0,0 +1,7 @@
+# Nginx
+
+NGINX is a powerful web server and uses a non-threaded, event-driven architecture that enables it to outperform Apache if configured correctly. It can also do other important things, such as load balancing, HTTP caching, or be used as a reverse proxy.
+
+Free Content
+Official Website
+NGINX Explained in 100 Seconds
diff --git a/content/roadmaps/101-backend/content/122-web-servers/101-apache.md b/content/roadmaps/101-backend/content/122-web-servers/101-apache.md
new file mode 100644
index 000000000000..eb7663c69dcf
--- /dev/null
+++ b/content/roadmaps/101-backend/content/122-web-servers/101-apache.md
@@ -0,0 +1,7 @@
+# Apache
+
+Apache is a free, open-source HTTP server, available on many operating systems, but mainly used on Linux distributions. It is one of the most popular options for web developers, as it accounts for over 30% of all the websites, as estimated by W3Techs.
+
+Free Content
+Apache Server Website
+What is Apache Web Server?
diff --git a/content/roadmaps/101-backend/content/122-web-servers/102-caddy.md b/content/roadmaps/101-backend/content/122-web-servers/102-caddy.md
new file mode 100644
index 000000000000..594f8aaf7caa
--- /dev/null
+++ b/content/roadmaps/101-backend/content/122-web-servers/102-caddy.md
@@ -0,0 +1,7 @@
+# Caddy
+
+The Caddy web server is an extensible, cross-platform, open-source web server written in Go. It has some really nice features like automatic SSL/HTTPs and a really easy configuration file.
+
+Free Content
+Official Website
+Getting started with Caddy the HTTPS Web Server from scratch
diff --git a/content/roadmaps/101-backend/content/122-web-servers/103-ms-iis.md b/content/roadmaps/101-backend/content/122-web-servers/103-ms-iis.md
new file mode 100644
index 000000000000..aaf3f8987ace
--- /dev/null
+++ b/content/roadmaps/101-backend/content/122-web-servers/103-ms-iis.md
@@ -0,0 +1,7 @@
+# MS IIS
+
+Internet Information Services (IIS) for Windows® Server is a flexible, secure and manageable Web server for hosting anything on the Web.
+
+Free Content
+Official Website
+Learn Windows Web Server IIS
diff --git a/content/roadmaps/101-backend/content/122-web-servers/readme.md b/content/roadmaps/101-backend/content/122-web-servers/readme.md
new file mode 100644
index 000000000000..0ad9cf0c899b
--- /dev/null
+++ b/content/roadmaps/101-backend/content/122-web-servers/readme.md
@@ -0,0 +1 @@
+# Web servers
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies.md b/content/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies.md
new file mode 100644
index 000000000000..14dcc962a5bd
--- /dev/null
+++ b/content/roadmaps/101-backend/content/123-scalability/100-mitigation-strategies.md
@@ -0,0 +1 @@
+# Mitigation strategies
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/123-scalability/101-instrumentation-monitoring-telemetry.md b/content/roadmaps/101-backend/content/123-scalability/101-instrumentation-monitoring-telemetry.md
new file mode 100644
index 000000000000..742080177fde
--- /dev/null
+++ b/content/roadmaps/101-backend/content/123-scalability/101-instrumentation-monitoring-telemetry.md
@@ -0,0 +1 @@
+# Instrumentation monitoring telemetry
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/123-scalability/102-migration-strategies.md b/content/roadmaps/101-backend/content/123-scalability/102-migration-strategies.md
new file mode 100644
index 000000000000..d3bc035a1549
--- /dev/null
+++ b/content/roadmaps/101-backend/content/123-scalability/102-migration-strategies.md
@@ -0,0 +1 @@
+# Migration strategies
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/123-scalability/103-horizontal-vertial-scaling.md b/content/roadmaps/101-backend/content/123-scalability/103-horizontal-vertial-scaling.md
new file mode 100644
index 000000000000..5acf6230b64f
--- /dev/null
+++ b/content/roadmaps/101-backend/content/123-scalability/103-horizontal-vertial-scaling.md
@@ -0,0 +1,10 @@
+# Horizontal/Vertical Scaling
+
+Horizontal scaling is a change in the **number** of a resource. For example, increasing the number of virtual machines processing messages in a queue. Vertical scaling is a change in the **size/power** of a resource. For example, increasing the memory or disk space available to a machine. Scaling can be applied to databases, cloud resources, and other areas of computing.
+
+Free Content
+
+System Design Basics: Horizontal vs. Vertical Scaling
+System Design 101
+Horizontal vs Vertical Scaling
+Scaling In Databases
diff --git a/content/roadmaps/101-backend/content/123-scalability/104-observability.md b/content/roadmaps/101-backend/content/123-scalability/104-observability.md
new file mode 100644
index 000000000000..c5ac4a2fa42e
--- /dev/null
+++ b/content/roadmaps/101-backend/content/123-scalability/104-observability.md
@@ -0,0 +1 @@
+# Observability
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/123-scalability/readme.md b/content/roadmaps/101-backend/content/123-scalability/readme.md
new file mode 100644
index 000000000000..d6ca5f195867
--- /dev/null
+++ b/content/roadmaps/101-backend/content/123-scalability/readme.md
@@ -0,0 +1 @@
+# Scalability
\ No newline at end of file
diff --git a/content/roadmaps/101-backend/content/readme.md b/content/roadmaps/101-backend/content/readme.md
new file mode 100644
index 000000000000..4e768b56d84e
--- /dev/null
+++ b/content/roadmaps/101-backend/content/readme.md
@@ -0,0 +1 @@
+#
\ No newline at end of file
diff --git a/content/roadmaps/2-backend/meta.json b/content/roadmaps/101-backend/meta.json
similarity index 68%
rename from content/roadmaps/2-backend/meta.json
rename to content/roadmaps/101-backend/meta.json
index 076cd855e969..1986ddd802fe 100644
--- a/content/roadmaps/2-backend/meta.json
+++ b/content/roadmaps/101-backend/meta.json
@@ -1,10 +1,13 @@
{
"seo": {
- "title": "Learn to become a modern backend developer",
- "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "title": "Backend Developer Roadmap: Learn to become a modern backend developer",
+ "description": "Learn to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
"keywords": [
+ "backend roadmap 2022",
+ "backend developer roadmap 2022",
"guide to becoming a developer",
"guide to becoming a backend developer",
+ "backend roadmap",
"backend developer",
"backend engineer",
"backend skills",
@@ -27,15 +30,17 @@
]
},
"title": "Backend Developer",
- "description": "Step by step guide to becoming a modern backend developer in 2021",
+ "description": "Step by step guide to becoming a modern backend developer in 2022",
"featuredTitle": "Backend",
- "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
+ "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
"featured": true,
- "imagePath": "/roadmaps/backend.png",
+ "imageUrl": "/roadmaps/backend.png",
+ "jsonUrl": "/project/backend.json",
"resourcesPath": "./resources.md",
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
- "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap"
-}
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
+ "contentPathsFilePath": "./content-paths.json"
+}
\ No newline at end of file
diff --git a/content/roadmaps/2-backend/resources.md b/content/roadmaps/101-backend/resources.md
similarity index 100%
rename from content/roadmaps/2-backend/resources.md
rename to content/roadmaps/101-backend/resources.md
diff --git a/content/roadmaps/3-devops/meta.json b/content/roadmaps/102-devops/meta.json
similarity index 85%
rename from content/roadmaps/3-devops/meta.json
rename to content/roadmaps/102-devops/meta.json
index 238876eeafb2..7584ffb33639 100644
--- a/content/roadmaps/3-devops/meta.json
+++ b/content/roadmaps/102-devops/meta.json
@@ -3,6 +3,9 @@
"title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
"description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [
+ "devops roadmap 2022",
+ "sre roadmap 2022",
+ "operations roadmap 2022",
"guide to becoming a devops enginer",
"devops roadmap",
"sre roadmap",
@@ -21,11 +24,12 @@
]
},
"title": "DevOps Roadmap",
- "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
+ "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
"featuredTitle": "DevOps",
- "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
+ "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
"featured": true,
- "imagePath": "/roadmaps/devops.png",
+ "imageUrl": "/roadmaps/devops.png",
+ "jsonUrl": "/project/devops.json",
"resourcesPath": "./resources.md",
"versions": [
"latest",
diff --git a/content/roadmaps/3-devops/resources.md b/content/roadmaps/102-devops/resources.md
similarity index 100%
rename from content/roadmaps/3-devops/resources.md
rename to content/roadmaps/102-devops/resources.md
diff --git a/content/roadmaps/4-react/landscape.md b/content/roadmaps/103-react/landscape.md
similarity index 89%
rename from content/roadmaps/4-react/landscape.md
rename to content/roadmaps/103-react/landscape.md
index 444f08245699..b2f7aa2e7dad 100644
--- a/content/roadmaps/4-react/landscape.md
+++ b/content/roadmaps/103-react/landscape.md
@@ -4,4 +4,4 @@ Also, please note that the list below is exhaustive, and the items are listed in
-Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/roadmap.sh/issues/new) and incorporate them in the picture if suitable.
+Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the picture if suitable.
diff --git a/content/roadmaps/4-react/meta.json b/content/roadmaps/103-react/meta.json
similarity index 86%
rename from content/roadmaps/4-react/meta.json
rename to content/roadmaps/103-react/meta.json
index 4d5e28212864..d0a865de2960 100644
--- a/content/roadmaps/4-react/meta.json
+++ b/content/roadmaps/103-react/meta.json
@@ -3,6 +3,8 @@
"title": "React Developer Roadmap: Learn to become a React developer",
"description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [
+ "react roadmap 2022",
+ "react developer roadmap 2022",
"guide to becoming a react developer",
"react developer roadmap",
"react roadmap",
@@ -17,14 +19,15 @@
]
},
"title": "React Developer",
- "description": "Everything that is there to learn about React and the ecosystem in 2021.",
+ "description": "Everything that is there to learn about React and the ecosystem in 2022.",
"featuredTitle": "React",
- "featuredDescription": "Step by step guide to become a React Developer in 2021",
+ "featuredDescription": "Step by step guide to become a React Developer in 2022",
"isTextHeavy": false,
"isCommunity": false,
"featured": true,
- "contentPath": "./landscape.md",
+ "landingPath": "./landscape.md",
"resourcesPath": "./resources.md",
+ "jsonUrl": "/project/react.json",
"versions": [
"latest",
"2018",
diff --git a/content/roadmaps/4-react/resources.md b/content/roadmaps/103-react/resources.md
similarity index 100%
rename from content/roadmaps/4-react/resources.md
rename to content/roadmaps/103-react/resources.md
diff --git a/content/roadmaps/104-angular/landscape.md b/content/roadmaps/104-angular/landscape.md
new file mode 100644
index 000000000000..53af9330631f
--- /dev/null
+++ b/content/roadmaps/104-angular/landscape.md
@@ -0,0 +1,7 @@
+The intent of this guide is to give you an idea about the Angular ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that.
+
+Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.
+
+
+
+Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the picture if suitable.
diff --git a/content/roadmaps/104-angular/meta.json b/content/roadmaps/104-angular/meta.json
new file mode 100644
index 000000000000..32a35a48f65c
--- /dev/null
+++ b/content/roadmaps/104-angular/meta.json
@@ -0,0 +1,39 @@
+{
+ "seo": {
+ "title": "Angular Developer Roadmap: Learn to become a Angular developer",
+ "description": "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.",
+ "keywords": [
+ "guide to becoming a angular developer",
+ "angular developer roadmap",
+ "angular roadmap",
+ "become angular developer",
+ "angular developer skills",
+ "angular skills test",
+ "skills for angular development",
+ "learn angular development",
+ "what is angular",
+ "angular quiz",
+ "angular interview questions"
+ ]
+ },
+ "title": "Angular Developer",
+ "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
+ "featuredTitle": "Angular",
+ "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
+ "isTextHeavy": false,
+ "isCommunity": false,
+ "featured": true,
+ "jsonUrl": "/project/angular.json",
+ "landingPath": "./landscape.md",
+ "resourcesPath": "./resources.md",
+ "versions": [
+ "latest",
+ "2018",
+ "2017"
+ ],
+ "author": {
+ "name": "Kamran Ahmed",
+ "url": "https://twitter.com/kamranahmedse"
+ },
+ "pdfUrl": "https://kamranahmedse.gumroad.com/l/angular-roadmap"
+}
diff --git a/content/roadmaps/5-postgresql-dba/resources.md b/content/roadmaps/104-angular/resources.md
similarity index 100%
rename from content/roadmaps/5-postgresql-dba/resources.md
rename to content/roadmaps/104-angular/resources.md
diff --git a/content/roadmaps/6-android/landscape.md b/content/roadmaps/105-android/landscape.md
similarity index 96%
rename from content/roadmaps/6-android/landscape.md
rename to content/roadmaps/105-android/landscape.md
index 6bc0baff59cd..1c6104fe1f62 100644
--- a/content/roadmaps/6-android/landscape.md
+++ b/content/roadmaps/105-android/landscape.md
@@ -1,4 +1,4 @@
-The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/roadmap.sh/issues/new) and incorporate them in the roadmap if suitable.
+The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the roadmap if suitable.
There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where [flutter](https://flutter.dev/), [react-native](https://reactnative.dev/), or [NativeScript](https://www.nativescript.org/) are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is [react-native](https://reactnative.dev) and I would recommend you to checkout the [Frontend Developer Roadmap](/frontend).
@@ -76,7 +76,7 @@ I would highly recommend watching [this free course](https://www.udacity.com/cou
That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!
-For any suggestions, improvements and feedback, feel free to [submit an issue](https://github.com/kamranahmedse/roadmap.sh) or reach out to me on twitter [@kamranahmedse](https://twitter.com/kamranahmedse).
+For any suggestions, improvements and feedback, feel free to [submit an issue](https://github.com/kamranahmedse/developer-roadmap) or reach out to me on twitter [@kamranahmedse](https://twitter.com/kamranahmedse).
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+