Actualités

Vous rêvez de créer des sites web professionnels, de maîtriser la création de contenu visuel interactif ou même de donner vie à vos propres applications ? La formation "HTML5 et CSS3 de Débutant à Expert" est conçue pour vous donner toutes les compétences indispensables à la création et à la mise en ligne de projets web.

Au fil de ce parcours, vous serez guidé pour explorer les bases essentielles de HTML5, le langage de balisage qui structure les pages web, ainsi que de CSS3, le langage de styles qui leur donne toute leur dimension graphique. Après une première partie consacrée aux fondamentaux, vous passerez aux fonctionnalités avancées, avec des modules dédiés aux animations CSS, aux transitions, aux grilles (CSS Grid) et aux mises en page flexibles (Flexbox). Vous saurez ainsi créer des interfaces modernes, réactives et esthétiques.

HTML5 et CSS3 de débutant à expert
  14H
99 € TTC
Accès immédiat et illimité
100% en ligne
A votre rythme
Financement possible
Assistance technique 7 jours sur 7
Attestation de fin de formation

Objectifs

  • Utiliser un éditeur de code et créer une page internet
  • Apprendre à utiliser et styliser les éléments HTML
  • Utiliser les sélecteurs avancés et les grilles en CSS
  • Apprendre les boites flexibles (flexbox)
  • Les pseudo-classes et les pseudo-éléments
  • Réaliser des transitions et les animations CSS
Niveau : Intermédiaire
Public : Tout le monde
Prérequis : Aucun prérequis technique n'est nécessaire, seulement une motivation à apprendre et une curiosité pour le développement web.
Sans audio description ni sous-titrage

Matériel nécessaire

  • Disposer d’un ordinateur, d’une tablette ou d’un smartphone
  • Une connexion internet

Modalités d’évaluation des acquis

  • Auto-évaluation sous forme de questionnaires
  • Exercices sous formes d’ateliers pratiques
  • Questionnaire de positionnement & Evaluation à chaud

Moyens pédagogiques et techniques

  • Accès au cours en ligne
  • Cours théorique au format vidéo
  • Assistance par téléphone, mail ou par tchat

Contenu du cours

Bienvenue dans la formation "HTML5 et CSS3 de Débutant à Expert"

Test de positionnement

Quelques conseils avant de commencer

Découverte du HTML - Comment fonctionne votre navigateur Web

Découverte du HTML - Les bases du langage HTML

Découverte du HTML - Créer votre première page Html

Apprendre le HTML - L'éléments HTML Head

Apprendre le HTML - Les éléments textuels

Apprendre le HTML - Élément titre

Apprendre le HTML - Éléments liste

Apprendre le HTML - Les images

Apprendre le HTML - Liens hypertextes

Apprendre le HTML - Les tableaux

Apprendre le HTML - Les médias vidéo et audio

Apprendre le HTML - Les commentaires

Apprendre le HTML - Envoyer un courrier électronique

Apprendre le HTML - Contexte de navigation imbriqué

Apprendre le HTML - Conteneur générique div et span

Apprendre le HTML - Les formulaires

Apprendre le HTML - Validation de code W3C

Apprendre le HTML - Inspecteur

Les bases du CSS - Syntaxe du CSS

Les bases du CSS - Comment rédiger du CSS dans vos pages Html

Les bases du CSS - Les commentaires

Les bases du CSS - Introduction aux sélecteurs CSS complexes et combinateurs

Les bases du CSS - Les attributs class id et les sélecteurs CSS associés

Les bases du CSS - Feuilles de style en cascade & héritage

Les bases du CSS - Les éléments HTML div et span en CSS

Quiz du module 1

Mise en forme de texte en CSS - Gestion de la police (font-family)

Mise en forme de texte en CSS - Les propriétés CSS de Police

Mise en forme de texte en CSS - Les propriétés CSS de Texte

Mise en forme de texte en CSS - Interlignes et espacements de Texte

Mise en forme de texte en CSS - Couleur et transparence de Texte

Concept de boite CSS - Les boites en CSS

Concept de boite CSS - Les unités de mesures

Concept de boite CSS - Largeur minimale et maximale d'un élément

Concept de boite CSS - Les éléments flottants

Concept de boite CSS - Types d’éléments HTML block et inline

Concept de boite CSS - Positionner les éléments (position)

Concept de boite CSS - Ordre des différentes couches (z-index)

Concept de boite CSS - Calcul de la taille d’un élément (box-sizing)

Concept de boite CSS - Arrondir les bordures (border-radius)

Concept de boite CSS - Exercice pratique Positionnement

Concept de boite CSS - Exercice pratique Correction

CSS utilisation avancée - Sélecteurs Css Avancés

CSS utilisation avancée - Les pseudo-classes

CSS utilisation avancée - Les pseudo-éléments

CSS utilisation avancée - Les transitions en CSS

CSS utilisation avancée - Les animations en CSS

Quiz du module 2

Restez organiser pour un meilleur apprentissage !

La propriété background en css - Définir une image d'arrière plan (background-image)

La propriété background en css - Répétition de l’arrière plan (background-repeat)

La propriété background en css - Origine de l’arrière plan (background-origin)

La propriété background en css - Définir la position de l’arrière plan (background-position)

La propriété background en css - Définir la taille des images d'arrière-plan (background-size)

La propriété background en css - Définir la façon dont l'arrière-plan s'étend (background-clip)

La propriété background en css - Fixer la position de l’arrière plan (background-attachment)

La propriété background en css - Ajouter un dégradé linéaire a l'image de fond (linear-gradient)

La propriété background en css - Propriété raccourcie background

Le modèle de boite flexible (flexbox css) - Modèle de boite flexible

Le modèle de boite flexible (flexbox css) - Répartition des éléments flexible (justify-content)

Le modèle de boite flexible (flexbox css) -

Le modèle de boite flexible (flexbox css) - Retour a la ligne des flex-items (flex-wrap)

Le modèle de boite flexible (flexbox css) - Espacement sur l'axe secondaire (align-content)

Le modèle de boite flexible (flexbox css) - La propriété raccourcie flex-flow

Le modèle de boite flexible (flexbox css) - Ordre d'apparition des flex items (order)

Le modèle de boite flexible (flexbox css) - Facteur d'expansion d'un élément flexible (flex-grow)

Le modèle de boite flexible (flexbox css) - Facteur de rétrécissement d'un élément flexible (flex-shrink)

Le modèle de boite flexible (flexbox css) - Taille initiale principale pour un élément flexible (flex-basis)

Le modèle de boite flexible (flexbox css) - La propriété raccourcie flex

Le modèle de boite flexible (flexbox css) - Exercice pratique boites flexibles

Le modèle de boite flexible (flexbox css) - Correction de l'exercice

Les médias queries (responsive design) - Découverte des médias queries

Les médias queries (responsive design) - Création d'un layout simple

Les médias queries (responsive design) - Responsive design (média queries)

Quiz du module 3

N'oubliez pas de réviser !

CSS grid layout (modèle de disposition en grille) - Présentation et terminologie des grilles Css

CSS grid layout (modèle de disposition en grille) - Création d'une grille

CSS grid layout (modèle de disposition en grille) - Unités de mesure fractionnée (fr)

CSS grid layout (modèle de disposition en grille) - Espacements entre les lignes et les colonnes d'une grille.

CSS grid layout (modèle de disposition en grille) - Alignement Horizontale et Verticale des items-grid

CSS grid layout (modèle de disposition en grille) - Alignement Horizontale et Verticale d'un item-grid

CSS grid layout (modèle de disposition en grille) - Alignement Horizontale et Verticale dans grille

CSS grid layout (modèle de disposition en grille) - Emplacement d'un élément sur la grille

CSS grid layout (modèle de disposition en grille) - Zones de grille nommées.

CSS grid layout (modèle de disposition en grille) - Contrôle de l'algorithme de placement automatique

CSS grid layout (modèle de disposition en grille) - Définir la taille d'une colonneligne de grille créée de façon implicite

Réalisation d'un site internet personnel de présentation - Les nouveaux éléments à valeur sémantique du HTML5

Réalisation d'un site internet personnel de présentation - Maquette du site

Réalisation d'un site internet personnel de présentation - Entête du site header

Réalisation d'un site internet personnel de présentation - Barre de navigation nav

Réalisation d'un site internet personnel de présentation - Disposition du contenu de la page (grid-css-layout)

Réalisation d'un site internet personnel de présentation - Pied de page du site footer

Réalisation d'un site internet personnel de présentation - Génération des pages du site

Réalisation d'un site internet personnel de présentation - Index contenu aside Informations

Réalisation d'un site internet personnel de présentation - Index contenu aside Atouts

Réalisation d'un site internet personnel de présentation - Adaptation de l’élément progress pour Mozilla Firefox

Réalisation d'un site internet personnel de présentation - Index contenu section A propos de moi et Recherche

Réalisation d'un site internet personnel de présentation - Index contenu boite de compétences

Réalisation d'un site internet personnel de présentation - Portfolio

Réalisation d'un site internet personnel de présentation - Curriculum Vitae

Réalisation d'un site internet personnel de présentation - Contact

Réalisation d'un site internet personnel de présentation - Personnaliser l'icone du site (favicon)

Réalisation d'un site internet personnel de présentation - Responsive design du site (médias queries)

Héberger votre site web - Publier son site en ligne

Héberger votre site web - Souscription chez un hébergeur

Héberger votre site web - Présentation de l'interface d'administration et terminologie

Héberger votre site web - Transfert du site chez l'hébergeur (ftp)

Quiz du module 4

Bravo

Evaluation finale

Retour en haut