1
resposta

Estilização HTML

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1><strong>Eleve seu negócio digital a outro nível com um Front-end de qualidade!</strong></h1>
    <p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p> 
    <button><a href="https://www.instagram.com">Instagram</a></button>
    <button><a href="https://github.com/">GitHub</a></button>
    <img src="./Imagem.png" alt="foto de Joana Santos">
</body>
</html>

style.css

body {
    background-color: darkred;
    color: black;
}

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta

Oi, Helena, tudo bem?

Parabéns por compartilhar seu primeiro projeto! É muito legal ver sua evolução no curso. A estrutura do seu HTML está ótima e você conectou o arquivo CSS perfeitamente para fazer as primeiras estilizações!

Uma dica para os seus próximos projetos é sobre os botões. Em vez de colocar a tag <a> (de link) dentro de um <button>, uma prática mais comum e semanticamente correta é estilizar a própria tag <a> para que ela se pareça com um botão.

Isso acontece porque a tag <a> é usada para navegação (levar a outra página), enquanto a <button> é mais voltada para ações (como enviar um formulário, por exemplo).

Você poderia fazer assim:

No seu HTML:

<a href="https://www.instagram.com" class="botao-link">Instagram</a>
<a href="https://github.com/" class="botao-link">GitHub</a>

E no seu CSS:

.botao-link {
    /* Cores de exemplo */
    background-color: #22D4FD; 
    color: #000000;
    
    /* Para parecer um botão */
    padding: 15px 20px;
    text-decoration: none; /* Tira o sublinhado do link */
    border-radius: 8px; /* Deixa as bordas arredondadas */
}

Mas não se preocupe, você vai aprender a fazer estilizações incríveis ao longo dos cursos! O mais importante é que a base do seu projeto está certinha.

Continue com essa dedicação!

Bons estudos!

Sucesso

Imagem da comunidade