Parcours Frontend Development with Svelte - Apprentissage en Ligne avec Certificat

Frontend Development with Svelte

Beginner

0.0

0 reviews

0 Learners

Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …

188

Chapters

Learning hours

218

Assignments

AI Assistant

Shareable Certificate

Résultats

Track content

Related courses and projects

Témoignages

Caractéristiques

Tarification

Résultats

Track content

Related courses and projects

Témoignages

Caractéristiques

Tarification

Ce que vous apprendrez

Structure webpages using semantic HTML

Create reusable Svelte components and reactive UI elements

Fetch and display external API data

Style interfaces with CSS and Tailwind CSS

Handle forms, events, and dynamic rendering

Build responsive layouts for different screen sizes

Build interactive frontend logic with JavaScript

Work with shared state using Svelte stores

Organize modern frontend projects and reusable UI patterns.

Learning track content

Welcome to Modern Web Development

Understanding How Websites and the Internet Work

Frontend vs Backend Development

Why Developers Use JavaScript Frameworks Like Svelte

Setting Up Your Development Environment

Bienvenue dans le HTML et le Développement Web

Compréhension des balises HTML

Travail avec les attributs HTML

Compréhension des balises appariées et simples en HTML

Balisage de texte

Organisation des listes

Défi : Créer le Paragraphe de Votre Première Page Web

Challenge: Créer une page Web de présentation personnelle

Défi : Concevoir une page Web de présentation de films

Utilisation des liens

Ajout de boutons

Défi : Créer des liens vers des sites Web populaires

Validation de votre code HTML selon les meilleures pratiques

Compréhension de la structure d'un document HTML

Le Rôle de l'En-Tête du Document

Défi : Structurer Correctement un Document HTML

Ajout d'images en HTML

Challenge: Travailler Avec des Images

Travail avec des images cliquables, des légendes et l'optimisation

Création et structuration de tableaux en HTML

Défi : Concevoir un Tableau HTML Fonctionnel

Introduction Aux Formulaires Html

Fondamentaux de la création de formulaires en HTML

Utilisation des étiquettes pour une meilleure accessibilité des formulaires

Amélioration des formulaires avec des attributs d'entrée

Exploration des différents types de champs de saisie en HTML

Défi : Créer un formulaire avec des champs et des étiquettes

Utilisation de l'élément Textarea pour la Saisie Multiligne

Utilisation de l'élément select pour les menus déroulants

Utilisation de l’élément Datalist pour des suggestions de saisie prédéfinies

Regroupement des éléments de formulaire pour une meilleure structure

Ce qu'est le CSS et pourquoi il est important

Connexion du CSS à HTML

Sélection d'Éléments de Manière Simple

Mise en Forme du Texte et des Couleurs

Ajout d'Effets au Survol

Défi : Stylisez Votre Première Page Web

Mise en Forme du Texte pour une Meilleure Lisibilité

Travail avec les polices et les propriétés de police

Ajout de Polices Personnalisées

Défi : Améliorer la Conception d'un Article de Blog

Comprendre le Modèle de Boîte de Manière Pratique

Marge et Remplissage Simplifiés

Dimensionnement de la Boîte et Contrôle de la Largeur

Propriété Display : Block, Inline et Inline-Block

Défi : Corriger une Mise en Page Défectueuse

Pourquoi Flexbox Existe

Contrôle de la Direction

Justification du contenu horizontalement

Alignement Vertical des Éléments

Travail avec les Éléments Flex

Défi : Créer une Mise en Page de Carte Boutique à l’Aide de Flexbox

Défi : Créer une Carte de Blog Verticale avec Flexbox

Compréhension des Conteneurs et Éléments de Grille

Définition des Lignes et des Colonnes

Espaces de Grille et Alignement

Création d'une Mise en Page Réelle

Utilisation des Couleurs d'Arrière-Plan

Application d'Images de Fond

Utilisation des Images en CSS

Création d'Effets avec des Pseudo-Éléments Décoratifs

Ajouter des Ombres pour la Profondeur

Défi : Créer un Composant Carte Moderne

Première Application JavaScript Sur la Console

Défi : Afficher une sortie

Défi : Afficher Plusieurs Lignes

Gestion des Nombres

Défi : Travailler Avec Les Nombres

Défi : Calculer la vitesse d'une voiture

Défi : Calcul de l'Aire d'un Trapèze

Affichage de Plusieurs Valeurs

Défi : Afficher une Sortie Significative dans la Console

Comment Utiliser les Commentaires en JavaScript ?

Défi : Ajouter un Commentaire

Commentaires Multi-Lignes

Challenge: Commenter du code

Qu'est-ce que JavaScript, en fait ?

Stockage des Données

Défi : Déclaration d'une Variable

Défi : Accéder aux Données depuis une Variable

Défi : Correction des Noms de Variables

Défi : Réaffectation d'une Variable

Constantes

Challenge: Déclaration et Utilisation des Constantes

Effectuer des Opérations Arithmétiques sur des Variables

Défi : Création d'un Calculateur de Salaire

Défi : Ajustement du Salaire avec une Prime

Exploration des types de données primitifs

Défi : Déclaration d'une Valeur Booléenne

Comment Différents Types de Données Interagissent

Défi : Concaténation de chaînes

Défi : Création de Profil Utilisateur et Détails d'Activité

Opérateurs de comparaison

Défi : Vérification de l'Éligibilité Selon l'Âge

L'instruction `if`

Défi : Recommandateur de Tenue Basé sur la Météo

Défi : Pair ou Impair

Instructions Conditionnelles Imbriquées

La Clause `else`

Défi : Conseiller de Température

La Clause `else if`

Défi : Catégoriseur de Notes

Opérateur Logique « AND »

Défi : Vérifier si un Nombre est Pair et Positif

Opérateur Logique Ou

Défi : Accès au Système de Contrôle

Qu'est-ce Qu'une Fonction ?

Défi : Fonction Simple

Défi : Calcul de la Vitesse d'une Voiture

Portées

Transmission de données dans les fonctions

Défi : Correction de la Fonction de Vitesse

Défi : Amélioration du Classificateur de Notes

Défi : Définition d'une Fonction Composée

Retour des Données Depuis les Fonctions

Valeurs par défaut

Défi : Répondeur Automatique d'E-mails avec Paramètres par Défaut

Qu'est-ce Que les Tableaux ?

Défi : Définition d’un Tableau

Défi : Indexation

Ajout de Valeurs à un Tableau

Défi : Ajout d’Éléments à un Tableau

Suppression d'Éléments d'un Tableau

Défi : Pratique de `pop` et `shift`

La Propriété `length`

Défi : Compter les éléments

La Méthode `includes`

Défi : Recherche d'Animaux dans le Zoo

La Boucle `for`

Défi : Afficher une Séquence

La Boucle `while`

Défi : Affichage de la Suite de Fibonacci

La Boucle `do-while`

Défi : Multiple Aléatoire de 7

Utilisation des Boucles avec les Tableaux

Défi : Trouver le Prix Moyen des Articles

Résumé

What Svelte Is and Why Developers Use It

How Svelte Differs from React and Vue

Setting Up a Svelte Project with Vite

Understanding the Svelte Project Structure

Understanding .svelte Files

Your First Svelte Component

Displaying Data with Curly Braces

Passing Data with Props

Default Prop Values

Scoped Component Styles

Creating Reusable Components

Reactive Variables

Reactive Statements

Two-Way Binding with bind:

Conditional Rendering with {#if}

Rendering Lists with {#each}

Store Subscriptions with $

Sharing State Across Components

Fetching Data from APIs

Loading and Error States

Search and Filtering

Working with Async Data

Svelte Transitions

Fade Fly and Slide Animations

Parent and Child Components

Slots and Component Composition

Working with Forms and Inputs

Form Validation

Submitting Form Data

Organizing a Svelte Application

Building Responsive Layouts

Building a Complete Frontend Application

What is Tailwind CSS?

Installing Tailwind in a Svelte Project

Styling Text Colors and Spacing

Building Layouts with Flexbox and Grid

Responsive Design with Tailwind

Hover Focus and Active States

Conditional Classes in Svelte

Building Reusable Buttons and Cards

Styling Forms and Inputs

Final Project Build a Settings Page UI

Boostez vos compétences techniques !

avec jusqu'à 55% de réduction

Features:

*Tracks not included in Pro plan

500+ Cours les mieux notésCopilote IA de pointe

Parcours d'étude personnalisés40+ Projets pratiques réels

Sans annulation, avant la fin du plan sélectionné avec réduction, j'accepte que Codefinity facturera automatiquement $104 tous les 3 mois jusqu'à ce que j'annule. En savoir plus sur la politique d'annulation et de remboursement dans Conditions d'Abonnement.

Recommended Courses and Projects

HTML Ultime

Apprenez les bases du HTML (HyperText Markup Language), le fondement du développement web. Ce cours destiné aux débutants couvre les balises, attributs, éléments et la structuration des pages web. Acquérez des compétences pratiques pour créer des titres, paragraphes, listes, images, liens, formulaires et tableaux. Découvrez les bonnes pratiques, l’optimisation et l’accessibilité web. Commencez votre parcours en développement web avec le HTML.

Introduction à JavaScript

Plongez dans le monde du langage le plus populaire pour le développement front-end : JavaScript. JavaScript est un langage intégré dans presque tous les navigateurs et peut être utilisé pour une grande variété de tâches. Découvrez les fonctionnalités de base et préparez-vous aux défis ainsi qu’aux techniques de programmation plus avancées.

Fondamentaux de CSS

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Principes Fondamentaux du HTML

Maîtrisez les bases du HTML pour créer des contenus web bien structurés et accessibles. Apprenez à organiser les documents à l'aide de balises, d'éléments et d'attributs. Travaillez efficacement avec le texte, les listes, les images, l'audio et la vidéo pour enrichir les pages web. Créez des tableaux pour organiser les données et des formulaires pour la saisie et l'interaction des utilisateurs. Découvrez le HTML sémantique afin d'améliorer l'accessibilité et de construire des structures de sites web complètes et fonctionnelles depuis zéro.

Structures de Données JavaScript

Apprenez à travailler avec assurance avec les données en JavaScript en maîtrisant les objets et les tableaux. Comprenez comment créer, accéder et gérer efficacement les propriétés et méthodes des objets. Approfondissez les techniques avancées de manipulation d’objets, y compris l’itération, la duplication et la déstructuration pour un code plus lisible. Acquérez une base solide dans la gestion des tableaux et apprenez à organiser, parcourir et modifier efficacement les éléments de tableau. Maîtrisez les méthodes avancées de tableau telles que map, filter, find et sort pour transformer et traiter les données efficacement dans vos applications.

Mise en page CSS, Effets et Sass

Améliorez vos compétences en stylisation en maîtrisant des techniques CSS avancées pour la conception web moderne. Positionnez et gérez les éléments avec précision grâce à des stratégies de positionnement avancées. Créez des transitions fluides et des animations attrayantes pour optimiser l'expérience utilisateur. Transformez et manipulez les éléments pour des effets visuels dynamiques. Concevez des interfaces réactives qui s'adaptent à tous les appareils et rationalisez votre flux de travail avec des préprocesseurs CSS tels que Sass.

Introduction au Marketing Numérique

Ce cours de marketing complet offre un voyage approfondi à travers les fondamentaux et les stratégies avancées du marketing numérique. Explorez des domaines clés tels que le SEO, le PPC, les médias sociaux et l'IA tout en apprenant à élaborer des stratégies qui donnent des résultats. Chaque section comprend des exemples pratiques et des outils pour solidifier votre compréhension. Le cours se termine par un projet pratique, vous permettant de créer et de présenter votre propre plan marketing complet.

Ninja JavaScript

Bienvenue dans le cours Ninja JavaScript ! Ce cours engageant et interactif est conçu pour vous initier aux fondamentaux de la programmation JavaScript à travers un jeu amusant et éducatif. Vous guiderez un ninja à travers divers défis, en utilisant JavaScript pour contrôler les mouvements et interagir avec des objets comme des sushis. En commençant par les bases, vous apprendrez à naviguer sur la carte, à ramasser et à placer des sushis, et à progresser progressivement vers des concepts de programmation plus complexes tels que les fonctions, les boucles et les instructions conditionnelles. Chaque chapitre offre une pratique pratique pour renforcer votre apprentissage, culminant dans des défis passionnants qui testent vos compétences. Que vous soyez un débutant complet ou que vous cherchiez à affiner vos capacités de codage, ce cours offre une expérience d'apprentissage complète et agréable. Rejoignez-nous et devenez un ninja du codage !

Logique et Interaction en JavaScript

Maîtrisez les concepts essentiels de JavaScript, notamment les classes, la manipulation du DOM, la gestion des événements et la programmation asynchrone. Apprenez à créer des applications web dynamiques et interactives en gérant les interactions utilisateur, en récupérant et affichant des données, et en traitant efficacement les opérations asynchrones. Grâce à un mélange de théorie, de défis pratiques et d'exemples concrets, ce cours vous dote des compétences pratiques nécessaires au développement web moderne.

Introduction à la Blockchain

Explorez le monde révolutionnaire de la technologie blockchain et sa première application majeure, Bitcoin. Plongez dans les subtilités du fonctionnement de la blockchain, les bases techniques de Bitcoin, ainsi que les implications générales et les tendances futures de ce domaine dynamique. Acquérez une compréhension globale de la technologie qui transforme les industries et remet en question les notions traditionnelles de monnaie et de sécurité des données.

Fondamentaux du Réseau

Fondamentaux du réseau est un cours complet conçu pour les débutants et les apprenants intermédiaires souhaitant acquérir des compétences pratiques en réseau. Couvrant tout, des concepts de base aux applications avancées, le cours aborde des sujets clés tels que les types de réseaux, l'adressage IP, les protocoles et la sécurité des réseaux. À la fin de ce cours, vous disposerez des compétences essentielles pour dépanner, sécuriser et gérer efficacement les réseaux, posant ainsi une base solide pour une spécialisation ultérieure en réseau.

Introduction aux Tests Manuels et à l'Assurance Qualité dans le Développement Web

Dans ce cours, l'utilisateur recevra une introduction sur la façon d'effectuer des tests manuels principalement sur des applications web. Les compétences acquises dans ce cours peuvent également être utilisées dans les tests automatisés.

Discover more Learning Tracks

parcours

Compétences Bureautiques Essentielles

Débutant

Business AI Toolkit

Débutant

DevOps Specialist

Débutant

Supervised Learning Foundations

Débutant

Python from Zero to Hero

Débutant

C Programming Fundamentals

Débutant

Project Management Fundamentals

Débutant

Data Analyst with Python

Débutant

Fondations Java

Débutant

Visualisation de Données avec Python

Intermédiaire

Frontend Development with Angular

Débutant

Ingénieur en Apprentissage Automatique

Intermédiaire

Pourquoi les gens choisissent Codefinity

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results

Environnement de codage interactif

Plongez dans notre environnement interactif : écrivez et exécutez votre code avec des retours en temps réel et des indicateurs de réussite—apprenez en faisant à chaque étape.

Assistance alimentée par IA

Utilisez l'assistant IA intégré pour expliquer les erreurs, suggérer des corrections ou répondre à toute question sur votre code—restez productif et ne soyez jamais bloqué.

Check your progress

Concluez chaque module avec un quiz rapide qui fournit un retour instantané, suit votre progression et garantit que vous avez maîtrisé les concepts clés.

Promote your expertise

Obtenez votre certificat reconnu par l'industrie à la fin et partagez-le sur LinkedIn en un clic—laissez votre réseau voir ce que vous pouvez faire.

Fiable par les employés des grandes entreprises
et les étudiants des meilleures universités

Accès complet au catalogue

Un abonnement ouvre ce cours et tout notre catalogue de projets et compétences.

Features:

500+ Cours les mieux notésCopilote IA de pointe

Parcours d'étude personnalisés40+ Projets pratiques réels

Essayez Codefinity en toute confiance – garantie de remboursement de 30 jours incluse

Pour vous accueillir chez Codefinity, nous offrons jusqu'à 64% de réduction sur nos cours. De plus, nous avons une garantie de remboursement de 30 jours, pour que vous puissiez nous essayer sans risque.Nous avons vraiment hâte de vous accueillir sur notre plateforme et nous nous engageons à rendre votre expérience d'apprentissage facile, interactive et amusante.

Ready to get started?

Pro

Best intro offer

Ultimate

A complete experience
to kickstart your career

500+ Top-Rated courses

Completion certificates

Early access to new courses

40+ hands-on Real-world projects

Personalized study tracks

Unlimited workspaces

Accès instantané à 500+ cours

Apprentissage illimité, accès instantanéAccédez à tous les cours et parcours, y compris le contenu vidéo, les quiz et les matériaux approfondis—commencez à apprendre à tout moment.

Certificats reconnus par l'industrieObtenez des certificats qui valident votre expertise et boostent votre carrière dans la tech, l'IA, les données, le marketing, et au-delà.

Apprentissage assisté par IAObtenez des indices personnalisés, des retours en temps réel et des explications alimentées par IA pour accélérer votre progression.

En expansion constante : nouveaux cours et parcours de carrièreRestez en avance avec des cours constamment mis à jour, des feuilles de route de carrière, des défis et des tests pratiques.

Développez des compétences qui comptentMaîtrisez des compétences recherchées avec des cours en IA, science des données, programmation, marketing, automatisation, développement web, et plus.

Apprentissage interactif et fluideParticipez à des projets pratiques, des exercices réels et une expérience d'apprentissage intuitive — aucun outil supplémentaire nécessaire.

Ce que vous apprendrez

Compétences Bureautiques Essentielles

Business AI Toolkit

DevOps Specialist

Supervised Learning Foundations

Python from Zero to Hero

C Programming Fundamentals

Project Management Fundamentals

Data Analyst with Python

Fondations Java

Visualisation de Données avec Python

Frontend Development with Angular

Ingénieur en Apprentissage Automatique

Pourquoi les gens choisissent Codefinity

Fiable par les employés des grandes entreprises et les étudiants des meilleures universités

Accès complet au catalogue

Essayez Codefinity en toute confiance – garantie de remboursement de 30 jours incluse

Accès instantané à 500+ cours

Fiable par les employés des grandes entreprises
et les étudiants des meilleures universités