Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

Lista de exercícios 02

style.css

body {
    height: 100vh;
}
  1. e 03.
    style.css
body {
    height: 100vh;
    width: 100%;
    justify-content: center;
    display: flex;
    border: 6px solid blue;
    background-color: black;
    color: white;
}

reset.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
    1. e 06.
      index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exercicio 02</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header></header>
        <main class="container">
                <div>
                    <p>O intúito desse projeto web...</p>
                </div>
                <div>
                    <p>O projeto web também oferece...</p>
                </div>
                
                <img class="contorno" src="html.png" alt="imagem projeto">
        </main>
        <footer></footer>
    </body>
</html>

style.css

body {
    height: 100vh;
    width: 100%;
    justify-content: center;
    display: flex;
    border: 6px solid blue;
    background-color: black;
    color: white;
}

.container {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.titulo-destaque {
    color: #22d4fd;
}

.contorno {
   border: 3px solid red; 
   padding: 15px;
}

reset.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
1 resposta

E aí, Christopher! Como está?

Parabéns por ter compartilhado o seu código conosco!

Eu gostei bastante de como você trabalhou o reset CSS para padronizar estilos com CSS, aplicou muito bem o flexbox para organizar os elementos e ainda entendeu a importância da container para estruturar o layout da página.

Falando nisso, você sabia que:

Reset CSS

O conceito de reset CSS surgiu no início dos anos 2000, quando desenvolvedores perceberam que navegadores aplicavam estilos padrões diferentes. Eric Meyer popularizou resets para garantir consistência, ajudando a uniformizar o design entre plataformas.

Flexbox

Pouca gente sabe que o Flexbox foi criado para substituir técnicas antigas como tabelas e floats. Ele trouxe flexibilidade ao design responsivo, permitindo que elementos se ajustem dinamicamente em diferentes tamanhos de tela sem esforço extra.

Interessante né?!

Continue postando as suas soluções! Além de ganhar pontos de XP na plataforma, você pode ajudar outros estudantes no fórum.

Alguns materiais podem estar em inglês, mas é possível compreendê-los usando o recurso de tradução de páginas do próprio navegador.

Ah, uma pergunta: o que você prefere praticar mais, aplicar resets para garantir consistência ou explorar o flexbox para criar layouts responsivos e modernos?

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!