From 4a1374c9781583f3156f8a3f8fb8841f02b09dc8 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 10 Jan 2023 15:39:10 +0400 Subject: [PATCH] Add FAQs to the frontend roadmap --- src/components/FAQs/Answer.astro | 3 + src/components/FAQs/FAQs.astro | 13 +++ src/components/FAQs/Question.astro | 42 +++++++ src/icons/down.svg | 4 + src/pages/[roadmapId]/index.astro | 3 + src/roadmaps/android/faqs.astro | 0 src/roadmaps/angular/faqs.astro | 0 src/roadmaps/aspnet-core/faqs.astro | 0 src/roadmaps/backend/faqs.astro | 0 src/roadmaps/blockchain/faqs.astro | 0 src/roadmaps/computer-science/faqs.astro | 0 src/roadmaps/cyber-security/faqs.astro | 0 src/roadmaps/design-system/faqs.astro | 0 src/roadmaps/devops/faqs.astro | 0 src/roadmaps/flutter/faqs.astro | 0 src/roadmaps/frontend/faqs.astro | 105 ++++++++++++++++++ src/roadmaps/golang/faqs.astro | 0 src/roadmaps/graphql/faqs.astro | 0 src/roadmaps/java/faqs.astro | 0 src/roadmaps/javascript/faqs.astro | 0 src/roadmaps/nodejs/faqs.astro | 0 src/roadmaps/postgresql-dba/faqs.astro | 0 src/roadmaps/python/faqs.astro | 0 src/roadmaps/qa/faqs.astro | 0 src/roadmaps/react-native/faqs.astro | 0 src/roadmaps/react/faqs.astro | 0 src/roadmaps/software-architect/faqs.astro | 0 .../software-design-architecture/faqs.astro | 0 src/roadmaps/spring-boot/faqs.astro | 0 src/roadmaps/vue/faqs.astro | 0 30 files changed, 170 insertions(+) create mode 100644 src/components/FAQs/Answer.astro create mode 100644 src/components/FAQs/FAQs.astro create mode 100644 src/components/FAQs/Question.astro create mode 100644 src/icons/down.svg create mode 100644 src/roadmaps/android/faqs.astro create mode 100644 src/roadmaps/angular/faqs.astro create mode 100644 src/roadmaps/aspnet-core/faqs.astro create mode 100644 src/roadmaps/backend/faqs.astro create mode 100644 src/roadmaps/blockchain/faqs.astro create mode 100644 src/roadmaps/computer-science/faqs.astro create mode 100644 src/roadmaps/cyber-security/faqs.astro create mode 100644 src/roadmaps/design-system/faqs.astro create mode 100644 src/roadmaps/devops/faqs.astro create mode 100644 src/roadmaps/flutter/faqs.astro create mode 100644 src/roadmaps/frontend/faqs.astro create mode 100644 src/roadmaps/golang/faqs.astro create mode 100644 src/roadmaps/graphql/faqs.astro create mode 100644 src/roadmaps/java/faqs.astro create mode 100644 src/roadmaps/javascript/faqs.astro create mode 100644 src/roadmaps/nodejs/faqs.astro create mode 100644 src/roadmaps/postgresql-dba/faqs.astro create mode 100644 src/roadmaps/python/faqs.astro create mode 100644 src/roadmaps/qa/faqs.astro create mode 100644 src/roadmaps/react-native/faqs.astro create mode 100644 src/roadmaps/react/faqs.astro create mode 100644 src/roadmaps/software-architect/faqs.astro create mode 100644 src/roadmaps/software-design-architecture/faqs.astro create mode 100644 src/roadmaps/spring-boot/faqs.astro create mode 100644 src/roadmaps/vue/faqs.astro diff --git a/src/components/FAQs/Answer.astro b/src/components/FAQs/Answer.astro new file mode 100644 index 000000000..5cce8e3ae --- /dev/null +++ b/src/components/FAQs/Answer.astro @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/components/FAQs/FAQs.astro b/src/components/FAQs/FAQs.astro new file mode 100644 index 000000000..0f007afa5 --- /dev/null +++ b/src/components/FAQs/FAQs.astro @@ -0,0 +1,13 @@ +
+
+
+

+ Frequently Asked Questions +

+
+ +
+ +
+
+
diff --git a/src/components/FAQs/Question.astro b/src/components/FAQs/Question.astro new file mode 100644 index 000000000..4b47a28c4 --- /dev/null +++ b/src/components/FAQs/Question.astro @@ -0,0 +1,42 @@ +--- +import Icon from '../Icon.astro'; + +export interface Props { + question: string; + isActive?: boolean; +} + +const { question, isActive = false } = Astro.props; +--- + +
+ +
+ +
+
+ + diff --git a/src/icons/down.svg b/src/icons/down.svg new file mode 100644 index 000000000..b72850429 --- /dev/null +++ b/src/icons/down.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro index 4ee6c30c7..60d321dba 100644 --- a/src/pages/[roadmapId]/index.astro +++ b/src/pages/[roadmapId]/index.astro @@ -1,5 +1,6 @@ --- 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'; @@ -21,6 +22,7 @@ interface Params extends Record { const { roadmapId } = Astro.params as Params; const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`); +const questions = await import (`../../roadmaps/${roadmapId}/faqs.astro`); const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter; --- @@ -64,5 +66,6 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter; {roadmapData.isUpcoming && } + diff --git a/src/roadmaps/android/faqs.astro b/src/roadmaps/android/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/angular/faqs.astro b/src/roadmaps/angular/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/aspnet-core/faqs.astro b/src/roadmaps/aspnet-core/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/backend/faqs.astro b/src/roadmaps/backend/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/blockchain/faqs.astro b/src/roadmaps/blockchain/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/computer-science/faqs.astro b/src/roadmaps/computer-science/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/cyber-security/faqs.astro b/src/roadmaps/cyber-security/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/design-system/faqs.astro b/src/roadmaps/design-system/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/devops/faqs.astro b/src/roadmaps/devops/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/flutter/faqs.astro b/src/roadmaps/flutter/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/frontend/faqs.astro b/src/roadmaps/frontend/faqs.astro new file mode 100644 index 000000000..c982ae4cb --- /dev/null +++ b/src/roadmaps/frontend/faqs.astro @@ -0,0 +1,105 @@ +--- +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'; +--- + + + + +

+ Front-end development is the process of building the 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. +

+

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

+ + + + +

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

+

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

+ + + + +

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

+ + + + +

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

+

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

+ + + + +

+ Frontend developer salaries can vary depending on factors such as + location, experience, and company size. According to data from the + website + Glassdoor, the average base salary for a frontend developer in the United States + is around $84,454 per year, although this can range from around $55,000 + to $131,000 or more depending on the individual factors mentioned above. +

+ +

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

+ + + diff --git a/src/roadmaps/golang/faqs.astro b/src/roadmaps/golang/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/graphql/faqs.astro b/src/roadmaps/graphql/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/java/faqs.astro b/src/roadmaps/java/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/javascript/faqs.astro b/src/roadmaps/javascript/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/nodejs/faqs.astro b/src/roadmaps/nodejs/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/postgresql-dba/faqs.astro b/src/roadmaps/postgresql-dba/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/python/faqs.astro b/src/roadmaps/python/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/qa/faqs.astro b/src/roadmaps/qa/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/react-native/faqs.astro b/src/roadmaps/react-native/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/react/faqs.astro b/src/roadmaps/react/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/software-architect/faqs.astro b/src/roadmaps/software-architect/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/software-design-architecture/faqs.astro b/src/roadmaps/software-design-architecture/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/spring-boot/faqs.astro b/src/roadmaps/spring-boot/faqs.astro new file mode 100644 index 000000000..e69de29bb diff --git a/src/roadmaps/vue/faqs.astro b/src/roadmaps/vue/faqs.astro new file mode 100644 index 000000000..e69de29bb