Dans ce tuto en vidéo, nous allons réaliser ensemble plusieurs cartes en CSS.
Une carte c'est un élément qui va nous servir à montrer du contenu.
Elles peuvent contenir des images ou non, et elles sont utilisées dans quasiment chaque site.
Que ce soit pour afficher des prix quand on souscrit à un service en ligne, montrer des profils de personnes sur un réseau social ou encore dans les e-commerce au moment d'acheter des vêtements par exemple.
S'entrainer à créer des cartes, comme nous allons le faire, va considérablement augmenter votre niveau de compétences en Front-End.
Vous allez mieux comprendre la disposition globale, les marges et paddings, flexBox, les pseudos-éléments, les couleurs et dégradés, CSS Grid et j'en passe...
Dans ce tuto faire de belles cartes en CSS
Nous allons réaliser ensemble 4 projets de cartes en CSS :
- Des cartes style e-commerce
- Une cartes pour site de streaming de films
- Des cartes avec des images oversize
- Une carte avec une disposition basée sur une grille CSS
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Les codes sources sont fournis avec le cours.
Rendez-vous de l'autre côté !
Table des matières de cette formation CSS (durée : 1h55m)
-
Introduction
- Introduction gratuit 00:01:52
- Source et éditeur gratuit 00:03:00
-
Projet 1 : Cartes e-commerce
- Mise en place dossier 00:02:11
- Partie HTML 00:03:23
- Image 00:10:24
- Survol et titre 00:11:10
- Finitions 00:06:41
-
Projet 2 : Carte Cinéma
- Mise en place 00:07:05
- Partie CSS 1 00:07:58
- Partie CSS 2 00:10:10
-
Projet 3 : Cartes image oversize
- Mise en place 00:02:06
- HTML 00:01:22
- Partie CSS 1 00:10:15
- Partie CSS 2 00:02:34
-
Projet 4 : Carte grille
- Mise en place 00:02:51
- Partie HTML 00:06:11
- Visualiser la grille 00:08:05
- Partie CSS 1 00:09:37
- Partie CSS 2 00:08:35
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Superbe tuto, même si effectivement, moi aussi je dois souvent revenir en arrière. Très pro, je suis d'ailleurs abonné à la newsletter.
-
Un tuto de très grande qualité. Un seul reproche qui n’enlève rien a ton travail. Tu parle beaucoup trop vite. Je dois mettre souvent sur pause et revenir en arrière. Mais sinon c’est bien expliqué mais trop vite. A bientôt
-
Bonjour Enzo, Un grand merci. Excellent tuto et cette fois le rythme était parfait (merci de prendre en compte nos remarques :) ). Des notions de Flexbox qui me posaient problème se sont éclairées. Toutes tes explications étaient claires et détaillées. Ce fut, en ce qui me concerne, un réel plaisir de suivre ton cours. A une prochaine fois pour un nouveau tuto. En pour répondre à ta question concernant l'affiche du parrain, voici une information que j'ai déniché : "on voit l'acteur Marlon Brando avec un regard noir, entouré de noir et de ténèbres. Une main de marionnettiste est à coté de lui pour symboliser la manipulation, toujours entourée d'obscurité." (Source http://tpemafia1.e-monsite.com/pages/the-god-father-affiche.html)
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés