Félicitations ! Vous êtes arrivés à la dernière séance de ce module passionnant sur HTML et CSS. Au cours des neuf dernières sessions, vous avez acquis une multitude de compétences, des fondations sémantiques aux animations complexes. Aujourd'hui, nous allons tout assembler ! Cette séance est dédiée à la consolidation de vos connaissances, à l'apprentissage d'outils essentiels pour tout développeur, et à la réalisation d'un projet de synthèse qui montrera l'étendue de votre savoir-faire. Préparez-vous à donner vie à vos créations !
Nous avons déjà exploré les Media Queries et les unités relatives comme rem et em. Pour une adaptabilité encore plus fine, découvrez les unités du viewport :
vh (viewport height) : Représente 1% de la hauteur de la fenêtre d'affichage. Utilisez-le pour des sections qui doivent occuper une certaine proportion de l'écran, quelle que soit la taille.vw (viewport width) : Représente 1% de la largeur de la fenêtre d'affichage. Utile pour un texte ou des éléments dont la taille doit s'adapter fluidement à la largeur de l'écran.orientation : Adaptez votre design selon que l'appareil est en mode portrait ou paysage.srcset et <picture>Pour optimiser drastiquement la performance, surtout sur mobile, il faut servir aux utilisateurs des images à la bonne taille. HTML nous fournit deux mécanismes puissants pour cela.
srcset : Permet de proposer une liste d'images de différentes tailles au navigateur. Le navigateur choisira la plus appropriée en fonction de la taille de l'écran et de la densité de pixels. C'est la méthode la plus courante.
<img src="image-800w.jpg"
srcset="image-400w.jpg 400w,
image-800w.jpg 800w,
image-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"><picture> : Offre encore plus de contrôle. Elle permet de proposer différents formats d'image (comme le format moderne WebP avec un fallback en JPG) ou des images complètement différentes selon la media query (direction artistique).
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Description">
</picture>/* Exemple d'utilisation de vh/vw */
.hero-section {
height: 100vh; /* Occupe toute la hauteur de l'écran */
display: flex;
justify-content: center;
align-items: center;
}
.title {
font-size: 5vw; /* La taille du texte s'adapte à la largeur de l'écran */
}
/* Media Query pour l'orientation */
@media (orientation: landscape) {
.image-gallery {
grid-template-columns: repeat(4, 1fr);
}
}
@media (orientation: portrait) {
.image-gallery {
grid-template-columns: repeat(2, 1fr);
}
}Les formulaires sont le point de contact entre l'utilisateur et votre site. Une bonne structure et un bon style sont essentiels. Rappelons les bases et allons plus loin :
<label> est obligatoire ! Chaque champ de formulaire (<input>, <textarea>, etc.) doit être associé à une étiquette <label>. Le lien se fait en donnant un id unique à l'input, et en reportant cet id dans l'attribut for du label. C'est indispensable pour que les lecteurs d'écran puissent annoncer à quoi sert le champ, et cela permet aussi à tous les utilisateurs de cliquer sur le texte du label pour activer le champ.<form>, <input> avec divers type (text, email, password, tel, number, url, etc.), <textarea>, <select>, <option>, <button type="submit">.<fieldset> et <legend> pour regrouper sémantiquement des champs connexes.required, minlength, maxlength, pattern, et les types d'input (email, url) offrent une validation de base côté client, sans JavaScript.:focus, :disabled, :valid, :invalid pour offrir un retour visuel à l'utilisateur.<form class="contact-form">
<fieldset>
<legend class="form-legend">Vos informations</legend>
<div class="form-group">
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Votre message :</label>
<textarea id="message" name="message" rows="5"></textarea>
</div>
<button type="submit" class="submit-button">Envoyer</button>
</fieldset>
</form>.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #CBD5E1; /* slate-300 */
border-radius: 0.375rem;
margin-top: 0.25rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #4F46E5; /* indigo-600 */
outline: none;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
.contact-form input:invalid:not(:focus):not(:placeholder-shown) {
border-color: #EF4444; /* red-500 */
}
.submit-button {
background-color: #4F46E5; /* indigo-600 */
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.submit-button:hover {
background-color: #3730A3; /* indigo-800 */
}Les outils de développement (DevTools) intégrés à votre navigateur (Chrome DevTools, Firefox Developer Tools) sont vos meilleurs amis !
Cliquez droit sur un élément > "Inspecter" pour voir son HTML et tous les styles CSS qui lui sont appliqués. Vous pouvez modifier les styles en direct pour tester des changements instantanément !
Permet de simuler différentes tailles d'écran et appareils pour tester la réactivité de votre site sans changer de périphérique. Très utile pour vérifier vos Media Queries.
Affiche les erreurs JavaScript et les messages de débogage. Indispensable quand vous commencerez le JavaScript.
Visualise le chargement des ressources (images, CSS, JS). Utile pour identifier les fichiers qui ralentissent votre page.
Pratique : Ouvrez les DevTools (généralement F12 ou Ctrl+Maj+I) sur n'importe quelle page web, y compris la vôtre, et explorez les différents onglets !
L'accessibilité web (souvent appelée "A11Y" car il y a 11 lettres entre le 'A' et le 'Y') consiste à concevoir et développer des sites web que tout le monde peut utiliser, y compris les personnes en situation de handicap (visuel, auditif, moteur, cognitif).
<button> pour un bouton, <nav> pour la navigation, <h1> pour le titre principal) aide les lecteurs d'écran à comprendre la structure de votre page.alt pertinent pour les images (<img src="chat.jpg" alt="Un chat noir endormi">). Si l'image est purement décorative, alt="".Tab pour naviguer entre les éléments interactifs et Entrée/Espace pour les activer.div), les attributs aria-* fournissent des informations supplémentaires aux technologies d'assistance. (Ex: <div role="button" aria-label="Fermer la fenêtre">X</div>)L'accessibilité n'est pas une option, c'est une responsabilité. Elle améliore l'expérience pour tous les utilisateurs.
index.html), votre CSS (styles.css), et plus tard vos scripts JS (script.js). Créez des dossiers pour les images (images/), les polices (fonts/), etc./* --- Section Navigation --- */
.main-nav {
/* Styles de la navigation */
}.card-title, .btn-primary). Évitez les noms génériques comme .box1.Dans la vie d'un développeur, on passe plus de temps à lire et améliorer du code existant qu'à en écrire de zéro. Cet exercice a pour but de vous former à cette compétence cruciale.
Dans le dossier tp-refactoring/start/, vous trouverez un CV simple mais dont le code est "legacy" (ancien) et mal structuré.
Refactoriser les fichiers index.html et style.css pour les rendre sémantiques, maintenables et cohérents avec notre Design System, sans en changer l'apparence visuelle.
<div> génériques par les balises sémantiques appropriées (<header>, <main>, <section>, <footer>, <h1>, <h2>, etc.). Adaptez le CSS en conséquence.style.css, convertissez toutes les unités px en unités rem pour la typographie, les espacements (padding, margin) et les tailles.#333, #fff, etc.) et d'espacement par les variables CSS (tokens) définies dans notre styles.css global (ex: var(--color-primary), var(--space-4)).C'est le moment de mettre en pratique tout ce que vous avez appris ! Vous allez créer une page unique et complète qui servira de portfolio pour un photographe fictif. Ce projet exige la combinaison de la sémantique HTML, de la mise en page avancée, du design responsive et des techniques de stylisation pour produire un résultat professionnel.
Construire une page de portfolio responsive, esthétique et interactive, démontrant la maîtrise de l'ensemble des concepts du cours.
projet-final-portfolio avec index.html, styles.css, et un dossier images/.:root) pour définir votre palette de couleurs (ex: --primary-color, --background-color, --text-color) et les espacements principaux.768px et 1024px par exemple) pour adapter le layout aux tablettes et ordinateurs.<nav>).position: sticky; top: 0; et un z-index élevé.height: 80vh;).relative sur le conteneur, absolute sur le texte) pour superposer un titre <h1> et un sous-titre <p> par-dessus l'image. Centrez ce texte.display: grid;).grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));).<div class="photo-card">) qui contient une image.transform: scale(1.03);) avec une transition douce.opacity et une transition.grid-column: span 2; ou grid-row: span 2;).<label> correctement associé pour l'accessibilité.:focus, :valid, :invalid) pour donner un retour visuel à l'utilisateur.transition).Félicitations, vous avez franchi une étape majeure ! En 10 séances, vous êtes passés de débutants à des développeurs capables de construire des pages web complètes, responsives et interactives. Vous maîtrisez désormais les langages fondamentaux du web : HTML et CSS.
Ce n'est cependant que le début de votre aventure ! Pour aller plus loin, voici quelques pistes à explorer :
N'arrêtez jamais d'apprendre et de créer ! Le web est un domaine en constante évolution, et votre curiosité est votre meilleur atout. Bonne continuation, futurs développeurs web !