Programme de formation à HTML5 et CSS, Bootstrap

Les bases du html

Eléments, balises et attributs HTML
Structure minimale d’une page HTML valide
L’indentation et les commentaires en HTML
Les titres et les paragraphes en HTML
Les balise Hn
Les listes à puces en HTML
Les liens hypertextes en HTML

Les bases du css

Sélecteurs et propriétés CSS
Où écrire le code CSS ?
Commentaires et indentation en CSS
Sélecteurs CSS simples et combinateurs
Les attributs HTML class et id et les sélecteurs CSS associés
Ordre d’application (cascade) et héritage des règles en CSS
Les éléments HTML div et span (conteneurs génériques)
Les niveaux ou “types” d’éléments HTML block et inline
Notations complètes “long hand” et raccourcies “short hand’ CSS

Mise en forme de textes en css

La propriété CSS font-family et les Google Fonts
Les autres propriétés CSS liées à la police
Les propriétés CSS liées au texte
Gérer la taille des interlignes et des espaces dans les textes en CSS
Gérer la couleur et l’opacité des textes

Le modele des boites

Le modèle des boites
Largeur (width) et hauteur (height) de la boite de contenu des éléments HTML
Gestion des marges internes ou padding en CSS
Gestion des bordures en CSS
Gestion des marges externes (margin) en CSS
La propriété CSS box-sizing
Créer des bordures arrondies en CSS

Position et affichage des éléments

La propriété CSS display
La propriété CSS position
La propriété CSS float
Gestion des conflits entre display, position et float

L’ élément Table HTML

Créer des tableaux en HTML
Structurer un tableau HTML
Mettre en forme un tableau HTML avec du CSS

Insertion de medias en html

Insérer des images dans des pages HTML
Insérer de la musique avec l’élément HTML audio
Insérer des vidéos avec l’élément HTML video
L’élément HTML iframe

Fond, dégradés et ombres css

Gérer la couleur de fond des éléments HTML
Ajouter des images en fond des éléments HTML
Création de dégradés linéaires en CSS
Création de dégradés radiaux en CSS
Ajouter des ombres aux éléments en CSS

Selecteurs css avancés

Les sélecteurs CSS d’attributs
Les pseudo-classes CSS
Les pseudo-éléments CSS

Formulaires html

Présentation des formulaires HTML
Les éléments inputs en HTML
Attributs des formulaires et sécurité

Transitions, animations et transformations css

Créer des transitions en CSS
Créer des animations en CSS
Créer des transformations en CSS
Recettes CSS

Modele des boites flexibles – flexbox css

Pourquoi flexbox?
Gérer la direction des éléments flexibles ou flex items
Gérer l’alignement des éléments flexibles
Gérer la taille et la flexibilité des éléments flexibles
Utilisation d'un configurateur en ligne de flexbox

Les grilles css

Introduction au modèle des grilles CSS
Créer une grille et définir des pistes de grille
Positionner des éléments dans une grille
Aligner et espacer des éléments dans une grille
EXERCICE – Création d’une page à 3 colonnes contenant des éléments flexibles

Responsive design css

Introduction au responsive design
La balise meta viewport
La base du responsive : les media queries
Images responsive
EXERCICE – Création d’un menu déroulant responsive HTML et CSS
Tableaux responsifs

Projet HTML5/CSS

Vous aurez à réaliser un site web responsive design, avec un effet CSS animation à partir d’une maquette photo.