Mini-project: a profile card · Mini-projet : une carte de profil
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Your mini-project
- Time to put it all together and build a profile card.
- Here is what you are aiming for:
Français
Votre mini-projet
- Il est temps de tout assembler et de créer une carte de profil.
- Voici ce que vous visez :
<style>
.card { width: 280px; margin: 0 auto; padding: 20px; text-align: center;
background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; }
h2 { color: teal; margin: 8px 0; }
</style>
<div class="card">
<img src="/static/code/web-basics/cat.svg" alt="My avatar" width="120">
<h2>Sam Lee</h2>
<p>I love drawing and football.</p>
</div>
English
What you've learned
- HTML: headings, paragraphs, lists, links, images, tables, forms, page structure.
- CSS: colours, text, the box model, spacing, sizing, and rows with Flexbox.
- That is the real foundation of every web page. You can build things now. 🎉
Français
Ce que vous avez appris
- HTML : titres, paragraphes, listes, liens, images, tableaux, formulaires, structure de page.
- CSS : couleurs, texte, modèle de boîte, espacement, dimensions et lignes avec Flexbox.
- C'est là la véritable base de chaque page web. Vous pouvez maintenant construire des choses. 🎉
English
Common mistakes
- Build and check one piece at a time.
- Keep the HTML structure and the CSS styling separate.
Français
Erreurs courantes
- Construisez et vérifiez une pièce à la fois.
- Gardez la structure HTML et le style CSS séparés.
English
Build your card
- The card's layout is already styled, so you can focus on filling it in.
- Each task adds one piece — content, a picture, then colour. Press ▶ often!
Français
Construisez votre carte
- La mise en page de la carte est déjà stylisée, donc vous pouvez vous concentrer sur son remplissage.
- Chaque tâche ajoute une pièce — contenu, image, puis couleur. Appuyez sur ▶ souvent !
Start your card. Inside the .card, add an <h2> with a name and a <p> with one line about you. · Commencez votre carte. À l'intérieur du .card, ajoutez un <h2> avec un nom et un <p> avec une ligne à propos de vous.
Add a picture above the name. Add an <img src="/static/code/web-basics/cat.svg"> with alt text, just inside the card. · Ajoutez une image au-dessus du nom. Ajoutez un <img src="/static/code/web-basics/cat.svg"> avec du texte alt, juste à l'intérieur de la carte.
Finish it with a splash of colour. Give the h2 a colour you like, e.g. h2 { color: teal; }. · Terminez-le avec une touche de couleur. Donnez à la h2 une couleur de votre choix, par ex. h2 { color: teal; }.