Entrar Ainda não tem acesso?
1
resposta

Desafio 1. Estilizando pagina web com css

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Estilizando o projeto com CSS e atividade Lista de exercícios

por Kelson Emanuel Ribeiro
| 18.4k xp | 6 posts

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafio 1</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header>Quem sou eu?</header>
    <h1>Olá, meu nome é Kelson e eu estou aprendendo o CSS</h1>
    <h3>Programo a pouco tempo, mas sempre gostei de computadores e internet. <br>
        E a pouco tempo conheci a porgramação e me apaixonei de cara.</h3>
        <img src="css.jpg" alt="foto css">
        <br>
        <br>
        <footer>Para contato escreva o email aqui abaixo</footer>
        <label>Escreva o E-mail aqui</label> <input type="text"> <button>enviar</button>
        <h4>Se quiser dar uma olhadinha nos meus projetos.</h4>
        <a href="https://github.com/kelsu73">GitHub</a>
</html>

CSS

pesquisei bastante coisa do css, para poder melhorar e fazer mais que o pedido principal da atividade

body{
    background-color:rgb(17, 17, 17);
    color: rgb(255, 255, 255);
    border-style: hidden;

     h1 {
        border-style: inset;
        border-color: rgb(0, 102, 255);
        color:rgb(0, 153, 255)}

     h3{ color:rgb(0, 153, 255)}

     a{   text-decoration: none;
         color: rgb(0, 153, 255)  
     }

    
     button {
        background-color: rgb(0, 153, 255);
        border-radius: 90%;
        border-width: 1cap;
        padding: 1%;
        height: 4%;
     }
}
1 resposta
por Luis Dias
| 3333.2k xp | 3666 posts
Developer PHP (⌐■_■)

Oi Kelson,

Parabéns pelo seu progresso com HTML e CSS! 👏

Seu código está bem estruturado e você já está explorando recursos mais avançados do CSS, o que é ótimo.

Notei alguns pontos que podem ser aprimorados para deixar seu código ainda mais eficiente e organizado:

  1. Aninhamento de seletores: No seu CSS, você aninhou seletores h1, h3 e a dentro do seletor body. Isso não é necessário e pode gerar problemas de especificidade. O correto é declarar esses seletores diretamente, sem aninhamento.

  2. Unidades de medida: Em button, você usou border-width: 1cap; e height: 4%;. A unidade cap é relativa à altura da letra maiúscula do elemento, e pode não ser o que você espera. Para border-width, é mais comum usar px, em ou rem. Para height, usar % pode ser problemático dependendo do contexto. Considere usar rem ou px para um controle mais preciso. 👍

  3. border-radius: O valor de 90% para border-radius pode não gerar o efeito desejado em todos os casos. Para um botão circular, o ideal é usar 50% quando o botão for quadrado. 🤔

  4. Organização do CSS: Para projetos maiores, é uma boa prática organizar seu CSS em seções lógicas, como estilos para o cabeçalho, corpo, rodapé, etc. Isso facilita a manutenção e a leitura do código.

Para saber mais: Documentação oficial sobre seletores CSS.

Continue praticando e explorando as possibilidades do CSS! 💪