0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Construisez des interfaces utilisateur rapides et simples avec les techniques modernes à Svelte Academy.

🤖 Alimenté par l'IA📚 41 cours👥 100 000+ apprenants⭐ Note 4,9
Présentation du Cours

Construisez des Interfaces Réelles avec Svelte et SvelteKit

Svelte adopte une approche fondamentalement différente de React et Vue — au lieu d'expédier un runtime au navigateur, il compile vos composants en JavaScript vanilla hautement efficace au moment de la construction. Le résultat : des bundles plus petits, des temps de chargement plus rapides et moins de boilerplate. SvelteKit, le framework d'application officiel, ajoute le routing basé sur les fichiers, le rendu côté serveur, les form actions et les adaptateurs de déploiement pour que vous puissiez livrer des applications production-grade sur n'importe quelle plateforme. Cette piste couvre les deux, du premier composant à l'architecture full-stack.

Ce Que Vous Apprendrez

Vous commencerez par le modèle de composants de Svelte — props, syntaxe de template, conditionnelles, boucles et two-way binding — puis progresserez vers le système de réactivité, les fonctions de cycle de vie et les primitives de store : writable, readable, derived et custom stores. Du côté de l'interface utilisateur, vous travaillerez avec les slots, l'API Context, les transitions CSS, les animations et Svelte Motion. Les chapitres SvelteKit couvrent le routing, le data loading, le SSR et le prerendering, les form actions, les API routes, les hooks, la gestion des erreurs, les layouts avancés, les patterns d'authentification et les adaptateurs de déploiement. La piste couvre également le système de runes de Svelte 5, les tests avec des tests unitaires et Playwright E2E, l'intégration de bibliothèques tierces et les pratiques de sécurité de SvelteKit.

Le Parcours d'Apprentissage

Quarante et un cours progressent de A1 à C1. Les sept premiers cours établissent les fondations : composants, props, événements et syntaxe de template. B1 introduit les stores, les slots, les transitions et vos premières pages SvelteKit et patterns de data-loading. B2 — le bloc le plus important — explore les form actions, les API routes, les hooks, la réactivité avancée, les Svelte Actions, les animations personnalisées, les patterns d'authentification, les adaptateurs, les runes de Svelte 5, les tests et la sécurité. La piste se termine à C1 avec les runes avancées, les patterns de composants avancés, le streaming de SvelteKit, l'optimisation des performances, la gestion d'état à grande échelle et une application SvelteKit full-stack capstone.

Comment Cela Fonctionne

Chaque cours est divisé en courtes leçons ciblées que vous complétez dans l'éditeur de code intégré avec rétroaction en temps réel. Un tuteur IA est disponible chaque fois que vous êtes bloqué, et chaque concept est renforcé par des exercices pratiques avant de passer au sujet suivant.

Commencer →

Comment Tu Vas Apprendre

🎯
Leçons Interactives
Exercices de codage pratiques avec retours en temps réel
🤖
Tuteur IA
Obtiens une aide instantanée de notre IA quand tu es bloqué
💻
Éditeur Intégré
Écris et exécute du code directement dans ton navigateur
🏆
Certificat
Obtiens un certificat en complétant le cours
Programme

41 Cours

Tous les cours du parcours d'apprentissage Sveltejs Academy.

01

Bienvenue dans Svelte

A13 leçons

Comprenez ce qu’est Svelte, pourquoi il adopte une approche totalement différente de React ou Vue pour créer des interfaces utilisateur et…

02

Introduction et configuration de Svelte

A14 leçonsPRO

Découvrez Svelte en comprenant ce qui le distingue des autres frameworks, en configurant votre premier projet et en explorant sa structure…

03

Votre premier composant Svelte

A14 leçonsPRO

Apprenez à écrire des composants Svelte à partir de zéro, à utiliser des variables réactives, à interpoler des expressions et à créer des v…

04

Props et communication entre composants

A24 leçonsPRO

Transmettez des données entre composants Svelte avec des props, définissez des valeurs par défaut et transmettez élégamment les props avec…

05

Syntaxe des modèles : conditions et boucles

A24 leçonsPRO

Contrôlez ce qui s’affiche dans vos modèles Svelte avec des blocs conditionnels, parcourez des tableaux avec des blocs each et forcez les n…

06

Événements et gestion des événements

A24 leçonsPRO

Gérez les événements du DOM dans Svelte, utilisez les modificateurs d’événements pour simplifier les cas courants, déclenchez des événement…

07

Liaison bidirectionnelle

A24 leçonsPRO

Synchronisez les champs de formulaire et les éléments du DOM avec les variables Svelte à l’aide des directives bind: pour le texte, les cas…

08

Fonctions du cycle de vie

B14 leçonsPRO

Contrôlez ce qui se produit à chaque étape de la vie d’un composant Svelte avec onMount, onDestroy, beforeUpdate, afterUpdate et l’utilitai…

09

Stores Svelte : inscriptibles et lisibles

B14 leçonsPRO

Partagez un état réactif entre composants avec les primitives de store intégrées à Svelte, abonnez-vous avec la notation abrégée $ et créez…

10

Stores dérivés et stores personnalisés

B14 leçonsPRO

Composez des stores Svelte en dérivant des stores calculés depuis une ou plusieurs sources et créez des stores entièrement personnalisés qu…

11

Slots et composition de composants

B14 leçonsPRO

Insérez du contenu dans des composants Svelte avec des slots par défaut et nommés, fournissez un contenu de secours et vérifiez si les slot…

12

Transitions CSS

B14 leçonsPRO

Animez les éléments qui entrent dans le DOM ou en sortent avec les directives de transition intégrées de Svelte, configurez la durée et l’a…

13

Animations CSS

B14 leçonsPRO

Allez au-delà des transitions avec la directive animate de Svelte pour réordonner des listes, créer des animations de ressort fondées sur l…

14

Routage et pages SvelteKit

B14 leçonsPRO

Parcourez le système de routage fondé sur les fichiers de SvelteKit, créez des routes dynamiques avec des paramètres et utilisez des fichie…

15

Chargement des données avec SvelteKit

B14 leçonsPRO

Chargez les données de vos pages avec les fonctions load de SvelteKit, gérez élégamment les erreurs et exécutez la logique réservée au serv…

16

API de contexte

B14 leçonsPRO

Transmettez des données profondément dans l’arbre des composants sans les faire passer par chaque prop grâce à l’API Context de Svelte, et…

17

SEO et métadonnées SvelteKit

B14 leçonsPRO

Améliorez la visibilité en définissant des balises meta dynamiques, des cartes OpenGraph, des données structurées JSON-LD et des URL canoni…

18

Actions de formulaire SvelteKit

B24 leçonsPRO

Gérez les envois de formulaires HTML côté serveur avec les actions de formulaire SvelteKit, améliorez-les progressivement avec JavaScript e…

19

Routes d’API SvelteKit

B24 leçonsPRO

Créez des points de terminaison d’API RESTful et en flux continu dans SvelteKit avec des fichiers +server.js, gérez plusieurs méthodes HTTP…

20

Hooks SvelteKit

B24 leçonsPRO

Interceptez et transformez chaque requête avec les hooks serveur de SvelteKit, centralisez la journalisation des erreurs et composez plusie…

21

Gestion des erreurs SvelteKit

B24 leçonsPRO

Offrez une excellente expérience utilisateur en cas de problème en personnalisant les pages d’erreur, en distinguant les erreurs attendues…

22

Réactivité avancée de Svelte

B24 leçonsPRO

Approfondissez votre compréhension du système réactif de Svelte : ordre des instructions réactives, choix entre stores et état local, et pr…

23

Actions Svelte

B24 leçonsPRO

Attachez des comportements impératifs réutilisables aux éléments du DOM avec les actions Svelte, gérez les paramètres et les mises à jour e…

24

Transitions et animations personnalisées

B24 leçonsPRO

Écrivez des fonctions de transition Svelte personnalisées à partir de zéro, contrôlez les paramètres de durée et créez des transitions de m…

25

Mouvement avec Svelte

B24 leçonsPRO

Animez des valeurs au fil du temps avec les stores de mouvement spring et tweened de Svelte, utilisez des fonctions d’interpolation et appl…

26

Mises en page SvelteKit avancées

B24 leçonsPRO

Maîtrisez le système avancé de mise en page de SvelteKit : mises en page groupées, redéfinitions au niveau des routes, sortie des mises en…

27

Modèles d’authentification SvelteKit

B24 leçonsPRO

Mettez en œuvre l’authentification dans SvelteKit avec des sessions fondées sur les cookies, des JWT sécurisés, la protection des routes da…

28

Adaptateurs et déploiement SvelteKit

B24 leçonsPRO

Déployez des applications SvelteKit partout grâce à l’adaptateur approprié : sites statiques, serveurs Node.js, Vercel et Cloudflare Worker…

29

Svelte 5 : introduction aux runes

B24 leçonsPRO

Découvrez le système de runes de Svelte 5, qui remplace la magie du compilateur par des primitives réactives explicites pour l’état, les va…

30

Svelte 5 : props et snippets

B24 leçonsPRO

Utilisez $props() pour typer les props des composants ainsi que la nouvelle syntaxe des snippets avec {#snippet} et {@render} afin de compo…

31

SSR et prérendu avec SvelteKit

B24 leçonsPRO

Contrôlez la stratégie de rendu pour chaque route dans SvelteKit : choisissez entre load universel et réservé au serveur, pré-rendez les pa…

32

Tester Svelte : tests unitaires

B24 leçonsPRO

Écrivez des tests unitaires fiables pour les composants et stores Svelte avec Vitest et @testing-library/svelte, en couvrant le rendu, les…

33

Tester Svelte : tests E2E avec Playwright

B24 leçonsPRO

Écrivez des tests de bout en bout pour les applications SvelteKit avec Playwright, en couvrant la navigation entre les pages, les interacti…

34

Intégration de bibliothèques tierces

B24 leçonsPRO

Ajoutez Tailwind CSS, des visualisations de données D3.js, des cartes Leaflet et des éditeurs de texte enrichi à vos projets SvelteKit avec…

35

Sécurité SvelteKit

B24 leçonsPRO

Renforcez votre application SvelteKit contre les attaques CSRF, XSS et par injection, gérez les variables d’environnement en toute sécurité…

36

Svelte 5 : runes avancées

C14 leçonsPRO

Explorez les modèles avancés de runes de Svelte 5, notamment l’état brut, les dérivations complexes, le nettoyage manuel des effets et la m…

37

Modèles avancés de composants

C14 leçonsPRO

Créez des API de composants Svelte sophistiquées et réutilisables avec des render props utilisant des snippets, des composants d’ordre supé…

38

Diffusion en continu avec SvelteKit

C14 leçonsPRO

Accélérez le chargement initial des pages en diffusant les promesses des fonctions load, en différant les données lentes et en diffusant le…

39

Performances de SvelteKit

C14 leçonsPRO

Optimisez les performances de vos applications SvelteKit grâce à la division automatique du code, à l’amélioration de la gestion des images…

40

Gestion de l’état à grande échelle

C14 leçonsPRO

Concevez de grandes applications Svelte avec des modèles de stores par module fonctionnel, des bus d’événements, des mises à jour optimiste…

41

Créer une application SvelteKit full-stack

C14 leçonsPRO

Combinez tout ce que vous avez appris pour créer une application full-stack prête pour la production, avec authentification, base de donnée…

FAQ

Questions Fréquemment Posées

Le cours Sveltejs Academy est-il gratuit ?

Oui. Tu peux commencer le cours Sveltejs Academy gratuitement et compléter ses leçons interactives sans frais. Un abonnement PRO optionnel déverrouille des outils IA avancés et un certificat partageable.

Ai-je besoin d'expérience préalable pour apprendre HTML ?

Non. Le cours commence par les fondamentaux et progresse graduellement vers des sujets plus avancés, tu peux donc commencer même sans expérience préalable en HTML.

Comment vais-je apprendre HTML sur CoddyKit ?

Tu apprends en faisant. Des leçons interactives courtes associent une explication claire avec un exercice de codage pratique qui s'exécute en temps réel, et un tuteur IA disponible 24h/24 offre une aide personnalisée dès que tu es bloqué.

Puis-je obtenir un certificat en complétant Sveltejs Academy ?

Oui. Les apprenants PRO peuvent passer un examen et obtenir un certificat de réussite partageable avec un code vérifiable pour le cours Sveltejs Academy.

Puis-je apprendre HTML sur mon téléphone ?

Oui. CoddyKit est disponible sur le web et sous forme d'applications iOS et Android natives, tu peux donc apprendre HTML sur n'importe quel appareil et ta progression se synchronise entre eux.

Commencez Sveltejs Academy Maintenant

Rejoignez des milliers d'apprenants maîtrisant la programmation avec des cours alimentés par l'IA.

Commencer Gratuitement →Parcourir Tous les Cours