Dans ce cours, vous allez tenter de comprendre les bases de CSS et comment l'utiliser pour styliser vos pages web. À la fin de ce cours, vous serez en mesure de créer une page web simple avec CSS.
100 labs
Start with Pet's House
CSS Fundamentals
Layout and Positioning
Technique clearfix en CSS
Techniques de centrage avec Flexbox réactif
Maîtrise de la mise en page en grille centrée
Centrer des éléments verticalement et horizontalement
Centrage avec display: table
Enfants répartis régulièrement
Création de dispositions en carreaux responsives
Fondamentaux de la mise en forme CSS
Rapport de forme de conteneur réactif avec CSS
Rapport constant largeur/hauteur
Ajuster une image à l'intérieur d'un conteneur
Liste avec des titres de section collants
Mise en page responsive avec barre latérale
Masquage d'éléments hors de l'écran accessible
Stylisation d'éléments en plein écran avec CSS
Text and Typography
Tronquer le texte avec l'overflow CSS
Raccourcir un texte multiligne
Guillemets stylisés
Création d'effets de texte gravés avec CSS
Typographie fluide responsive avec CSS
Création de texte en gradient avec CSS
Sélection de texte personnalisée
Technique de majuscule initiale élégante
Tronquer un texte multiligne
Soulignement de texte joli
Désactiver la sélection de contenu avec CSS
Compteurs de liste imbriqués avec CSS
Visual Effects and Patterns
Guide de base pour les fondamentaux de CSS
Techniques de style CSS pour le développement web
Bordure avec triangle en haut
Motif de fond en damier
Motif de fond à rayures
Motif de fond en points de polka
Motif de fond en zigzag
Création de séparateurs de forme avec CSS
Création d'ombres dynamiques avec CSS
Dégradé de défilement d'éléments débordants
Masquer les barres de défilement
Personnaliser les styles de la barre de défilement avec CSS
Superposition de texte sur une image
Liste à rayures zébrées
Effet CSS Sibling Fade
Fondamentaux de CSS pour des pages web visuellement attrayantes
Création de maquettes web visuellement attrayantes
Mosaïque d'images réactives
Advanced Interactions and Animations
Créer un menu déroulant interactif en CSS
Défilement horizontal avec prise en charge des points d'arrêt
Vertical Scroll Snap
Barre de progression de défilement
Amélioration de l'interactivité des formulaires avec CSS Focus-Within
Afficher du contenu supplémentaire au survol
Animation de remplissage du bouton
Animation d'agrandissement de bouton
Animation de rétrécissement de bouton
Création d'une animation de chargeur à effet d'impulsion avec CSS
Techniques CSS pour des designs visuellement attrayants
Animation de zoom avant et arrière
Animation de bordure de bouton
Animation de boîte à ombre au survol
Rotation d'image au survol
Transition douce de hauteurs dynamiques
Transformation en perspective au survol
Fondamentaux de CSS pour la mise en forme web
Effet de survol de lien en forme de zigzag
Conception web responsive avec CSS
Animation en CSS en gradation pour les éléments d'une liste
Créer un commutateur basculant avec CSS
Galerie d'images avec défilement vertical
Carte avec découpage d'image
Animation de balancier du bouton
Créer une carte tournante avec CSS
Galerie d'images avec défilement horizontal
Animation de soulignement au survol
Menu sur survol d'image
Effet de survol et de focus sur les éléments de la liste de navigation
Bouton radio personnalisé
Suivi du gradient du curseur de la souris
Création d'un effet de machine à écrire avec HTML, CSS et JavaScript
Liste avec des titres de section flottants
Chargeur d'animation CSS rebondissant
Cube 3D en rotation
Superposition d'image au survol
Boutons de partage social animés avec CSS
Stylisation des cases à cocher animées avec CSS
Disposition en maçonnerie responsive avec CSS
Image avec un texte superposé
Secousse sur entrée invalide
Substitut pour les images qui échouent à charger
Input avec préfixe
Masquer les éléments vides
Styliser les liens sans texte
Explorer les Arbres de Compétences connexes
Web Development
Rejoignez notre Discord et apprenez ensemble
Rejoindre maintenant
