mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-02 05:42:41 +02:00
Remove prism file
This commit is contained in:
@@ -1,7 +1,5 @@
|
|||||||
---
|
---
|
||||||
import '../styles/prism.css';
|
|
||||||
import DownloadPopup from './DownloadPopup.astro';
|
import DownloadPopup from './DownloadPopup.astro';
|
||||||
import ShareIcons from './ShareIcons.astro';
|
|
||||||
import SubscribePopup from './SubscribePopup.astro';
|
import SubscribePopup from './SubscribePopup.astro';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
@@ -2,7 +2,6 @@
|
|||||||
import GuideHeader from '../../components/GuideHeader.astro';
|
import GuideHeader from '../../components/GuideHeader.astro';
|
||||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
import { getAllGuides, GuideFileType } from '../../lib/guide';
|
import { getAllGuides, GuideFileType } from '../../lib/guide';
|
||||||
import '../../styles/prism.css';
|
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
guide: GuideFileType;
|
guide: GuideFileType;
|
||||||
|
@@ -2,125 +2,98 @@
|
|||||||
import Answer from '../../components/FAQs/Answer.astro';
|
import Answer from '../../components/FAQs/Answer.astro';
|
||||||
import FAQs from '../../components/FAQs/FAQs.astro';
|
import FAQs from '../../components/FAQs/FAQs.astro';
|
||||||
import Question from '../../components/FAQs/Question.astro';
|
import Question from '../../components/FAQs/Question.astro';
|
||||||
|
|
||||||
const salaryLink =
|
|
||||||
'https://www.glassdoor.com/Salaries/front-end-developer-salary-SRCH_KO0,19.htm';
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<FAQs>
|
<FAQs>
|
||||||
<Question isActive question='What is Frontend Development?'>
|
<Question isActive question='What is Frontend Development?'>
|
||||||
<Answer>
|
<Answer>
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
Front-end development is the devleopment of visual and interactive
|
Front-end development is the devleopment of visual and interactive elements of a website that users interact
|
||||||
elements of a website that users interact with directly. It's a
|
with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the
|
||||||
combination of HTML, CSS and JavaScript, where HTML provides the
|
styling and layout, and JavaScript the dynamic behaviour and interactivity.
|
||||||
structure, CSS the styling and layout, and JavaScript the dynamic
|
|
||||||
behaviour and interactivity.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
As a front-end developer, you'll be responsible for creating the user
|
As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks
|
||||||
interface of a website, to ensure it looks good and is easy to use, with
|
good and is easy to use, with great focus on design principles and user experience. You'll be working closely
|
||||||
great focus on design principles and user experience. You'll be working
|
with designers, back-end developers, and project managers to make sure the final product meets the client's
|
||||||
closely with designers, back-end developers, and project managers to
|
needs and provides the best possible experience for the end-users.
|
||||||
make sure the final product meets the client's needs and provides the
|
|
||||||
best possible experience for the end-users.
|
|
||||||
</p>
|
</p>
|
||||||
</Answer>
|
</Answer>
|
||||||
</Question>
|
</Question>
|
||||||
<Question question='What are the job titles of a Frontend Developer?'>
|
<Question question='What are the job titles of a Frontend Developer?'>
|
||||||
<Answer>
|
<Answer>
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
Front-end developers are also known as front-end engineers, front-end
|
Front-end developers are also known as front-end engineers, front-end web developers, JavaScript Developers,
|
||||||
web developers, JavaScript Developers, HTML/CSS Developer, front-end web
|
HTML/CSS Developer, front-end web designers, and front-end web architects.
|
||||||
designers, and front-end web architects.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Each of these roles mostly encompass the same front-end development
|
Each of these roles mostly encompass the same front-end development skills but require different levels of
|
||||||
skills but require different levels of expertise in different front-end
|
expertise in different front-end development skills. It's better to look at the job description to get an idea
|
||||||
development skills. It's better to look at the job description to get an
|
about the job requirements.
|
||||||
idea about the job requirements.
|
|
||||||
</p>
|
</p>
|
||||||
</Answer>
|
</Answer>
|
||||||
</Question>
|
</Question>
|
||||||
<Question question='How to become a Frontend Developer?'>
|
<Question question='How to become a Frontend Developer?'>
|
||||||
<Answer>
|
<Answer>
|
||||||
<p>
|
<p>
|
||||||
Start with learning HTML and CSS; don't wait to fully master these and
|
Start with learning HTML and CSS; don't wait to fully master these and start building simple projects as soon as
|
||||||
start building simple projects as soon as possible. You could try
|
possible. You could try rebuilding the frontend of your favorite websites using HTML and CSS to start with. Do
|
||||||
rebuilding the frontend of your favorite websites using HTML and CSS to
|
as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS,
|
||||||
start with. Do as many of these projects as possible as you keep
|
start learning some basic JavaScript (DOM manipulation, making AJAX calls etc) and learn how to add
|
||||||
learning. Once you are somewhat comfortable with HTML and CSS, start
|
interactivity to your websites. While you are at it learn some basics of Git and GitHub. At this point you
|
||||||
learning some basic JavaScript (DOM manipulation, making AJAX calls etc)
|
should be able to get an entry level frontend development job. Keep revisiting this roadmap and try to fill the
|
||||||
and learn how to add interactivity to your websites. While you are at it
|
gaps in your knowledge.
|
||||||
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>
|
</p>
|
||||||
</Answer>
|
</Answer>
|
||||||
</Question>
|
</Question>
|
||||||
<Question question='How long does it take to become a Frontend Developer?'>
|
<Question question='How long does it take to become a Frontend Developer?'>
|
||||||
<Answer>
|
<Answer>
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
The amount of time it takes to become a frontend developer can vary
|
The amount of time it takes to become a frontend developer can vary depending on several factors, such as your
|
||||||
depending on several factors, such as your learning pace, previous
|
learning pace, previous experience and the amount of time you are able to dedicate to learning.
|
||||||
experience and the amount of time you are able to dedicate to learning.
|
|
||||||
</p>
|
</p>
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
However, to give you a rough idea, if you are a complete beginner, it
|
However, to give you a rough idea, if you are a complete beginner, it could take you anywhere from 3 to 6 months
|
||||||
could take you anywhere from 3 to 6 months to get a job as an entry
|
to get a job as an entry level frontend developer. If you are already familiar with some of the frontend
|
||||||
level frontend developer. If you are already familiar with some of the
|
technologies, it could take you anywhere from 1 to 3 months. What's important is to practice as much you can
|
||||||
frontend technologies, it could take you anywhere from 1 to 3 months.
|
while you are learning i.e. by building as many projects as you can. You should also participate in online
|
||||||
What's important is to practice as much you can while you are learning
|
communities and ask for feedback from more experienced developers to accelerate your learning process.
|
||||||
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>
|
</p>
|
||||||
</Answer>
|
</Answer>
|
||||||
</Question>
|
</Question>
|
||||||
<Question question='What are the Frontend Developer salaries?'>
|
<Question question='What are the Frontend Developer salaries?'>
|
||||||
<Answer>
|
<Answer>
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
Frontend developer salaries can vary depending on factors such as
|
Frontend developer salaries can vary depending on factors such as location, experience, and company size.
|
||||||
location, experience, and company size. According to data from
|
According to data from Glassdoor, the average base salary for a frontend developer in the United States is
|
||||||
Glassdoor, the average base salary for a frontend developer in the
|
around $80,000 per year. However, this number can vary greatly depending on location, with the highest-paying
|
||||||
United States is around $80,000 per year. However, this number can vary
|
cities such as San Francisco, Seattle, and New York having an average salary of $110,000 to $130,000.
|
||||||
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>
|
||||||
|
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
It's important to keep in mind that these are just averages, and
|
It's important to keep in mind that these are just averages, and salaries can vary greatly depending on factors
|
||||||
salaries can vary greatly depending on factors such as experience level,
|
such as experience level, specific skills, and the company you work for. With more experience and specific
|
||||||
specific skills, and the company you work for. With more experience and
|
skills you can expect to earn more.
|
||||||
specific skills you can expect to earn more.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
It is worth looking at a range of resources, including salary surveys,
|
It is worth looking at a range of resources, including salary surveys, and job boards to get a general
|
||||||
and job boards to get a general understanding of the current market in
|
understanding of the current market in your location and experience level. Also try reaching out to other
|
||||||
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.
|
||||||
professionals in the field and getting an understanding of their own
|
|
||||||
experience and salary ranges.
|
|
||||||
</p>
|
</p>
|
||||||
</Answer>
|
</Answer>
|
||||||
</Question>
|
</Question>
|
||||||
<Question
|
<Question question='Should I learn everything listed on the Frontend Roadmap?'>
|
||||||
question='Should I learn everything listed on the Frontend Roadmap?'
|
|
||||||
>
|
|
||||||
<Answer>
|
<Answer>
|
||||||
<p class='mb-3'>
|
<p class='mb-3'>
|
||||||
This roadmap contains everything that you might encounter while working
|
This roadmap contains everything that you might encounter while working as a Frontend Developer. You may not
|
||||||
as a Frontend Developer. You may not need everything listed on this
|
need everything listed on this roadmap to get into the industry; every job is different and most of the jobs
|
||||||
roadmap to get into the industry; every job is different and most of the
|
will require a subset of the items on the roadmap. However, knowing what you don't know is as important as
|
||||||
jobs will require a subset of the items on the roadmap. However, knowing
|
knowing things, so you can use this roadmap to get an idea of what you are missing as well.
|
||||||
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>
|
||||||
<p>
|
<p>
|
||||||
If you are a beginner who is just getting started, don't feel
|
If you are a beginner who is just getting started, don't feel overwhelmed by looking at this roadmap. Look at
|
||||||
overwhelmed by looking at this roadmap. Look at the answer to the FAQ
|
the answer to the FAQ "How to become a Frontend Developer?"
|
||||||
"How to become a Frontend Developer?"
|
|
||||||
</p>
|
</p>
|
||||||
</Answer>
|
</Answer>
|
||||||
</Question>
|
</Question>
|
||||||
|
@@ -11,7 +11,7 @@ Some of the most commonly used annotations in Spring Boot include:
|
|||||||
- `@Enable`
|
- `@Enable`
|
||||||
- `@Configuration`
|
- `@Configuration`
|
||||||
- `@Bean`
|
- `@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.
|
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:
|
Visit the following link for more details on annotations in spring boot:
|
||||||
|
@@ -9,8 +9,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.prose ul li code {
|
.prose ul li code {
|
||||||
background: transparent;
|
background: #1e1e3f;
|
||||||
border: 1px solid #EAEAEA;
|
color: #9efeff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-stripes {
|
.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