HTML5 et CSS3 de Débutant à Expert – en 15h
Prix
1410€
Date de mise à jour du contenu
JUIN 2021
Code certif info
95439
Code CPF
236252
Objectifs
Les futures compétences de vos équipes
Utiliser un éditeur de code
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
UN ACCOMPAGNEMENT PERSONNEL ET INDIVIDUALISÉ
Nos formations sont accessibles en entrée permanente dans la mesure où elles se font en e-learning. Vos identifiants de connexion à cette plateforme vous sont adressés pour une durée de 3 mois par email, le jour de votre confirmation d’inscription matérialisée par :
- la validation de votre inscription sur la plateforme Moncompteformation dans le cadre d’une formation financée par le CPF
- la validation du devis sur Kairos en cas de prise en charge par le Pôle emploi
- la signature de la convention de formation dans les autres cas.
Durant ces 3 mois, vous pouvez donc vous connecter à notre plateforme d’apprentissage selon vos disponibilités et démarrer la formation quand vous le souhaitez.
L’évaluation des acquis se fait:
- En cours de formation, par des exercices pratiques
- Et, en fin de formation, par un questionnaire d’auto-évaluation ou une certification (ENI)
- Formation à distance à votre propre rythme
- Cours au format vidéo
- Ateliers en visioconférences avec un formateur
- Auto-évaluation en cours et en fin de cursus sous formes de questionnaires
- Questionnaire de positionnement
- Evaluation à chaud et à froid
- Formation en distanciel accessible aux personnes à mobilité réduite.
- Audiodescription et sous titrage non disponibles
Programme
Parcours balisé pour progression assurée
Pourquoi vous devez apprendre le Html et le Css
2. Découverte du Html
Comment fonctionne votre navigateur Web
Les bases du langage HTML
Créer votre première page Html
3. Apprendre le HTML
L'éléments HTML Head
Les éléments textuels
Élément titre
Éléments liste
Les images
Liens hypertextes
Les tableaux
Les médias vidéo et audio
Les commentaires
Envoyer un courrier électronique
Contexte de navigation imbriqué
Conteneur générique div et span
Les formulaires
Validation de code W3C
Inspecteur
Évaluation des compétences HTML
4. Les bases du CSS
Syntaxe du CSS
Comment rédiger du Css dans vos pages Html
Les commentaires
Introduction aux sélecteurs CSS complexes et combinateurs
Les attributs class id et les sélecteurs CSS associés
Feuilles de style en cascade & héritage
Les éléments HTML div et span en CSS
Évaluation des compétences CSS
5. 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
6. Concept de boite CSS
Les boites en 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
Exercice pratique Correction
Sélecteurs Css Avancés
CSS Diner (jouer avec le Css)
Les pseudo-classes
Les pseudo-elements
Les transitions en CSS
Les animations en CSS
Évaluation des compétences
8. 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 a l'image de fond (linear-gradient)
Propriété raccourcie background
9. Modèle de boite flexible (flexbox Css)
Modèle de boite flexible (flex-direction)
Répartition des éléments flexible (justify-content)
Alignement sur l'axe secondaire (align-items)
Retour a 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
10. Les médias queries (responsive design)
Découverte des médias queries
Création d'un layout simple
Responsive design (média queries)
11. 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
12. 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 header
Barre de navigation nav
Disposition du contenu de la page (grid-css-layout)
Pied de page du site footer
Génération des pages du site
index contenu aside
Index contenu aside
Adaptation de l’élément progress pour Mozilla Firefox
Index contenu
index contenu
Portfolio
Curriculum Vitae
Contact
Personnaliser l'icone du site (favicon)
Responsive design du site (médias queries)
13. 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)
Pré-requis ?
Public
Tout publics
Sous-Titrages
Audio description et sous titrage non disponibles
Modalités d'évaluation des acquis
Auto-évaluation en cours et en fin de cursus sous formes de questionnaires Questionnaire de positionnement Evaluation à chaud et à froid
Compétences attestées par la certification
Notre formateur
Notre expert(e) en or est une référence sur le sujet.
Hana
Formatrice web
FINANCEMENT
Cette formation est prise en charge CPF, OPCO, Pôle emploi, Financement personnel, Autres financements
FINANCEMENT CPF
Le compte personnel de formation (CPF) permet d’acquérir des droits à la formation mobilisables tout au long de sa vie professionnelle. Il a une vocation universelle et s’adresse à tous les actifs. Vous pouvez déjà envisager un grand nombre de formations éligibles au CPF sans vous soucier de la question du financement.
