{"id":28209665,"url":"https://github.com/juletopi/front-end_learning_journey","last_synced_at":"2025-07-07T01:33:42.658Z","repository":{"id":213209577,"uuid":"733232676","full_name":"juletopi/Front-End_Learning_Journey","owner":"juletopi","description":"📚 • Repositório dedicado ao aprendizado de Front-End! Aprendendo HTML, CSS e JavaScript, dominando frameworks como React, aprimorando habilidades em design responsivo e muito mais!","archived":false,"fork":false,"pushed_at":"2025-07-04T22:10:00.000Z","size":966,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-04T22:36:07.900Z","etag":null,"topics":["code-versioning","css","event-handling","frameworks","front-end","front-end-development","front-end-mentor","front-end-roadmap","frontend","git","hosting","html","javascript","module-bundlers","preprocessors","roadmap","study","taskrunners","unit-testing","ux-ui-design"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juletopi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-18T21:33:56.000Z","updated_at":"2025-07-04T22:10:04.000Z","dependencies_parsed_at":"2023-12-24T02:20:03.491Z","dependency_job_id":"cb0ae348-23fc-4927-b82c-027a53ce2afc","html_url":"https://github.com/juletopi/Front-End_Learning_Journey","commit_stats":null,"previous_names":["juletopi/front-end_coding_journey"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juletopi/Front-End_Learning_Journey","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juletopi%2FFront-End_Learning_Journey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juletopi%2FFront-End_Learning_Journey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juletopi%2FFront-End_Learning_Journey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juletopi%2FFront-End_Learning_Journey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juletopi","download_url":"https://codeload.github.com/juletopi/Front-End_Learning_Journey/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juletopi%2FFront-End_Learning_Journey/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263997851,"owners_count":23541744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-versioning","css","event-handling","frameworks","front-end","front-end-development","front-end-mentor","front-end-roadmap","frontend","git","hosting","html","javascript","module-bundlers","preprocessors","roadmap","study","taskrunners","unit-testing","ux-ui-design"],"created_at":"2025-05-17T16:13:00.074Z","updated_at":"2025-07-07T01:33:42.644Z","avatar_url":"https://github.com/juletopi.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n❗ ➤ References used in this Repository:\n🔗 • https://github.com/piyushsuthar/github-readme-quotes\n🔗 • https://github.com/kyechan99/capsule-render\n🔗 • https://github.com/DenverCoder1/custom-icon-badges\n🔗 • https://onlinetools.com/image/blur-image\n🔗 • https://shields.io\n🔗 • https://emoji.gg\n🔗 • https://getemoji.com\n--\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/juletopi/Front-End_Learning_Journey\" alt=\"Liscence-badge\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003c!-- PRESENTATION --\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"\"\u003e\n        \u003cimg src=\"https://github.com/juletopi/Front-End_Coding_Journey/assets/76459155/f25e08e7-0f00-41b7-9276-530ce8eeb861\" alt=\"FrontEndJourney-pic\" width=\"230px\" title=\"Repositório de Front-End Coding Journey\"\u003e\n    \u003c/a\u003e\n    \u003ch2 align=\"center\"\u003eFront-End Coding Journey 🚀\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n \n  • Este é um repositório com o conteúdo dedicado ao meu aprendizado pessoal sobre Front-End. \\\n  Aprendendo **HTML**, **CSS** e **JavaScript**, dominando frameworks como **React**, **Angular** e **Vue.js**, \\\n  e aprimorando habilidades em **design responsivo**, **versionamento de código**, **perfomançe** e **otimização**.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://github.com/juletopi/Front-End_Learning_Journey/blob/main/CONTRIBUTING.md\"\u003eComo contribuir\u003c/a\u003e \u0026#xa0; • \u0026#xa0;\n\u003ca href=\"https://github.com/juletopi/Front-End_Learning_Journey/issues\"\u003eIssues\u003c/a\u003e \u0026#xa0; • \u0026#xa0;\n\u003ca href=\"https://github.com/juletopi/Front-End_Learning_Journey/discussions\"\u003eDiscussions\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=dddddd\u0026height=3\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n \n\u003c!-- REPOSITORY PROGRESS --\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n| \u003ch3 align=\"center\"\u003e⚠️ AVISO\u003c/h3\u003e |\n|:---------------------------------|\n| \u003cp\u003e\u003cdiv align=\"center\"\u003eTanto o aprendizado quanto a documentação \u003cbr\u003e deste repositório está **EM PROGRESSO** \u003cbr\u003e\u003cbr\u003e **Status:** \u003cimg align=\"center\" src=\"https://geps.dev/progress/12?dangerColor=ed4242\u0026warningColor=ef934a\u0026successColor=82cf5e\" alt=\"StatusBarProgress\" /\u003e\u003c/p\u003e |\n\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003c!-- SUMMARY --\u003e\n\n\u003ch2 align=\"center\"\u003eSumário 🧾\u003c/h2\u003e\n\n### 🔗 Periféricos\n- [✨ O que é \"Front-End\"?](#mas-o-que-diaxo-é-front-end-)\n- [🛤️ Roadmap de Front-End (Título)](#%EF%B8%8F-roadmap-de-front-end)\n- [📌 Roadmap de Front-End (Extras)](#extras)\n- [👤 Autor](#-autor)\n\n---\n\n### 🗺️ Tópicos (Roadmap)\n#### Tópicos Principais\n1. [📄 HTML, CSS, IDEs e Responsividade](#1-html-css-ides-e-responsividade)\n2. [📝 JavaScript, Event Handling e AJAX](#2-javascript-event-handling-e-ajax)\n3. [📦 Frameworks CSS](#3-frameworks-css)\n4. [🛠️ Pré-processadores CSS](#4-pré-processadores-css)\n5. [⚙️ Frameworks JavaScript](#5-frameworks-javascript)\n6. [🔄 Versionamento de Código](#6-versionamento-de-código)\n7. [🌐 Hospedagem de Web-páginas](#7-hospedagem-de-web-páginas)\n8. [⚡ Task Runners e Module Bundlers](#8-task-runners-e-module-bundlers)\n9. [🔍 Unit Testing (Testes Front-End)](#9-unit-testing-testes-front-end)\n#### Tópicos Extras\n1. [🎨 UI \u0026 UX Design](#i-ui--ux-design)\n2. [🔐 Segurança Front-End](#ii-segurança-front-end)\n3. [🧰 Ferramentas Auxiliares (Uso de IAs, Photoshop, Figma, etc.)](#iii-ferramentas-auxiliares-uso-de-ias-photoshop-figma-etc)\n\n---\n\n### 📚 Tópicos de Estudo\n#### 1. HTML, CSS, IDEs e Responsividade\n- [🖥️ IDEs (Integrated Development Environment)](#ides-integrated-development-environment)\n  - [💻 Instalando o VSCode](#instalando-o-vscode)\n- [🌐 HTML (HyperText Markup Language)](#html-hypertext-markup-language)\n  - [🔖 As tags de HTML](#as-tags-de-html)\n  - [🔍 Estrutura Semântica](#estrutura-semântica-o-que-é-isso)\n  - [📝 Começando com HTML](#começando-com-html)\n- [🎨 CSS (Cascading Style Sheets)](#css-cascading-style-sheets)\n  - [📂 Estrutura de Diretório](#estrutura-de-diretório)\n  - [📘 Guia de CSS](#guia-de-css)\n  - [🔗 Linkando CSS com HTML](#1-linkando-css-com-html)\n  - [🎯 Seletores CSS](#2-seletores-css)\n  - [⚙️ Propriedades CSS](#3-propriedades-css)\n  - [🔧 Modificando o nosso arquivo HTML com elementos CSS](#modificando-o-nosso-arquivo-html-com-elementos-css)\n  - [🗃️ Box Model](#4-box-model)\n  - [📐 Layouts CSS](#5-layouts-css)\n  - [💫 Transições e Animações CSS](#6-transições-e-animações-css)\n  - [🌟 Melhores Práticas CSS](#7-melhores-práticas-css)\n  - [📱 Media Queries](#8-media-queries)\n#### 2. JavaScript, Event Handling e AJAX\n- [📜 JavaScript (JS)](#javascript-js)\n  - [📄 DOM (Document Object Model)](#dom-document-object-model)\n  - [🔣 Lógica de Programação com JavaScript](#lógica-de-programação-com-javascript)\n\n\u003cbr\u003e\n\n\u003c!-- WHAT IS FRONT-END --\u003e\n\n## Mas o que diaxo é \"Front-End\"? 🤔\n\n\u003cdiv align=\"left\"\u003e\n  \n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/d7bdc013-292e-4f81-82b6-c2755a7d736f\" alt=\"WhatIsFrontEnd-pic\" width=\"230px\"\u003e\n\nO \"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!\n\nEntã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.\n\nÉ onde a mágica acontece, meu caro! ✨\n\n\u003cbr\u003e\n\nAgora abaixo vou apresentar o meu **roadmap de Front-End!** 🗺️\n\n\u003cbr\u003e\n\n\u003cimg align=\"left\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/a5a28085-4f2c-475d-b991-3e9e19a0b28c\" alt=\"RoadmapDeco-pic\" width=\"150px\"\u003e\n\nA 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.\n\nDepois, 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.\n\nAo 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.\n\nE 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!\n\nNo fim da jornada teremos um grande arsenal de conhecimento e estaremos prontos para encarar qualquer desafio nesse mundo selvagem da programação Front-End 🚀✨\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n\u003c!-- ROAD MAP --\u003e\n  \n## 🗺️ Roadmap de Front-End:\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"\"\u003e\n        \u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/8384e052-4aff-4fdf-b894-9783120e98f4\" alt=\"FrontEndRoadmap-pic\" width=\"830px\" title=\"Meu Front-End Roadmap\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"\"\u003e\n        \u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/e15cb7fc-b30d-4a47-b9d2-8ac61f5b7062\" alt=\"FrontEndRoadmap2-pic\" width=\"830px\" title=\"Meu Front-End Roadmap (Parte 2)\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c!-- ROAD MAP - TOPICS --\u003e\n\n\u003cdiv align=\"left\"\u003e\n\n## 1. HTML, CSS, IDEs e Responsividade\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/c18ffcd9-a6d5-42f7-be9c-bd1867a4c13c\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### a. IDEs\n- **Descrição:**\n  - Aprender o que são \"IDEs\" e como utilizá-las para programar.\n- **Quando Aprender:**\n  - Introduzir conceitos de IDEs ao começar a escrever código.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=00BF63\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/afca6fb2-8dde-4b39-b3e1-51e87203fa74\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### b. HTML5 e Estrutura Semântica\n- **Descrição:**\n  - Utilizar as tags do HTML5 de maneira semântica, atribuindo significado correto aos elementos da página para melhorar acessibilidade e SEO.\n- **Quando Aprender:**\n  - Desde o início do aprendizado de Front-End.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=FF6D00\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/3eda3516-906f-4694-95f3-f62387360c40\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### c. Estilização com CSS3\n- **Descrição:**\n  - Utilizar os recursos do CSS3 para estilizar páginas web, como gradientes, sombras, transições e animações.\n- **Quando Aprender:**\n  - Integrado ao aprendizado inicial de HTML e CSS.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=059BE4\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/e03d34f4-cf7b-4aac-a86a-a7d9b3d9e912\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### d. Responsividade e Design Mobile\n- **Descrição:**\n  - Desenvolver layouts que se ajustem a diferentes tamanhos de tela, priorizando o design para dispositivos móveis.\n- **Quando Aprender:**\n  - Integrado ao aprendizado de CSS, à medida que se explora o design responsivo.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=BCBBBB\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 2. JavaScript, Event Handling e AJAX\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/5215e165-bafe-45a1-9d2c-ecf60836d6e6\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### a. Manipulação do DOM\n- **Descrição:**\n  - Interagir dinamicamente com a estrutura da página utilizando JavaScript para modificar, adicionar ou remover elementos.\n- **Quando Aprender:**\n  - Integrado ao aprendizado de JavaScript básico.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=F6DF1E\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/4a99b4ba-a761-447d-80ef-37204c69efc8\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### b. Event Handling\n- **Descrição:**\n  - Trabalhar com eventos do usuário, como cliques e teclas pressionadas, para criar interações dinâmicas.\n- **Quando Aprender:**\n  - Continuação do aprendizado de JavaScript, após a manipulação do DOM.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=6CB4EC\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/6ae0d99f-86b4-491e-8a11-23d80968d641\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### c. AJAX e Requisições Assíncronas\n- **Descrição:**\n  - Enviar e receber dados do servidor de forma assíncrona, atualizando partes específicas da página sem recarregar completamente.\n- **Quando Aprender:**\n  - Introduzir após uma compreensão sólida de JavaScript.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=3ED63D\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 3. Frameworks CSS\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/37fe3705-c24d-428e-9491-d98ddfa79a50\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n- **Descrição:**\n  - Aprender frameworks CSS como Bootstrap, Foundation ou Tailwind CSS para agilizar o desenvolvimento de estilos e layouts.\n- **Quando Aprender:**\n  - Após dominar os conceitos básicos de HTML e CSS.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=9D64FE\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 4. Pré-processadores CSS\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/2bd4fc2e-befd-4d92-b4fe-6da563167c5c\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### a. Sass ou Less\n- **Descrição:**\n  - Utilizar pré-processadores CSS para introduzir variáveis, funções e outros recursos que facilitam a manutenção e organização do código.\n- **Quando Aprender:**\n  - Após familiaridade com CSS básico.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=DB92B6\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 5. Frameworks JavaScript\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/3393403d-426c-4189-9932-af57cbe30b79\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n- **Descrição:**\n  - Aprender frameworks JavaScript populares como React, Angular ou Vue.js para construir interfaces reativas e complexas.\n  - Aprender frameworks de Package Managing como yarn e npm, para simplificam o processo de obtenção, atualização e remoção de pacotes.\n- **Quando Aprender:**\n  - Após uma base sólida em HTML, CSS e JavaScript básico.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=53C1DE\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 6. Versionamento de Código\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/6cbcc77b-9ff4-4c59-be08-8e431064e7f7\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### a. Git e GitHub\n- **Descrição:**\n  - Utilizar sistemas de controle de versão para rastrear alterações no código, colaborar com outros desenvolvedores e gerenciar versões de software.\n- **Quando Aprender:**\n  - Introduzir ao trabalhar em projetos colaborativos.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=959595\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 7. Hospedagem de Web-páginas\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/ac1bb7eb-27fc-4e73-af1f-33c57a079171\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n- **Descrição:**\n  - Compreender diferentes opções de hospedagem, incluindo serviços como GitHub Pages, Netlify ou Vercel.\n- **Quando Aprender:**\n  - Ao começar a publicar projetos online.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=53C1DE\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 8. Task Runners e Module Bundlers\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/66676d86-01ec-4077-a2c5-fa6de5dbb965\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### a. Gulp, Webpack ou Parcel\n- **Descrição:**\n  - Automatizar tarefas repetitivas, como minificação de arquivos, e modularizar o código para melhorar a eficiência do desenvolvimento.\n- **Quando Aprender:**\n  - À medida que se aprofunda no desenvolvimento e busca otimização.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=4b61d7\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 9. Unit Testing (Testes Front-End)\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/3a63a4d5-4d95-488e-8914-f24452fab7e5\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### a. Unit Testing com Jest ou Mocha\n- **Descrição:**\n  - Criar testes automatizados para verificar unidades isoladas de código.\n- **Quando Aprender:**\n  - Após construir uma base sólida em JavaScript e frameworks.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=8D6647\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/ce492244-6d02-4265-b6ae-9a89d2cda278\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### b. Testes de Integração\n- **Descrição:**\n  - Testar a interação entre diferentes partes do sistema para garantir o funcionamento correto.\n- **Quando Aprender:**\n  - Conforme avança em projetos mais complexos.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=30B2B6\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Extras\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/432bf519-0533-41ed-951b-a6078b989230\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### I. UI \u0026 UX Design\n\n- **Descrição:**\n  - Compreender os princípios de design de interface e experiência do usuário para criar experiências web intuitivas e agradáveis.\n- **Quando Aprender:**\n  - Ao explorar o design de interfaces.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=AA40D8\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/c9fd83e7-b76b-4741-8e30-59dfc2b3c652\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### II. Segurança Front-End\n\n- **Descrição:**\n  - Implementar práticas de segurança em aplicações web e compreender conceitos como Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF).\n- **Quando Aprender:**\n  - Introduzir quando começar a lidar com interações mais avançadas.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=81DF36\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/f5210104-2b40-472c-8fad-d0b32e0eb8aa\" alt=\"TopicDeco-pic\" width=\"150px\"\u003e\n\n### III. Ferramentas Auxiliares (Uso de IAs, Photoshop, Figma, etc.)\n\n- **Descrição:**\n  - Familiarizar-se com ferramentas de design e prototipagem para auxiliar no processo de criação de interfaces e código.\n- **Quando Aprender:**\n  - Conforme você avança no design e na implementação de interfaces.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=100% align=\"center\" src=\"https://capsule-render.vercel.app/api?type=rect\u0026color=15A17F\u0026height=2\u0026section=header\u0026%20render\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cstrong\u003e\u003cdiv align=\"center\"\u003eCom os tópicos do nosso roadmap delineados, estamos prontos para começar a aprender. \u003cbr\u003e\n        Ao longo desta jornada, exploraremos cada aspecto do Front-End, \u003cbr\u003e\n        construindo uma base sólida de conhecimento. \u003cbr\u003e\u003cbr\u003e\n        Então, mãos à obra e vamos avançar nos estudos! 😁👊\u003c/strong\u003e\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://giphy.com/stickers/sparkle-sojusona-kitju-lq9gRvrMK0v1tSnwAk\"\u003e\n          \u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMzA3aXk4YjI0cXk0bGIxZXZpcjZjdHQyZWduOWliM2h3ZWY5Mzh6bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/lq9gRvrMK0v1tSnwAk/giphy.gif\" alt=\"SojusonaSparkle-gif\" width=\"180px\"\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n----\n\n\u003cbr\u003e\n\n\u003c!-- 1. HTML, CSS \u0026 IDEs --\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://git.io/typing-svg\"\u003e\n    \u003cimg src=\"https://readme-typing-svg.demolab.com?font=Kanit\u0026size=40\u0026duration=1\u0026pause=99999\u0026color=e16d17\u0026center=true\u0026vCenter=true\u0026repeat=false\u0026width=620\u0026height=60\u0026lines=1.+HTML,+%20CSS+e+IDEs\" alt=\"TopicOneTypingSVG\" title=\"Tópico nº1: HTML, CSS \u0026 IDEs\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## IDEs (Integrated Development Environment)\n\n### O que é uma \"IDE\", e para quê serve?\n\n\u003cdiv align=\"left\"\u003e\n  \n\u003cimg align=\"right\" src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaGNsc2d2cHN3NGpuZGNsdHJkZjdiNGtqODB5aXhydmoycmdpcWkwcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/26tn33aiTi1jkl6H6/giphy.gif\" alt=\"CascadingProgrammingSymbols-gif\" width=\"223px\" height=\"182px\"\u003e\n\nAs **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. \u003cbr\u003e\u003cbr\u003e 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.\n\nDentre as IDEs populares, destaca-se o **Visual Studio Code** (VSCode). \n\n\u003cbr\u003e\n\n\u003cimg align=\"left\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/16ab1093-fbaf-4673-a8f9-3a839b5d820f\" alt=\"VSCodeIDE\" width=\"186px\"\u003e\n\nO 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. \u003cbr\u003e\u003cbr\u003eVai ser nosso parceirão nessa jornada de aprender sobre Front-End! 😎✨\n\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Instalando o VSCode\n\n### Windows\n\n1. **Download:**\n   - Acesse o [site oficial do VSCode](https://code.visualstudio.com/).\n   - Clique em \"Download for Windows\".\n\n2. **Instalação:**\n   - Execute o instalador baixado.\n   - Siga as instruções do assistente de instalação.\n\n3. **Executar o VSCode:**\n   - Após a instalação, abra o VSCode clicando no ícone no desktop ou no menu Iniciar.\n\n### macOS\n\n1. **Download:**\n   - Acesse o [site oficial do VSCode](https://code.visualstudio.com/).\n   - Clique em \"Download for macOS\".\n\n2. **Instalação:**\n   - Abra o arquivo baixado (`dmg`).\n   - Arraste o ícone do VSCode para a pasta \"Applications\".\n\n3. **Executar o VSCode:**\n   - Abra o Launchpad e clique no ícone do VSCode.\n\n### Linux (Ubuntu/Debian)\n\n1. **Download:**\n   - Abra o terminal e execute os seguintes comandos:\n     ```bash\n     sudo apt update\n     sudo apt install code\n     ```\n\n2. **Executar o VSCode:**\n   - Abra o VSCode digitando `code` no terminal ou procurando no menu de aplicativos.\n\n\u003cbr\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cstrong\u003e\u003cdiv align=\"center\"\u003eEeee é isso aí, você tem o VSCode instalado!\u003cbr\u003e\u003cbr\u003e Agora você tá pronto para começar a se aventurar no mundo do Front-End! 🚀✨\u003c/strong\u003e\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://giphy.com/stickers/simpsons-ok-3o7529NY5tIrfPBwzu\"\u003e\n          \u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHhsNWoyazFleWM0eDI3eWUybDY4OXF1aHp5cGMweXoxOW50eXNlayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/3o7529NY5tIrfPBwzu/giphy.gif\" alt=\"PrinciapalSkinnerThumbsUp-gif\" width=\"180px\"\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n----\n\n\u003cbr\u003e\n\n## HTML (HyperText Markup Language)\n\n### O que é \"HTML\", e para quê serve?\n\n\u003cdiv align=\"left\"\u003e\n  \n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/4ef43246-e8bc-4a1d-9959-c3e4183180fd\" alt=\"HTMLTheEsqueleton-pic\" width=\"150px\"\u003e\n\nO **HTML**, ou *Linguagem de Marcação de Hipertexto* (em português), é tipo o \"esqueleto\" das páginas da web.\n\nTodas 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.\n\nEntã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.\n\n\u003c/div\u003e\n\n\u003e [!NOTE]\\\n\u003e 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?\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## As tags de HTML\n\n\u003cdiv align=\"left\"\u003e\n\nOkay, lembra das \"tags\"? \n\n\u003e *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.*\n\nEntão, pra começar, vamos nos aprofundar nisso, as \"tags\".\n\nNuma estrutura em HTML, se utilizam tags de abertura `\u003chtml\u003e` e fechamento `\u003c/html\u003e` para organizar o código e dizer ao navegador o que cada parte da página está fazendo ali.\n\nPor exemplo, tem a `\u003cheader\u003e` que é como o \"Cabeçalho\", onde você põe as coisas importantes da sua página. Depois, tem a `\u003cnav\u003e`, que é tipo a \"Navegação\", onde você coloca os links para as outras partes. Ah, e não podemos esquecer da `\u003cfooter\u003e`, o \"Rodapé\", para os extras no final.\n\nEis aqui uma lista de algumas das tags existentes para o HTML e o que elas fazem:\n\n| Tag               | Descrição                                                     |\n| ----------------- | ------------------------------------------------------------- |\n| `\u003chtml\u003e`          | Define o início e o fim de um documento HTML.                  |\n| `\u003chead\u003e`          | Fornece informações sobre o documento HTML.                   |\n| `\u003ctitle\u003e`         | Define o título do documento HTML.                             |\n| `\u003cbase\u003e`          | Especifica o URL base/target para todos os links na página.    |\n| `\u003clink\u003e`          | Define a relação entre o documento atual e recursos externos. |\n| `\u003cmeta\u003e`          | Define metadados que fornecem informações sobre o documento.   |\n| `\u003cstyle\u003e`         | Define estilos CSS internos.                                   |\n| `\u003cscript\u003e`        | Define scripts incorporados ou vincula recursos externos.      |\n| `\u003cnoscript\u003e`      | Oferece conteúdo alternativo se o script não for suportado.    |\n| `\u003cbody\u003e`          | Contém o conteúdo visível do documento HTML.                   |\n| `\u003carticle\u003e`       | Define um conteúdo independente que faz sentido por si só.     |\n| `\u003csection\u003e`       | Define uma seção em um documento.                               |\n| `\u003cnav\u003e`           | Define uma seção de navegação.                                  |\n| `\u003caside\u003e`         | Define conteúdo que é tangencial ao conteúdo da página.        |\n| `\u003ch1\u003e to \u003ch6\u003e`    | Define cabeçalhos de diferentes níveis.                        |\n| `\u003cheader\u003e`        | Define um cabeçalho para um documento ou seção.                |\n| `\u003cfooter\u003e`        | Define um rodapé para um documento ou seção.                   |\n| `\u003caddress\u003e`       | Define informações de contato do autor/proprietário.          |\n| `\u003cmain\u003e`          | Define o conteúdo principal em um documento.                   |\n| `\u003cp\u003e`             | Define um parágrafo.                                           |\n| `\u003chr\u003e`            | Cria uma linha horizontal.                                     |\n| `\u003cpre\u003e`           | Define texto pré-formatado.                                    |\n| `\u003cblockquote\u003e`    | Define uma seção que é citada de outra fonte.                 |\n| `\u003col\u003e`            | Define uma lista ordenada.                                      |\n| `\u003cul\u003e`            | Define uma lista não ordenada.                                 |\n| `\u003cli\u003e`            | Define um item de lista.                                       |\n| `\u003cdl\u003e`            | Define uma lista de descrição.                                 |\n| `\u003cdt\u003e`            | Define um termo/entrada em uma lista de descrição.             |\n| `\u003cdd\u003e`            | Define uma descrição em uma lista de descrição.                |\n| `\u003cfigure\u003e`        | Define qualquer conteúdo que está referenciado no texto.      |\n| `\u003cfigcaption\u003e`    | Define uma legenda para um elemento `\u003cfigure\u003e`.                |\n| `\u003cdiv\u003e`           | Define uma divisão ou seção genérica.                          |\n| `\u003ca\u003e`             | Define um hyperlink.                                           |\n| `\u003cem\u003e`            | Define texto enfatizado.                                       |\n| `\u003cstrong\u003e`        | Define texto importante em negrito.                            |\n| `\u003csmall\u003e`         | Define texto menor.                                           |\n| `\u003cs\u003e`             | Define texto que não é mais preciso ou relevante.             |\n| `\u003ccite\u003e`          | Define o título de uma obra citada.                           |\n| `\u003cq\u003e`             | Define uma citação curta.                                      |\n| `\u003cabbr\u003e`          | Define uma abreviação ou acrônimo.                            |\n| `\u003caddress\u003e`       | Define informações de contato do autor/proprietário.          |\n| `\u003cbdo\u003e`           | Define a direção do texto.                                     |\n| `\u003cbdi\u003e`           | Isola um texto que pode ser formatado de maneira diferente.    |\n| `\u003cspan\u003e`          | Define um trecho de texto em linha.                            |\n| `\u003cbr\u003e`            | Insere uma quebra de linha.                                    |\n| `\u003cwbr\u003e`           | Define uma possível quebra de linha.                           |\n| `\u003ctime\u003e`          | Define uma data/hora específica.                               |\n| `\u003cmark\u003e`          | Define texto marcado ou realçado.                              |\n| `\u003cprogress\u003e`      | Representa o progresso de uma tarefa.                          |\n| `\u003cmeter\u003e`         | Representa um valor escalar dentro de um intervalo conhecido.  |\n| `\u003ccode\u003e`          | Define um trecho de código.                                    |\n| `\u003cvar\u003e`           | Define uma variável em programação.                            |\n| `\u003ckbd\u003e`           | Define a entrada de teclado.                                   |\n| `\u003csamp\u003e`          | Define saída de amostra de um programa de computador.         |\n| `\u003csub\u003e`           | Define texto subscrito.                                       |\n| `\u003csup\u003e`           | Define texto sobrescrito.                                     |\n| `\u003ci\u003e`             | Define texto em itálico.                                      |\n| `\u003cb\u003e`             | Define texto em negrito.                                      |\n| `\u003cu\u003e`             | Define texto sublinhado.                                      |\n| `\u003cruby\u003e`          | Define uma anotação ruby para pronúncia ou tradução.          |\n| `\u003crt\u003e`            | Define texto de ruby.                                         |\n| `\u003crp\u003e`            | Define o que mostrar em navegadores que não suportam ruby.     |\n| `\u003cbr\u003e`            | Insere uma quebra de linha.                                    |\n| `\u003ca\u003e`             | Define um hyperlink.                                           |\n| `\u003cimg\u003e`           | Define uma imagem.                                             |\n| `\u003cmap\u003e`           | Define uma imagem com áreas clicáveis.                         |\n| `\u003carea\u003e`          | Define uma área dentro de um mapa de imagem.                   |\n| `\u003caudio\u003e`         | Define conteúdo sonoro, como música ou efeitos sonoros.        |\n| `\u003csource\u003e`        | Define fontes de mídia para elementos `\u003caudio\u003e` e `\u003cvideo\u003e`.   |\n| `\u003cvideo\u003e`         | Define conteúdo de vídeo.                                      |\n| `\u003ctrack\u003e`         | Define faixas de texto para elementos `\u003caudio\u003e` e `\u003cvideo\u003e`.   |\n| `\u003ctable\u003e`         | Define uma tabela.                                             |\n| `\u003ccaption\u003e`       | Define o título da tabela.                                     |\n| `\u003ccolgroup\u003e`      | Define um grupo de colunas em uma tabela.                      |\n| `\u003ccol\u003e`           | Define propriedades específicas da coluna dentro de `\u003ccolgroup\u003e`.|\n| `\u003cthead\u003e`         | Define o cabeçalho de uma tabela.                              |\n| `\u003ctbody\u003e`         | Define o corpo de uma tabela.                                  |\n| `\u003ctfoot\u003e`         | Define o rodapé de uma tabela.                                 |\n| `\u003ctr\u003e`            | Define uma linha em uma tabela.                                |\n| `\u003cth\u003e`            | Define um cabeçalho de célula em uma tabela.                   |\n| `\u003ctd\u003e`            | Define uma célula em uma tabela.                               |\n| `\u003cform\u003e`          | Define um formulário HTML.                                     |\n| `\u003cinput\u003e`         | Define um campo de entrada de dados.                           |\n| `\u003cbutton\u003e`        | Define um botão clicável.                                     |\n| `\u003cselect\u003e`        | Define uma lista suspensa.                                     |\n| `\u003coption\u003e`        | Define uma opção em uma lista suspensa.                        |\n| `\u003clabel\u003e`         | Define uma etiqueta para um elemento `\u003cinput\u003e`.               |\n| `\u003cfieldset\u003e`      | Define um conjunto de campos de formulário.                    |\n| `\u003clegend\u003e`        | Define uma legenda para um elemento `\u003cfieldset\u003e`.              |\n| `\u003ctextarea\u003e`      | Define uma área de texto editável.                             |\n| `\u003coutput\u003e`        | Define o resultado de um cálculo ou a saída de um usuário.     |\n| `\u003cdatalist\u003e`      | Define uma lista de opções pré-definidas para `\u003cinput\u003e`        |\n| `\u003ckeygen\u003e`        | Define um gerador de pares de chave (criptografia).            |\n| `\u003cprogress\u003e`      | Representa o progresso de uma tarefa.                          |\n| `\u003cmeter\u003e`         | Representa um valor escalar dentro de um intervalo conhecido.  |\n| `\u003cdetails\u003e`       | Define um widget de controle que revela ou oculta um elemento. |\n| `\u003csummary\u003e`       | Define um cabeçalho visível para um elemento `\u003cdetails\u003e`.      |\n| `\u003cmenu\u003e`          | Define um menu de contexto ou uma lista de comandos.          |\n\nEita, complicou! São muitas tags pra usar, será que vou precisar aprender TODAS??? 😰😰😰\n\nNah, só algumas, não esquenta. Lembre-se, elas só são utilizadas quando necessárias. \u003cbr\u003e\nA 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.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Estrutura Semântica? O que é isso?\n\n\u003cdiv align=\"left\"\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/01e11947-7eaf-4a37-9c52-5c5af52315b3\"  alt=\"NotSemanticVSSemantic-pic\"  width=\"360px\" height=\"420px\"\u003e\n\nCriar 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 `\u003cdiv\u003e` para tudo (acredite, dá pra fazer uma página inteira usando só uma tag) e estilizar com CSS, usar tags como `\u003cheader\u003e`, `\u003cnav\u003e`, `\u003csection\u003e`, etc., é melhor por alguns motivos:\n\n1. **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.\n\n2. **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.\n\n3. **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.\n\nPor exemplo, ao invés de usar várias `\u003cdiv\u003e` para o cabeçalho, a navegação e o rodapé, você pode usar `\u003cheader\u003e`, `\u003cnav\u003e`, e `\u003cfooter\u003e`, 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!\n\nAgora, como faço tudo isso?\n\nPra começar, dentro do VSCode ao começar a digitar o doctype HTML `\u003c!DOCTYPE html\u003e`, 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 `\u003chtml\u003e`, `\u003chead\u003e`, `\u003cmeta\u003e`, `\u003ctitle\u003e` e `\u003cbody\u003e`, economizando tempo na criação da estrutura inicial do documento HTML. \n\nEla vai ficar mais ou menos assim:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nExplicando as tags...\n\n`\u003c!DOCTYPE html\u003e`: 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.\n\n`\u003chtml\u003e`: Esta tag envolve todo o conteúdo da página e define o início e o fim do documento HTML.\n\n`\u003chead\u003e`: 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.\n\n`\u003cmeta charset=\"UTF-8\"\u003e`: Define a codificação de caracteres utilizada na página como UTF-8, que suporta uma ampla gama de caracteres.\n\n`\u003ctitle\u003e`: Define o título da página, que aparece na aba do navegador ou na barra de título da janela.\n\n`\u003cbody\u003e`: Esta tag contém todo o conteúdo visível da página, como texto, imagens, vídeos e outros elementos.\n\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cstrong\u003e\u003cdiv align=\"center\"\u003eEssa funcionalidade é bem útil para começar a trabalhar em um novo projeto HTML,\u003cbr\u003e garantindo uma estrutura semântica básica com elementos essenciais já configurados. \u003cbr\u003e\u003cbr\u003eTente você fazer o mesmo!\u003c/strong\u003e\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://giphy.com/stickers/crocodile-chubby-hoang-9EHZ8R3cCOfUvWw2dr\"\u003e\n          \u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcXB3YzhtYmtiYWk2OWlrM3c0dmtwODNzNm0wNGZ5MXZraWxxZTBvOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/9EHZ8R3cCOfUvWw2dr/giphy.gif\" alt=\"ChubbyCrocodileHoangWorking-gif\" width=\"180px\"\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Começando com HTML\n\n\u003cdiv align=\"left\"\u003e\n\nOkay, agora você deve ter algo mais ou  menos assim:\n\n\u003cimg align=\"center\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/940ab038-d0e7-47a5-b424-805bc99e377a\" alt=\"HTMLTheBeggining-pic\" width=\"650px\"\u003e\u003cbr\u003e\n\nAgora vamos dar uma implementada com certas tags muito comumente utilizadas em páginas de HTML...\n\n\u003cimg align=\"center\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/0cfec9d3-9e75-4682-8d53-b2b48ab2daed\" alt=\"HTMLImplementingTheCode-pic\" width=\"650px\"\u003e\u003cbr\u003e\n\nNessa estrutura ([*Simple_HTML_Structure.html*](https://github.com/juletopi/Front-End_Learning_Journey/blob/main/Simple_HTML_Structure.html)), incluimos um `\u003cheader\u003e` com um `\u003cnav\u003e` contendo uma lista de links, duas seções `\u003csection\u003e` com títulos `\u003ch2\u003e` e parágrafos `\u003cp\u003e`, e um `\u003cfooter\u003e` com informações de direitos autorais.\n\nAh, mas como faço pra visualizar a minha página em HTML? Tem como?\n\nTem sim! Vou mostrar duas opções:\n\nA 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:\n\n1. Abra o VSCode e clique no ícone de extensões na barra lateral esquerda (ou pressione `Ctrl+Shift+X`).\n2. Na barra de pesquisa, digite \"Live Server\" e pressione Enter.\n3. Clique em \"Install\" na extensão \"Live Server\" oferecida pela \"ritwickdey\" para instalá-la.\n\nDepois de instalado, você pode visualizar sua página HTML com o Live Server seguindo estes passos:\n\n1. Abra seu arquivo HTML no VSCode.\n2. Clique com o botão direito do mouse no arquivo HTML.\n3. Selecione a opção \"Open with Live Server\".\n\nO 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.\n\n\u003cimg align=\"center\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/f26def5c-df9a-451c-8f21-d4e2843c54dd\" alt=\"MyHTMLPage-pic\" width=\"650px\"\u003e\u003cbr\u003e\n\nE a segunda opção é utilizar esta página aqui: [W3Schools Tryit Editor](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default)\n\nEste é 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.\n\n\u003cimg align=\"center\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/be005c50-664a-4ef2-9168-303248d5ee1f\" alt=\"MyHTMLPageOnEditor-pic\" width=\"650px\"\u003e\u003cbr\u003e\n\nEntããã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 `\u003cimg src=\"\"\u003e`, ou `\u003ca href=\"\"\u003e`.\n\n\u003cdiv align=\"center\"\u003e\n  Veja abaixo mais exemplos comuns:\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/81aaeda9-7fc0-4fce-8bc8-6ac6d9d38042\" alt=\"CommonHTMLElements-pic\" width=\"650px\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eEste é um título da página web\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Títulos --\u003e\n    \u003ch1\u003eEste é um título de nível 1\u003c/h1\u003e\n    \u003ch2\u003eEste é um título de nível 2\u003c/h2\u003e\n    \u003ch3\u003eEste é um título de nível 3\u003c/h3\u003e\n    \u003ch4\u003eEste é um título de nível 4\u003c/h4\u003e\n    \u003ch5\u003eEste é um título de nível 5\u003c/h5\u003e\n    \u003ch6\u003eEste é um título de nível 6\u003c/h6\u003e\n\n    \u003c!-- Parágrafos --\u003e\n    \u003cp\u003eEste é um parágrafo de texto simples.\u003c/p\u003e\n\n    \u003c!-- Listas --\u003e\n    \u003ch2\u003eListas\u003c/h2\u003e\n    \u003ch3\u003eListas não ordenadas\u003c/h3\u003e\n    \u003cul\u003e\n        \u003cli\u003eItem 1\u003c/li\u003e\n        \u003cli\u003eItem 2\u003c/li\u003e\n        \u003cli\u003eItem 3\u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003ch3\u003eListas ordenadas\u003c/h3\u003e\n    \u003col\u003e\n        \u003cli\u003eItem 1\u003c/li\u003e\n        \u003cli\u003eItem 2\u003c/li\u003e\n        \u003cli\u003eItem 3\u003c/li\u003e\n    \u003c/ol\u003e\n\n    \u003c!-- Links --\u003e\n    \u003ch2\u003eLinks\u003c/h2\u003e\n    \u003cp\u003eVisite a \u003ca href=\"https://www.exemplo.com\"\u003epágina inicial\u003c/a\u003e.\u003c/p\u003e\n\n    \u003c!-- Imagens --\u003e\n    \u003ch2\u003eImagens\u003c/h2\u003e\n    \u003cimg src=\"caminho/para/imagem.jpg\" alt=\"Descrição da imagem\" title=\"Mensagem que aparece ao manter o cursor do mouse emcima da imagem\"\u003e\n\n    \u003c!-- Formulários --\u003e\n    \u003ch2\u003eFormulários\u003c/h2\u003e\n    \u003cform action=\"/submit\" method=\"post\"\u003e\n        \u003clabel for=\"nome\"\u003eNome:\u003c/label\u003e\n        \u003cinput type=\"text\" id=\"nome\" name=\"nome\"\u003e\u003cbr\u003e\u003cbr\u003e\n        \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n        \u003cinput type=\"email\" id=\"email\" name=\"email\"\u003e\u003cbr\u003e\u003cbr\u003e\n        \u003cinput type=\"submit\" value=\"Enviar\"\u003e\n    \u003c/form\u003e\n\n    \u003c!-- Tabelas --\u003e\n    \u003ch2\u003eTabelas\u003c/h2\u003e\n    \u003ctable\u003e\n        \u003ctr\u003e\n            \u003cth\u003eNome\u003c/th\u003e\n            \u003cth\u003eIdade\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eJoão\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eMaria\u003c/td\u003e\n            \u003ctd\u003e25\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n\n    \u003c!-- Seções --\u003e\n    \u003ch2\u003eSeções\u003c/h2\u003e\n    \u003csection\u003e\n        \u003ch3\u003eSeção 1\u003c/h3\u003e\n        \u003cp\u003eConteúdo da seção 1...\u003c/p\u003e\n    \u003c/section\u003e\n    \u003csection\u003e\n        \u003ch3\u003eSeção 2\u003c/h3\u003e\n        \u003cp\u003eConteúdo da seção 2...\u003c/p\u003e\n    \u003c/section\u003e\n\n    \u003c!-- Quebra de linha --\u003e\n    \u003cbr\u003e\n    \n    \u003c!-- Linha horizontal --\u003e\n    \u003chr\u003e\n\n    \u003c!-- Quebra de linha --\u003e\n    \u003cbr\u003e\n\n    \u003c!-- Estilos de texto --\u003e\n    \u003ch2\u003eEstilos de Texto\u003c/h2\u003e\n    \u003cp\u003e\u003ci\u003eTexto em itálico\u003c/i\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cb\u003eTexto em negrito\u003c/b\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cu\u003eTexto sublinhado\u003c/u\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003eTexto forte\u003c/strong\u003e\u003c/p\u003e\n    \u003cp\u003e\u003csmall\u003eTexto pequeno\u003c/small\u003e\u003c/p\u003e\n    \u003cp\u003e\u003ccode\u003eCódigo de programação\u003c/code\u003e\u003c/p\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nTambém recomendo sites, fórums e outros repositórios para melhor estudar, eis aqui uma lista pra começar:\n- O repositório \"[free-educa/free-livros](https://github.com/free-educa/free-livros)\", com vários livros sobre Front-end começando por HTML.\n- O tópico \"[Sites e cursos para aprender HTML](https://github.com/arthurspk/guiadevbrasil?tab=readme-ov-file#-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.\n- A página \"[HTML Tutorial](https://www.w3schools.com/html/default.asp)\" do site W3Schools com praticamente tudo sobre HTML de ponta-a-ponta.\n- O meu repositório do curso de ADS (Análise e Desenvolvimento de Sistemas) da disciplina de \"[Tópicos Especiais em Tecnologia](https://github.com/juletopi/Topicos_Especiais_em_Tecnologia)\", com vários exemplos de código em HTML, CSS e JavaScript.\n\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cstrong\u003e\u003cdiv align=\"center\"\u003eEeeee com isso finalizamos o HTML, parabéns.\u003cbr\u003e\u003cbr\u003eSe você acha que já está pronto, agora vamos\u003cbr\u003eavançar para o próximo passo, o CSS! 😁✨\u003c/strong\u003e\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://giphy.com/stickers/pixel-pokemon-brysonmcbee-kwMYCO91dwsrI3pWN9\"\u003e\n          \u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGdtOGs4MmI5a2J5cTlnOHhsdG5lbDM1YzZwOWVtM3MweGl1cDB1cCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/kwMYCO91dwsrI3pWN9/giphy.gif\" alt=\"RotatingPorygon-gif\" width=\"180px\"\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n----\n\n\u003cbr\u003e\n\n## CSS (Cascading Style Sheets)\n\n### O que é \"CSS\", e para quê serve?\n\n\u003cdiv align=\"left\"\u003e\n\n\u003cimg align=\"right\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/49e7045d-ba27-4f7b-80c9-4a5069a58c18\" alt=\"CSSTheSkin-pic\" width=\"150px\"\u003e\n  \nO **CSS**, ou *Cascading Style Sheets* (em português, Folhas de Estilo em Cascata), é a linguagem utilizada para estilizar a apresentação de documentos HTML.\n\nEnquanto 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**.\n\nA 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.\n\nEm 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.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Estrutura de Diretório\n\n\u003cdiv align=\"left\"\u003e\n\n\u003cimg align=\"left\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/fc6353b5-5a5a-4b04-978c-f764a04018b5\" alt=\"ProjectDiretoryStructure-pic\" width=\"365px\"\u003e\n  \nAgora é 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...\n\n- **assets/src**: É o diretório raiz dos arquivos de origem do seu projeto. Você pode escolher nomeá-lo como assets ou src.\n  - **css**: Contém os arquivos CSS do projeto.\n  - **js**: Contém os arquivos JavaScript do projeto.\n  - **scss**: Contém os arquivos **SCSS**, que são arquivos CSS com capacidades avançadas, como *variáveis*, *aninhamento* e *mixins*.\n  - **images**: Armazena todas as imagens utilizadas no projeto.\n  - **fonts**: Armazena arquivos de fontes personalizadas que podem ser usadas no projeto.\n- **vendor**: Este é o diretório que armazena bibliotecas de terceiros, como o **Bootstrap** por exemplo.\n  - **bootstrap**: Contém os arquivos da biblioteca **Bootstrap** neste caso, depende de qual biblioteca você estiver utilizando.\n- **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.\n\nEssa 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). \n\nAlé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.\n\nVeja um exemplo de como fica abaixo:\n\n\u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/ab348c1f-8312-46ea-913e-c7f21d48124d\" alt=\"ProjectDiretoryStructureExample-pic\" width=\"365px\"\u003e\n\nEste é 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. \n\nAo final do guia, teremos um conhecimento sólido sobre CSS. Vamos lá! 😁✊\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Guia de CSS\n\n\u003cdiv align=\"left\"\u003e\n\nAqui está o guia que iremos seguir:\n\n1. **Linkando CSS com HTML:** Mostraremos como linkar um arquivo CSS externo com um arquivo HTML usando a tag `\u003clink\u003e` no `\u003chead\u003e` do documento HTML.\n\n2. **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.\n\n3. **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.\n\n4. **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.\n\n5. **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.\n\n6. **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.\n\n7. **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.\n\n8. **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.\n\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cstrong\u003e\u003cdiv align=\"center\"\u003eE encerramos a introdução conceitual sobre CSS. \u003cbr\u003e\u003cbr\u003eAgora prepare o VSCode e vamos pro código. 👩‍💻✨\u003c/strong\u003e\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://giphy.com/stickers/crocodile-chubby-hoang-9EHZ8R3cCOfUvWw2dr\"\u003e\n          \u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcXB3YzhtYmtiYWk2OWlrM3c0dmtwODNzNm0wNGZ5MXZraWxxZTBvOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/9EHZ8R3cCOfUvWw2dr/giphy.gif\" alt=\"ChubbyCrocodileHoangWorking-gif\" width=\"180px\"\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 1. Linkando CSS com HTML\n\n\u003cdiv align=\"left\"\u003e\n\nComeçaremos com o básico: Trazer o CSS pro seu HTML.\n\nLembra do [*Simple_HTML_Structure.html*](https://github.com/juletopi/Front-End_Learning_Journey/blob/main/Simple_HTML_Structure.html)? Então, vamos nos utilizar dele e trazer o CSS para ele seguindo os seguintes passos, presta atenção:\n\n1. **Criar o Arquivo CSS:** \\\nAntes 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.\n\n\u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/fe679e31-bcc8-4b24-8ae0-dd4bcb5f8a34\" alt=\"DiretoryStructure-pic\" width=\"365px\"\u003e\n\n----\n\n2. **Adicionar o Link no HTML:** \\\nNo nosso arquivo HTML que vamos estilizar com CSS, vamos adicionar a seguinte linha dentro da seção `\u003chead\u003e` do HTML:\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"src/css/style.css\"\u003e\n\u003c/head\u003e\n```\nNo final, teremos algo assim:\n\n\u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/573a2b4a-8895-465e-a60b-d1b05d561e7b\" alt=\"HTMLLinkRelStylesheet-pic\" width=\"650px\"\u003e\n\nE com isso, estamos prontos para iniciarmos com o CSS agora. Vamos partir pro passo 2. **Seletores CSS**!\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 2. Seletores CSS\n\n\u003cdiv align=\"left\"\u003e\n  \n1. **Seletores de Elementos:** \\\nSão usados para selecionar elementos no HTML com base em seus nomes.\n\nPor exemplo, para selecionar todos os elementos `\u003ch1\u003e` em seu documento HTML e definir uma cor de texto vermelha, você pode usar o seguinte seletor:\n```css\nh1 {\n    color: red;\n}\n```\nFaça isso e veja o título da sua página ficar vermelho!\n\n----\n\n2. **Seletores de Classe:** \\\nSã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.\n\nPor exemplo, se você tiver um elemento `\u003cp\u003e` com a classe \"description\", você pode estilizá-lo da seguinte forma: \u003cbr\u003e\u003cbr\u003e\n**HTML:**\n```html\n\u003csection\u003e\n    \u003ch2\u003eSeção 1\u003c/h2\u003e\n    \u003cp class=\"description1\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.\u003c/p\u003e\n\u003c/section\u003e\n\u003csection\u003e\n    \u003ch2\u003eSeção 2\u003c/h2\u003e\n    \u003cp class=\"description2\"\u003eSed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.\u003c/p\u003e\n\u003c/section\u003e\n```\n**CSS:**\n```css\n.description1 {\n    color: blue;\n}\n\n.description2 {\n    color: green;\n}\n```\nE com isso, ao adicionarmos classes diferentes mesmo que sejam para um mesmo elemento, podemos estilizá-los separadamente!\n\n----\n\n3. **Seletores de ID:** \\\nSão usados para selecionar elementos com base em seus IDs.\n\nOs IDs são atributos únicos que podem ser atribuídos a elementos HTML. Por exemplo, no nosso elemento `\u003cheader\u003e` com o ID \"main\", você pode estilizá-lo da seguinte forma: \u003cbr\u003e\u003cbr\u003e\n**HTML:**\n```html\n\u003cheader id=\"main\"\u003e\n    \u003ch1\u003eBem-vindos(as) a minha página em HTML\u003c/h1\u003e\n    \u003cnav\u003e\n        \u003cul\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eSobre\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eContato\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/nav\u003e\n\u003c/header\u003e\n```\n**CSS:**\n```css\n#main {\n    background-color: #252525;\n    padding: 20px;\n}\n```\nE com isso, o seletor `#main` é usado para estilizar o elemento `\u003cheader\u003e` que possui o ID main. Isso faz com que o fundo do `\u003cheader\u003e` seja cinza (#252525).\n\n----\n\n4. **Seletores de Atributo:** \\\nSão usados para selecionar elementos com base em atributos específicos.\n\nPor exemplo, se você tiver elementos `\u003ca\u003e` com o atributo \"target\" definido como \"_blank\" (para abrir o link em uma nova aba), você pode estilizá-los da seguinte forma:\n\nVamos adicionar uma autoria com nosso nome no rodapé da página com o atributo `target=\"_blank\"`...\u003cbr\u003e\u003cbr\u003e\n**HTML:**\n```html\n\u003cfooter\u003e\n    \u003cp\u003e\u0026copy; 2024 Meu Site muito top. Todos os direitos reservados. | Feito com amor por \u003ca href=\"https://github.com/juletopi\" target=\"_blank\"\u003eJuletopi\u003c/a\u003e.\u003c/p\u003e\n\u003c/footer\u003e\n```\n**CSS:**\n```css\na[target=\"_blank\"] {\n    color: yellow;\n}\n```\nIsso fará com que todos os links com o atributo \"target\" igual a \"_blank\" tenham texto amarelo.\n\n----\n\nEnfim, resumindo, há vários tipos de seletores CSS e situações onde cada um se enquadra melhor:\n\n1. **Seletor de Elementos (`element`):**\n   - **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 `\u003cp\u003e` na página.\n   - **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.\n\n2. **Seletor de Classes (`.class`):**\n   - **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`.\n   - **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.\n\n3. **Seletor de IDs (`#id`):**\n   - **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`.\n   - **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.\n\n4. **Seletor de Atributos (`[atributo]`):**\n   - **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\"`.\n   - **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.\n\nE com isso finalizamos a parte dos Seletores CSS. Agora seguiremos para o próximo passo do guia, o passo 3. **Propriedades CSS**!\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 3. Propriedades CSS\n\n\u003cdiv align=\"left\"\u003e\n  \nAs \"Propriedades CSS\" são usadas para definir o estilo de um elemento HTML. \n\nExistem 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:\n\n| Tipo              | Descrição                                                                                                              |\n|-------------------|------------------------------------------------------------------------------------------------------------------------|\n| Cor               | `color`, `background-color`, `border-color`                                                                            |\n| Texto             | `font-family`, `font-size`, `font-weight`, `text-align`, `text-decoration`, `text-transform`, `line-height`            |\n| Layout            | `margin`, `padding`, `width`, `height`, `display`, `float`, `position`, `top`, `right`, `bottom`, `left`, `overflow`   |\n| Borda             | `border`, `border-radius`, `border-style`, `border-width`, `box-shadow`                                                |\n| Background        | `background-image`, `background-color`, `background-size`, `background-position`, `background-repeat`                  |\n| Espaçamento       | `margin`, `padding`                                                                                                    |\n| Dimensão          | `width`, `height`, `max-width`, `max-height`, `min-width`, `min-height`                                                |\n| Lista             | `list-style-type`, `list-style-image`, `list-style-position`                                                           |\n| Outros            | `cursor`, `opacity`, `z-index`, `visibility`, `transition`, `animation`                                                |\n\nOu se também preferir saber sobre elas mais especificamente:\n\n| Propriedade            | Descrição                                                                                         |\n|------------------------|---------------------------------------------------------------------------------------------------|\n| `font-style`           | Define o estilo da fonte (normal, itálico, obliquo)                                                |\n| `font-variant`         | Define se o texto deve ser exibido em letras maiúsculas ou minúsculas                               |\n| `font-size-adjust`     | Ajusta o tamanho da fonte para preservar a altura dos glifos                                       |\n| `font-stretch`         | Define a largura da fonte (expandida, condensada, normal)                                          |\n| `font`                 | Define todas as propriedades de fonte em uma declaração abreviada                                   |\n| `letter-spacing`       | Define o espaço entre caracteres                                                                  |\n| `word-spacing`         | Define o espaço entre palavras                                                                    |\n| `text-indent`          | Define o recuo da primeira linha de texto                                                         |\n| `text-align`           | Define o alinhamento horizontal do texto (left, right, center, justify)                           |\n| `text-transform`       | Define a transformação do texto (maiúsculas, minúsculas, capitalize)                              |\n| `line-height`          | Define a altura da linha                                                                          |\n| `vertical-align`       | Define o alinhamento vertical de um elemento em relação ao seu conteúdo inline                    |\n| `color`                | Define a cor do texto                                                                            |\n| `background-color`     | Define a cor de fundo de um elemento                                                             |\n| `background-image`     | Define a imagem de fundo de um elemento                                                          |\n| `background-repeat`    | Define como a imagem de fundo deve se repetir (repeat, repeat-x, repeat-y, no-repeat)            |\n| `background-position`  | Define a posição inicial de uma imagem de fundo                                                   |\n| `background-attachment`| Define se uma imagem de fundo é fixa ou rola com o restante da página                             |\n| `border`               | Define as propriedades da borda em uma declaração abreviada                                       |\n| `border-style`         | Define o estilo da borda (solid, dotted, dashed, double, groove, ridge, inset, outset, none)     |\n| `border-width`         | Define a largura da borda                                                                        |\n| `border-color`         | Define a cor da borda                                                                           |\n| `border-radius`        | Define o raio da borda do elemento (para criar bordas arredondadas)                              |\n| `box-shadow`           | Adiciona sombra a um elemento                                                                    |\n| `margin`               | Define as margens externas de um elemento                                                        |\n| `padding`              | Define o preenchimento interno de um elemento                                                    |\n| `display`              | Define o tipo de exibição de um elemento (block, inline, inline-block, none)                     |\n| `position`             | Define o método de posicionamento de um elemento (static, relative, absolute, fixed)             |\n| `top`, `right`, `bottom`, `left` | Define a posição de um elemento posicionado                                                      |\n| `float`                | Define se um elemento deve flutuar à esquerda, à direita ou não flutuar                          |\n| `clear`                | Define como um elemento deve se comportar em relação a elementos flutuantes                      |\n| `z-index`              | Define a pilha de ordem de um elemento (sobreposição de elementos)                               |\n| `overflow`             | Define o comportamento do conteúdo que transborda de um elemento (esconder, rolar, exibir)       |\n| `visibility`           | Define a visibilidade de um elemento (visível, oculto)                                           |\n| `cursor`               | Define o cursor do mouse quando ele passa sobre um elemento                                       |\n| `opacity`              | Define a opacidade de um elemento (valor entre 0 e 1, sendo 0 totalmente transparente e 1 opaco) |\n| `transition`           | Define a transição entre os estados de um elemento quando ocorrem mudanças em suas propriedades  |\n| `animation`            | Define uma animação para um elemento                                                             |\n\nPois é, e essas são só algumas das várias propriedades CSS que existem, o leque de opções é suuuper extenso.\n\nMas é a mesma coisa das tags de HTML, lembra?\n\u003e *Nah, só algumas, não esquenta. Lembre-se, elas só são utilizadas quando necessárias.*\n\nEntã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!\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## Modificando o nosso arquivo HTML com elementos CSS\n\n\u003cdiv align=\"left\"\u003e\n\nEntão, de verdade agora, vamos modificar o nosso arquivo que criamos anteriormente, o \"[Simple_HTML_Structure.html](https://github.com/juletopi/Front-End_Learning_Journey/blob/main/Simple_HTML_Structure.html)\".\n\nVamos 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:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/e9ccdd48-a4b7-4de5-a9da-825fc81b1912\" alt=\"HTML+CSSWebpageView-pic\" width=\"650px\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\nE 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](https://github.com/juletopi/Front-End_Learning_Journey/tree/main/HTML%2BCSS_Structure)\".\n\nCom essa página estilizada temos vários elementos visuais:\n\n- 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**.\n- Uma seção **Home** com um título, subtítulo, parágrafo de texto e uma seta animada.\n- Uma seção **Sobre** com duas sub-seções com imagens, títulos, subtítulos, botões e parágrafos de texto.\n- Uma seção **Contato** com uma lista de links de botões clicáveis e contatos adicionais com ícones SVGs.\n- Um rodapé com copyright, ano e mensagem de autoria.\n- Fonte de texto e imagem de fundo da página no estilo \"pixelado\".\n- Seleção de texto e barra de rolagem estilizados nas cores principais da página.\n\nVisualmente, 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...\n\nPrimeiramente, vamos ver a nossa **Estrutura de Diretório**.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n\n\u003cimg align=\"left\" src=\"https://github.com/juletopi/Front-End_Learning_Journey/assets/76459155/63731581-ad95-489d-a8ec-b10d7c184d13\" alt=\"HTML+CSSWebpageDiretoryStructure-pic\" width=\"375px\"\u003e\n\nNa estrutura, podemos ver o arquivo \"index.html\" que anteriormente era o nosso arquivo \"Simple_HTML_Structure.html\".\n\nTambém podemos ver o arquivo \"style.css\", que é onde o nosso código CSS está.\n\nE 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.\n\nEis o código HTML e CSS por trás dessa página: \u003cbr\u003e\u003cbr\u003e\n**HTML:**\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eMinha Página Muito Top\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"src/css/style.css\"\u003e\n    \u003clink rel=\"shortcut icon\" href=\"src/images/iconeExemplo.ico\" type=\"image/x-icon\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Overlay acima da imagem de fundo da página --\u003e\n    \u003cdiv class=\"overlay\"\u003e\u003c/div\u003e\n\n    \u003c!-- Barra de navegação --\u003e\n    \u003cnav class=\"navbar\"\u003e\n        \u003cdiv class=\"logo\"\u003e\n            \u003cimg src=\"src/images/logoExemplo.png\" alt=\"imagePageLogo\"\u003e\n            \u003ch2\u003eMINHA PÁGINA\u003cbr\u003eMUITO TOP\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cul class=\"nav-links\"\u003e\n            \u003cli\u003e\u003ca href=\"#main-title\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#about-title\"\u003eSobre\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#contact-title\"\u003eContato\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/nav\u003e\n\n    \u003c!-- Seção do título da página --\u003e\n    \u003cheader class=\"title\"\u003e\n        \u003ch1 id=\"main-title\"\u003eBem-vindos(as)\u003cbr\u003ea minha pagina\u003cbr\u003emuito top\u003c/h1\u003e\n        \u003chr\u003e\n        \u003ch2\u003eA Pagina Mais Top\u003c/h2\u003e\n        \u003cp\u003eLorem 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.\u003c/p\u003e\n\n        \u003c!-- Seta animada abaixo do parágrafo na sessão do título --\u003e\n        \u003cdiv class=\"arrow\"\u003e\u003c/div\u003e\n    \u003c/header\u003e\n\n    \u003c!-- Seção 1 da página --\u003e\n    \u003ch2 id=\"about-title\"\u003eSobre\u003c/h2\u003e\n    \u003chr class=\"hr1\"\u003e\n    \u003csection id=\"section-one\" class=\"page-section\"\u003e\n        \u003cdiv class=\"section-content\"\u003e\n            \u003cimg src=\"src/images/imagemExemplo.png\" alt=\"imageSectionOne\" class=\"section-image\"\u003e\n            \u003cdiv class=\"section-text\"\u003e\n                \u003ch2\u003eSecao 1\u003c/h2\u003e\n                \u003csub\u003eConteudo da secao 1\u003c/sub\u003e\n                \u003c!-- Botão na seção 1 --\u003e\n                \u003cdiv class=\"button-container\"\u003e\n                    \u003cbutton id=\"button1\" class=\"transparent-button\"\u003eBotao 1\u003c/button\u003e\n                \u003c/div\u003e\n                \u003cp\u003eLorem 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.\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\n    \u003c!-- Seção 2 da página --\u003e\n    \u003csection id=\"section-two\" class=\"page-section\"\u003e\n        \u003cdiv class=\"section-content\"\u003e\n            \u003cimg src=\"src/images/imagemExemplo.png\" alt=\"imageSectionTwo\" class=\"section-image\"\u003e\n            \u003cdiv class=\"section-text\"\u003e\n                \u003ch2\u003eSecao 2\u003c/h2\u003e\n                \u003csub\u003eConteudo da secao 2\u003c/sub\u003e\n                \u003c!-- Botão na seção 2 --\u003e\n                \u003cdiv class=\"button-container\"\u003e\n                    \u003cbutton id=\"button2\" class=\"transparent-button\"\u003eBotao 2\u003c/button\u003e\n                \u003c/div\u003e\n                \u003cp\u003eLorem 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.\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\n    \u003c!-- Seção \"Contatos\" --\u003e\n    \u003ch2 id=\"contact-title\"\u003eContato\u003c/h2\u003e\n    \u003chr class=\"hr2\"\u003e\n    \u003csection class=\"contacts\"\u003e\n        \u003cp\u003eLista de Links:\u003c/p\u003e\n        \u003cdiv class=\"contact-link-container\"\u003e\n            \u003cbutton id=\"button2\" class=\"contact-link-button\"\u003eLink 1\u003c/button\u003e\n            \u003cbutton id=\"button3\" class=\"contact-link-button\"\u003eLink 2\u003c/button\u003e\n            \u003cbutton id=\"button4\" class=\"contact-link-button\"\u003eLink 3\u003c/button\u003e\n        \u003c/div\u003e\n        \u003cp\u003eContatos Adicionais:\u003c/p\u003e\n        \u003cdiv class=\"social-icons-container\"\u003e\n            \u003ca href=\"https://www.facebook.com/\" target=\"_blank\" title=\"Facebook\"\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"30\" height=\"30\" viewBox=\"0,0,256,256\"style=\"fill:#000000;\"\u003e\u003cg 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\"\u003e\u003cg transform=\"scale(5.12,5.12)\"\u003e\u003cpath 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\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/g\u003e\u003c/svg\u003e\n            \u003c/a\u003e\n            \u003ca href=\"https://www.instagram.com/\" target=\"_blank\" title=\"Instagram\"\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"30\" height=\"30\" viewBox=\"0,0,256,256\"style=\"fill:#000000;\"\u003e\u003cg 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\"\u003e\u003cg transform=\"scale(4,4)\"\u003e\u003cpath 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\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/g\u003e\u003c/svg\u003e\n            \u003c/a\u003e\n            \u003ca href=\"https://www.linkedin.com/\" target=\"_blank\" title=\"LinkedIn\"\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"29\" height=\"29\" viewBox=\"0,0,256,256\"style=\"fill:#000000;\"\u003e\u003cg 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\"\u003e\u003cg transform=\"scale(5.12,5.12)\"\u003e\u003cpath 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\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/g\u003e\u003c/svg\u003e\n            \u003c/a\u003e\n            \u003ca href=\"https://github.com/\" target=\"_blank\" title=\"GitHub\"\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"30\" height=\"30\" viewBox=\"0,0,256,256\"style=\"fill:#000000;\"\u003e\u003cg 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\"\u003e\u003cg transform=\"scale(4,4)\"\u003e\u003cpath 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\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/g\u003e\u003c/svg\u003e\n            \u003c/a\u003e\n            \u003ca href=\"https://whatsapp.com/\" target=\"_blank\" title=\"Whatsapp\"\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"28\" height=\"28\" viewBox=\"0,0,256,256\"style=\"fill:#000000;\"\u003e\u003cg 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\"\u003e\u003cg transform=\"scale(5.12,5.12)\"\u003e\u003cpath 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\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/g\u003e\u003c/svg\u003e\n            \u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\n    \u003c!-- Rodapé da página --\u003e\n    \u003cfooter class=\"footer\"\u003e\n        \u003cp\u003e\u0026copy; 2024 Minha página muito top. Todos os direitos reservados. | Feito com amor por \u003ca href=\"https://github.com/juletopi\" target=\"_blank\"\u003eJuletopi\u003c/a\u003e.\u003c/p\u003e\n    \u003c/footer\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n**CSS:**\n```css\n/* Reset básico para todos os elementos */\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n/* Remove os estilos padrão das listas não ordenadas */\nul {\n    list-style: none;\n}\n\n/* Remove a decoração padrão dos links */\na {\n    text-decoration: none;\n}\n\n/* Adiciona um scroll suave */\nhtml {\n    scroll-behavior: smooth;\n}\n\n/* Estilização básica do corpo do documento */\nbody {\n    font-family: DisposableDroidBB-Regular;\n    color: #fff;\n    background-color: #2c2c2e;\n    background-image: url('../images/pixelatedStreetBackgroundGif.gif');\n    background-size: cover;\n    background-attachment: fixed;\n    background-position: center;\n}\n\n/* Estilização da sobreposição para efeitos visuais desejados na imagem de fundo */\n.overlay {\n    background-color: rgba(0, 0, 0, 0.815);\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: -1;\n}\n\n/* Estilização da barra de navegação */\n.navbar {\n    position: fixed;\n    z-index: 1000;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 20px;\n    color: #fff;\n    background-color: #1b1b1bfa;\n    box-shadow: 0 10px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n/* Estilização do logotipo na barra de navegação */\n.logo {\n    display: flex;\n    align-items: center;\n}\n\n/* Estilização da imagem do logotipo na barra de navegação */\n.logo img {\n    width: 60px;\n    height: 60px;\n    margin-top: 5px;\n    margin-bottom: 5px;\n}\n\n/* Estilização do texto do logotipo na barra de navegação */\n.logo h2 {\n    font-family: Verdana;\n    margin-left: 20px;\n    font-size: 18px;\n    font-style: inherit;\n    line-height: 1.0;\n    letter-spacing: -2px;\n}\n\n/* Estilização geral dos links de navegação */\n.nav-links {\n    display: flex;\n    list-style-type: none;\n    font-size: 23px;\n}\n\n/* Estilização dos itens da lista de links de navegação */\n.nav-links li {\n    margin-right: 20px;\n    margin-top: 20px;\n    margin-bottom: 20px;\n}\n\n/* Estilização específica dos links de navegação */\n.nav-links a {\n    color: #e0e0e0;\n    padding-inline: 25px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n}\n\n/* Estilização específica dos links de navegação ao passar o mouse */\n.nav-links a:hover {\n    background-color: #575757;\n    border-radius: 5px;\n    transition: 0.5s ease;\n    transform: scale(1.1);\n}\n\n/* Estilização específica dos links de navegação ao deixar o mouse */\n.nav-links a:not(:hover) {\n    border-radius: 5px;\n    transition: background-color 0.5s ease;\n}\n\n/* Estilização do título da seção do título principal da página */\n.title h1 {\n    font-family: \"DisposableDroidBB-Bold\";\n    font-size: 60px;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);\n    padding-top: 150px;\n    padding-bottom: 60px;\n    text-align: center;\n    line-height: 0.7;\n    letter-spacing: -3px;\n}\n\n/* Estilização da linha horizontal abaixo do título principal da página */\n.title hr {\n    border: none;\n    border: 2px solid #fff;\n    width: 30%;\n    margin: 50px auto;\n    margin-top: -30px;\n    margin-bottom: 30px;\n}\n\n/* Estilização do subtítulo da seção do título principal da página */\n.title h2 {\n    font-family: \"DisposableDroidBB-Bold\";\n    font-size: 36px;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);\n    padding-bottom: 40px;\n    text-align: center;\n    line-height: 1.0;\n    letter-spacing: -1px;\n}\n\n/* Estilização do parágrafo da seção do título principal da página */\n.title p {\n    font-size: 23px;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);\n    padding-bottom: 10px;\n    padding-left: 150px;\n    padding-right: 150px;\n    text-align: center;\n    line-height: 1.5;\n}\n\n/* Estilização da seta animada abaixo do parágrafo da seção do título da página */\n.arrow {\n    width: 0;\n    height: 0;\n    border-left: 10px solid transparent;\n    border-right: 10px solid transparent;\n    border-top: 15px solid #fff;\n    position: relative;\n    margin: 10px auto;\n    padding-bottom: 15px;\n    animation: arrowAnimation 1s infinite alternate;\n}\n\n/* Estilização do título \"Sobre\" */\n#about-title {\n    font-family: \"DisposableDroidBB-Bold\";\n    font-size: 55px;\n    text-align: center;\n    margin-top: 80px;\n    margin-bottom: -10px;\n    line-height: 0.7;\n    letter-spacing: -2px;\n}\n\n/* Estilização da linha horizontal abaixo do título \"Sobre\" */\n.hr1 {\n    border: none;\n    border: 2px solid #fff;\n    margin: 20px auto;\n    margin-bottom: 10px;\n    width: 20%;\n}\n\n/* Estilização geral das seções da página */\n.page-section {\n    color: #fff;\n    padding: 50px 0px;\n    padding-bottom: 0;\n    padding-top: 10px;\n}\n\n/* Estilização da imagem das seções da página */\n.section-image {\n    width: 100%;\n    height: auto;\n    max-width: 300px;\n    padding-top: 20px;\n    padding-bottom: 20px;\n    padding-left: 20px;\n}\n\n/* Estilização do conteúdo das seções da página */\n.section-content {\n    background-color: #1b1b1bab;\n    padding: 0px auto;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n}\n\n/* Estilização específica da imagem das seções da página */\n.section-content img {\n    width: 100%;\n    border-radius: 10px;\n}\n\n/* Estilização geral do texto das seções da página */\n.section-text {\n    flex: 1;\n    padding-right: 20px;\n}\n\n/* Estilização do título do texto nas seções da página */\n.section-text h2 {\n    font-family: \"DisposableDroidBB-Bold\";\n    font-size: 38px;\n    margin-top: 30px;\n    margin-left: 20px;\n}\n\n/* Estilização do subtitulo do texto nas seções da página */\n.section-text sub {\n    font-family: \"DisposableDroidBB-Italic\";\n    font-size: 18px;\n    margin-left: 20px;\n    padding-bottom: 20px;\n    line-height: 1.0;\n}\n\n/* Estilização dos parágrafos do texto nas seções da página */\n.section-text p {\n    color: #e0e0e0;\n    font-size: 23px;\n    line-height: 1.5;\n    margin-left: 20px;\n    padding-top: 20px;\n    margin-bottom: 30px;\n}\n\n/* Estilização específica da Seção 2 */\n#section-two .section-content {\n    flex-direction: row-reverse;\n    text-align: right;\n}\n\n/* Estilização específica da imagem da Seção 2 */\n#section-two .section-image {\n    padding-right: 20px;\n    padding-left: 0;\n}\n\n/* Estilização do container do botão */\n.button-container {\n    display: flex;\n    align-items: center;\n    padding-bottom: 15px;\n}\n\n/* Estilização dos botões transparentes */\n.transparent-button {\n    font-family: DisposableDroidBB-Bold;\n    font-size: 23px;\n    background-color: transparent;\n    color: white;\n    border: 2px solid #747474;\n    border-radius: 5px;\n    padding: 10px 20px;\n    margin-left: 20px;\n    margin-top: 30px;\n    text-align: center;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n/* Estilização do botão transparente ao passar o mouse */\n.transparent-button:hover {\n    background-color: #747474;\n    color: white;\n    border-color: #747474;\n}\n\n/* Estilização específica do botão da Seção 2 */\n#button2.transparent-button {\n    margin-left: auto;\n}\n\n/* Estilização do título \"Contato\" */\n#contact-title {\n    font-family: \"DisposableDroidBB-Bold\";\n    font-size: 55px;\n    text-align: center;\n    margin-top: 60px;\n    margin-bottom: -10px;\n    line-height: 0.7;\n    letter-spacing: -2px;\n}\n\n/* Estilização da linha horizontal abaixo do título \"Contato\" */\n.hr2 {\n    border: none;\n    border: 2px solid #fff;\n    margin: 20px auto;\n    margin-bottom: 10px;\n    width: 20%;\n}\n\n/* Estilização geral da seção de contatos */\n.contacts {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n/* Estilização dos parágrafos da seção de contatos */\n.contacts p {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 28px;\n    margin-top: 20px;\n}\n\n/* Estilização do container dos botões de contatos */\n.contact-link-container {\n    text-align: center;\n    margin-bottom: 15px;\n}\n\n/* Estilização dos botões de contatos */\n.contact-link-button {\n    font-family: DisposableDroidBB-Bold;\n    font-size: 23px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: transparent;\n    color: white;\n    border: 3px solid #747474;\n    border-radius: 5px;\n    padding: 20px 180px;\n    margin-left: 20px;\n    margin-top: 30px;\n    text-align: center;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n/* Estilização dos botões de contatos ao passar o mouse */\n.contact-link-button:hover {\n    background-color: #747474;\n    color: white;\n    border-color: #747474;\n}\n\n/* Estilização do container dos ícones sociais */\n.social-icons-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 10px;\n    padding-bottom: 30px;\n    gap: 30px;\n}\n\n/* Estilização específica do link dos ícones sociais */\n.social-icons-container a {\n    display: inline-block;\n    width: 38px;\n    margin-top: 10px;\n}\n\n/* Estilização específica do SVG dos ícones sociais */\n.social-icons-container svg {\n    width: 100%;\n    height: 100%;\n}\n\n/* Estilização do preenchimento dos ícones sociais */\n.social-icons-container a svg path {\n    fill: #9e9e9e;\n}\n\n/* Estilização do preenchimento dos ícones sociais ao passar o mouse */\n.social-icons-container a:hover svg path {\n    fill: #5e5e5e;\n    transition: fill 0.3s ease;\n}\n\n/* Estilização do rodapé */\n.footer {\n    font-family: Verdana;\n    background-color: #141414;\n    color: #888888;\n    margin-top: 30px;\n}\n\n/* Estilização do texto no rodapé */\n.footer p {\n    padding-bottom: 30px;\n    padding-top: 30px;\n    text-align: center;\n    font-size: 12px;\n}\n\n/* Estilização do link no rodapé */\n.footer a {\n    color: #cecece;\n}\n\n/* Estilização do links no rodapé ao passar o mouse */\n.footer a:hover {\n    color: #ffffff;\n    transition: color 0.3s ease;\n}\n\n/* Definição da fonte DisposableDroidBB-Regular */\n@font-face {\n    font-family: \"DisposableDroidBB-Regular\";\n    src: url(\"../fonts/DisposableDroidBB-Regular.ttf\") format(\"woff2\"),\n         url(\"../fonts/DisposableDroidBB-Regular.ttf\") format(\"woff\");\n}\n\n/* Definição da fonte DisposableDroidBB-Bold */\n@font-face {\n    font-family: \"DisposableDroidBB-Bold\";\n    src: url(\"../fonts/DisposableDroidBB-Bold.ttf\") format(\"woff2\"),\n         url(\"../fonts/DisposableDroidBB-Bold.ttf\") format(\"woff\");\n}\n\n/* Definição da fonte DisposableDroidBB-Italic */\n@font-face {\n    font-family: \"DisposableDroidBB-Italic\";\n    src: url(\"../fonts/DisposableDroidBB-Italic.ttf\") format(\"woff2\"),\n         url(\"../fonts/DisposableDroidBB-Italic.ttf\") format(\"woff\");\n}\n\n/* Animação da seta */\n@keyframes arrowAnimation {\n    from {\n        top: 0;\n    }\n    to {\n        top: 10px;\n    }\n}\n\n/* Estilos da barra de rolagem */\n::-webkit-scrollbar {\n    background-color: #2c2c2e;\n    width: 10px;\n\theight: 8px;\n}\n\n/* Estilos do indicador da barra de rolagem */\n::-webkit-scrollbar-thumb {\n    background-color: #707070;\n    border-radius: 8px;\n}\n\n/* Estilos da seleção de texto */\n::selection {\n    background-color: #bdbdbd59;\n    color: #fff;\n}\n```\nE é 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**.\n\nMas o que são todos estes elementos e como eles funcionam? \\\nVamos explicá-los parte-a-parte.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 4. Box Model\n\n\u003cdiv align=\"left\"\u003e\n\nO **Box Model** no CSS é um conceito que define como os elementos HTML são renderizados em uma página. \n\nEle 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.\n\nAlguns exemplos comuns:\n- A propriedade `padding` é usada para definir o espaçamento dentro do elemento.\n- A propriedade `border` é usada para definir a borda do elemento\n- A propriedade `margin` é usada para definir o espaçamento ao redor do elemento.\n\nSaber como usar cada box model é essencial para criar layouts precisos e consistentes!\nExistem 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. \n\nVou mostrar um exemplo de Box Model com o código CSS do \"botão transparente\":\n```css\n/* Estilização dos botões transparentes */\n.transparent-button {\n    font-family: DisposableDroidBB-Bold;\n    font-size: 23px;\n    background-color: transparent;\n    color: white;\n    border: 2px solid #747474;\n    border-radius: 5px;\n    padding: 10px 20px;\n    margin-left: 20px;\n    margin-top: 30px;\n    text-align: center;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n```\nAcima temos o nosso botão `.transparent-button` com as seguintes propriedades:\n\n1. **`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).\n\n2. **`border`**: Define a borda do botão. Aqui, estamos usando uma borda sólida de `2px` com a cor `#747474` (cinza).\n\n3. **`border-radius`**: Define o raio dos cantos do botão, criando cantos arredondados. Aqui, estamos usando um raio de `5px`.\n\n4. **`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.\n\nEssas 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.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch6\u003e\u003ca href=\"#front-end-coding-journey-\"\u003e Voltar para o início ↺\u003c/a\u003e\u003c/h6\u003e\n\u003c/div\u003e\n\n## 5. Layouts CSS\n\n\u003cdiv align=\"left\"\u003e\n\nOs **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.\n\n**Flexbox**:\nFlexbox é 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.\n\n**Principais elementos do Flexbox**:\n- **Contêiner Flexível (`display: flex`)**: Define um contêiner como um contexto flexível para seus itens filhos.\n- **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.\n\n**Principais propriedades do Flexbox**:\n- **`display`**: Define o elemento como um contêiner flexível ou inline-flexível.\n- **`flex-direction`**: Define a direção dos eixos principal e transversal no contêiner flexível.\n- **`flex-wrap`**: Define se os itens flexíveis devem ser compactados em uma linha ou várias linhas.\n- **`justify-content`**: Alinha os itens flexíveis ao longo do eixo principal do contêiner flexível.\n- **`align-items`**: Alinha os itens flexíveis ao longo do eixo transversal do contêiner flexível.\n- **`align-self`**: Permite que um item flexível se alinhe de forma diferente dos outros itens no contêiner.\n- **`flex-grow`, `flex-shrink`, `flex-basis`**: Controlam como os itens flexíveis crescem, encolhem e são distribuídos no contêiner flexível.\n\nVou mostrar um exemplo de Flexbox com o código CSS da \"barra de navegação\":\n```css\n/* Estilização da barra de navegação */\n.navbar {\n    position: fixed;\n    z-index: 1000;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 20px;\n    color: #fff;\n    background-color: #1b1b1bfa;\n    box-shadow: 0 10px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n```\nAcima temos a nossa barra de navegação `.navbar` com as seguintes propriedades:\n\n1. `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.\n\n2. `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.\n\n3. `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.\n\nEssas 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.\n\n----\n\n**Grid**:\nO 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.\n\n**Principais elementos do Grid**:\n- **Contêiner de Grade (`display: grid`)**: Define um contêiner como uma grade para seus itens filhos.\n- **Linhas e Colunas da Grade (`grid-template-rows`, `grid-template-columns`)**: Define o tamanho e o número de linhas e colunas na grade.\n- **Áreas da Grade (`grid-template-areas`)**: Define áreas nomeadas na grade para posicionar os itens de forma intuitiva.\n\n**Principais propr","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuletopi%2Ffront-end_learning_journey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuletopi%2Ffront-end_learning_journey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuletopi%2Ffront-end_learning_journey/lists"}