mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-16 20:01:43 +08:00
Compare commits
10 Commits
content/sp
...
faqs/front
| Author | SHA1 | Date | |
|---|---|---|---|
|
3a4e78645c | ||
|
|
6922fd826f | ||
|
|
ec29e1836e | ||
|
|
dca9eb32cd | ||
|
|
4b681c6317 | ||
|
|
9c24ff23e3 | ||
|
|
cdc87a99e1 | ||
|
|
ea16e99598 | ||
|
|
ba86e8a6b1 | ||
|
5f23d4c7eb |
@@ -9,6 +9,9 @@ import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
|
||||
export default defineConfig({
|
||||
site: 'https://roadmap.sh',
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: 'dracula'
|
||||
},
|
||||
rehypePlugins: [
|
||||
[
|
||||
rehypeExternalLinks,
|
||||
|
||||
BIN
public/images/ambassador-img.png
Normal file
BIN
public/images/ambassador-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
@@ -1,7 +1,5 @@
|
||||
---
|
||||
import '../styles/prism.css';
|
||||
import DownloadPopup from './DownloadPopup.astro';
|
||||
import ShareIcons from './ShareIcons.astro';
|
||||
import SubscribePopup from './SubscribePopup.astro';
|
||||
|
||||
export interface Props {
|
||||
|
||||
@@ -16,6 +16,7 @@ export interface Props {
|
||||
noIndex?: boolean;
|
||||
permalink?: string;
|
||||
sponsor?: SponsorType;
|
||||
jsonLd?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -25,14 +26,13 @@ const {
|
||||
noIndex = false,
|
||||
permalink = '',
|
||||
sponsor,
|
||||
jsonLd,
|
||||
} = Astro.props;
|
||||
|
||||
// Remove trailing slashes to consider the page as canonical
|
||||
const currentPageAbsoluteUrl = `https://roadmap.sh${permalink}`;
|
||||
|
||||
const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${
|
||||
import.meta.env.GITHUB_SHA
|
||||
}`;
|
||||
const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${import.meta.env.GITHUB_SHA}`;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -69,43 +69,23 @@ const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${
|
||||
|
||||
<meta name='mobile-web-app-capable' content='yes' />
|
||||
<meta name='apple-mobile-web-app-capable' content='yes' />
|
||||
<meta
|
||||
name='apple-mobile-web-app-status-bar-style'
|
||||
content='black-translucent'
|
||||
/>
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
|
||||
<meta name='apple-mobile-web-app-title' content='roadmap.sh' />
|
||||
<meta name='application-name' content='roadmap.sh' />
|
||||
|
||||
<link
|
||||
rel='apple-touch-icon'
|
||||
sizes='180x180'
|
||||
href='/manifest/apple-touch-icon.png'
|
||||
/>
|
||||
<link rel='apple-touch-icon' sizes='180x180' href='/manifest/apple-touch-icon.png' />
|
||||
<meta name='msapplication-TileColor' content='#101010' />
|
||||
<meta name='theme-color' content='#848a9a' />
|
||||
|
||||
<link rel='manifest' href='/manifest/manifest.json' />
|
||||
<link
|
||||
rel='icon'
|
||||
type='image/png'
|
||||
sizes='32x32'
|
||||
href='/manifest/icon32.png'
|
||||
/>
|
||||
<link
|
||||
rel='icon'
|
||||
type='image/png'
|
||||
sizes='16x16'
|
||||
href='/manifest/icon16.png'
|
||||
/>
|
||||
<link
|
||||
rel='shortcut icon'
|
||||
href='/manifest/favicon.ico'
|
||||
type='image/x-icon'
|
||||
/>
|
||||
<link rel='icon' type='image/png' sizes='32x32' href='/manifest/icon32.png' />
|
||||
<link rel='icon' type='image/png' sizes='16x16' href='/manifest/icon16.png' />
|
||||
<link rel='shortcut icon' href='/manifest/favicon.ico' type='image/x-icon' />
|
||||
|
||||
<link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
|
||||
|
||||
<slot name='after-header' />
|
||||
{jsonLd && <script type='application/ld+json' set:html={JSON.stringify(jsonLd)} />}
|
||||
</head>
|
||||
<body>
|
||||
<YouTubeBanner />
|
||||
|
||||
40
src/lib/jsonld-schema.ts
Normal file
40
src/lib/jsonld-schema.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
type ArticleSchemaProps = {
|
||||
url: string;
|
||||
headline: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
datePublished: string;
|
||||
dateModified: string;
|
||||
};
|
||||
|
||||
export function generateArticleSchema(article: ArticleSchemaProps) {
|
||||
const { url, headline, description, imageUrl, datePublished, dateModified } =
|
||||
article;
|
||||
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'BlogPosting',
|
||||
mainEntityOfPage: {
|
||||
'@type': 'WebPage',
|
||||
'@id': url,
|
||||
},
|
||||
headline: headline,
|
||||
description: description,
|
||||
image: imageUrl,
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
name: 'Kamran Ahmed',
|
||||
url: 'https://twitter.com/kamranahmedse',
|
||||
},
|
||||
publisher: {
|
||||
'@type': 'Organization',
|
||||
name: 'roadmap.sh',
|
||||
logo: {
|
||||
'@type': 'ImageObject',
|
||||
url: 'https://roadmap.sh/images/brand-square.png',
|
||||
},
|
||||
},
|
||||
datePublished: datePublished,
|
||||
dateModified: dateModified,
|
||||
};
|
||||
}
|
||||
@@ -22,6 +22,13 @@ export interface RoadmapFrontmatter {
|
||||
description: string;
|
||||
keywords: string[];
|
||||
};
|
||||
schema?: {
|
||||
headline: string;
|
||||
description: string;
|
||||
datePublished: string;
|
||||
dateModified: string;
|
||||
imageUrl: string;
|
||||
};
|
||||
relatedRoadmaps: string[];
|
||||
sitemap: {
|
||||
priority: number;
|
||||
@@ -46,12 +53,9 @@ function roadmapPathToId(filePath: string): string {
|
||||
* @returns string[] Array of roadmap IDs
|
||||
*/
|
||||
export async function getRoadmapIds() {
|
||||
const roadmapFiles = await import.meta.glob<RoadmapFileType>(
|
||||
'/src/roadmaps/*/*.md',
|
||||
{
|
||||
eager: true,
|
||||
}
|
||||
);
|
||||
const roadmapFiles = await import.meta.glob<RoadmapFileType>('/src/roadmaps/*/*.md', {
|
||||
eager: true,
|
||||
});
|
||||
|
||||
return Object.keys(roadmapFiles).map(roadmapPathToId);
|
||||
}
|
||||
@@ -62,15 +66,10 @@ export async function getRoadmapIds() {
|
||||
* @param tag Tag assigned to roadmap
|
||||
* @returns Promisified RoadmapFileType[]
|
||||
*/
|
||||
export async function getRoadmapsByTag(
|
||||
tag: string
|
||||
): Promise<RoadmapFileType[]> {
|
||||
const roadmapFilesMap = await import.meta.glob<RoadmapFileType>(
|
||||
'/src/roadmaps/*/*.md',
|
||||
{
|
||||
eager: true,
|
||||
}
|
||||
);
|
||||
export async function getRoadmapsByTag(tag: string): Promise<RoadmapFileType[]> {
|
||||
const roadmapFilesMap = await import.meta.glob<RoadmapFileType>('/src/roadmaps/*/*.md', {
|
||||
eager: true,
|
||||
});
|
||||
|
||||
const roadmapFiles = Object.values(roadmapFilesMap);
|
||||
const filteredRoadmaps = roadmapFiles
|
||||
@@ -80,7 +79,5 @@ export async function getRoadmapsByTag(
|
||||
id: roadmapPathToId(roadmapFile.file),
|
||||
}));
|
||||
|
||||
return filteredRoadmaps.sort(
|
||||
(a, b) => a.frontmatter.order - b.frontmatter.order
|
||||
);
|
||||
return filteredRoadmaps.sort((a, b) => a.frontmatter.order - b.frontmatter.order);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
|
||||
import FAQs from '../../components/FAQs.astro';
|
||||
import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
|
||||
import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
|
||||
import RoadmapHeader from '../../components/RoadmapHeader.astro';
|
||||
import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { generateArticleSchema } from '../../lib/jsonld-schema';
|
||||
import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
@@ -22,8 +22,21 @@ interface Params extends Record<string, string | undefined> {
|
||||
|
||||
const { roadmapId } = Astro.params as Params;
|
||||
const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`);
|
||||
const questions = await import (`../../roadmaps/${roadmapId}/faqs.astro`);
|
||||
const questions = await import(`../../roadmaps/${roadmapId}/faqs.astro`);
|
||||
const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
|
||||
|
||||
let articleSchema;
|
||||
if (roadmapData.schema) {
|
||||
const roadmapSchema = roadmapData.schema;
|
||||
articleSchema = generateArticleSchema({
|
||||
url: `https://roadmap.sh/${roadmapId}`,
|
||||
headline: roadmapSchema.headline,
|
||||
description: roadmapSchema.description,
|
||||
datePublished: roadmapSchema.datePublished,
|
||||
dateModified: roadmapSchema.dateModified,
|
||||
imageUrl: roadmapSchema.imageUrl,
|
||||
});
|
||||
}
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
@@ -33,6 +46,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
|
||||
keywords={roadmapData.seo.keywords}
|
||||
sponsor={roadmapData.sponsor}
|
||||
noIndex={roadmapData.isUpcoming}
|
||||
jsonLd={articleSchema}
|
||||
>
|
||||
<RoadmapHeader
|
||||
description={roadmapData.description}
|
||||
@@ -55,10 +69,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
|
||||
|
||||
{
|
||||
!roadmapData.isUpcoming && !roadmapData.jsonUrl && (
|
||||
<MarkdownRoadmap
|
||||
roadmapId={roadmapId}
|
||||
description={roadmapData.description}
|
||||
>
|
||||
<MarkdownRoadmap roadmapId={roadmapId} description={roadmapData.description}>
|
||||
<roadmapFile.Content />
|
||||
</MarkdownRoadmap>
|
||||
)
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import GuideHeader from '../../components/GuideHeader.astro';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { getAllGuides, GuideFileType } from '../../lib/guide';
|
||||
import '../../styles/prism.css';
|
||||
|
||||
export interface Props {
|
||||
guide: GuideFileType;
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import VideoHeader from '../../components/VideoHeader.astro';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { getAllVideos, VideoFileType } from '../../lib/video';
|
||||
import '../../styles/prism.css';
|
||||
|
||||
export interface Props {
|
||||
video: VideoFileType;
|
||||
|
||||
@@ -10,6 +10,22 @@ hasTopics: true
|
||||
dimensions:
|
||||
width: 968
|
||||
height: 2840.4
|
||||
sponsor:
|
||||
expiryDate: "2023-02-02"
|
||||
url: "https://www.getambassador.io/api-gateway-to-success?utm_source=roadmap-sh&utm_medium=ebook&utm_campaign=edgestack-guide"
|
||||
title: "API Gateways"
|
||||
imageUrl: "/images/ambassador-img.png"
|
||||
description: "Learn about the benefits and challenges of using API Gateway in cloud native environments."
|
||||
event:
|
||||
category: "SponsorClick"
|
||||
action: "Ambassador Redirect"
|
||||
label: "Clicked Ambassador Link"
|
||||
schema:
|
||||
headline: "Backend Developer Roadmap"
|
||||
description: "Learn how to become a Backend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."
|
||||
imageUrl: "https://roadmap.sh/roadmaps/backend.png"
|
||||
datePublished: "2023-01-05"
|
||||
dateModified: "2023-01-20"
|
||||
seo:
|
||||
title: "Backend Developer Roadmap"
|
||||
description: "Learn to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development."
|
||||
|
||||
@@ -3,124 +3,110 @@ import Answer from '../../components/FAQs/Answer.astro';
|
||||
import FAQs from '../../components/FAQs/FAQs.astro';
|
||||
import Question from '../../components/FAQs/Question.astro';
|
||||
|
||||
const salaryLink =
|
||||
'https://www.glassdoor.com/Salaries/front-end-developer-salary-SRCH_KO0,19.htm';
|
||||
const questions = [
|
||||
{
|
||||
question: 'What is Frontend Development?',
|
||||
answer:
|
||||
"Front-end development is the devleopment of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity.",
|
||||
},
|
||||
{
|
||||
question: 'Who is a frontend developer?',
|
||||
answer:
|
||||
"As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks good and is easy to use, with great focus on design principles and user experience. You'll be working closely with designers, back-end developers, and project managers to make sure the final product meets the client's needs and provides the best possible experience for the end-users.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<FAQs>
|
||||
<Question isActive question='What is Frontend Development?'>
|
||||
<Answer>
|
||||
<p class='mb-3'>
|
||||
Front-end development is the devleopment of visual and interactive
|
||||
elements of a website that users interact with directly. It's a
|
||||
combination of HTML, CSS and JavaScript, where HTML provides the
|
||||
structure, CSS the styling and layout, and JavaScript the dynamic
|
||||
behaviour and interactivity.
|
||||
Front-end development is the devleopment of visual and interactive elements of a website that users interact
|
||||
with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the
|
||||
styling and layout, and JavaScript the dynamic behaviour and interactivity.
|
||||
</p>
|
||||
<p>
|
||||
As a front-end developer, you'll be responsible for creating the user
|
||||
interface of a website, to ensure it looks good and is easy to use, with
|
||||
great focus on design principles and user experience. You'll be working
|
||||
closely with designers, back-end developers, and project managers to
|
||||
make sure the final product meets the client's needs and provides the
|
||||
best possible experience for the end-users.
|
||||
As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks
|
||||
good and is easy to use, with great focus on design principles and user experience. You'll be working closely
|
||||
with designers, back-end developers, and project managers to make sure the final product meets the client's
|
||||
needs and provides the best possible experience for the end-users.
|
||||
</p>
|
||||
</Answer>
|
||||
</Question>
|
||||
<Question question='What are the job titles of a Frontend Developer?'>
|
||||
<Answer>
|
||||
<p class='mb-3'>
|
||||
Front-end developers are also known as front-end engineers, front-end
|
||||
web developers, JavaScript Developers, HTML/CSS Developer, front-end web
|
||||
designers, and front-end web architects.
|
||||
Front-end developers are also known as front-end engineers, front-end web developers, JavaScript Developers,
|
||||
HTML/CSS Developer, front-end web designers, and front-end web architects.
|
||||
</p>
|
||||
<p>
|
||||
Each of these roles mostly encompass the same front-end development
|
||||
skills but require different levels of expertise in different front-end
|
||||
development skills. It's better to look at the job description to get an
|
||||
idea about the job requirements.
|
||||
Each of these roles mostly encompass the same front-end development skills but require different levels of
|
||||
expertise in different front-end development skills. It's better to look at the job description to get an idea
|
||||
about the job requirements.
|
||||
</p>
|
||||
</Answer>
|
||||
</Question>
|
||||
<Question question='How to become a Frontend Developer?'>
|
||||
<Answer>
|
||||
<p>
|
||||
Start with learning HTML and CSS; don't wait to fully master these and
|
||||
start building simple projects as soon as possible. You could try
|
||||
rebuilding the frontend of your favorite websites using HTML and CSS to
|
||||
start with. Do as many of these projects as possible as you keep
|
||||
learning. Once you are somewhat comfortable with HTML and CSS, start
|
||||
learning some basic JavaScript (DOM manipulation, making AJAX calls etc)
|
||||
and learn how to add interactivity to your websites. While you are at it
|
||||
learn some basics of Git and GitHub. At this point you should be able to
|
||||
get an entry level frontend development job. Keep revisiting this
|
||||
roadmap and try to fill the gaps in your knowledge.
|
||||
Start with learning HTML and CSS; don't wait to fully master these and start building simple projects as soon as
|
||||
possible. You could try rebuilding the frontend of your favorite websites using HTML and CSS to start with. Do
|
||||
as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS,
|
||||
start learning some basic JavaScript (DOM manipulation, making AJAX calls etc) and learn how to add
|
||||
interactivity to your websites. While you are at it learn some basics of Git and GitHub. At this point you
|
||||
should be able to get an entry level frontend development job. Keep revisiting this roadmap and try to fill the
|
||||
gaps in your knowledge.
|
||||
</p>
|
||||
</Answer>
|
||||
</Question>
|
||||
<Question question='How long does it take to become a Frontend Developer?'>
|
||||
<Answer>
|
||||
<p class='mb-3'>
|
||||
The amount of time it takes to become a frontend developer can vary
|
||||
depending on several factors, such as your learning pace, previous
|
||||
experience and the amount of time you are able to dedicate to learning.
|
||||
The amount of time it takes to become a frontend developer can vary depending on several factors, such as your
|
||||
learning pace, previous experience and the amount of time you are able to dedicate to learning.
|
||||
</p>
|
||||
<p class='mb-3'>
|
||||
However, to give you a rough idea, if you are a complete beginner, it
|
||||
could take you anywhere from 3 to 6 months to get a job as an entry
|
||||
level frontend developer. If you are already familiar with some of the
|
||||
frontend technologies, it could take you anywhere from 1 to 3 months.
|
||||
What's important is to practice as much you can while you are learning
|
||||
i.e. by building as many projects as you can. You should also
|
||||
participate in online communities and ask for feedback from more
|
||||
experienced developers to accelerate your learning process.
|
||||
However, to give you a rough idea, if you are a complete beginner, it could take you anywhere from 3 to 6 months
|
||||
to get a job as an entry level frontend developer. If you are already familiar with some of the frontend
|
||||
technologies, it could take you anywhere from 1 to 3 months. What's important is to practice as much you can
|
||||
while you are learning i.e. by building as many projects as you can. You should also participate in online
|
||||
communities and ask for feedback from more experienced developers to accelerate your learning process.
|
||||
</p>
|
||||
</Answer>
|
||||
</Question>
|
||||
<Question question='What are the Frontend Developer salaries?'>
|
||||
<Answer>
|
||||
<p class='mb-3'>
|
||||
Frontend developer salaries can vary depending on factors such as
|
||||
location, experience, and company size. According to data from
|
||||
Glassdoor, the average base salary for a frontend developer in the
|
||||
United States is around $80,000 per year. However, this number can vary
|
||||
greatly depending on location, with the highest-paying cities such as
|
||||
San Francisco, Seattle, and New York having an average salary of
|
||||
$110,000 to $130,000.
|
||||
Frontend developer salaries can vary depending on factors such as location, experience, and company size.
|
||||
According to data from Glassdoor, the average base salary for a frontend developer in the United States is
|
||||
around $80,000 per year. However, this number can vary greatly depending on location, with the highest-paying
|
||||
cities such as San Francisco, Seattle, and New York having an average salary of $110,000 to $130,000.
|
||||
</p>
|
||||
|
||||
<p class='mb-3'>
|
||||
It's important to keep in mind that these are just averages, and
|
||||
salaries can vary greatly depending on factors such as experience level,
|
||||
specific skills, and the company you work for. With more experience and
|
||||
specific skills you can expect to earn more.
|
||||
It's important to keep in mind that these are just averages, and salaries can vary greatly depending on factors
|
||||
such as experience level, specific skills, and the company you work for. With more experience and specific
|
||||
skills you can expect to earn more.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
It is worth looking at a range of resources, including salary surveys,
|
||||
and job boards to get a general understanding of the current market in
|
||||
your location and experience level. Also try reaching out to other
|
||||
professionals in the field and getting an understanding of their own
|
||||
experience and salary ranges.
|
||||
It is worth looking at a range of resources, including salary surveys, and job boards to get a general
|
||||
understanding of the current market in your location and experience level. Also try reaching out to other
|
||||
professionals in the field and getting an understanding of their own experience and salary ranges.
|
||||
</p>
|
||||
</Answer>
|
||||
</Question>
|
||||
<Question
|
||||
question='Should I learn everything listed on the Frontend Roadmap?'
|
||||
>
|
||||
<Question question='Should I learn everything listed on the Frontend Roadmap?'>
|
||||
<Answer>
|
||||
<p class='mb-3'>
|
||||
This roadmap contains everything that you might encounter while working
|
||||
as a Frontend Developer. You may not need everything listed on this
|
||||
roadmap to get into the industry; every job is different and most of the
|
||||
jobs will require a subset of the items on the roadmap. However, knowing
|
||||
what you don't know is as important as knowing things, so you can use
|
||||
this roadmap to get an idea of what you are missing as well.
|
||||
This roadmap contains everything that you might encounter while working as a Frontend Developer. You may not
|
||||
need everything listed on this roadmap to get into the industry; every job is different and most of the jobs
|
||||
will require a subset of the items on the roadmap. However, knowing what you don't know is as important as
|
||||
knowing things, so you can use this roadmap to get an idea of what you are missing as well.
|
||||
</p>
|
||||
<p>
|
||||
If you are a beginner who is just getting started, don't feel
|
||||
overwhelmed by looking at this roadmap. Look at the answer to the FAQ
|
||||
"How to become a Frontend Developer?"
|
||||
If you are a beginner who is just getting started, don't feel overwhelmed by looking at this roadmap. Look at
|
||||
the answer to the FAQ "How to become a Frontend Developer?"
|
||||
</p>
|
||||
</Answer>
|
||||
</Question>
|
||||
|
||||
@@ -10,6 +10,12 @@ hasTopics: true
|
||||
dimensions:
|
||||
width: 968
|
||||
height: 2734.48
|
||||
schema:
|
||||
headline: "Frontend Developer Roadmap"
|
||||
description: "Learn how to become a Frontend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."
|
||||
imageUrl: "https://roadmap.sh/roadmaps/frontend.png"
|
||||
datePublished: "2023-01-05"
|
||||
dateModified: "2023-01-20"
|
||||
seo:
|
||||
title: "Frontend Developer Roadmap"
|
||||
description: "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."
|
||||
|
||||
@@ -11,7 +11,7 @@ Some of the most commonly used annotations in Spring Boot include:
|
||||
- `@Enable`
|
||||
- `@Configuration`
|
||||
- `@Bean`
|
||||
-
|
||||
|
||||
These are just a few examples of the many annotations that are available in Spring Boot. There are many other annotations that you can use to configure various aspects of your application, such as security, caching, and data access.
|
||||
|
||||
Visit the following link for more details on annotations in spring boot:
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Spring boot test annotation
|
||||
# @SpringBootTest annotation
|
||||
|
||||
`@SpringBootTest` This annotation is used to create a fully-configured instance of the Spring ApplicationContext for testing. It can be used to test the application's components, including controllers, services, and repositories, in a real application environment.
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Mockbean Annotation
|
||||
# @MockBean Annotation
|
||||
|
||||
`MockBean` is a Spring annotation that can be used to create a mock implementation of a bean in the Spring application context. When a test is annotated with MockBean, Spring creates a mock implementation of the specified bean and adds it to the application context. The mock bean can then be used to replace the real bean during testing.
|
||||
|
||||
|
||||
@@ -8,8 +8,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.prose ul li code {
|
||||
color: white;
|
||||
.prose ul li code, p code {
|
||||
background: #1e1e3f !important;
|
||||
color: #9efeff !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bg-stripes {
|
||||
|
||||
@@ -1,213 +0,0 @@
|
||||
p > code {
|
||||
background-color: #FAFAFA;
|
||||
border: 1px solid #EAEAEA;
|
||||
}
|
||||
|
||||
div[class*="language-"],
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #9efeff;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-weight: 400;
|
||||
font-size: .95rem;
|
||||
line-height: 1.3;
|
||||
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px #222245;
|
||||
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection,
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
color: inherit;
|
||||
background: #a599e9;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
padding: 2px 4px;
|
||||
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: .875rem;
|
||||
/* background-color: #FAFAFA;
|
||||
border: 1px solid #EAEAEA; */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Code blocks. */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #1e1e3f;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
.token {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.cdata {
|
||||
color: #b362ff;
|
||||
}
|
||||
|
||||
.token.delimiter,
|
||||
.token.keyword,
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule {
|
||||
color: #ff9d00;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.attr-name {
|
||||
color: rgb(255, 180, 84);
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: rgb(255, 98, 140);
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.tag .punctuation,
|
||||
.token.doctype,
|
||||
.token.builtin {
|
||||
color: rgb(255, 157, 0);
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.symbol {
|
||||
color: #6897bb;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #ff628c;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.constant,
|
||||
.token.variable {
|
||||
color: #ff628c;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char {
|
||||
color: #a5ff90;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.attr-value .punctuation {
|
||||
color: #a5c261;
|
||||
}
|
||||
|
||||
.token.attr-value .punctuation:first-child {
|
||||
color: #a9b7c6;
|
||||
}
|
||||
|
||||
.token.url {
|
||||
color: #287bde;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: rgb(250, 208, 0);
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
background: #364135;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
background: #00ff00;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
background: #ff000d;
|
||||
}
|
||||
|
||||
code.language-css .token.property,
|
||||
code.language-css .token.property + .token.punctuation {
|
||||
color: #a9b7c6;
|
||||
}
|
||||
|
||||
code.language-css .token.id {
|
||||
color: #ffc66d;
|
||||
}
|
||||
|
||||
code.language-css .token.selector > .token.class,
|
||||
code.language-css .token.selector > .token.attribute,
|
||||
code.language-css .token.selector > .token.pseudo-class,
|
||||
code.language-css .token.selector > .token.pseudo-element {
|
||||
color: #ffc66d;
|
||||
}
|
||||
|
||||
.token.class-name {
|
||||
color: #fb94ff;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
background: none;
|
||||
}
|
||||
|
||||
pre .line-highlight,
|
||||
pre .line-highlight.line-highlight,
|
||||
pre > code.line-highlight {
|
||||
margin-top: 36px;
|
||||
background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
|
||||
}
|
||||
|
||||
pre .line-highlight:before,
|
||||
pre > code.line-highlight:before,
|
||||
pre .line-highlight[data-end]:after,
|
||||
pre > code.line-highlight[data-end]:after {
|
||||
content: '';
|
||||
}
|
||||
Reference in New Issue
Block a user