Kamran Ahmed
2 years ago
parent
43df31b312
commit
4a1374c978
30 changed files with 170 additions and 0 deletions
@ -0,0 +1,3 @@ |
||||
<div class='leading-relaxed text-left p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'> |
||||
<slot /> |
||||
</div> |
||||
@ -0,0 +1,13 @@ |
||||
<div class='border-t bg-gray-100'> |
||||
<div class='container'> |
||||
<div class='flex justify-between relative -top-5'> |
||||
<h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'> |
||||
Frequently Asked Questions |
||||
</h1> |
||||
</div> |
||||
|
||||
<div class='flex flex-col gap-1 pb-8'> |
||||
<slot /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,42 @@ |
||||
--- |
||||
import Icon from '../Icon.astro'; |
||||
|
||||
export interface Props { |
||||
question: string; |
||||
isActive?: boolean; |
||||
} |
||||
|
||||
const { question, isActive = false } = Astro.props; |
||||
--- |
||||
|
||||
<div |
||||
class='faq-item bg-white border rounded-md hover:bg-gray-50 border-gray-300' |
||||
> |
||||
<button |
||||
faq-question |
||||
class='flex flex-row justify-between items-center p-3 w-full' |
||||
> |
||||
<span class='text-md text-left font-medium'>{question}</span> |
||||
<Icon icon='down' class='h-6 hidden sm:block text-gray-400' /> |
||||
</button> |
||||
<div class:list={['answer', { hidden: !isActive }]} faq-answer> |
||||
<slot /> |
||||
</div> |
||||
</div> |
||||
|
||||
<script> |
||||
document.querySelectorAll('[faq-question]').forEach((el) => { |
||||
el.addEventListener('click', () => { |
||||
// Hide any other visible answers |
||||
document.querySelectorAll('[faq-answer]').forEach((element) => { |
||||
element.classList.add('hidden'); |
||||
}); |
||||
|
||||
// Show the current answer |
||||
const answer = el.nextElementSibling; |
||||
if (answer) { |
||||
answer.classList.remove('hidden'); |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
|
After Width: | Height: | Size: 433 B |
@ -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'; |
||||
--- |
||||
|
||||
<FAQs> |
||||
<Question isActive question='What is Frontend Development?'> |
||||
<Answer> |
||||
<p class='mb-3'> |
||||
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. |
||||
</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. |
||||
</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. |
||||
</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. |
||||
</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. |
||||
</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. |
||||
</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. |
||||
</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 the |
||||
website |
||||
<a |
||||
class='underline text-blue-700' |
||||
rel='nofollow' |
||||
target='_blank' |
||||
href={salaryLink}>Glassdoor</a |
||||
>, 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. |
||||
</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. |
||||
</p> |
||||
</Answer> |
||||
</Question> |
||||
</FAQs> |
||||
Loading…
Reference in new issue