Mini-project: a profile card · Mini-projeto: um card 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 precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
Your mini-project
- Time to put it all together and build a profile card.
- Here is what you are aiming for:
Português
Seu mini-projeto
- Hora de juntar tudo e construir um cartão de perfil.
- Aqui está o que você deve alcançar:
<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. 🎉
Português
O que você aprendeu
- HTML: títulos, parágrafos, listas, links, imagens, tabelas, formulários, estrutura da página.
- CSS: cores, texto, modelo de caixa, espaçamento, tamanho e linhas com Flexbox.
- Essa é a verdadeira base de toda página web. Você pode construir coisas agora. 🎉
English
Common mistakes
- Build and check one piece at a time.
- Keep the HTML structure and the CSS styling separate.
Português
Erros comuns
- Construa e verifique uma peça de cada vez.
- Mantenha a estrutura HTML e o estilo CSS separados.
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!
Português
Construa seu cartão
- O layout do cartão já está estilizado, então você pode focar em preenchê-lo.
- Cada tarefa adiciona uma peça — conteúdo, uma imagem, depois cor. Pressione ▶ frequentemente!
Start your card. Inside the .card, add an <h2> with a name and a <p> with one line about you. · Inicie seu card. Dentro do .card, adicione um <h2> com um nome e um <p> com uma linha sobre você.
Add a picture above the name. Add an <img src="/static/code/web-basics/cat.svg"> with alt text, just inside the card. · Adicione uma imagem acima do nome. Adicione um ⟨<img src="/static/code/web-basics/cat.svg">⟩ com texto alt, logo dentro do card.
Finish it with a splash of colour. Give the h2 a colour you like, e.g. h2 { color: teal; }. · Termine com um toque de cor. Dê ao ⟨h2⟩ uma cor de sua preferência, ex: h2 { color: teal; }.