متوسط حيّ الكود

Svelte

إطار عمل يعتمد على المُصرِّف لواجهات سريعة وخفيفة.

Svelte is a compiler that turns small, readable components into fast JavaScript, and SvelteKit is the framework that turns those components into a complete website. This track teaches Svelte 5 the modern way, with runes, snippets and event attributes such as onclick, then moves on to SvelteKit 2 routing, load functions and form actions, and finishes with production skills: motion, accessibility, server-side rendering and deployment.

You already know JavaScript, so every lesson goes straight to what Svelte adds, with real examples from a small social app called Nova: a like button, a post card, a leaderboard and a profile page.

الدروس: ٢٤
الوقت: ٣ ساعة
المستوى: متوسط

ابدأ المسار · Why Svelte?

دروس هذا المسار بالإنجليزية حاليًا.

البرونز متاحة
الفضة متاحة
الذهب مقفلة

مستعد لإثبات نفسك؟

ثلاثة امتحانات في انتظارك: البرونز والفضة والذهب.

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

ما ستتمكن من فعله

Build interactive components with the runes $state, $derived, $effect and $props
Render conditions, keyed lists and async data, and handle events and bindings
Compose components with snippets, context and shared state in .svelte.ts modules
Build SvelteKit pages with layouts, dynamic routes, load functions and form actions
Ship accessible, server-rendered apps whose motion respects every user
Build for production with the right adapter and the performance habits that matter

الرحلة

١
الوحدة ١
Why Svelte

The compiler approach, your first component, and styles that stay inside it.

٠ / ٣
٢
الوحدة ٢
Reactivity with runes

$state, deep state, $derived, $effect, $props and $bindable: the tools behind every Svelte 5 component.

٠ / ٥
٣
الوحدة ٣
Template syntax

Conditions, keyed lists, promises, events, two-way bindings, and the class and style directives.

٠ / ٤
٤
الوحدة ٤
Composition

Child content with snippets, sharing data with context, and state that lives in .svelte.ts modules.

٠ / ٣
٥
الوحدة ٥
SvelteKit: routing and data

Routes and layouts from folders, dynamic params, load functions, form actions, errors and redirects.

٠ / ٤
٦
الوحدة ٦
Production

Motion that respects reduced-motion settings, accessibility warnings, SSR and hydration, adapters and speed.

٠ / ٥