Qu’allez-vous apprendre ?

• Introduction
• Présentation de la formation
• Vidéo introduction
• Module 1 : Découverte du HTML
• Fonctionnement du navigateur Web
• Les bases du langage HTML
• Créer votre première page HTML
• Module 2 : Apprendre le HTML
• L’éléments HTML HEAD
• Les éléments textuels
• Élément titre
• Éléments liste
• Les images
• Les liens hypertextes
• Les tableaux
• Les médias vidéo et audio
• Les commentaires
• Envoyer un courrier électronique
• Contexte de navigation imbriqué
• Contexte générique div et span
• Les formulaires
• Validation de code W3C
• Inspecteur
• Module 3 : Les bases de CSS
• Syntaxe du CSS
• Comment rédiger du CSS dans vos pages HTML
• Les commentaires CSS
• Introduction aux sélecteurs CSS complexes et combinateurs
• Les attributs class id et les sélecteurs CSS associés
• Feuilles de style en cascade et héritage
• Les éléments HTML div et span en CSS
• Module 4 : Mise en forme de texte en CSS
• Gestion de la police (font-family)
• Les propriétés CSS de Police
• Les propriétés CSS de Texte
• Interlignes et espacements de Texte
• Couleur et transparence de Texte
• Concept de boite CSS
• Les unités de mesures
• Largeur minimale et maximale d’un élément
• Les éléments flottants
• Types d’éléments HTML block et inline
• Positionner les éléments (position)
• Ordre des différentes couches (z-index)
• Calcul de la taille d’un élément (box-sizing)
• Arrondir les bordures (border-radius)
• Exercice pratique Positionnement
• Fichier TP
• Exercice pratique Correction
• Fichier correction
• Module 5 : CSS : Utilisation Avancée
• Sélecteurs CSS Avancés
• CSS Diner (jouer avec le Css)
• Les pseudo-classes
• Les pseudo-éléments
• Les transitions en CSS
• Les animations en CSS
• Module 6 : La propriété Background en CSS
• Définir une image d’arrière-plan (background-image)
• Répétition de l’arrière-plan (background-repeat)
• Origine de l’arrière plan (background-origin)
• Définir la position de l’arrière-plan (background-position)
• Définir la taille des images d’arrière-plan (background-size)
• Définir la façon dont l’arrière-plan s’étend (background-clip)
• Fixer la position de l’arrière-plan (background-attachment)
• Ajouter un dégradé linéaire à l’image de fond (linear-gradient)
• Propriété raccourcie background
• Module 7 : Modèle de boite flexible (flexbox CSS)
• Modèle de boîte flexible (flex-direction)
• Répartition des éléments flexible (justify-content)
• Alignement sur l’axe secondaire (align-items)
• Retour à la ligne des flex-items (flex-wrap)
• Espacement sur l’axe secondaire (align-content)
• La propriété raccourcie flex-flow
• Ordre d’apparition des flex items (order)
• Facteur d’expansion d’un élément flexible (flex-grow)
• Facteur de rétrécissement d’un élément flexible (flex-shrink)
• Taille initiale principale pour un élément flexible (flex-basis)
• La propriété raccourcie flex
• Exercice pratique boites flexibles
• Correction de l’exercice
• Apprendre flexbox en s’amusant
• TP flexbox fichier
• Fichier correction
• Module 8 : Les médias queries (responsive design)
• Découverte des médias queries
• Création d’un layout simple
• Responsive design (média queries)
• Module 9 : CSS Grid layout (modèle de disposition en grille)
• Présentation et terminologie des grilles CSS
• Création d’une grille
• Unités de mesure fractionnée (fr)
• Espacements entre les lignes et les colonnes d’une grille
• Alignement Horizontale et Verticale des items-grid
• Alignement Horizontale et Verticale d’un item-grid
• Alignement Horizontale et Verticale dans grille
• Emplacement d’un élément sur la grille
• Zones de grille nommées
• Contrôle de l’algorithme de placement automatique
• Définir la taille d’une colonne/ligne de grille créée de façon implicite
• Apprendre les grilles CSS en s’amusant
• Module 10 : Réalisation d’un site internet personnel de présentation
• Les nouveaux éléments à valeur sémantique du HTML5
• Maquette du site
• Entête du site
• Barre de navigation
• Disposition du contenu de la page (grid-css-layout)
• Pied de page du site
• Génération des pages du site
• Index contenu aside : Informations
• Index contenu aside : Atouts
• Adaptation de l’élément pour Mozilla Firefox
• Index contenu section : A propos de moi et Recherche
• Index contenu : boite de compétences
• Portfolio
• Curriculum Vitae
• Contact
• Personnaliser l’icône du site (favicon)
• Responsive design du site (médias queries)
• Module 11 : Héberger votre site web
• Publier son site en ligne
• Souscription chez un hébergeur
• Présentation de l’interface d’administration et terminologie
• Transfert du site chez l’hébergeur (ftp)
• Module 12 : Évaluation de compétences
• Draft
• Évaluation des compétences CSS
• Draft
• Évaluation des compétences HTML
• Draft
• Évaluation des compétences
• Draft
• Module 13 : Quizz récapitulatif
• Quiz final