Skip to content
Miraat·dweb developer journey, reflected
IT EN FR عربي
FR

Frontend Development

Build modern, accessible, fast interfaces that actually work on every device.

24 skills 6 months Beginner
This path starts from web fundamentals — HTML, CSS, accessibility — and takes you all the way to building reactive applications with React, state management, and modern tooling.

It is built for people who have never written a line of code, but also for backend developers who want to truly understand how the visible side of the web works. By the end you will be able to take a static design and turn it into a working, performant, usable interface.

Typical outcomes: junior frontend developer, web designer who codes, freelance for small projects.
HTML Fundamentals · 25 min FOUNDATION · 25 MIN HTML Fundamentals CSS Fundamentals · 30 min FOUNDATION · 30 MIN CSS Fundamentals Layout: Flexbox and Grid · 35 min FOUNDATION · 35 MIN Layout: Flexbox and Grid Responsive Design · 25 min FOUNDATION · 25 MIN Responsive Design Semantic HTML · 20 min FOUNDATION · 20 MIN Semantic HTML Web Accessibility (a11y) · 30 min FOUNDATION · 30 MIN Web Accessibility (a11y) JavaScript Syntax Essentials · 30 min CORE · 30 MIN JavaScript Syntax Essentials DOM Manipulation · 25 min CORE · 25 MIN DOM Manipulation Async, Promises, async/await · 30 min CORE · 30 MIN Async, Promises, async/await JavaScript Modules and Imports · 20 min CORE · 20 MIN JavaScript Modules and Impo… Closures and Scope in JavaScript · 25 min CORE · 25 MIN Closures and Scope in JavaS… fetch API and REST basics · 25 min CORE · 25 MIN fetch API and REST basics npm, yarn, pnpm · 20 min CORE · 20 MIN npm, yarn, pnpm Vite and modern build tools · 25 min CORE · 25 MIN Vite and modern build tools Git and GitHub Basics · 30 min FOUNDATION · 30 MIN Git and GitHub Basics React Fundamentals · 40 min CORE · 40 MIN React Fundamentals React Hooks · 35 min ADVANCED · 35 MIN React Hooks React State Management · 30 min ADVANCED · 30 MIN React State Management React Router · 25 min CORE · 25 MIN React Router Component Design Patterns · 30 min ADVANCED · 30 MIN Component Design Patterns Browser DevTools · 20 min CORE · 20 MIN Browser DevTools Web Performance Basics · 30 min ADVANCED · 30 MIN Web Performance Basics Testing with Vitest · 30 min ADVANCED · 30 MIN Testing with Vitest Forms and Validation · 25 min CORE · 25 MIN Forms and Validation

Foundation

1
HTML Fundamentals
The language that defines what is on a web page: headings, paragraphs, links, images, forms.
25 minutes
2
CSS Fundamentals
How to give shape, color and typography to HTML elements, with clear, predictable rules.
30 minutes
3
Layout: Flexbox and Grid
The two modern tools for laying out elements: Flexbox for lines, Grid for 2D grids.
35 minutes
4
Responsive Design
Building pages that adapt from phone to desktop without separate versions.
25 minutes
5
Semantic HTML
Using the right tags (header, nav, main, article…) instead of `div` everywhere.
20 minutes
6
Web Accessibility (a11y)
Building sites that also work with screen readers, keyboards, low contrast, limited mobility.
30 minutes
15
Git and GitHub Basics
Track changes, branch, merge, push, open a pull request.
30 minutes

Core

7
JavaScript Syntax Essentials
Variables, functions, conditionals, loops, arrays, objects. The base for everything else.
30 minutes
8
DOM Manipulation
Read and change the page from JavaScript: querySelector, addEventListener, classList.
25 minutes
9
Async, Promises, async/await
Run things in parallel without blocking, and wait for results cleanly.
30 minutes
10
JavaScript Modules and Imports
Split your code into files that import only what they need.
20 minutes
11
Closures and Scope in JavaScript
Understand why a function "remembers" the variables where it was created, even after that context is gone.
25 minutes
12
fetch API and REST basics
Talk to a server from the browser: GET, POST, JSON, errors.
25 minutes
13
npm, yarn, pnpm
Install and manage JavaScript packages, lockfiles, semver.
20 minutes
14
Vite and modern build tools
Why a build step exists and how Vite makes it instant.
25 minutes
16
React Fundamentals
Components, JSX, props, rendering. The core mental model.
40 minutes
19
React Router
Multiple pages in a React app: routes, links, layouts, params.
25 minutes
21
Browser DevTools
Inspect the DOM, debug JS, watch network, profile performance.
20 minutes
24
Forms and Validation
Native form validation, custom rules, accessible error messages.
25 minutes

Advanced

17
React Hooks
useState, useEffect, useMemo, useRef and how to use them well.
35 minutes
18
React State Management
Local state, context, libraries (Zustand, Redux). Pick the right one.
30 minutes
20
Component Design Patterns
Composition, slots, render props, custom hooks. Reusable code that does not hurt.
30 minutes
22
Web Performance Basics
Why pages are slow and the cheap fixes that move the needle.
30 minutes
23
Testing with Vitest
Unit-test components and utility functions; trust your refactors.
30 minutes