Mise en page de site avec CSS Grid, Flexbox et autres techniques modernes
A course by Javier Usobiaga FerrerConcepteur Web
A course by Javier Usobiaga Ferrer, Concepteur Web
Découvrez les nouvelles grilles et d’autres moyens de concevoir un site avec CSS Shapes, les variables et effets parallax
Le web vit en constante évolution et avec l'arrivée de CSS Grid et Flexbox, les règles du jeu ont de nouveau changé. Javier Usobiaga - concepteur de sites Web, développeur FrontEnd et co-fondateur du studio Swwweet - a 13 ans d'expérience dans la création de divers projets pour des clients tels que la mairie de Barcelone, et avec sa vaste expérience, il vous invite à découvrir les techniques et outils les plus modernes qui révolutionnent le secteur.
Si au cours de Introduction au développement Web [url=https://www.domestika.org/es/courses/74-introduccion-al-desarrollo-web-responsive-con-html-y-css]avec HTML et CSS , vous avez déjà commencé dans le monde du responsive web, en cela vous apprendrez diverses techniques avancées avec des outils tels que CSS Grid, Flexbox, CSS Shapes, des unités de fenêtre, des variables CSS, des transformations 3D ou de type parallaxe effets.
Qu'allez-vous apprendre dans ce cours en ligne ?
25 leçons & 16 vidéos téléchargées
Les unités de la fenêtre
4 minutes, 40 secondes
Images avec ajustement objet
4 minutes, 44 secondes
Colonnes CSS
3 minutes, 1 seconde
Formes CSS
7 minutes, 5 secondes
Variables en CSS
4 minutes, 11 secondes
Introduction à la flexbox
3 minutes, 12 secondes
Que comprend ce cours ?
La première chose que vous ferez est de rencontrer Javier Usobiaga, son parcours professionnel et ses projets les plus marquants.
Vous commencerez par apprendre à façonner la mise en page avec les unités relatives aux unités de la fenêtre, la[/i] object-fit et comment distribuer le texte en colonnes avec des colonnes CSS. Vous verrez comment les formes Web peuvent cesser d'être rectangulaires avec clip-path et CSS Shapes et aussi, vous apprendrez à optimiser votre code avec les variables de propriétés personnalisées natives.
Vous découvrirez la révolution que Flexbox a apportée dans le monde de la mise en page Web . Javier vous apprendra toutes les possibilités d'alignement des éléments. Pour ce faire, il vous expliquera les propriétés du conteneur et du contenu, ainsi que les capacités d'alignement avec un axe principal, un axe croisé et des axes alternatifs.
Vous continuerez à découvrir les nouvelles règles du jeu avec CSS Grid en changeant complètement la façon dont vous structurez votre code et posez le layout . Vous apprendrez quelques fonctions de grille, les propriétés de distribution et de taille et comment vous pouvez créer une grille qui s'adapte à différentes tailles d'écran avec les fonctions répétition et minmax .
Javier expliquera des techniques plus avancées avec CSS Grid sur les zones de grille, l'alignement et l'ordre, l'imbrication et à travers un exemple, vous verrez comment vous pouvez utiliser Grid et Flexbox en combinaison dans un projet.
Vous apprendrez brièvement les transformations 3D avec un exemple pratique de profondeur et d'effets dans scroll pour enfin voir les projets, exemples et ressources sélectionnés par Javier pour servir d'inspiration.
What is this course's project?
Vous ferez un exercice libre avec une ou plusieurs des techniques apprises. Javier fera une page d'information sur la conquête du pôle Sud, vous pourrez choisir le thème et le projet que vous souhaitez.
Projets d'élèves du cours
Who is this online course for?
Toute personne intéressée par la conception moderne et les techniques mise en page avec CSS Grid, Flexbox et d'autres techniques modernes.
Requirements and materials
Pour suivre ce cours, il est nécessaire d'avoir de solides connaissances en HTML et CSS, un ordinateur et un éditeur de code.
Avis
- il y a 8 mois
An Amazing course to learn Flexbox & Grid and some advanced animations.
- il y a 9 mois
increíble
- creative_250792PLUSil y a 9 mois
Cours très instructif, agréable, très complet
- il y a 1 an
Es un curso muy bueno
- il y a 1 an
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Il apprécie également son rôle de professeur de Web Design dans des ateliers et écoles renommés tels qu'Elisava, IDEP.
Usobiaga comprend le Web dans son intégralité, non seulement à quel point il peut être beau sur l'écran de l'ordinateur, mais aussi son utilisation dans différents appareils et circonstances.
Selon ses mots, "je pense que la vitesse à laquelle il se charge ou la réponse à laquelle il répond est aussi important que l'esthétique, et il me semble que dans notre industrie, nous l'oublions souvent".
Contenu
- U1
introduction
- Présentation
- Les influences
- U2
Façonner la mise en page
- Les unités de la fenêtre
- Images avec ajustement objet
- Colonnes CSS
- Formes CSS
- Variables en CSS
- U3
Mise en page en une dimension avec flexbox
- Introduction à la flexbox
- Propriétés du conteneur
- Propriétés du contenu
- Alignements sur l'axe principal et l'axe transversal
- Alignements avancés
- Layouts avancés avec flexbox
- U4
Mise en page en deux dimensions avec grille CSS
- Introduction à la grille CSS
- Fonctions de grille
- Distribution et taille
- Grille réactive automatique
- U5
Grille CSS avancée
- Zones sur la grille
- Alignement et ordre
- Nesting
- Grid (et flexbox) en pratique
- U6
La troisième dimension: la profondeur et les effets de défilement
- Introduction aux transformations 3D
- En-têtes fixes
- Faire défiler les animations synchronisées
- Inspiration et ressources
- PF
Projet final
- Techniques de mise en page Web
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificates
PLUSIf you're a Plus member, get a certificat personnalisé signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Ce cours s’adresse à ceux qui ont des bases en CSS et souhaitent approfondir les mises en page avancées, les techniques modernes et expérimenter avec les propriétés récentes. Il n’est pas nécessaire d’être expert, mais il faut connaître les fondamentaux du HTML et CSS.
Vous devez maîtriser les bases du HTML et CSS, disposer d’un éditeur de code et d’un navigateur moderne. Aucune expérience avec des frameworks ni outils spécifiques n’est requise.
Vous apprendrez à créer des mises en page avancées et responsives avec Flexbox et CSS Grid, des animations parallax, des formes personnalisées, l’utilisation des unités viewport, le contrôle des images et colonnes, les variables CSS et les transformations 3D pour des interfaces web innovantes.
Le cours couvre l’alignement des éléments, les propriétés avancées, les différences entre Flexbox et Grid, les mises en page responsives, les grilles imbriquées, les zones personnalisées, les techniques de distribution et quand choisir l’un ou l’autre selon le design.
Les unités vh et vw servent à adapter la taille des blocs, textes et images à la fenêtre du navigateur, pour des interfaces responsives évitant le scroll horizontal ou les proportions incorrectes.
Oui, vous apprendrez à réaliser des animations parallax, des en-têtes fixes et des effets synchronisés au défilement avec du CSS pur et des techniques avancées d’interaction visuelle.
Oui, le cours explique comment ajuster les images avec object-fit, object-position, les media queries et des techniques pour rendre les images adaptables à tout conteneur et écran.