Front-End Coding Journey 🚀

• Este é um repositório com o conteúdo dedicado ao meu aprendizado pessoal sobre Front-End.
Aprendendo HTML, CSS e JavaScript, dominando frameworks como React, Angular e Vue.js,
e aprimorando habilidades em design responsivo, versionamento de código, perfomançe e otimização.

Como contribuir   •   Issues   •   Discussions

⚠️ AVISO
Tanto o aprendizado quanto a documentação deste repositório está EM PROGRESSO Status:

Sumário 🧾

🔗 Periféricos	🗺️ Tópicos (Roadmap)	📚 Tópicos de Estudo
O que é "Front-End"?	1. HTML, CSS, IDEs e Responsividade	IDEs (Integrated Development Environment)
Roadmap de Front-End (Título)	2. JavaScript, Event Handling e AJAX	Instalando o VSCode
Roadmap de Front-End (Extras)	3. Frameworks CSS	HTML (HyperText Markup Language)
Autor	4. Pré-processadores CSS	As tags de HTML
	5. Frameworks JavaScript	Estrutura Semântica
	6. Versionamento de Código	Começando com HTML
	7. Hospedagem de Web-páginas	CSS (Cascading Style Sheets)
	8. Task Runners e Module Bundlers	Estrutura de Diretório
	9. Unit Testing (Testes Front-End)	Guia de CSS
	I. UI & UX Design	Linkando CSS com HTML
	II. Segurança Front-End	Seletores CSS
	III. Ferramentas Auxiliares (Uso de IAs, Photoshop, Figma, etc.)	Propriedades CSS
		Modificando o nosso arquivo HTML com elementos CSS

Mas o que diaxo é "Front-End"? 🤔

O "Front-End" é a parte bonitinha e interativa que as pessoas veem e clicam quando visitam um site. Sabe aqueles botõezinhos, as animações legais, e os textos alinhadinhos? Tudo isso é Front-End!

Então, se você curte mexer com HTML para criar a estrutura, CSS para dar estilo e JavaScript para fazer as coisas acontecerem, parabéns, você está mergulhando no mundo fascinante do Front-End. É como ser o arquiteto e o decorador da web, criando experiências que fazem as pessoas ficarem de queixo caído.

É onde a mágica acontece, meu caro! ✨

Agora abaixo vou apresentar o meu roadmap de Front-End! 🗺️

A ideia é meio como uma jornada, onde você começa aprendendo os básicos da web com HTML, CSS e JavaScript – são como habilidades de sobrevivência nesse território digital.

Depois, você avança para os frameworks, tipo React, Angular ou Vue.js. Eles são como poderes mágicos que dão um toque especial às suas criações.

Ao longo do caminho, vamos fazer uma parada ou outra para aprender sobre versionamento de código, tipo deixar um mapa para que outros aventureiros (e até você mesmo) possam seguir o seu rastro.

E quando a trilha fica mais intensa, vamos explorar coisas avançadas, como testes, Progressive Web Apps (PWAs), otimização de desempenho – são como poções mágicas para tornar suas criações ainda mais poderosas!

No fim da jornada teremos um grande arsenal de conhecimento e estaremos prontos para encarar qualquer desafio nesse mundo selvagem da programação Front-End 🚀✨

Voltar para o início ↺

🗺️ Roadmap de Front-End:

1. HTML, CSS, IDEs e Responsividade

a. IDEs

• Descrição:
  • Aprender o que são "IDEs" e como utilizá-las para programar.
• Quando Aprender:
  • Introduzir conceitos de IDEs ao começar a escrever código.

b. HTML5 e Estrutura Semântica

• Descrição:
  • Utilizar as tags do HTML5 de maneira semântica, atribuindo significado correto aos elementos da página para melhorar acessibilidade e SEO.
• Quando Aprender:
  • Desde o início do aprendizado de Front-End.

c. Estilização com CSS3

• Descrição:
  • Utilizar os recursos do CSS3 para estilizar páginas web, como gradientes, sombras, transições e animações.
• Quando Aprender:
  • Integrado ao aprendizado inicial de HTML e CSS.

d. Responsividade e Design Mobile-First

• Descrição:
  • Desenvolver layouts que se ajustem a diferentes tamanhos de tela, priorizando o design para dispositivos móveis.
• Quando Aprender:
  • Integrado ao aprendizado de CSS, à medida que se explora o design responsivo.

Voltar para o início ↺

2. JavaScript, Event Handling e AJAX

a. Manipulação do DOM

• Descrição:
  • Interagir dinamicamente com a estrutura da página utilizando JavaScript para modificar, adicionar ou remover elementos.
• Quando Aprender:
  • Integrado ao aprendizado de JavaScript básico.

b. Event Handling

• Descrição:
  • Trabalhar com eventos do usuário, como cliques e teclas pressionadas, para criar interações dinâmicas.
• Quando Aprender:
  • Continuação do aprendizado de JavaScript, após a manipulação do DOM.

c. AJAX e Requisições Assíncronas

• Descrição:
  • Enviar e receber dados do servidor de forma assíncrona, atualizando partes específicas da página sem recarregar completamente.
• Quando Aprender:
  • Introduzir após uma compreensão sólida de JavaScript.

Voltar para o início ↺

3. Frameworks CSS

• Descrição:
  • Aprender frameworks CSS como Bootstrap, Foundation ou Tailwind CSS para agilizar o desenvolvimento de estilos e layouts.
• Quando Aprender:
  • Após dominar os conceitos básicos de HTML e CSS.

Voltar para o início ↺

4. Pré-processadores CSS

a. Sass ou Less

• Descrição:
  • Utilizar pré-processadores CSS para introduzir variáveis, funções e outros recursos que facilitam a manutenção e organização do código.
• Quando Aprender:
  • Após familiaridade com CSS básico.

Voltar para o início ↺

5. Frameworks JavaScript

• Descrição:
  • Aprender frameworks JavaScript populares como React, Angular ou Vue.js para construir interfaces reativas e complexas.
  • Aprender frameworks de Package Managing como yarn e npm, para simplificam o processo de obtenção, atualização e remoção de pacotes.
• Quando Aprender:
  • Após uma base sólida em HTML, CSS e JavaScript básico.

Voltar para o início ↺

6. Versionamento de Código

a. Git e GitHub

• Descrição:
  • Utilizar sistemas de controle de versão para rastrear alterações no código, colaborar com outros desenvolvedores e gerenciar versões de software.
• Quando Aprender:
  • Introduzir ao trabalhar em projetos colaborativos.

Voltar para o início ↺

7. Hospedagem de Web-páginas

• Descrição:
  • Compreender diferentes opções de hospedagem, incluindo serviços como GitHub Pages, Netlify ou Vercel.
• Quando Aprender:
  • Ao começar a publicar projetos online.

Voltar para o início ↺

8. Task Runners e Module Bundlers

a. Gulp, Webpack ou Parcel

• Descrição:
  • Automatizar tarefas repetitivas, como minificação de arquivos, e modularizar o código para melhorar a eficiência do desenvolvimento.
• Quando Aprender:
  • À medida que se aprofunda no desenvolvimento e busca otimização.

Voltar para o início ↺

9. Unit Testing (Testes Front-End)

a. Unit Testing com Jest ou Mocha

• Descrição:
  • Criar testes automatizados para verificar unidades isoladas de código.
• Quando Aprender:
  • Após construir uma base sólida em JavaScript e frameworks.

b. Testes de Integração

• Descrição:
  • Testar a interação entre diferentes partes do sistema para garantir o funcionamento correto.
• Quando Aprender:
  • Conforme avança em projetos mais complexos.

Voltar para o início ↺

Extras

I. UI & UX Design

• Descrição:
  • Compreender os princípios de design de interface e experiência do usuário para criar experiências web intuitivas e agradáveis.
• Quando Aprender:
  • Ao explorar o design de interfaces.

Voltar para o início ↺

II. Segurança Front-End

• Descrição:
  • Implementar práticas de segurança em aplicações web e compreender conceitos como Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF).
• Quando Aprender:
  • Introduzir quando começar a lidar com interações mais avançadas.

Voltar para o início ↺

III. Ferramentas Auxiliares (Uso de IAs, Photoshop, Figma, etc.)

• Descrição:
  • Familiarizar-se com ferramentas de design e prototipagem para auxiliar no processo de criação de interfaces e código.
• Quando Aprender:
  • Conforme você avança no design e na implementação de interfaces.

Com os tópicos do nosso roadmap delineados, estamos prontos para começar a aprender. Ao longo desta jornada, exploraremos cada aspecto do Front-End, construindo uma base sólida de conhecimento. Então, mãos à obra e vamos avançar nos estudos! 😁👊

Voltar para o início ↺

---

IDEs (Integrated Development Environment)

O que é uma "IDE", e para quê serve?

As IDEs, ou Ambientes de Desenvolvimento Integrado (em português), são ferramentas essenciais para os desenvolvedores e programadores. Elas reúnem tudo o que você precisa para codificar, depurar e administrar projetos de maneira eficiente. Essas belezinhas facilitam a vida dos desenvolvedores.

Já se perguntou como os programadores fazem aquelas letras e símbolos estranhos todos coloridos que descem em forma de cascata? Pois é, aquilo muito provavelmente está sendo "rodado" por uma IDE.

Dentre as IDEs populares, destaca-se o Visual Studio Code (VSCode).

O VSCode é super queridinho entre a galera do Front-End porque é fácil de usar, tem muitos extras legais (graças aos plugins) e se conecta bem com outras ferramentas que você pode gostar. Vamos começar com o VSCode porque é eficiente, robusto e a galera sempre tá inventando coisas novas pra deixar ele ainda melhor.

Vai ser nosso parceirão nessa jornada de aprender sobre Front-End! 😎✨

Voltar para o início ↺

Instalando o VSCode

Windows

1. Download:

   • Acesse o site oficial do VSCode.
   • Clique em "Download for Windows".

2. Instalação:

   • Execute o instalador baixado.
   • Siga as instruções do assistente de instalação.

3. Executar o VSCode:

   • Após a instalação, abra o VSCode clicando no ícone no desktop ou no menu Iniciar.

macOS

1. Download:

   • Acesse o site oficial do VSCode.
   • Clique em "Download for macOS".

2. Instalação:

   • Abra o arquivo baixado (dmg).
   • Arraste o ícone do VSCode para a pasta "Applications".

3. Executar o VSCode:

   • Abra o Launchpad e clique no ícone do VSCode.

Linux (Ubuntu/Debian)

1. Download:

   • Abra o terminal e execute os seguintes comandos:

     sudo apt update
     sudo apt install code

2. Executar o VSCode:

   • Abra o VSCode digitando code no terminal ou procurando no menu de aplicativos.

Eeee é isso aí, você tem o VSCode instalado! Agora você tá pronto para começar a se aventurar no mundo do Front-End! 🚀✨

Voltar para o início ↺

HTML (HyperText Markup Language)

O que é "HTML", e para quê serve?

O HTML, ou Linguagem de Marcação de Hipertexto (em português), é tipo o "esqueleto" das páginas da web.

Todas as páginas web que você visita/visitou são montadas usando HTML para criar coisas como títulos, parágrafos, imagens e links. O HTML usa essas coisas chamadas de "tags" para envolver o conteúdo e dar significado a ele. É como dizer ao navegador o que cada parte da página está fazendo ali.

Então, pensa no HTML como o esqueleto que dá forma à página, e essas tags são como as instruções para construir cada parte dela.

📄❗️ NOTA IMPORTANTE

Ah, e vale mencionar que por enquanto, somente usando o HTML não vai dar pra fazer uma página da web toda bonitinha, afinal com o HTML temos somente o esqueleto da página. Você precisa combinar o HTML com o CSS (Cascading Style Sheets) para dar estilo e o JavaScript para tornar as coisas mais animadas. Juntos, HTML, CSS e JavaScript formam a base essencial para o que chamamos de Front-End, tendeu?

Voltar para o início ↺

As tags de HTML

Okay, lembra das "tags"?

O HTML usa essas coisas chamadas de "tags" para envolver o conteúdo e dar significado a ele. É como dizer ao navegador o que cada parte da página está fazendo ali.

Então, pra começar, vamos nos aprofundar nisso, as "tags".

Numa estrutura em HTML, se utilizam tags de abertura <html> e fechamento </html> para organizar o código e dizer ao navegador o que cada parte da página está fazendo ali.

Por exemplo, tem a <header> que é como o "Cabeçalho", onde você põe as coisas importantes da sua página. Depois, tem a <nav>, que é tipo a "Navegação", onde você coloca os links para as outras partes. Ah, e não podemos esquecer da <footer>, o "Rodapé", para os extras no final.

Eis aqui uma lista de algumas das tags existentes para o HTML e o que elas fazem:

Tag	Descrição
<html>	Define o início e o fim de um documento HTML.
<head>	Fornece informações sobre o documento HTML.
<title>	Define o título do documento HTML.
<base>	Especifica o URL base/target para todos os links na página.
<link>	Define a relação entre o documento atual e recursos externos.
<meta>	Define metadados que fornecem informações sobre o documento.
<style>	Define estilos CSS internos.
<script>	Define scripts incorporados ou vincula recursos externos.
<noscript>	Oferece conteúdo alternativo se o script não for suportado.
<body>	Contém o conteúdo visível do documento HTML.
<article>	Define um conteúdo independente que faz sentido por si só.
<section>	Define uma seção em um documento.
<nav>	Define uma seção de navegação.
<aside>	Define conteúdo que é tangencial ao conteúdo da página.
<h1> to <h6>	Define cabeçalhos de diferentes níveis.
<header>	Define um cabeçalho para um documento ou seção.
<footer>	Define um rodapé para um documento ou seção.
<address>	Define informações de contato do autor/proprietário.
<main>	Define o conteúdo principal em um documento.
<p>	Define um parágrafo.
<hr>	Cria uma linha horizontal.
<pre>	Define texto pré-formatado.
<blockquote>	Define uma seção que é citada de outra fonte.
<ol>	Define uma lista ordenada.
<ul>	Define uma lista não ordenada.
<li>	Define um item de lista.
<dl>	Define uma lista de descrição.
<dt>	Define um termo/entrada em uma lista de descrição.
<dd>	Define uma descrição em uma lista de descrição.
<figure>	Define qualquer conteúdo que está referenciado no texto.
<figcaption>	Define uma legenda para um elemento <figure>.
<div>	Define uma divisão ou seção genérica.
<a>	Define um hyperlink.
<em>	Define texto enfatizado.
<strong>	Define texto importante em negrito.
<small>	Define texto menor.
<s>	Define texto que não é mais preciso ou relevante.
<cite>	Define o título de uma obra citada.
<q>	Define uma citação curta.
<abbr>	Define uma abreviação ou acrônimo.
<address>	Define informações de contato do autor/proprietário.
<bdo>	Define a direção do texto.
<bdi>	Isola um texto que pode ser formatado de maneira diferente.
<span>	Define um trecho de texto em linha.
<br>	Insere uma quebra de linha.
<wbr>	Define uma possível quebra de linha.
<time>	Define uma data/hora específica.
<mark>	Define texto marcado ou realçado.
<progress>	Representa o progresso de uma tarefa.
<meter>	Representa um valor escalar dentro de um intervalo conhecido.
<code>	Define um trecho de código.
<var>	Define uma variável em programação.
<kbd>	Define a entrada de teclado.
<samp>	Define saída de amostra de um programa de computador.
<sub>	Define texto subscrito.
<sup>	Define texto sobrescrito.
<i>	Define texto em itálico.
<b>	Define texto em negrito.
<u>	Define texto sublinhado.
<ruby>	Define uma anotação ruby para pronúncia ou tradução.
<rt>	Define texto de ruby.
<rp>	Define o que mostrar em navegadores que não suportam ruby.
<br>	Insere uma quebra de linha.
<a>	Define um hyperlink.
<img>	Define uma imagem.
<map>	Define uma imagem com áreas clicáveis.
<area>	Define uma área dentro de um mapa de imagem.
<audio>	Define conteúdo sonoro, como música ou efeitos sonoros.
<source>	Define fontes de mídia para elementos <audio> e <video>.
<video>	Define conteúdo de vídeo.
<track>	Define faixas de texto para elementos <audio> e <video>.
<table>	Define uma tabela.
<caption>	Define o título da tabela.
<colgroup>	Define um grupo de colunas em uma tabela.
<col>	Define propriedades específicas da coluna dentro de <colgroup>.
<thead>	Define o cabeçalho de uma tabela.
<tbody>	Define o corpo de uma tabela.
<tfoot>	Define o rodapé de uma tabela.
<tr>	Define uma linha em uma tabela.
<th>	Define um cabeçalho de célula em uma tabela.
<td>	Define uma célula em uma tabela.
<form>	Define um formulário HTML.
<input>	Define um campo de entrada de dados.
<button>	Define um botão clicável.
<select>	Define uma lista suspensa.
<option>	Define uma opção em uma lista suspensa.
<label>	Define uma etiqueta para um elemento <input>.
<fieldset>	Define um conjunto de campos de formulário.
<legend>	Define uma legenda para um elemento <fieldset>.
<textarea>	Define uma área de texto editável.
<output>	Define o resultado de um cálculo ou a saída de um usuário.
<datalist>	Define uma lista de opções pré-definidas para <input>
<keygen>	Define um gerador de pares de chave (criptografia).
<progress>	Representa o progresso de uma tarefa.
<meter>	Representa um valor escalar dentro de um intervalo conhecido.
<details>	Define um widget de controle que revela ou oculta um elemento.
<summary>	Define um cabeçalho visível para um elemento <details>.
<menu>	Define um menu de contexto ou uma lista de comandos.

Eita, complicou! São muitas tags pra usar, será que vou precisar aprender TODAS??? 😰😰😰

Nah, só algumas, não esquenta. Lembre-se, elas só são utilizadas quando necessárias.
A maioria você quase nunca vai usar. Por enquanto você só vai precisar aprender as principais, aquelas que são usadas em toda estrutura HTML, aquelas que compõe uma "Estrutura Semântica" de HTML.

Voltar para o início ↺

Estrutura Semântica? O que é isso?

Criar uma estrutura semântica em HTML é usar as tags certas para organizar o conteúdo de forma clara e significativa. Mesmo que você possa usar <div> para tudo (acredite, dá pra fazer uma página inteira usando só uma tag) e estilizar com CSS, usar tags como <header>, <nav>, <section>, etc., é melhor por alguns motivos:

1. Ajudam leitores de tela: As pessoas com deficiência visual usam leitores de tela que entendem melhor a página quando as tags semânticas são usadas corretamente.

2. Melhoram o SEO: Os motores de busca entendem melhor o conteúdo quando é estruturado com tags semânticas, o que pode melhorar o ranking nos resultados de pesquisa.

3. Facilitam a manutenção: Uma estrutura semântica torna o código mais fácil de entender e manter, pois dá pistas claras sobre o propósito de cada parte da página.

Por exemplo, ao invés de usar várias <div> para o cabeçalho, a navegação e o rodapé, você pode usar <header>, <nav>, e <footer>, o que deixa o código mais organizado e fácil de entender. Todos os bons programadores de front-end sabem como fazer uma estrurura semântica!

Agora, como faço tudo isso?

Pra começar, dentro do VSCode ao começar a digitar o doctype HTML <!DOCTYPE html>, o editor de código geralmente oferece uma funcionalidade chamada "emmet", que é uma abreviação para "emmet abbreviation". Isso permite que você digite um atalho, como !, e pressione a tecla Tab para expandir automaticamente em uma estrutura HTML básica, incluindo o doctype, as tags <html>, <head>, <meta>, <title> e <body>, economizando tempo na criação da estrutura inicial do documento HTML.

Ela vai ficar mais ou menos assim:

<!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>Document</title>
</head>
<body>
    
</body>
</html>

Explicando as tags...

<!DOCTYPE html>: Esta declaração define o tipo de documento e informa ao navegador que o documento está escrito em HTML5, a versão mais recente da linguagem HTML.

<html>: Esta tag envolve todo o conteúdo da página e define o início e o fim do documento HTML.

<head>: Esta seção contém metadados sobre o documento, como o título da página, a codificação de caracteres e informações para mecanismos de busca.

<meta charset="UTF-8">: Define a codificação de caracteres utilizada na página como UTF-8, que suporta uma ampla gama de caracteres.

<title>: Define o título da página, que aparece na aba do navegador ou na barra de título da janela.

<body>: Esta tag contém todo o conteúdo visível da página, como texto, imagens, vídeos e outros elementos.

Essa funcionalidade é bem útil para começar a trabalhar em um novo projeto HTML, garantindo uma estrutura semântica básica com elementos essenciais já configurados. Tente você fazer o mesmo!

Voltar para o início ↺

Começando com HTML

Okay, agora você deve ter algo mais ou menos assim:

Agora vamos dar uma implementada com certas tags muito comumente utilizadas em páginas de HTML...

Nessa estrutura (Simple_HTML_Structure.html), incluimos um <header> com um <nav> contendo uma lista de links, duas seções <section> com títulos <h2> e parágrafos <p>, e um <footer> com informações de direitos autorais.

Ah, mas como faço pra visualizar a minha página em HTML? Tem como?

Tem sim! Vou mostrar duas opções:

A primeira opção é que dentro do VSCode você pode instalar "extensões", e uma delas serve pra facilitar a visualização de páginas HTML, o "Live Server". Para instalá-lo, siga os passos abaixo:

1. Abra o VSCode e clique no ícone de extensões na barra lateral esquerda (ou pressione Ctrl+Shift+X).
2. Na barra de pesquisa, digite "Live Server" e pressione Enter.
3. Clique em "Install" na extensão "Live Server" oferecida pela "ritwickdey" para instalá-la.

Depois de instalado, você pode visualizar sua página HTML com o Live Server seguindo estes passos:

1. Abra seu arquivo HTML no VSCode.
2. Clique com o botão direito do mouse no arquivo HTML.
3. Selecione a opção "Open with Live Server".

O Live Server abrirá automaticamente seu arquivo HTML em um navegador e atualizará a página sempre que você salvar o arquivo HTML no VSCode, permitindo que você veja as mudanças em tempo real.

E a segunda opção é utilizar esta página aqui: W3Schools Tryit Editor

Este é um editor de HTML que você pode usar pra depurar seu código em HTML de forma bem simples, só basta clicar em "Run" e prontinho.

Entããão, é isso o que se tem do básico de HTML. Se quiser se aprofundar mais aconselho a testar mais tags e seus parâmetros, tais como <img src="">, ou <a href="">.

Veja abaixo mais exemplos comuns:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Este é um título da página web</title>
</head>
<body>
    <!-- Títulos -->
    <h1>Este é um título de nível 1</h1>
    <h2>Este é um título de nível 2</h2>
    <h3>Este é um título de nível 3</h3>
    <h4>Este é um título de nível 4</h4>
    <h5>Este é um título de nível 5</h5>
    <h6>Este é um título de nível 6</h6>

    <!-- Parágrafos -->
    <p>Este é um parágrafo de texto simples.</p>

    <!-- Listas -->
    <h2>Listas</h2>
    <h3>Listas não ordenadas</h3>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h3>Listas ordenadas</h3>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

    <!-- Links -->
    <h2>Links</h2>
    <p>Visite a <a href="https://www.exemplo.com">página inicial</a>.</p>

    <!-- Imagens -->
    <h2>Imagens</h2>
    <img src="caminho/para/imagem.jpg" alt="Descrição da imagem" title="Mensagem que aparece ao manter o cursor do mouse emcima da imagem">

    <!-- Formulários -->
    <h2>Formulários</h2>
    <form action="/submit" method="post">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Enviar">
    </form>

    <!-- Tabelas -->
    <h2>Tabelas</h2>
    <table>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
        <tr>
            <td>João</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>25</td>
        </tr>
    </table>

    <!-- Seções -->
    <h2>Seções</h2>
    <section>
        <h3>Seção 1</h3>
        <p>Conteúdo da seção 1...</p>
    </section>
    <section>
        <h3>Seção 2</h3>
        <p>Conteúdo da seção 2...</p>
    </section>

    <!-- Quebra de linha -->
    <br>
    
    <!-- Linha horizontal -->
    <hr>

    <!-- Quebra de linha -->
    <br>

    <!-- Estilos de texto -->
    <h2>Estilos de Texto</h2>
    <p><i>Texto em itálico</i></p>
    <p><b>Texto em negrito</b></p>
    <p><u>Texto sublinhado</u></p>
    <p><strong>Texto forte</strong></p>
    <p><small>Texto pequeno</small></p>
    <p><code>Código de programação</code></p>
</body>
</html>

Também recomendo sites, fórums e outros repositórios para melhor estudar, eis aqui uma lista pra começar:

• O repositório "free-educa/free-livros", com vários livros sobre Front-end começando por HTML.
• O tópico "Sites e cursos para aprender HTML" do repositório "arthurspk/guiadevbrasil", que pode lhe servir como um norte para sua busca pela internet sobre vários conceitos de Front-end e HTML.
• A página "HTML Tutorial" do site W3Schools com praticamente tudo sobre HTML de ponta-a-ponta.
• O meu repositório do curso de ADS (Análise e Desenvolvimento de Sistemas) da disciplina de "Tópicos Especiais em Tecnologia", com vários exemplos de código em HTML, CSS e JavaScript.

Eeeee com isso finalizamos o HTML, parabéns. Se você acha que já está pronto, agora vamos avançar para o próximo passo, o CSS! 😁✨

Voltar para o início ↺

CSS (Cascading Style Sheets)

O que é "CSS", e para quê serve?

O CSS, ou Cascading Style Sheets (em português, Folhas de Estilo em Cascata), é a linguagem utilizada para estilizar a apresentação de documentos HTML.

Enquanto o HTML define a estrutura e o conteúdo de uma página web, o CSS é responsável por definir os aspectos visuais da página. Você pode pensar no HTML como o esqueleto de uma página web, fornecendo a estrutura básica e a organização do conteúdo. Enquanto isso, o CSS atua como a "pele" e músculos da página, determinando sua aparência com cores, fontes, espaçamento e layout.

A combinação de HTML e CSS permite criar páginas web visualmente atraentes e bem estruturadas, proporcionando uma experiência de navegação agradável e intuitiva.

Em resumo, o CSS permite que os desenvolvedores web personalizem a aparência de suas páginas, tornando-as mais atraentes e funcionais para os usuários.

Voltar para o início ↺

Estrutura de Diretório

Agora é um ótimo momento de falar sobre Estrutura de Diretório, uma parte fundamental para manter os arquivos organizados e facilitar a manutenção e colaboração. Aqui está um exemplo com uma imagem ao lado...

• assets/src: É o diretório raiz dos arquivos de origem do seu projeto. Você pode escolher nomeá-lo como assets ou src.
  • css: Contém os arquivos CSS do projeto.
  • js: Contém os arquivos JavaScript do projeto.
  • scss: Contém os arquivos SCSS, que são arquivos CSS com capacidades avançadas, como variáveis, aninhamento e mixins.
  • images: Armazena todas as imagens utilizadas no projeto.
  • fonts: Armazena arquivos de fontes personalizadas que podem ser usadas no projeto.
• vendor: Este é o diretório que armazena bibliotecas de terceiros, como o Bootstrap por exemplo.
  • bootstrap: Contém os arquivos da biblioteca Bootstrap neste caso, depende de qual biblioteca você estiver utilizando.
• index.html: O seu arquivo HTML, onde você vai "vincular" os arquivos CSS e JavaScript e criar a estrutura básica da sua página-web.

Essa estrutura é eficaz porque organiza os arquivos de forma lógica e separa claramente os recursos do projeto (pasta do seu projeto) dos recursos de terceiros (vendor).

Além disso, separar os arquivos de origem (assets/src) dos arquivos compilados ou minificados (como css e js) ajuda a manter o código-fonte organizado e facilita a manutenção do projeto.

Veja um exemplo de como fica abaixo:

Este é um exemplo de estrutura de diretório para um projeto simples, contendo arquivos HTML, CSS, JavaScript, imagens e fontes. Em breve, você estará criando algo semelhante, mas por enquanto, vamos começar com o básico seguindo nosso "Guia de CSS" de ponta a ponta.

Ao final do guia, teremos um conhecimento sólido sobre CSS. Vamos lá! 😁✊

Voltar para o início ↺

Guia de CSS

Aqui está o guia que iremos seguir:

1. Linkando CSS com HTML: Mostraremos como linkar um arquivo CSS externo com um arquivo HTML usando a tag <link> no <head> do documento HTML.

2. Seletores CSS: Explicaremos os diferentes tipos de seletores CSS, como seletores de elemento, classe e ID, e como eles são usados para aplicar estilos a elementos específicos em uma página.

3. Propriedades CSS: Listaremos e explicaremos as propriedades CSS mais comuns, como cor, fonte, margem, preenchimento e exibição, e como elas afetam a aparência dos elementos HTML.

4. Box Model: Descreveremos o conceito do modelo de caixa CSS, que define como o conteúdo, preenchimento, borda e margem de um elemento são renderizados e como isso afeta o layout da página.

5. Layouts CSS: Discutiremos diferentes técnicas de layout CSS, como o layout de grade e o layout flexível, e como eles são usados para criar designs responsivos e adaptáveis.

6. Transições e Animações CSS: Explicaremos como usar transições e animações CSS para adicionar movimento e interatividade aos elementos da página, criando uma experiência de usuário mais envolvente.

7. Melhores Práticas CSS: Compartilharemos algumas melhores práticas de codificação CSS, como manter o código limpo e organizado, usar classes e IDs semanticamente e otimizar o desempenho da página.

8. Media Queries: Introduziremos o conceito de media queries, que permitem que você aplique estilos com base nas características do dispositivo, como largura da tela, permitindo a criação de designs responsivos.

E encerramos a introdução conceitual sobre CSS. Agora prepare o VSCode e vamos pro código. 👩‍💻✨

Voltar para o início ↺

1. Linkando CSS com HTML

Começaremos com o básico: Trazer o CSS pro seu HTML.

Lembra do Simple_HTML_Structure.html? Então, vamos nos utilizar dele e trazer o CSS para ele seguindo os seguintes passos, presta atenção:

1. Criar o Arquivo CSS:
   Antes de linkar o CSS com o HTML, precisamos de um arquivo CSS pronto para aplicar ao nosso documento HTML. Seguindo os conceitos da "Estrutura de Diretório", faremos o nosso arquivo CSS chamado "style.css" numa estrutura adequada.

---

2. Adicionar o Link no HTML:
   No nosso arquivo HTML que vamos estilizar com CSS, vamos adicionar a seguinte linha dentro da seção <head> do HTML:

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

No final, teremos algo assim:

E com isso, estamos prontos para iniciarmos com o CSS agora. Vamos partir pro passo 2. Seletores CSS!

Voltar para o início ↺

2. Seletores CSS

1. Seletores de Elementos:
   São usados para selecionar elementos no HTML com base em seus nomes.

Por exemplo, para selecionar todos os elementos <h1> em seu documento HTML e definir uma cor de texto vermelha, você pode usar o seguinte seletor:

h1 {
    color: red;
}

Faça isso e veja o título da sua página ficar vermelho!

---

2. Seletores de Classe:
   São usados para selecionar elementos com base em suas "classes". As classes são atributos que podem ser adicionados a elementos HTML para estilizá-los de forma específica.

Por exemplo, se você tiver um elemento <p> com a classe "description", você pode estilizá-lo da seguinte forma:

HTML:

<section>
    <h2>Seção 1</h2>
    <p class="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</section>
<section>
    <h2>Seção 2</h2>
    <p class="description2">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
</section>

CSS:

.description1 {
    color: blue;
}

.description2 {
    color: green;
}

E com isso, ao adicionarmos classes diferentes mesmo que sejam para um mesmo elemento, podemos estilizá-los separadamente!

---

3. Seletores de ID:
   São usados para selecionar elementos com base em seus IDs.

Os IDs são atributos únicos que podem ser atribuídos a elementos HTML. Por exemplo, no nosso elemento <header> com o ID "main", você pode estilizá-lo da seguinte forma:

HTML:

<header id="main">
    <h1>Bem-vindos(as) a minha página em HTML</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </nav>
</header>

CSS:

#main {
    background-color: #252525;
    padding: 20px;
}

E com isso, o seletor #main é usado para estilizar o elemento <header> que possui o ID main. Isso faz com que o fundo do <header> seja cinza (#252525).

---

4. Seletores de Atributo:
   São usados para selecionar elementos com base em atributos específicos.

Por exemplo, se você tiver elementos <a> com o atributo "target" definido como "_blank" (para abrir o link em uma nova aba), você pode estilizá-los da seguinte forma:

Vamos adicionar uma autoria com nosso nome no rodapé da página com o atributo target="_blank"...

HTML:

<footer>
    <p>&copy; 2024 Meu Site muito top. Todos os direitos reservados. | Feito com amor por <a href="https://github.com/juletopi" target="_blank">Juletopi</a>.</p>
</footer>

CSS:

a[target="_blank"] {
    color: yellow;
}

Isso fará com que todos os links com o atributo "target" igual a "_blank" tenham texto amarelo.

---

Enfim, resumindo, há vários tipos de seletores CSS e situações onde cada um se enquadra melhor:

1. Seletor de Elementos (element):

   • Quando usar: Este seletor é usado para selecionar todos os elementos de um tipo específico em um documento HTML. Por exemplo, p seleciona todos os parágrafos <p> na página.
   • Situações de uso: É útil quando você deseja aplicar estilos a todos os elementos de um determinado tipo em sua página, como definir uma fonte padrão para todos os parágrafos.

2. Seletor de Classes (.class):

   • Quando usar: Este seletor é usado para selecionar elementos que possuem uma classe específica atribuída a eles. Por exemplo, .destaque seleciona todos os elementos com a classe destaque.
   • Situações de uso: É útil quando você deseja aplicar estilos a um grupo específico de elementos que compartilham a mesma classe, como estilizar botões ou caixas de destaque em sua página.

3. Seletor de IDs (#id):

   • Quando usar: Este seletor é usado para selecionar um elemento específico com um ID único atribuído a ele. Por exemplo, #menu seleciona o elemento com o ID menu.
   • Situações de uso: É útil quando você deseja estilizar um elemento único em sua página, como um cabeçalho ou uma barra de navegação.

4. Seletor de Atributos ([atributo]):

   • Quando usar: Este seletor é usado para selecionar elementos que possuem um atributo específico. Por exemplo, [type="text"] seleciona todos os elementos com o atributo type igual a "text".
   • Situações de uso: É útil quando você deseja aplicar estilos a elementos com atributos específicos, como estilizar todos os campos de entrada de texto em um formulário.

E com isso finalizamos a parte dos Seletores CSS. Agora seguiremos para o próximo passo do guia, o passo 3. Propriedades CSS!

Voltar para o início ↺

3. Propriedades CSS

As "Propriedades CSS" são usadas para definir o estilo de um elemento HTML.

Existem um bocado delas, e cada uma delas controlando diversos aspectos visuais, como cor, fonte, margem, preenchimento e exibição. Aqui estão algumas das propriedades CSS mais comuns:

Tipo	Descrição
Cor	color, background-color, border-color
Texto	font-family, font-size, font-weight, text-align, text-decoration, text-transform, line-height
Layout	margin, padding, width, height, display, float, position, top, right, bottom, left, overflow
Borda	border, border-radius, border-style, border-width, box-shadow
Background	background-image, background-color, background-size, background-position, background-repeat
Espaçamento	margin, padding
Dimensão	width, height, max-width, max-height, min-width, min-height
Texto	color, font-family, font-size, font-weight, line-height, text-align, text-decoration
Lista	list-style-type, list-style-image, list-style-position
Outros	cursor, opacity, z-index, visibility, transition, animation

Ou se também preferir saber sobre elas mais especificamente:

Propriedade	Descrição
font-style	Define o estilo da fonte (normal, itálico, obliquo)
font-variant	Define se o texto deve ser exibido em letras maiúsculas ou minúsculas
font-size-adjust	Ajusta o tamanho da fonte para preservar a altura dos glifos
font-stretch	Define a largura da fonte (expandida, condensada, normal)
font	Define todas as propriedades de fonte em uma declaração abreviada
letter-spacing	Define o espaço entre caracteres
word-spacing	Define o espaço entre palavras
text-indent	Define o recuo da primeira linha de texto
text-align	Define o alinhamento horizontal do texto (left, right, center, justify)
text-transform	Define a transformação do texto (maiúsculas, minúsculas, capitalize)
line-height	Define a altura da linha
vertical-align	Define o alinhamento vertical de um elemento em relação ao seu conteúdo inline
color	Define a cor do texto
background-color	Define a cor de fundo de um elemento
background-image	Define a imagem de fundo de um elemento
background-repeat	Define como a imagem de fundo deve se repetir (repeat, repeat-x, repeat-y, no-repeat)
background-position	Define a posição inicial de uma imagem de fundo
background-attachment	Define se uma imagem de fundo é fixa ou rola com o restante da página
border	Define as propriedades da borda em uma declaração abreviada
border-style	Define o estilo da borda (solid, dotted, dashed, double, groove, ridge, inset, outset, none)
border-width	Define a largura da borda
border-color	Define a cor da borda
border-radius	Define o raio da borda do elemento (para criar bordas arredondadas)
box-shadow	Adiciona sombra a um elemento
margin	Define as margens externas de um elemento
padding	Define o preenchimento interno de um elemento
display	Define o tipo de exibição de um elemento (block, inline, inline-block, none)
position	Define o método de posicionamento de um elemento (static, relative, absolute, fixed)
top, right, bottom, left	Define a posição de um elemento posicionado
float	Define se um elemento deve flutuar à esquerda, à direita ou não flutuar
clear	Define como um elemento deve se comportar em relação a elementos flutuantes
z-index	Define a pilha de ordem de um elemento (sobreposição de elementos)
overflow	Define o comportamento do conteúdo que transborda de um elemento (esconder, rolar, exibir)
visibility	Define a visibilidade de um elemento (visível, oculto)
cursor	Define o cursor do mouse quando ele passa sobre um elemento
opacity	Define a opacidade de um elemento (valor entre 0 e 1, sendo 0 totalmente transparente e 1 opaco)
transition	Define a transição entre os estados de um elemento quando ocorrem mudanças em suas propriedades
animation	Define uma animação para um elemento

Pois é, e essas são só algumas das várias propriedades CSS que existem, o leque de opções é suuuper extenso.

Mas é a mesma coisa das tags de HTML, lembra?

Nah, só algumas, não esquenta. Lembre-se, elas só são utilizadas quando necessárias.

Então, você só precisa ficar atento ao que precisa naquele momento. Se você quer que algum elemento da sua página web fique de uma certa maneira, provavelmente existe uma propriedade CSS perfeita para o que você precisa!

Voltar para o início ↺

Modificando o nosso arquivo HTML com elementos CSS

Então, de verdade agora, vamos modificar o nosso arquivo que criamos anteriormente, o "Simple_HTML_Structure.html".

Vamos usar da criatividade para modificar e/ou adicionar mais conteúdo a nossa página-web e estiliza-la com diferentes prorpiedades CSS, confira o resultado abaixo:

E então? Ficou bom né? Com CSS, já podemos transformar completamente a aparência de uma página e deixá-la praticamente pronta.

Com essa página estilizada temos vários elementos visuais:

• Uma barra de navegação fixa no topo da página com a logo da página e os links de navegação Home, Sobre e Contato.
• Uma seção Home com um título, subtítulo, parágrafo de texto e uma seta animada.
• Uma seção Sobre com duas sub-seções com imagens, títulos, subtítulos, botões e parágrafos de texto.
• Uma seção Contato com uma lista de links de botões clicáveis e contatos adicionais com ícones SVGs.
• Um rodapé com copyright, ano e mensagem de autoria.
• Fonte de texto e imagem de fundo da página no estilo "pixelado".
• Seleção de texto e barra de rolagem estilizados nas cores principais da página.

Visualmente, ela já parece bem satisfatória, mas ainda há muito espaço para melhorias. Não se preocupe, vamos chegar lá. Por enquanto, vamos nos concentrar no momento e aprender como uma página em branco, com apenas alguns textos, se transformou nessa página com essa aparência...

Primeiramente, vamos ver a nossa Estrutura de Diretório.

Na estrutura, podemos ver o arquivo "index.html" que anteriormente era o nosso arquivo "Simple_HTML_Structure.html".

Também podemos ver o arquivo "style.css", que é onde o nosso código CSS está.

E também podemos ver arquivos extras como fontes ("DisposableDroidBB-Bold.ttf", "DisposableDroidBB-Italic.ttf" e "DisposableDroidBB-Regular.ttf") que mudam as fontes dos textos da página, e imagens de exemplo ("iconeExemplo.ico", "imagemExemplo.png", "logoExemplo.png" e "pixelatedStreetBackgroundGif.gif") para colocarmos na página.

Eis o código HTML e CSS por trás dessa página:

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<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>Minha Página Muito Top</title>
    <link rel="stylesheet" href="src/css/style.css">
    <link rel="shortcut icon" href="src/images/iconeExemplo.ico" type="image/x-icon" />
</head>
<body>
    <!-- Overlay acima da imagem de fundo da página -->
    <div class="overlay"></div>

    <!-- Barra de navegação -->
    <nav class="navbar">
        <div class="logo">
            <img src="src/images/logoExemplo.png" alt="imagePageLogo">
            <h2>MINHA PÁGINA<br>MUITO TOP</h2>
        </div>
        <ul class="nav-links">
            <li><a href="#main-title">Home</a></li>
            <li><a href="#about-title">Sobre</a></li>
            <li><a href="#contact-title">Contato</a></li>
        </ul>
    </nav>

    <!-- Seção do título da página -->
    <header class="title">
        <h1 id="main-title">Bem-vindos(as)<br>a minha pagina<br>muito top</h1>
        <hr>
        <h2>A Pagina Mais Top</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla leo nec risus consectetur, sit amet ultrices felis consequat. Aliquam erat volutpat. Donec at metus eros. Aliquam in mauris leo. Cras maximus pulvinar mauris, id iaculis felis. Nullam feugiat diam vitae nisi varius, in eleifend elit fringilla. Mauris nec velit eu leo rhoncus commodo. Maecenas vitae elit nec quam placerat eleifend. Sed vehicula libero at purus sollicitudin, a interdum est venenatis. Donec ac lacinia magna.</p>

        <!-- Seta animada abaixo do parágrafo na sessão do título -->
        <div class="arrow"></div>
    </header>

    <!-- Seção 1 da página -->
    <h2 id="about-title">Sobre</h2>
    <hr class="hr1">
    <section id="section-one" class="page-section">
        <div class="section-content">
            <img src="src/images/imagemExemplo.png" alt="imageSectionOne" class="section-image">
            <div class="section-text">
                <h2>Secao 1</h2>
                <sub>Conteudo da secao 1</sub>
                <!-- Botão na seção 1 -->
                <div class="button-container">
                    <button id="button1" class="transparent-button">Botao 1</button>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla leo nec risus consectetur, sit amet ultrices felis consequat. Aliquam erat volutpat. Donec at metus eros. Aliquam in mauris leo. Cras maximus pulvinar mauris, id iaculis felis. Nullam feugiat diam vitae nisi varius, in eleifend elit fringilla. Mauris nec velit eu leo rhoncus commodo.</p>
            </div>
        </div>
    </section>

    <!-- Seção 2 da página -->
    <section id="section-two" class="page-section">
        <div class="section-content">
            <img src="src/images/imagemExemplo.png" alt="imageSectionTwo" class="section-image">
            <div class="section-text">
                <h2>Secao 2</h2>
                <sub>Conteudo da secao 2</sub>
                <!-- Botão na seção 2 -->
                <div class="button-container">
                    <button id="button2" class="transparent-button">Botao 2</button>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla leo nec risus consectetur, sit amet ultrices felis consequat. Aliquam erat volutpat. Donec at metus eros. Aliquam in mauris leo. Cras maximus pulvinar mauris, id iaculis felis. Nullam feugiat diam vitae nisi varius, in eleifend elit fringilla. Mauris nec velit eu leo rhoncus commodo.</p>
            </div>
        </div>
    </section>

    <!-- Seção "Contatos" -->
    <h2 id="contact-title">Contato</h2>
    <hr class="hr2">
    <section class="contacts">
        <p>Lista de Links:</p>
        <div class="contact-link-container">
            <button id="button2" class="contact-link-button">Link 1</button>
            <button id="button3" class="contact-link-button">Link 2</button>
            <button id="button4" class="contact-link-button">Link 3</button>
        </div>
        <p>Contatos Adicionais:</p>
        <div class="social-icons-container">
            <a href="https://www.facebook.com/" target="_blank" title="Facebook">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
            </a>
            <a href="https://www.instagram.com/" target="_blank" title="Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
            </a>
            <a href="https://www.linkedin.com/" target="_blank" title="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="29" height="29" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
            </a>
            <a href="https://github.com/" target="_blank" title="GitHub">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
            </a>
            <a href="https://whatsapp.com/" target="_blank" title="Whatsapp">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
            </a>
        </div>
    </section>

    <!-- Rodapé da página -->
    <footer class="footer">
        <p>&copy; 2024 Minha página muito top. Todos os direitos reservados. | Feito com amor por <a href="https://github.com/juletopi" target="_blank">Juletopi</a>.</p>
    </footer>
</body>
</html>

CSS:

/* Reset básico para todos os elementos */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Remove os estilos padrão das listas não ordenadas */
ul {
	list-style: none;
}

/* Remove a decoração padrão dos links */
a {
	text-decoration: none;
}

/* Adiciona um scroll suave */
html {
    scroll-behavior: smooth;
}

/* Estilização básica do corpo do documento */
body {
    font-family: DisposableDroidBB-Regular;
    color: #fff;
    background-color: #2c2c2e;
    background-image: url('../images/pixelatedStreetBackgroundGif.gif');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* Estilização da sobreposição para efeitos visuais desejados na imagem de fundo */
.overlay {
    background-color: rgba(0, 0, 0, 0.815);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Estilização da barra de navegação */
.navbar {
    position: fixed;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    background-color: #1b1b1bfa;
    box-shadow: 0 10px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Estilização do logotipo na barra de navegação */
.logo {
    display: flex;
    align-items: center;
}

/* Estilização da imagem do logotipo na barra de navegação */
.logo img {
    width: 60px;
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Estilização do texto do logotipo na barra de navegação */
.logo h2 {
    font-family: Verdana;
    margin-left: 20px;
    font-size: 18px;
    font-style: inherit;
    line-height: 1.0;
    letter-spacing: -2px;
}

/* Estilização geral dos links de navegação */
.nav-links {
    display: flex;
    list-style-type: none;
    font-size: 23px;
}

/* Estilização dos itens da lista de links de navegação */
.nav-links li {
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Estilização específica dos links de navegação */
.nav-links a {
    color: #e0e0e0;
    padding-inline: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Estilização específica dos links de navegação ao passar o mouse */
.nav-links a:hover {
    background-color: #575757;
    border-radius: 5px;
    transition: 0.5s ease;
    transform: scale(1.1);
}

/* Estilização específica dos links de navegação ao deixar o mouse */
.nav-links a:not(:hover) {
    border-radius: 5px;
    transition: background-color 0.5s ease;
}

/* Estilização do título da seção do título principal da página */
.title h1 {
    font-family: "DisposableDroidBB-Bold";
    font-size: 60px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-top: 150px;
    padding-bottom: 60px;
    text-align: center;
    line-height: 0.7;
    letter-spacing: -3px;
}

/* Estilização da linha horizontal abaixo do título principal da página */
.title hr {
    border: none;
    border: 2px solid #fff;
    width: 30%;
    margin: 50px auto;
    margin-top: -30px;
    margin-bottom: 30px;
}

/* Estilização do subtítulo da seção do título principal da página */
.title h2 {
    font-family: "DisposableDroidBB-Bold";
    font-size: 36px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-bottom: 40px;
    text-align: center;
    line-height: 1.0;
    letter-spacing: -1px;
}

/* Estilização do parágrafo da seção do título principal da página */
.title p {
    font-size: 23px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-bottom: 10px;
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
    line-height: 1.5;
}

/* Estilização da seta animada abaixo do parágrafo da seção do título da página */
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #fff;
    position: relative;
    margin: 10px auto;
    padding-bottom: 15px;
    animation: arrowAnimation 1s infinite alternate;
}

/* Estilização do título "Sobre" */
#about-title {
    font-family: "DisposableDroidBB-Bold";
    font-size: 55px;
    text-align: center;
    margin-top: 80px;
    margin-bottom: -10px;
    line-height: 0.7;
    letter-spacing: -2px;
}

/* Estilização da linha horizontal abaixo do título "Sobre" */
.hr1 {
    border: none;
    border: 2px solid #fff;
    margin: 20px auto;
    margin-bottom: 10px;
    width: 20%;
}

/* Estilização geral das seções da página */
.page-section {
    color: #fff;
    padding: 50px 0px;
    padding-bottom: 0;
    padding-top: 10px;
}

/* Estilização da imagem das seções da página */
.section-image {
    width: 100%;
    height: auto;
    max-width: 300px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

/* Estilização do conteúdo das seções da página */
.section-content {
    background-color: #1b1b1bab;
    padding: 0px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Estilização específica da imagem das seções da página */
.section-content img {
    width: 100%;
    border-radius: 10px;
}

/* Estilização geral do texto das seções da página */
.section-text {
    flex: 1;
    padding-right: 20px;
}

/* Estilização do título do texto nas seções da página */
.section-text h2 {
    font-family: "DisposableDroidBB-Bold";
    font-size: 38px;
    margin-top: 30px;
    margin-left: 20px;
}

/* Estilização do subtitulo do texto nas seções da página */
.section-text sub {
    font-family: "DisposableDroidBB-Italic";
    font-size: 18px;
    margin-left: 20px;
    padding-bottom: 20px;
    line-height: 1.0;
}

/* Estilização dos parágrafos do texto nas seções da página */
.section-text p {
    color: #e0e0e0;
    font-size: 23px;
    line-height: 1.5;
    margin-left: 20px;
    padding-top: 20px;
    margin-bottom: 30px;
}

/* Estilização específica da Seção 2 */
#section-two .section-content {
    flex-direction: row-reverse;
    text-align: right;
}

/* Estilização específica da imagem da Seção 2 */
#section-two .section-image {
    padding-right: 20px;
    padding-left: 0;
}

/* Estilização do container do botão */
.button-container {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

/* Estilização dos botões transparentes */
.transparent-button {
    font-family: DisposableDroidBB-Bold;
    font-size: 23px;
    background-color: transparent;
    color: white;
    border: 2px solid #747474;
    border-radius: 5px;
    padding: 10px 20px;
    margin-left: 20px;
    margin-top: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Estilização do botão transparente ao passar o mouse */
.transparent-button:hover {
    background-color: #747474;
    color: white;
    border-color: #747474;
}

/* Estilização específica do botão da Seção 2 */
#button2.transparent-button {
    margin-left: auto;
}

/* Estilização do título "Contato" */
#contact-title {
    font-family: "DisposableDroidBB-Bold";
    font-size: 55px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: -10px;
    line-height: 0.7;
    letter-spacing: -2px;
}

/* Estilização da linha horizontal abaixo do título "Contato" */
.hr2 {
    border: none;
    border: 2px solid #fff;
    margin: 20px auto;
    margin-bottom: 10px;
    width: 20%;
}

/* Estilização geral da seção de contatos */
.contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilização dos parágrafos da seção de contatos */
.contacts p {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28px;
    margin-top: 20px;
}

/* Estilização do container dos botões de contatos */
.contact-link-container {
    text-align: center;
    margin-bottom: 15px;
}

/* Estilização dos botões de contatos */
.contact-link-button {
    font-family: DisposableDroidBB-Bold;
    font-size: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    color: white;
    border: 3px solid #747474;
    border-radius: 5px;
    padding: 20px 180px;
    margin-left: 20px;
    margin-top: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Estilização dos botões de contatos ao passar o mouse */
.contact-link-button:hover {
    background-color: #747474;
    color: white;
    border-color: #747474;
}

/* Estilização do container dos ícones sociais */
.social-icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    padding-bottom: 30px;
    gap: 30px;
}

/* Estilização específica do link dos ícones sociais */
.social-icons-container a {
    display: inline-block;
    width: 38px;
    margin-top: 10px;
}

/* Estilização específica do SVG dos ícones sociais */
.social-icons-container svg {
    width: 100%;
    height: 100%;
}

/* Estilização do preenchimento dos ícones sociais */
.social-icons-container a svg path {
    fill: #9e9e9e;
}

/* Estilização do preenchimento dos ícones sociais ao passar o mouse */
.social-icons-container a:hover svg path {
    fill: #5e5e5e;
    transition: fill 0.3s ease;
}

/* Estilização do rodapé */
.footer {
    font-family: Verdana;
    background-color: #141414;
    color: #888888;
    margin-top: 30px;
}

/* Estilização do texto no rodapé */
.footer p {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    font-size: 12px;
}

/* Estilização do link no rodapé */
.footer a {
    color: #cecece;
}

/* Estilização do links no rodapé ao passar o mouse */
.footer a:hover {
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Definição da fonte DisposableDroidBB-Regular */
@font-face {
    font-family: "DisposableDroidBB-Regular";
    src: url("../fonts/DisposableDroidBB-Regular.ttf") format("woff2"),
         url("../fonts/DisposableDroidBB-Regular.ttf") format("woff");
}

/* Definição da fonte DisposableDroidBB-Bold */
@font-face {
    font-family: "DisposableDroidBB-Bold";
    src: url("../fonts/DisposableDroidBB-Bold.ttf") format("woff2"),
         url("../fonts/DisposableDroidBB-Bold.ttf") format("woff");
}

/* Definição da fonte DisposableDroidBB-Italic */
@font-face {
    font-family: "DisposableDroidBB-Italic";
    src: url("../fonts/DisposableDroidBB-Italic.ttf") format("woff2"),
         url("../fonts/DisposableDroidBB-Italic.ttf") format("woff");
}

/* Animação da seta */
@keyframes arrowAnimation {
    from {
        top: 0;
    }
    to {
        top: 10px;
    }
}

/* Estilos da barra de rolagem */
::-webkit-scrollbar {
    background-color: #2c2c2e;
    width: 10px;
	height: 8px;
}

/* Estilos do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
    background-color: #707070;
    border-radius: 8px;
}

/* Estilos da seleção de texto */
::selection {
    background-color: #bdbdbd59;
    color: #fff;
}

E é com essa estrutura HTML e esses elementos e propriedades CSS que conseguimos fazer essa página-web. Foram utilizados diversos elementos e propriedades específicas além daqueles que se encaixam no conceito de Propriedades CSS, como Box Models, Layouts, Trasições e Animações.

Mas o que são todos estes elementos e como eles funcionam?
Vamos explicá-los parte-a-parte.

Voltar para o início ↺

4. Box Model

O Box Model no CSS é um conceito que define como os elementos HTML são renderizados em uma página.

Ele consiste em quatro partes principais: conteúdo, preenchimento, borda e margem. No nosso código CSS, podemos ver o box model em ação ao definir o tamanho, o espaçamento e a borda dos elementos.

Alguns exemplos comuns:

• A propriedade padding é usada para definir o espaçamento dentro do elemento.
• A propriedade border é usada para definir a borda do elemento
• A propriedade margin é usada para definir o espaçamento ao redor do elemento.

Saber como usar cada box model é essencial para criar layouts precisos e consistentes! Existem muitas outras propriedades que se encaixam no conceito de box model, como width, height, box-shadow, outline e overflow, você pode aprender sobre eles por conta.

Vou mostrar um exemplo de Box Model com o código CSS do "botão transparente":

/* Estilização dos botões transparentes */
.transparent-button {
    font-family: DisposableDroidBB-Bold;
    font-size: 23px;
    background-color: transparent;
    color: white;
    border: 2px solid #747474;
    border-radius: 5px;
    padding: 10px 20px;
    margin-left: 20px;
    margin-top: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

Acima temos o nosso botão .transparent-button com as seguintes propriedades:

1. padding: Define o espaçamento interno do botão, ou seja, a distância entre o conteúdo do botão e sua borda. No caso, 10px de padding vertical (topo/baixo) e 20px de padding horizontal (esquerda/direita).

2. border: Define a borda do botão. Aqui, estamos usando uma borda sólida de 2px com a cor #747474 (cinza).

3. border-radius: Define o raio dos cantos do botão, criando cantos arredondados. Aqui, estamos usando um raio de 5px.

4. margin: Define o espaçamento externo do botão, ou seja, a distância entre o botão e outros elementos ao redor. 20px de margin à esquerda e 30px de margin acima.

Essas propriedades combinadas (padding, border, margin) formam a "caixa" de um elemento no Box Model, determinando seu tamanho e posição em relação aos outros elementos na página.

Voltar para o início ↺

5. Layouts CSS

Os Layouts CSS são fundamentais para o design de páginas-web, pois determinam como os elementos são organizados e apresentados aos usuários. Existem várias técnicas de layout em CSS, sendo duas das mais populares o Flexbox Layout (layout flexível) e o Grid Layout (layout de grade), que discutiremos a seguir.

Flexbox: Flexbox é um modelo de layout unidimensional e uma maneira esperta de organizar coisas em uma página. Você tem um monte de caixas (ou elementos) e o Flexbox ajuda a decidir como elas devem se encaixar na página, como ficar juntas ou separadas, e até mesmo em que ordem aparecem. Ele trabalha ao longo de um eixo principal (horizontal ou vertical) e um eixo transversal, fazendo com que os itens cresçam e encolham para preencher o espaço disponível. O Flexbox também oferece controle flexível sobre a direção, ordem, alinhamento e dimensionamento dos elementos.

Principais elementos do Flexbox:

• Contêiner Flexível (display: flex): Define um contêiner como um contexto flexível para seus itens filhos.
• Itens Flexíveis (flex): São os elementos filhos diretos do contêiner flexível e podem ser configurados para crescer, encolher e se alinhar de maneiras flexíveis.

Principais propriedades do Flexbox:

• display: Define o elemento como um contêiner flexível ou inline-flexível.
• flex-direction: Define a direção dos eixos principal e transversal no contêiner flexível.
• flex-wrap: Define se os itens flexíveis devem ser compactados em uma linha ou várias linhas.
• justify-content: Alinha os itens flexíveis ao longo do eixo principal do contêiner flexível.
• align-items: Alinha os itens flexíveis ao longo do eixo transversal do contêiner flexível.
• align-self: Permite que um item flexível se alinhe de forma diferente dos outros itens no contêiner.
• flex-grow, flex-shrink, flex-basis: Controlam como os itens flexíveis crescem, encolhem e são distribuídos no contêiner flexível.

Vou mostrar um exemplo de Flexbox com o código CSS da "barra de navegação":

/* Estilização da barra de navegação */
.navbar {
    position: fixed;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    background-color: #1b1b1bfa;
    box-shadow: 0 10px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

Acima temos a nossa barra de navegação .navbar com as seguintes propriedades:

1. display: flex;: Essa propriedade transforma o elemento pai (navbar) em um contêiner flexível, permitindo que seus filhos se comportem como itens flexíveis dentro dele.

2. justify-content: space-between;: Esta propriedade alinha os itens filhos ao longo do eixo principal (horizontal, neste caso) e distribui o espaço sobrando entre eles. No caso, os itens são alinhados de forma que o espaço seja distribuído entre eles, ficando um espaço vazio entre cada item.

3. align-items: center;: Essa propriedade alinha os itens filhos ao longo do eixo transversal (vertical, neste caso) do contêiner flexível (navbar). Neste caso, os itens são centralizados verticalmente dentro do contêiner.

Essas propriedades ajudam a criar uma barra de navegação horizontalmente centralizada e com os itens distribuídos igualmente ao longo do espaço disponível, o que é uma abordagem comum ao usar o Flexbox para layouts de navegação.

---

Grid: O Grid é um modelo de layout bidimensional, e é como uma grade que você usa para organizar as coisas em linhas e colunas de forma precisa. É ótimo quando você precisa alinhar elementos em uma página, como imagens, textos ou até mesmo formulários. É especialmente útil para layouts de página que exigem um alto grau de controle sobre a estrutura, como designs de grade, galerias de imagens e layouts de formulários.

Principais elementos do Grid:

• Contêiner de Grade (display: grid): Define um contêiner como uma grade para seus itens filhos.
• Linhas e Colunas da Grade (grid-template-rows, grid-template-columns): Define o tamanho e o número de linhas e colunas na grade.
• Áreas da Grade (grid-template-areas): Define áreas nomeadas na grade para posicionar os itens de forma intuitiva.

Principais propriedades do Grid:

• display: Define o elemento como um contêiner de grade.
• grid-template-rows, grid-template-columns: Define o tamanho das linhas e colunas na grade.
• grid-template-areas: Define as áreas nomeadas na grade, permitindo posicionar os itens em áreas específicas.
• grid-gap, row-gap, column-gap: Define o espaçamento entre as células da grade.
• justify-items, align-items: Alinha os itens da grade ao longo do eixo da linha e da coluna, respectivamente.
• justify-content, align-content: Alinha as linhas e colunas da grade dentro do contêiner da grade.

Apesar de não termos um exemplo do Grid no nosso código CSS, ambos os modelos Flexbox e Grid são poderosos e complementares, e sua escolha depende das necessidades específicas do layout que você está tentando criar.

O Flexbox é mais adequado para layouts unidimensionais, como barras laterais ou menus, enquanto o Grid é mais adequado para layouts bidimensionais, como layouts de página complexos. Em muitos casos, uma combinação inteligente de ambos os modelos pode ser a melhor abordagem para criar layouts flexíveis e responsivos.

Voltar para o início ↺

6. Transições e Animações CSS

As Transições e Animações em CSS são recursos que podemos usar para dar um detalhe mais dinâmico a elementos nas nossas páginas-web, adicionando movimento e interatividade e tornando a experiência do usuário mais envolvente e dinâmica.

Transições CSS: As transições permitem suavizar as mudanças de propriedades CSS de um estado para outro.

Elas são definidas com a propriedade transition e especificam a duração, a função de temporização (timing function) e outras configurações para controlar como a transição acontece. As transições são ativadas quando há uma mudança de estado, como um hover por exemplo (elemento:hover), e são úteis para criar efeitos de transição suaves, como mudanças de cor ou de tamanho.

Principais atributos de transições CSS:

• transition-property: Especifica qual propriedade CSS deve ser animada.
• transition-duration: Define a duração da transição.
• transition-timing-function: Especifica a função de temporização para a transição, controlando como a transição progride ao longo do tempo.
• transition-delay: Define um atraso antes que a transição comece.

Vou mostrar um exemplo de Transição CSS com o código CSS do hover dos "links da barra de navegação":

/* Estilização específica dos links de navegação ao passar o mouse */
.nav-links a:hover {
    background-color: #575757;
    border-radius: 5px;
    transition: 0.5s ease;
    transform: scale(1.1);
}

Acima temos a aplicação de uma transição suave (transition) nos links da barra de navegação quando o mouse passa sobre eles (:hover). Aqui está o que cada parte do código faz:

1. background-color: Define a cor de fundo dos links quando o mouse passa sobre eles.
2. border-radius: Define o raio dos cantos dos links.
3. transition: Especifica a propriedade a ser animada (background-color neste caso), a duração da transição (0.5s) e a função de temporização de aceleração (ease).
4. transform: Aplica uma transformação de escala (scale) nos links quando o mouse passa sobre eles, aumentando-os em 10%.

Com essa configuração, quando o mouse passar sobre os links da barra de navegação, a cor de fundo mudará suavemente para #575757, os cantos dos links serão arredondados (border-radius), e os links aumentarão ligeiramente de tamanho (transform: scale(1.1)) em meio segundo (transition: 0.5s ease). Isso cria um efeito visual agradável e responsivo para melhorar a interatividade da barra de navegação.

---

Animações CSS: As animações permitem criar sequências de movimentos ou mudanças de estilo ao longo do tempo.

Elas são definidas com a regra @keyframes, que especifica os estágios da animação e os estilos a serem aplicados em cada estágio. As animações são controladas por propriedades como animation-name, animation-duration, animation-timing-function, animation-delay e animation-iteration-count, permitindo criar efeitos complexos e personalizados.

Principais atributos de animações CSS:

• @keyframes: Define os estágios da animação e os estilos a serem aplicados em cada estágio.
• animation-name: Especifica o nome dos keyframes a serem usados para a animação.
• animation-duration: Define a duração da animação.
• animation-timing-function: Especifica a função de temporização para a animação.
• animation-delay: Define um atraso antes que a animação comece.
• animation-iteration-count: Especifica o número de vezes que a animação deve ser repetida.
• animation-direction: Define se a animação deve ser reproduzida para frente, para trás ou em ambos os sentidos após cada iteração.
• animation-fill-mode: Define como os estilos aplicados fora da animação são aplicados antes e depois que a animação é executada.
• animation-play-state: Define se a animação está em execução ou pausada.

Vou mostrar um exemplo de Animação CSS com o código CSS de uma "seta animada":

/* Estilização da seta animada abaixo do parágrafo da seção do título da página */
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #fff;
    position: relative;
    margin: 10px auto;
    padding-bottom: 15px;
    animation: arrowAnimation 1s infinite alternate;
}

/* Animação da seta */
@keyframes arrowAnimation {
    from {
        top: 0;
    }
    to {
        top: 10px;
    }
}

Acima temos a aplicação de uma animação de uma seta animada. Aqui está o que cada parte do código faz:

1. .arrow: Define as propriedades visuais da seta, como largura (width), altura (height), e os valores dos bordos (border-left, border-right, border-top), além de sua cor (#fff para branco). A seta é posicionada relativamente (position: relative) para permitir a animação e é animada usando a animação arrowAnimation.

2. @keyframes arrowAnimation: Define uma animação chamada arrowAnimation que altera a propriedade top da seta. A partir da posição inicial (from), a seta começa com top: 0, e na posição final (to), ela move para top: 10px. A animação é configurada para durar 1 segundo (1s), se repetir infinitamente (infinite), e alternar entre os estados inicial e final (alternate).

Com essa configuração, a seta abaixo do parágrafo da seção da página terá um efeito de animação onde ela se moverá para cima e para baixo (top) em um loop suave, adicionando um elemento visual dinâmico à página.

Transições e animações CSS podem sar aquele "tchans" especial para uma página web. As transições são frequentemente utilizadas em resposta a ações do usuário, como um hover, suavizando mudanças de estilo e criando uma experiência mais agradável. Por outro lado, as animações são usadas para animar elementos da página muitas vezes sem a necessidade de interação do usuário. Combinando transições e animações, é possível criar interfaces web mais dinâmicas e envolventes, melhorando muito a experiência do usuário.

Voltar para o início ↺

---

👤 Autor

Júlio Cézar | Juletopi

LinkedIn - Júlio Cézar P. Camargo Email - juliocezarpvh@hotmail.com Whatsapp - +55 (69) 9 9360-6894 Instagram - @juletopi

Voltar para o início ↺

---

Feito com 🤍 por Juletopi.