Configurar o Ambiente do Projeto
Nesta etapa, você configurará o ambiente do projeto para aprender sobre o posicionamento absoluto CSS. Criaremos um diretório de projeto dedicado e prepararemos os arquivos necessários para o nosso laboratório.
Primeiro, vamos navegar para o diretório do projeto e criar uma nova pasta para o nosso projeto de posicionamento CSS:
cd ~/project
mkdir css-positioning-lab
cd css-positioning-lab
Agora, vamos criar a estrutura básica do projeto. Criaremos um arquivo index.html e um diretório styles para organizar nossos arquivos CSS:
mkdir styles
touch index.html styles/main.css
Vamos verificar a estrutura do diretório:
tree
Exemplo de saída:
.
├── index.html
└── styles
└── main.css
Abra o arquivo index.html no WebIDE. Adicionaremos uma estrutura HTML5 básica para preparar nosso laboratório de posicionamento CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<!-- We'll add content in the next steps -->
</body>
</html>
Da mesma forma, abra o arquivo styles/main.css e adicione um reset básico para remover a estilização padrão do navegador:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Essas etapas de configuração inicial criam um ambiente limpo e organizado para o nosso laboratório de posicionamento absoluto CSS. Nas próximas etapas, faremos o download de imagens e começaremos a implementar nossas técnicas de posicionamento.
