CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Mise en page et style CSS des éléments

Mise en page et style CSS des éléments

Les ingrédients

Vidéo non disponible ! Réessayez plus tard

14h 58min

172 leçons

4,5

Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

14h 58min

172 leçons

4,5

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Personnalisation des listes et des bordures

Objectifs

Les objectifs de cette vidéo sont de comprendre le positionnement CSS, apprendre à personnaliser les listes et ajouter des bordures aux éléments.

Résumé

Cette leçon porte sur la mise en page CSS et la personnalisation des listes, ainsi que l'ajout de bordures.

Description

Dans cette leçon, nous abordons comment utiliser des classes CSS pour positionner des éléments côte à côte. Nous corrigons un problème de positionnement en ajoutant la classe appropriée avec une largeur définie. Ensuite, nous nous concentrons sur la section des ingrédients d'une maquette, où nous retirons les puces des listes et le padding, tout en ajoutant des bordures basses entre les éléments de la liste. Enfin, chaque élément de la liste reçoit un padding pour garantir un bon espacement par rapport aux bordures, apportant ainsi une meilleure organisation visuelle.

Ces étapes permettent non seulement d'illustrer l'utilisation de classes CSS pour le positionnement, mais aussi d'incorporer des bordures et des styles de liste via CSS. Cela inclut l'annulation des marges et des styles de liste par défaut, pour améliorer l'esthétique et la lisibilité des éléments.

Questions - réponses

Pourquoi les éléments ne se positionnent-ils pas correctement côte à côte?

Les éléments ne se positionnent pas correctement côte à côte parce que la classe CSS 'bloc deux tiers' n'était pas créée, ce qui est corrigé en définissant une largeur appropriée.

Quelles modifications sont apportées aux listes dans la section des ingrédients?

Les puces de liste et le padding sont retirés, et une bordure basse est ajoutée à chaque élément de liste pour améliorer son apparence et organisation.

Quel padding est ajouté aux éléments de la liste pour espacer les bordures?

Un padding de 5 pixels à droite et à gauche, et de 15 pixels en haut et en bas, est ajouté aux éléments de la liste pour espacer les bordures et améliorer l'apparence visuelle.

Programme détaillé

Accueil de la formation

Module 1 - Qu'est-ce que le CSS ?

Définition 04:39

Module 2 - Comment appliquer les styles?

Le style en ligne 01:47

Le style dans le head du document 02:46

Le style css dans un fichier 03:45

Module 3 - Commentez votre code CSS

Le commentaire CSS 03:22

Structurer son code CSS 04:39

Module 4 - Exprimez la couleur en CSS

La couleur en Hexadécimal 02:39

La couleur en RGB 01:32

Les mots clefs 01:06

Outils pratiques 04:41

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

Le sélécteur hiérachique pour être plus spécifique 03:48

Module 8 - Les pseudo classes de liens

Les pseudo classes de liens 05:26

Module 9 - Le sélécteur d'identifiant

Le sélécteur d'identifiant 04:34

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

Les autres pseudo classes 05:44

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

L'orientation de la police 02:44

La graisse de la police 01:55

Module 17 - Transformez et alignez votre texte

Les capitales - Minuscules 01:41

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

Chargez des polices en local 11:10

Chargez des polices via des services en ligne 05:21

Les font icons 15:08

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

Le poid et l'origine 03:13

Le tri par la spécificité - l'ordre des styles d'auteurs 03:24

Le tri par la spécificité - la spécificité par les nombres 04:04

Module 22 - Découvrez le modèle de boîte

Le contenu, le fond de couleur et le padding 04:52

Les bordures 00:57

Les marges 02:56

Les dimensions et le calcul de la boîte 04:10

Le modèle de boîte décomposé 01:11

Module 23 - Visualisez votre code avec l'inspecteur d'éléments

L'inspecteur d'élément 01:21

Visualiser les élément HTML 02:07

Visualiser le code CSS 02:30

Visualiser le modèle de boite 01:59

Modifier son code tester en live 04:27

Les avantages de l'inspecteur d'éléments 13:45

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

Répétition d'une image de fond 01:54

Positionner l'image de fond 03:17

Dimensionner l'image de fond 05:05

Placer une image d'en-tête 08:24

Module 26 - Eléments bloc ou en ligne?

Visibilité d'un élément 01:43

Elément bloc 02:30

Elément inline et inline-bloc 02:48

Styler la navigation 16:13

Module 27 - Faites flotter vos éléments

Faire floater une image 04:49

Stopper le débordement des float 08:16

Positionnement des éléments en float 06:19

Module 28 - Utilisez flex pour vos mises en pages

Le container - les items - flex 02:18

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

Exemple de positionnement 04:49

Positionnement des éléments avec flex 14:27

Module 29 - Rendez votre code CSS compatible

Préfixage des propriétés 04:03

Module 30 - Passez des élements par-dessus les autres

La position relative 03:29

La position absolute 12:03

Le Z-index 02:14

Module 31 - Créez de la transparence

La transparence en couleur et transparence sur les éléments 03:35

Module 32 - Fixez vos éléments si nécessaire

La position fixed 07:39

Module 33 - Stylez vos tableaux

Exercice de saisie 00:27

Correction exercice de saisie 02:20

Les propriétés relatives aux tableaux 10:47

Module 34 - Stylez vos boutons

Styler les call to action primaires et secondaires 11:45

Module 35 - Stylez vos formulaires

Exercice de saisie 00:45

Correction exercice de saisie 04:20

Positionner les labels et les input 03:59

Styler les labels 05:54

Styles les inputs 13:19

Module 36 - Méthodologie de mise en page d'un site web

Présentation de la méthodologie 03:02

Présentation du site 02:48

Module 37 - Le reset CSS

Normaliser avant de commencer 05:12

Normalize 06:27

Module 38 - Les commentaires conditionnels

La compatibilité du code en fonction des navigateurs 04:49

Compatibilité des documents 07:42

Module 39 - Créez vous un modèle

Principe du gabarit - Framework CSS 08:14

Module 40 - Créez la page d'accueil

Réalisation de la page d'accueil - Schéma sémantique et saisie 06:47

Module 41 - Validez vos pages HTML au W3C

Le validateur HTML du W3C 04:13

Module 42 - Stylez votre code de base en fonction de la maquette

Stylez votre code de base 09:42

Module 43 - Positionnez les éléments

Positionez les éléments principaux de la page 10:46

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

Les classes de design pattern 02:38

Module 46 - Stylez du haut vers le bas

La bannière 10:40

Module 47 - Stylez les mises en avant de contenu

Les mises en avant de contenu 06:36

Module 48 - Stylez les contenus contextuels

Les contenus contextuels 08:38

Module 49 - Ajoutez une page d'attérissage

Schéma sémantique et saisie 04:33

La bannière 01:34

Les catégories 07:17

Module 50 - Ajouter une page de contenu

Schéma sémantique et saisie 08:17

Le fil d'arriane 05:35

Informations de préparation 08:47

Les ingrédients 03:29

Insérer un iframe vidéo 04:49

Module 51 - Ajoutez un point de contact et la localisation

Le formulaire 10:36

Module 52 - Les mentions légales d'un site

Les pages de mentions légales 02:48

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

Surclasser le code existant ou créer un style spécifique 09:27

Les propriétés spécifiques pour l'impression 05:28

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

La page 404 d'un site et sa mise en place sur le serveur 07:35

Module 59 - Optimisez votre site et sa performance d'affichage

Mise en place côté serveur 08:22

Minifiez le code HTML et le code CSS 03:48

Module 60 - Aidez les robots d'indexation avec le sitemap

Créez votre fichier sitemap en ligne 04:54

Module 61 - Qu'est-ce que le fichier robot?

Créez votre fichier robot 06:24

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

Les propriétés de transitions 10:09

Exemple de transition 04:37

Module 68 - Transformez les éléments

Les propriétés de transformation 09:48

Exemple de transformation 04:40

Module 69 - Animez vos éléments

Les propriétés d'animation 07:19

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

Afficher un sous menu au survol de la souris 09:41

Module 75 - Créez des effets au survol de la sourtis sur vos menus

Un menu avec du contenu généré - 1 04:40

Un menu avec du contenu généré - 2 02:18

Module 76 - Utilisez flex pour vos menus

Menu avec une liste de liens 03:06

Menu avec des liens simples 02:21

Module 77 - La technique des sprites

Les sprites 13:12

Module 78 - Créez des bandes en bias

La valeur skew 03:25

La valeur skew en contenus généré 04:30

Les bandes en biais sur des images de fond 05:10

Module 79 - Animez un bouton

Animez un bouton 08:27

Module 80 - Créez une interaction au survol d'une image

Une interaction au survol d'une image 17:19

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

Utilisation de l'input checkbox 09:18

Module 84 - Complétez le code html

Gabarit HTML 00:49

Incorporez vos pages html au gabarit 00:17

Complétez votre code html avec la bonne sémantique et les bonnes classes 06:11

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

La page d'accueil - partie 1 05:53

La page d'accueil - partie 2 02:14

La page d'accueil - partie 3 05:03

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

pierre.hiroux

Il y a 5 months

Commentaire

La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.

henridjithat

Il y a 1 year

Commentaire

Très bonne formation, étant débutant j'ai beaucoup appris.

yvan.vogel

Il y a 2 years

Commentaire

J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.

g.vanleynseele

Il y a 3 years

Commentaire

Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !