Full Stack Web Developer

**Rappel théorique** Avant de plonger dans l'atelier, voici les points essentiels à avoir en tête. Les unités relatives sont au cœur du responsive design car elles s'adaptent dynamiquement au contexte d'affichage, contrairement aux pixels (px) qui so...

Dans les activités précédentes, tu as découvert les media queries et la logique mobile-first. Tu sais maintenant comment cibler des largeurs d'écran spécifiques pour appliquer des styles différents. Mais pour que ton interface s'adapte vraiment de fa...

**Rappel théorique** Le responsive design repose sur l'idée que le contenu doit s'adapter naturellement à la taille de l'écran de l'utilisateur. La typographie ne fait pas exception : une police de 16px lisible sur desktop peut paraître minuscule sur...

Jusqu'à présent, tu as appris ce qu'est une media query, comment l'écrire et comment elle permet d'appliquer des styles en fonction de la taille de l'écran. Tu sais également ce qu'est un breakpoint : un seuil de largeur à partir duquel la mise en pa...

**Rappel théorique** Une media query est une règle CSS conditionnelle qui permet d'appliquer des styles uniquement lorsque certaines conditions relatives à l'environnement de l'utilisateur sont remplies — principalement la largeur de la fenêtre du na...

Les Media Queries sont l'outil central du design responsive en CSS3. Elles permettent d'appliquer des styles CSS différents selon les caractéristiques du périphérique ou de la fenêtre d'affichage (le viewport). Grâce à elles, une même page HTML peut ...

**Rappel théorique** Le responsive design désigne la capacité d'un site web à s'adapter automatiquement à la taille de l'écran de l'utilisateur, qu'il s'agisse d'un smartphone, d'une tablette ou d'un ordinateur de bureau. Pour y parvenir, on s'appuie...

Le design responsive est aujourd'hui une compétence fondamentale pour tout développeur web. Avant de maîtriser les outils comme Flexbox ou Grid, il est indispensable de comprendre le vocabulaire de base qui structure toute approche responsive. Ce cou...

Le responsive design est une approche de conception web qui vise à rendre les pages web lisibles et utilisables sur tous les types d'écrans, qu'il s'agisse d'un téléphone mobile, d'une tablette, d'un ordinateur portable ou d'un écran de bureau. L'obj...

Vous venez de terminer une exploration approfondie du HTML sémantique. Vous savez structurer un document avec des balises qui ont du sens, créer des tableaux accessibles, utiliser des balises inline comme , et , et même construire un portfolio multi-...

## Présentation du projet Ce mini-projet constitue le point culminant du chapitre 'HTML et structuration sémantique'. L'apprenant doit concevoir et coder un **portfolio personnel multi-pages**, entièrement fondé sur une sémantique HTML rigoureuse, sa...

La structuration sémantique d'une page HTML ne consiste pas à placer des balises au hasard pour que le contenu s'affiche à l'écran. C'est une démarche réfléchie qui donne du sens à chaque élément de la page, aussi bien pour les navigateurs que pour l...

**Rappel théorique** Un tableau HTML est accessible lorsque les technologies d'assistance (lecteurs d'écran) peuvent interpréter correctement la relation entre les données et leurs en-têtes. Deux mécanismes sont essentiels pour cela. L'attribut `scop...

**Rappel théorique** Les tableaux HTML sémantiques sont conçus pour représenter des données tabulaires, c'est-à-dire des informations organisées en lignes et colonnes avec une relation logique entre elles. Un tableau est défini par la balise , struct...

Les tableaux HTML permettent d'afficher des données structurées sous forme de lignes et de colonnes. Ils sont conçus pour représenter des informations tabulaires : comparatifs, horaires, résultats, tarifs, statistiques. Un tableau HTML n'est pas un o...

**Rappel théorique** Les balises ``, `` et `` sont trois balises inline sémantiques que vous avez découvertes dans le chapitre précédent. Elles servent à donner du sens à des contenus spécifiques plutôt que de simplement les afficher visuellement. ``...

## Rappel théorique Les balises inline sémantiques permettent d'apporter du sens à des portions de texte à l'intérieur d'un bloc (paragraphe, titre, liste, etc.) sans créer de saut de ligne. Contrairement aux balises de bloc (div, p, section…), elles...

Les balises inline sémantiques sont des éléments HTML qui s'insèrent à l'intérieur d'un texte sans créer de rupture de ligne. Contrairement aux balises de type bloc (comme , , ), elles s'intègrent dans le flux du contenu existant. Leur rôle ne se lim...

Dans les activités précédentes, vous avez découvert la balise img, l'attribut alt et la structuration sémantique des images avec figure et figcaption. Vous savez qu'alt est indispensable pour l'accessibilité et le référencement. Dans ce cours, nous a...

**Rappel théorique** En HTML, la sémantique consiste à choisir les balises qui décrivent le mieux le sens du contenu, et non simplement son apparence. Pour les images, deux éléments clés sont à maîtriser : la balise `` avec son attribut `alt` obligat...

**Rappel théorique** La balise est un élément HTML dit « void element » (élément vide) : elle ne possède pas de balise fermante et s'auto-ferme. Ses deux attributs fondamentaux sont src (chemin vers l'image, relatif ou absolu) et alt (texte alternati...

Intégrer des images dans une page web est une compétence fondamentale pour tout développeur. En HTML, les images ne sont pas simplement des éléments décoratifs : elles véhiculent de l'information, renforcent l'expérience utilisateur et jouent un rôle...

Lorsque vous créez des liens hypertextes ou que vous intégrez des ressources (images, feuilles de style, scripts) dans vos pages HTML, vous devez indiquer au navigateur où se trouve la ressource cible. Cette indication s'appelle un chemin, ou en angl...

**Rappel théorique** La balise `` est l'élément fondamental pour créer des liens en HTML. Vous avez déjà pratiqué les ancres internes lors de l'atelier précédent. Ici, on s'attaque aux liens externes, c'est-à-dire des liens pointant vers des sites ti...

**Rappel théorique** Une ancre HTML est un mécanisme permettant de créer des liens qui pointent vers un emplacement précis à l'intérieur d'une même page, ou vers un élément spécifique d'une autre page. Elle repose sur deux éléments complémentaires : ...