انتقل إلى المحتوى

المحتوى الرئيسي لهذه الصفحة باللغة الإنجليزية.ترجمة هذه الصفحة

خرائط الطريق المهنية

Frontend Developer roadmap

Frontend developers build everything users see and touch in a browser. You will learn HTML, CSS, JavaScript, TypeScript and React, plus performance and accessibility, which separate good frontend developers from average ones.

الوقت
⏱ 4–6 months
Level
Beginner
Steps
6 steps
Architecture ↓Cheat sheet ↓5 interview Q&As ↓
مشاركة

The roadmap

Click a step to open the full guide.

Best architecture: a modern frontend application

How a fast, maintainable web front end is organised.

Frontend architecture

  1. Routes / pages (server-rendered where possible)
  2. Feature modules (UI + hooks + state)
  3. Shared design system components
  4. Data layer (fetching, caching)
  5. API / backend for frontend

Why it's built this way

  • Organise code by feature, with a shared component library.
  • Render on the server لعام speed and SEO; hydrate only interactive parts.
  • Keep server data in a caching data layer, UI state local.
  • A design system keeps UI consistent and accessible.

Frontend Developer cheat sheet

The essentials on one screen. Bookmark it for revision.

CSS

Center anythingdisplay:grid; place-items:center
Row with gapdisplay:flex; gap:1rem
Responsive gridgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
Media query@media (min-width: 768px) { … }
Fluid textfont-size: clamp(1rem, 2vw, 1.5rem)

JavaScript

Fetch JSONconst data = await (await fetch(url)).json()
Map/filteritems.filter(i => i.active).map(i => i.name)
Destructureconst { name, price } = product
Spreadconst next = { ...obj, done: true }
Optional chaininguser?.address?.city

Improve performance

  • Optimise images: right size, WebP/AVIF, lazy-load below the fold.
  • Ship less JavaScript: code-split, remove unused libraries, render on the server.
  • Use a CDN and caching headers for static assets.
  • Set width/height on images and embeds to prevent layout shift.
  • Preload the main font and hero image; defer third-party scripts.

Security checklist

  • Prevent XSS: never insert untrusted HTML; sanitise if you must.
  • Use a Content Security Policy.
  • Never put API secrets in frontend code.
  • Use HttpOnly, Secure, SameSite cookies for sessions.
  • Keep npm dependencies updated and audited.

Most important interview questions

Click a question to see a strong answer. Each step also has its own questions.

1Explain the CSS box model.

Every element is a box of content, padding, border and margin; box-sizing: border-box makes width include padding and border.

2ما هو event delegation؟

Attaching one listener to a parent and handling events from children via bubbling, which is efficient for many or dynamic items.

3ما هو the difference between `let`, `const` and `var`؟

let and const are block-scoped (const can't be reassigned); var is function-scoped and hoisted. Use const by default.

4How do you make a site accessible?

Semantic HTML, labels, alt text, keyboard navigation, visible focus, enough contrast, ARIA only when needed, and testing with a screen reader.

5What are Core Web Vitals?

Google's user-experience metrics: LCP (loading), INP (responsiveness) and CLS (visual stability).

Related خرائط طريق

5

React

5 steps · 4–6 weeks · Intermediate

The most used library for building user interfaces.

View roadmap →
6

Full Stack Developer

6 steps · 6–8 months · Intermediate

Build complete web apps, front to back.

View roadmap →
6

Backend Developer

6 steps · 5–6 months · Intermediate

Build the APIs, databases and services behind apps.

View roadmap →
1

Frontend Developer · Step 1 of 6 · 3 weeks

HTML and CSS

Structure and style any page.

Semantic HTML gives pages meaning for browsers, search engines and screen readers. Flexbox and Grid handle almost every layout you will meet.

Design mobile-first: most users, especially in India, browse on phones.

What you'll learn

  • Semantic HTML
  • Forms
  • The box model
  • Flexbox and Grid
  • Responsive design and media queries
  • CSS variables

The CSS box model (outside in)

  1. Margin
  2. Border
  3. Padding
  4. Content

Key concepts

Semantic HTML
Tags that describe meaning, helping SEO and screen readers.
Flexbox vs Grid
Flexbox: one direction. Grid: rows and columns together.
Mobile-first
Design for small screens first, then add styles for larger ones.

Step by step

  1. 1.1

    Semantic HTML

    header, nav, main, article, button, label used correctly.

  2. 1.2

    Box model

    Content, padding, border, margin; box-sizing: border-box.

  3. 1.3

    Layouts

    Flexbox for rows/columns, Grid for 2D layouts.

  4. 1.4

    Responsive

    Mobile-first CSS with media queries and fluid units.

Notes

  • Use buttons for actions and links for navigation.

Tips & tricks

  • Clone the layout of three websites you like.
  • Use browser dev tools to inspect and tweak live CSS.

Interview questions

Flexbox or Grid: when to use which?

Flexbox for laying items along one axis (nav bars, button rows). Grid for two-dimensional page or card layouts. They work well together.

The quick way to study this

Build one landing page that looks right on a phone and a laptop.

2

Frontend Developer · Step 2 of 6 · 4 weeks

JavaScript fundamentals

The language of the web.

Frameworks change; JavaScript fundamentals do not. Understand how the DOM, events and asynchronous code work before React.

Practise by building small interactive widgets without any framework.

What you'll learn

  • Variables, functions and scope
  • Arrays and objects
  • The DOM and events
  • Promises and async/await
  • fetch and APIs
  • Modules

The event loop

  1. Run current code
  2. Check microtasks (promises)
  3. Render if needed
  4. Take next task (events, timers)

Repeats as a loop

Key concepts

DOM
The browser's tree of page elements your JavaScript can change.
Event loop
How JavaScript runs async callbacks after the current code finishes.
Closure
A function that remembers variables from where it was created.

Step by step

  1. 2.1

    Language basics

    let/const, functions, arrays, objects, destructuring.

  2. 2.2

    DOM and events

    Select elements, listen to clicks/inputs, update the page.

  3. 2.3

    Async

    Promises, async/await, fetch with error handling.

  4. 2.4

    Modules

    import/export to organise code.

Notes

  • Most bugs come from async timing or mutating shared objects.

Tips & tricks

  • Build a to-do app, a quiz and a weather app in plain JavaScript.

Interview questions

ما هو a closure؟

A function bundled with the variables of the scope where it was created, so it can still use them later. Used for private state, callbacks and factories.

`==` vs `===` in JavaScript?

=== compares value and type without conversion; == converts types first and can surprise you. Use ===.

The quick way to study this

Two weeks of fundamentals, two weeks building small vanilla JS apps.

3

Frontend Developer · Step 3 of 6 · 2 weeks

TypeScript

Safer, easier-to-maintain JavaScript.

TypeScript is now the default in professional frontend work. Types catch bugs while you type and make large codebases manageable.

You do not need advanced type gymnastics; basic types, unions and generics cover most needs.

What you'll learn

  • Types and interfaces
  • Unions and narrowing
  • Generics basics
  • Typing API responses
  • tsconfig

JavaScript vs TypeScript

JavaScript

  • Errors found at runtime
  • Flexible
  • No build step needed

TypeScript

  • Errors found while typing
  • Self-documenting
  • Compiles to JavaScript

Key concepts

Type narrowing
TypeScript learns a more specific type after checks like if (typeof x === "string").
unknown vs any
any turns off checks; unknown forces you to check first.

Step by step

  1. 3.1

    Basic types

    string, number, boolean, arrays, objects.

  2. 3.2

    Types and interfaces

    Describe shapes of props and API data.

  3. 3.3

    Unions and narrowing

    "loading" | "error" | "done" and type guards.

Notes

  • Avoid any; use unknown and narrow it.

Tips & tricks

  • Convert one of your JavaScript projects to TypeScript.

Interview questions

Why use TypeScript?

It catches bugs before runtime, improves editor autocomplete and refactoring, and documents data shapes, which matters as codebases and teams grow.

The quick way to study this

Learn the basics in a few days, then use TypeScript for everything from now on.

4

Frontend Developer · Step 4 of 6 · 4 weeks

React

Build interactive user interfaces with components.

React is the most used frontend library. Think in components: small pieces with clear inputs (props) and their own state.

Learn a framework built on React for routing, data loading and server rendering once the basics are solid.

What you'll learn

  • Components and props
  • State and hooks
  • Effects and data fetching
  • Forms
  • Routing
  • A meta-framework (Next.js or similar)

Feature folder structure

  • src/
  • features/
  • cart/
  • CartList.tsx
  • useCart.ts
  • checkout/
  • components/ (shared UI)
  • lib/ (helpers)

Key concepts

Component
Reusable UI piece with props and state.
Re-render
React running the component again when state or props change.

Step by step

  1. 4.1

    Components and props

    Small reusable components.

  2. 4.2

    State and effects

    useState, controlled forms, effects for syncing.

  3. 4.3

    Routing and data

    Use a framework for routes, loading and server rendering.

Notes

  • Keep state as close as possible to where it is used.

Tips & tricks

  • Rebuild one of your vanilla JS apps in React to see the difference.

Interview questions

How do you share state between sibling components?

Lift it to their nearest common parent and pass it down, or use context/a store if it's needed widely.

The quick way to study this

Follow the official React tutorial, then build a small dashboard that fetches real data.

React roadmap →
5

Frontend Developer · Step 5 of 6 · 2 weeks

Performance, accessibility and testing

What makes frontend professional.

Fast, accessible sites rank better on Google and work for everyone. Learn to measure with Lighthouse and fix the biggest issues.

Accessibility basics: alt text, labels, keyboard navigation, visible focus and enough colour contrast.

What you'll learn

  • Core Web Vitals
  • Image and font optimisation
  • Accessibility (keyboard, screen readers, contrast)
  • Component and end-to-end testing
  • Lighthouse audits

Core Web Vitals targets (good)

LCP

  • ≤ 2.5 s
  • Fix: images, server speed

INP

  • ≤ 200 ms
  • Fix: less JS, split work

CLS

  • ≤ 0.1
  • Fix: set image sizes

Key concepts

LCP
Largest Contentful Paint: when the main content appears.
CLS
Cumulative Layout Shift: how much the page jumps around while loading.
INP
Interaction to Next Paint: how quickly the page responds to clicks.
WCAG
The accessibility guidelines most laws and companies follow.

Step by step

  1. 5.1

    Measure

    Lighthouse and Core Web Vitals (LCP, INP, CLS).

  2. 5.2

    Fix images and fonts

    Correct sizes, modern formats, lazy loading, font-display: swap.

  3. 5.3

    Accessibility pass

    Keyboard only, labels, alt text, contrast, focus states.

  4. 5.4

    Test

    Component tests and a few end-to-end tests.

Notes

  • Large images are the most common cause of slow pages.

Tips & tricks

  • Navigate your project using only the keyboard.

Interview questions

How do you improve a slow website?

Measure first; then optimise images, reduce and split JavaScript, cache with a CDN, preload key resources, avoid layout shifts and defer non-critical scripts.

The quick way to study this

Run Lighthouse on your projects and get every score above 90.

6

Frontend Developer · Step 6 of 6 · 2 weeks

Portfolio and job hunt

Show polished, responsive work.

Your portfolio site is itself a project. Include three polished apps with live links and source code.

Interviews often include building a small UI live; practise under a time limit.

What you'll learn

  • Portfolio site
  • Deploying to static hosts
  • GitHub hygiene
  • Frontend interview questions

Project polish checklist

  1. Responsive
  2. Accessible
  3. Fast (Lighthouse 90+)
  4. All UI states
  5. Deployed + README

Key concepts

UI states
Every view needs loading, empty, error and success states.

Step by step

  1. 6.1

    Portfolio site

    Fast, accessible, responsive; your best advertisement.

  2. 6.2

    3 polished projects

    Loading, empty and error states; mobile layouts.

  3. 6.3

    Interview prep

    Build small UIs under time limits; review JS fundamentals.

Notes

  • Polish matters: spacing, states (loading, empty, error) and mobile layouts.

Tips & tricks

  • Build one project for a real local business.

Interview questions

What happens when you type a URL into the browser?

DNS lookup → TCP/TLS connection → HTTP request → server response → browser parses HTML, loads CSS/JS, builds the DOM and render tree, lays out and paints the page.

The quick way to study this

Deploy your portfolio and three projects this week.

شارك هذه الصفحة