Créer une carte de visite utilisateur | Tutoriel HTML & CSS

Introduction

Dans ce projet, vous allez apprendre à créer une carte de visite professionnelle avec HTML et CSS. L'objectif est de créer une carte de visite visuellement attrayante et bien structurée qui peut être utilisée pour présenter les informations d'un utilisateur.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer le projet et ouvrir les fichiers nécessaires
Comment centrer les éléments de la carte et de l'avatar de l'utilisateur à l'aide de CSS
Comment centrer horizontalement les éléments de texte gauche (niveau et points)

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Structurer une page HTML pour une carte de visite
Utiliser CSS pour styliser et positionner les éléments sur la page
Appliquer des techniques pour centrer les éléments horizontalement et verticalement

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-300116{{"Créer une carte de visite visuellement attrayante"}} css/properties -.-> lab-300116{{"Créer une carte de visite visuellement attrayante"}} css/box_model -.-> lab-300116{{"Créer une carte de visite visuellement attrayante"}} css/positioning -.-> lab-300116{{"Créer une carte de visite visuellement attrayante"}} css/transformations -.-> lab-300116{{"Créer une carte de visite visuellement attrayante"}} end

Configurer le projet

Dans cette étape, vous allez configurer le projet et ouvrir les fichiers dans l'éditeur.

Ouvrez le dossier du projet, qui contient les fichiers et les répertoires suivants :

├── avatar.png
├── style.css
└── index.html

Ici :

index.html est la page principale.
style.css est le fichier dans lequel vous devez ajouter les styles requis.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez-le manuellement et vous verrez la page.

Centrer la carte et l'avatar

Dans cette étape, vous allez compléter la section TODO dans style.css pour centrer les éléments de la carte et de l'avatar de l'utilisateur.

Localisez la section TODO dans le fichier style.css.
Ajoutez les règles CSS nécessaires pour centrer horizontalement et verticalement l'élément de carte (classe = card) et l'avatar de l'utilisateur (classe = avatar).

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Enregistrez les modifications dans le fichier style.css.
Rafraîchissez le navigateur pour voir le résultat final, le résultat final est le suivant :

Félicitations! Vous avez réussi à terminer le projet des cartes de visite professionnelles.

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.