Développement web Exercices

Aiguisez vos compétences en développement web grâce à une collection d'exercices pratiques. Cette page propose des défis concrets conçus pour simuler des scénarios réels. Dépassez la théorie et appliquez vos connaissances en HTML, CSS et JavaScript pour construire des composants web fonctionnels et résoudre des problèmes de développement courants. Chaque exercice offre l'opportunité de renforcer les concepts fondamentaux et de développer votre maîtrise des technologies front-end et back-end.

Votre premier laboratoire CSS

Votre premier laboratoire CSS

Bonjour et bienvenue sur LabEx! Dans ce premier laboratoire, vous allez apprendre le programme classique 'Hello, World!' en CSS.
LabDéveloppement web
Votre premier laboratoire JavaScript

Votre premier laboratoire JavaScript

Bonjour et bienvenue sur LabEx! Dans ce premier laboratoire, vous allez apprendre le programme classique 'Hello, World!' en JavaScript.
LabDéveloppement web
Cube 3D en rotation

Cube 3D en rotation

Dans ce laboratoire, nous allons créer un cube 3D en rotation en utilisant HTML et CSS. Ce cube aura des faces colorées et tournera indéfiniment, créant un effet visuellement attrayant. Nous vous guiderons à chaque étape du processus pour vous aider à construire ce projet depuis le début.
LabDéveloppement web
Application du module HTTP

Application du module HTTP

Le module http est le module officiel de Node.js pour créer un serveur web, permettant aux développeurs front-end de commencer rapidement avec le développement côté serveur. Créons une application à l'aide de ce module.
ChallengeDéveloppement web
Carte d'étudiant LabEx

Carte d'étudiant LabEx

Dans ce défi, nous allons aider Jane à créer une interface d'application de carte d'étudiant pour une université. L'objectif est de mettre en œuvre la validation des formulaires pour les champs du nom et de l'identifiant étudiant et d'afficher le contenu du formulaire soumis correctement sur la carte. En accomplissant cette tâche, nous nous assurerons que l'entrée du formulaire est validée et que la carte affiche les informations correctes.
ChallengeDéveloppement web
Animations et transitions

Animations et transitions

Dans le monde animé de 'Pet's House', un sanctuaire virtuel pour les amateurs de bêtes, Taylor, un créatif concepteur web, entreprend un voyage pour infuser de la vie dans le site web.
LabDéveloppement web
Bases du CSS et Sélecteurs

Bases du CSS et Sélecteurs

Dans ce laboratoire, vous prendrez les devants en tant que développeur web chargé de créer un site web élégant pour un service d'animal de compagnie en utilisant les techniques et les sélecteurs de base du CSS.
LabDéveloppement web
Modèle de boîte CSS et marges

Modèle de boîte CSS et marges

Dans le paysage numérique animé de 'Pet's House', un site web dédié à la prestation de services de soins premium pour les animaux, notre protagoniste, Jordan, un talentueux développeur web, est chargé d'améliorer la mise en page et la conception du site.
LabDéveloppement web
Site web responsive de Pet's House avec Flexbox

Site web responsive de Pet's House avec Flexbox

Dans la ville animée de Petville, Jordan, un développeur web, est chargé de redessiner le site web 'Pet's House'.
LabDéveloppement web
Présentation des services pour animaux de compagnie avec la grille CSS

Présentation des services pour animaux de compagnie avec la grille CSS

Dans 'La Maison des Animaux', un univers virtuel pour les amateurs d'animaux, Alex, un développeur web, entreprend une quête pour moderniser la présentation de leurs services en utilisant la grille CSS.
LabDéveloppement web
Tableaux et objets

Tableaux et objets

Dans ce laboratoire, nous continuons de suivre Alex dans leur parcours en tant que développeur web dans une startup technologique. La scène se déroule dans l'espace de travail de l'équipe de développement, où Alex est chargé d'améliorer le suivi des finances personnelles en incorporant la capacité de gérer plusieurs enregistrements financiers. Cette fonctionnalité cruciale nécessite d'approfondir les tableaux et les objets de JavaScript, en stockant chaque enregistrement financier sous forme d'objet dans un tableau. L'objectif est de créer une application dynamique et interactive qui ne seulement suit mais également organise efficacement les données financières des utilisateurs. Grâce à cet effort, Alex vise à fournir aux utilisateurs une vue claire de leurs activités financières, rendant ainsi l'application plus utile et attrayante.
LabDéveloppement web
JavaScript et DOM de base

JavaScript et DOM de base

Dans ce laboratoire, vous plongerez dans le monde du développement web du point de vue d'Alex, un jeune développeur web chargé de créer un outil de suivi des finances personnelles dynamique. L'objectif est de construire une application conviviale permettant aux utilisateurs d'entrer et de suivre leurs dépenses et revenus quotidiens. Le but est clair - développer une interface à la fois intuitive et attrayante, garantissant aux utilisateurs de gérer facilement leurs finances sans aucun problème. Ce projet vise non seulement à simplifier la gestion des finances personnelles, mais aussi à vous initier aux concepts fondamentaux de JavaScript et de la manipulation du DOM.
LabDéveloppement web
Stockage et récupération de données

Stockage et récupération de données

Dans ce laboratoire, nous accompagnons Alex, un développeur web déterminé dans une jeune startup technologique en pleine expansion, qui entre maintenant dans le domaine de la persistance des données. Après avoir créé avec succès un mécanisme de suivi et d'affichage des enregistrements financiers dans le suivi des finances personnelles, le prochain défi est de s'assurer que ces enregistrements persistent au cours des sessions de navigateur. L'objectif est de permettre aux utilisateurs de revenir sur l'application et de trouver toutes leurs données précédemment entrées intacts, améliorant ainsi la convivialité de l'application et la satisfaction des utilisateurs. Cette tâche introduit Alex au concept de stockage web, en particulier en utilisant l'API localStorage pour enregistrer et récupérer l'état de l'application.
LabDéveloppement web
Amélioration du logiciel de suivi des finances personnelles

Amélioration du logiciel de suivi des finances personnelles

Dans ce laboratoire, le parcours d'Alex dans le développement du logiciel de suivi des finances personnelles entre dans une étape avancée, en mettant l'accent sur l'amélioration de l'interactivité de l'application grâce à des techniques sophistiquées de gestion d'événements. La scène est mise dans une session de brainstorming au sein de la startup technologique, où Alex propose d'ajouter une fonctionnalité de glisser-déposer pour réordonner les enregistrements financiers. Cet objectif ambitieux vise à offrir aux utilisateurs un moyen intuitif d'organiser leurs enregistrements, reflétant la nature fluide de la gestion des finances personnelles. Pour y arriver, Alex doit explorer les événements DOM avancés et manipuler les éléments de manière à être à la fois visuellement attrayante et conviviale pour l'utilisateur.
LabDéveloppement web
Mise en œuvre du bilan

Mise en œuvre du bilan

Dans ce laboratoire, situé dans la dynamique scène des startups du 'FinTech Valley', vous allez prendre la place d'Alex, un jeune ingénieur logiciel chargé d'améliorer le système de suivi financier d'une société de technologies en rapide croissance. L'équipe financière de l'entreprise a besoin d'un moyen dynamique de visualiser l'état financier global de l'organisation. Votre objectif est d'implémenter une fonctionnalité dans leur application de comptabilité basée sur le web existante qui calcule et affiche le revenu total, les dépenses totales et le solde net, fournissant des informations financières en temps réel.
LabDéveloppement web