• Développement web avec HTML 5 et CSS 3, les fondamentaux
  • HTML
    • Objectifs
    • Démos
  • CSS
    • Objectifs
    • Démos
  • Exercices
  • Références
    • Liens utiles
    • Ouvrages utiles

Apprendre à développer et intégrer des pages web structurées et accessibles, les fondamentaux en HTML et CSS.

• A quoi sert le HTML;
• Connaître les éléments importants pour structurer et donner une sémantique correcte aux documents : html, head, meta, body, header, footer, main, section, h1..h6, article, a, form, div;
• Comprendre le flux normal d'un document HTML (position: static;) et les propriétés des éléments block, inline et inline-block (propriété display);
• Comprendre comment altérer le flux normal du document via la propriété position : relative, absolute, fixed, sticky, float (images);
• Connaitre et utiliser les attributs génériques des éléments : id, name (input de formulaire), class;
• Faire de la veille : HTML évolue en permanence, éléments (plus ou moins) récemment introduits : canvas, summary, details, dialog, abbr, etc.

• Les éléménts HTML à connaître;
• Page HTML illustrant l'usage des balises principales;
• Flux normal (et propriété display) et altéaration avec la propriété position;

• A quoi sert le CSS ;
• Styles en cascade dans l'arbre des noeuds et priorités des règles CSS (lesquelles s'appliquent) ?
• Connaître quelques propriétés de base ;
• Savoir utiliser les sélecteurs CSS ;
• Savoir Débuguer la pile de règles CSS via les devtools ;
• Savoir utiliser Flexbox (flexible boxes)
• Connaître Grid
• Comprendre ce qu'est le responsive design et l'usage des media querries.

• Flexbox ;
• Grid ;
• Utiliser les pseudo-éléments
• Responsive font size

• Exercice d'intégration à partir d'un template donné, avec des connaissances de base en CSS (quelques sélecteurs, propriétés, sans flexbox ni grid !);
• TP responsive 1 avec grid;
• TP responsive 2;

• MDN Web Docs, la documentation (semi)officielle sur les technologies et standards du web;
• Liste des éléments HTML5. Parcourir la doc en cas de besoin ou découvrir de nouveaux éléments utiles;
• Markup Validation Service du W3C pour valider son markup HTML avant de le mettre en production;
• Structurer le document HTML et Flux normal du document, sur la MDN;
• Flexbox et Grid, sur la MDN;
• Design responsive avec les media querries, syntaxe améliorée récemment, MDN
• CSS Tricks, excellent site sur le CSS. Notamment le guide consacré à Flexbox et celui consacré à CSS Grid

À avoir à portée, feuilleter, "vivre avec"

• HTML5 Pocket Reference, 5th Edition, de Jennifer Robbins, publié chez O'Reilly Media, 2013. Pour se rafraichir la mémoire ou découvrir des éléments HTML utiles;
• Know Your Onions: Graphic Design, de Drew de Soto, publié chez Laurence King Publishing, 2014. Excellent condensé de conseils sur le design graphique, utile au design web;