17,00

Tuto Faire de belles cartes en CSS avec CSS

17,00

  • Une formation vidéo de 1h55m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Faire de belles cartes en CSS

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Enzo Ustariz

Enzo Ustariz a publié 54 tutoriels et obtenu une note moyenne de 4,9/5 sur 2 423 tutoriels vendus. Voir les autres formations de Enzo Ustariz

4,8
note moyenne

5
avis laissés
5 étoiles
4
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de jadea laissé le 31/01/2021
    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.

  • 5
    avis de jeansebas laissé le 27/03/2020
    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
    "Hello, merci pour le retour, j'ai pris ça en compte et je passe plus de temps à expliquer désormais ;)"

  • 5
    avis de zag0_ laissé le 01/02/2020
    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)
    "Très bien, merci beaucoup pour l'info de ce dessin ;)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1447 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données