Fiche de révision : Front-end de la structure à l’interactivité

📋 Plan du Cours

1. Architecture HTML CSS JavaScript
2. HTML sémantique et validation
3. Accessibilité et expérience utilisateur
4. Cascade et mises en page CSS
5. Responsive design mobile first
6. Fondamentaux du langage JavaScript
7. Fonctions et collections de données
8. Objets et échanges JSON

📖 1. Architecture HTML CSS JavaScript

★ À maîtriser

📌 HTML définit le contenu et sa structure, CSS contrôle l’apparence et la mise en page, tandis que JavaScript orchestre les comportements dans le navigateur.

Compléments

📌 Un développement front-end de qualité cherche un code explicable et maintenable plutôt qu’un simple code qui fonctionne.

💡 Astuce mémo

HTML structure, CSS présente, JavaScript orchestre

📖 2. HTML sémantique et validation

🔑 Notions clés & Définitions

• HTML sémantique : Associe chaque contenu à une balise correspondant à son rôle, comme header, nav, main, section, article, footer, button pour une action et a pour une navigation.

★ À maîtriser

• 🔄 Une structure HTML5 minimale suit cet ordre :
  1. doctype html
  2. html lang="fr"
  3. head avec charset UTF-8, viewport et title
  4. body contenant header, main et footer

Compléments

📌 Avant de chercher un bug CSS, il faut vérifier un titre h1 principal, un ordre logique des titres, la présence des attributs nécessaires et l’absence de HTML inutile ou mal fermé. - W3C

💡 Astuce mémo

Une page lisible comme un bâtiment balisé : header, main, footer

📖 3. Accessibilité et expérience utilisateur

🔑 Notions clés & Définitions

• Accessibilité : WCAG - L’accessibilité consiste à rendre une interface perceptible et utilisable, notamment grâce aux contrastes, aux alternatives textuelles, au clavier, au focus visible et à des zones cliquables sans piège au clavier.

★ À maîtriser

📌 Un champ de formulaire doit être associé à un label explicite par les attributs for et id, et une erreur doit préciser quoi corriger.

• Les états importants d’une action sont :
  • hover
  • focus
  • chargement
  • succès
  • erreur
  • vide

Compléments

📌 ARIA doit compléter une balise HTML native correcte lorsque celle-ci ne suffit pas, par exemple avec aria-expanded pour exposer l’état d’un bouton ouvrant un panneau.

💡 Astuce mémo

POUR : Perceptible, Utilisable

📖 4. Cascade et mises en page CSS

🔑 Notions clés & Définitions

• Cascade CSS : La cascade CSS détermine la règle appliquée lorsque plusieurs règles ciblent un même élément, le sélecteur le plus spécifique l’emportant dans l’exemple présenté.
• Box model : Le box model décrit chaque élément comme l’association d’un contenu, d’un padding, d’une bordure et d’une marge.

📝 Points essentiels

📌 Avec Flexbox, justify-content agit sur l’axe principal, align-items sur l’axe secondaire et gap sur l’espace entre les éléments.

📌 Avec Grid, grid-template-columns permet d’organiser une mise en page en lignes et colonnes, par exemple trois colonnes de 1fr avec repeat(3, 1fr).

💡 Astuce mémo

Flexbox aligne sur un axe, Grid organise lignes et colonnes

📖 5. Responsive design mobile first

★ À maîtriser

• Le responsive mobile first commence par les styles du petit écran, puis ajoute des media queries lorsque l’espace augmente.

Compléments

• Les principaux patterns sont :
  • grille : une colonne puis deux puis trois
  • navigation horizontale vers menu compact
  • sidebar sous le contenu
  • table avec scroll horizontal ou cartes
  • actions empilées sur mobile

📌 Un responsive fiable se teste à 320 px, sur tablette, sur desktop, avec le zoom du navigateur et au clavier seul, en privilégiant rem, %, minmax, clamp, les images responsives et une hauteur de ligne confortable.

💡 Astuce mémo

Une colonne, puis deux, puis trois

📖 6. Fondamentaux du langage JavaScript

🔑 Notions clés & Définitions

• Portée de bloc : La portée de bloc signifie qu’une variable déclarée dans des accolades avec const ou let n’est accessible que dans ce bloc.

★ À maîtriser

📌 En JavaScript moderne, const est utilisé par défaut, let seulement lorsque la liaison doit changer, et var appartient à l’ancien modèle.

• Les types primitifs sont :
  • string
  • number
  • boolean
  • undefined
  • null

📌 Les opérateurs === et !== comparent la valeur et le type, contrairement à == et != qui autorisent des conversions implicites.

Compléments

📌 Les valeurs falsy sont false, 0, "", null, undefined et NaN, tandis que toutes les autres valeurs, y compris [] et {}, sont truthy.

📌 Le ternaire sert à produire une valeur, tandis que if sert à enchaîner plusieurs actions.

💡 Astuce mémo

const ne change pas, let peut changer, var appartient à l’ancien modèle

📖 7. Fonctions et collections de données

🔑 Notions clés & Définitions

• Fonction : Une fonction reçoit une entrée, effectue un traitement et produit une sortie, et une fonction sans return renvoie undefined.

★ À maîtriser

📌 Sur un tableau, map transforme les éléments, filter conserve ceux qui vérifient une condition, find cherche un élément, reduce agrège les valeurs et sort trie en modifiant le tableau.

Compléments

📌 Une callback est une fonction passée comme valeur à une autre fonction, comme dans map, filter ou addEventListener.

📌 La boucle for…of parcourt directement les valeurs d’un tableau lorsqu’on n’a pas besoin de son indice.

• Une chaîne template literal construit du texte avec des expressions interpolées comme $\`Série :${serie.nom} (\{serie.note\})\`.

💡 Astuce mémo

map transforme, filter garde, find cherche, reduce agrège, sort trie

📖 8. Objets et échanges JSON

🔑 Notions clés & Définitions

• JSON : JSON est le format de données échangé entre le front et le serveur, et JSON.stringify convertit un objet en texte tandis que JSON.parse reconstruit un objet depuis un texte.

★ À maîtriser

📌 Le destructuring extrait des propriétés, le spread copie ou étend un tableau ou un objet, l’opérateur ?. accède sans erreur si une propriété intermédiaire est absente et ?? remplace uniquement null ou undefined.

Compléments

• Avec fetch, la réponse JSON est récupérée en appelant await response.json(), puis les données peuvent être transformées pour alimenter l’interface.

• Un tableau d’objets constitue le terrain de jeu principal du front-end pour transformer et afficher des données.

💡 Astuce mémo

Données structurées → transformation → échange avec le serveur

📊 Tableaux de synthèse

Responsabilités du front-end

Opérations sur les tableaux