HTML / CSS

Programme de formation

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

Objectifs

Apprendre les bases de ce langage :

● Utiliser un éditeur de code

● Créer votre première page internet

● Apprendre à utiliser les éléments HTML

● Styliser les éléments HTML grâce aux propriétés CSS

● Le concept de boite

● Une fois que vous aurez acquis les bases, vous apprendre des fonctionnalités avancées :

● Utiliser les sélecteurs avancés en CSS

● Apprendre les boites flexibles (flexbox)

● Utiliser les grilles (Css layout grid)

● Les pseudo-classes et les pseudo-éléments

● Les transitions et les animations CSS

● Le Responsive Web Design (Média queries)

● Et bien d’autres fonctionnalités

Autres informations

Ces informations sont données à titre d’exemple pour vos programmes de formation.

Formation individualisée

Admission après entretien, Admission sur dossier, Entretien personnel

✍ Lancement

Contact et lancement

Réalisez votre demande directement à ce lien. Un membre de notre équipe reviendra vers vous sous 24h ouvrées.

Il vous sera possible un devis personnalisé. Et lancer instantanément votre prestation.

Accès dédié ⚡ 12 heures

Afin de dispenser notre formation interactive, il vous est essentiel d’avoir accès à notre plateforme e-learning. 

La configuration de votre plateforme e-learning est offerte par notre équipe. Aucun frais de paramétrage. Dès votre première commande de contenu, sans minimum d’achat.

📦 Livraison des éléments ⏳ 24 heures

Vous avez maitnenant la possibilité d’inscrire les stagiaires de votre choix. Votre contenu de formation est enfin prêt à être présenté auprès de vos stagiaires à travers le mode de dispense de votre choix (Présentiel, Distanciel, E-learning).

Notre équipe vous fournit tous les codes nécessaires pour accéder à votre plateforme e-learning ainsi qu’une démo d’utilisation, afin de pouvoir en profiter instantanément.

Prestation personnalisée

Demander un devis