Aprenda Construindo um Site Completo com HTML

Agora que cobrimos os principais conceitos de HTML, estamos prontos para construir um site de portfólio de uma página do zero.

Você pode tentar construí-lo por conta própria ou seguir este guia passo a passo com código para cada parte.

Guia Passo a Passo

1. Planejamento da Estrutura do Site

Nossa página de portfólio incluirá:

Cabeçalho: título do site e links de navegação;
Sobre: uma breve introdução sobre o proprietário;
Portfólio: projetos com imagens, títulos e breves descrições;
Contato: um formulário para visitantes entrarem em contato;
Rodapé: direitos autorais e links de contato/redes sociais.

2. Estruture o conteúdo com HTML semântico

Crie um novo arquivo index.html e adicione a estrutura básica do HTML com <!DOCTYPE html>, <html>, <head> e <body>.

index.html

3. Seção de cabeçalho

Adicione um <header> com o nome do proprietário e um <nav> contendo links que direcionam para as seções Sobre, Portfólio e Contato.

index.html

4. Seção Sobre

Criar uma <section id="about"> com um título e um breve parágrafo descrevendo o proprietário.

index.html

5. Seção de Portfólio

Adicionar uma <section id="portfolio"> que lista projetos com imagens, títulos e breves descrições.

index.html

6. Seção de Contato

Criar uma <section id="contact"> com um formulário de contato simples que coleta nome, e-mail e mensagem.

index.html

7. Seção de Rodapé

Finalize a página com um <footer> que inclua texto de direitos autorais e links para redes sociais, telefone e e-mail.

index.html

Bônus

Para tornar a página mais atraente visualmente, podemos conectar um arquivo CSS e estilizar nosso HTML. O CSS controla cores, espaçamento, fontes e layout, ajudando a mesma estrutura a parecer muito mais refinada.

Por enquanto, apenas compare como a página fica com HTML puro e como ela muda quando estilos CSS básicos são aplicados.

index.html

index.css

Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 5. Capítulo 4

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Deslize para mostrar o menu

Agora que cobrimos os principais conceitos de HTML, estamos prontos para construir um site de portfólio de uma página do zero.

Você pode tentar construí-lo por conta própria ou seguir este guia passo a passo com código para cada parte.

Guia Passo a Passo

1. Planejamento da Estrutura do Site

Nossa página de portfólio incluirá:

Cabeçalho: título do site e links de navegação;
Sobre: uma breve introdução sobre o proprietário;
Portfólio: projetos com imagens, títulos e breves descrições;
Contato: um formulário para visitantes entrarem em contato;
Rodapé: direitos autorais e links de contato/redes sociais.

2. Estruture o conteúdo com HTML semântico

Crie um novo arquivo index.html e adicione a estrutura básica do HTML com <!DOCTYPE html>, <html>, <head> e <body>.

index.html

3. Seção de cabeçalho

Adicione um <header> com o nome do proprietário e um <nav> contendo links que direcionam para as seções Sobre, Portfólio e Contato.

index.html

4. Seção Sobre

Criar uma <section id="about"> com um título e um breve parágrafo descrevendo o proprietário.

index.html

5. Seção de Portfólio

Adicionar uma <section id="portfolio"> que lista projetos com imagens, títulos e breves descrições.

index.html

6. Seção de Contato

Criar uma <section id="contact"> com um formulário de contato simples que coleta nome, e-mail e mensagem.

index.html

7. Seção de Rodapé

Finalize a página com um <footer> que inclua texto de direitos autorais e links para redes sociais, telefone e e-mail.

index.html

Bônus

Por enquanto, apenas compare como a página fica com HTML puro e como ela muda quando estilos CSS básicos são aplicados.

index.html

index.css

Aqui está o link para o site completo que foi construído neste capítulo: Site da Julia

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 5. Capítulo 4