Bâtir le web moderne avec HTML et CSS

Modifié le: 2022-09-22

Auditoire

Développeurs web

Durée

4 jours

Prérequis

Naviguer le web et faire des recherches Google

Description

HTML est la base du web. Toutes les pages web sont construites avec HTML et CSS. Même si HTML n'est pas difficile à apprendre, il est difficile à utiliser correctement. Il y a beaucoup de pièges pour les débutants. Et beaucoup de tutoriels et d'articles sur Internet sont obsolètes.

CSS est le langage de style. Il permet de styliser le web et de modifier la façon dont les pages sont affichées. (Les couleurs, la police, la taille, le positionnement, etc.)

Ce cours vous apprendra à utiliser l'HTML et le CSS moderne pour construire des sites Web.

Plan de cours

Bases du HTML

  • Balises
  • Attributs
  • Commentaires
  • Balises de fermeture
  • Balises de groupe
  • Grandes lignes: body, head, title

Outillage

  • Editeur (Visual Studio Code)
  • Support (Can I Use.com)
  • Validateurs (w3c)
  • Performance (lighthouse)
  • Testeurs (browserstack.com)
  • Gestionnaire de source (github)
  • Jouer avec des idées (Codepen, JsFiddle, StackBlitz, CodeSandbox)
  • Publier sa page web (Neocities, Netlify, Azure, GitHub Pages)

Structure du texte

  • Balises structurelles vs. balises sémantiques
  • Entêtes
  • Paragraphes
  • Gras et italique
  • Indices et exposants
  • Espacement (white space)
  • Séparateurs et sauts de page
  • Citations
  • Abbréviations et Acronymes
  • Références (cite) et Définitions
  • Auteur (Address)
  • Changements (ins, del, s)

Listes

  • Listes ordonnées
  • Listes à puces
  • Listes de définitions
  • Listes imbriquées

Liens

  • Hyperliens vers des pages extérieures
  • Hyperliens vers des pages intérieures
  • Structure des dossiers
  • Ouvrir de nouvelles tabulations
  • Liens vers courriel
  • Liens vers une position de la page

Images

  • Balise img
  • Largeur et hauteur
  • Alignement
  • Format d'images (png, jpeg, webp, etc)
  • Images vectorielles
  • figure figcaption
  • picture srcset

Tables

  • Entêtes
  • Colonnes
  • Rangées

Formulaires

  • Champ texte, mot de Passe, multi-ligne
  • Bouton radio, case à cocher, liste déroulante
  • Boutons de validation, soumssion, reset
  • Courriel, url, date, recherches
  • Action, méthode
  • Données cachées (hidden)
  • Étiquettes et placeholder
  • Encadré (fieldset) et légende

Média

  • Vidéo
  • Audio
  • Iframes (boîte de contenu)
  • Canvas
  • Svg

Bases de CSS

  • Sélecteurs, déclarations, propriétés, valeurs
  • CSS externe (link), CSS interne (balise style), CSS inline (attribut style)
  • Règles de cascade, héritage
  • Couleur avant-plan, couleur du fond
  • RGB, Hexadecimal, HSL, noms de couleurs
  • Opacité et transparence

Texte et CSS

  • Polices de caractères et fontes
  • Tailles et mesures
  • Pixels, pourcentage, ems, rem, cm, in, pt, pc
  • Tailles du viewport: vw, vh, vi, vb, vmin, vmax
  • Gras, italique, majuscules, minuscules, souligné
  • Espace entre lettres et entre mots, interligne
  • Alignement: gauche, droite, centre, justifié
  • Alignement vertical et horizontal
  • Indentation des Paragraphes
  • Ombre portée (Drop shadow)
  • Pseudo-classes: first-letter, first-line, link, hover, active, focus

Boîtes et CSS

  • Dimensions (width, height, min-width, max-width)
  • Overflow (débordement)
  • Bordures, marges extérieures et marges intérieures
  • Styles de bordures, couleurs, images de bordures
  • Centrage
  • Types d'affichage: inline, block, none
  • Visibilité
  • Ombre de boîte
  • Coins arrondis (border-radius)

Positionnement

  • Types: statique, relatif, absolu, fixe
  • Z-index

Grilles (grids)

  • Rangées et colonnes
  • Item de grille
  • Taille des éléments (Unités fr)
  • Alignement et justification
  • Espacement (gap)

Flexbox

  • Contenants et items
  • Flot vertical ou horizontal
  • Espacement
  • Alignement et justification

CSS sur tables et listes

  • Listes et punaises
  • Tables et propriétés
  • Alternance de couleurs (even odd)
  • Formulaires et positionnement
  • Cursor

Responsive Web Design

  • Viewport
  • Media queries
  • Gestion des images
  • Exemples

Transitions et Animations

  • Transitions entre éléments
  • Transitions entre pages
  • Animation d'éléments

Introduction à Bootstrap

  • Système de classes
  • Layout et Breakpoints
  • Contenants (Containers), grilles colonnes, gutters (Dalots)
  • Formulaires
  • Composants: Cards, Buttons, Alerts, Modal, Navbar, Toasts