Mini-project: a profile card · Mini-proyecto: una tarjeta de perfil
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Your mini-project
- Time to put it all together and build a profile card.
- Here is what you are aiming for:
Español
Tu mini-proyecto
- Es hora de poner todo junto y construir una tarjeta de perfil.
- Esto es lo que debes lograr:
<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. 🎉
Español
Lo que has aprendido
- HTML: encabezados, párrafos, listas, enlaces, imágenes, tablas, formularios y estructura de página.
- CSS: colores, texto, el modelo de caja, espaciado, dimensiones y filas con Flexbox.
- Esa es la verdadera base de cada página web. Ahora puedes construir cosas. 🎉
English
Common mistakes
- Build and check one piece at a time.
- Keep the HTML structure and the CSS styling separate.
Español
Errores comunes
- Construye y revisa una parte a la vez.
- Mantén separada la estructura HTML del estilo CSS.
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!
Español
Construye tu tarjeta
- El diseño de la tarjeta ya está estilizado, por lo que solo debes llenarla con contenido.
- Cada tarea añade una pieza: primero contenido, luego una imagen y finalmente color. ¡Presiona ▶ con frecuencia!
Start your card. Inside the .card, add an <h2> with a name and a <p> with one line about you. · Comienza tu tarjeta. Dentro del .card, añade un <h2> con un nombre y un <p> con una línea sobre ti.
Add a picture above the name. Add an <img src="/static/code/web-basics/cat.svg"> with alt text, just inside the card. · Añade una imagen encima del nombre. Añade un <img src="/static/code/web-basics/cat.svg"> con texto alt, justo dentro de la tarjeta.
Finish it with a splash of colour. Give the h2 a colour you like, e.g. h2 { color: teal; }. · Termina con un toque de color. Dale al h2 un color que te guste, p. ej. h2 { color: teal; }.