Skip to content
/ Front-End_Learning_Journey Public

📚 • Repositório dedicado ao aprendizado de Front-End! Aprendendo HTML, CSS e JavaScript, dominando frameworks como React, Angular ou Vue.js, aprimorando habilidades em design responsivo e muito mais!

License

MIT license
4 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

juletopi/Front-End_Learning_Journey

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

106 Commits
HTML+CSS_Structure
HTML+CSS_Structure
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
Simple_HTML_Structure.html
Simple_HTML_Structure.html
 
 

Repository files navigation

Liscence-badge

FrontEndJourney-pic

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: StatusBarProgress

Sumário 🧾

🔗 Periféricos

🗺️ Tópicos (Roadmap)

Tópicos Principais

  1. 📄 HTML, CSS, IDEs e Responsividade
  2. 📝 JavaScript, Event Handling e AJAX
  3. 📦 Frameworks CSS
  4. 🛠️ Pré-processadores CSS
  5. ⚙️ Frameworks JavaScript
  6. 🔄 Versionamento de Código
  7. 🌐 Hospedagem de Web-páginas
  8. ⚡ Task Runners e Module Bundlers
  9. 🔍 Unit Testing (Testes Front-End)

Tópicos Extras

  1. 🎨 UI & UX Design
  2. 🔐 Segurança Front-End
  3. 🧰 Ferramentas Auxiliares (Uso de IAs, Photoshop, Figma, etc.)

📚 Tópicos de Estudo

1. HTML, CSS, IDEs e Responsividade

2. JavaScript, Event Handling e AJAX


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

WhatIsFrontEnd-pic

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! 🗺️


RoadmapDeco-pic

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 🚀✨

🗺️ Roadmap de Front-End:

1. HTML, CSS, IDEs e Responsividade

TopicDeco-pic

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.
TopicDeco-pic

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.
TopicDeco-pic

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.
TopicDeco-pic

d. Responsividade e Design Mobile

  • 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.

2. JavaScript, Event Handling e AJAX

TopicDeco-pic

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.
TopicDeco-pic

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.
TopicDeco-pic

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.

3. Frameworks CSS

TopicDeco-pic
  • 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.

4. Pré-processadores CSS

TopicDeco-pic

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.

5. Frameworks JavaScript

TopicDeco-pic
  • 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.

6. Versionamento de Código

TopicDeco-pic

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.

7. Hospedagem de Web-páginas

TopicDeco-pic
  • 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.

8. Task Runners e Module Bundlers

TopicDeco-pic

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.

9. Unit Testing (Testes Front-End)

TopicDeco-pic

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.
TopicDeco-pic

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.

Extras

TopicDeco-pic

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.
TopicDeco-pic

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.
TopicDeco-pic

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! 😁👊


IDEs (Integrated Development Environment)

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

CascadingProgrammingSymbols-gif

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).


VSCodeIDE

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! 😎✨


Instalando o VSCode

Windows

  1. Download:

  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:

  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! 🚀✨


HTML (HyperText Markup Language)

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

HTMLTheEsqueleton-pic

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.

Note

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?

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.

Estrutura Semântica? O que é isso?

NotSemanticVSSemantic-pic

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!

Começando com HTML

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

HTMLTheBeggining-pic

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

HTMLImplementingTheCode-pic

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.

MyHTMLPage-pic

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.

MyHTMLPageOnEditor-pic

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:

CommonHTMLElements-pic 

<!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! 😁✨


CSS (Cascading Style Sheets)

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

CSSTheSkin-pic

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.

Estrutura de Diretório

ProjectDiretoryStructure-pic

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:

ProjectDiretoryStructureExample-pic

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á! 😁✊

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. 👩‍💻✨

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.
DiretoryStructure-pic
  1. 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:

HTMLLinkRelStylesheet-pic

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

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!

  1. 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!

  1. 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).

  1. 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!

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
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!

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:

HTML+CSSWebpageView-pic

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

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.

HTML+CSSWebpageDiretoryStructure-pic

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.

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.

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.

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 dar 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.

7. Melhores Práticas CSS

É fácil acabar focando apenas em fazer a página parecer bonita aos olhos do usuário, sem se importar com o código por trás. Porém, essa mentalidade pode deixar seu código e seus arquivos desorganizados e praticamente inviáveis de se trabalhar, especialmente se outros programadores precisarem colaborar com você.

Para evitar isso, existem as chamadas Melhores Práticas CSS, que ajudam a manter seu código organizado, fácil de entender e mais eficiente. Essas práticas são essenciais para quem deseja se tornar um bom programador Front-end.

Vamos explorar uma das melhores práticas de CSS que podem melhorar nosso código: a Separação de Arquivos.

Separação de Arquivos

Algo que pode acontecer, principalmente em projetos maiores e mais extensos, é que seu código CSS pode ficar enorme e isso é péssimo para você se organizar e se achar pelo seu código. Uma ótima maneira de organiza-lo é dividindo o seu código em diferentes arquivos baseando-se em funções semelhantes que partes do seu código façam.

CSSBestPractices-pic

Criamos mais 4 arquivos CSS além do nosso style.css: reset.css, fonts.css, animation.css e pseudoElements.css. Cada um com um agrupamento diferente do nosso código CSS. Eis como os organizamos:

reset.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;
}

fonts.css:

/* 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");
}

animation.css:

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

pseudoElements.css:

/* 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;
}

Como podemos ver nos códigos acima, cada arquivo CSS que criamos está agrupado com uma parte do nosso código CSS que foi retirado do nosso arquivo CSS principal, o style.css.

Com isso, temos um código CSS mais organizado e mais fácil de nos localizarmos. Mas essa é apenas uma das melhores práticas.

O nosso código CSS já possui várias melhores práticas que podemos identificar...

Vamos analisar algumas melhores práticas CSS que já estão sendo usadas no nosso código:

  1. Reset básico:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    O reset básico garante que todos os elementos tenham um estilo consistente em diferentes navegadores.

  2. Remoção dos estilos padrão:

    ul {
    list-style: none;
}
a {
    text-decoration: none;
}

    Remover estilos padrão de listas e links ajuda a ter mais controle sobre a aparência desses elementos.

  3. Scroll suave:

    html {
    scroll-behavior: smooth;
}

    Adiciona um efeito suave ao rolar a página, melhorando a experiência do usuário.

  4. Uso de variáveis e fontes personalizadas:

    @font-face {
    font-family: "DisposableDroidBB-Regular";
    src: url("../fonts/DisposableDroidBB-Regular.ttf") format("woff2"),
         url("../fonts/DisposableDroidBB-Regular.ttf") format("woff");
}

    Utilizar fontes personalizadas adiciona identidade visual à página.

  5. Uso de flexbox:

    .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-links {
    display: flex;
}
.contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    Flexbox é usado para criar layouts flexíveis e responsivos de maneira eficiente.

  6. Transições suaves:

    .nav-links a:hover {
    transition: 0.5s ease;
}
.footer a:hover {
    transition: color 0.3s ease;
}

    As transições suaves melhoram a interação do usuário com elementos interativos.

  7. Uso de :hover para efeitos visuais:

    .nav-links a:hover {
    background-color: #575757;
    transform: scale(1.1);
}
.transparent-button:hover {
    background-color: #747474;
}

  8. Uso de comentários:

    /* Estilização básica do corpo do documento */
/* Estilização da sobreposição para efeitos visuais desejados na imagem de fundo */

    Utilizar comentários para descrever blocos de código CSS ajuda na compreensão e manutenção do código, especialmente quando trabalhado por uma equipe.

  9. Organização lógica do código: O código está bem organizado, com estilos semelhantes agrupados, o que facilita a navegação e a manutenção.

    /* Estilização da barra de navegação */
.navbar { ... }

/* Estilização do logotipo na barra de navegação */
.logo { ... }

/* Estilização geral dos links de navegação */
.nav-links { ... }

/* Estilização do título da seção do título principal da página */
.title h1 { ... }

Ao adotar as Melhores Práticas CSS, você não só melhora a qualidade do seu código, mas também facilita a manutenção e colaboração em equipe. Práticas como a Separação de Arquivos, Comentário Adequado do Código, Uso de Nomes Semânticos e Consistentes, e a Organização Lógica das Regras CSS são fundamentais para garantir um trabalho mais eficiente e produtivo.

Lembre-se, código limpo e organizado não é apenas uma questão de estética, mas de funcionalidade e profissionalismo. Ao seguir essas práticas, você está no caminho certo para se tornar um desenvolvedor Front-end de sucesso, capaz de criar projetos robustos e escaláveis.

Então, da próxima vez que estiver escrevendo CSS, pense além da aparência final da página. Considere também a estrutura e a clareza do seu código. Isso fará toda a diferença na qualidade do seu trabalho e na experiência de quem colaborar com você.

Continue aprendendo e aplicando essas práticas para sempre evoluir como desenvolvedor Front-end!

8. Media Queries

Para finalizarmos o nossos estudos sobre CSS, precisamos saber mais sobre o design responsivo. O design responsivo é a técnica de criar páginas-web que se adaptam a diferentes tamanhos de tela e dispositivos, garantindo que o conteúdo seja exibido de maneira otimizada, independentemente do dispositivo que o usuário esteja utilizando.

Nós já utilizamos de alguns conceitos como Box Models e Layouts Flexíveis durante a construção da nossa página-web, porém só isso ainda não é o suficiente. A principal ideia é que a interface do usuário deve "responder" ao ambiente em que está sendo visualizada, ajustando automaticamente o layout e os elementos da página.

Para isso, nós usamos as Media Queries, que são uma das ferramentas mais poderosas no arsenal do design responsivo. Elas permitem que você aplique estilos diferentes a diferentes dispositivos ou condições de visualização.

Vamos ver como isso funciona na prática:

MediaQueriesExample-pic

Seguimos com o procedimento padrão de adicionar um novo arquivo CSS, chamado responsive.css e do qual contém os nossos Media Queries, e linkar ele no HTML.

Mas como funcionam as Media Queries?

Media Queries utilizam regras condicionais que determinam quando certos estilos CSS devem ser aplicados. Elas são compostas de um tipo de mídia e uma ou mais expressões que verificam as condições da mídia.

Sintaxe Básica:

@media media-type and (condition) {
  /* Estilos CSS aqui */
}

Tipos de Mídia:

  • all: Aplica a todos os dispositivos.
  • print: Aplica durante a impressão.
  • screen: Aplica a telas (monitores, tablets, smartphones).

Condições Comuns:

  • min-width e max-width: Largura mínima e máxima.
  • min-height e max-height: Altura mínima e máxima.
  • orientation: Orientação do dispositivo (portrait ou landscape).

Os tipos de tamanhos mais comuns para Media Queries

Existem vários tipos de tamanhos padrões para as Media Queries, mas as 3 mais comuns são:

  • Telas pequenas: geralmente, telas com menos de 768 pixels de largura são consideradas pequenas. Isso inclui smartphones em modo retrato e alguns tablets em modo paisagem.
/* TELAS PEQUENAS */
@media only screen and (max-width: 767px) {
  /* Estilos CSS aqui */
}
  • Telas médias: geralmente, telas com largura entre 768 e 992 pixels são consideradas médias. Isso inclui tablets em modo paisagem e algumas telas de desktop com resoluções mais baixas.
/* TELAS MÉDIAS */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Estilos CSS aqui */
}
  • Telas grandes: geralmente, telas com largura acima de 1024 pixels são consideradas grandes. Isso inclui telas de desktop com resoluções médias e altas, bem como laptops com telas maiores.
/* TELAS GRANDES */
@media only screen and (min-width: 1024px) {
  /* Estilos CSS aqui */
}

Dito isso, vamos dar responsividade a nossa página-web usando os Media Queries com condições para telas pequenas e médias:

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar {
        display: none;
    }

    .title h1 {
        font-size: 52px;
        padding-top: 80px;
    }

    .title h2 {
        font-size: 32px;
    }

    .title hr {
        width: 50%;
    }

    .title p {
        font-size: 22px;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 25px;
    }

    #about-title {
        font-size: 44px;
        margin-top: 45px;
    }

    .hr1 {
        width: 25%;
    }

    #contact-title {
        font-size: 44px;
    }

    .hr2 {
        width: 25%;
    }

    .contacts p {
        font-size: 27px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .contact-link-button {
        padding-left: 140px;
        padding-right: 140px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .social-icons-container {
        gap: 20px;
        margin-top: -5px;
    }

    .social-icons-container svg {
        max-width: 30px;
    }

    .footer p {
        font-size: 9px;
    }
}

/* Smartphones */
@media screen and (max-width: 767px) {
    .navbar {
        display: none;
    }

    .title h1 {
        font-size: 50px;
        padding-top: 80px;
    }

    .title h2 {
        font-size: 30px;
    }

    .title hr {
        width: 70%;
    }

    .title p {
        font-size: 20px;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 25px;
    }

    #about-title {
        font-size: 40px;
        margin-top: 45px;
    }

    .hr1 {
        width: 35%;
    }

    .section-content {
        flex-direction: column;
        text-align: center;
    }

    .section-content img {
        border-radius: 0px;
        max-width: 50%;
    }

    .section-text {
        padding-left: 0px;
        padding-right: 0px;
    }

    .section-text h2 {
        font-size: 32px;
        margin-left: 0px;
    }
    
    .section-text sub {
        font-size: 18px;
        margin-left: 0px;
    }

    .section-text p {
        font-size: 20px;
        padding-left: 20px;
        padding-right: 40px;
    }

    .section-image {
        padding-top: 30px;
        padding-bottom: 0px;
        margin-left: -20px;
    }

    #section-two .section-content {
        flex-direction: column;
        text-align: center;
    }
    
    #section-two .section-image {
        margin-left: 10px;
    }

    .transparent-button {
        margin: 30px auto 0 auto;
    }

    #contact-title {
        font-size: 40px;
    }

    .hr2 {
        width: 40%;
    }

    .contacts p {
        font-size: 25px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .contact-link-button {
        padding-left: 140px;
        padding-right: 140px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .social-icons-container {
        gap: 15px;
        margin-top: -5px;
    }

    .social-icons-container svg {
        max-width: 28px;
    }

    .footer p {
        font-size: 9px;
    }
}

Agora vamos comparar e ver como ficou a nossa página-web em telas menores:

Modo de tela para dispositivos Desktop 💻

WebPageDesktopView

Modo de tela para Smartphones 📱

WebPageMobileView


É isso aí! Com isso, finalizamos o CSS por aqui.
E também finalizamos o primeiro tópico do nosso roadmap:

1. HTML, CSS, IDEs e Responsividade

AEEEEEEEEEEEEEEEEEEEEEEE!!! 🥳🙌🎈🎉🎉

Vejamos o quanto progredimos:

Status: StatusBarProgress

Enfim, pode não parecer muito, mas demos o grande primeiro passo no caminho
de nos tornarmos desenvolvedores front-end e ainda temos muita coisa a aprender.

Então continuemos em frente, e agora vamos iniciar o nosso segundo tópico do nosso roadmap:

2. JavaScript, Event Handling e AJAX

MikochiGanbatte-gif

Boa sorte programador.
E continue forte nos estudos! 😁👊


JavaScript (JS)

O que é "JavaScript" e para quê serve?

JavaScriptTheArticulations-pic

O JavaScript, também conhecido como JS, é uma linguagem de programação que permite tornar as páginas da web interativas. Se o HTML é o esqueleto de uma página-web, e o CSS são os músculos e a pele, o JavaScript são as articulações que fazem tudo se mexer.

Com JavaScript, você pode criar animações, validar formulários, manipular dados em tempo real, e muito mais. É o que transforma uma página estática em uma experiência muito mais dinâmica e interativa. É o passo final do básico do Front-end!

Note

Ah, e JavaScript não deve ser confundido com Java. São coisas bem diferentes! Enquanto JavaScript é usado principalmente para interatividade na web, Java é uma linguagem de programação de uso geral. A semelhança no nome entre Java e JavaScript é mais uma coincidência histórica do que semelhança técnica. Quando JavaScript foi desenvolvida, havia um grande interesse em torno de Java na época. Para aproveitar essa popularidade, os criadores de JavaScript decidiram incluir “Java” no nome como uma jogada de marketing, bem sacana né?

Agora, para entender melhor como JavaScript funciona com HTML, precisamos falar sobre algo chamado de DOM (Document Object Model).

DOM (Document Object Model)

O DOM, ou Modelo de Objeto de Documento (em português), é uma interface que permite ao JavaScript interagir com o HTML e o CSS da sua página web. Pense no DOM como uma representação estruturada da sua página HTML, onde cada elemento é um "nó" em uma árvore de objetos.

Com o DOM, você pode usar JavaScript para:

  • Selecionar elementos da página
  • Modificar o conteúdo e os estilos dos elementos
  • Adicionar ou remover elementos
  • Escutar e responder a eventos do usuário (como cliques e teclas pressionadas)

Vamos começar com um exemplo básico de como usar JavaScript para manipular o DOM. Primeiro, aprenderemos a selecionar elementos da página.

Selecionando Elementos com JavaScript

Você pode usar métodos como document.getElementById(), document.querySelector(), e document.querySelectorAll() para selecionar elementos específicos da sua página. Aqui está um exemplo básico:

// Selecionar um elemento pelo ID
let mainTitle = document.getElementById("main-title");
console.log(mainTitle);

// Selecionar todos os links de navegação
let navLinks = document.querySelectorAll(".nav-links a");
navLinks.forEach(link => console.log(link));

Neste exemplo acima, selecionamos um elemento pelo seu ID (main-title) e todos os links de navegação usando uma classe (nav-links).

Mas agora você pode estar se perguntando: mas o que exatamente são esses "let", "document", "log", "forEach", "=>" e "="? Pois então, com JavaScript, estaremos trabalhando verdadeiramente com linguagens de programação, ao contrário do HTML e CSS que são linguagens de marcação. Então vamos explorar esses conceitos fundamentais da Lógica de Programação com JavaScript.

Lógica de Programação com JavaScript

O que são "let", "document", "log", "forEach", "=" e "=>"?

Você viu no exemplo anterior que usamos JavaScript para selecionar elementos do DOM e imprimir informações no console. Mas o que exatamente são esses termos como "let", "document", "log", "forEach", "=" e "=>"? Vamos explorar a lógica de programação por trás desses elementos.

Quando trabalhamos com JavaScript, estamos lidando com uma linguagem de programação, diferente do HTML e CSS, que são linguagens de marcação. Isso significa que com JavaScript, trabalhamos com conceitos fundamentais de programação como variáveis, operadores lógicos, funções e métodos. Vamos entender cada um desses conceitos:

Conceitos Fundamentais de JavaScript

Variáveis (let, const, var)

Variáveis são usadas para armazenar dados que podem ser manipulados e usados em nosso código. Aqui estão os tipos de variáveis que usamos em JavaScript:

Palavra-chave Descrição
let Declara uma variável que pode ter seu valor alterado.
const Declara uma variável cujo valor não pode ser alterado após a atribuição inicial.
var Declara uma variável com escopo de função (forma mais antiga e menos recomendada).

Operadores Lógicos e de Atribuição (=, ==, ===, &&, ||)

Operadores são usados para realizar operações em variáveis e valores:

Operador Descrição Exemplo
= Atribui um valor a uma variável. let x = 10;
== Compara dois valores para igualdade (não estrita). x == '10' (true)
=== Compara dois valores para igualdade estrita (tipo e valor). x === 10 (true)
&& Operador lógico AND. true && false (false)
` `

Funções e Métodos (function, =>, log, forEach)

Funções e métodos permitem que organizemos nosso código em blocos reutilizáveis e executemos operações específicas:

Palavra-chave/Operador Descrição Exemplo
function Declara uma função tradicional. function myFunction() {}
=> Declara uma arrow function. const myFunction = () => {}
log Método do objeto console para imprimir mensagens no console. console.log('Hello');
forEach Método de arrays para iterar sobre cada item do array. array.forEach(item => {})

Exemplo de Código: Manipulação do DOM

Agora vamos novamente revisar o exemplo anterior para ver esses conceitos em ação:

// Selecionar um elemento pelo ID
let mainTitle = document.getElementById("main-title");
console.log(mainTitle);

// Selecionar todos os links de navegação
let navLinks = document.querySelectorAll(".nav-links a");
navLinks.forEach(link => console.log(link));

Explicação do Código

  • let mainTitle = document.getElementById("main-title");

    • let: Declara a variável mainTitle.
    • document: Objeto global que representa o documento HTML.
    • getElementById("main-title"): Método para selecionar um elemento pelo ID.

  • console.log(mainTitle);

    • console.log: Método para imprimir informações no console.

  • let navLinks = document.querySelectorAll(".nav-links a");

    • querySelectorAll(".nav-links a"): Método para selecionar todos os elementos que correspondem ao seletor CSS.

  • navLinks.forEach(link => console.log(link));

    • forEach(link => {}): Itera sobre cada link no array navLinks.
    • link => console.log(link): Arrow function que imprime cada link no console.

Tabela de Conceitos de Lógica de Programação em JavaScript

Conceito Descrição
Variáveis Armazenam dados que podem ser usados e manipulados no código. Ex: let x = 10;
Operadores Lógicos e de Atribuição Realizam operações em variáveis e valores. Ex: x == 10
Funções Blocos de código reutilizáveis que executam uma tarefa específica. Ex: function myFunction() {}
Métodos Funções associadas a objetos, como console.log e array.forEach.

Então para entender como usar JavaScript e manipular o DOM para criar páginas-web mais interessantes e interativas, precisamos pegar o jeito com alguns conceitos básicos do JavaScript. Dominar essas coisas vai nos ajudar a escrever códigos mais eficientes e fáceis de manter. Conforme a gente for avançando, vamos ver como usar esses fundamentos em Event Handling e AJAX, para deixar nossas páginas ainda mais dinâmicas e responsivas usando o JavaScript.


👤 Autor
Feito com 🤍 por Juletopi.

About

📚 • Repositório dedicado ao aprendizado de Front-End! Aprendendo HTML, CSS e JavaScript, dominando frameworks como React, Angular ou Vue.js, aprimorando habilidades em design responsivo e muito mais!

Topics

javascript css git html unit-testing front-end roadmap study frontend hosting code-versioning event-handling frameworks front-end-development preprocessors taskrunners front-end-mentor ux-ui-design module-bundlers front-end-roadmap

Resources

Readme

License

MIT license
Activity

Stars

4 stars

Watchers

2 watching

Forks

1 fork
Report repository

Languages