github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove prism file

Browse Source
faqs/frontend
Kamran Ahmed 2 years ago
parent 4b681c6317
commit dca9eb32cd
6 changed files with 46 additions and 289 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/MarkdownRoadmap.astro
  2. 1
      src/pages/guides/[guideId].astro
  3. 113
      src/roadmaps/frontend/faqs.astro
  4. 2
      src/roadmaps/spring-boot/content/100-spring-core/106-annotations.md
  5. 4
      src/styles/global.css
  6. 213
      src/styles/prism.css

2
src/components/MarkdownRoadmap.astro
Unescape View File

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

1
src/pages/guides/[guideId].astro
Unescape View File

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

113
src/roadmaps/frontend/faqs.astro
Unescape View File

@ -2,125 +2,98 @@
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';
---
<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>

2
src/roadmaps/spring-boot/content/100-spring-core/106-annotations.md
Unescape View File

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

4
src/styles/global.css
Unescape View File

@ -9,8 +9,8 @@
}
.prose ul li code {
background: transparent;
border: 1px solid #EAEAEA;
background: #1e1e3f;
color: #9efeff;
}
.bg-stripes {

213
src/styles/prism.css
Unescape View File

@ -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: '';
}
Write Preview
Loading…
Cancel
Save