Techniques CSS Avancées

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction

Aperçu du Cours Objectif du Cours Sujets du Cours Comment Réussir

2. Positionnement des Éléments

Qu'est-ce Que le Positionnement?Positionnement Relatif Défi : Positionnement Relatif Positionnement Absolu Défi : Positionnement Absolu Positionnement Fixe Défi : Positionnement Fixe Positionnement Sticky Défi : Positionnement Sticky Ordre d'Empilement Défi : Ordre d'Empilement Débordement de Contenu

3. Transitions

Qu'est-ce Qu'une Transition ?Sélection de la Propriété de Transition Durée de Transition Fonction de Temps de Transition Délai de Temps de Transition Combinaison de Transition Défi : Ajout de Transition

4. Animations

Qu'est-ce Que l'Animation ?Spécifier le Temps de l'Animation Contrôler la Quantité et la Direction de Lecture de l'Animation Gestion de l'État de l'Animation Composition d'Animation Défi : Ajouter une Animation

5. Transformations

Qu'est-ce Que la Transformation?Mise à l'Échelle Rotation Défi : Ajout de Mise à l'Échelle et de Rotation Traduire Inclinaison Perspective Défi : Ajouter la Translation et l'Inclinaison

6. Sites Web et Applications Adaptatifs/Réactifs

Qu'est-ce Que le Design Adaptatif/Réactif ?@media Requête Dispositions Adaptatives - Réactives Inspection de la Page Web Défi : Inspection de la Mise en Page Adaptative/Réactive

7. Préprocesseurs

Qu'est-ce Qu'un Préprocesseur ?Syntaxe Sass Variables Sass Opérateurs Numériques Sass Imbrication Sass Directive @extend Structure des Dossiers-Fichiers

Défi : Inspection de la Mise en Page Adaptative/Réactive

Tâche

Évaluez la réactivité et l'adaptabilité du site web présentant des informations sur différents aliments. La page web est actuellement conçue pour être réactive dans la première partie et adaptable dans la seconde partie. Il y a 4 points de rupture à considérer :

300px: Petits smartphones.
480px: Grands smartphones.
720px: Tablettes.
1200px: Ordinateurs de bureau.

Ouvrez la page web dans une nouvelle fenêtre en utilisant le bouton "Ouvrir l'aperçu dans une nouvelle fenêtre" en bas à gauche du bac à sable. Changez la largeur de la fenêtre d'affichage et observez les différences de mise en page et de styles à chaque point de rupture.

Remarque

Si vous avez besoin d'aide pour savoir comment procéder, il y a des instructions dans un enregistrement sous le bac à sable.

Tout était clair ?

Merci pour vos commentaires !

Section 6. Chapitre 5

Demandez à l'IA

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction

Aperçu du Cours Objectif du Cours Sujets du Cours Comment Réussir

2. Positionnement des Éléments

Qu'est-ce Que le Positionnement?Positionnement Relatif Défi : Positionnement Relatif Positionnement Absolu Défi : Positionnement Absolu Positionnement Fixe Défi : Positionnement Fixe Positionnement Sticky Défi : Positionnement Sticky Ordre d'Empilement Défi : Ordre d'Empilement Débordement de Contenu

3. Transitions

Qu'est-ce Qu'une Transition ?Sélection de la Propriété de Transition Durée de Transition Fonction de Temps de Transition Délai de Temps de Transition Combinaison de Transition Défi : Ajout de Transition

4. Animations

Qu'est-ce Que l'Animation ?Spécifier le Temps de l'Animation Contrôler la Quantité et la Direction de Lecture de l'Animation Gestion de l'État de l'Animation Composition d'Animation Défi : Ajouter une Animation

5. Transformations

Qu'est-ce Que la Transformation?Mise à l'Échelle Rotation Défi : Ajout de Mise à l'Échelle et de Rotation Traduire Inclinaison Perspective Défi : Ajouter la Translation et l'Inclinaison

6. Sites Web et Applications Adaptatifs/Réactifs

Qu'est-ce Que le Design Adaptatif/Réactif ?@media Requête Dispositions Adaptatives - Réactives Inspection de la Page Web Défi : Inspection de la Mise en Page Adaptative/Réactive

7. Préprocesseurs

Qu'est-ce Qu'un Préprocesseur ?Syntaxe Sass Variables Sass Opérateurs Numériques Sass Imbrication Sass Directive @extend Structure des Dossiers-Fichiers

Défi : Inspection de la Mise en Page Adaptative/Réactive

Tâche

Évaluez la réactivité et l'adaptabilité du site web présentant des informations sur différents aliments. La page web est actuellement conçue pour être réactive dans la première partie et adaptable dans la seconde partie. Il y a 4 points de rupture à considérer :

300px: Petits smartphones.
480px: Grands smartphones.
720px: Tablettes.
1200px: Ordinateurs de bureau.

Ouvrez la page web dans une nouvelle fenêtre en utilisant le bouton "Ouvrir l'aperçu dans une nouvelle fenêtre" en bas à gauche du bac à sable. Changez la largeur de la fenêtre d'affichage et observez les différences de mise en page et de styles à chaque point de rupture.

Remarque

Si vous avez besoin d'aide pour savoir comment procéder, il y a des instructions dans un enregistrement sous le bac à sable.

Tout était clair ?

Merci pour vos commentaires !

Section 6. Chapitre 5

some-alt