Scribd
Importer
46 vues1 page

Exercices Avances HTML CSS JS

Le document présente six exercices de développement web, chacun axé sur des compétences spécifiques. Les exercices incluent la création de mises en page responsives avec Flexbox, une galerie d'images interactive, la manipulation de tableaux et d'objets en JavaScript, ainsi qu'un formulaire avancé avec validation. Chaque exercice demande l'utilisation de HTML, CSS et JavaScript pour réaliser des fonctionnalités dynamiques et interactives.

Transféré par

noeltyna96
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
46 vues1 page

Exercices Avances HTML CSS JS

Le document présente six exercices de développement web, chacun axé sur des compétences spécifiques. Les exercices incluent la création de mises en page responsives avec Flexbox, une galerie d'images interactive, la manipulation de tableaux et d'objets en JavaScript, ainsi qu'un formulaire avancé avec validation. Chaque exercice demande l'utilisation de HTML, CSS et JavaScript pour réaliser des fonctionnalités dynamiques et interactives.

Transféré par

noeltyna96
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Exercice 1 :

Exercice 1 : Mise en page responsive avec Flexbox


Crée une page web avec 3 sections alignées horizontalement sur écran large et empilées
verticalement sur écran étroit (mobile).
- Utilise Flexbox pour organiser les éléments
- Chaque section contient un titre, une image et un paragraphe
- Ajoute du style CSS pour une présentation élégante et responsive

Exercice 2 : Galerie d’images interactive


Crée une galerie avec au moins 6 images disposées avec Flexbox.
- Les images doivent s’adapter à la taille de l’écran (responsive)
- Lorsque l'on clique sur une image, une version agrandie s’affiche dans une lightbox
- Utilise HTML, CSS, et JavaScript pour gérer l’interaction

Exercice 3 : Manipulation de tableau en JavaScript


Crée une application simple en HTML/JS qui permet de :
- Ajouter un nom dans un tableau avec un champ texte et un bouton "Ajouter"
- Afficher dynamiquement la liste des noms dans la page
- Supprimer un nom en cliquant sur un bouton "Supprimer" à côté de chaque nom

Exercice 4 : Gestion d’un dictionnaire (objet) en JavaScript


Crée une interface HTML pour gérer une liste d’étudiants sous forme d’objet JS :
ex: const etudiants = { 'Paul': 15, 'Alice': 18 };
- Ajoute un champ pour insérer un nom et une note
- Affiche dynamiquement la liste (nom + note)
- Ajoute un bouton pour calculer et afficher la moyenne des notes

Exercice 5 : Formulaire avancé avec validation JavaScript


Crée un formulaire contenant : nom, email, mot de passe, confirmation de mot de passe.
- Utilise JavaScript pour valider les champs :
* Vérifie que les champs ne sont pas vides
* Vérifie le format de l’email
* Vérifie que les mots de passe sont identiques et ont au moins 6 caractères
- Affiche des messages d’erreurs ou de succès dynamiquement

Exercice 6 : Tableau de données dynamique avec tri et recherche


Crée une page HTML avec un tableau de données (ex : liste d’articles ou d’utilisateurs).
- Ajoute une barre de recherche pour filtrer les données par nom
- Permets de trier les colonnes par ordre croissant/décroissant en cliquant sur l’en-tête
- Toutes les manipulations doivent se faire en JavaScript (pas de rechargement de page)

Vous aimerez peut-être aussi