Skip to main content

Objectifs examen

L'examen se veut etre une suite de la matière vue en cours et des exercices déjà réalisée.
Vous pouvez suivre les consignes du sujet d'examen proposeé ou réaliser votre propre projet.

Afin de pouvoir évaluer tout le monde sur une même base voici le listing de ce qui est attendue.
Il n'est pas attendue un respect parfait des consignes, une marge d'interprétation, créativité est toujours possible.

1. Structure et Sémantique HTML​

  • Structuration globale : Utilisation correcte des balises structurantes (<header>, <main>, <section>, <footer>).
  • Navigation : Création d'un menu avec des liens internes et externes.
  • Formulaires : Utilisation des balises <form>, <input>, <textarea> et <button>.
  • Attributs spécifiques : Mise en place de l'ouverture de liens dans un nouvel onglet (target="_blank") et gestion des champs obligatoires (required).
  • Multimédia : Intégration d'images (<img>) ou d'une vidéo

2. Mise en page et Design CSS (Layout)​

  • Flexbox : Organisation des "cards" ( passage à la ligne quand plus de place disponible ) et alignement des éléments du menu (logo à gauche, liens à droite).
  • Modèle de boîte: Gestion des marges (margin), du remplissage (padding), des bordures arrondies (border-radius) et des espacements entre les éléments.
  • Positionnement : Décalage de texte (indentation ou marges) et centrage d'éléments (formulaire, copyright).
  • Effets visuels : Application de couleurs de fond (hexadécimal ou rdg ou text), d'ombrages (box-shadow) au survol (hover) et styles de texte (gras, italique, souligné).

3. Responsive Web Design​

  • Media Queries : Adaptation de l'affichage selon la taille de l'écran.
  • Transformation de layout : Passage d'une disposition horizontale ( par exemple le menu ) à une disposition verticale (stacking).
  • Adaptation de contenu : Masquer des éléments, ajustement des marges latérales pour la lisibilité, augmentation de la taille de la police.

4. Interaction et Expérience Utilisateur (UX)​

  • États de survol (:hover) : Modification visuelle des boutons et des cards pour indiquer l'interactivité.
  • Accessibilité de base : Utilisation de placeholders pour guider la saisie dans le formulaire.
  • Validation HTML5 : Exploiter la validation native du navigateur pour les champs obligatoires du formulaire.

5. Gestion de projet et Ressources​

  • Gestion des assets : Intégration de ressources externes (images distantes ou vidéos, logo).
  • Organisation des fichiers : Capacité à structurer un projet propre pour un rendu sous forme d'archive ZIP.

6. Outils tiers​

  • Debug Utilisation de la console de debug du navigateur.
  • Gestion des connaissances Utilisation des sites de références (W3c, mdn) pour vérifier, consolider ses connaissances.
  • Verification de son travail Possibilité d'utilisé les outils du navigateur pour tester la responsivité ou un plugin type lighthouse