Objectifs
Description
HTML 5 et CSS 3 sont indissociable. Sans le CSS, le web aurait l’allure d’un immense livre rédigé à la machine à écrire, et grâce à lui, on développe sans cesse de nouvelles tendances graphiques, des animations, des standards d'accessibilité, pour des expériences utilisateurs encore plus riche !
Détails de la formation
Dans cette formation, nous apprenons dans une première partie :
- La syntaxe du CSS, les sélecteurs, pour mettre en forme chaque élément de notre code HTML
- La gestion des polices, des couleurs, les unités de valeurs
- Les arrières plans, la gestion des images
- Le positionnement des éléments sur la page
- La mise en forme des tableaux, des listes, des boutons, et des formulaires
Pas à pas, et grâce aux fichiers de travail téléchargeables, vous maitrisez les fondamentaux de CSS et pouvez proposer un site internet plaisant graphiquement et agréable à utiliser.
Dans un second temps, je vous propose de réaliser l’intégration HTML et CSS d’un projet web, des premières lignes de code, à la mise en production sur votre serveur.
Nous travaillons ainsi à partir d’une maquette, sur l’intégration de toutes les pages de notre site, en passant par les bonnes pratiques, la validation W3C et la gestion des styles …
Pas à pas, vous réalisez un projet complet d’intégrateur web ou de développeur front end.
Programme détaillé de la formation
Module 1 - Qu'est-ce que le CSS ?
Définition
04:39
Module 2 - Comment appliquer les styles?
Module 3 - Commentez votre code CSS
Le commentaire CSS
03:22
Structurer son code CSS
04:39
Module 4 - Exprimez la couleur en CSS
Module 5 - Les différents types de sélécteurs CSS
Les sélécteurs CSS
02:43
Module 6 - Le sélécteur HTML
Saisie de code html
00:14
Le sélécteur d'élement
06:21
Module 7 - Le sélécteur hiérachique ou ascendant
Module 8 - Les pseudo classes de liens
Module 9 - Le sélécteur d'identifiant
Module 10 - Le sélécteur de classe
Le sélécteur de classe
05:41
Module 11 - Le selécteur adjacent
Saisie de code html
02:46
Le sélécteur adjacent
00:45
Module 12 - Le selécteur enfant
Le selécteur enfant
02:28
Module 13 - Les autres pseudo classes
Module 14 - Le sélécteur d'attribut
Le sélécteur d'attribut
08:28
Module 15 - Qu'elles sont les unités de mesure sur le web ?
Les unités de valeurs
05:41
Module 16 - Gérez vos polices
Familles de polices
04:38
Taille des polices
01:29
La couleur du texte
00:35
L'interligne - centrage
04:16
La graisse de la police
01:55
Module 17 - Transformez et alignez votre texte
Les petites capitales
02:24
Les soulignement
00:34
L'alignement
04:21
L'indentation
01:13
Espacement des lettres
01:37
Espacement des mots
00:38
Module 18 - Chargez une police pour votre site web
Module 19 - Ajoutez des bordures
Les bordures en css
05:22
Module 20 - Stylez vos listes
Les styles de listes
09:10
Module 21 - Comprendre la cascade et l'héritage
Module 22 - Découvrez le modèle de boîte
Les bordures
00:57
Les marges
02:56
Module 23 - Visualisez votre code avec l'inspecteur d'éléments
Module 24 - Comprendre le fonctionnement des marges
La fusion des marges
06:40
Module 25 - Tout sur les arrières plans
L'image de fond
02:33
Module 26 - Eléments bloc ou en ligne?
Module 27 - Faites flotter vos éléments
Module 28 - Utilisez flex pour vos mises en pages
Flex direction
01:39
Flex wrap
01:55
Justify content
02:33
Align items
01:44
Align content
01:52
Flex-grow
02:02
Order
01:54
Module 29 - Rendez votre code CSS compatible
Préfixage des propriétés
04:03
Module 30 - Passez des élements par-dessus les autres
Module 31 - Créez de la transparence
Module 32 - Fixez vos éléments si nécessaire
La position fixed
07:39
Module 33 - Stylez vos tableaux
Module 34 - Stylez vos boutons
Module 35 - Stylez vos formulaires
Module 36 - Méthodologie de mise en page d'un site web
Présentation du site
02:48
Module 37 - Le reset CSS
Normalize
06:27
Module 38 - Les commentaires conditionnels
Module 39 - Créez vous un modèle
Module 40 - Créez la page d'accueil
Module 41 - Validez vos pages HTML au W3C
Module 42 - Stylez votre code de base en fonction de la maquette
Module 43 - Positionnez les éléments
Module 44 - Stylez l'en-tête du site
En-tête du site
11:08
Pied de page du site
02:55
Module 45 - Stylez en pensant design pattern
Module 46 - Stylez du haut vers le bas
La bannière
10:40
Module 47 - Stylez les mises en avant de contenu
Module 48 - Stylez les contenus contextuels
Les contenus contextuels
08:38
Module 49 - Ajoutez une page d'attérissage
Module 50 - Ajouter une page de contenu
Module 51 - Ajoutez un point de contact et la localisation
Le formulaire
10:36
Module 52 - Les mentions légales d'un site
Module 53 - N'oubliez pas le Favicon
Ajouter un Favicon
07:15
Module 54 - Validez vos pages CSS au W3C
Le validateur W3C
03:42
Module 55 - Stylez l'impression
Module 56 - Comment héberger son site internet?
Domaine et hébergement
06:51
Module 57 - Comment mettre en ligne un site web
Transférer les données
10:15
Module 58 - Créez une page 404
Module 59 - Optimisez votre site et sa performance d'affichage
Module 60 - Aidez les robots d'indexation avec le sitemap
Module 61 - Qu'est-ce que le fichier robot?
Module 62 - Créez des arrondis
Les arrondis
06:44
Module 63 - Appliquez des ombres portées
Les ombres
15:38
Module 64 - Créez de dégradés
Les dégradés
08:38
Module 65 - Insérez des éléments graphiques avec le CSS
contenu généré
10:51
Module 66 - Numérotez des titres
Les compteurs en CSS
04:26
Module 67 - Créez des transitions
Exemple de transition
04:37
Module 68 - Transformez les éléments
Module 69 - Animez vos éléments
Améliorer l'animation
04:11
Module 70 - Fixez un fond image au scroll
Fixer l'image de fond
05:40
Module 71 - Décallez des éléments
Le margin négatif
03:23
Module 72 - Affichez une image plein écran
Image full screen
03:51
Module 73 - Centrez un texte sur la hauteur par dessus une image
Première méthode
03:44
Deuxième méthode
03:42
Module 74 - Créez un menu déroulant
Module 75 - Créez des effets au survol de la sourtis sur vos menus
Module 76 - Utilisez flex pour vos menus
Module 77 - La technique des sprites
Les sprites
13:12
Module 78 - Créez des bandes en bias
Module 79 - Animez un bouton
Animez un bouton
08:27
Module 80 - Créez une interaction au survol d'une image
Module 81 - Créez une lightbox en full CSS3
La pseudo classe target
12:20
Module 82 - Animez un bouton de menu
Un bouton de menu animé
12:41
Module 83 - Créez un menu full canvas en CSS3
Module 84 - Complétez le code html
Module 85 - Stylez le css global
Stylez le css global
02:25
Module 86 - Styler le header
En tête du site
05:04
Module 87 - Styler le footer
Pied de page du site
01:25
Module 88 - Styler la home
Module 89 - Styler la page 2
La page de contenu
00:49
Module 90 - Styler la page 3
La page contact
04:48
4 commentaires
4,5
4 votes
5
4
3
2
1
Formation ajoutée au panier
Apprendre CSS 3
Formateur expert
Accès sur tous vos appareils
Fichiers de travail téléchargeables
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.