Bonus - Web course

Ressources externes

Ou leurs versions plus évoluées :

Vous avez les connaissances techniques...
... mais pas encore de méthode pour les utiliser. Changeons cela !
La technique consiste à regrouper/découper les éléments au niveau de granularité le plus élevé, les positionner, puis répéter le processus pour chacun des sous-groupes créés
Prenons cette page en mode présentation par exemple
Étape 1 : on délimite les grandes zones :

Étape 1 : on délimite les grandes zones :
Étape 2 : On crée une balise HTML par zone. Si ça a du sens, on utilise des balises HTML5 ; sinon on se contente de <div> : <body> <header>EN-TÊTE</header> <aside>MENU DE GAUCHE</aside> <main>CONTENU PRINCIPAL</main> <footer>PIED-DE-PAGE</footer> </body>

Étape 1 : on délimite les grandes zones :
Étape 2 : On crée une balise HTML par zone
Étape 3 : On détermine le CSS le plus pertinent pour positionner les éléments. Pour cela, on regarde comment les éléments se comportent les uns par rapport aux autres :
- Si on peut placer tous les éléments facilement dans un tableau, on utilise Grid
- Si les éléments sont séparés par un type d'espacement connu, on utilise Flexbox
- Si certains éléments se comportent différemment, il faudra utiliser Position pour les placer individuellement

Étape 1 : on délimite les grandes zones :
Étape 2 : On crée une balise HTML par zone
Étape 3 : On détermine le CSS le plus pertinent pour positionner les éléments : body { display: grid; grid-template: auto 1fr auto / 250px 1fr; } header, footer { grid-column: 1 / 3; }

Étape 4 : on choisit un des blocs, et on recommence à l'étape 1 :
Étape 2 : On crée une balise HTML par zone <header> <img src="..." alt="logo"> <nav>LIENS</nav> </header>
Étape 3 : On détermine le CSS le plus pertinent pour positionner les éléments : header>img { position: fixed; top: 10px; left: 20px; } header { display: flex; justify-content: center; }
Et on recommence jusqu'à avoir tout intégré

Un ancien cours peut-être trouvé ici.
Il date de 2023.
Il est plus complet que ce site.
Le code est commenté, vous pouvez inspecter la page pour avoir un cas concret.
Il faut aussi utiliser les flèches de votre clavier pour naviguer à l'intérieur.