Ce parcours n’est pas encore traduit en français : son contenu s’affiche en anglais.
Frontend Developer
Build websites and web apps people use every day
Pas sûr(e) que ce soit pour vous ? Trouver ma voie →
0 missions sur 19 faites
Ce métier est-il fait pour vous ?
Deux minutes avant d’y consacrer des mois
Cochez ce qui vous ressemble
Cochez celles qui sont vraies pour vous.
Les compétences que vous en tirerez
Les emplois auxquels il mène
- Junior Frontend Developer
- UI Developer
- Web Developer
- Frontend Engineer
Avant de commencer
- ✓ Basic computer literacy
- ✓ No prior coding experience needed
19 missions jusqu’à Frontend Developer
4 mondes, 19 missions. Touchez un cercle pour l’ouvrir ; celui qui brille est le suivant.
Start with the three languages every website uses. This is not optional background knowledge — this is the foundation everything else sits on. Skipping or rushing this phase is why most beginners plateau.
JavaScript is what makes pages interactive. This is the hardest phase for most beginners — the mental model shift from markup to programming is difficult. Do not rush it. Weak JS fundamentals will haunt you in every interview and every job.
React is the dominant frontend library and the first thing most job postings ask for. But React is not magic — it's a systematic way of building UIs from reusable components with managed state. Understanding the 'why' behind React will make you faster and prevent common beginner mistakes.
You now have the technical skills to build real things. The job hunt is itself a skill — and most developers approach it wrong. Treat it like a project: define your targets, run systematic experiments, iterate based on data.
En savoir plus sur ce métier
Le métier, le salaire là où vous vivez, les questions fréquentes, et où ce métier peut vous mener ensuite.
Le métier
Ce que vous feriez
- Design, build and maintain websites and web applications
- Choose the programming languages, design tools and applications for a project
- Check that code is valid, well structured, meets standards and works across browsers
- Test the site on a schedule and after every change
- Make and manage updates to the live site
Où vous travailleriez
- Computer systems design and IT services companies
- Self-employed (about 18% of US web developers)
- Publishing, media and other information companies
- Schools, colleges and universities
- Management and technical consulting firms
Toutes les étapes en détail
Le texte complet de chaque étape, à lire ou à imprimer. Avancez étape par étape dans le parcours ci-dessus.
Web Foundations 4 étapes
Master HTML Structure & Semantics
HTML is the skeleton of every webpage. You must understand not just what tags exist, but why semantic tags matter for accessibility, SEO, and screen readers. This is non-negotiable foundation — everything else sits on top of it.
Tâche concrète: Build a fully semantic blog post page from scratch with no divs where a semantic tag fits. It must include: a proper <header> with nav, a <main> with <article> containing an <aside>, a data table, and a contact <form> with validation. Run it through the W3C validator (zero errors). Then open it with VoiceOver (Mac) or NVDA (Windows, free) and navigate it with keyboard only — if it's broken for screen readers, fix it.
Pourquoi c’est important: Semantic HTML is the #1 thing senior devs look for in code reviews. Poor HTML tanks SEO, makes apps inaccessible to ~15% of users with disabilities (a legal liability in many countries), and signals inexperience immediately. Companies like Google, Amazon, and Meta have accessibility requirements — broken HTML fails those standards.
Liste de contrôle
- Understand the difference between block-level and inline elements and when to use each
- Use semantic tags correctly: <header>, <main>, <article>, <section>, <aside>, <footer>, <nav>
- Build forms from scratch: inputs, labels, select, textarea, fieldset, required/pattern validation
- Build tables correctly: <thead>, <tbody>, <tfoot>, <th scope>, <caption> — know when tables are appropriate (data) vs wrong (layout)
- Understand ARIA roles and basic accessibility: alt text on images, for/id label pairing, tab order, landmark roles
- Know void elements vs container elements, boolean attributes, data-* custom attributes
- Validate your HTML using validator.w3.org — zero errors, understand every warning
CSS Fundamentals: Selectors, Box Model & Layout
CSS is what makes pages look the way they do. The most critical concept is understanding the box model and how browsers calculate element dimensions. Most layout bugs you'll encounter in your career trace back to misunderstanding this.
Tâche concrète: Recreate the layout of a website you use daily (Reddit, GitHub, a news site) using only HTML and CSS — no libraries, no frameworks. It must use both Flexbox and Grid. Then open the browser DevTools and use the computed tab to explain exactly why any three elements are sized the way they are. If you can't explain it, you don't know the box model yet.
Pourquoi c’est important: CSS bugs are notoriously hard to debug if you don't understand specificity and the box model. They are one of the top interview red flags — interviewers often show candidates a broken layout and ask them to explain what's wrong. Knowing this cold separates you from the 80% of applicants who 'know CSS' but can't debug it.
Liste de contrôle
- Know every selector type: element, class, ID, attribute, pseudo-class (:hover, :focus, :nth-child), pseudo-element (::before, ::after), combinators (>, ~, +)
- Deeply understand the box model: content, padding, border, margin — and how box-sizing: border-box changes it
- Understand positioning: static, relative, absolute, fixed, sticky — and stacking contexts
- Master Flexbox: flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow/shrink/basis
- Master CSS Grid: grid-template-columns/rows, grid-area, span, auto-fit/auto-fill with minmax()
- Know specificity rules — when does one rule override another and why
- Understand CSS custom properties (variables) and how to use them for theming
- Know the cascade, inheritance, and what 'initial', 'inherit', 'unset' reset values do
Responsive Design: Mobile-First & Media Queries
More than half of web traffic is mobile. Responsive design is not a bonus feature — it's a baseline expectation. Mobile-first is the professional approach: design for the smallest screen first, then scale up.
Tâche concrète: Take your HTML/CSS recreation from the previous step and make it fully responsive. It must look correct and be usable on a 375px iPhone SE screen AND a 1440px desktop. Test using Chrome DevTools — screenshot both breakpoints. Then audit it with Google Lighthouse on mobile mode and achieve a Performance + Accessibility score above 90.
Pourquoi c’est important: Non-responsive pages are penalized in Google search rankings. Every company that ships a product expects mobile-first work — submitting a portfolio with non-responsive projects tells hiring managers you've never shipped anything real. Lighthouse audits are part of standard CI/CD pipelines at most tech companies.
Liste de contrôle
- Understand the viewport meta tag and why <meta name='viewport' content='width=device-width, initial-scale=1'> is required
- Know the mobile-first methodology: write base styles for mobile, use min-width media queries to enhance for larger screens
- Write media queries at common breakpoints: 480px (small mobile), 768px (tablet), 1024px (laptop), 1280px (desktop)
- Use relative units correctly: em vs rem, % for widths, vh/vw for full-screen sections, clamp() for fluid typography
- Understand fluid images: max-width: 100%, object-fit, srcset and sizes attributes for responsive images
- Make touch targets at least 44px tall for mobile usability
- Test on multiple screen sizes using Chrome DevTools device mode — including iPhone SE (small) and 4K (large)
Build 3 Static Projects From Scratch
Knowledge without application evaporates. You need to build multiple complete projects using only HTML and CSS before touching JavaScript. This cements muscle memory, exposes gaps in your understanding, and gives you the first pieces of your portfolio.
Tâche concrète: Complete one of the free challenges on frontendmentor.io — pick any Newbie or Junior level challenge. Submit your solution to the community. Read the feedback comments on your submission. The act of having your work reviewed by strangers simulates a real code review and forces you to write cleaner, more intentional code.
Pourquoi c’est important: Your portfolio projects are the single most important thing that gets you interviews when you have no work experience. Recruiters spend under 30 seconds on each candidate — a polished, deployed project with a live link is the difference between a skip and a click. Three real projects beats a bootcamp certificate every time.
Liste de contrôle
- Project 1: Personal portfolio page with nav, hero section, projects grid, and contact form layout
- Project 2: A product landing page for a fictional product — use marketing-style layout with sections, a pricing table, and a CTA button
- Project 3: A blog layout page with a sidebar, article list, tags, and pagination UI
- Each project must be fully responsive (mobile + desktop)
- Push all three to GitHub with a proper README describing each project
- Deploy all three to either Netlify or Vercel (both offer free static site hosting — zero configuration needed)
- Get feedback from the Frontend Mentor community or a peer — incorporate at least one piece of feedback into each project
JavaScript Fundamentals 5 étapes
Core Language: Variables, Types, Functions & Control Flow
Before you can build anything, you need to deeply understand how JavaScript thinks. Most JS bugs — even in senior code — come from misunderstanding scope, type coercion, and how functions work. Get this cold.
Tâche concrète: Without using any libraries or Google, write the following from scratch in the browser console: (1) A function that flattens a nested array to any depth using recursion. (2) A function that deep-clones an object. (3) A debounce function. If you can build these without hints, you understand closures, recursion, and scope.
Pourquoi c’est important: These concepts appear in almost every technical interview in some form. LeetCode problems, take-home projects, and live coding sessions all require you to understand closures, array methods, and control flow at a reflex level — not as things you need to look up.
Liste de contrôle
- Understand var, let, const — the difference in scope, hoisting, and when to use each
- Know all primitive types: string, number, bigint, boolean, undefined, null, symbol — and typeof for each
- Understand truthy/falsy values and implicit type coercion (== vs === and why === always)
- Write functions multiple ways: function declarations, function expressions, arrow functions — know the difference in 'this' binding
- Understand closures: what they are, why they exist, how they capture variables from outer scope
- Master all loop types: for, while, do-while, for...of, for...in — know when to use each
- Know all array methods cold: map, filter, reduce, find, findIndex, some, every, flat, flatMap, includes
- Understand object literals, property shorthand, computed property names, and optional chaining (?.) and nullish coalescing (??)
DOM Manipulation: Making Pages Dynamic
The DOM (Document Object Model) is the bridge between your HTML and JavaScript. Understanding how browsers represent the page as a tree of nodes — and how to traverse, modify, and react to that tree — is foundational to everything frontend.
Tâche concrète: Build a fully functional, dynamic to-do list using only vanilla JS (no libraries). It must: add items on Enter, mark items done with a click (strikethrough), delete items, filter between All/Active/Completed, persist data using localStorage so items survive page refreshes, and animate items in/out. No frameworks. Every DOM interaction must be code you wrote.
Pourquoi c’est important: Every React, Vue, or Angular app you will ever build is abstract DOM manipulation under the hood. Developers who skip vanilla JS DOM manipulation and go straight to React cannot debug framework issues because they don't understand what the framework is doing. Interviewers know this — vanilla DOM questions are a standard filter.
Liste de contrôle
- Select elements using querySelector, querySelectorAll, getElementById, getElementsByClassName — understand when to use which
- Read and write element content: innerHTML, textContent, innerText — know the security and performance differences
- Modify styles inline (el.style.property) and via class manipulation (classList.add, .remove, .toggle, .contains)
- Create, append, remove, and clone DOM nodes: createElement, appendChild, insertBefore, removeChild, cloneNode
- Understand event listeners: addEventListener, removeEventListener, event object properties (target, currentTarget, preventDefault, stopPropagation)
- Understand event bubbling vs capturing and event delegation — this is a common interview question
- Work with HTML attributes: getAttribute, setAttribute, dataset (data-* access via el.dataset)
- Understand the difference between DOMContentLoaded and load events
Modern JavaScript (ES6+): The Syntax You'll Use Daily
ES6 (2015) and later versions of JavaScript introduced features that are now standard in every modern codebase. If you're reading or writing code without these, you're not writing professional JS.
Tâche concrète: Take the to-do list you built in the DOM step and refactor it entirely using ES6+ syntax. Replace all vars with const/let, convert functions to arrow functions where appropriate, use destructuring everywhere, switch to ES modules (type='module' in your script tag), and refactor any class-based logic using the class syntax. Review the before/after diff — the code should be significantly shorter and cleaner.
Pourquoi c’est important: Every single job posting lists ES6+ as a requirement. Reading modern codebases without knowing destructuring, spread, and modules puts you at a complete disadvantage. React, for example, relies on destructuring hooks and spreading props constantly — you cannot read React code without these.
Liste de contrôle
- Destructuring: array destructuring with default values, object destructuring with renaming and nesting
- Spread and rest operators (...) — for arrays, objects, function parameters
- Template literals with multi-line strings and expression interpolation ${...}
- Arrow functions and when NOT to use them (methods, constructors where 'this' matters)
- ES modules: import, export, export default, named vs default exports, import aliasing
- Optional chaining (?.) and nullish coalescing (??) — reduce verbosity dramatically
- Array.from(), Object.keys(), Object.values(), Object.entries(), Object.assign()
- Short-circuit evaluation for conditional rendering patterns (condition && <JSX>)
- Understand class syntax: constructor, methods, static methods, inheritance with extends/super
Asynchronous JS: Promises, Async/Await & the Fetch API
Most real applications talk to servers — fetching data, submitting forms, loading content. Asynchronous JavaScript is how that happens. Understanding the event loop, promises, and async/await is what separates beginners from job-ready developers.
Tâche concrète: Build a weather dashboard app that: (1) Fetches live weather data from the Open-Meteo API (free, no API key needed) using async/await. (2) Displays current temperature, wind speed, and weather code for a city the user types into a search box. (3) Handles loading state (show a spinner), success state (show the data), and error state (show a user-friendly message if the API fails or city is invalid). (4) Fetches the forecast for 3 days in parallel using Promise.all.
Pourquoi c’est important: Asynchronous code is at the core of every real frontend application. Junior developers who don't understand the event loop produce race conditions, show stale data, or crash apps silently. Correctly handling loading/error states is a direct signal of production readiness — it's one of the first things reviewers check in take-home projects.
Liste de contrôle
- Understand the event loop: call stack, callback queue, microtask queue — why setTimeout(() => {}, 0) still runs last
- Understand callback hell and why it was replaced by Promises
- Promise anatomy: new Promise((resolve, reject) => {}), .then(), .catch(), .finally()
- Promise composition: Promise.all (parallel, all must succeed), Promise.allSettled (parallel, get all results), Promise.race, Promise.any
- async/await syntax: how it's syntactic sugar over Promises, error handling with try/catch, parallel execution with await Promise.all([...])
- The Fetch API: fetch(url), response.json(), response.text(), response.ok, response.status
- Handle API errors properly: network errors (catch block), HTTP errors (check response.ok before parsing)
- Understand CORS: what it is, why the browser enforces it, and that it's a server-side header issue (not something you fix in JS)
Build 3 Interactive JS Projects
You've learned the theory. Now you build. Each project must be completed without following a tutorial — use documentation, not step-by-step videos. This is how real work happens.
Tâche concrète: Send your three live project URLs to exactly 5 people who are not developers and ask them to try to use the apps. Watch them use it (screen share or in person). Take notes on every moment of confusion. Fix the top 3 UX issues they encountered. This is what user testing looks like — and it teaches you more about building products than any course.
Pourquoi c’est important: Self-built projects without tutorials are the proof of real understanding. Tutorial projects are recognizable to any senior developer — they're cookie-cutter and interviewers know them. A project you built to solve your own problem tells a story, which is what makes for a great interview conversation.
Liste de contrôle
- Project 1: A JavaScript calculator with full keyboard support (all operators, CE, backspace, decimal support, no eval())
- Project 2: A quiz app that fetches questions from the Open Trivia DB API (opentdb.com), tracks score, shows a progress bar, and displays a final results screen
- Project 3: Your choice — something you personally want to build (this is the most important one; motivation predicts completion)
- Each project must be hosted live on Vercel or Netlify with a public URL
- Each project must have a README with: what it does, how to run it, and what you learned building it
- No tutorial following allowed — use MDN docs and Stack Overflow only
React & Modern Frameworks 5 étapes
React Core: JSX, Components & Props
React changes your mental model from 'manipulate the DOM' to 'describe what the UI should look like given some data.' Components are the unit of React — everything is a component. Props are how data flows down from parent to child.
Tâche concrète: Build a static product listing page in React — no real data fetching yet. Create a ProductCard component, a ProductGrid component, and a ProductPage component that assembles them. The ProductCard must accept at least 6 props (product name, price, image URL, category, rating, stock status). Use conditional rendering to show a 'Low Stock' badge when stock < 5 and an 'Out of Stock' overlay when stock === 0.
Pourquoi c’est important: Component design decisions (how you split components, what goes into props vs state) are exactly what interviewers evaluate during code reviews. Developers who don't understand the 'component tree' mental model produce tangled React code that's impossible to maintain — this is one of the top complaints about junior React developers.
Liste de contrôle
- Set up a React project using Vite (not Create React App — it's deprecated): npm create vite@latest
- Understand JSX: it's syntactic sugar for React.createElement(), not HTML — self-closing tags, className vs class, htmlFor vs for
- Write functional components correctly: naming conventions (PascalCase), returning JSX, exporting components
- Pass props: primitive values, objects, arrays, functions, and the children prop
- Understand prop drilling and when it signals a need for state lifting or context
- Render lists using Array.map() with stable key props (never use index as key in dynamic lists — understand why)
- Conditional rendering: ternary operator, logical &&, early returns — know when to use each
- Compose components: build a parent that assembles 3+ child components and passes data between them
React State: useState, useEffect & Side Effects
State is what makes a React app dynamic — it's data that, when it changes, causes the UI to re-render. useEffect is how you synchronize with things outside React (APIs, timers, localStorage, subscriptions). These two hooks are the core of almost every React application.
Tâche concrète: Add full interactivity to your product listing page: (1) Fetch real product data from the DummyJSON API (dummyjson.com/products) on mount with useEffect. (2) Add a search input that filters products in real-time as you type (debounce the search by 300ms). (3) Add 'Add to Cart' functionality — maintain a cart array in state, show a cart icon with item count, and allow removing items. (4) Persist the cart to localStorage and restore it on page load using a useEffect.
Pourquoi c’est important: useState and useEffect are not just API calls — they define how you manage application data flow. Misusing useEffect (missing dependencies, no cleanup, running effects on every render) is one of the most common React bugs in production codebases. Interviewers routinely ask about the dependency array and cleanup functions.
Liste de contrôle
- useState: initial state, updater function, functional updates (prev => prev + 1) for derived state
- Understand the re-render cycle: when does React re-render a component? What triggers it?
- Understand state immutability: why you never mutate state directly — always return a new array/object
- Update arrays in state correctly: spread for add ([...prev, newItem]), filter for remove, map for update
- Update objects in state correctly: spread to merge ({ ...prev, key: newValue })
- useEffect dependency array: [] (run once on mount), [dep] (run when dep changes), no array (run every render — almost always wrong)
- Cleanup functions in useEffect: return () => {} to clear timers, cancel fetch requests (AbortController), remove event listeners
- Lift state up: when two sibling components need the same state, move it to their common parent
Advanced Hooks: useRef, useMemo, useCallback & Context
Once you have useState and useEffect solid, these hooks unlock performance optimization and more complex patterns. These are also common interview topics at the intermediate level.
Tâche concrète: Refactor your product app: (1) Extract your cart logic into a custom useCart hook. (2) Move the cart and user preferences (selected currency, theme) into a CartContext and ThemeContext — replace prop drilling with useContext. (3) Use useMemo to optimize the product filtering function. (4) Use useCallback to memoize the addToCart and removeFromCart handlers passed to ProductCard. (5) Wrap ProductCard with React.memo and verify it no longer re-renders when unrelated state changes.
Pourquoi c’est important: Performance issues in React apps almost always trace to unnecessary re-renders. Knowing when and how to apply useMemo, useCallback, and React.memo is a mid-level skill that junior developers who invested in the fundamentals early possess — making them significantly more hireable than peers who just know useState.
Liste de contrôle
- useRef: persisting mutable values across renders without triggering re-render, accessing DOM elements directly (focus, scroll, measure)
- useMemo: memoize expensive calculations — only recalculate when dependencies change. Know when it's worth it vs premature optimization
- useCallback: memoize function references to prevent unnecessary child re-renders. Understand referential equality and why it matters for props
- React.memo: prevent a child component from re-rendering if its props haven't changed
- React Context API: createContext, Provider, useContext — for sharing state without prop drilling
- Understand when NOT to use Context (frequent updates cause all consumers to re-render — can be a performance problem)
- Custom hooks: extract reusable stateful logic into a function starting with 'use'. Build at least one custom hook (e.g., useLocalStorage, useDebounce, useFetch)
- Understand the rules of hooks: only call hooks at the top level (not inside loops, conditions, or nested functions)
React Router: Client-Side Navigation
Modern web apps don't do full page reloads — they update the URL and swap components in place. React Router is the standard solution for this, giving your app multiple 'pages' without a server round-trip.
Tâche concrète: Extend your product app into a multi-page application with at least 4 routes: (1) / — Home with featured products. (2) /products — Product listing with search and filter in the URL params (so the page is shareable). (3) /products/:id — Individual product detail page that fetches that specific product by ID. (4) /cart — Cart review page. Navigation between pages must be instant (no full reload) and the browser back/forward buttons must work correctly.
Pourquoi c’est important: URL-driven state is a mark of professional-quality applications. When users can refresh a filtered page and get the same results, or share a link to a specific product and have it work — that is what separates a real app from a tutorial project. This directly reduces your bounce rate and improves user experience, which is something companies care about.
Liste de contrôle
- Install and configure React Router v6+ with createBrowserRouter and RouterProvider
- Define routes: Route, nested routes (for shared layout components), index routes
- Navigate between pages: Link, NavLink (with active styling), useNavigate hook for programmatic navigation
- Read URL parameters with useParams (/products/:id — access id in the component)
- Read query strings with useSearchParams (?search=shoes&category=men — read and set from components)
- Handle 404 routes with a wildcard * route and an ErrorBoundary for unhandled errors
- Implement protected routes: redirect to login if user is not authenticated using a wrapper component
- Understand loader and action patterns in React Router v6.4+ for data fetching at the route level
Build a Complex Full-Feature React Application
Everything you've learned comes together in one serious project. This is the portfolio centerpiece — it should be something you're genuinely proud of and can talk about for 20 minutes in an interview.
Tâche concrète: Pick a project that solves a problem you have personally. Ideas: a Job Application Tracker (add jobs, track status, set reminders), a Recipe App (search, favorite, and save recipes from TheMealDB API), a Movie Watchlist (search TMDB, mark watched, rate films). The rule: if you'd actually use it yourself, you'll build it better. Aim for 3–5 hours of build time minimum. Polish matters more than number of features.
Pourquoi c’est important: This single project will carry more weight in your job search than your resume. Recruiters look at it, technical screeners review the code, and interviewers ask you to walk them through it. A project you built because you wanted to solve a real problem — not because a tutorial told you to — is authentic and memorable in a sea of generic apps.
Liste de contrôle
- The project must have at least 5 distinct pages/views connected with React Router
- Must fetch real data from a public API (not localStorage-only) with proper loading, error, and empty states
- Must have a search/filter feature with URL-synced state (query params)
- Must have proper form handling with validation (use React Hook Form + Zod for validation, or build your own)
- Must be fully responsive and tested on mobile viewport
- Must use Context or a state manager for at least one piece of cross-component state
- Must have a polished, professional UI — use Tailwind CSS or a component library like shadcn/ui
- Must be deployed and accessible via a public URL (Vercel recommended)
- Must have a README with screenshots and a description of your architecture decisions
Professional Skills & Job Hunt 5 étapes
Git & GitHub: Version Control Professionalism
Git is not optional — it is infrastructure. Every company uses it. You will collaborate on Git every single day. More importantly, your GitHub profile is part of your public resume — it signals professionalism before anyone reads a line of your code.
Tâche concrète: Contribute to an open source project on GitHub. Find a beginner-friendly repo (search 'good first issue' label), fork it, fix one issue (even a docs typo), and open a proper PR following the project's contribution guidelines. Getting one PR merged — even a small one — is more impressive on a resume than many certificates. It proves you can work in a team codebase.
Pourquoi c’est important: Every technical role works in shared Git repositories. Developers who don't understand branching strategies, PR workflows, and how to resolve merge conflicts create problems for their entire team. Hiring managers literally look at your GitHub contribution graph — a blank graph is a red flag; a consistent green graph signals discipline and output.
Liste de contrôle
- Understand the three states: working directory, staging area (index), repository — and the commands that move between them
- Daily GitHub workflow: git add, git commit -m, git push, git pull, git status, git log --oneline
- Branching: git branch, git checkout -b, git merge, git rebase (understand the difference)
- Undoing things safely: git restore (unstaged), git reset HEAD (staged), git revert (committed, preserves history)
- Pull requests: fork a repo, create a feature branch, open a PR, respond to review comments
- Resolve merge conflicts manually — understand the conflict markers and how to choose what to keep
- GitHub profile hygiene: pinned repos, repo READMEs with screenshots, consistent commit history (green contribution graph)
- Write meaningful commit messages: 'fix: resolve undefined error on product load' not 'fix stuff'
Build a Portfolio That Gets Interviews
Your portfolio is your product. You are the product. Most developers build portfolios that look like every other developer's portfolio. This step is about making yours stand out in a market where thousands of junior developers are applying to the same 50 jobs.
Tâche concrète: Audit the top 5 results when you Google 'junior frontend developer portfolio.' List what all of them have in common — those features are now table stakes. Then list 3 things your portfolio has that none of those do. Deploy it and submit it to portfolios.dev for public feedback.
Pourquoi c’est important: Recruiters spend 15–30 seconds on a candidate's portfolio page. If they can't immediately understand what you built and who you are, they move on. A memorable, specific portfolio that shows a real problem you solved is how you turn rejection into interviews in a saturated market.
Liste de contrôle
- Your portfolio site itself must be a showcase of your ability — not a template (build it yourself)
- Feature exactly 3 projects — more dilutes the signal. Each must have: a live URL, GitHub link, and a 2-sentence description of the problem it solves
- Each project's README must have: a demo GIF/screenshot, what it does, how to run it locally, what you learned, and any known limitations
- Include a technical blog post or case study for at least one project — write 500+ words explaining how you built it and what decisions you made
- Get your portfolio reviewed by at least 2 people in the industry (post in /r/webdev or a Discord community like Reactiflux)
- Your 'About' section must be specific: not 'I'm passionate about technology' but 'I built 3 full-stack apps in 6 months while working full-time, focused on accessible, performant UIs'
- Mobile-first, fast-loading, accessible — a portfolio with Lighthouse score under 90 is an immediate red flag
Resume & LinkedIn Optimization for Frontend Roles
Your resume is not a life story — it is a targeted marketing document. Every line should answer the question: 'Why would a hiring manager at a frontend-focused company want to interview this person?'
Tâche concrète: Run your resume through a free ATS checker (resume.io or jobscan.co free tier). Identify which keywords from a target job description are missing. Rewrite 3 bullet points to include those keywords without lying. Then have someone who has never seen your resume read it for 30 seconds and ask them to tell you what you're best at and what type of role you're seeking — if their answer doesn't match your target role, rewrite.
Pourquoi c’est important: 60-70% of resumes are rejected by ATS before a human reads them. A senior-looking resume with the right keywords from a junior candidate gets more interviews than a 'honest' resume from a candidate who undersold themselves. Framing matters — and in a market where 500+ people apply to the same entry job, your resume needs to perform, not just inform.
Liste de contrôle
- One page, clean layout, no fancy graphics or icons (ATS systems parse plain text and reject decorated resumes)
- Skills section: list specific technologies only — React, TypeScript, Tailwind, Git, Figma, REST APIs. Not 'problem solver' or 'fast learner'
- Projects section is more important than education for career changers — put it above education
- Quantify everything: not 'built a product app' but 'built a React product app achieving 94 Lighthouse score, 30% load time reduction via code splitting'
- LinkedIn: public profile URL, professional headshot, 'Open to Work' badge enabled, 500+ connections target, 3 skills endorsements from peers
- Tailor your resume for each application: if the job mentions TypeScript, TypeScript should be in your first bullet. If it mentions Next.js, highlight any SSR experience
- ATS keywords: read the job description carefully and mirror the exact technology names used (e.g., they wrote 'React.js' not 'ReactJS' — match it)
Technical Interview Preparation
Frontend technical interviews have three parts: (1) practical coding challenges, (2) conceptual JavaScript/React questions, and (3) system design or UI/UX discussions. Each requires a different type of preparation.
Tâche concrète: Do a full mock interview: set a timer for 45 minutes, pick a random problem from Codewars (5 kyu level, JavaScript), record yourself solving it while explaining every decision out loud. Then watch the recording. Identify: (1) moments you went silent and struggled, (2) incorrect assumptions you made, (3) any wrong vocabulary. Fix those three things specifically before your next practice session.
Pourquoi c’est important: Technical interviews are a skill separate from coding. Developers who can code but can't communicate their thinking during an interview fail routinely. The candidate who solves a medium problem while narrating clearly beats the one who silently solves a hard problem. Communication, clarity, and composure under pressure are what companies are also evaluating.
Liste de contrôle
- Practice JavaScript fundamentals on Codewars (6 kyu → 4 kyu level): closures, prototype, event loop, array methods
- Practice React-specific problems: implement a useDebounce hook, a virtualized list, an infinite scroll, a form wizard with validation
- Study the most common interview questions: hoisting, the event loop, prototypal inheritance, React reconciliation, virtual DOM, render vs commit phase
- Practice explaining your portfolio project out loud: 2-minute summary → deep dive into one technical decision → what you'd do differently now
- Do mock interviews: use Pramp (free), Interviewing.io (free practice), or find a partner in a Discord community
- Behavioral questions: prepare the STAR format for 'Tell me about a time you were stuck' and 'Tell me about a project you're proud of'
- Take-home projects: time yourself (most companies expect a real take-home in 3–5 hours max — practice within that constraint)
- During live coding: think out loud, ask clarifying questions first, start with a working solution before optimizing
Apply Systematically and Iterate
The job hunt is a numbers game with a quality filter. You must apply to enough positions (volume) while continuously improving your application materials and interview performance (quality). Most developers apply too randomly and give up too early.
Tâche concrète: Set a non-negotiable 90-day job hunt sprint: apply to 150 positions (minimum), attend 5 meetups/networking events, complete 2 take-home projects (even rejections), and do 10 mock interviews. At day 45, review your spreadsheet data and make one concrete change based on what the numbers show. At day 90, evaluate your conversion rate at each stage and adjust strategy accordingly. Most developers who do this structured sprint land an offer within the 90 days.
Pourquoi c’est important: The average time to first frontend job for a self-taught developer is 4–9 months of active job hunting. Developers who treat it like a systematic campaign (track, measure, iterate) outperform those who apply sporadically by a significant margin. Persistence combined with data-driven iteration is not motivational advice — it's the actual mechanism that produces offers.
Liste de contrôle
- Create a tracking spreadsheet: company, role, date applied, source, response (yes/no/ghosted), interview stage reached
- Apply to a minimum of 10–15 positions per week — consistency beats burst-and-pause
- Mix of targets: 60% realistic (companies actively hiring juniors), 30% stretch (mid-size companies with strong culture), 10% reaches (FAANG adjacent)
- Apply within 48 hours of a job posting going live — applications drop off exponentially after 3 days
- Follow up once after 1 week of no response — a single polite email can move you from 'unread' to 'reviewed'
- After every rejection or ghosting: note what stage you reached. Pattern will emerge — if you get no callbacks, fix the resume. If you fail after phone screens, work on technical prep
- Attend 1–2 local meetups per month (JavaScript, React, or general tech) — jobs posted at meetups see a fraction of the applicants vs. LinkedIn
- Freelance while job hunting: one small paid client project adds real professional experience to your resume immediately
Questions fréquentes : Frontend Developer
Des réponses claires sur la durée, les prérequis, les salaires et les méthodes d’étude.
Combien de temps faut-il pour devenir Frontend Developer ?
Ce parcours estime 4–8 months. Il compte 4 phases et 19 étapes, de « Web Foundations » à « Professional Skills & Job Hunt ».
Comment devenir Frontend Developer ?
Suivez les 4 phases dans l’ordre, en commençant par la phase 1, « Web Foundations ». Votre première tâche : Build a fully semantic blog post page from scratch with no divs where a semantic tag fits. It must include: a proper <header> with nav, a <main> with <article> containing an <aside>, a data table, and a contact <form>…
Combien gagne un Frontend Developer ?
Le salaire dépend du pays. L’encadré salaire de cette page indique l’estimation de DraftMyCareer, en monnaie locale, pour le pays choisi dans le menu.
De quoi ai-je besoin avant de commencer ?
Ce parcours indique : Basic computer literacy; No prior coding experience needed.
De quelles compétences un Frontend Developer a-t-il besoin ?
Ce parcours couvre : HTML, CSS, JavaScript, React, Responsive Design, Version Control.
Changer de métier : passerelles vers ce poste et depuis ce poste
Voir toutes les reconversions →Évolutions et changements de poste possibles
- AI & ML Engineer
AI engineers earn substantially higher compensation and build generative apps driving next-generation tech products.
⏱ 6–9 months🧭 ChallengingCe que vous apprendriezPython & PyTorch · Prompt Engineering & LLM APIs (LangChain/LlamaIndex) · Vector DBs (Pinecone, Chroma)
Voir le plan d’action
- Month 1–2: Python & Data Foundations Master Python syntax, NumPy, pandas, and data manipulation workflows.
- Month 3–4: LLM App Architecture Build full-stack AI web apps integrating OpenAI/Anthropic APIs with RAG pipelines.
- Month 5–6: Machine Learning Models Train classification and regression models in Scikit-Learn and PyTorch.
- Month 7+: Production Deployment Deploy LLM agents with latency caching, streaming endpoints, and vector search.
- Backend Developer
Unlock full-stack versatility, command higher salaries, and take complete ownership of core business logic.
⏱ 3–5 months🧭 Beginner-FriendlyCe que vous apprendriezNode.js / Express & NestJS · PostgreSQL & SQL Schema Design · Authentication & JWT/OAuth
Voir le plan d’action
- Month 1: Server Runtime & Node.js Deep dive into event loop, Node.js streams, Express middleware, and REST architecture.
- Month 2: Relational Databases & SQL Learn schema normalization, PostgreSQL indexing, transactions, and Prisma ORM.
- Month 3: Auth, Security & Testing Implement secure sessions, JWTs, rate-limiting, and comprehensive Jest integration tests.
- Month 4–5: Microservices & Cloud Deploy containerized Docker backend services on AWS/GCP with CI/CD pipelines.