Neste curso prático você vai ver como criar um portfólio online do zero com HTML, CSS e JavaScript!
Aqui você vai aprender os fundamentos do desenvolvimento web, passando pela estrutura básica da página (HTML), sua estilização (CSS) e sua interatividade (JavaScript). Ao final, você estará pronto para criar páginas completas, profissionais e visualmente atraentes!
Aula 1: Curso básico de HTML – Como criar a estrutura da página
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Nesta primeira aula, vamos aprender a criar a estrutura inicial de uma página de portfólio em HTML. Esse conteúdo vai te mostrar o ponto de partida e as habilidades iniciais do desenvolvimento web. Prepare-se para dar os primeiros passos nessa jornada!
Introdução ao HTML
HTML é a linguagem fundamental que dá vida e sustentação às páginas web. Neste post, você será introduzido ao mundo do HTML. Vamos explorar suas funcionalidades, estruturas e entender como utilizá-las para criar páginas web organizadas.
O que é HTML?
O HTML, ou Hypertext Markup Language, é uma linguagem de marcação, o que significa que ela serve para marcar e estruturar o conteúdo de uma página da web.
Ao contrário de uma linguagem de programação, o HTML não é executado como um programa, mas sim interpretado pelos navegadores web para exibir o conteúdo de forma ordenada.
A estrutura HTML é o alicerce de uma página da web, e suas tags (como <head> e <body>) são os blocos que definem a ordem e a identidade de cada uma de suas partes.
Através do código HTML, sabemos o que é e onde estão na página coisas como títulos, parágrafos, links, imagens, listas, entre outros.
Criando seu primeiro arquivo HTML
Pra começar nossa jornada, precisamos criar um arquivo HTML. Primeiramente, abra seu editor de código.
Neste curso nós vamos usar o Visual Studio Code, mais conhecido como VS Code. Se precisar de ajuda pra instalar, temos uma aula aqui no blog com o passo a passo da instalação.
O nome padrão pra arquivos HTML é “index.html“, mas você pode escolher qualquer nome que desejar, desde que termine com a extensão “.html”.
Com o editor de código aberto, crie o novo arquivo com essa terminação em seu ambiente, e o programa reconhecerá automaticamente que se trata de um arquivo HTML.
Escrevendo o código
Primeiras linhas
Dentro do arquivo, começaremos com a tag <!DOCTYPE html>. Todo documento HTML deve iniciar com essa tag, já que é ela que vai informar ao navegador qual o tipo do documento.
Na próxima linha, a tag <html> serve para indicar o início do documento HTML. Essa tag envolve todo o conteúdo da página. Perceba que, no final do documento, também vamos sinalizar que o código HTML terminou pela tag de fechamento </html>. Esse padrão de tags de abertura e fechamento se aplicam também a outras tags, como veremos a seguir.
<!DOCTYPE html> <html> </html>
Em seguida, adicionaremos a tag <head>, que guarda informações sobre a configuração da página, como estilos, scripts e o título. Vamos começar por ele, dentro de <head>, a tag <title> serve para localizar o nome da página. Entre suas tags de abertura e de fechamento, podemos inserir o título.
<!DOCTYPE html>
<html>
<head>
<title>Página de Portfólio</title>
</head>
</html>Se você executar seu arquivo HTML na pasta, verá que a página ainda está em branco, mas seu título (que aparece na aba do navegador) já está lá!
Por último, vamos adicionar o tipo de caracteres que poderá ser utilizado em nossa página. No caso de uma página em português, é o UTF-8, que suporta caracteres como ç, ã, ó etc.
<head> <title>Página de Portfólio</title> <meta charset="UTF-8" /> </head>
Preenchendo nossa página HTML
Agora é hora de adicionar o conteúdo principal da página. Usaremos as tags <body> e </body> para envolver todas as suas partes visíveis. Dentro do “corpo”, podemos adicionar uma variedade de elementos HTML para estruturar e apresentar nosso conteúdo. Veremos os mais importantes a seguir.
Vamos começar com um título principal <h1>, que vai aparecer na parte de cima da página. Títulos como esse são usados pra destacar e organizar o conteúdo, e podem ir de <h1> até <h6>.
Em seguida, adicionaremos um texto para descrever a página. Podemos usar a tag de parágrafo <p> pra organizar melhor o conteúdo.
Logo abaixo, adicione um segundo título <h2>, como Sobre mim, pra dar mais informações.
<body>
<h1>Portfólio - Diego XYZ</h1>
<p>Desenvolvedor WEB Full Stack</p>
<h2>Sobre mim</h2>
<p> Sou um dos instrutores de HTML, CSS e JavaScript da Hahtag e ensino
pessoas a sair do zero e a se desenvolverem na programação
</p>
</body>Agora tente executar seu HTML usando o navegador e veja como a página já mostra essas informações estruturadas!
Criando Listas em HTML
Outra maneira de organizar e estruturar conteúdos de maneira eficiente com HTML é através das listas. Elas ajudam a agrupar itens relacionados, fazendo as informações ficarem mais claras e organizadas.
As tags mais utilizadas em listas são:
- <ol> , para criar listas ordenadas
- <ul>, para criar listas não ordenadas
- <li>, para representar cada um dos itens de uma lista
As listas ordenadas normalmente apresentam seus itens em sequências numéricas ou alfabéticas, enquanto as listas não ordenadas fazem isso com traços ou bullet-points, por exemplo.
Vamos pra prática!
Adicione uma nova seção <h2> à nossa página para as Habilidades. Dentro dela, podemos ter uma <h3> para Linguagens e outra para Tecnologias. Agora, botando em prática os conceitos das listas, inclua uma lista não ordenada dentro da primeira e uma lista ordenada dentro da segunda.
Em seguida, vamos preencher nossas listas com itens. Nas linguagens, vou adicionar HTML, CSS e JavaScript, as três que vamos aprender ao longo deste curso. Já em tecnologias, adicionei uma lista de ferramentas úteis para o desenvolvimento web. Não esqueça que cada item de uma lista vai entre um <li> e um </li>.
<h2>Habilidades</h2>
<h3>Linguagens</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Tecnologias</h3>
<ol>
<li>React</li>
<li>Node</li>
<li>Express JS</li>
<li>Vite</li>
<li>SASS</li>
<li>Tailwind</li>
</ol>Com isso, nossa página até agora deve estar assim:
Adicionando Imagens
Para apresentar informações de forma visual, podemos adicionar imagens
à nossa página. As imagens podem ser usadas para ilustrar o conteúdo, adicionar logotipos ou simplesmente melhorar a estética da página.
A tag usada para inserir imagens na estrutura HTML é <img>. Diferente de outras tags, ela não é acompanhada de uma tag de fechamento, como </head> ou </ol>. Em vez disso, ela tem dois atributos essenciais:
- src: o caminho para o arquivo da imagem. Pode ser um endereço local do seu computador ou uma URL.
- alt: o texto alternativo que será exibido caso a imagem não carregue, mas que também é usado por leitores de tela para tornar a página mais acessível a pessoas com deficiência visual, por exemplo.
Com essas informações, uma tag de <img> vai se parecer com isso:
<img src="meu_logo.png" alt="Meu Logo">
Mas ainda há outros atributos que podem ser utilizados. Por exemplo, para redimensionar uma imagem, usamos width e height, já title faz com que um texto seja exibido ao passar o mouse sobre a imagem.
Agora vamos aplicar esses conceitos ao nosso projeto!
Crie uma seção <h2> para nossos Projetos. Dentro dela, vamos citar nosso projeto Réplica do Site do Google em uma <h3>. Abaixo dela, vamos adicionar a imagem de um print da nossa págna de réplica do Google, que está na pasta do projeto em uma pasta Imagens. Também redimensionei a imagem para não ficar muito grande na página.
<h2>Projetos</h2>
<h3>Réplica do Site do Google</h3>
<img width="600" src="../Imagens/google.png" alt="Print do Projeto do Google">Esse código vai adicionar os seguintes elementos à página:
Adicionando links
Os links são indispensáveis nas páginas da web, conectando páginas, documentos e recursos entre si. Em HTML, eles são representados pela tag <a> com o atributo href. Veja este exemplo:
<a href="https://www.exemplo.com">Visite nosso site</a>
- href: Informa o endereço pra onde o link vai levar.
- <a> e </a>: Indica o texto clicável que será mostrado, é também chamado de âncora.
Pra testar isso na prática, vamos adicionar, na parte da Réplica do Site do Google e abaixo da nossa imagem, um link que leva até nosso vídeo no YouTube onde apresentamos o projeto.
<a target="_blank" href="https://www.youtube.com/watch?v=0Ba6PVHMa0A">Clique aqui para acessar</a>
Nós utilizamos o atributo target=”_blank” pra fazer com que o clique do usuário abra uma nova aba, em vez de sair da página do portfólio.
Pronto! Agora temos uma seção com nosso projeto, uma imagem e um link que leva até o vídeo de explicação do projeto em uma nova aba!
Incrível, não é mesmo?
Toques finais: organizando a estrutura
Agora o código de sua página HTML está pronto e funcional! Mas você ainda pode melhorar a organização de sua estrutura com tags como <header>, <div>, <section> e <footer>.
- <header>: O cabeçalho de uma página ou seção, com títulos ou menus.
- <div>: Uma caixa genérica para organizar conteúdo sem significado específico.
- <section>: Um bloco para dividir o conteúdo em partes temáticas, como capítulos.
- <footer>: O rodapé de uma página ou seção, com informações como créditos ou contatos.
Como vamos ver em detalhe nas partes seguintes deste curso, além de deixar o código mais fácil ler, esse tipo de agrupamento dos elementos da página vai ser muito útil na interação do nosso HTML com o CSS e o JavaScript. Então bora aplicar essas tags na nossa página!
Vamos voltar ao início do código pra ver o que podemos adicionar ao cabeçalho da página. Normalmente o cabeçalho possui links para as seções da página. Como ainda não temos a parte da interatividade, o que podemos incluir no cabeçalho agora são os elementos em <h1> do nosso body.
<header>
<h1>Portfólio - Diego XYZ</h1>
<p>Desenvolvedor WEB Full Stack</p>
</header>É interessante também colocar as seções <h2> Sobre mim e Habilidades dentro de sections separadas.
Também podemos criar duas divisórias, divs, dentro da própria seção de habilidades para organizar melhor seus conteúdos, agrupando Linguagens em uma div e Tecnologias em outra.
<section>
<h2>Sobre mim</h2>
<p>
Sou um dos instrutores de HTML, CSS e JavaScript da Hahtag e ensino
pessoas a sair do zero e a se desenvolverem na programação
</p>
</section>
<section>
<h2>Habilidades</h2>
<div>
<h3>Linguagens</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div>
<h3>Tecnologias</h3>
<ol>
<li>React</li>
<li>Node</li>
<li>Express JS</li>
<li>Vite</li>
<li>SASS</li>
<li>Tailwind</li>
</ol>
</div>
</section>Faz sentido também criarmos uma section para os projetos. (Aproveitei e adicionei mais dois, pra deixar a página mais completa.)
<section>
<h2>Projetos</h2>
<div>
<h3>Réplica do Site do Google</h3>
<img
width="600"
src="../Imagens/google.png"
alt="Print do Projeto do Google"
/>
<a target="_blank" href="https://www.youtube.com/watch?v=0Ba6PVHMa0A"
>Clique aqui para acessar</a
>
</div>
<div>
<h3>Réplica do Site do YouTube</h3>
<img
width="600"
src="../Imagens/youtube.png"
alt="Print do Projeto do YouTube"
/>
<a target="_blank" href="https://www.youtube.com/live/w7sIMxxVELs"
>Clique aqui para acessar</a
>
</div>
<div>
<h3>Réplica da Página de Login da Hashtag</h3>
<img
width="600"
src="../Imagens/tela-login.png"
alt="Print do Projeto de Tela de Login"
/>
<a target="_blank" href="https://www.youtube.com/watch?v=9xh-CHyjNYc"
>Clique aqui para acessar</a
>
</div>
</section>Por último, podemos adicionar algumas informações de contato em nosso rodapé (<footer>).
<footer> <h2>Informações de contato</h2> <div> <p>E-mail: [email protected]</p> <p>Telefone: XX XXXXX-XXXX</p> <p> Site: <a target="_blank" href="https://www.hashtagtreinamentos.com" >www.hashtagtreinamentos.com</a > </p> </div> </footer>
Veja como tudo fica organizado ao recolhermos todas as divisórias que acabamos de criar!
O que aprendemos sobre HTML?
Neste post, aprendemos sobre os fundamentos do HTML e as principais tags utilizadas nessa etapa da criação de uma página da web. Vimos como criar listas, adicionar imagens, links e estruturar os elementos da melhor forma possível.
Construímos do zero o código HTML de uma página de portfólio completa e funcional, que servirá de base para as próximas partes desse curso, onde vamos desenvolver a estilização e a interatividade da nossa página!
Aula 2: Curso básico de CSS – Como estilizar seu portfólio
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que é CSS?
CSS (Cascading Style Sheets) é uma linguagem de estilização utilizada para dar aparência às páginas HTML. O termo Cascading (em cascata) refere-se à forma como as regras de CSS são aplicadas e organizadas, influenciando a ordem de carregamento da página.
O CSS depende totalmente da estrutura HTML para funcionar, fazendo referência direta aos seus elementos, que vimos na aula anterior. Existem, no entanto, três formas principais de escrever CSS, dependendo de onde e como você insere o código em relação ao arquivo HTML.
Inline CSS
O CSS inline é escrito diretamente no arquivo HTML, dentro dos próprios elementos que serão estilizados.
Por exemplo, para alterar o fundo do cabeçalho do nosso portfólio para um tom mais escuro (cor #111), acesse a tag <header> no HTML e insira o código CSS diretamente com o atributo style:
<header style="background-color: #111">
Ao voltarmos pra nossa página, já podemos ver a mudança no background do header.
Também podemos alterar o fundo do corpo da página e adicionar outras propriedades, como a cor da fonte. Veja:
<body style="background-color: #222; color: #fff">
Internal CSS
No CSS interno, o código é escrito dentro do arquivo HTML, mas de forma separada de seus elementos. Aqui, utilizamos um bloco <style> dentro da seção <head>, onde ficam as informações internas da página.
<head>
<style>
header {
background-color: #111;
}
body {
background-color: #222;
color: #fff;
}
</style>
</head>Essa abordagem organiza melhor o código, já que o CSS fica separado da estrutura principal da página.
External CSS
Mas a forma mais eficiente e profissional de estruturar o CSS é utilizando um arquivo externo. Pra isso, crie um arquivo chamado style.css, é nele que vamos escrever nosso código CSS.
Depois, conecte o arquivo CSS ao HTML utilizando a tag <link> dentro do bloco <head>:
<link rel="stylesheet" href="style.css" />
Agora que apresentamos as três formas de escrever o nosso código CSS, vamos seguir a aula utilizando esta última, o CSS Externo. Suas vantagens são:
- Separação completa entre HTML e CSS, o que facilita a manutenção e o reaproveitamento de código.
- Melhor organização e legibilidade.
Seletores CSS
Seletores básicos permitem estilizar diretamente elementos HTML, como <header>, <body> e <h1>.
Herança de propriedades
Um conceito importante ao trabalhar com seletores básicos é a herança de propriedades.
- Propriedades herdadas: Por padrão, algumas propriedades, como a cor da fonte (color), são herdadas de um elemento “pai” para seus “filhos”. Por exemplo, ao alterar a cor da fonte de um <header>, os elementos dentro dele, como <h1>, também terão essa cor.
- Propriedades não herdadas: Propriedades como background-color (cor de fundo) não são herdadas. Elas precisam ser configuradas individualmente para cada elemento, caso necessário.
Exemplo no CSS:
header {
color: #fff; /* Cor da fonte herdada pelos elementos filhos */
background-color: #333; /* Cor de fundo não herdada */
}Seletores de Classe
As classes são uma forma prática e eficiente de aplicar estilos a grupos de elementos específicos. Podemos atribuir uma classe com o nome que quisermos a qualquer tag do arquivo HTML. Isso vai facilitar a seleção daquela(s) tag(s) pelo CSS.
Elas são definidas no HTML com o atributo class e referenciadas no CSS utilizando o ponto (.) antes do nome da classe.
No exemplo abaixo, adicionei a classe “linguagens” a uma <div>:
<div class="linguagens"> Linguagens de programação </div>
Agora, no CSS, é só referenciar essa div que podemos aplicar estilização apenas a essa parte específica da nossa página:
.linguagens {
background-color: #333; /* Fundo cinza escuro */
color: #fff; /* Texto branco */
}
Inteligente, né? Mas não é só.
Classes múltiplas
Nós podemos atribuir a mesma classe a vários elementos, e também várias classes a um único elemento. Tudo isso pode facilitar ainda mais a manipulação e identificação da nossa estrutura HTML pelo arquivo CSS.
<div class="habilidade linguagens">Linguagens de programação</div> <div class="habilidade tecnologias">Tecnologias</div>
No CSS:
.habilidade {
border: 1px solid #444;
padding: 10px;
}
.linguagens {
background-color: #111;
}
.tecnologias {
background-color: #222;
}Seletores de ID
IDs são semelhantes às classes, mas são únicos. Cada ID identifica exclusivamente um elemento na página, e nenhum outro elemento deve ter o mesmo ID.
Como usar:
No HTML, o ID é definido com o atributo id:
<div id="habilidade-unica">Habilidade específica</div>
No CSS, IDs são referenciados com o símbolo de hashtag (#):
#habilidade-unica {
background-color: #555; /* Fundo cinza */
color: #fff; /* Texto branco */
}Dica: Use IDs com moderação. Na maioria das vezes, a melhor ideia é usar classes, que oferecem maior flexibilidade e reutilização.
Seletor Universal
O seletor universal (*) aplica estilos a todos os elementos da página. Ele é útil para criar regras globais ou resetar estilos.
Exemplo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Nesse exemplo:
- margin e padding são zerados para todos os elementos.
- box-sizing: border-box ajusta como as dimensões dos elementos são calculadas.
Esses seletores são a base para criar estilizações eficientes no CSS. Combinando eles, você pode organizar e personalizar suas páginas de forma prática e escalável.
Propriedades principais no CSS
Ao estilizar uma página com CSS, é importante entender quais propriedades são herdáveis e como aplicá-las corretamente. Vamos explorar alguns conceitos fundamentais, incluindo o tamanho de fonte e o uso de classes para personalizar elementos específicos.
Herança de estilo
Nem todas as propriedades CSS são herdáveis. Propriedades relacionadas ao texto, como color (cor da fonte) e font-family (tipo de fonte) geralmente são herdadas pelos elementos filhos. Por outro lado, propriedades como background-color ou margin precisam ser definidas individualmente.
Como verificar a herança?
- Testando no navegador: Utilize a ferramenta de Inspecionar Elemento (F12) para analisar o estilo aplicado.
- Quando uma propriedade é herdada, você verá o rótulo “Inherited from” (Herdado de) no painel de estilo.
- Passe o mouse sobre os elementos para identificar o CSS herdado.
Exemplo: ![Imagem ilustrativa mostrando “Inherited from body” no painel do navegador.]
- Interagindo diretamente com a página: Movendo o mouse sobre os elementos enquanto o Inspecionar está ativo, você também verá quais estilos foram aplicados ou herdados.
Tamanho da fonte
A propriedade font-size define o tamanho do texto. Vamos analisar um exemplo prático de como alterar o tamanho de fonte em um parágrafo específico.
No nosso portfólio, temos um parágrafo com o texto “Desenvolvedor Web Fullstack”. Se quisermos aumentar o tamanho da fonte desse parágrafo, poderíamos usar o seguinte código CSS:
p {
font-size: 26px;
}Mas aí temos um problema: o código altera o tamanho de todos os parágrafos (<p>), e não é bem isso que queremos.
Para aplicar o estilo apenas ao parágrafo em questão, podemos usar uma classe no HTML:
<p class="funcao">Desenvolvedor Web Fullstack</p>
Agora, no arquivo CSS, podemos selecionar apenas os elementos (nesse caso apenas um) com a classe funcao:
.funcao {
font-size: 26px;
}Com isso, apenas o parágrafo que contém a classe funcao terá a fonte ajustada, sem interferir nos outros parágrafos.
Espaçamentos (box model)
Além de cores e fontes, os espaçamentos são elementos essenciais no design de uma página web. No CSS, os espaçamentos ao redor de um elemento são definidos pelo box model, que organiza visualmente os componentes de um elemento.
Explorando o box model
Você pode visualizar o box model ao inspecionar elementos em um navegador (F12). Quando você passa o mouse sobre um elemento, verá uma caixinha indicando como o espaço está organizado:
O box model é composto por três camadas principais:
- Padding: Espaço interno entre o conteúdo do elemento e sua borda.
- Border: A borda do elemento, que fica entre o padding e a margem.
- Margin: Espaço externo ao redor do elemento, separando-o de outros elementos.
Testando na prática
Podemos experimentar o Box Model diretamente no navegador, escrevendo um CSS inline na seção element.style no menu de inspeção de elementos. Vamos adicionar algumas propriedades para destacar bem o elemento:
padding: 20px; border: 5px solid black; margin: 15px; background-color: red;
Dica: As alterações feitas dessa forma só serão visíveis temporariamente, desaparecendo quando a página for atualizada.
Também é possível configurar o tamanho total de um elemento com propriedades como width, height e box-sizing, definindo o box-sizing como border-box. Por exemplo:
width: 1000px; box-sizing: border-box;
Nesse caso, o sistema faz uma aproximação dos tamanhos. É interessante que essa configuração fique dentro de um bloco com seletor universal, assim temos os elementos uniformizados.
Esses elementos que compõem nosso nosso box model nos ajudam a entender, digamos, a dimensão espacial dos elementos CSS na página. Vamos aprender mais sobre elas.
Margin, Padding e Border
As propriedades de espaçamento seguem uma ordem lógica no CSS. Vamos explorar como configurá-las:
Valores únicos e múltiplos
- Um valor: Aplica o mesmo tamanho para as quatro direções.
padding: 20px;
Então o código acima vai dar um espaçamento de 20px em cima, embaixo, à esquerda e à direita.
2. Dois valores: O primeiro valor vai ser aplicado em cima e embaixo, e o segundo à esquerda e à
direita.
margin: 10px 5px;
Resultado: 10px em cima e embaixo, 5px à esquerda e à direita.
3. Três valores: O primeiro valor é aplicado em cima, o segundo à esquerda e direita, e o terceiro embaixo.
padding: 15px 10px 5px;
Resultado: 15px em cima, 10px à esquerda e à direita, e 5px embaixo.
4. Quatro valores: Define individualmente os quatro lados, nesta ordem: cima, direita, baixo, esquerda.
margin: 10px 15px 20px 25px;
Resultado: 10px em cima, 15px à direita, 20px embaixo, 25px à esquerda.
Outra forma, que pode ser mais simples caso você queira redimensionar apenas um lado do elemento é usando comandos como: margin-top, margin-bottom, margin-right, margin-left:
margin-top: 20px; padding-left: 10px;
Alinhamento e layout básico
O layout de uma página de portfólio deve ser harmonioso e funcional. Na seção de projetos, temos três imagens dispostas verticalmente, com um layout maior envolvendo todas elas, garantindo um espaçamento adequado entre os elementos.
Harmonizando os elementos
A divisão dos elementos na página é fundamental para um layout equilibrado. Isso significa que todos os elementos com um padding de 40px, por exemplo, contribuem para uma estética uniforme e agradável.
Em vez de configurar o padding de 40px em cada seção individualmente, podemos simplificar isso no arquivo CSS com o seguinte código:
section {
background-color: #111;
padding: 40px;
}Isso aplica as propriedades todas as seções.
Ainda, podemos fazer o mesmo para footer, mas há uma maneira de fazer tudo em um único comando, citando todos os nomes dos blocos ao mesmo tempo:
section, footer {
background-color #111
padding: 30px 40px
}Isso aplicará as propriedades a todas as seções de uma só vez.
Flexbox – Layouts responsivos
Os layouts responsivos se adaptam a diferentes tamanhos de tela, como computadores, tablets ou smartphones. Ao adicionar a propriedade display: flex a um bloco, ele se torna um flex-container, e seus filhos se tornam flex-children.
Na seção de inspeção de elementos, vá até element.style e inclua display: flex. Você verá várias opções de adaptação do layout dos elementos a diferentes tipos de tela. Ao escolher uma delas, um código será gerado para você colar no arquivo CSS. Hoje em dia, o flexbox é uma ferramenta indispensável devido ao aumento do uso de smartphones ao lado dos computadores.
Borda entre as seções
Observe que nosso modelo possui uma pequena borda cinza no final de cada seção.
Podemos editar essa borda com o seguinte código:
section {
border-bottom: 1px solid #555;
}Se tivéssemos adicionado apenas border: 1px, a borda apareceria em todos os lados, conforme ilustrado abaixo:
Altura da linha
É possível ajustar a altura da linha para que acompanhe o tamanho da fonte. Utilizamos valores percentuais na propriedade line-height. Por exemplo, podemos aplicar isso ao nosso seletor .funcao, que já possui a propriedade font-size configurada:
.funcao {
font-size: 26px;
line-height: 120%;
}Isso faz sentido para o visual e melhora a leitura, dando mais destaque geral para textos maiores.
Modificando a seção Habilidades
Modificando a Seção Habilidades
Nossa seção de habilidades agora está estruturada da seguinte forma:
<div class="habilidades">
<div id="linguagem" class="habilidade linguagem">
<h3>Linguagens</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div class="habilidade">
<h3>Tecnologias</h3>
<ol>
<li>React</li>
<li>Node</li>
<li>Express JS</li>
<li>Vite</li>
<li>SASS</li>
<li>Tailwind</li>
</ol>
</div>
</div>Dentro dessa seção, temos um h2 e duas divs. Se aplicarmos um elemento flex diretamente na tag h2, isso afetará o cabeçalho, mas queremos que a aplicação se restrinja às divs. Para resolver isso facilmente, podemos agrupar as duas divs dentro de uma nova div com a classe habilidades.
Agora, vamos aplicar as propriedades flex utilizando o seletor .habilidades:
.habilidades {
display: flex;
gap: 40px;
}Para alinhar melhor nossas listas dentro da seção de habilidades, podemos usar os seletores ul e ol, que apontam diretamente para elas:
ul, ol {
margin-left: 20px;
}Veja como ficou todo o código CSS da seção habilidades:
.habilidades {
display: flex;
gap: 40px;
}
.habilidade {
display: flex;
flex-direction: column;
gap: 20px;
}Finalizando a seção projetos
Vamos aprender um recurso útil do VSCode usando como exemplo a seção de projetos. Imagine que queremos atribuir a classe “projeto” às três divs de cada projeto. Podemos fazer isso no arquivo HTML segurando a tecla Alt e clicando em cada linha individualmente. Assim, o que você escrever irá editar todas as linhas selecionadas simultaneamente:
<div class="projeto">
<h3>Réplica do Site do Google</h3>
<img
width="600"
src="../Imagens/google.png"
alt="Print do Projeto do Google"
/>
<a target="_blank" href="https://www.youtube.com/watch?v=0Ba6PVHMa0A"
>Clique aqui para acessar</a
>
</div>
<div class="projeto">
<h3>Réplica do Site do YouTube</h3>
<img
width="600"
src="../Imagens/youtube.png"
alt="Print do Projeto do YouTube"
/>
<a target="_blank" href="https://www.youtube.com/live/w7sIMxxVELs"
>Clique aqui para acessar</a
>
</div>
<div class="projeto">
<h3>Réplica da Página de Login da Hashtag</h3>
<img
width="600"
src="../Imagens/tela-login.png"
alt="Print do Projeto de Tela de Login"
/>
<a target="_blank" href="https://www.youtube.com/watch?v=9xh-CHyjNYc"
>Clique aqui para acessar</a
>
</div>Agora, vamos formatar no arquivo CSS:
.projeto {
display: flex;
flex-direction: column;
gap: 20px;
}Para aplicar mudanças no layout das divs como um todo, excluindo o h2, vamos criar uma div maior com a classe “projetos”:
<div class="projetos">
<div class="projeto">
<h3>Réplica do Site do Google</h3>
<img
width="600"
src="../Imagens/google.png"
alt="Print do Projeto do Google"
/>
<a target="_blank" href="https://www.youtube.com/watch?v=0Ba6PVHMa0A"
>Clique aqui para acessar</a
>
</div>
<div class="projeto">
<h3>Réplica do Site do YouTube</h3>
<img
width="600"
src="../Imagens/youtube.png"
alt="Print do Projeto do YouTube"
/>
<a target="_blank" href="https://www.youtube.com/live/w7sIMxxVELs"
>Clique aqui para acessar</a
>
</div>
<div class="projeto">
<h3>Réplica da Página de Login da Hashtag</h3>
<img
width="600"
src="../Imagens/tela-login.png"
alt="Print do Projeto de Tela de Login"
/>
<a target="_blank" href="https://www.youtube.com/watch?v=9xh-CHyjNYc"
>Clique aqui para acessar</a
>
</div>
</div>No CSS:
.projetos {
display: flex;
gap: 20px;
}Após isso, faremos com que as imagens dos projetos respeitem as dimensões da tela. Ou seja, se a tela diminuir, as imagens também devem encolher, para que sempre fiquem visíveis ao usuário. Isso é feito com o seguinte código no CSS, aplicando-se a todas as imagens:
img {
max-width: 100%;
}Por fim, ajustaremos as âncoras no HTML. Queremos mudar a cor do link quando o mouse passa sobre ele. Isso é feito pela propriedade hover. Novamente, aplicamos isso a todas as âncoras com o seletor a:
a {
color: white;
}
a:hover {
color: lightblue;
}Centralizando o rodapé
Para centralizar o rodapé, utilizaremos as opções da flexbox. É interessante perceber a diferença na disposição dos elementos quando estão organizados em linhas, como em nossos projetos, ou em colunas. Neste caso, os elementos estão dispostos em coluna, então o flex irá alinhá-los no eixo horizontal. Utilize os seguintes comandos:
footer {
align-items: center;
text-align: center;
}O que aprendemos sobre CSS?
Nesta aula, exploramos diversos conceitos do CSS que transformaram completamente a aparência da nossa página de portfólio! Abordamos desde seletores, que são fundamentais para manipular a estrutura dos elementos, até as principais propriedades de formatação, classes, alinhamento de layout, tipos de bordas e a utilização do flexbox.
Agora que estabelecemos a estrutura básica da nossa página e construímos sua parte visual, o próximo passo é adicionar funcionalidades e melhorar a interatividade do usuário. Com essas implementações, nossa página não apenas será visualmente atraente, mas também proporcionará uma experiência dinâmica e envolvente para quem a acessar!
Aula 3: Curso básico de JavaScript – Dando vida à sua página
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que é JavaScript?
JavaScript é uma linguagem de programação amplamente utilizada para tornar páginas da web dinâmicas e interativas.
Enquanto o HTML define a estrutura do seu site e o CSS cuida da aparência, o JavaScript adiciona a lógica e o comportamento dinâmico. Ele permite que você responda a ações do usuário, modifique o conteúdo da página em tempo real e crie experiências muito mais envolventes.
Conectando o JavaScript com o HTML
Assim como no caso do CSS, há mais de uma maneira e lugar para escrever o código JavaScript que será aplicado ao HTML: podemos incluir as linhas de JS internamente ao arquivo HTML ou escrever todo o código em um arquivo externo separado.
Também como no CSS, a maneira mais organizada e recomendada é usar um arquivo .js externo, facilitando a legibilidade, a manutenção e a reutilização do nosso código. Então bora ver nosso arquivo JavaScript!
Primeiro, crie um arquivo chamado script.js.
Agora vamos conectá-lo ao nosso HTML usando a tag <script> antes do fechamento </body>, no arquivo index.html.
<!DOCTYPE html> <html> <head> <title>Página de Portfólio</title> <meta charset="UTF-8" /> </head> <body> <!-- aqui vai o restante do código HTML --> <script src="script.js"></script> </body> </html>
Selecionando elementos
Para manipular elementos específicos da estrutura HTML, você precisa “encontrá-los” usando seletores. O JavaScript oferece vários métodos para isso, sendo um dos mais comuns o document.querySelector().
Este método seleciona o primeiro elemento que corresponde ao seletor especificado. Vamos usá-lo para selecionar o cabeçalho (<header>) do nosso site:
const header = document.querySelector(‘header’);
Dessa forma, estamos selecionando o elemento header lá do arquivo HTML (document) e armazenando ele em uma variável no JS (isso é feito pelo comando const nome_da_variável, nesse caso chamamos ela de header mesmo).
O mesmo pode ser feito para classes e ids atribuídos aos diversos elementos HTML, da mesma forma que vimos na Aula 2 sobre CSS.
Para exemplificar, vamos pegar esta parte da nossa estrutura HTML e adicionar a classe “sobre”:
<section> <h2 class="sobre">Sobre mim</h2> <p> Sou um dos instrutores de HTML, CSS e JavaScript da Hahtag e ensino pessoas a sair do zero e a se desenvolverem na programação </p> </section>
Para selecionar apenas o parágrafo (<p>) desse bloco com a classe, usamos o seguinte seletor composto JS:
document.querySelector(“p.sobre”)
Isso seleciona todo parágrafo com a classe sobre
O querySelector sempre vai selecionar o primeiro elemento que se identifica com o seletor entre parênteses. Mas caso seja preciso selecionar todos os elementos daquele tipo, por exemplo, todos os elementos com classe ‘sobre’, fazemos assim:
document.querySelectorAll(“.sobre”)
Modificando propriedades dos elementos HTML
Agora que sabemos como selecionar elementos, vamos aprender a manipular seu conteúdo e seus estilos!
Alterando textos dinamicamente
Você pode alterar o texto de um elemento usando a propriedade textContent:
document.querySelector(“.sobre”).textContent = “About me”
Isso vai substituir o texto anterior “Sobre mim” por “About me”
Alterando classes e estilos CSS com JS
O JavaScript não apenas manipula e dinamiza a estrutura HTML, mas de uma forma muito parecida também consegue adicionar e remover classes e estilos dos seus elementos CSS.
Vamos trocar a cor do mesmo elemento que modificamos no último exemplo:
document.querySelector(“.sobre”).style.color = “yellow”
classList.add() e classList.remove()
Uma maneira mais eficiente de dinamizar a troca de estilos dos elementos é utilizando as classes do código CSS.
Vamos abrir nosso arquivo style.css e adicionar uma classe .amarelo, que tem como propriedade color: yellow:
.amarelo {
color: yellow;
}Agora com o JavaScript, vamos atribuir ou remover essa classe dos nossos elementos:
document.querySelector(“.sobre”).classList.add = (“amarelo”);
Da mesma forma, podemos remover uma classe do elemento:
document.querySelector(“.sobre”).classList.remove = (“amarelo”);
Além disso, temos umas terceira opção muito interessante:
document.querySelector(“.sobre”).classList.toggle = (“amarelo”);
Basicamente, o .toggle vai ter a função do .add caso o elemento não tenha a propriedade especificada ou de .remove caso já tenha. Bem prático, né? Vamos ver um exemplo prático mais adiante!
Eventos
Eventos são parte essencial do dinamismo do JavaScript. Eles conseguem comunicar que o usuário interagiu com a página e fazem ela responder de diversos jeitos.
O primeiro comando que vamos aprender é o addEventListener().
Imagine que ao atribuir essa função, o sistema vai ficar “escutando” ou “prestando atenção” naquele elemento pra caso alguma coisa aconteça com ele.
O addEventListener() costuma ter dois parâmetros, o primeiro indicando o gatilho e o segundo, o efeito. Vamos a um exemplo.
Como vimos no início desta aula, variáveis em JS são criadas com o código const nome_da_variável =.
Vamos armazenar nosso texto “Sobre mim” em uma variável chamada elemTexto e usá-la para um evento de clique que vai ativar uma função mudando o texto para “Sobre mim (clicado)”.
elemTexto.addEventListener(‘click’, function(){
elemTexto.textContent = "Sobre mim (clicado)";
})Vá na sua página e faça o teste!
Também podemos adicionar mais de uma função ao mesmo evento. Por exemplo, além de mudar o textContent no clique, podemos fazer com que a cor também mude.
Dica: É útil também armazenar suas funções em variáveis, para que o código fique mais limpo e mais fácil de reutilizar.
Para criar uma variável de função, faça o seguinte:
function alterarClasse() {
console.log("Você clicou no texto Sobre mim");
elemTexto.classList.toggle("amarelo");
elemTexto.classList.toggle("vermelho");
elemTexto.textContent = "Sobre mim (clicado)";
}Veja que utilizamos o .toggle para que ele sempre alterne de vermelho para amarelo e vice-versa.
Agora, para atribuirmos todos esses efeitos ao nosso evento, só precisamos do seguinte código:
elemTexto.addEventListener("click", function () {
alterarClasse();
});Implementando funcionalidades simples
Com os conceitos básicos em mãos, podemos criar algumas funcionalidades. Vamos implementar dois exemplos.
Mostrar/ocultar informações de contato ao clicar em um botão
Vamos passar por cada um dos arquivos que compõem nossa página para criar nosso botão estilizado e interativo. Isso vai exemplificar a interações do HTML, CSS e JS na criação de uma página web.
Criando o botão no HTML
Primeiro, voltando ao nosso index.html, vamos criar um novo botão lá no <footer>, com o texto “Exibir informações”:
<button class=”informações”>Exibir informações</button>
Estilizando o botão no CSS
Agora vamos criar estilizações para o botão no style.css. É importante que tenhamos mais de uma versão do botão, pois ele muda o estilo conforme as interações com a página.
button {
padding: 5px 15px;
border-radius: 1000px;
border: none;
background-color: #eee;
transition: background-color 0.2s linear;
cursor: pointer;
}
.light button {
background-color: #aaa;
color: white;
}
button:hover {
background-color: #bbb;
}
.light button:hover {
background-color: #777;
}Dentro do nosso botão padrão, button, temos as seguintes propriedades:
- padding: Define um espaçamento interno de 5px na altura e 15px nas laterais.
- border-radius: Arredonda as bordas, deixando o botão com formato oval.
- border: Define que o botão não terá borda visível.
- background-color: Define a cor de fundo como um cinza claro.
- transition: Faz a mudança de cor de fundo acontecer suavemente em 0,2 segundos.
- cursor: Muda o cursor para uma mãozinha ao passar o mouse, indicando que o botão é clicável.
No estilo do botão dentro de .light (.light button), temos:
- background-color: Altera a cor de fundo para um tom de cinza mais escuro.
- color: Define a cor do texto como branco para criar contraste.
Obs.: Essas propriedades se relacionam com a mudança de modo claro/escuro que veremos no exemplo seguinte.
E para os efeitos ao passar o mouse (hover):
- button:hover: Muda a cor de fundo para um tom de cinza um pouco mais escuro quando o usuário passa o mouse.
- .light button:hover: Para botões dentro da classe .light, a cor de fundo fica ainda mais escura ao passar o mouse.
Ainda no arquivo CSS, é importante adicionar algumas propriedade à classe .informacoes
.informacoes {
display: none;
}
.informacoes.visivel {
display: block;
}Explicando essas duas classes:
.informacoes { display: none; }
Inicialmente, qualquer elemento com essa classe ficará escondido na página, pois display: none; faz com que ele não ocupe espaço e não seja visível.
.informacoes.visivel { display: block; }
Quando a classe visivel for adicionada ao elemento, ele se tornará visível, pois display: block; faz com que ele apareça normalmente na página.
Isso é útil para criar efeitos de mostrar/esconder elementos dinamicamente, que é o que faremos usando JavaScript para adicionar/remover a classe .visivel.
Criando o botão no JS
Primeiro, criamos uma variável para o botão no começo do código:
const elemBotaoInformacoes = document.querySelector(“.informacoes”)
Agora sim vamos ao evento do botão.
elemBotaoInformacoes.addEventListener("click", function () {
console.log("Clicou no botão de informações");
elemInformacoes.classList.toggle("visivel");
console.log(elemInformacoes.classList.contains("visivel"));
if (elemInformacoes.classList.contains("visivel")) {
elemBotaoInformacoes.textContent = "Ocultar informações";
} else {
elemBotaoInformacoes.textContent = "Exibir informações";
}
});Nesse exemplo, o conteúdo das informações de contato está inicialmente oculto (display: none;). Quando o botão é clicado, o evento click altera o valor de display para block, tornando o conteúdo visível.
Um modo escuro básico com alternância de classe
Vamos criar aquele botão que você já deve ter visto em outras páginas da internet que liga e desliga o Modo escuro.
Criando o botão no HTML
Começando pela estrutura HTML, dentro de <header> crie:
<div> <button class="botao-light">Light</button> <button class="botao-dark">Dark</button> </div>
Há mais uma coisa importante que precisamos fazer aqui no HTML, porque os botões de light e dark vão mexer em estruturas grandes da nossa página.
Para representar essa variação de claro e escuro, vamos criar classes que vão ser aplicadas a todo o nosso <body>, para isso criamos uma classe vazia que receberá novas classes com as interações.
<body class="">
Estilização no CSS
O legal é que tudo que fizemos para a estilização do botão anterior, dos contatos, também vai se aplicar a estes novos botões. Então não há nada a fazer no CSS nesse sentido. Isso que é reutilização de código!
Porém, temos que mudar as propriedades do nosso body para que ele tenha duas versões, clara e escura.
body {
background-color: #222;
color: #fff;
font-family: "Montserrat";
line-height: 120%;
}
.light {
background-color: #eee;
color: #222;
}
header {
background-color: #111;
padding: 30px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.light header {
background-color: #ddd;
}Esse código define estilos para o body do HTML e altera sua aparência dependendo das classes atribuídas.
- Sem a classe .light:
- O fundo do body será um tom escuro de cinza.
- O texto será branco.
- A fonte usada será “Montserrat”.
- O espaçamento entre as linhas do texto será de 120%.
- O header terá um fundo ainda mais escuro e um espaçamento interno de 30px na altura e 40px nas laterais.
- Dentro do header, os elementos serão organizados em linha, ocupando espaço de forma distribuída e centralizada.
- Com a classe .light no body:
- O fundo do body ficará cinza claro.
- O texto mudará para uma cor escura.
- O header, que antes era escuro, também ficará mais claro.
Veja nos arquivos da aula que o mesmo é feito para outras partes da estrutura também!
Codificando a funcionalidade no JavaScript
Crie variáveis para os botões:
const elemBotaoLight = document.querySelector(".botao-light");
const elemBotaoDark = document.querySelector(".botao-dark");Agora crie os eventos:
elemBotaoLight.addEventListener("click", function () {
console.log("Clicou no botão Light");
document.body.classList.add("light");
});
elemBotaoDark.addEventListener("click", function () {
console.log("Clicou no botão Dark");
document.body.classList.remove("light");
});Esse código adiciona um comportamento de alternância entre modo claro (light) e modo escuro (dark) ao clicar nos botões.
Quando o botão elemBotaoLight é clicado, a classe “light” é adicionada ao body, ativando o modo claro (deixando o fundo mais claro e o texto mais escuro, conforme definido no CSS).
Quando o botão elemBotaoDark é clicado, a classe “light” é removida do body, voltando ao modo escuro (fundo escuro e texto claro).
O que aprendemos sobre JavaScript?
Ao longo desta aula, exploramos como o JavaScript pode transformar uma página estática em algo dinâmico e interativo. Desde a seleção e manipulação de elementos HTML até a adição de eventos e estilos dinâmicos, aprendemos a dar mais vida ao nosso portfólio.
Conclusão do Curso Básico HTML, CSS e JavaScript
Ao longo deste curso, percorremos os principais pilares do desenvolvimento web, construindo passo a passo um portfólio completo e funcional. Começamos com o HTML, aprendendo a estruturar corretamente uma página, utilizando listas, imagens, links e outros elementos essenciais para sua organização.
Em seguida, mergulhamos no CSS, onde exploramos técnicas de estilização que transformaram a aparência da nossa página. Aprendemos sobre seletores, classes, alinhamento, bordas e flexbox, garantindo um layout moderno e responsivo.
Por fim, adicionamos dinamismo e interatividade com JavaScript, manipulando elementos HTML, criando eventos e implementando estilos dinâmicos para tornar nossa página mais envolvente.
Com esses conhecimentos, você agora tem uma base sólida para continuar aprimorando suas habilidades no desenvolvimento web e construir projetos cada vez mais completos e personalizados! Temos diversas publicações relacionadas aos conteúdos que vimos aqui. Não deixe de conferir os posts sobre HTML, CSS e JavaScript!
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- TCP e UDP: o que são, diferenças e quando usar Entenda o que é TCP e UDP, as diferenças entre os protocolos, suas vantagens e quando usar cada um. Aprenda com exemplos práticos e linguagem acessível.
- Biblioteca NumPy: o que é, vantagens e como usar Aprenda como usar a biblioteca NumPy no Python para otimizar o processamento de dados e melhorar sua eficiência em projetos de ciência de dados.
- Power Apps: o que é, benefícios e como usar Descubra o que é Power Apps, como a ferramenta revoluciona a criação de aplicativos e como você pode começar a usá-la hoje mesmo!
Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.