Pourquoi vous devez apprendre le HTML et le CSS ?
Que vous vouliez créer un site web, ou utiliser un CMS comme WordPress ou développer des applications web, vous aurez besoin obligatoirement de passer par ces langages ! En effet le HTML et le CSS sont exclusifs et n'ont pas de concurrent. Vous allez donc obligatoirement devoir passer par eux pour effectuer certaines opérations.
Le HTML et le CSS sont deux véritables standards en informatique.
De plus, les langages HTML et CSS vont se trouver à la base de tout projet web, car ils ont un rôle qui les rend incontournables : les navigateurs sont des programmes qui ont été construits pour pouvoir lire du code HTML au départ et qui ne peuvent aujourd’hui lire que du code HTML, CSS et nous allons donc nous appuyer sur ces langages (et sur le HTML en particulier) pour pouvoir afficher nos pages.
En conclusion quelque soit votre projet web (blog, site e-commerce, application mobile, etc.), vous devrez forcément utiliser du HTML et du CSS.
Au programme de cette formation Apprendre le HTLM et le CSS
Dans un premier temps, vous apprendrez les bases de ces langages :
- Utiliser un éditeur de code,
- Créer votre première page Internet,
- Apprendre a utiliser les éléments HTML,
- Styliser les éléments HTML grâce aux propriétés CSS,
- Le concept de boîte.
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...
Ensuite, pour mettre en application toutes vos compétences, nous réaliserons un site Internet de présentation (adaptable à votre profil). Puis, nous le publierons en ligne chez un hébergeur gratuit afin de partager votre profil au plus grand nombre sur la toile !
Tous les chapitres sont enregistrés en HD pour que vous puissiez tout voir clairement pendant le cours. (vous pouvez regarder les extraits gratuits).
Je répondrai personnellement à vos questions si vous en avez, et je fournirai autant d'aide que possible pour vous aider à maîtriser le HTML et le CSS.
Bonne formation !
Table des matières de cette formation HTML, CSS (durée : 14h38m)
-
Introduction
- Pourquoi vous devez apprendre le Html et le Css gratuit 00:10:47
-
Découverte du Html
- Comment fonctionne votre navigateur Web 00:05:47
- Les bases du langage HTML 00:16:36
- Créer votre première page Html 00:12:35
-
Apprendre le HTML
- L'éléments HTML Head 00:10:47
- Les élements textuels 00:10:58
- Élément titre 00:04:35
- Éléments liste gratuit 00:04:13
- Les images 00:13:19
- Liens hypertextes 00:15:23
- Les tableaux 00:11:18
- Les médias vidéo et audio 00:13:15
- Les commentaires 00:04:35
- Envoyer un courrier électronique 00:02:11
- Contexte de navigation imbriqué 00:06:21
- Conteneur générique div et span 00:07:41
- Les formulaires 00:28:06
- Validation de code W3C 00:07:45
- Inspecteur 00:12:18
-
Les bases du CSS
- Syntaxe du CSS 00:05:39
- Comment rédiger du Css dans vos pages Html 00:09:18
- Les commentaires 00:04:18
- Introduction aux sélecteurs CSS complexes et combinateurs 00:18:09
- Les attributs class id et les sélecteurs CSS associés 00:08:46
- Feuilles de style en cascade & héritage 00:15:27
- Les éléments HTML div et span en CSS 00:08:57
-
Mise en forme de texte en CSS
- Gestion de la police (font-family) 00:10:29
- Les propriétés CSS de Police 00:10:46
- Les propriétés CSS de Texte 00:11:47
- Interlignes et espacements de Texte gratuit 00:03:49
- Couleur et transparence de Texte 00:07:19
-
Concept de boite CSS
- Les boites en CSS 00:20:24
- Les unités de mesures 00:18:52
- Largeur minimale et maximale d'un élément 00:04:36
- Les éléments flottants 00:10:28
- Types d’éléments HTML block et inline 00:10:32
- Positionner les éléments (position) 00:15:11
- Ordre des différentes couches (z-index) 00:05:26
- Calcul de la taille d’un élément (box-sizing) 00:05:36
- Arrondir les bordures (border-radius) 00:06:28
- Exercice pratique Positionnement 00:01:01
- Exercice pratique Correction 00:05:29
-
CSS utilisation avancée
- Sélecteurs Css Avancés 00:10:58
- Les pseudo-classes 00:06:23
- Les pseudo-elements 00:09:42
- Les transitions en CSS 00:10:48
- Les animations en CSS 00:16:00
-
La propriété Background en Css
- Définir une image d'arriére plan (background-image) 00:06:44
- Répétition de l’arrière plan (background-repeat) 00:02:42
- Origine de l’arrière plan (background-origin) 00:05:06
- Origine de l’arrière plan (background-origin) 00:05:06
- Définir la position de l’arrière plan (background-position) 00:04:00
- Définir la taille des images d'arrière-plan (background-size) 00:05:23
- Définir la façon dont l'arrière-plan s'étend (background-clip) 00:05:55
- Fixer la position de l’arrière plan (background-attachment) 00:03:10
- Ajouter un dégradé linéaire a l'image de fond (linear-gradient) 00:04:04
- Propriété raccourcie background 00:03:30
-
Modèles de boite flexibles (flexbox Css)
- Modèle de boite flexible (flex-direction) 00:05:19
- Répartition des éléments flexible (justify-content) 00:05:16
- Répartition des éléments flexible (justify-content) 00:05:16
- Alignement sur l'axe secondaire (align-items) 00:05:37
- Retour a la ligne des flex-items (flex-wrap) 00:04:07
- Espacement sur l'axe secondaire (align-content) 00:02:56
- La propriété raccourcie flex-flow 00:01:47
- Ordre d'apparition des flex items (order) 00:05:38
- Facteur d'expansion d'un élément flexible (flex-grow) 00:07:31
- Facteur de rétrécissement d'un élément flexible (flex-shrink) 00:04:25
- Taille initiale principale pour un élément flexible (flex-basis) 00:05:22
- La propriété raccourcie flex 00:05:53
- Exercice pratique boites flexibles gratuit 00:02:59
- Correction de l'exercice 00:05:28
-
Les médias queries (responsive design)
- Découverte des médias queries 00:07:15
- Création d'un layout simple 00:12:43
- Responsive design (média queries) 00:09:33
-
CSS Grid layout (modèle de disposition en grille)
- Présentation et terminologie des grilles Css gratuit 00:06:24
- Création d'une grille 00:07:42
- Unités de mesure fractionnée (fr) 00:06:33
- Espacements entre les lignes et les colonnes d'une grille 00:04:15
- Alignement Horizontale et Verticale des items-grid 00:03:44
- Alignement Horizontale et Verticale des items-grid 00:05:47
- Alignement Horizontale et Verticale de la grille 00:04:42
- Emplacement d'un élément sur la grille 00:08:17
- Zones de grille nommées 00:09:34
- Contrôle de l'algorithme de placement automatique 00:08:53
- Définir la taille d'une colonne/ligne de grille créée de façon implicite 00:04:46
-
Réalisation d'un site internet personnel de présentation
- Les nouveaux éléments à valeur sémantique du HTML5 00:06:59
- Maquette du site 00:04:15
-
Entête du site
00:08:51 - Barre de navigation 00:09:12
- Disposition du contenu de la page (grid-css-layout) 00:05:50
- Pied de page du site 00:05:15
- Génération des pages du site 00:04:47
- Index contenu aside : Informations 00:17:27
- Index contenu aside : Atouts 00:16:58
- Adaptation de l’élément pour Mozilla Firefox 00:05:00
- Index contenu section : A propos de moi et Recherche 00:06:10
- Index contenu : boite de compétences 00:08:28
- Portfolio 00:13:48
- Curriculum Vitae 00:12:17
- Contact 00:13:04
- Personnaliser l'icone du site (favicon) gratuit 00:03:09
- Personnaliser l'icone du site (favicon) 00:17:02
-
Héberger votre site web
- Publier son site en ligne gratuit 00:06:58
- Souscription chez un hébergeur 00:09:31
- Présentation de l'interface d'administration et terminologie 00:08:58
- Transfert du site chez l'hébergeur (ftp) 00:09:35
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Jean philippe Parein
-
Etant débutante en conversion, je ne comprenais rien sur les explications en classe mais avec ce cours j'essais de comprendre et je dois réviser cette vidéo pour maîtriser le codage. En tout cas merci pour cette vidéo bien détaillée.
-
Magnifique bien claire
-
Merci pour ce superbe cours ! J'ai bien mieux compris qu'avec des tutos sur Youtube !
-
Avec quelles versions de logiciels ce tuto est-il compatible ?HTML , CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Les exemples de code utilisés au long du cours ainsi que le code source du site web complet
note moyenne
avis laissés