JOUR 1
INTRODUCTION
- Objectifs de la formation et présentation ;
- Historique et évolutions ;
- Html5 et contexte d’utilisation ;
- Compatibilité avec les navigateurs ;
- Configuration de l’environnement de travail (visual studio code, notepad++, sublime text).
CONCEPTION D’UNE PAGE HTML
- Structure d’une page ;
- Les balises CSS ;
- Les balises HTML5 ;
- Différences entre HTML-4 et HTML-5.
JOUR 2
LES BALISES HTML
- Balises de mise en forme du contenu ;
- Les listes ;
- Les tableaux ;
- Les paragraphes et saut de ligne (<p> et <br>) ;
- Les formulaires ;
- Les balises de media (son et vidéo) ;
- L’intégration des objets (fichiers pdf).
LES BALISES CSS
- Spécification w3c ;
- Sélecteurs disponibles ;
- Les balises de mise en forme ;
- Les balises de positionnement ;
- Transformations et transitions.
JOUR 3
NOTION DE TYPOGRAPHIE
- Bien utiliser les polices ;
- Les unités de valeurs (px, em, rem, pourcentage, etc.).
POSITIONNEMENT DES ÉLÉMENTS
- Positionnement statique ;
- Positionnement absolu ;
- Positionnement relatif ;
- Positionnement sticky ;
- Notion de top, bottom, left, right ;
- Présentation de la balise z-index
MISE EN FORME DES ÉLÉMENTS
- Mise en forme des textes ;
- Mise en forme des images ;
- Mise en forme d’un background (color ou image, effet parallaxe) ;
- Propriété hidden et display:none.
JOUR 4
HTML / CSS & LE RESPONSIVE DESIGN
- Le responsive design avec CSS ;
- Les medias queries.
HTML / CSS & BOOTSRAP
- Présentation et utilité de bootstrap ;
- Les boutons ;
- Les formulaires ;
- Les sliders ;
- Les images ;
- Les tableaux ;
- Les menus déroulants ;
- Les menus de navigation ;
- Les icones.
HTML / CSS & WORDPRESS
- Interaction avec la feuille de style CSS de Wordpress ;
- Présentation du module CSS additionnel dans Wordpress ;
- Exemples d’application.
JOUR 5
BILAN & ÉVALUATION
- Montage d’une maquette en HTML / CSS et réalisation d’un e-mailing avec CSS3 inline ;
- Finalisation de la mise en pratique (réalisée tout au long de la semaine) et évaluation ;
- Bilan et perspectives d’approfondissement.
