Corrigindo Problemas de Exibição de Websites

Introdução

Neste projeto, você aprenderá como corrigir problemas de exibição de um site e garantir que ele seja estilizado e formatado corretamente. O objetivo é pegar um site inacabado e fazê-lo parecer o produto final desejado.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como identificar e corrigir problemas no arquivo HTML
• Como atualizar o arquivo CSS para aplicar os estilos corretos
• Como garantir que o site seja exibido com a largura e o layout desejados

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Analisar e solucionar problemas de código HTML e CSS
• Aplicar técnicas para estruturar e estilizar páginas web corretamente
• Demonstrar a importância da atenção aos detalhes no desenvolvimento web

Configurar a Estrutura do Projeto

Nesta etapa, você configurará o projeto e abrirá os arquivos no editor.

1. Abra o editor e você deverá ver os seguintes arquivos: index.html, style.css e os arquivos de imagem html5logo.png, css3-logo.png, nav-btn.png e evolution.png.
2. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
3. Abra "Web 8080" no topo da VM e atualize-o manualmente; você verá a página.

Corrigir a Exibição do Website

Nesta etapa, você analisará a estrutura HTML da página e, a partir daí, encontrará o problema para corrigir a bagunça na exibição da página.

1. Abra o arquivo index.html no editor de código.
2. Examine o arquivo index.html e observe que a tag <link> para o arquivo CSS tem o nome de arquivo incorreto. Atualize o atributo href para apontar para o arquivo correto, style.css.

<link rel="stylesheet" href="style.css" />

3. O arquivo HTML contém as seguintes seções principais:

   • <header>: Inclui o título do site e o menu de navegação.
   • <div class="content">: Contém o conteúdo principal da página, incluindo uma seção de uma coluna, uma seção de três colunas e uma seção de duas colunas.
   • <footer>: Inclui o rodapé do site com links.

4. Salve as alterações no arquivo index.html.

5. Atualize a página no seu navegador após a correção do bug e você verá o seguinte efeito:

Parabéns! Você corrigiu com sucesso a exibição do site atualizando os arquivos HTML e CSS.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.