Prévia do material em texto

<p>Motivação e Objetivo</p><p>A área de programação oferece uma carreira promissora. Nela os profissionais não</p><p>se preocupam com desemprego e conseguem oportunidades com altos salários. Parece um</p><p>paradoxo, mas existem milhares de vagas em aberto nessa área, em paralelo a um exército</p><p>de desempregados no Brasil. Por que será que isso acontece?</p><p>Depois de 10 anos atuando no ensino de programação online, na DevPro, além de</p><p>ter dado aulas em faculdade de tecnologia por 4 anos, eu, Renzo, enxergo algumas causas:</p><p>● Falta de conhecimento sobre como estudar para aprender novas habilidades;</p><p>● Falta de definição de objetivos claros;</p><p>● Confusão sobre qual caminho seguir, por conta do excesso de conteúdo na internet;</p><p>● Falta de uma trilha de conhecimento concisa e coesa;</p><p>● Ilusão de que se pode aprender a programar sozinho.</p><p>Então minha motivação, ao escrever esse livro, é atacar essas causas com a</p><p>esperança de que mais e mais pessoas possam transformar suas carreiras e,</p><p>consequentemente, suas vidas! Por isso compartilharei o Método DevPro, método que que</p><p>criei e já ajudou centenas de pessoas a entrarem no mercado de programação!</p><p>Esse livro é a concretização do método mais eficaz para quem quer se tornar um</p><p>programador web profissional. O método se divide em 5 etapas, que formam os capítulos</p><p>deste livro:</p><p>1. Aprendendo a Aprender Tecnologia. Neste capítulo será apresentada qual é a</p><p>mentalidade correta e quais ferramentas vão ajudar no processo de aprendizado de</p><p>tecnologia;</p><p>2. Trilha Fundamental. Aqui serão apresentados os fundamentos da programação</p><p>web que todo desenvolvedor precisa saber. Esse conhecimento vai servir de base</p><p>para que o leitor escolha entre uma das duas trilhas de conhecimento a seguir;</p><p>3. Trilha de Frontend. Seguirá nessa trilha de conhecimento o leitor que teve mais</p><p>afinidade com construção de páginas e componentes visuais;</p><p>4. Trilha de Backend. Seguirá nessa trilha de conhecimento o leitor que teve mais</p><p>afinidade com lógica de programação e como programas funcionam;</p><p>5. Processos Seletivos. Ao terminar uma das duas trilhas anteriores, será necessário</p><p>entender como os processos seletivos técnicos funcionam e aprender a fórmula</p><p>100% eficaz para ser aprovada.</p><p>Os capítulos deste livro devem ser lidos em ordem. A exceção a essa regra são os</p><p>capítulos de Trilha de Frontend e Trilha de Backend. Para a conquista da primeira vaga,</p><p>apenas um deles precisa ser lido, de acordo com o perfil que o leitor irá identificar no</p><p>capítulo 2: Trilha Fundamental. Desejo bons estudos para você que está lendo!</p><p>Página 2 de 176</p><p>Motivação e Objetivo............................................................................................................. 1</p><p>Capítulo 1: Aprendendo a Aprender Tecnologia.................................................................6</p><p>Defina um objetivo claro.....................................................................................................6</p><p>Defina sua Agenda.............................................................................................................7</p><p>Caminhada das Imagens (Picture Walk)............................................................................8</p><p>Modo Focado versus Difuso...............................................................................................9</p><p>Como evitar a procrastinação...........................................................................................11</p><p>Aprendendo enquanto você dorme..................................................................................13</p><p>O Conhecimento entra pelos dedos.................................................................................15</p><p>O poder das comunidades............................................................................................... 16</p><p>Perguntas do Capítulo 1...................................................................................................17</p><p>Capítulo 2: Fundamentos da Web...................................................................................... 18</p><p>URL ou Link: você sempre usa, mas não prestou atenção..............................................18</p><p>Domínio, IP e Domain Server Name (DNS)..................................................................... 25</p><p>Como Funcionam as Páginas de Internet........................................................................28</p><p>Introdução ao HTML...................................................................................................30</p><p>Primeiras ferramentas necessárias............................................................................31</p><p>Olá mundo com HTML............................................................................................... 31</p><p>Visão geral das tags do HTML por categorias........................................................... 36</p><p>As Principais Tags HTML................................................................................................. 45</p><p>🏆 Entendendo marcações HTML na prática............................................................ 47</p><p>Tags e seus atributos....................................................................................................... 50</p><p>Estrutura, DOM e a anatomia de uma página HTML.......................................................51</p><p>Formulários e campos para obtenção dados...................................................................55</p><p>Perguntas do Capítulo 2...................................................................................................61</p><p>URL ou Link................................................................................................................61</p><p>Domínio, IP e DNS..................................................................................................... 61</p><p>Como Funcionam as Páginas de Internet.................................................................. 62</p><p>As Principais Tags HTML........................................................................................... 62</p><p>Tags e seus atributos................................................................................................. 62</p><p>Estrutura DOM e anatomia da Página html................................................................62</p><p>Formulário e Campos.................................................................................................62</p><p>Capítulo 3: Fundamentos do CSS...................................................................................... 63</p><p>Motivações para entender CSS....................................................................................... 64</p><p>O que é Cascading Style Sheets (CSS)...........................................................................66</p><p>🏆 CSS na prática............................................................................................................68</p><p>🏆 Estilo inline, Tag Style e arquivos externos................................................................ 72</p><p>🚀 Dica DEV #1 - Editor de código.................................................................................. 75</p><p>Aprendendo CSS criando uma página web..................................................................... 77</p><p>Estilo em textos................................................................................................................ 78</p><p>🏆 Estilo no título #3.1............................................................................................... 80</p><p>Introdução aos seletores CSS..........................................................................................83</p><p>Tipos de seletores...................................................................................................... 85</p><p>Especificidade de seletores CSS............................................................................... 87</p><p>Página 3 de 176</p><p>Visão geral dos seletores CSS...................................................................................89</p><p>🏆 Mais estilo nos textos #3.2......................................................................................... 91</p><p>🚀 Dica DEV #2 - Codepen.............................................................................................</p><p>de arquivos do seu sistema operacional, entre na pasta "Meus</p><p>Documentos" da sua pasta pessoal;</p><p>2) Crie uma pasta chamada "HTML", utilize o botão direito do mouse e clique em</p><p>nova pasta;</p><p>3) Dentro da pasta HTML, utilizando o botão direito, crie um arquivo de texto</p><p>chamado "olá-mundo.html" (dica: NÃO use espaço ou caracteres maiúsculos) e tenha</p><p>certeza que a extensão do arquivo é .html *</p><p>4) Abra o arquivo que acabamos de criar no seu editor de texto (na seção anterior</p><p>vimos mais sobre editor de texto). Para abrir o arquivo, clique sobre ele com o botão direito</p><p>Página 31 de 176</p><p>do mouse, selecione a opção ‘abrir com’ e selecione a opção ‘abrir com notepad‘. Neste</p><p>documento, digite o seguinte o conteúdo:</p><p>Olá Mundo</p><p>Este é um arquivo que nosso navegador entende</p><p>5) Salve o arquivo (toda vez que alterar o arquivo, é necessário salvá-lo);</p><p>6) Abra o arquivo no navegador Google Chrome, conforme figura 2.12 a seguir.</p><p>Figura 2.12: Exemplo de acesso ao arquivo “olá-mundo.html” sem nenhuma tag</p><p>Note que o navegador conseguiu entender o conteúdo do arquivo HTML e exibí-lo.</p><p>Porém, o arquivo HTML está apenas com o texto, não possui as tags HTML. Vamos agora</p><p>incluir algumas tags e ver a diferença na exibição:</p><p>1) Abra novamente o arquivo olá-mundo.html e adicione as tags no documento de</p><p>forma a ficar igual o conteúdo abaixo:</p><p><h1>Olá Mundo</h1></p><p><p>Este é um arquivo que nosso navegador entende</p></p><p>2) Salve o arquivo com as alterações acima;</p><p>3) Clique em atualizar página do navegador para que as atualizações sejam</p><p>exibidas.</p><p>Página 32 de 176</p><p>Compare com a versão anterior e note que agora o navegador consegue exibir o</p><p>texto conforme as marcações HTML do documento, conforme a figura 2.13:</p><p>Figura 2.13: Exemplo de acesso ao arquivo “olá-mundo.html” com tags h1 e p</p><p>Atenção</p><p>Quem já teve um pouco de contato com HTML, deve ter percebido que o HTML</p><p>acima está incompleto, ou seja, sua estrutura não possui algumas tags fundamentais,</p><p>presentes em todo arquivo desse tipo.</p><p>Mas o objetivo deste primeiro exercício é mostrar que o navegador consegue</p><p>entender marcações, como o caso do <h1> que representa um título importante da página e</p><p>o <p> para representar um parágrafo. E mesmo com um HTML incompleto, o navegador foi</p><p>capaz de exibi-lo corretamente, bem diferente da primeira versão sem marcações.</p><p>Contudo esse experimento serve para mostrar que o navegador tenta, a todo custo,</p><p>exibir os componentes visuais, mesmo quando temos erros no código HTML, como tags</p><p>inválidas.</p><p>Abaixo está a versão um pouco mais completa e correta de um “Olá Mundo HTML”.</p><p>Mas é importante ressaltar que o resultado exibido pelo navegador será o mesmo, ou seja,</p><p>é importante produzir um HTML correto.</p><p>Versão final do HTML para exibir um Olá mundo com HTML</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><title>Olá mundo HTML da DevPro</title></p><p></head></p><p><body></p><p><h1>Olá Mundo</h1></p><p><p>Este é um arquivo que nosso navegador entende</p></p><p></body></p><p></html></p><p>Página 33 de 176</p><p>Em seguida vamos entender melhor a estrutura do HTML, bem como conhecer mais</p><p>sobre tags do HTML.</p><p>Faça novamente o Olá mundo, mas agora digitando o conteúdo final e correto</p><p>referente ao “Olá Mundo HTML”.</p><p>Arquivo de texto: Representa um arquivo com texto puro, ou seja, diferentemente</p><p>de um documento criado no microsoft word ou uma planilha. Em arquivos de Word ou</p><p>Excel, seu conteúdo contém muitas informações extras como: configurações, meta dados</p><p>do aplicativo, entre outras informações.</p><p>Em outras palavras, um documento criado no ms-word apenas com o conteúdo “Olá</p><p>Mundo”, se aberto com um editor de texto, irá conter mais informações, mais caracteres do</p><p>que apenas o texto digitado no documento em si. Por outro lado, um arquivo de texto puro,</p><p>também chamado de arquivo de texto, irá conter apenas os caracteres do texto “Olá</p><p>Mundo”.</p><p>Extensão do arquivo: Todo arquivo pode ter uma extensão, como por exemplo, txt,</p><p>doc, xls, pdf, png ou jpg. Ao criar um novo arquivo, alguns sistemas operacionais criam o</p><p>arquivo sem extensão ou automaticamente com a extensão .txt. Desta forma é muito</p><p>importante conferir a extensão.</p><p>Note que da figura 2.13 o arquivo foi criado com o nome “olá-mundo.html”, mas seu</p><p>verdadeiro nome é “olá-mundo.html.txt”, ou seja, embora tenha o .html sua extensão é .txt</p><p>(arquivo texto ao invés de arquivo HTML) e assim o navegador não irá exibir como</p><p>esperado.</p><p>Página 34 de 176</p><p>Figura 2.13: Exemplo de acesso de detalhes do arquivo “olá-mundo.html.txt”</p><p>A solução neste caso é renomeá-lo de forma que a extensão seja .html ao invés de</p><p>.txt.</p><p>No gerenciador de arquivos, independente do seu sistema operacional, é possível</p><p>configurar de forma que sempre seja exibido a extensão do arquivo. Assim será possível ver</p><p>a extensão do arquivo junto ao seu nome e evitar este problema.</p><p>Para entender melhor como esse processo funciona, veja a vídeo aula Construa sua</p><p>primeira página web em menos de 3 minutos!. Nessa aula é importante ver como conseguir</p><p>definir corretamente as extensões dos seus arquivos para que o navegador consiga</p><p>interpretar corretamente o código escrito. E tem o bônus de ensinar como investigar o</p><p>código HTML de qualquer página na internet!</p><p>Agora que você já sabe o fundamento de uma página web, vamos aprofundar o</p><p>conhecimento adicionando outras tags ao seu vocabulário.</p><p>Página 35 de 176</p><p>https://l.dev.pro.br/aula-primeira-pagina-web</p><p>https://l.dev.pro.br/aula-primeira-pagina-web</p><p>Visão geral das tags do HTML por categorias</p><p>Vimos no “Olá Mundo HTML” que existem tags que modificam como o navegador irá</p><p>exibir certo texto e outras tags que simplesmente não fazem diferença na questão visual.</p><p>Por isso precisamos aprender sobre agrupamentos específicos de tags.</p><p>No site da w3schools.com podemos conferir todas tags existentes separadas por</p><p>categorias. Conhecer essas grandes classificações pode ser uma forma fácil de achar qual</p><p>tag precisamos utilizar para marcar o conteúdo de um site. Veja alguns exemplos de tags</p><p>versus categoria na figura 2.14 a seguir:</p><p>Figura 2.14: Categorias de tags HTML</p><p>Essas grandes categorias agrupam tags que possuem objetivos semelhantes. Por</p><p>exemplo, observe o código html a seguir com algumas tags da categoria de Formatação:</p><p>Página 36 de 176</p><p>https://www.w3schools.com/tags/ref_byfunc.asp</p><p>O HTML acima é renderizado com texto em formatos diferentes pelo navegador,</p><p>como é possível ver na figura 2.15:</p><p>Figura 2.15: Exemplo de uso de tags da categoria formatação</p><p>Página 37 de 176</p><p>Além das tags de formatação, existem tags da categoria básica (Basic), que estão</p><p>presente no código a seguir:</p><p>Na categoria básica temos as tags <html>, <head>, <body>, que fazem parte da</p><p>estrutura padrão do HTML e que todo documento bem formado deveria conter.</p><p>Também temos as tags <h1> até <h6>, que servem para representar títulos ou</p><p>tópicos da sua página. A tag <h1> representa o tópico mais importante da página e é boa</p><p>prática ter apenas uma ou poucas tags <h1>, uma vez que poucos devem ser os assuntos</p><p>mais importantes dentro de apenas uma sessão de um site.</p><p>Já as tags <h2>, <h3>, e assim por diante, são os sub tópicos dos assuntos mais</p><p>importantes e aparecem com menor destaque na página.</p><p>O HTML anterior é exibido no navegador conforme figura 2.16:</p><p>Página 38 de 176</p><p>Figura 2.16: Exemplos de tags do tipo h</p><p>Categoria Formulário e Campos:</p><p>As tags da categoria de Formulários e Campos são usadas para exibir os campos</p><p>de entrada de dados, como em uma página onde digitados o usuário e senha para entrar</p><p>em um site, como o da figura 2.17 a seguir:</p><p>Figura 2.17:: Exemplo de formulário HTML</p><p>A seguir temos o código referente ao formulário anterior:</p><p>Página 39 de 176</p><p>Esse formulário está escrito com html sem qualquer preocupação visual. Ou seja,</p><p>sem estilo, assunto que estudaremos ainda neste capítulo. No mundo real encontraremos</p><p>um formulário melhor acabado, do ponto de vista visual, como na figura 2.18 a seguir:</p><p>Página 40 de 176</p><p>Figura 2.18: Exemplo de formulário web estilizado</p><p>Categoria de Quadro:</p><p>A tag da categoria quadros é usada para inserir outras páginas dentro da nossa</p><p>página!</p><p>Sim, é isso mesmo que você leu, é possível ter outras páginas dentro de uma</p><p>página utilizando a tag <iframe>.</p><p>Por exemplo, é possível exibir o Mapa do Google na página de contato do nosso site</p><p>ou até mesmo um vídeo do youtube. O que precisamos basicamente é utilizar a tag com o</p><p>atributo src, e os atributos width (do inglês largura) e height (do inglês altura) para definir o</p><p>tamanho. Veja a seguir o exemplo de código para exibir o site do pudim dentro da sua</p><p>página.</p><p>Página 41 de 176</p><p>Na figura 2.19 mostra que algumas plataformas já fornecem para gente o código</p><p>com a tag <iframe> já pronta para ser copiada e colada onde quisermos dentro das</p><p>nossas páginas.</p><p>Figura 2.19: Exemplo de página para embutir mapa do Google Maps</p><p>Página 42 de 176</p><p>Categoria de imagens), audio e video:</p><p>Tags dessa categoria são usadas para exibir imagens na página, inicialmente existia</p><p>apenas a tag <img>, que serve para apresentar imagens na página. Mas atualmente temos</p><p>outras tags para fazer exibir outros tipos de mídia, como som e vídeo.</p><p>Categoria de Links:</p><p>São usadas para fazer a navegação dentro da mesma página ou para outras</p><p>páginas, sejam elas internas ou externas.</p><p>Categoria Listas:</p><p>São usadas para uma lista com itens. Os itens podem ser ordenados ou não.</p><p>Categoria de tabelas:</p><p>Esta categoria envolve a tag <table> que era mais usada, há alguns anos, para</p><p>fazer layouts, ou seja, organização do conteúdo na página. Mas por conta da usabilidade e</p><p>melhor representação em dispositivos menores, como celulares, atualmente caiu em</p><p>desuso.</p><p>Ainda assim, é usada para apresentar dados em formato tabular. A figura 2.20</p><p>mostra um exemplo de uso de tabela html:</p><p>Figura 2.20: Exemplo de uso de tabela html</p><p>Categoria de programação (programming):</p><p>Esta categoria é utilizada para inserir código da linguagem JavaScript e permitir a</p><p>criação de comportamentos dinâmicos nas páginas.</p><p>Esse assunto será visto no fim desse capítulo, vamos transformar um site estático</p><p>(que não muda) em um site com comportamento, como um jogo ou um aplicativo com</p><p>funcionalidades. Ou seja, sites que não são apenas sites informativos, como um site</p><p>pessoal ou site para exibir o cardápio de um restaurante.</p><p>Página 43 de 176</p><p>Categoria de Meta Info:</p><p>Esta categoria é utilizada principalmente para configurar o site. Essas tags oferecem</p><p>informações extras para o navegador ou outros sites, como por exemplo, indicar para uma</p><p>rede social qual imagem será utilizada quando o site for compartilhado nela.</p><p>Categoria de html semântico:</p><p>Esta categoria envolve inicialmente a tag <div> para agrupar tags em regiões</p><p>lógicas ou para criar containers (vamos entender melhor isto na criação de layouts).</p><p>Atualmente temos diversas outras tags para representar exatamente o que a tag</p><p><div> faz. Porém, com nomes mais representativos, por exemplo, <header>, <footer>,</p><p><main>, <detail>, <article>, <section> e assim por diante. Em outras palavras,</p><p>podemos agrupar diversos elementos da página dentro de um div para melhor organizar o</p><p>menu ou rodapé do site.</p><p>Esta foi apenas uma visão geral das categorias das tags. Neste capítulo, “Trilha</p><p>Fundamental”, vamos focar primeiramente nas tags básicas, de formatação e formulários.</p><p>Essas tags resolvem 80% das funcionalidades que precisamos. E se você decidir, ao final</p><p>desse capítulo, aprender mais sobre servidores, esse é o conhecimento básico sobre HTML</p><p>que você precisará ter.</p><p>Ter a visão geral das tags e suas categorias, irá ajudar quando chegar o momento</p><p>de fazer sites com funcionalidades mais específicas, no caso de você decidir focar na área</p><p>de Frontend.</p><p>Agora que você já entendeu o básico sobre o funcionamento de uma página web,</p><p>chegou a hora de nos aprofundarmos nas principais tags HTML na próxima seção.</p><p>Página 44 de 176</p><p>As Principais Tags HTML</p><p>Tags HTML fornecem uma forma de desenvolvedores web criarem marcações em</p><p>páginas web para dar estrutura em seu conteúdo. Em outras palavras, são blocos de</p><p>construção de documentos que fornecem instruções para os navegadores em como as</p><p>informações serão exibidas.</p><p>Para iniciar, precisamos conhecer as tags que fazem parte da estrutura de uma</p><p>página web:</p><p>As tags html, head e body fazem parte da estrutura base. Note que a tag html</p><p>indica que a página começa na linha 02 e termina na linha 13, note também que <html></p><p>indica início e </html> indica fechamento ou fim da tag aberta na linha 02. A mesma forma</p><p>acontece com a tag head da linha 03 até 07 e com a tag body entre a linha 08 e 12.</p><p>A tag title informa para o navegador o título desta página, no google chrome é o</p><p>que será exibido na legenda a aba onde a página foi aberta.</p><p>A tag meta fornece configurações ao navegador. Por exemplo, na linha 04 é</p><p>informado que a página usa o conjunto de caracteres UTF-8. Também temos a tag link</p><p>para importar informações de um arquivo interno ou de outros lugares da internet, como por</p><p>exemplo um arquivo de estilo, que estudaremos ainda nesse capítulo.</p><p>Em resumo, as tags html, head, body, link, title e meta fazem parte da</p><p>estrutura de todo arquivo HTML. Elas servem para separar o arquivo em seções, mas não</p><p>produzem nenhum efeito visual na página.</p><p>Dentro da tag body é onde iremos colocar as tags utilizadas para criar componentes</p><p>visuais. As principais tags visuais estão no código a seguir:</p><p>Página 45 de 176</p><p>As principais tags utilizadas para marcar o conteúdo e mudar a representação visual</p><p>dos elementos na páginas são h1, h2, p, a, ul, ol, img, hr, input e button. Outras</p><p>tags complementares para estes elementos são form, span e div. A seguir constam as</p><p>principais tags com respectivas explicações dos elementos visuais que elas geram:</p><p><h1> Representar um título </h1></p><p><h2> Representar um subtítulo </h2></p><p><p> Representar um parágrafo </p></p><p>Dar <em>ênfase</em> em uma parte do texto</p><p><ul> e <ol> para criar listas e dentro de usamos <li> para representar os itens</p><p>das listas</p><p><img> para exibir imagens</p><p><hr> para criar uma linha horizontal</p><p><form> para enviar dados para outras páginas ou servidores</p><p><input> para criar campos de digitação para obter dados do usuários (estes</p><p>campos geralmente estão dentro dos forms)</p><p><a> é uma âncora ou link para navegar na mesma página ou ir para outra página</p><p><button> para criar botões para ações do seu site</p><p><span> para ajudar no posicionamento e formatação de partes de um texto</p><p><div> é uma tag não visual que é utilizada para agrupar outros elementos, por</p><p>exemplo, podemos ter uma lista de itens para representar o menu do site, desta</p><p>Página 46 de 176</p><p>maneira tudo isto pode estar dentro de uma <div> para agrupar o menu. Em outra</p><p>div colocamos um título e alguns parágrafos para representar um conjunto de</p><p>informações. Vamos entender melhor os reais motivos deste agrupamento mais</p><p>adiante.</p><p>Para entender melhor</p><p>Atenção</p><p>A maioria das tags, precisam de uma marcação de início e fim. Por exemplo, <p></p><p>um texto </p> e a tag <title>. Essas tags precisam de um valor entre entre seu início e</p><p>fim. Esse valor pode ser um texto ou até outras tags.</p><p>Porém existem algumas tags que não precisam de valores internos. Por isso não</p><p>precisam de indicação de fim. Por exemplo, as tags <meta>, <img> e <input> se</p><p>enquadram nessa categoria.</p><p>Outro ponto importante são as tags que estão dentro de outras tags, formando assim</p><p>uma hierarquia. Ou seja, uma tag <meta> precisa estar dentro da tag <head>. Da mesma</p><p>forma, todo conteúdo que precisa ser exibido na página precisa estar dentro da tag <body>.</p><p>Existem tags, como o <form>. que também funcionam desta forma. No caso</p><p>dessa tag, todos campos <inputs> devem ficar dentro do formulário.</p><p>🏆 Entendendo marcações HTML na prática</p><p>Usando o conteúdo abaixo, crie o arquivo enzo-pascal.html e digite ou copie e cole</p><p>este conteúdo e veja como ele será exibido em seu navegador.</p><p>Olá, sou o Enzo Pascal.</p><p>UI/UX Designer</p><p>Especialista em Web Design. Como profissional, meu foco é</p><p>criar experiências significativas para as pessoas.</p><p>Designer brasiliense, 29 anos, apaixonado por desenvolvimento de interfaces e</p><p>viciado em tecnologia. Nos últimos 4 anos trabalhei em empresas</p><p>de tecnologia,</p><p>comunicação e design. Sempre com foco em produtos digitais.</p><p>Projetos</p><p>- Wordle: Trabalhei na criação do jogo de caça palavras usando apenas tecnologias</p><p>do lado do cliente (HTML, CSS e JS) que passou de uma diversão para minha esposa em</p><p>algo que virou febre na internet</p><p>- Fazae: Trabalhei no design e elaboração dos conceitos para um todo list (gestor</p><p>de tarefas) focado em usabilidade e dispositivos móveis, partindo de pesquisas e</p><p>prototipação até a criação de componentes webs.</p><p>- Trot: Participei da codificação do módulo frontend do projeto que é uma versão</p><p>simplificada do strava, focando no frontend utilizando dados de dispositivos</p><p>móveis, como GPS para armazenar a localização e exibição destes percursos usando</p><p>bibliotecas como geemap.org, leafletjs e mapbox</p><p>Habilidades</p><p>UX Research</p><p>Product Design</p><p>Página 47 de 176</p><p>https://geemap.org/</p><p>https://leafletjs.com/</p><p>https://www.mapbox.com/industries/outdoors</p><p>UI Design</p><p>Web Designer</p><p>HTML & CSS</p><p>JavaScript e VueJS</p><p>Contato</p><p>E-Mail: enzo@web.dev</p><p>Fone: (12) 991002003</p><p>A saída do conteúdo anterior, sem fazer as marcações do html, é apresentada na</p><p>figura 2.21 a seguir:</p><p>Figura 2.21: exibição de html sem formatação</p><p>Perceba que o conteúdo é apresentado em único parágrafo, sem sequer respeitar as</p><p>linhas que pulamos no texto. Vamos consertar isso na atividade a seguir.</p><p>HTML #3</p><p>Abra o arquivo enzo-pascal.html com texto original no seu editor de texto e aplique</p><p>os conhecimentos adquiridos sobre tags do HTML, será necessário criar a estrutura base do</p><p>html, e para cada parte do conteúdo iremos precisar utilizar as tags corretas, como h1 e p,</p><p>ul e li para os conteúdos de lista e assim por diante.</p><p>Depois de adicionar as marcações, a exibição do conteúdo deverá ser algo parecido</p><p>com a visualização abaixo:</p><p>Página 48 de 176</p><p>Tente fazer a marcação antes de continuar a leitura, se necessário volte na seção</p><p>sobre principais tags para utilizar como apoio.</p><p>Não ficou muito parecido? Não se preocupe, não existe apenas uma forma de fazer,</p><p>pode ter variações e todas estão corretas.</p><p>Para quem já tentou e não tem certeza se está no caminho, seguem algumas dicas:</p><p>- Note que a base de importância é o nome Enzo Pascal que recebe o h1</p><p>- Em seguida os subtítulos UI/UX Designer, Projetos, Habilidades e Contato tem a</p><p>mesma importância e podem receber um h2. Lembrando que não é aconselhável ter</p><p>diversos h1 na página, mas h2 faz sentido ter mais de uma vez.</p><p>Página 49 de 176</p><p>- Os itens (li) dentro de projetos e habilidades representam uma lista e podem ser</p><p>marcados com ul</p><p>- Os nomes dos projetos podem receber um h3</p><p>- Quase todo restante são parágrafos</p><p>- As palavras importantes estão com ênfase</p><p>- O E-mail tem um link usando a tag</p><p><a href="mailto:enzo@web.dev">enzo@web.dev</a></p><p>Depois de tentar fazer o exercício acima, assista à solução desse problema na vídeo</p><p>aula Quais são as 9 principais tags de texto do HTML.</p><p>Tags e seus atributos</p><p>Saber como utilizar os atributos de tags é essencial para um desenvolvedor web.</p><p>Com ajuda desses atributos conseguimos adicionar ainda mais poder em nossas</p><p>marcações de tags HTML. Em outras palavras, atributos de tags são utilizadas para</p><p>adicionar informações extras criando assim mais funcionalidades nos elementos da página.</p><p>Atributos são utilizados para especificar informações como o tamanho de uma</p><p>imagem, o endereço de um link, a descrição de um campo, entre outros demais usos. Por</p><p>exemplo, utilizamos o atributo href na página do Enzo Pascal para acrescentar a</p><p>informação do destinatário do email da tag <a>:</p><p><a href="mailto:enzo@web.dev">enzo@web.dev</a>.</p><p>Outro exemplo é quando usamos o atributo charset da tag <meta> para informar ao</p><p>navegador qual a codificação binária usada no texto da página, que no caso a seguir é</p><p>UTF-8:</p><p><meta charset="UTF-8">.</p><p>A tag html possui o atributo lang onde podemos informar qual o idioma da página,</p><p>desta forma, o navegador sabendo que sua página está em Portugues do Brasil (<html</p><p>lang="pt-br">), conseguirá dar sugestões de tradução para outros idiomas quando</p><p>alguém de outro país acessá-la.</p><p>Página 50 de 176</p><p>https://l.dev.pro.br/as-9-tags-html-textuais</p><p>Cada tag tem em sua documentação quais atributos estão disponíveis para</p><p>adicionar comportamentos extras. Por exemplo, podemos saber todos atributos da tag <a></p><p>através da documentação da mozilla (MDN):</p><p>Estrutura, DOM e a anatomia de uma página HTML</p><p>Todo documento HTML bem formado possui uma tag principal que se chama</p><p><html>. Ela é chamada tag raiz. Todas as demais tags devem ser definidas dentro dela.</p><p>Normalmente temos duas tags filhas de <html>. São elas:</p><p>- <head> onde vamos configurar informações adicionais de exibição da página, como</p><p>melhor visualização em dispositivos móveis. Outras configurações podem estar</p><p>relacionadas a funcionalidades e usabilidade, com as informações que podem ser</p><p>utilizadas por sites de buscas e redes sociais, como Google e Facebook. Na tag</p><p>head também colocamos links de recursos que devem ser carregados dentro da</p><p>página. Por exemplo, um arquivo de estilo (CSS) ou fontes web para mudar a</p><p>tipografia (letras) da página.</p><p>- <body> onde colocamos o conteúdo visual da página e suas respectivas marcações</p><p>HTML. Veja o formato geral de documento HTML bem formato a seguir:</p><p>Algumas definições:</p><p>TAGs HTML: São nomes válidos dentro da sintaxe do HTML que o navegador reconhece e</p><p>exibe seguindo sua funcionalidade. Exemplo: <h1>, <p>, <img>, <input> e assim por</p><p>diante.</p><p>Elemento HTML: Às vezes usado como sinônimo de TAG. Mas quando se fala de</p><p>elemento, normalmente a referência é feita à tag e todas as demais que definidas como</p><p>suas filhas. Um exemplo é fazer referência a um menu. A tag deste menu pode ser <nav> e</p><p>Página 51 de 176</p><p>https://l.dev.pro.br/atributos-de-elementos-html</p><p>https://l.dev.pro.br/fontes-do-google</p><p>dentro dele pode existir uma lista <ul> com diversos itens de menu, cada um definido com</p><p>a tag <li>.</p><p>Atributo de TAG: Cada tag HTML tem seu conjunto de atributos e valores. Por exemplo, a</p><p>tag <img …> tem os atributos src e width, onde são definidos o endereço da imagem</p><p>(URL) e também seu tamanho, respectivamente. Vejo a seguir o exemplo deste código</p><p>Para validar o entendimento da sintaxe da linguagem de marcação HTML, tente</p><p>identificar o erro do código html a seguir:</p><p>Atenção: O código html abaixo contém erros</p><p>Conseguiu identificar um ou dois problemas? Sim, o código acima tem erro de</p><p>sintaxe. Embora o navegador exiba todo conteúdo, a árvore de elementos está errada.</p><p>Então saber identificar erros de sintaxe em um código HTML é fundamental para um</p><p>desenvolvedor. Vamos aos erros com as correções:</p><p>Página 52 de 176</p><p>Embora o código anterior esteja correto, fica muito mais legível se for adicionado um</p><p>espaçamento (indentação) nas tags filhas de outra. Assim fica muito mais fácil, apenas</p><p>vendo a indentação, saber quais tags são filhas de outras, como no código indentado a</p><p>seguir:</p><p>Agora o código não possui erros e está muito mais legível. Perceba como a</p><p>indentação deixa mais fácil saber onde cada elemento começa e onde termina.</p><p>A tag de fechamento </, em vez de <, é necessária na maioria das tags. Porém</p><p>,existem as que não permitem a definição de tags filhas dentro delas. Por isso, não</p><p>precisamos fechá-las. Alguns exemplos de tags que não precisam de fechamento são:</p><p><meta>, <link>, <input> e <img>. Desta forma, um código como o a seguir está</p><p>incorreto:</p><p>Atenção: O código html abaixo contém erros</p><p>Página 53 de 176</p><p>O código acima está incorreto porque a tag <img> não pode ter qualquer outra tag</p><p>como sua filha, inclusive a tag h1, usada no exemplo. A seguir segue um resumo do que</p><p>vimos sobre sintaxe de elementos:</p><p>E a seguir segue resumo dos elementos na estrutura principal de um documento</p><p>HTML comentados:</p><p>Página 54 de 176</p><p>Finalmente, uma outra forma de olhar um documento HTML é pensar que os</p><p>elementos podem ser vistos como uma estrutura de dados chamada árvore. Nessa</p><p>estrutura cada elemento pode ter uma ou mais ramificações. Além disso, cada elemento</p><p>tem sempre um elemento pai, com exceção da tag HTML. Justamente</p><p>por isso ela se</p><p>chama tag ou elemento raiz. Veja:</p><p>Figura 2.22: árvore de elementos HTML</p><p>Formulários e campos para obtenção dados</p><p>HTML forms (formulários) com as tags <input>, <select> e <textarea> são a</p><p>forma de coletar dados do usuário. A tag <input> é o pilar do html form e permite</p><p>desenvolvedores criarem vários tipos de campos (type).</p><p>Página 55 de 176</p><p>Por exemplo, temos campos de entradas como checkbox, radio buttons e muito</p><p>mais. Com a ajuda da tag input, podemos também criar funcionalidades mais avançadas</p><p>como auto completar, regras de validações e algumas outras que veremos neste livro.</p><p>O principal ponto é entender que a tag input precisa do atributo name, que irá enviar</p><p>o conteúdo preenchido pelo usuário identificado com o valor desse atributo. Em outras</p><p>palavras, o servidor que for receber esses dados vai identificá-los pelo nome que consta no</p><p>atributo name.</p><p>O atributo type também é importante e irá facilitar a usabilidade de como o usuário</p><p>irá preencher estes dados, ou seja, ao invés do usuário precisar digitar o nome da cidade ou</p><p>estado, ele poderá escolher em lista de opções. A seguir é apresentado um código de</p><p>formulário html com alguns tipos de input.</p><p>O resultado da renderização do HTML acima será</p><p>Figura 2.23: renderização de formulário HTML</p><p>Página 56 de 176</p><p>Faça uma pesquisa em algum site de busca pelo termo: "html input mdn", isto te</p><p>levará para o site da mozilla developers, diretamente para a documentação da tag input. Se</p><p>quiser procurar sobre outra tag, basta alterar de input para button ou select e assim a</p><p>pesquisa será "html select mdn". Veja um exemplo a seguir:</p><p>Figura 2.24: Exemplo de pesquisa ao site da Mozila.</p><p>Como desenvolvedor web é uma boa prática ir além dos tutoriais, vídeos ou cursos e</p><p>olhar a documentação da tecnologia que você está utilizando. A documentação sobre HTML</p><p>& CSS da Mozilla é simplesmente fantástica, completa e atualizada. Com ela vamos</p><p>conseguir entender tudo que podemos personalizar ou alterar nas funcionalidades das tags</p><p>do HTML.</p><p>Outro atributo bem utilizado é o value, onde podemos colocar um valor inicial no</p><p>campo de um formulário. Veja o exemplo no código a seguir:</p><p>Página 57 de 176</p><p>https://l.dev.pro.br/mozila-input-element</p><p>Desta forma, o valor do campo vem preenchido com um valor padrão, sem que o</p><p>usuário precise digitar nada! Note que como é do tipo texto (text), o usuário pode</p><p>modificá-lo para qualquer outro valor. Podemos resumir que um campo input tem pelo</p><p>menos um nome e um valor.</p><p>Confira outros tipos de campos da tag input que podemos utilizar e são bem úteis:</p><p>text, password, radio, checkbox, submit, reset, button, file, hidden, image, date,</p><p>datetime-local, time, week, month, number, range, email, url, tel, color, search</p><p>O interessante de se utilizar um tipo mais específico é a validação de dados que o</p><p>navegador vai realizar. Por exemplo, ao utilizar um type="number" em vez de text, o</p><p>campo não irá aceitar letras diferentes dos algarismos, ou seja, letras de 0 a 9.</p><p>Já type="email" não vai permitir um email sem a letra @ e assim por diante.</p><p>Um tipo que pode parecer estranho neste momento é o tipo hidden. Esse é um</p><p>campo oculto que o usuário não vê. Contudo o desenvolvedor o utiliza no formulário para</p><p>uso interno, como guardar uma chave de segurança. O campo será enviado para o servidor,</p><p>mas o usuário não irá visualizar e interagir com ele diretamente.</p><p>Abaixo seguem exemplos dos tipos de input do lado esquerdo com respectiva</p><p>renderização no navegador do lado direito:</p><p>Página 58 de 176</p><p>Outro ponto importante de utilizar um campo específico como de data ou hora é que</p><p>se o usuário abrir em um navegador no Mac ou no celular, a interface para escolha da data</p><p>ou horário vai ter um estilo mais próximo do padrão do dispositivo. Ou seja, o desenvolvedor</p><p>web não precisa criar um componente ou estilo de data e hora, o próprio navegador irá</p><p>fornecer um conforme o sistema operacional onde ele está rodando.</p><p>Nesta sessão a ideia é passar pelos componentes para coletar dados do usuário.</p><p>Mais adiante vamos entender como esses dados são capturados. Ou seja, neste momento</p><p>estamos mais interessados do lado do cliente/navegador (frontend) e não precisamos nos</p><p>preocupar como eles serão recebidos e tratados no lado do servidor (backend).</p><p>Página 59 de 176</p><p>Contudo, mesmo sendo código do lado do frontend, é fundamental que mesmo um</p><p>desenvolvedor backend saiba todos detalhes sobre envio de dados e por isso que esses</p><p>conceitos estão sendo passados nessa trilha fundamental.</p><p>Para maior entendimento, veja essa vídeo aula: que vai explicar as diferentes formas</p><p>de envio de parâmetros de um formulário web para o servidor: “O que todo programador</p><p>web deveria saber sobre formulários HTML?”</p><p>Página 60 de 176</p><p>https://l.dev.pro.br/formulario-html</p><p>https://l.dev.pro.br/formulario-html</p><p>Perguntas do Capítulo 2</p><p>URL ou Link</p><p>O que é uma URL?</p><p>Como se chama o protocolo inseguro de comunicação na internet?</p><p>Como se chama o protocolo seguro de comunicação na internet?</p><p>O que é um path?</p><p>Qual letra define a raíz de um site?</p><p>Qual o nome formal de um endereço da internet?</p><p>O que é uma query string?</p><p>Qual é a letra que define o início de uma query string em uma URL?</p><p>Qual é a letra que divide os parâmetros de uma query string?</p><p>Qual é a letra que que nome e valor de um parâmetro de uma query string?</p><p>Qual a porta padrão do protocolo http?</p><p>Qual a porta padrão do protocolo https?</p><p>Quais são todas as partes de uma URL?</p><p>Divida a URL em todas sua partes:</p><p>https://pythonpro.com.br/comunidade-devpro-matriculas-abertas?utm_campaign=CDP&utm</p><p>_medium=trafego-organico&utm_source=ebook-rpv</p><p>Domínio, IP e DNS</p><p>O que é um endereço de IP?</p><p>Quais as duas versões mais usadas de endereço de IP?</p><p>O que é o serviço de DNS?</p><p>Onde comprar é possível comprar domínios no Brasil?</p><p>Cite 2 serviços de DNS você conhece.</p><p>O que são subdomínios?</p><p>Que tipo de registro conecta um subdomínio a um endereço de IP?</p><p>Para que serve o tipo CNAME de registro?</p><p>Página 61 de 176</p><p>https://pythonpro.com.br/comunidade-devpro-matriculas-abertas?utm_campaign=CDP&utm_medium=trafego-organico&utm_source=ebook-rpv</p><p>https://pythonpro.com.br/comunidade-devpro-matriculas-abertas?utm_campaign=CDP&utm_medium=trafego-organico&utm_source=ebook-rpv</p><p>Qual comando serve para descobrir o IP conectado a um domínio?</p><p>Qual endereço de IP aponta para a própria máquina?</p><p>Qual o nome do domínio que aponta para a própria máquina?</p><p>Como Funcionam as Páginas de Internet</p><p>Quais são as 3 principais tecnologias para criação de uma página web?</p><p>O que é HTML?</p><p>Quais elementos compõem uma página HTML?</p><p>Quais as ferramentas necessárias para criar e acessar uma página de internet?</p><p>O que é um arquivo de texto?</p><p>Qual a diferença de um arquivo de texto puro para um documento do Microsoft</p><p>Word?</p><p>As Principais Tags HTML</p><p>Quais são as 3 tags html que formam a base de um documento HTML?</p><p>Explique, com suas palavras, para que servem as 9 principais tags visuais a</p><p>seguir: p, h1, h2, h3, em, ul, li, ol e a.</p><p>Tags e seus atributos</p><p>O que são atributos de elementos html?</p><p>Para que servem os atributos de elementos html?</p><p>Estrutura DOM e anatomia da Página html</p><p>Qual a diferença entre tag e elemento html?</p><p>Quantos pais pode ter uma tag?</p><p>Como se chama a tag raiz de um html? Por que ela é chamada assim?</p><p>Formulário e Campos</p><p>Qual tag define um formulário html?</p><p>Cite 5 tipos de entradas de um formulário.</p><p>Para que servem os atributos type, name e value de um input?</p><p>Qual atributo do formulário serve para definir a url para onde os dados serão</p><p>enviados?</p><p>Página 62 de 176</p><p>Qual atributo do formulário serve para definir por qual verbo http os dados serão</p><p>enviados?</p><p>Quais são os dois verbos http pelos quais um formulário pode enviar dados?</p><p>Em que parte da url ficam os dados enviados por um formulário através do método</p><p>GET?</p><p>Qual o tipo de input que serve como botão para envio de dados de um formulário?</p><p>Qual a diferença no comportamento de um navegador ao se mandar dados através</p><p>do método POST e através do método GET? Em qual contexto devemos usar esses</p><p>dois</p><p>verbos HTTP?</p><p>Página 63 de 176</p><p>Capítulo 3: Fundamentos do CSS</p><p>“A beleza é a promessa da felicidade."</p><p>Stendhal, O Vermelho e o Negro</p><p>Até essa parte da leitura do livro você deve estar se perguntando: “Porque as</p><p>páginas que construímos até agora são tão feias?”. E concordo com você, elas são muito</p><p>feias! Mas a razão disso é que focamos primeiro em aprender a parte que apenas define</p><p>conteúdo que vai aparecer na tela, o HTML.</p><p>Agora chegou a hora de adicionar elementos estéticos a esse conteúdo. E por isso</p><p>vamos aprender uma nova tecnologia nesse capítulo, o CSS!</p><p>Motivações para entender CSS</p><p>Em poucas palavras, CSS (Cascading Style Sheets) é o que deixa uma página</p><p>web bonita, ou seja, adiciona estilo (style) no seu conteúdo criado com as marcações do</p><p>HTML.</p><p>O estilo de qualquer página na web é feito através de CSS que seu navegador</p><p>interpreta e aplica nos elementos de sua página web. Exemplos são cores, fontes (letras) e</p><p>tamanhos, diferentes de uma página preta e branca criada apenas com HTML padrão.</p><p>Página 64 de 176</p><p>A seguir temos o exemplo de uma página apenas com marcações HTML e sua</p><p>versão com CSS</p><p>Figura 3.01: Página sem CSS</p><p>Figura 3.02: Página com CSS. Site: https://jimramsden.com/</p><p>Adicionar estilo em uma página faz toda diferença. Esse estilo traz vida e, se feito da</p><p>forma correta, pode contar uma estória e gerar uma experiência que faz a diferença para o</p><p>visitante da página.</p><p>Página 65 de 176</p><p>https://l.dev.pro.br/jimramsden</p><p>Figura 3.03: Meme sobre HTML sem e com CSS</p><p>Se você acabou de iniciar nos estudos de programação web e não sabe se vai ser</p><p>um desenvolvedor mais voltado para backend ou para o frontend, você precisa conhecer o</p><p>que é responsabilidade do CSS. Ambos áreas precisam saber esses conceitos.</p><p>Todo programador web precisa saber que HTML é a estrutura do documento e seu</p><p>conteúdo. CSS é o estilo mais bonito e JavaScript (que vamos entender mais para frente</p><p>sua necessidade), fornece o comportamento da página..</p><p>Por último e não menos importante: evite pegar o "atalho" e pular diretamente para</p><p>aprender uma biblioteca que faça o estilo usando uma abstração do CSS. Esse caminho</p><p>pode parecer mais rápido no início, mas está fadado ao fracasso. Sem conhecer os</p><p>fundamentos você vai levar horas para conseguir fazer mudanças simples de estilo.</p><p>Por outro lado, conhecendo um pouco do fundamento dessa incrível tecnologia que</p><p>foi criada lá no início da web, na década de 90, e está presente em todas as páginas da</p><p>web até hoje, o processo será bem rápido, menos frustrante e até mais divertido.</p><p>Isto independente se o projeto que será feito usa ou não bibliotecas ou frameworks</p><p>CSS. Inclusive, aprendendo este fundamento, vai tornar muito mais fácil aprender e utilizar</p><p>qualquer framework CSS.</p><p>O que é Cascading Style Sheets (CSS)</p><p>Folha de estilo em cascata (Cascading Style Sheets) é a linguagem que descreve</p><p>a apresentação de um documento HTML. O CSS descreve como os elementos são</p><p>exibidos. Assim como HTML, CSS não é uma linguagem de programação e também não</p><p>é uma linguagem de marcação, CSS é uma folha de estilo. CSS é o que seletivamente</p><p>adiciona estilo em elementos HTML.</p><p>Página 66 de 176</p><p>Em resumo, CSS é a linguagem que permite aplicar estilo, assim modificando a</p><p>aparência das marcações de um documento HTML.</p><p>E talvez você tenha dúvida sobre o significado cascata (cascading) no nome da</p><p>tecnologia. Em resumo, as marcações do HTML tem uma hierarquia. Assim um estilo</p><p>adicionado a um elemento pai será aplicado em todos seus elementos descendentes.</p><p>Também é possível selecionar um elemento mais específico e apenas nele aplicar</p><p>um outro estilo diferente.</p><p>Desta forma, o estilo em cascata significa que um estilo aplicado a um elemento</p><p>será aplicado a todos os seus descendentes. O termo descendente é melhor do que filho,</p><p>dado que o estilo será aplicado aos elementos filhos, netos, bisnetos e assim por diante.</p><p>Veja na figura 3.04 uma representação:</p><p>Figura 3.04: Visualização da “Cascata” do CSS</p><p>Note na imagem da direita que uma cor de fundo e uma fonte negrita (bold) pode ser</p><p>aplicada ao elemento <section> e assim será aplicado também nos elementos</p><p>descendentes <h1>, <ul> e <li>.</p><p>Porém o elemento <ul> também pode receber uma cor de fundo diferente e este</p><p>estilo será aplicado ao próprio elemento <ul> e também aos seus descendentes, neste</p><p>caso, o elemento <li> e assim podemos entender o estilo cascata do nome da tecnologia</p><p>CSS.</p><p>Página 67 de 176</p><p>🏆 CSS na prática</p><p>CSS #1</p><p>Na prática, CSS é bem simples. Precisamos de um seletor para indicar quais</p><p>elementos da página devem receber o estilo através de propriedades do CSS, que são</p><p>pares de chave-valor para aplicar regras de estilos. Veja a seguir um exemplo de como</p><p>aplicar uma cor de fundo em todos os elementos section e uma cor vermelha nos títulos</p><p>respectivamente:</p><p>Com o estilo acima, conhecemos a propriedade CSS background-color que aplica</p><p>uma cor de fundo e pode ser aplicada em qualquer elemento HTML.</p><p>Note que existem diferentes formatos no valor, podemos usar constantes como</p><p>green, blue, stateblue ou o formato hexadecimal (#c9daf8) que inicia com a cerquilha (#)</p><p>seguido de alguns caracteres que também representam um intervalo de cor. Mais adiante</p><p>vamos detalhar esse formato mais complexo. Nesse momento podemos usar o nome das</p><p>cores para definir o valor de uma propriedade CSS, como a seguir:</p><p>O exemplo acima mostra como selecionar todos elementos <h1> e aplicar a cor</p><p>vermelha através da propriedade color. Provavelmente você se perguntou: “onde fica esse</p><p>código?”. A resposta é que existe a tag <style> do HTML que vai dentro <head> onde</p><p>podemos colocar um conjunto de regras. Veja os elementos na figura 3;05:</p><p>Página 68 de 176</p><p>Figura 3.05: Elementos que definem uma propriedade CSS</p><p>Já no código a seguir você confere uma página completa, com o CSS anterior</p><p>definido na tag style:</p><p>Passos:</p><p>- Crie um novo arquivo HTML chamado css-tag-style.html</p><p>- Digite o conteúdo acima</p><p>- Salve o arquivo</p><p>- Abra o arquivo html no seu navegador</p><p>Página 69 de 176</p><p>Figura 3.06:Renderização com CSS</p><p>Para entender melhor como as propriedades funcionam e também conhecer mais</p><p>propriedades, adicione dentro do bloco { } e abaixo da propriedade color as duas</p><p>propriedades a seguir:</p><p>Salve o arquivo novamente e atualize o navegador para ver o resultado, note que</p><p>alteramos o tamanho da fonte e centralizamos o conteúdo da tag h1.</p><p>Queremos também centralizar o h3 e o parágrafo. Então adicione o seletor para</p><p>cada elemento e a propriedade text-align: center para cada um. O resultado esperado</p><p>é o da imagem abaixo, tente fazer primeiramente sem olhar o código.</p><p>Figura 3.07: Mudança de tamanho e centralização de texto com CSS</p><p>Página 70 de 176</p><p>Se tentou fazer apenas com base no código apresentado anteriormente e deu certo,</p><p>isto é muito bom, fazendo na tentativa e erro é uma ótima prática de memorização.</p><p>O código completo é apresentado a seguir:</p><p>- Pratique o máximo que conseguir</p><p>- Veja que ficou bem repetitivo o text-align, o style acima não é a melhor forma, mas é</p><p>um exemplo para facilitar o entendimento, mais para frente vamos ver formas mais</p><p>compactas de ter o mesmo resultado</p><p>- Não esqueça de salvar o arquivo</p><p>- Para não ter que repetir três vezes a propriedade, podemos deixar o seletor h1 com</p><p>apenas a propriedade de cor e tamanho e utilizar h1, h3, p para selecionar vários</p><p>elementos de uma vez e assim não repetir a propriedade. Veja que o CSSa seguir</p><p>faz a mesma com um pouco menos de repetição.</p><p>Página 71 de 176</p><p>Para entender melhor esses conceitos iniciais, assista à vídeo aula “Aprenda CSS</p><p>em 2 minutos”.</p><p>Depois de entender esses fundamentos, você precisa entender as diferentes formas</p><p>de se definir CSS em um arquivo HTML, assunto da próxima seção.</p><p>🏆 Estilo inline, Tag Style e arquivos externos</p><p>O HTML surgiu para fazer marcações dos textos e, em pouco tempo, surgiu a</p><p>necessidade de deixar tudo mais bonito. Os desenvolvedores gostariam de colocar uma cor</p><p>diferente em parte do texto ou uma cor de fundo diferente.</p><p>Assim, a primeira forma foi definir</p><p>os estilos na própria marcação HTML. Então</p><p>surgiu o estilo "inline" (na mesma linha). Podemos então usar o atributo style em</p><p>qualquer elemento HTML, veja como ficam as marcações que fizemos na seção anterior</p><p>usando esta forma:</p><p>Página 72 de 176</p><p>https://l.dev.pro.br/aprenda-css-em-2-minutos</p><p>https://l.dev.pro.br/aprenda-css-em-2-minutos</p><p>Em pouco tempo ficou evidente que colocar as marcações junto com as tags HTML</p><p>iria deixar o documento, no mínimo, bem verboso. Isso tornaria a manutenção bem mais</p><p>difícil porque toda vez que fosse necessário mudar o conteúdo ou o próprio estilo, seria</p><p>mais difícil localizar onde temos que alterar em meio de tantas informações misturadas.</p><p>Assim foi criada a tag <style> do HTML, para poder separar e agrupar o conteúdo</p><p>(HTML) de seu formato (CSS). Dessa maneira a definição de estilo inline virou uma má</p><p>prática a ser evitada, conforme mudança no código a seguir:</p><p>Usar a tag <style> é um pouco melhor, dado que estamos separando o conteúdo</p><p>do estilo. Mas ainda não é a forma utilizada em projetos reais. A utilização de arquivos de</p><p>css próprios, separados e carregados pelo navegador é a maneira mais utilizada.</p><p>Utilizar arquivos externos facilita a manutenção, facilitando a alteração do formato</p><p>das páginas de um projeto. Na prática é necessário apenas mover a tag style para um ou</p><p>mais arquivos separados e importá-los na página html que precisamos, com ilustrado no</p><p>exemplo a seguir:</p><p>Página 73 de 176</p><p>No seu sistema de arquivos, o exemplo acima vai ter dois arquivos na mesma</p><p>pasta, o arquivo da página HTML e o arquivo de estilo separado. Não esqueça que a página</p><p>precisa importar o estilo com a tag <link> passando o caminho do arquivo CSS, conforme</p><p>imagem 3.08:</p><p>Figura 3.08: Arquivos HTML e CSS separados</p><p>Em resumo, as três formas funcionam, mas colocar estilo inline é uma má prática.</p><p>A tag style também funciona, mas só é indicada em projetos muito simples, normalmente</p><p>que possuem uma só página.</p><p>Projetos mais complexos sempre separam o estilo em arquivos próprios. Por isso</p><p>passaremos a usar sempre essa terceira forma.</p><p>CSS #2</p><p>Passos:</p><p>- Crie um novo arquivo HTML chamado css-externo.html</p><p>- Copie ou duplique o conteúdo do desafio #1</p><p>- Converta o CSS da tag style em um arquivo CSS externo (style.css)</p><p>- Importe este arquivo usando a tag link na página</p><p>- Abra o arquivo html no seu navegador</p><p>- Valide que temos o mesmo resultado</p><p>Existe também um fator de ordem prática em não se utilizar a tag <style>. Ela vai</p><p>sobrescrever o estilo criado nas tags presentes dentro de <head>. Para entender esse</p><p>problema, assista à aula “Entre as 3 opções de código CSS, qual é melhor?”.</p><p>Agora que começamos a trabalhar com múltiplos arquivos, chegou a hora de usar</p><p>uma ferramenta mais apropriada para construir nossos projetos: o editor de código. Vamos</p><p>aprender a codar usando a ferramenta de um dev profissional na próxima sessão.</p><p>Página 74 de 176</p><p>https://l.dev.pro.br/qual-melhor-lugar-para-colocar-css</p><p>🚀 Dica DEV #1 - Editor de código</p><p>Neste ponto onde já criamos mais de uma página HTML, onde precisamos importar</p><p>um CSS diferente para cada uma delas, é trabalhoso ficar fechando e abrindo vários</p><p>arquivos diferentes.</p><p>Para facilitar a vida dos desenvolvedores existem aplicativos mais especializados</p><p>para fazer o nosso trabalho de criação e edição de código. Desta forma, vamos começar a</p><p>utilizar um editor de código de verdade.</p><p>Atenção</p><p>É bom lembrar que existem diversos editores de código. Se perguntarmos para</p><p>quatro ou cinco desenvolvedores diferentes qual é o melhor editor de código, provavelmente</p><p>cada um vai nos dar uma resposta diferente.</p><p>Assim, evite entrar na procura do editor de código perfeito, apenas siga a sugestão</p><p>deste tutorial, vamos utilizar o VSCode da Microsoft. Ele é leve, fácil de instalar e funciona</p><p>para todas as linguagens e sistemas operacionais.</p><p>Para saber os detalhes de como instalar o VSCode e criar um projeto para o</p><p>exercício que começamos a fazer, veja a vídeo aula “VSCode: a ferramenta de trabalho do</p><p>programador web”.</p><p>Para abrir seu código no VSCode, temos pelo menos duas formas: a primeira,</p><p>precisamos navegar até a pasta onde está nosso arquivo utilizando o gerenciador de</p><p>arquivos e clicar com o botão direito em "abrir com VSCode".</p><p>Página 75 de 176</p><p>https://l.dev.pro.br/vscode</p><p>https://l.dev.pro.br/vscode</p><p>Figura 3.09: Menu contextual do VSCode</p><p>Outra forma é abrir o VSCode primeiro e depois clicar em Arquivo, Abrir pasta e</p><p>então navegar até nossa pasta com os arquivos de código. Por exemplo, nossa pasta HTML</p><p>que criamos dentro de Documentos.</p><p>Nas duas formas, vamos conseguir abrir uma pasta onde criamos ou vamos criar</p><p>nossos arquivos de códigos, veja abaixo como fica um projeto aberto no VSCode:</p><p>Figura 3.10: Projeto aberto no VSCode</p><p>Note que só pelo fato do editor listar na esquerda todos arquivos da pasta que</p><p>abrimos (que também chamamos de projeto), onde com apenas um clique é possível abrir</p><p>qualquer arquivo. Só isso já é um grande diferencial que vai aumentar muito sua</p><p>produtividade!</p><p>Página 76 de 176</p><p>Mas um editor de código irá ajudar em vários outros aspectos, desde a visualização</p><p>para facilitar a leitura e nos ajudar a descobrir erros de sintaxe, auto completar e muitos</p><p>outros recursos que aos poucos, no decorrer deste livro, vamos entendendo melhor.</p><p>- Não se preocupe em querer aprender tudo sobre o VSCode neste primeiro</p><p>momento, apenas entenda o básico de abrir e alterar arquivos para fazer as tarefas</p><p>iniciais:</p><p>- Abrir uma pasta de projeto (onde tem um ou mais arquivos de código)</p><p>- Abrir e fechar um arquivo de código</p><p>- Alterar e salvar suas alterações</p><p>- Criar novos arquivos</p><p>- Renomear um arquivo existente</p><p>- Deletar um arquivo que não é mais utilizado</p><p>- Vamos ter um capítulo exclusivo de como ficar mais proficiente nessa incrível</p><p>ferramenta. Por enquanto, aprendemos o suficiente para conseguirmos fazer um</p><p>projeto web simples, que vamos iniciar na próxima sessão.</p><p>Aprendendo CSS criando uma página web</p><p>Seguindo a ideia de quebrar um problema grande e vários problemas menores,</p><p>vamos dividir a criação de uma página pessoal em várias etapas. Ao final dos próximos</p><p>nove exercícios, vamos ter uma página web completa.</p><p>Neste processo iremos praticar e entender vários aspectos importantes do CSS.</p><p>Iremos criar a página pessoal do Enzo ou Enza Pascal, conforme figura 3.09, que mostra o</p><p>resultado final e cada uma das etapas.</p><p>Aguente a tentação de tentar criar sua própria página, confie neste tutorial! Criar</p><p>uma página pessoal para outra pessoa irá facilitar muito sua vida. Assim você manterá o</p><p>foco em aprender e aplicar o CSS, ao invés de gastar tempo com o conteúdo. Ou tentando</p><p>achar uma foto sua que combine com a página. Então faça os desafios sendo o mais fiel</p><p>possível ao conteúdo e elementos HTML & CSS apresentados aqui.</p><p>Na figura 3.11 temos o resultado final da página que vemos construir e também os 9</p><p>passos necessários para chegar até o final:</p><p>Página 77 de 176</p><p>Figura 3.11: Etapas de criação de página web</p><p>Estilo em textos</p><p>Algumas vezes, apenas utilizando duas ou três propriedades CSS, conseguimos</p><p>mudar muito o visual e deixar uma página visualmente incrível ou, no mínimo, muito mais</p><p>interessante que sua versão com HTML puro.</p><p>Por outro lado, existem muitas propriedades dentro do CSS. Ao longo das décadas</p><p>de evolução dessa tecnologia muitas propriedades foram criadas, muitas substituindo o</p><p>comportamento de outras de maneira mais efetiva.</p><p>Um exemplo é a centralização de uma <div>. Vamos encontrar diversas formas de</p><p>fazer isto. Mas não se preocupe em conhecer o máximo de propriedades e sim em entender</p><p>apenas as principais. Quando precisarmos fazer algo específico, podemos fazer uma</p><p>pesquisa e descobrir sob demanda.</p><p>Página 78 de 176</p><p>Na figura 3.12 temos quase todas propriedades relacionadas à formatação de</p><p>textos. Confira esse mapa mental a seguir com as propriedades para formatar textos:</p><p>Figura 3.12: Principais propriedades para formatação de texto</p><p>Note que existem diversas propriedades para formatar um texto, seja um elemento</p><p><h1></p><p>ou um <p>. Conseguimos desde mudar a cor, indo até o espaçamento entre letras,</p><p>palavras e espaço entre linhas. É possível fazer vários ajustes finos com isto.</p><p>Porém o foco fundamental desta fase inicial não é apresentar tudo, como fizemos</p><p>aqui nesta seção de estilo para textos, mas sim apresentar as mais utilizadas e versáteis</p><p>propriedades de CSS.</p><p>Por exemplo, a propriedade color, que serve para atribuir uma cor de texto em</p><p>qualquer elemento HTML. Na figura 3.13 constam as principais propriedades para</p><p>formatação de texto:</p><p>Página 79 de 176</p><p>Figura 3.13: Propriedades mais usadas para textos e tipografia</p><p>Com o que veremos aqui conseguiremos criar muitas páginas bonitas com CSS,</p><p>ainda que não conheçamos todas propriedades. Depois de aprender os fundamentos do</p><p>CSS, será muito mais fácil aprender novas propriedades por conta própria.</p><p>Por último e não menos importante: tente fugir da tentação de utilizar todas as</p><p>propriedades para mostrar seu conhecimento de CSS. Em vez disso, busque construir</p><p>páginas elegantes com o mínimo possível de propriedades.</p><p>Procure sempre formas de reduzir a quantidade de elementos CSS nas suas</p><p>páginas. Se existe uma forma de fazer a mesma coisa com menos código, isto será mais</p><p>fácil de entender e dar manutenção no futuro. Siga a velha máxima de “menos é mais”.</p><p>🏆 Estilo no título #3.1</p><p>CSS #3.1</p><p>Vamos começar colocando em prática algumas propriedades para alterar a</p><p>formatação do texto de forma a deixar o mais próximo possível da imagem 3.14 a seguir:</p><p>Página 80 de 176</p><p>Figura 3.14: Estilização de título de página web</p><p>Passos:</p><p>- Crie o arquivo enzo-passo1.css</p><p>- Crie o arquivo enzo-passo1.html com a estrutura base do HTML (que vimos na</p><p>parte de HTML) e importe o CSS de estilo enzo-passo1.css</p><p>- Dentro do body, coloque os textos da figura 3.14 utilizando um <h2> e <h1></p><p>respectivamente.</p><p>- A cada alteração feita nos arquivos, abra no navegador e atualize a página para ver</p><p>o resultado.</p><p>- Veja no mapa mental anterior e localize a propriedade que altera o tamanho, depois</p><p>use os tamanhos 26px e 48px respectivamente.</p><p>- Também localize a propriedade que altera a cor e utilize as cores #00a78e e</p><p>#293651.</p><p>- No subtítulo vamos precisar trocar a fonte para uma que não tem serifa, utilize a</p><p>propriedade font-family: sans-serif;.</p><p>- No título vamos precisar deixar o texto negrito, utilize a propriedade font-weight:</p><p>bold;.</p><p>- Em todos os textos vamos precisar centralizar, procure no mapa mental a</p><p>propriedade para esta finalidade e aplique de forma a deixar todos elementos</p><p>centralizados</p><p>- Se seu CSS e HTML estiverem sem erros, sua página deverá estar igual a da</p><p>imagem 3.14. Se algo deu errado, é melhor verificar primeiramente a sintaxe. Ou</p><p>seja, ver se todas as tags do HTML estão abrindo e fechando, se o CSS está sendo</p><p>importado corretamente, se não faltou um ponto e vírgula no final de cada</p><p>propriedade CSS.</p><p>Página 81 de 176</p><p>- É muito importante que você faça o exercício, digite tudo e veja o resultado no</p><p>navegador de cada linha nova adicionada ou alterada nos arquivos, desta forma,</p><p>vamos entendendo o que cada propriedade está fazendo.</p><p>- Siga os nomes de arquivos propostos, desta forma, seu estudo estará mais</p><p>organizado.</p><p>- Lembre-se, conhecimento vem através dos dedos. Ficar apenas na leitura não vai te</p><p>tornar um desenvolvedor.</p><p>- Tente ao máximo fazer por conta própria até chegar o mais próximo da imagem. Se</p><p>não conseguir, não se preocupe, é normal no começo ter uma vírgula ou uma barra</p><p>invertida (/) que a gente nem sabia que dava para fazer com o teclado. É normal</p><p>faltar alguma letra ou ter alguma que foi digitada no lugar errado. Seu olhar para</p><p>estes detalhes vai ficando melhor com a prática.</p><p>- No próximo passo, vamos ter o código inicial do exercício mão na massa 3.2 o qual</p><p>vai resultar na imagem deste exercício, depois de tentar e ter sua versão, podemos</p><p>comparar e ver o que tem de diferente. Mas segure a tentação de correr lá e ver a</p><p>resposta, siga a leitura que na sequência vamos montando a resposta juntos.</p><p>Depois de tentar fazer o exercício por contra própria, assista à aula Estilização de textos</p><p>com CSS na prática! para comprar seu código e resultado obtido. Ver o vídeo também vai te</p><p>ajudar a aprender a usar melhor o VSCode.</p><p>Agora que você colocou a mão na massa, falta apenas um conceito muito importante para</p><p>você dominar o CSS: conhecer os tipos de seletores! E vamos resolver isso na próxima</p><p>seção.</p><p>Página 82 de 176</p><p>https://l.dev.pro.br/css-enzo-pascal-1</p><p>https://l.dev.pro.br/css-enzo-pascal-1</p><p>Introdução aos seletores CSS</p><p>No início do CSS, a forma de colocar estilo nos elementos era através do atributo</p><p>style (que é conhecido como estilo inline e funciona até hoje). Assim, em qualquer elemento</p><p>podemos adicionar estilo sem precisar de seletor, dado que o estilo vai ser aplicado</p><p>apenas no elemento atual com esse atributo.</p><p>Porém, além de misturar estilo, conteúdo e marcação em um único documento, o</p><p>estilo fica repetido em vários elementos HTML. Por exemplo, a propriedade de cor (color:</p><p>blue;) estará presente em todo elemento que quisermos definir com cor azul, como no</p><p>código a seguir:</p><p>Por isso foram criados os seletores. Com eles podemos especificar uma seleção</p><p>definindo que todos parágrafos devem ter cor igual a azul ou que todos títulos tem a fonte</p><p>em negrito. A seguir temos o exemplo de uso de atributo class para marcar elementos</p><p>HTML:</p><p>Conceitualmente, precisamos criar nomes de classes que podem ter um conjunto de</p><p>propriedades de estilo que podem ser reutilizadas em diversos elementos html. Isso deixa o</p><p>código mais fácil de se entender e dar manutenção.</p><p>Na prática, vamos fazer um exemplo de seletor pensando no exercício 3,1 e como</p><p>colocar estilo nos elementos h2 e h1 de forma a ficar como a imagem abaixo. Lembrando</p><p>que não queremos utilizar estilo “inline” para dar estilo, vamos precisar criar algumas regras</p><p>CSS para cada elemento.</p><p>Página 83 de 176</p><p>Figura 3.15: Estilização de h1 e h2 da página do Enzo Pascal</p><p>Embora ainda temos detalhes que podem ser ajustados, abaixo segue a versão</p><p>inicial para produzir a página como exibida anteriormente:</p><p>Existe um mecanismo no CSS que irá selecionar todos os elementos h2 da página</p><p>e aplicar as regras da esquerda (propriedades e valores), da mesma forma o seletor h1 e</p><p>suas regras (imagem da direita).</p><p>Este é o conceito de seletores do CSS, onde temos o seletor ou a especificação de</p><p>quais elementos devem receber o conjunto de regras que ficam dentro do bloco (par de</p><p>chaves { }).</p><p>Esta linguagem de seleção pode ficar mais sofisticada que o exemplo apresentado</p><p>aqui, mas esta é a base para selecionar os elementos e aplicar regras de estilo. E isto pode</p><p>ser combinado de diferentes formas, por exemplo, o text-align repetido para o h2 e h1</p><p>poderia estar em um bloco separado:</p><p>Página 84 de 176</p><p>Tipos de seletores</p><p>Existem outros tipos de seletores além do seletor de tag mostrado acima, confira a</p><p>lista de seletores do CSS:</p><p>- Seletor por tag: h1 { ... } aplica em todos h1 da página</p><p>- Seletor por classe: .título ou .title {...} aplica em qualquer elemento com a</p><p>class="title" independente do seu tipo de tag, este é o seletor bem versátil e</p><p>comum nos projetos</p><p>- Seletor por ID: #contato { } para o elemento com id="contato", seletor mais</p><p>específico, principalmente porque um ID deve ser único</p><p>- Seletores universais: * { } aplica as regras em todos os elementos da página</p><p>- Seletores por atributo: input[required] {} aplica apenas nos elementos do tipo</p><p>input com o atributo required (obrigatório)</p><p>Em um primeiro momento o seletor de tag pode parecer perfeito, o HTML fica</p><p>simples e temos um conjunto de regras que irão ser aplicadas em todos os elementos</p><p>daquele tipo.</p><p>Pode parecer uma boa ideia, mas na verdade é bem problemático! Para o <body>,</p><p>quando queremos aplicar a mesma família de fonte para toda página, pode ser útil. Mas não</p><p>é uma boa ideia quando a aparência de uma mesma tag pode ser diferente, de acordo com</p><p>o contexto onde ela é usada.</p><p>Por exemplo, se for definido um formato geral para a tag <p>, provavelmente</p><p>teremos</p><p>problemas. Essa tag é utilizada em diferentes contextos que exigem formatos</p><p>distintos.</p><p>Dentro de uma seção de projetos seus parágrafos <p> serão diferentes daquelas</p><p>presentes na seção de habilidades Por sua, um parágrafo no rodapé com certeza vai ter</p><p>outra cor e outro tamanho de fonte.</p><p>Página 85 de 176</p><p>Por isso, nesse caso é má ideia tentar definir um formato geral para todas tags <p>.</p><p>Esse problema será resolvido ao utilizar o seletor de classe em vez do seletor de tag. O</p><p>seletor de classe permite definir um conjunto de regras que é aplicado de forma pontual e</p><p>explícita, prática comum em projetos reais.</p><p>Desta forma, para aplicar estilo no elemento <h1> do exercício anterior, a boa</p><p>prática é adicionar um nome no atributo class e regras relacionadas a este nome como</p><p>pode ser visto a seguir:</p><p>Atenção</p><p>Existe um ponto antes do nome da classe no arquivo CSS, mas no HTML este</p><p>ponto não é digitado. Isto é assim, dado que se o exemplo acima estiver sem o ponto, o</p><p>interpretador CSS vai tentar achar o elemento <title> ao invés de qualquer elemento com</p><p>o atributo class com o valor title. Note que são coisas bem distintas.</p><p>Página 86 de 176</p><p>Especificidade de seletores CSS</p><p>Dado a marcação abaixo e seu CSS, qual será a cor do elemento <h1> exibida pelo</p><p>navegador? azul aplicado pelo estilo inline, vermelho aplicado pelo estilo do seletor de</p><p>classe ou rosa aplicado pelo seletor de tag? Implemente este código e faça o teste.</p><p>Página 87 de 176</p><p>A resposta é que o estilo inline tem mais prioridade, logo a cor azul sobrescreve a</p><p>cor atribuída pelo seletor de classe e de tag e assim o elemento <h1> será exibido em azul</p><p>(color: blue;)</p><p>Desta forma, existe uma hierarquia para o navegador utilizar para aplicar os estilos,</p><p>principalmente quando tem mais de uma regra aplicada para o mesmo elemento.</p><p>Especificidade e Hierarquia dos seletores:</p><p>- Estilo inline (style="color: pink")</p><p>- Seletores de ID (#contato)</p><p>- Seletores de classes, pseudo-classes e seletores de atributos (.title, btn:hover, [href])</p><p>- Seletores de tag e pseudo-elements (h1, ::before)</p><p>A ideia desta seção não é te dar todos os detalhes de especificidade neste</p><p>momento, vamos entender melhor isto na trilha de frontend, mas te mostrar que quando</p><p>você tentar aplicar um estilo e o mesmo não estiver funcionando, provavelmente é por que</p><p>existe uma seletor mais específico (seguindo a hierarquia) que está sobrescrevendo o estilo</p><p>desejado.</p><p>No exemplo abaixo, qual a cor do h1 novamente?</p><p>Na linha 9, temos o seletor "E" (.title1.title2), ou seja, vai aplicar nos elementos</p><p>que tenha a classe title1 e também a classe title2.</p><p>Página 88 de 176</p><p>No caso acima, a cor será vermelha (color: red;), novamente um seletor com duas</p><p>classes é mais específico que um seletor de apenas uma classe. Inclusive, o ideal é que a</p><p>gente consiga criar seletores CSS mais específicos ao invés de apenas .class.</p><p>Novamente, não se preocupe em criar seletores CSS corretos neste momento, mas</p><p>saber do problema de especificidade é muito importante! Aliás, falando em importante, veja</p><p>abaixo a notação !important</p><p>Existe uma exceção para as regras de hierarquia e especificidade, quando criamos</p><p>uma propriedade e na frente dela marcamos como !importante, isto faz com que ela seja</p><p>aplicada de qualquer forma.</p><p>No exemplo a seguir, mesmo que exista um seletor de classe que seja mais</p><p>específico, a cor pink será aplicada graças ao !important</p><p>Atenção</p><p>Colocar !important em seu CSS não vai resolver problemas de especificidade. Pelo</p><p>contrário, é um indicador que seu CSS está ruim e precisa ser revisado em questões de</p><p>especificidade.</p><p>Links adicionais:</p><p>https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Selectors</p><p>https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity</p><p>Visão geral dos seletores CSS</p><p>Nesta etapa, assim como vimos em outras seções, queremos passar uma visão</p><p>geral ou sistêmica de tudo que existe em questão de seletores CSS. Desta forma, vamos</p><p>apresentar uma visão geral e mostrar quais grupos de seletores CSS existem, porém não</p><p>há necessidade de se aprofundar no estudo deste assunto neste momento.</p><p>Página 89 de 176</p><p>https://l.dev.pro.br/seletores-css-mozila</p><p>https://l.dev.pro.br/css-especificidade</p><p>Veja na figura 3.16 os grupos. Nesta etapa é importante saber utilizar o seletor</p><p>universal, seletor de tag, de classe e ID. Conhecer também um pouco sobre a combinação</p><p>básica para dar mais especificidade é importante. Deixe os demais grupos, como o pseudo</p><p>de elemento/classe para quando realmente for necessário ou quando tiver na trilha de</p><p>frontend.</p><p>Figura 3.16: Estilização de h1 e h2 da página do Enzo Pascal</p><p>Para consolidar o seu conhecimento, assista à vídeo aula “Os 4 seletores CSS que</p><p>todo programador web precisa saber”. Com esse conhecimento vai ser possível continuar</p><p>fazendo o exercício prática de construção da página do Enzo Pascal na próxima seção.</p><p>Página 90 de 176</p><p>https://l.dev.pro.br/4-principais-seletores-css</p><p>https://l.dev.pro.br/4-principais-seletores-css</p><p>🏆 Mais estilo nos textos #3.2</p><p>CSS #3.2</p><p>Partindo do código onde adicionamos estilo para os cabeçalhos iniciais (resposta do</p><p>exercício #3.1), precisamos agora continuar a marcação e formatar o restante do texto da</p><p>primeira parte:</p><p>Figura 3.17: Passo 2 da construção da página do Enzo Pascal</p><p>Digite ou compare com seu código e a partir deste código inicial, comece a adicionar</p><p>as marcações e estilos para deixar igual a imagem acima, crie os arquivos</p><p>enzo-passo2.html e enzo-passo2.css com os conteúdos abaixo respectivamente.</p><p>Página 91 de 176</p><p>Passos:</p><p>- Crie o arquivo enzo-passo2.css com o conteúdo das regras de estilo acima</p><p>- Crie o arquivo enzo-passo2.html com as marcações acima, note que o <head> do</p><p>código acima está incompleto</p><p>- Crie um elemento <h3> com a classe subtitle2 para formatar o texto “UI/UX & Web</p><p>Designer para criar experiências significativas”</p><p>- A cada mudança abaixo, salve o arquivo e atualize o navegador para ir vendo de</p><p>forma incremental as alterações</p><p>- Crie um parágrafo com a classe text para adicionar o texto: “Desenvolvedor</p><p>front-end, apaixonado por desenvolvimento de interfaces e viciado em tecnologia.</p><p>Nos últimos anos trabalhei em empresas de tecnologia. Sempre com foco em</p><p>produtos digitais.”</p><p>- A cor da fonte do subtitle2 é a mesma do título, o tamanho será 22px, o peso da</p><p>fonte será 300 e para um melhor espaçamento entre letras, utilize um ajuste fino</p><p>com a propriedade: letter-spacing: 2pt;. Utilize a família da fonte sem serifa</p><p>(sans-serif)</p><p>- O parágrafo tem a cor #76778c;, tamanho 20px, fonte também sem serifa e</p><p>adicione também um letter-spacing: 1.2pt;</p><p>- Ainda na classe .text e para melhorar o espaçamento ou distância com o texto</p><p>anterior, adicione um line-height: 32px;</p><p>Página 92 de 176</p><p>- Note que na imagem acima, os textos estão centralizados, se tiver algum elemento</p><p>não centralizado, adicione a propriedade que faz isto</p><p>- Se seu CSS e HTML estiverem sem erros, sua página deverá estar igual a da</p><p>imagem acima, se algo deu errado, verifique a sintaxe do HTML e do CSS, tenha</p><p>certeza que os arquivos foram salvos e atualize seu navegador.</p><p>Depois de fazer por conta própria, assista ao vídeo “Como melhorar a tipografia do</p><p>seu site com CSS”. Além de resolver o exercício, existem dicas de como usar atalhos do</p><p>VSCode para você começar a produzir código bem mais rápido!</p><p>Agora chegou a hora de mostrar o resultado do seu trabalho para todo mundo, na</p><p>internet, em vez dela ficar limitado apenas ao seu computador. Vamos fazer isso na próxima</p><p>sessão.</p><p>🚀 Dica DEV #2 - Codepen</p><p>Estamos em um nível que já começamos a fazer as primeiras páginas e queremos</p><p>mostrar para outras pessoas, obter opiniões diferentes e, quem sabe, entender onde</p><p>podemos melhorar.</p><p>Precisando de uma plataforma para salvar nosso trabalho na internet. É aí que entra</p><p>a plataforma CodePen. Primeiramente será necessário criar uma conta, utilize o botão Sign</p><p>Up na página principal.</p><p>Página 93 de 176</p><p>https://l.dev.pro.br/tipografia-css-enzo-pascal-2</p><p>https://l.dev.pro.br/tipografia-css-enzo-pascal-2</p><p>https://l.dev.pro.br/codepen</p><p>Figura 3.18: Acesso ao site CodePen</p><p>Depois de criada sua conta, onde foi necessário informar um nome de usuário</p><p>(username), ela pode ser compartilhada com https://codepen.io/seu-username. Por</p><p>exemplo, minha conta é https://codepen.io/huogerac e acessando podemos ver todas</p><p>páginas que eu decidi salvar.</p><p>Uma vez dentro da sua conta, podemos criar um novo Pen. Um Pen é uma página</p><p>HTML onde podemos adicionar estilo CSS, ou seja, podemos copiar o código que fizemos</p><p>nos passos 1 a 2 para dentro de um Pen.</p><p>Primeiro passo é clicar no ícone da sua conta no canto superior direito e depois em</p><p>Novo Pen (New Pen)</p><p>Figura 3.19: Criação de novo Pen</p><p>Página 94 de 176</p><p>https://l.dev.pro.br/codepen-roger</p><p>Em seguida, já é possível iniciar o código HTML e CSS. O único detalhe é que a</p><p>plataforma irá fornecer a estrutura base do HTML e desta forma só precisamos colocar o</p><p>código dentro do body.</p><p>Figura 3.20: Estrutura de um Pen</p><p>Após digitar ou colar o código dos seus exercícios, é só clicar em Salvar (Save).</p><p>Desta forma, no endereço do seu navegador será gerado um endereço único que poderá</p><p>ser compartilhado.</p><p>Figura 3.21: Página publicada no Codepen</p><p>Página 95 de 176</p><p>Depois de salvar, vamos ter o link que a plataforma gerou para nossa conta. No meu</p><p>caso o link da página acima que eu salvei é https://codepen.io/huogerac/pen/xxaLWrM. A</p><p>página está disponível na minha conta e pública para qualquer pessoa acessá-la.</p><p>Agora já podemos criar uma nova página para cada exercício que fizermos. Assim</p><p>vamos conseguir ver nosso progresso, criar um portfólio de páginas e compartilhar todas as</p><p>páginas que estamos fazendo com outros estudantes, amigos mais experientes ou</p><p>mentores para receber feedback e nos ajudar a descobrir possíveis problemas em nosso</p><p>código! Isso ajudará muito em nosso aprendizado!</p><p>Se tiver dúvidas sobre como fazer todo esse processo, assista ao vídeo “Publicando</p><p>sua página em 80 segundos”.</p><p>Agora que você sabe publicar sua página com código html e css na internet, chegou</p><p>a hora de aprender a mudar o estilo de links e botões na próxima seção.</p><p>🏆 Formatando links e botões #3.3</p><p>CSS #3.3</p><p>Os links gerados pela tag HTML âncora representada pelo elemento <a> é uma das</p><p>mais importantes na web. Ela é responsável pela navegação, onde podemos ter texto com</p><p>links para outras páginas.</p><p>Por exemplo, ela forma a base do site da Wikipédia onde existem inúmeras páginas</p><p>referenciando outras páginas através de links. No geral, o estilo de um link é uma cor</p><p>diferente, normalmente por padrão azul e sublinhado, para indicar que o texto é clicável.</p><p>Cabe ressaltar que um link é um elemento HTML como qualquer outro. Logo,</p><p>podemos adicionar QUALQUER estilo nele, inclusive o alterar para ter aparência de botão.</p><p>E é exatamente isto que iremos fazer nesse passo da construção da página do Enzo</p><p>Pascal.</p><p>Vamos criar um link que se parece com um botão e que, quando clicado, irá navegar</p><p>até outra região da mesma página. Abaixo segue como nossa página deverá ficar:</p><p>Página 96 de 176</p><p>https://codepen.io/huogerac/pen/xxaLWrM</p><p>https://l.dev.pro.br/video-codepen</p><p>https://l.dev.pro.br/video-codepen</p><p>https://l.dev.pro.br/wikipedia</p><p>Figura 3.22: Adição de botão na página do Enzo Pascal</p><p>Passos:</p><p>- Crie os arquivos enzo-passo3.html e enzo-passo3.css</p><p>- Tenha certeza que o CSS é importado na página</p><p>- Digite ou copie as marcações e o estilo deste CodePen aqui</p><p>(https://codepen.io/huogerac/pen/LYJjdvE)</p><p>- Crie o elemento <a href="#" class="btn">Mais informações</a></p><p>- Adicione a classe .btn no arquivo CSS</p><p>- Crie o estilo para a tag <a> conforme as dicas de propriedades abaixo:</p><p>background-color: É a propriedade que adiciona uma cor de fundo em qualquer</p><p>elemento HTML, assim como color, podemos colocar a cor no formato texto, por exemplo,</p><p>background-color: blue; no formato RGB background-color: rgb(0, 0, 255); ou no</p><p>formato Hexadecimal background-color: #0000ff; Nossa página do Enzo Pascal utiliza a</p><p>uma variação da cor ciano: #00a78e;</p><p>border-radius: É a propriedade que deixa os cantos arredondados, onde o valor</p><p>border-radius: 1px; faz um arredondamento de 1px o que é quase zero, uma sugestão</p><p>é ir aumentando este valor até ficar parecido com o botão acima</p><p>padding: É a propriedade que adiciona um espaço interno a qualquer elemento</p><p>HTML, para deixar o botão maior usando espaço interno, vamos adicionar 20px; na parte de</p><p>cima e na parte de baixo (eixo x) e 40px nas laterais (eixo y), então a propriedade final fica</p><p>assim: padding: 20px 40px;</p><p>text-decoration: É a propriedade que permite alterar o decorator padrão de links</p><p>(text-decoration: underline;). Procure no seu site de busca pelo termo:</p><p>"text-decoration MDN", esta é a forma de procurar sobre a documentação do site da</p><p>Mozilla sobre qualquer propriedade CSS. Tente achar o valor desta propriedade para</p><p>desligar o underline.</p><p>Página 97 de 176</p><p>https://l.dev.pro.br/codepen-links-e-botoes-css</p><p>Com as alterações das propriedades acima, falta agora apenas alterar as</p><p>propriedades que já conhecemos, são elas: Propriedade de tamanho, cor da fonte e família</p><p>da fonte. Sem passar mais detalhes, tente descobrir os valores de cada uma dessas</p><p>propriedades de forma a deixar o botão o mais próximo possível da imagem deste exercício.</p><p>- O border-radius aceita o valor em porcentagem, tente colocar o valor 50% e veja o</p><p>resultado</p><p>- Link para a documentação do MDN do text-decoration:</p><p>https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-decoration</p><p>Depois tentar fazer sozinho o exercício, confira a solução desse exercício no vídeo</p><p>“Como transformar links e botões com CSS”.</p><p>Depois disso, vamos aprender a debugar nossas páginas com o Chrome DevTools,</p><p>na próxima seção.</p><p>🚀 Dica DEV #3 - Chrome Dev Tools</p><p>O Chrome DevTools é um conjunto de ferramentas para desenvolvimento web. Ele</p><p>já vem instalado no navegador Google Chrome. Com o DevTools podemos olhar detalhes</p><p>de qualquer página, modificar e ver o resultado da alteração em tempo real. É a ferramenta</p><p>ideal para nos ajudar a testar propriedades novas.</p><p>Também é fundamental para identificar bugs, problemas, a razão de um</p><p>componente não estar funcionando como esperado.</p><p>Vamos utilizar o exercício #3.2 que fizemos e temos o código para nos ajudar a</p><p>entender o que podemos fazer com o Chrome DevTools.</p><p>Lembrando que podemos utilizá-lo em qualquer website, seja ele rodando na</p><p>internet ou rodando localmente (na sua máquina). Para este início, vamos abrir em nosso</p><p>navegador o arquivo enzo-passo2.html criado no capítulo #3.2</p><p>Página 98 de 176</p><p>https://l.dev.pro.br/documentacao-text-decoration</p><p>https://l.dev.pro.br/ebook-rpv-links-e-botoes-css</p><p>https://l.dev.pro.br/google-chrome</p><p>Figura 3.23:Página do exercício 3.2 da página do Enzo Pascal</p><p>Uma vez aberto em seu navegador, clique com o botão direito em qualquer lugar da</p><p>página e selecione a opção Inspecionar ou pressione o atalho F12. Aparecerá o menu</p><p>suspenso como o da figura 3.24:.</p><p>Figura 3.24: Adição de botão na página do Enzo Pascal</p><p>A barra de ferramentas DevTools será aberta. Por padrão ela é aberta na parte de</p><p>baixo do navegador, mas é possível movimentá-la para as laterais quando necessário. Veja</p><p>abaixo uma prévia do DevTools para o site acima:</p><p>Página 99 de 176</p><p>Figura 3.25: Chrome Dev Tools</p><p>Note que no lado esquerdo temos o código HTML e na lateral direita temos o código</p><p>CSS, podemos selecionar qualquer elemento para entender como a página foi feita. Sim,</p><p>isto mesmo, podemos inspecionar um site existente na internet (que foi feito por outro</p><p>desenvolvedor) e entender os elementos utilizados.</p><p>Para entendermos um pouco melhor, selecione o elemento <h1> da página, vamos</p><p>conseguir ver todas as propriedades aplicadas nele (veja na direita a classe .title) a lista de</p><p>propriedades que criamos no CSS.</p><p>Página 100 de 176</p><p>Figura 3.26: Adição de botão na página do Enzo Pascal</p><p>Vamos pensar que não sabemos qual propriedade é responsável por alterar seu</p><p>tamanho, desta forma, podemos clicar no "checkbox" ao lado esquerdo de cada</p><p>propriedade de forma a desativá-la (basta clicar novamente para habilitar novamente)</p><p>Figura 3.27:Desabilitando</p><p>propriedades CSS</p><p>Página 101 de 176</p><p>Com esta abordagem vamos descobrir que o color removeu a cor azulada e que</p><p>font-size voltou ao tamanho original do elemento <h1>. Dado que descobrimos o que</p><p>queríamos, vamos agora habilitar novamente todas as propriedades (clicando novamente</p><p>no checkbox) e alterar o font-size de 48px para 96px, como na figura 3.28:</p><p>Figura 3.28: Reabilitando propriedade CSS</p><p>Com um clique após a última propriedade da classe (neste caso text-align), vamos</p><p>abrir uma caixa de digitalização para adicionarmos novas propriedades. Cadastre uma nova</p><p>propriedade: text-shadow: 2px 2px 12px #00b1bd; e veja em tempo real que o resultado</p><p>é aplicado na página, como na figura 3.29:</p><p>Página 102 de 176</p><p>Figura 3.29: Edição de CSS em tempo Real</p><p>Com esta possibilidade de editar as propriedades e ir vendo o resultado ganhamos</p><p>uma habilidade incrível de aprender CSS através da tentativa e erro! Mas é importante</p><p>saber que estas alterações foram feitas apenas no navegador. Se apertamos o “atualizar do</p><p>navegador” (ou o atalho F5), vamos perceber que vamos voltar com a página original e</p><p>todas nossas alterações foram perdidas.</p><p>Isto faz total sentido, dado que o navegador não tem acesso de gravar nos arquivos</p><p>do seu disco. Imagine se qualquer pessoa pudesse alterar as propriedades de qualquer site</p><p>na internet? Isto poderia ser um desastre, certo?</p><p>Uma prática interessante é utilizar o DevTools para adicionar ou alterar propriedades</p><p>e, quando chegar em conjunto de regras CSS desejadas, copiá-las para o arquivo CSS</p><p>original da página. Ou seja, vamos copiar as propriedades CSS do DevTools para o arquivo</p><p>em nosso editor de código, salvar o arquivo e finalmente atualizar o navegador para ver as</p><p>alterações.</p><p>O Chrome DevTools é muito mais poderoso do que vimos até aqui, isto foi apenas</p><p>uma visão rápida de uma das muitas funcionalidades dele. Pesquise, pratique e descubra</p><p>mais sobre como utilizar o DevTools para te ajudar na construção de páginas web.</p><p>- Clique no quadrado com a cor ao lado da propriedade color, será aberta uma</p><p>interface para escolher qualquer cor. Este disco de cores é muito bom para ajudar na</p><p>escolha de cores.</p><p>- Continue pesquisando e descobrindo as funcionalidades do Chrome DevTools, isto</p><p>te ajudará muito no entendimento das propriedades do CSS.</p><p>Página 103 de 176</p><p>Para entender como páginas quaisquer podem ser alteradas, veja a vídeo</p><p>aula“Invadindo a Globo com Chrome DevTools!”.</p><p>E agora que você aprendeu a debugar uma página HTML, chegou a hora de</p><p>aprender a alinhar textos e adicionar espaçamentos, fazendo o passo 4 da construção da</p><p>página do Enzo Pascal na próxima seção.</p><p>🏆 Alinhar textos e espaçamentos #3.4</p><p>CSS #3.4</p><p>Nessa etapa vamos alterar o alinhamento dos textos que estão todos centralizados</p><p>para um alinhamento à esquerda e trabalhar com algumas propriedades relacionadas a</p><p>espaçamento.</p><p>Queremos converter o resultado do exercício anterior (#3.3) para deixá-lo como a</p><p>figura a seguir:</p><p>Figura 3.30: Espaçamento de texto com CSS</p><p>Passos:</p><p>- Crie os arquivos enzo-passo4.html e d3-passo4.css</p><p>- Tenha certeza que o enzo-passo4.css é importado na página</p><p>- Compare o resultado ou deixe sua página do exercício #3.3 o mais próximo possível</p><p>das marcações e o estilo deste CodePen.</p><p>- Remova todas propriedades text-align: center;</p><p>Página 104 de 176</p><p>https://l.dev.pro.br/chrome-dev-tools</p><p>https://l.dev.pro.br/codepen-espacameto-de-texto</p><p>- Vamos fazer um "reset" dos espaçamentos. Ou seja, existe o conceito de</p><p>reset.css que zera os espaçamentos iniciais do navegador. Desta forma, adicione o</p><p>seletor universal nas primeiras linhas do CSS com as propriedades abaixo:</p><p>O resultado será uma página sem espaços de margin e espaços internos</p><p>(padding). Ou seja, por padrão cada navegador tem um espaço inicial para cada</p><p>elemento, o que pode ser levemente diferente para cada navegador e sistema</p><p>operacional.</p><p>Por exemplo, nosso <h1> tinha uma margem superior e inferior que deixava</p><p>os textos mais afastados quando comparado com a versão atual sem</p><p>espaçamentos:</p><p>Figura 3.31: h1 sem espaçamentos com reset</p><p>Queremos adicionar um espaço de 80px na lateral esquerda de todos os textos e do</p><p>botão. Isso deixará a página igual ou bem próxima do que precisamos. A propriedade para</p><p>isto é a margin. Podemos adicionar esta propriedade em cada elemento e teremos o</p><p>resultado esperado.</p><p>Um problema da abordagem acima é a repetição desnecessária da propriedade</p><p>margin. Uma saída para isto é agrupar tudo que queremos colocar a margem dentro de uma</p><p>tag <div> do HTML e adicionar uma classe, por exemplo, parte1.</p><p>Página 105 de 176</p><p>Então, em vez de adicionar margin em todos elementos, podemos apenas</p><p>adicionar a margin na div. Desta forma a div terá um espaçamento e como todos elementos</p><p>estão dentro da div, todos serão empurrados ou acompanham o espaçamento da div.</p><p>Por isso, adicione 80px na margin à esquerda: margin-left: 80px;, conforme código a</p><p>seguir:</p><p>O resultado deverá ser como o exibido abaixo:</p><p>Figura 3.32: Espaçamento à esquerda com div</p><p>Note que o espaçamento à esquerda está correto, mas está faltando o</p><p>espaçamento (margin) na parte superior.</p><p>Utilizando o DevTools, tente descobrir como adicionar outra margin, mas agora</p><p>apenas na parte de cima (top), isto também deve ser adicionado na classe parte1 de forma</p><p>a ter o mesmo espaçamento da esquerda, na parte superior.</p><p>Se tudo der certo, sua página deverá estar bem próxima da imagem da esquerda</p><p>abaixo. E se compararmos nossa página atual com a imagem desejada, vamos perceber</p><p>alguns problemas como:</p><p>Página 106 de 176</p><p>- Distância entre os textos, por exemplo, espaçamento vertical entre o Olá e</p><p>Enzo</p><p>- Também espaçamento vertical entre o subtitulo e o texto Desenvolvedor</p><p>- O botão está em cima do parágrafo</p><p>- O espaçamento entre letras está menor, ou seja, tente perceber a diferença</p><p>entre o "O" e do "l" do texto Olá e do "U" e do "I" no UI.</p><p>Figura 3.33: Comparação de texto com e sem espaçamentos</p><p>Para trabalhar estes espaçamentos, precisaremos trabalhar alguns valores nas</p><p>seguintes propriedades:</p><p>letter-spacing: para alterar o espaçamento entre letras</p><p>line-height: para alterar o tamanho vertical da linha. Ou seja, serão adicionados ou</p><p>removidos espaços verticais (tanto embaixo como em cima). Assim o texto será centralizado</p><p>verticalmente dentro do tamanho da linha.</p><p>margin-top ou padding-top: É uma forma de adicionar um espaço na parte</p><p>superior do elemento. Diferente do line-height, margin e padding irão adicionar espaços</p><p>apenas na parte superior e podem ser uma forma interessante de adicionar um espaço</p><p>vertical entre o "Olá" e o "Enzo".</p><p>Ou também podemos utilizar um margin-bottom no parágrafo (.text) de forma a</p><p>empurrar o botão mais para baixo e assim tirar o botão de cima do texto</p><p>Em resumo, adicionando e alterando as propriedades citadas neste capítulo, será</p><p>possível deixar a formatação dos textos exatamente como queremos. Não esqueça de</p><p>utilizar o DevTools para ajudar a testar o efeito de cada propriedade.</p><p>- Não esqueça de utilizar o DevTools</p><p>- Utilize a busca por "propriedade CSS +MDN" para ler a documentação oficial das</p><p>propriedades CSS diretamente no site da Mozilla.</p><p>Página 107 de 176</p><p>Para entender melhor esses conceitos, assista à aula “Da Multidão ao Conforto:</p><p>Desafogando Seu Texto com Espaçamento CSS”.</p><p>Durante essas seções de texto você já deve ter se perguntado: “o que é um pixel?”.</p><p>Chegou a hora de tirar sua dúvida sobre esse e outros tipos de medidas na próxima seção.</p><p>Entendendo a unidade px (pixels)</p><p>Figura 3.34: Super Mário construído com pixels</p><p>Pixel é a menor unidade de medida de uma imagem digital, ou seja, é um ponto na</p><p>tela. Desta forma, as imagens que vemos em nossas telas são a combinação de diversos</p><p>pontos (pixels) em diferentes cores.</p><p>Para entender se um determinado espaçamento na unidade px (pixel) é pouco ou</p><p>bastante, precisamos entender o tamanho total das telas (screen no inglês) que utilizamos.</p><p>Podemos ir em configurações de vídeo ou monitor e ver o que chamamos de</p><p>resolução da tela. Note que o monitor do notebook que utilizo</p><p>93</p><p>🏆 Formatando links e botões #3.3................................................................................. 96</p><p>🚀 Dica DEV #3 - Chrome Dev Tools.............................................................................. 98</p><p>🏆 Alinhar textos e espaçamentos #3.4.........................................................................104</p><p>Entendendo a unidade px (pixels)..................................................................................108</p><p>🏆 Tamanho e posicionamento de imagem #3.5........................................................... 113</p><p>Depuração no CSS (debugging).................................................................................... 116</p><p>Entendendo a tag <div>................................................................................................. 121</p><p>🏆 Estilo de lista e cor de fundo #3.6.............................................................................123</p><p>Entendendo cores no CSS.............................................................................................125</p><p>🏆 Estilo da barra de progresso #3.7.............................................................................127</p><p>🏆 Formatar o rodapé #3.8............................................................................................ 130</p><p>🏆 Importar fonte web #3.9............................................................................................132</p><p>Perguntas do Capítulo 3.................................................................................................138</p><p>O que é Cascade Style Sheets?.............................................................................. 138</p><p>Estilo inline, Tag Style e arquivos externos.............................................................. 138</p><p>Editor de código....................................................................................................... 138</p><p>Introdução aos seletores CSS..................................................................................138</p><p>Links e Botões com CSS..........................................................................................139</p><p>Alinhar textos e espaçamentos................................................................................ 139</p><p>Entendendo a unidade px (pixels)............................................................................139</p><p>Tamanho e posicionamento de imagem...................................................................139</p><p>Estilo de lista e cor de fundo #3.6............................................................................ 140</p><p>Entendendo cores no CSS.......................................................................................140</p><p>Estilo da barra de progresso #3.7............................................................................ 140</p><p>Formatar o rodapé #3.8............................................................................................140</p><p>Importar fonte web #3.9........................................................................................... 140</p><p>Capítulo 4: As Ferramentas do Programador................................................................. 141</p><p>A Importância do Linux para o Desenvolvedor Web...................................................... 142</p><p>Instalação de Linux no Windows..............................................................................143</p><p>O Terminal de Comando e o Sistema de Arquivos.................................................. 144</p><p>Gestão de Arquivos no Linux................................................................................... 146</p><p>Edição de Arquivos pelo Terminal com VIM.............................................................147</p><p>Como usar VSCode com Linux e WSL do jeito certo...............................................148</p><p>Como Acessar Servidor Linux via SSH de Forma Segura.......................................148</p><p>Git - A Ferramenta para Trabalhar em Times de Programação.....................................150</p><p>GitHub - A Maior Rede Social de Programadores................................................... 150</p><p>Git - Instalação e Clonagem de Repositórios...........................................................151</p><p>Git - Gerencie Alterações em Seu Projeto de Software........................................... 152</p><p>Como Enviar Mudanças para Repositório Remoto do Git....................................... 153</p><p>Processo de Feature Branch para alteração de projetos.........................................154</p><p>Como Atualizar seu Repositório Local com Feature Branches................................157</p><p>Página 4 de 176</p><p>Como navegar no histórico do git e marcar pontos importantes..............................158</p><p>Como corrigir erros na hora do commit....................................................................159</p><p>Como resolver conflitos no Git................................................................................. 160</p><p>Push de vários commits e tags................................................................................ 162</p><p>Docker: Como Publicar Sua Aplicação na Web............................................................. 163</p><p>Como Instalar Docker no Mac, Linux e Windows.....................................................163</p><p>Os 5 Principais Comandos do Docker..................................................................... 165</p><p>Como Criar Imagens do Docker...............................................................................166</p><p>Docker Compose: Configuração Simplificada..........................................................168</p><p>Como fazer Deploy na AWS com Git e Docker..............................................................169</p><p>Perguntas do Capítulo 4.................................................................................................171</p><p>As Ferramentas do Programador.............................................................................171</p><p>O Terminal de Comando e o Sistema de Arquivos.................................................. 171</p><p>Gestão de Arquivos no Linux................................................................................... 171</p><p>Edição de Arquivos pelo Terminal com VIM.............................................................172</p><p>Como Acessar Servidor Linux via SSH de Forma Segura.......................................172</p><p>GitHub - A Maior Rede Social de Programadores................................................... 172</p><p>Git - Instalação e Clonagem de Repositórios...........................................................172</p><p>Git - Gerencie Alterações em Seu Projeto de Software........................................... 172</p><p>Como Enviar Mudanças para Repositório Remoto do Git....................................... 173</p><p>Processo de Feature Branch para alteração de projetos.........................................173</p><p>Como Atualizar seu Repositório Local com Feature Branches................................173</p><p>Como navegar no histórico do git e marcar pontos importantes..............................173</p><p>Como corrigir erros na hora do commit....................................................................174</p><p>Como resolver conflitos no Git................................................................................. 174</p><p>Os 5 Principais Comandos do Docker..................................................................... 174</p><p>Como Criar Imagens do Docker...............................................................................174</p><p>Docker Compose: Configuração Simplificada..........................................................174</p><p>Conclusão e Próximos Passos.........................................................................................176</p><p>Página 5 de 176</p><p>Capítulo 1: Aprendendo a Aprender Tecnologia</p><p>“Quando não se sabe para onde vai, qualquer caminho serve”</p><p>Lewis Carroll, Alice no país das Maravilhas</p><p>Nesses tempos modernos, nossa atenção é demandada frequentemente pelo</p><p>aparelho de rastreio que está em nossas mãos e que, por alguma razão qualquer,</p><p>chamamos ainda de telefone celular, apesar de raramente o utilizarmos</p><p>(Roger Camargo) para</p><p>escrever este documento tem a resolução de 1920 pixels de largura e 1080 de altura</p><p>conforme as propriedades de vídeo apresentadas na figura 3.35.</p><p>Essa unidade de medida é tão difundida para tamanho de telas que muitas vezes,</p><p>como no caso da configuração da figura, ela sequer é mencionada, pois já se assume que</p><p>por padrão a medida será em pixel.</p><p>Página 108 de 176</p><p>https://l.dev.pro.br/aula-espacamento-de-texto</p><p>https://l.dev.pro.br/aula-espacamento-de-texto</p><p>Figura 3.35: Resolução de monitor</p><p>A resolução 1920x1080, ou quantidade de pixels que podem ser exibidos na minha</p><p>tela, é tão comum que possui até o nome de "Full HD". Muitas telas de notebook e</p><p>monitores permitem essa configuração máxima de pixels.</p><p>Desta forma se adicionarmos um espaço lateral de 200px (margin-left: 200px),</p><p>isto representa aproximadamente 10% do espaço horizontal total da tela.</p><p>Figura 3.36: quadrado de 200px por 200px em tela full hd</p><p>Página 109 de 176</p><p>É importante saber que 200px pode ser um espaçamento bom para este tamanho de</p><p>tela. Mas essa mesma página aberta em um fone, por exemplo, um Samsung Galaxy, os</p><p>mesmos 200px representam quase 50% do tamanho da tela deste dispositivo.</p><p>Nesse caso, sua visualização será bem diferente, conforme figura 3.37 a seguir.</p><p>Figura 3.37: quadrado de 200px por 200px em tela de celular</p><p>O objetivo desta seção é apresentar a unidade pixel e te dar uma base de espaço na</p><p>utilização desta unidade bem comum no CSS. Você vai saber que uma imagem com 32px</p><p>ou 64px de tamanho, deverá provavelmente ser um ícone ou um avatar no canto da tela, e</p><p>que outra imagem com 1200px irá ocupar quase a tela toda.</p><p>Também vamos entender que a borda mais fina que conseguimos fazer é a borda de</p><p>1 pixel (border: solid 1px blueviolet;). Para ter uma ideia visual, utilizei um editor</p><p>gráfico chamado Gimp para mostrar a página com um divisor (grid) de 10 em 10 pixels.</p><p>É possível ver que a letra "P" maiúscula no tamanho padrão de um parágrafo do</p><p>html, precisa de 14 pixels de altura e 10 pixels de largura, conforme figura 3.38 a seguir:</p><p>Página 110 de 176</p><p>Figura 3.38: Pixels da letra “P” maiúscula.</p><p>Embora não seja o objetivo deste capítulo, vale lembrar que existem diversos</p><p>tamanhos de telas e este é um dos desafios do desenvolvedor frontend, conseguir criar</p><p>páginas que sejam exibidas da melhor forma possível independente do tamanho do</p><p>dispositivo do visitante.</p><p>Isso porque o tamanho de telas varia bastante, indo desde telas de telefones</p><p>antigos, que podem ter apenas 320px no máximo, chegando até os monitores super largos</p><p>(ultra wide). Veja a seguir, na figura 3.39, alguns padrões de tamanhos de telas (em pixels):</p><p>Figura 3.39: Diferentes resoluções de tela</p><p>O tamanho da tela nos informa qual é a quantidade máxima de pixels que podemos</p><p>usar, o que se chama de resolução. Quando usamos a resolução máxima, o pixel que</p><p>definimos no CSS coincide exatamente com o pixel da tela em si, do monitor físico.</p><p>Página 111 de 176</p><p>Mas é possível definir uma resolução menor para o monitor, como a HD (1280 x</p><p>720). Nesse caso, o pixel definido no CSS vai ocupar mais de um pixel físico da tela.</p><p>Cabe ressaltar que a medida em pixel é chamada de absoluta, pois ela não depende</p><p>do tamanho da tela. Mesmo que você redimensione o tamanho do navegador, o elemento</p><p>não vai mudar seu tamanho. Mas também existem medidas relativas. Uma das mais</p><p>conhecidas é a porcentagem.</p><p>Como o nome já diz, uma medida relativa será definida com relação a outra medida.</p><p>Ou seja, é possível definir que o tamanho da largura de um elemento HTML vai ocupar</p><p>metade (50%), da largura definida em seu elemento pai.</p><p>A consequência disso é que quando o usuário redimensionar o tamanho da tela, o</p><p>elemento vai ter suas dimensões também reduzidas. Esse tipo de propriedade é definido</p><p>com a letra % no css.</p><p>Para demonstrar a diferença desses tipos de unidades, veja o código a seguir, onde</p><p>a altura foi definida em pixel, mas a largura definida em porcentagem:</p><p>Veja a diferença como fica o resultado da renderização desse código no navegador,</p><p>com a porção direita em tela maior e da esquerda em tela menor, conforme figura 3.40:</p><p>Figura 3.40: Figura com diferença entre pixel e porcentagem</p><p>Página 112 de 176</p><p>Ou seja, perceba que a altura é a mesma nos dois casos, por usar pixel, uma</p><p>unidade absoluta. Já a largura ficou adequada ao tamanho da da tela do navegador,</p><p>ocupando metade dessa medida, por usar porcentagem, uma unidade relativa.</p><p>Para você entender melhor essa diferença, assista à aula “O que é um Pixel em</p><p>CSS” e você verá como fica esse redimensionamento em tempo real, conforme o tamanho</p><p>da tela vai sendo alterado.</p><p>- Pesquise por "Pixel Art" no e veja cada trabalho interessante feito com a ideia dos</p><p>pixels.</p><p>Agora que você entendeu como funciona a unidade de pixel, podemos avançar para</p><p>o passo 5 da construção da página do Enzo Pascal. Chegou a hora de acrescentar uma</p><p>imagem em nossa página e vamos utilizar o dimensionamento com pixel para deixar a</p><p>página mais bonita. Confira como na próxima seção.</p><p>🏆 Tamanho e posicionamento de imagem #3.5</p><p>CSS #3.5</p><p>Nessa etapa vamos adicionar uma imagem utilizando a tag <img> do HTML para</p><p>exibir a imagem do Enzo ou da Enza Pascal. Também vamos precisar deixá-la centralizada.</p><p>Queremos com base no resultado do exercício anterior (#3.4), adicionar a imagem na</p><p>sequência das marcações existentes de forma que no final sua página fique parecida com</p><p>uma das imagens a seguir:</p><p>Página 113 de 176</p><p>https://l.dev.pro.br/o-que-e-pixel</p><p>https://l.dev.pro.br/o-que-e-pixel</p><p>Figura 3.41: Página com imagem da Enza Pascal</p><p>Figura 3.42: Página com imagem do Enzo Pascal</p><p>Página 114 de 176</p><p>Passos:</p><p>- Crie os arquivos d3-passo5.html e d3-passo5.css</p><p>- Tenha certeza que o d3-passo5.css é importado na página</p><p>- Compare o resultado do seu exercício #3.4 com as marcações e o estilo deste</p><p>CodePen aqui. Sua página inicial tem que ficar o mais próximo possível desta</p><p>página.</p><p>- Adicione o atributo src na tag <img> apontando para a imagem do Enzo ou da Enza</p><p>Pascal. Para isto temos duas opções, baixar a imagem e colocá-la na mesma pasta</p><p>do seu arquivo html ou adicionar o endereço da imagem na internet diretamente no</p><p>atributo src.</p><p>- Enza Pascal pode ser baixada aqui</p><p>- Enzo Pascal pode ser baixado aqui</p><p>- A imagem têm as dimensões originais de 676 x 652 pixels (largura x altura),</p><p>podemos utilizar as propriedades width e height para alterá-las e assim exibir a</p><p>imagem na página maior ou menor que seu tamanho original.</p><p>- Utilize a ferramenta DevTools para alterar o width e height da imagem de forma a</p><p>chegar no tamanho desejado. Veja a seção de dicas</p><p>- Precisamos centralizar a imagem, mas note que se colocarmos o text-align: center</p><p>diretamente na imagem, nada irá mudar. Tente colocar a imagem dentro de uma tag</p><p><div> e centralizar o conteúdo da div ao invés da imagem diretamente.</p><p>- Utilize o DevTools</p><p>- É uma boa prática colocar width e height nas imagens para evitar distorções, porém</p><p>é muito mais fácil utilizar apenas uma destas propriedades, por exemplo, colocar</p><p>uma altura de 400px e ir aumentando aos poucos até que a imagem fique próximo</p><p>da parte de baixo da página. Quando atribuímos apenas a propriedade height, o</p><p>tamanho (width) será calculado automaticamente para manter a proporção da</p><p>imagem.</p><p>- Cuidado para não colocar width e height ao mesmo tempo de forma a esticar a</p><p>imagem, ou seja, a imagem tem uma proporção original (676x652), se alterarmos</p><p>sua altura de 652 para 400, o tamanho proporcional é 415. Se colocarmos qualquer</p><p>coisa diferente disso no tamanho e deixar a altura 400, a imagem ficará esticada</p><p>- Se estiver querendo uma sugestão de nome de classe para a div que irá conter a</p><p>imagem, utilize "hero" na div. Este termo veio do pessoal de marketing para</p><p>referenciar um ponto principal de foco para uma campanha. Dado que a imagem é</p><p>algo para chamar a atenção na nossa página, pode ser algo sugestivo.</p><p>Página 115 de 176</p><p>https://l.dev.pro.br/codepen-enzo-passo-4</p><p>https://l.dev.pro.br/codepen-enzo-passo-4</p><p>https://raw.githubusercontent.com/devpro-br/ebook-t1-desafios/main/images/hero-enza.png</p><p>https://raw.githubusercontent.com/devpro-br/ebook-t1-desafios/main/images/hero-enzo.png</p><p>Agora que você sabe como inserir imagens em uma página HTML chegou a hora de</p><p>entender melhor como funciona a tag div em comparação com a tag img e a razão dela ser</p><p>necessária para conseguirmos corretamente centralizar elementos, conforme próxima</p><p>seção veremos na próxima seção com ajuda do Chrome Dev Tools.</p><p>Depuração no CSS (debugging)</p><p>Quando o software não funciona como esperado, programadores precisam entender</p><p>o código e algumas vezes utilizar ferramentas externas ou da própria linguagem para</p><p>compreender melhor os detalhes do funcionamento de forma a corrigir o mau</p><p>funcionamento ou "bug".</p><p>O termo original utilizado na computação para este processo é o "Debugging", é</p><p>literalmente procurar o "bug" (do ingês inseto) no código e removê-lo.</p><p>No mundo do CSS acabamos dizendo que um bug é quando um determinado estilo</p><p>não está funcionando como esperado, pode ser um espaçamento ou uma cor de algum</p><p>elemento. Neste momento é quando precisamos fazer um debugging e precisamos</p><p>conhecer algumas ferramentas para nos ajudar a entender a causa deste problema.</p><p>A primeira ferramenta é o próprio Chrome DevTools. Com ele conseguimos saber</p><p>muitos detalhes, inclusive mecanismo onde, passando sobre o elemento, conseguimos</p><p>através de cores saber tamanho e espaçamento. Também é possível saber todas</p><p>propriedades aplicadas, bem como alterá-las em tempo real.</p><p>Figura 3.43: Uso do Chrome DevTools em um parágrafo</p><p>Página 116 de 176</p><p>O DevTools basicamente é dividido em duas partes, na esquerda mostra o código da</p><p>página e na direita as propriedades do elemento selecionado.</p><p>Ainda na lateral direita, podemos fazer uma rolagem até o final, onde podemos ver a</p><p>representação visual dos espaçamentos, isto é possível dado que todos elementos são</p><p>caixas, vamos entender melhor o modelo de caixa (do inglês box-model), neste momento,</p><p>apenas entenda que esta ferramenta do devtools te ajuda no debugging dos elementos.</p><p>Figura 3.44: Representação de espaçamento em caixa no DevTools</p><p>Outra técnica extremamente simples e muito útil é a ideia de colocar uma borda ou</p><p>uma cor de fundo nos elementos e assim conseguir fazer debugging dado que visualmente</p><p>iremos saber onde cada elemento está posicionado.</p><p>Para entender esta técnica, vamos iniciar com uma página do zero com os</p><p>elementos a seguir.</p><p>Página 117 de 176</p><p>Abra esta página no navegador e perceba que precisamos fazer um debugging para</p><p>entender melhor o motivo que a classe center funciona no elemento <h1> e não funciona no</p><p><img>, confrome</p><p>Figura 3.45: Propriedade de centralização em elemento h1 e img</p><p>Para entender este comportamento e utilizando a ideia de debugging apresentada,</p><p>abra o DevTools e adicione border: solid red 1px; no elemento <h1> e também no elemento</p><p><img>. Sua página deverá ficar como a imagem abaixo:</p><p><--- Não Centralizar</p><p>Figura 3.46: Inserção de bordas vermelhas para debugging</p><p>Página 118 de 176</p><p>Mesmo sem saber o motivo, conseguimos ver que o elemento <h1> ocupa todo</p><p>espaço horizontal da página, enquanto o elemento <img> ocupa apenas o espaço do</p><p>tamanho da imagem.</p><p>Se seu navegador não estiver no modo maximizado, tente aumentar e diminuir a</p><p>página e note que o título aumenta e diminui acompanhando o tamanho da página. O</p><p>mesmo não acontece com a imagem.</p><p>Figura 3.47: Elemento <h1> com navegador maximizado</p><p>Mas se olharmos do ponto de vista da caixa da imagem, ela está centralizada para o</p><p>espaço dentro da caixa vermelha da imagem, certo?</p><p>Dado este comportamento e mesmo sem saber a explicação, vamos agora adicionar</p><p>um novo elemento <div> e jogar o elemento <img> para dentro da <div>. Vamos também</p><p>colocar a borda vermelha nos três elementos</p><p>Página 119 de 176</p><p>Figura 3.48: Elemento <div> em navegador maximizado</p><p>Note que a <div> também tem o comportamento de ocupar todo espaço</p><p>horizontal igual ao <h1>. Mesmo sem texto ou alinhamento, estes elementos ocupam o</p><p>bloco inteiro dado o valor da propriedade display (vamos entender isto no capítulo de</p><p>layouts).</p><p>Mas neste momento apenas precisamos saber queremos a imagem centralizada</p><p>dentro desta caixa vermelha. Imagino que você já conseguiu visualizar que se jogarmos um</p><p>text-align na div, tudo que tiver dentro dela será centralizado.</p><p>Esta é a ideia do debugging: fazer um pouco de tentativa e erro em lugares que o</p><p>comportamento atual não faz muito sentido e, no final do processo, entender mais sobre o</p><p>comportamento de um trecho de código.</p><p>Em resumo, utilizando uma borda vermelha conseguimos notar que alguns</p><p>elementos ocupam todo espaço horizontal enquanto outros não. Desta forma conseguimos</p><p>sair com questões, como neste caso, porque h1 e div ocupam todo espaço e o elemento</p><p>img não?</p><p>Fazendo isto e tentando responder às perguntas que vão surgindo, vamos entender</p><p>mais sobre a tecnologia que estamos utilizando e nos tornando um programador melhor.</p><p>- Pesquise por bug e Grace Hopper e conheça a história e início deste termo na</p><p>computação.</p><p>Página 120 de 176</p><p>Depois de tentar fazer esse exercício, assista ao vídeo Como inserir e centralizar imagens</p><p>em uma página HTML. E para entender melhor a div utilizada no vídeo, confira a próxima</p><p>seção.</p><p>Entendendo a tag <div></p><p>A tag <div> é um elemento HTML genérico utilizado para agrupar elementos</p><p>formando "containers" de elementos ou para facilitar a criação de layout de páginas. A tag</p><p><div> não tem efeito visual no conteúdo. Ou seja, a menos que a tag receba estilo com</p><p>CSS, ela vai deixar o conteúdo ser exibido da mesma forma quando não há a presença da</p><p>tag <div>.</p><p>A página renderizado com código a seguir é exibida exatamente igual, com ou sem</p><p>as tags divs:</p><p>Quando utilizado para agrupar elementos em uma determinada região, chamamos a</p><p>div de “container”. Vamos explorar este assunto um pouco mais adiante, mas podemos</p><p>dizer que é uma região isolada com estilo próprio, onde facilmente podemos mudar sua</p><p>posição sem comprometer o estilo interno.</p><p>Um uso bem comum de <div> é para agrupar elementos do cabeçalho, menu ou do</p><p>rodapé. Este agrupamento também pode ser feito com elementos HTML com nomes mais</p><p>intuitivos ao invés da sua versão genérica.</p><p>Página 121 de 176</p><p>https://l.dev.pro.br/como-centralizar-imagem-html</p><p>https://l.dev.pro.br/como-centralizar-imagem-html</p><p>Estes elementos mais específicos são chamados de semânticos e tem exatamente o</p><p>mesmo comportamento da tag div, porém seu uso deixa o código mais legível e facilita a</p><p>manutenção.</p><p>Figura 3.49: HTML semântico versus não semântico</p><p>Crédito https://www.semrush.com/blog/semantic-html5-guide/</p><p>Apenas para conhecimento geral, a marcação semântica foi inventada apenas em</p><p>2011 enquanto a tag inicial e clássica div é de 1993.</p><p>Agora que você conhece mais sobre divs, chegou a hora de trazer mais vida à</p><p>página do Enzo Pascal com a utilização de cores, o que será feito na próxima seção.</p><p>Página 122 de 176</p><p>https://www.semrush.com/blog/semantic-html5-guide/</p><p>🏆 Estilo de lista e cor de fundo #3.6</p><p>CSS #3.6</p><p>Vamos começar colocando em prática o conceito de criar uma região para agrupar a</p><p>seção de projetos da página pessoal do Enzo ou da Enza Pascal. Vamos precisar adicionar</p><p>estilo de forma a ter um fundo colorido ao invés do branco e alguns espaçamentos. Assim</p><p>vamos chegar no resultado da região verde, como o da figura:</p><p>Figura 3.50: Região de texto com pano de fundo verde</p><p>Passos:</p><p>- Crie os arquivos d3-passo6.html e d3-passo6.css</p><p>- Tenha certeza que o d3-passo6.css é importado na página</p><p>- Compare o resultado do seu exercício #3.5 com as marcações e o estilo deste</p><p>CodePen. Sua página inicial tem que ficar o mais próximo possível desta página.</p><p>- Adicione inicialmente uma nova região utilizando a tag <div class="parte2"></p><p>- Adicione um <h2> para o texto Projetos</p><p>Página 123 de 176</p><p>https://codepen.io/huogerac/pen/VwGJapg</p><p>- Adicione uma lista não ordenada <ul> com tres <li>, um para cada projeto</p><p>- Dentro de cada item, vamos precisar de um <h3> e um <p> para acomodar o título</p><p>de projeto e seu respectivo conteúdo</p><p>- Na classe .parte2, utilize o background-color:</p><p>#00a78e;, um color: white ou</p><p>color: #fff</p><p>- Em espaçamentos, vamos precisar de um espaço interno de 80px geral da região e</p><p>um espaçamento superior de 20px nos títulos</p><p>- Em espaçamento dos itens, vamos precisar de 20px para os títulos, podemos utilizar</p><p>a classe subtitle em cada projeto (h3), utilize o seletor .parte2 .subtitle2 { ...</p><p>} para indicar todos subtitle filhos div (região) .parte2. Adicione um line-height de</p><p>26px ( tamanho de linha)</p><p>- Para os parágrafos dentro do item, vamos precisar também de um line-height: 26px</p><p>e adicione um letter-spacing: 1.2pt (espaçamento entre as letras), utilize o seletor</p><p>.parte2 .texto { ... }</p><p>- Por último, vamos precisar tirar a decoração de lista padrão que deixa um ponto na</p><p>frente de cada item da lista, utilize a propriedade list-style: none; utilize o</p><p>seletor .projetos na <ul></p><p>Agora que temos a marcação para a região de projetos, podemos adicionar uma</p><p>navegação do botão do início da página para esta região.</p><p>Primeiro, tenha certeza de que o botão tenha o atributo href com o valor #projetos e</p><p>assim o botão vai ficar assim:</p><p><a href="#projetos" class="btn">Mais informações</a></p><p>Depois precisamos criar um atributo identificador (id) na região (div) de projetos com</p><p>este mesmo valor, mas agora sem a cerquilha. Assim o container de projetos ficará:</p><p><div class="parte2" id="projetos"></p><p>Com isto, o botão irá rolar a página até a região de projetos. Veja todos os passos</p><p>feitos nessa seção na aula Explorando Cores e Estilos de Listas no CSS,</p><p>Agora que usamos já usamos cores em fontes e como pano de fundo, chegou a</p><p>hora de você entender melhor como os códigos numéricos de cores funcionam no CSS.</p><p>Página 124 de 176</p><p>https://l.dev.pro.br/cores-e-listas-com-css</p><p>Entendendo cores no CSS</p><p>Figura 3.51: Cores no CSS com nomes e código hexadecimal</p><p>Existem três formas mais comuns utilizadas na definição de cores no CSS, são elas:</p><p>color: red; 👈 por nome</p><p>color: rgb(255,0,0) 👈 pelo sistema RGB</p><p>color: #ff0000 👈 pelo sistema RGB no formato hexadecimal</p><p>O sistema de cor por nome é uma lista que podemos utilizar e o que CSS sabe</p><p>reconhecer. Quando queremos adicionar uma cor de fonte (color) ou cor de fundo</p><p>(background-color), podemos utilizar o nome no valor da propriedade. Por exemplo, color:</p><p>darkred;. Acessando o endereço https://www.w3schools.com/colors/colors_names.asp,</p><p>podemos ver a lista completa destas cores.</p><p>Uma outra forma é através da notação RGB. Esse é um sistema de cores onde</p><p>indicamos a porcentagem de vermelho (Red), verde (Green) e azul (Blue) para formar uma</p><p>cor.</p><p>Esta porcentagem é um número entre 0 e 255, onde zero é a ausência da cor e 255</p><p>indica 100% da presença da cor. Combinando esta faixa de valor para vermelho, verde e</p><p>azul, podemos gerar até 16.777.216 cores (256 ^ 3). Desta forma, para formar um vermelho</p><p>puro precisamos de rgb(255, 0, 0)</p><p>Página 125 de 176</p><p>https://www.w3schools.com/colors/colors_names.asp</p><p>Figura 3.52: Diagrama de cores no sistema RGB</p><p>O sistema hexadecimal é quase idêntico ao sistema RGB. Porém a faixa de 0</p><p>a 255 é representada na base 16 ao invés da base 10. Ou seja, temos A, B, C, D, E e F</p><p>como algarismos para representar, respectivamente, os números 10, 11, 12, 13, 14 e 15.</p><p>Desta forma, 255 é FF em hexadecimal.</p><p>Outra diferença é a sintaxe. Em vez de rgb(255,0,0), colocamos a cerquilha antes do</p><p>código numérico da cor. Assim a cor vermelha é #FF0000. Não se preocupe porque não</p><p>precisamos ficar fazendo contas para chegar no formato hexadecimal. Existem ferramentas,</p><p>sites, o chrome dev tools e nosso editor de código faz isso pra gente.</p><p>Figura 3.53: Transformação de cor de hexadecimal para RGB</p><p>Existem outros sistemas de cores no CSS. Mas estes formatos apresentados aqui</p><p>são os mais utilizados e vamos ter a base fundamental para entender como trabalhar com</p><p>cores em nossas páginas.</p><p>Página 126 de 176</p><p>- Uma boa prática é escolher um sistema de cor e utilizar ele em todo CSS, ou seja,</p><p>não utilize o nome em parte e em outro lugar a notação rgb. Se começou atribuindo</p><p>cores usando rgb, continue no mesmo sistema em toda página.</p><p>- Pesquise também o sistema rgba(0,0,0,0.5) no CSS</p><p>- O sistema de nome pode parecer mais fácil de entender, mas não é muito utilizado</p><p>dado que utilizando rgb vamos ter muito mais possibilidades de cores</p><p>- Veja alguns sites onde podemos pegar cores e combinações de cores para deixar</p><p>sua página ainda mais bonita:</p><p>- https://www.w3schools.com/colors/colors_hex.asp</p><p>- https://www.w3schools.com/colors/colors_names.asp</p><p>- https://www.w3schools.com/colors/colors_palettes.asp</p><p>- https://palettes.shecodes.io/</p><p>- https://coolors.co/</p><p>- https://colors.lol/</p><p>- https://flatuicolors.com/</p><p>- https://huemint.com/</p><p>- https://clrs.cc/</p><p>- https://color.adobe.com/pt/</p><p>Para entender melhor o funcionamento de cores no CSS, assista ao vídeo "Aquarela</p><p>de Cores no CSS: Revelando o Sistema RGB e Hexadecimal.</p><p>Agora que você aprendeu a trabalhar com cores, chegou a hora de melhorar o</p><p>design da página do Enzo Pascal apresentando as habilidades que ele possui visualmente,</p><p>com uso de barras de progresso! Confira como na próxima seção.</p><p>🏆 Estilo da barra de progresso #3.7</p><p>CSS #3.7</p><p>Nessa seção vamos utilizar um novo componente visual para realçar as habilidades</p><p>do Enzo Pascal de maneira visual. Para isso, vamos criar mais uma região na página, como</p><p>fizemos na prática da seção #3.6.</p><p>Para isso, vamos aprender a tag html <progress>, utilizada para mostrar o</p><p>percentual de uma tarefa concluída. Ao final, devemos ter a página igual a exibida a seguir:</p><p>Página 127 de 176</p><p>https://www.w3schools.com/colors/colors_hex.asp</p><p>https://www.w3schools.com/colors/colors_names.asp</p><p>https://www.w3schools.com/colors/colors_palettes.asp</p><p>https://palettes.shecodes.io/</p><p>https://coolors.co/</p><p>https://colors.lol/</p><p>https://flatuicolors.com/</p><p>https://huemint.com/</p><p>https://clrs.cc/</p><p>https://color.adobe.com/pt/</p><p>https://l.dev.pro.br/cores-no-css</p><p>https://l.dev.pro.br/cores-no-css</p><p>Figura 3.54: Página com seção de habilidades do Enzo Pascal</p><p>Passos:</p><p>- Crie os arquivos d3-passo7.html e d3-passo7.css</p><p>- Tenha certeza que o d3-passo7.css é importado na página</p><p>- Compare o resultado do seu exercício #3.6 com as marcações e o estilo deste</p><p>CodePen. Sua página inicial tem que ficar o mais próximo possível desta página.</p><p>- Adicione inicialmente uma nova região utilizando a tag <div class="parte3"></p><p>- Adicione um <h2> para o texto Habilidades</p><p>- Adicione uma tag <p> para a habilidade CSS seguido da tag <progress>, utilize os</p><p>atributos max="10" e value="8" para indicar 80% de progresso para esta primeira</p><p>habilidade.</p><p>- Seguindo este padrão, crie as habilidades CSS e JavaScript com as tags <p> e</p><p><progress></p><p>- Utilize as propriedades height para altura e width para tamanho da barra. Teste</p><p>alguns valores utilizando a unidade px. Por exemplo, height: 40px; de forma a</p><p>ficar igual a imagem anterior. Não esqueça de criar uma classe como</p><p>.barra-habilidade para colocar estas propriedades</p><p>- Ainda na barra de progresso, utilize a propriedade accent-color para colocar a cor</p><p>da barra. Note que esta propriedade é específica desta da tag <progress>, diferente</p><p>das outras propriedades que vimos, como color, background-color e width, que</p><p>funcionam em todos ou quase todos elementos (tags) HTML, Esta funciona apenas</p><p>nesta tag.</p><p>Página 128 de 176</p><p>https://codepen.io/huogerac/pen/KKxOXqz</p><p>- Note que a color pode ser colocada na classe .parte3 e assim todos os textos da</p><p>região ficam da mesma cor e assim esta propriedade não precisa ficar repetida no</p><p>h2 e em todos os p. Utilize o mesmo padding da parte2 de forma que os</p><p>espaçamentos fiquem iguais.</p><p>- Note que vamos precisar adicionar um margin-top para que uma barra fique distante</p><p>da anterior, utilize o dev tools de forma a achar o melhor lugar para colocar este</p><p>espaçamento.</p><p>- Por último, e não menos importante, note que os espaçamentos são simétricos. Ou</p><p>seja, imagine que se medirmos com uma régua, os elementos possuem mesmo</p><p>espaçamento uniforme, todo iguais, conforme imagem 3.55 a seguir.</p><p>Figura 3.55: Espaçamentos uniformes para garantir harmonia na página</p><p>Uma página não segue um padrão de espaçamento causa desconforto e impressão</p><p>de amadorismo para um usuário que a acesse.</p><p>Depois de tentar fazer por conta própria, assista à aula “Incorporando Barras de</p><p>Progresso com HTML e CSS”.</p><p>Agora que a página do portfólio do Enzo está mais completa, vamos aprender a criar</p><p>um componente muito comum, o rodapé. Confira como na próxima seção.</p><p>Página 129 de 176</p><p>https://l.dev.pro.br/barra-de-progresso</p><p>https://l.dev.pro.br/barra-de-progresso</p><p>🏆 Formatar o rodapé #3.8</p><p>CSS #3.8</p><p>Vamos criar o rodapé nessa seção, a última parte com conteúdo. Uma página</p><p>geralmente tem informações importantes, como o contato e outros links adicionais.</p><p>Em termos de formatação do estilo não vamos precisar de nada novo, apenas cor de</p><p>fundo, tamanho da fonte e um pouco de espaçamento. Porém, o rodapé traz um</p><p>acabamento visual importante em uma página. Desta forma, o rodapé que devemos fazer</p><p>deverá ficar como exibido a seguir:</p><p>Figura 3.56: Rodapé da página do Enzo Pascal</p><p>Passos:</p><p>- Crie os arquivos d3-passo8.html e d3-passo8.css</p><p>- Tenha certeza que o d3-passo8.css é importado na página</p><p>- Compare o resultado ou deixe sua página do exercício #3.7 o mais próximo possível</p><p>das marcações e o estilo deste CodePen.</p><p>- Adicione uma nova região, mas agora no lugar da tradicional <div> que utilizamos</p><p>nas outras partes e que funciona da mesma forma, vamos usar algo mais semântico,</p><p>Página 130 de 176</p><p>https://codepen.io/huogerac/pen/KKGdGoB</p><p>ou seja, que represente melhor esta região específica, lembra qual tag podemos</p><p>utilizar?</p><p>- Utilize a tag <footer class="rodape"> e adicione um parágrafo para cada linha de</p><p>conteúdo acima, ou seja, um elemento <p> para o nome, outro para o email e assim</p><p>por diante.</p><p>- Adicione a cor de fundo #293651; para container do rodapé.</p><p>- Utilize a cor da fonte #828a9c; e o tamanho 14px;</p><p>- O espaçamento é o mesmo que utilizamos nas outras regiões e assim temos uma</p><p>página mais agradável visualmente.</p><p>- Para os link, utilizamos a tag âncora <a> com o atributo href apontando para</p><p>mailto:enzo.pascal@dev.com.br e o link do codepen que você deve ter criado</p><p>para salvar este conteúdo</p><p>- Outra marcação interessante na tag <a> é utilizar o atributo target="_blank" e</p><p>assim fazer com que quando o visitante clicar uma nova aba será aberta ao invés de</p><p>mudar a URL da página atual, isto é bem utilizado para não deixar o visitante do seu</p><p>site perder sua página.</p><p>- Por padrão a tag <a> tem a cor azul rgb(0,0,255) o que tem um contraste ruim no</p><p>fundo escuro que estamos utilizando, mude a cor para a mesma cor que utilizamos</p><p>no texto do rodapé #828a9c;</p><p>- Para destacar melhor quando o visitante passa o mouse sobre o link, utilize o seletor</p><p>específico para esta ação que é o "hover", mudando a propriedade de cor já</p><p>atribuída para outra cor mais clara, um branco neste caso. Assim o CSS ficará como</p><p>a seguir:</p><p>Esse tipo de seletor usado acima ainda não vimos. Ele se chama pseudo-classe</p><p>CSS. Ele é usado em conjunto com os outros seletores, utilizando o caracter “:”. Ele serve</p><p>para criar um estilo específico para um estado especial do elemento. Nesse caso, para</p><p>mudar a cor do link quando o usuário passar o mouse por cima desse elemento.</p><p>Depois de fazer o exercício por sua conta, assista ao vídeo “Desvendando o CSS:</p><p>Tag Semântica, Pseudo-Classe e Caracteres Especiais”.</p><p>Página 131 de 176</p><p>mailto:enzo.pascal@dev.com.br</p><p>https://l.dev.pro.br/tag-semantica</p><p>https://l.dev.pro.br/tag-semantica</p><p>Agora só falta você conhecer mais um conceito para finalizar os conceitos</p><p>fundamentais de uma página web: como trabalhar com letras diferentes em seu site! Vamos</p><p>estudar isso no nono, e último passo, da construção da página do Enzo Pascal, conforme</p><p>seção a seguir.</p><p>🏆 Importar fonte web #3.9</p><p>CSS #3.9</p><p>Finalmente chegamos no último passo para construção da página do designer Enzo</p><p>Pascal! Para finalizar esse capítulo com chave de ouro, vamos alterar nossa página web</p><p>para usar tipografia diferenciada nos textos.</p><p>Utilizando a propriedade font-family é possível alterar o tipo da fonte. Dependendo</p><p>do sistema operacional, pode ter pequenas diferenças, mas no geral temos uma fonte com</p><p>serifa, outra sem (sans) serifa e uma fonte mono espaçada.</p><p>Um diferencial em uma página é a possibilidade de importar fontes externas e desta</p><p>forma transformar completamente a tipografia (letras) da página que estamos trabalhando.</p><p>Existem duas formas.</p><p>A primeira é importar um arquivo de fonte como .ttf, da mesma forma que</p><p>importamos um arquivo .css. A segunda forma é importar utilizando um arquivo na internet,</p><p>através de uma url.</p><p>Na prática, podemos procurar uma fonte na internet pelo termo "web fonts" e chegar</p><p>em sites como o fonts.google.com. Nele é possível escolher, entre as milhares de fontes,</p><p>uma que faça sentido para o contexto da página.</p><p>Página 132 de 176</p><p>https://fonts.google.com/</p><p>Figura 3.57: Site de fonts.google.com</p><p>A parte mais difícil é achar uma fonte que combine com o que precisamos. Importar</p><p>a fonte no site para ser utilizada é muito simples.</p><p>Primeiro clicamos na fonte desejada. Em seguida selecionamos um peso</p><p>(espessura), por exemplo, 200 para super fina ou 900 para uma fonte bem grossa (negrito).</p><p>Por último, precisamos copiar o código na lateral direita que representa a importação, algo</p><p>como: @import url('caminho da fonte na internet').</p><p>Página 133 de 176</p><p>Figura 3.58: Interface do Google Fonts para importação de fontes</p><p>Este trecho de código de importação (lateral direita) pode ir dentro do <head> da</p><p>página dentro da tag <style> ou diretamente (sem a tag style) em qualquer arquivo CSS que</p><p>está sendo importado pelo head.</p><p>Como você deve ter percebido, alguém fez o trabalho duro de construir uma fonte</p><p>bonita (na maioria das vezes) em diversos formatos e tamanhos e colocá-la disponível na</p><p>internet. Tudo que precisamos fazer é importá-la, assim como fazemos a importação de um</p><p>arquivo CSS que criamos.</p><p>Apenas para referência, quando precisamos importar bibliotecas de ícones como</p><p>Material Icons ou Font Awesome, o processo de importar é o mesmo que o de uma web</p><p>font, que você está aprendendo aqui nessa seção.</p><p>Para dar um toque final na página do Enzo ou Enza Pascal, vamos utilizar a fonte</p><p>Montserrat, também vamos precisar selecionar três espessuras: 300, 400 e 900. Desta</p><p>forma nossa página ficará como a seguir:</p><p>Página 134 de 176</p><p>https://fonts.google.com/icons</p><p>https://fontawesome.com/</p><p>https://fonts.google.com/specimen/Montserrat?query=Montserrat</p><p>Fonte padrão Fonte importada da web</p><p>Note que é possível mudar bastante o visual modificando uma fonte. Veja a seguir o</p><p>que é necessário para importar a fonte Montserrat e deixar na página como a imagem</p><p>anterior da direita.</p><p>Passos:</p><p>- Crie os arquivos d3-passo9.html e d3-passo9.css</p><p>- Tenha certeza que o d3-passo9.css é importado na página</p><p>- Compare o resultado ou deixe sua página do exercício #3.8 o mais próximo possível</p><p>das marcações e o estilo deste CodePen.</p><p>- Vamos precisar importar a fonte e dentro do seletor universal, vamos dizer que todos</p><p>elementos devem utilizar a font-family com a nova fonte</p><p>- Vamos precisar remover em todos os lugares onde colocamos a fonte sem serifa,</p><p>localizar e remover as linhas de font-family: sans-serif; como a seguir. Nota:</p><p>na imagem estamos utilizando os caracteres /* para início de comentário e */ para</p><p>fim de comentário, isto faz com tudo que esteja entre estes caracteres sejam</p><p>ignorado pelo navegador. Isto funciona para desativar um trecho de código CSS,</p><p>mas para nossa página podemos simplesmente deletar as linhas.</p><p>Página 135 de 176</p><p>https://codepen.io/huogerac/pen/LYgZWvd</p><p>- Altere o valor da propriedade font-weight de font-weight: bold; para</p><p>font-weight: 900; na classe .title { ... } e assim vamos fazer com que o</p><p>nome do Enzo ou da Enza Pascal fiquem na forma mais negrita possível</p><p>- Adicione a propriedade font-weight: 400; na classe .btn { ... } e assim o</p><p>botão vai ficar um pouco mais legível, dado que a espessura 300 é muito fina para o</p><p>botão</p><p>Depois de fazer esse exercício por sua conta, assista à vídeo aula “Letras</p><p>com</p><p>Estilo: Dominando as Fontes no Desenvolvimento Web” para conferir a solução. Depois</p><p>disso, você chegou ao passo final de nosso exercício prático</p><p>Chegamos ao fim da construção de uma página simples, o objetivo aqui foi conhecer</p><p>algumas propriedades do CSS, mas principalmente trazer a sequência que podemos utilizar</p><p>para construir uma página.</p><p>Outro ponto importante é como utilizar o Chrome Devtools, a documentação da</p><p>Mozilla para pesquisar e conhecer melhor como utilizar propriedades.</p><p>Também conhecemos algumas boas práticas que provavelmente vamos ver em</p><p>projetos reais, como criar arquivos externos com nosso código de estilo CSS e utilizar</p><p>classes como .title ao invés de nomes de elementos como h1.</p><p>Por fim, esta página ainda pode ser melhorada, com práticas de nomes das classes</p><p>CSS, bem como simplificar evitando repetições desnecessárias. Mas o principal para um</p><p>iniciante é que feito é melhor que perfeito.</p><p>Desta forma e com o objetivo de maximizar o aprendizado, uma dica é primeiro em</p><p>tentar fazer a página, aprender as propriedades do CSS ao invés de quem sabe ficar</p><p>paralizado na tentativa de pesquisar as melhores práticas.</p><p>Depois de praticar bastante construindo diversas páginas de diferentes tipos, daí sim</p><p>faça sentido pensar um pouco mais em otimização e melhores práticas. E esta etapa pode</p><p>ser melhor se conseguir a ajuda de outro desenvolvedor mais experiente, tente perguntar</p><p>pra algum amigo ou amiga o que pode ser melhorado.</p><p>Página 136 de 176</p><p>https://l.dev.pro.br/fontes-web</p><p>https://l.dev.pro.br/fontes-web</p><p>Agora que você aprendeu como funciona uma página web, chegou a hora de</p><p>aprender a usar ferramentas mais profissionais, necessárias a quem quer ser um</p><p>programador web. Confira no próximo capítulo.</p><p>Página 137 de 176</p><p>Perguntas do Capítulo 3</p><p>O que é Cascade Style Sheets?</p><p>Em qual tag colocamos código CSS?</p><p>O que é um seletor CSS?</p><p>O que é uma propriedade CSS?</p><p>O que é um valor de propriedade CSS?</p><p>Cite um exemplo de propriedade CSS?</p><p>Estilo inline, Tag Style e arquivos externos</p><p>Quais os 3 lugares onde é possível colocar código HTML?</p><p>Por que devemos evitar a definição de css dentro do elemento style?</p><p>Por que é melhor definir código CSS em arquivos separados do HTML?</p><p>Quando é recomendado usar código CSS na tag <style>?</p><p>Editor de código</p><p>Para que serve um editor de código?</p><p>Porque usar um editor de código é melhor que usar um editor de texto comum?</p><p>O que syntax highlight?</p><p>O que é auto complete?</p><p>Introdução aos seletores CSS</p><p>Quais são os 4 principais tipos de seletores css?</p><p>Como é definido um seletor CSS de elemento?</p><p>Como é definido um seletor CSS de id?</p><p>Como é definido um seletor CSS de classe?</p><p>Como é definido o seletor CSS de universal?</p><p>Qual o nome da ferramenta que permite publicar paginas na internet com seu código</p><p>HTML e CSS?</p><p>Página 138 de 176</p><p>Links e Botões com CSS</p><p>Qual é a tag que deve ser utilizada para criação de um link numa página de</p><p>internet?</p><p>Qual propriedade de CSS serve para trocar a cor de fundo de um elemento html?</p><p>Qual propriedade de CSS define o destino para o qual o usuário será levado após</p><p>clicar em um link html?</p><p>Que propriedade CSS deve ser alterada para remover o texto sublinhado de um</p><p>link html?</p><p>Que propriedade deve ser usada para criar bordas arredondadas em um elemento</p><p>html?</p><p>Que tipo de seletor devemos usar para criar um link que leve o usuário para uma</p><p>seção específica da mesma página?</p><p>Para que serve o Chrome Dev Tools?</p><p>Alinhar textos e espaçamentos</p><p>Liste duas propriedades relativas a espaçamento de texto e descreva para que serve</p><p>cada uma?</p><p>Para que serve a propriedade de CSS letter-spacing?</p><p>O que é reset de CSS?</p><p>Por que é uma boa prática fazer reset de CSS?</p><p>Entendendo a unidade px (pixels)</p><p>O que é um pixel?</p><p>Pixel é uma unidade absoluta ou relativa?</p><p>Cite uma unidade de tamanho em CSS que seja relativa.</p><p>Explique qual a diferença entre uma unidade absoluta e relativa em CSS.</p><p>Tamanho e posicionamento de imagem</p><p>Qual tag deve ser usada para inserir uma imagem em um página html?</p><p>Porque não é possível centralizar uma imagem diretamente em um tag <img>?</p><p>Para que serve a tag <div>?</p><p>Cite dois elementos html semânticos que possuem o mesmo comportamento que a</p><p>tag <div>.</p><p>Página 139 de 176</p><p>Cite qual a diferença entre um elemento e bloco e de linha.</p><p>Estilo de lista e cor de fundo #3.6</p><p>Qual a propriedade css que permite alterar a cor de fundo de um elemento HTML?</p><p>Qual propriedade permite alterar a estilização padrão de uma lista HTML?</p><p>Entendendo cores no CSS</p><p>Qual a sintaxe de um valor de cor em formato RGB no CSS?</p><p>Qual a sintaxe de um valor de cor em formato hexadecimal no CSS?</p><p>Por que não precisamos nos preocupar em fazer conta para transformar cores em</p><p>formato hexadecimal para RGB e vice versa?</p><p>Site o nome de um site que pode ser usado para ajudar na escolha de uma paleta</p><p>de cores.</p><p>Estilo da barra de progresso #3.7</p><p>Qual tag html representa uma barra de progresso?</p><p>Qual propriedade CSS se aplica apenas a uma barra de progresso, e não a outros</p><p>elementos HTML?</p><p>Formatar o rodapé #3.8</p><p>Para que serve um pseudo-classe de CSS?</p><p>Qual a tag semântica que representa o rodapé em HTML?</p><p>Importar fonte web #3.9</p><p>O que é uma fonte web?</p><p>Cite um site onde você pode encontrar fontes web.</p><p>Como você deve importar uma fonte web em um arquivo de CSS?</p><p>Página 140 de 176</p><p>Capítulo 4: As Ferramentas do Programador</p><p>“Se você quer cortar uma árvore na metade, passe o dobro do tempo afiando o machado”</p><p>Provérbio Chinês</p><p>Assim como o proverbial conselho de "Se você quer cortar uma árvore na metade do</p><p>tempo, passe o dobro do tempo afiando o machado", a eficiência na programação web</p><p>também depende de ferramentas afiadas. Imagine enfrentar uma floresta de códigos sem</p><p>as ferramentas certas - seria como tentar cortar uma árvore com um machado cego. Neste</p><p>capítulo, vamos mergulhar nas ferramentas essenciais do desenvolvedor - Linux, Git e</p><p>Docker. Ao dominar essas ferramentas, você estará afiando seu machado para enfrentar</p><p>desafios complexos com confiança.</p><p>Nos capítulos anteriores você construiu a a página do designer Enzo Pascal. O foco</p><p>foi aprender o básico sobre programação web, o necessário para entender como uma</p><p>página chega até o cliente final via internet. E agora que você aprendeu esse básico,</p><p>chegou a hora de se aprofundar nas ferramentas que todo programador web utiliza em seu</p><p>dia a dia.</p><p>Nós vamos usar o projeto do Enzo como base para apresentar as 3 ferramentas que</p><p>qualquer pessoa que deseja conquistar uma vaga como programador profissional precisa</p><p>aprender. São elas Linux, Git e Docker. Abaixo segue um resumo geral de cada uma delas.</p><p>Linux: Navegando pelo Terreno do Desenvolvimento</p><p>Ao adentrar o ecossistema do desenvolvimento web, é crucial estar familiarizado</p><p>com o Linux, um sistema operacional amplamente utilizado por desenvolvedores. Não se</p><p>preocupe com os detalhes complexos; concentre-se nos comandos essenciais para navegar</p><p>pelos diretórios, instalar pacotes e executar tarefas básicas. Assim como um explorador</p><p>habilidoso precisa conhecer a topografia da terra, um desenvolvedor precisa dominar as</p><p>nuances do Linux para se movimentar com eficiência.</p><p>Git: Trilhando Seu Caminho pela Colaboração</p><p>Imagine programar como se estivesse em uma trilha na floresta, mas com a</p><p>capacidade de voltar atrás e explorar diferentes caminhos. Isso é o que o Git proporciona -</p><p>um sistema de controle de versão que permite rastrear alterações, colaborar com outros</p><p>desenvolvedores e corrigir erros sem perder o rumo. Entenda os comandos básicos, como</p><p>commit, pull e push, para trilhar seu caminho pela colaboração de forma eficaz.</p><p>Docker: Empacotando Suas Ferramentas de Maneira Eficiente</p><p>À medida que avançamos na analogia, imagine se pudéssemos "empacotar" nossas</p><p>ferramentas em uma mochila eficiente e transportá-las facilmente de um local para outro.</p><p>Docker faz exatamente isso para o desenvolvimento web. Aprenda a criar contêineres leves</p><p>para suas aplicações, garantindo que elas funcionem de maneira consistente,</p><p>independentemente do ambiente. Com o Docker, você pode</p><p>empacotar suas ferramentas</p><p>de maneira eficiente, facilitando o compartilhamento e a implantação.</p><p>Página 141 de 176</p><p>Conclusão: Ferramentas Afiadas, Desenvolvedor Preparado</p><p>Ao final deste capítulo, você terá afiado suas habilidades com as ferramentas</p><p>essenciais de um desenvolvedor: Linux, Git e Docker. Assim como um machado afiado</p><p>torna o trabalho mais rápido e eficiente, essas ferramentas vão aprimorar sua capacidade</p><p>de desenvolver, colaborar e implantar projetos web. Agora, com seu machado afiado, você</p><p>está pronto para enfrentar desafios maiores e conquistar sua primeira vaga como</p><p>desenvolvedor web.</p><p>Para saber mais sobre as razões de usar essas ferramentas ser tão importante,</p><p>assista à vídeo aula “As 3 principais ferramentas que todo programador deve conhecer”.</p><p>Agora que você já entendeu como esse assunto é importante, vamos começar</p><p>estudando o Linux, o principal Sistema Operacional da internet, na próxima seção.</p><p>A Importância do Linux para o Desenvolvedor Web</p><p>Ao trilhar o caminho para se tornar um desenvolvedor web, compreender a</p><p>importância do Linux é essencial para construir uma base sólida em suas habilidades. O</p><p>Linux é o sistema operacional preferido em muitos servidores web ao redor do mundo.</p><p>Dominar o Linux não apenas coloca você em sintonia com a preferência da comunidade de</p><p>desenvolvedores, mas também o prepara para enfrentar ambientes de produção comuns,</p><p>uma vez que muitos servidores utilizam esse sistema operacional.</p><p>A predominância desse Sistema Operacional nos servidores não é apenas uma</p><p>tendência, mas uma realidade duradoura, mais de 90% da web roda com base em Linux.</p><p>Ao entender e trabalhar proficientemente com o Linux, você estará capacitado a lidar com</p><p>situações práticas que frequentemente surgem em implantações e gerenciamento de</p><p>servidores web. Isso não só contribui para sua versatilidade como desenvolvedor, mas</p><p>também oferece uma vantagem valiosa no mercado de trabalho.</p><p>Além disso, o Linux fornece uma caixa de ferramentas robusta, equipando os</p><p>desenvolvedores com comandos poderosos que simplificam uma variedade de tarefas.</p><p>Desde a navegação eficiente pelos diretórios até a instalação e gerenciamento de pacotes,</p><p>as ferramentas do Linux são essenciais para o desenvolvimento web. Essa proficiência não</p><p>apenas aumenta sua autonomia, mas também aprimora sua eficiência na execução de</p><p>tarefas cotidianas, tornando o aprendizado desse sistema uma etapa valiosa na sua jornada</p><p>para conquistar uma vaga como programador web.</p><p>Além disso, para aqueles que estão dando os primeiros passos na programação, a</p><p>ideia de interagir com um terminal pode inicialmente parecer assustadora. A imagem da tela</p><p>preta, reminiscente dos cenários de hackers nos filmes, pode gerar desconforto para quem</p><p>está mais habituado às interfaces gráficas tradicionais. É perfeitamente normal sentir essa</p><p>hesitação inicial.</p><p>No entanto, é importante destacar que essa barreira inicial é apenas uma questão</p><p>de costume. À medida que você se familiariza com os comandos do terminal e compreende</p><p>a lógica por trás de suas operações, a maioria dos desenvolvedores percebe que programar</p><p>Página 142 de 176</p><p>https://l.dev.pro.br/devtools-motivacao</p><p>via terminal oferece uma eficiência e controle notáveis. A habilidade de executar tarefas</p><p>complexas com apenas alguns comandos, sem a necessidade de navegar por menus</p><p>gráficos, torna-se uma preferência para muitos profissionais do desenvolvimento web.</p><p>Portanto, encare esse desconforto inicial como parte natural do aprendizado e esteja</p><p>certo de que, com o tempo e prática, a utilização do terminal se tornará uma ferramenta</p><p>valiosa em sua caixa de habilidades de desenvolvedor. Vamos começar essa jornada</p><p>ensinando aos usuários de Windows a instalares o Linux da maneira mais fácil possível.</p><p>Confira na próxima seção.</p><p>Instalação de Linux no Windows</p><p>A integração do Linux no ambiente Windows tornou-se uma realidade acessível</p><p>através doWSL 2 (Subsistema do Windows para Linux). Essa abordagem permite que você</p><p>usufrua do melhor de ambos os mundos: a familiaridade do Windows e o poder do Linux.</p><p>Vamos dar os primeiros passos para instalar o Ubuntu no seu Windows via WSL 2.</p><p>Passo 1: Verifique os Requisitos do Sistema</p><p>Antes de começar, é essencial garantir que seu sistema atenda aos requisitos</p><p>mínimos para o WSL 2. Certifique-se de que está utilizando oWindows 10, versão 1903</p><p>ou posterior, com a Virtualização por Hardware habilitada em sua BIOS.</p><p>Passo 2: Habilite o WSL no Windows</p><p>Abra o PowerShell como administrador e execute o seguinte comando para habilitar</p><p>o recurso WSL:</p><p>dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux</p><p>/all /norestart</p><p>Em seguida, habilite o recurso de Máquina Virtual, essencial para o WSL 2:</p><p>dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart</p><p>Reinicie o seu sistema para aplicar as alterações.</p><p>Passo 3: Baixe e Instale o Kernel do WSL 2</p><p>Acesse o seguinte link e baixe o pacote do kernel do WSL 2: Kernel do WSL 2 para</p><p>Windows</p><p>Instale o pacote baixado para garantir que seu sistema esteja utilizando a versão</p><p>mais recente do kernel do WSL 2.</p><p>Passo 4: Baixe e Instale o Ubuntu</p><p>Dirija-se à Microsoft Store e procure por "Ubuntu". Selecione a versão mais recente</p><p>disponível e clique em "Instalar". Após a instalação, clique em "Iniciar" para finalizar o</p><p>processo.</p><p>Página 143 de 176</p><p>Passo 5: Configure seu Ubuntu</p><p>Ao abrir o Ubuntu, será solicitado que você crie um usuário e defina uma senha.</p><p>Após esse processo, seu ambiente Ubuntu estará pronto para uso. Agora, você pode</p><p>desfrutar da flexibilidade e das ferramentas poderosas do Linux diretamente no seu</p><p>Windows, preparando o terreno para sua jornada no desenvolvimento web.</p><p>Essa integração é valiosa, pois permite que você experimente as vantagens do</p><p>Linux sem abrir mão da familiaridade do Windows. Ao seguir esses passos simples, você</p><p>terá uma poderosa estação de trabalho de desenvolvimento, combinando o melhor de dois</p><p>mundos.</p><p>Para ajudar nesse processo, assista ao vídeo “Como instalar o Linux no Windows</p><p>com WSL”.</p><p>Agora que você instalou o Linux, chegou a hora de conhecer sua principal</p><p>ferramenta: o terminal de comando. Confira na próxima seção.</p><p>O Terminal de Comando e o Sistema de Arquivos</p><p>Observação: se você utiliza Mac, ele também é um sistema Unix que possui</p><p>terminal. Basta pesquisar por “term” em seus aplicativos. O único detalhe é que o Mac tem</p><p>usado um tipo de terminal diferente do Linux como padrão, o zsh. Para seguir as instruções</p><p>desta seção, basta digitar “bash” no terminal, seguido de enter. Assim você vai usa a</p><p>mesma versão de terminal padrão do Linux.</p><p>Já se você usa Linux diretamente, para acessar o terminal você também pode</p><p>procurar por “term” no sistema de aplicativos do Ubuntu e digitar enter. A outra opção é</p><p>utilizar o atalho pressionando as teclas “Ctrl” + “Alt” + “T”.</p><p>Já no WSL com Windows, você pode utilizar a tecla de inicialização e procurar por</p><p>“Ubuntu”, e ele já abrirá o WSL no terminal.</p><p>No universo do desenvolvimento web, familiarizar-se com o terminal de comando do</p><p>Linux é uma habilidade essencial. O terminal é uma interface de texto que permite interagir</p><p>com o sistema operacional por meio de comandos. Uma ferramenta crucial dentro do</p><p>terminal é o REPL (Read-Eval-Print Loop), que permite a execução de comandos em tempo</p><p>real, tornando o processo de teste e depuração mais dinâmico.</p><p>Compreendendo Pastas/Diretórios e Arquivos:</p><p>Antes de mergulharmos nos comandos do terminal, é crucial entender dois conceitos</p><p>fundamentais: pastas/diretórios e arquivos. No Linux, a estrutura de diretórios organiza o</p><p>sistema de arquivos hierarquicamente. Pastas contém arquivos ou subpastas,</p><p>proporcionando uma organização lógica dos dados. Sabendo disso, você precisa conhecer</p><p>os comandos essenciais para navegar entre arquivos e diretórios.</p><p>Página 144 de 176</p><p>https://l.dev.pro.br/wsl</p><p>https://l.dev.pro.br/wsl</p><p>Comandos Essenciais do Terminal:</p><p>"man" - Manual do Sistema:</p><p>O comando man é uma ferramenta valiosa para obter informações detalhadas sobre</p><p>outros</p><p>comandos. Ao digitar man seguido do nome do comando desejado, você terá acesso</p><p>a uma documentação completa, fornecendo explicações e opções de uso.</p><p>"pwd" - Diretório Atual:</p><p>O comando pwd (Print Working Directory) exibe o caminho completo do diretório em</p><p>que você está atualmente.</p><p>"ls" - Listar Conteúdo do Diretório:</p><p>O comando ls lista o conteúdo do diretório atual. Algumas opções úteis incluem:</p><p>-l (formato longo): Exibe detalhes como permissões, número de links, proprietário,</p><p>grupo, tamanho e data de modificação dos arquivos.</p><p>-a (todos os arquivos): Mostra todos os arquivos, incluindo os ocultos que</p><p>começam com um ponto.</p><p>-la (formato longo e todos os arquivos): Combina as opções acima, exibindo</p><p>detalhes e incluindo arquivos ocultos.</p><p>"cd" - Mudar de Diretório:</p><p>O comando cd (Change Directory - Mudar de Pasta) é usado para navegar entre</p><p>diretórios. Basta digitar cd seguido do nome do diretório para o qual deseja se mover:</p><p>● Path Relativo sem Ponto: Digite o nome do diretório para o qual deseja se</p><p>mover. Exemplo: cd Documentos.</p><p>● Path Relativo com Ponto: Utilize . para representar o diretório atual.</p><p>Exemplo: cd . (não altera o diretório atual).</p><p>● Utilizando ..: Para acessar o diretório pai, use ... Exemplo: cd ...</p><p>● Sem Nenhum Path: Se você executar cd sem especificar um path, retornará</p><p>ao diretório do usuário.</p><p>Esses comandos formam a base para a navegação e manipulação de arquivos no</p><p>terminal do Linux. Ao compreender essas operações, você estará capacitado para interagir</p><p>eficientemente com o sistema de arquivos, tornando-se mais ágil e eficaz no</p><p>desenvolvimento web.</p><p>Além disso, ao digitar caminhos de arquivos ou diretórios, aproveite a utilidade da</p><p>tecla Tab. Pressionar Tab completa automaticamente o nome do arquivo ou diretório,</p><p>economizando tempo e evitando erros de digitação. Essa funcionalidade facilita a</p><p>navegação e a execução de comandos no terminal, tornando seu fluxo de trabalho mais</p><p>eficiente.</p><p>Para compreender esse uso do terminal, assista à vídeo aula “Desbravando o</p><p>Universo Linux: Terminal, Pastas e Comandos Essenciais!”.</p><p>Página 145 de 176</p><p>https://l.dev.pro.br/linux-gestao-pastas-e-arquivos</p><p>https://l.dev.pro.br/linux-gestao-pastas-e-arquivos</p><p>Agora que você já sabe navegar entre pastas e arquivos chegou a hora de aprender</p><p>a criar, mover e excluir esses elementos pelo terminal de comando. Confira como fazer</p><p>todas essas operações na próxima seção.</p><p>Gestão de Arquivos no Linux</p><p>Uma parte essencial do trabalho de um desenvolvedor web é a gestão eficiente de</p><p>arquivos no sistema operacional. No ambiente Linux, existem cinco comandos fundamentais</p><p>que facilitam essa gestão: mkdir, touch, rm, cp e mv.</p><p>1. mkdir - Criar Diretório:</p><p>O comando mkdir (Make Directory) é utilizado para criar novos diretórios. Por</p><p>padrão, cria apenas um diretório de cada vez. No entanto, a opção -p permite criar diretórios</p><p>aninhados de forma recursiva, ou seja, cria todos os diretórios intermediários necessários.</p><p>2. touch - Criar Arquivo Vazio:</p><p>O comando touch cria um arquivo vazio. Pode ser útil para criar rapidamente</p><p>arquivos de configuração ou placeholders. Basta digitar touch seguido do nome do arquivo</p><p>desejado.</p><p>3. rm - Remover Arquivo/Diretório:</p><p>O comando rm (Remove) é usado para excluir arquivos ou diretórios. Por padrão,</p><p>remove apenas arquivos, mas a opção -r (recursive) permite excluir diretórios e seu</p><p>conteúdo de forma recursiva.</p><p>4. cp - Copiar Arquivos/Diretórios:</p><p>O comando cp (Copy) é usado para copiar arquivos e diretórios. Para copiar</p><p>diretórios e seu conteúdo, é necessário usar a opção -r (recursive). Em seguida, especifique</p><p>o arquivo ou diretório que deseja copiar e seu destino.</p><p>5. mv - Mover/Renomear Arquivos/Diretórios:</p><p>O comando mv (Move) é usado para mover arquivos ou diretórios de um local para</p><p>outro. Também pode ser usado para renomear arquivos e diretórios. Para renomear, basta</p><p>especificar o nome atual e o novo nome.</p><p>Esses cinco comandos são fundamentais para a gestão eficiente de arquivos no</p><p>Linux. Com eles, você pode criar, modificar, copiar, mover e excluir arquivos e diretórios</p><p>conforme necessário durante o desenvolvimento web. Lembre-se sempre de usar as</p><p>opções -p para criar diretórios aninhados e -r para operações recursivas de remoção e</p><p>cópia, garantindo uma gestão de arquivos segura e eficaz.</p><p>Para compreender como utilizar esses arquivos, crie uma pasta de projeto da página</p><p>do Enzo Pascal, com arquivos enzo-pascal.html e enzo-pascal.css. Essa pasta será a base</p><p>de estudo na próximas seções. Depois de tentar fazer isso sozinho usando os comandos</p><p>Página 146 de 176</p><p>ensinados nessa seção, veja a vídeo aula “Como Manipular Pastas e Arquivos no Linux:</p><p>Ferramentas Essenciais”.</p><p>Agora que você aprendeu o básico sobre gestão de arquivos, chegou a hora de</p><p>aprender o mínimo sobre como editar os conteúdos de um arquivo usando o terminal do</p><p>Linux na próxima seção.</p><p>Edição de Arquivos pelo Terminal com VIM</p><p>Para fazer pequenas alterações em arquivos diretamente no servidor, o VIM é uma</p><p>ferramenta poderosa e altamente eficiente. O VIM é um editor de texto robusto,</p><p>amplamente utilizado no ambiente Unix e Linux, que oferece uma variedade de recursos</p><p>para facilitar a edição de arquivos diretamente no terminal.</p><p>Comandos Básicos do VIM:</p><p>1. Abrir um Arquivo com VIM: para abrir um arquivo com o VIM, basta digitar</p><p>vim seguido do nome do arquivo desejado e pressionar Enter. Isso abrirá o</p><p>arquivo no VIM para edição.</p><p>2. Entrar no Modo de Inserção: no VIM, o modo de inserção permite que você</p><p>digite ou edite o conteúdo do arquivo. Para entrar nesse modo, pressione a</p><p>tecla “I”.</p><p>3. Sair do Modo de Inserção: para sair do modo de inserção e entrar no modo</p><p>de comando, pressione a tecla Esc.</p><p>4. Deletar Linhas: No modo de comando do VIM, você pode excluir linhas</p><p>usando o comando “d”. Por exemplo, dd exclui a linha atual, e d3 exclui as</p><p>três linhas seguintes.</p><p>5. Modo Visual: o modo visual permite selecionar blocos de texto para</p><p>operações como cópia ou exclusão. Para entrar no modo visual, pressione</p><p>“Shift + v”.</p><p>6. Salvar e Sair: para salvar as alterações feitas no arquivo e sair do VIM, use</p><p>o comando :wq e pressione Enter. Também é possível salvar e sair usando o</p><p>comando :x. Se desejar apenas salvar o arquivo sem sair, use :w. Para sair</p><p>sem salvar alterações, use :q!.</p><p>O VIM oferece uma maneira rápida e eficiente de fazer pequenas edições em</p><p>arquivos diretamente no servidor. Com esses comandos básicos, você estará preparado</p><p>para fazer alterações rápidas e precisas em seus arquivos de forma conveniente e direta,</p><p>sem a necessidade de abrir um editor de texto separado.</p><p>Para entender melhor como usar o VIM para editar arquivos no terminal do Linux,</p><p>assista à aula “Edição básica de Arquivos com Vim: Descubra os Fundamentos desse</p><p>Editor de Texto”.</p><p>Mas como foi visto no capítulo 2, será usado e editor VSCode para escrita de</p><p>código. Por isso você vai aprender como usar o VSCode com Linux e WSL na próxima</p><p>seção.</p><p>Página 147 de 176</p><p>https://l.dev.pro.br/movendo-pastas-linux</p><p>https://l.dev.pro.br/movendo-pastas-linux</p><p>https://l.dev.pro.br/vim</p><p>https://l.dev.pro.br/vim</p><p>Como usar VSCode com Linux e WSL do jeito certo</p><p>Uma maneira poderosa de desenvolver projetos é utilizando o Visual Studio Code</p><p>(VSCode) em conjunto com o Windows Subsystem for Linux (WSL). No entanto, é essencial</p><p>adotar algumas práticas para garantir um fluxo de trabalho suave e consistente.</p><p>Iniciando um Projeto com o VSCode:</p><p>A melhor forma de iniciar um projeto com o VSCode é através da linha de comando.</p><p>Isso é válido tanto para Mac, Linux quanto para WSL. Basta navegar até a pasta do seu</p><p>projeto e digitar "code" no terminal para abrir o VSCode.</p><p>Cuidados ao Usar Windows e WSL:</p><p>É crucial usar a extensão de WSL do VSCode e sempre iniciar o editor de dentro do</p><p>WSL. Se você iniciar o VSCode do Windows, mesmo acessando diretamente uma pasta do</p><p>WSL, poderá encontrar problemas. Por padrão, o terminal interno do VSCode será</p><p>configurado para o ambiente Windows, o que pode causar conflitos de interpretação de</p><p>comandos e caminhos de arquivos</p><p>entre os sistemas.</p><p>Além disso, é importante lembrar que o padrão dos arquivos no Linux e no Windows</p><p>não é o mesmo, o que pode resultar em uma estrutura de projeto bagunçada se não for</p><p>tratado corretamente. Ao utilizar o VSCode com WSL, certifique-se de trabalhar com os</p><p>arquivos diretamente no sistema de arquivos do Linux, evitando inconsistências e</p><p>garantindo um ambiente de desenvolvimento coeso.</p><p>Ao seguir essas práticas recomendadas, você poderá aproveitar ao máximo a</p><p>integração entre o VSCode e o WSL, desfrutando de um ambiente de desenvolvimento</p><p>moderno e eficiente para seus projetos web.</p><p>Para entender melhor como evitar problemas, assista ao vídeo “Como usar VSCode</p><p>com Linux e WSL do jeito certo”.</p><p>Agora que você já aprendeu o básico para lidar com pastas e edição de arquivos,</p><p>chegou a hora de aprender como acessar servidores remotos usando o Linux. Configura</p><p>como na próxima seção.</p><p>Como Acessar Servidor Linux via SSH de Forma Segura</p><p>Nessa seção você vai entender como usar o Linux para acessar servidores remotos,</p><p>na chamada nuvem. Para fazer isso com segurança, você precisa entender como funciona</p><p>o SSH.</p><p>As chaves SSH desempenham um papel fundamental na segurança e na</p><p>autenticação em conexões remotas. Vamos explorar como gerar chaves SSH e realizar</p><p>acesso remoto usando o terminal.</p><p>Página 148 de 176</p><p>https://l.dev.pro.br/vscode-e-wsl</p><p>https://l.dev.pro.br/vscode-e-wsl</p><p>Gerando Chaves SSH:</p><p>Para gerar chaves SSH, utilizamos o comando ssh-keygen. Vamos analisar cada um</p><p>dos parâmetros do comando ssh-keygen -o -a 100 -t ed25519:</p><p>-o: Habilita o formato de chave privada do OpenSSH (novo formato) em vez do</p><p>formato padrão PEM.</p><p>-a 100: Especifica o número de iterações de KDF (Key Derivation Function),</p><p>aumentando a segurança da chave. O valor 100 indica o número de iterações.</p><p>-t ed25519: Define o tipo de chave a ser gerada. Neste caso, estamos optando pelo</p><p>algoritmo de chave pública ed25519, conhecido por sua segurança e eficiência.</p><p>Após executar esse comando, serão geradas duas chaves, uma pública e uma</p><p>privada. A chave pública (id_ed25519.pub) será usada para autenticação nos servidores</p><p>remotos.</p><p>Acesso Remoto via SSH:</p><p>Para acessar um servidor remoto usando SSH, utilizamos o comando ssh, seguido</p><p>do nome de usuário e do hostname do servidor. Por exemplo:</p><p>ssh -i /caminho/para/chave_privada usuário@hostname</p><p>Explicando os elementos:</p><p>-i /caminho/para/chave_privada: Especifica o caminho para a chave privada a ser</p><p>usada para autenticação. É útil quando temos várias chaves SSH e precisamos selecionar a</p><p>correta.</p><p>usuário: O nome de usuário no servidor remoto.</p><p>hostname: O endereço do servidor remoto ao qual desejamos nos conectar.</p><p>Ao executar este comando, você será conectado ao servidor remoto de forma</p><p>segura, utilizando a chave privada para autenticação. Isso permite acesso remoto ao</p><p>servidor sem a necessidade de inserir senha, garantindo um processo de login mais seguro</p><p>e conveniente.</p><p>Para entender todo esses comandos e como se faz o acesso remoto a um sevidor</p><p>com ssh assista o vídeo “Como Acessar Servidor Linux via SSH de Forma Segura -</p><p>Comunidade Devpro”</p><p>Com essas técnicas, você estará pronto para gerenciar chaves SSH e realizar</p><p>acesso remoto de forma eficiente e segura em seus projetos de desenvolvimento web. Além</p><p>disso, vai poder acessar o código de seus projetos de forma segura através do git, assunto</p><p>que veremos na próxima seção.</p><p>Página 149 de 176</p><p>https://l.dev.pro.br/ssh</p><p>https://l.dev.pro.br/ssh</p><p>Git - A Ferramenta para Trabalhar em Times de Programação</p><p>Neste subcapítulo, vamos explorar o Git, uma ferramenta essencial para o</p><p>desenvolvimento de software que oferece controle de versão e facilita o trabalho em equipe.</p><p>O Git responde a perguntas cruciais sobre o projeto, como:</p><p>● Quem alterou o projeto?</p><p>● Quando foi alterado?</p><p>● Por que a alteração foi feita?</p><p>● Quais foram as alterações realizadas?</p><p>Todas essas informações são registradas e disponibilizadas no histórico do projeto,</p><p>acessível a toda a equipe sempre que necessário.</p><p>Além disso, você aprenderá a criar uma conta no GitHub, a plataforma web mais</p><p>popular para hospedagem de repositórios Git. O GitHub não é apenas uma ferramenta de</p><p>hospedagem de código, mas também uma comunidade global de desenvolvedores,</p><p>funcionando praticamente como uma rede social para colaboração e compartilhamento de</p><p>projetos.</p><p>Vamos começar a explorar esses tópicos na próxima seção, dando os primeiros</p><p>passos para dominar o Git e aproveitar todos os benefícios que essa poderosa ferramenta</p><p>oferece para o desenvolvimento de software em equipe.</p><p>GitHub - A Maior Rede Social de Programadores</p><p>Nesta seção, vamos mergulhar no GitHub, a maior plataforma de hospedagem de</p><p>código e rede social para programadores. Você aprenderá como criar uma conta no GitHub,</p><p>configurar sua chave SSH e fazer o setup inicial do seu repositório.</p><p>Criando uma Conta no GitHub:</p><p>Para criar uma conta no GitHub, basta acessar o site oficial em https://github.com e</p><p>seguir as instruções para se cadastrar. Preencha as informações necessárias, como nome</p><p>de usuário, endereço de e-mail e senha, e siga as etapas para verificação da sua conta.</p><p>Configurando a Chave SSH:</p><p>Assumindo que você já gerou sua chave SSH durante a seção "Como Acessar</p><p>Servidor Linux via SSH de Forma Segura", o próximo passo é adicionar sua chave SSH à</p><p>sua conta do GitHub. Para fazer isso, acesse suas configurações de conta no GitHub, vá</p><p>para "SSH and GPG keys" e clique em "New SSH key". Cole sua chave pública na caixa de</p><p>texto e adicione um título descritivo para identificar a chave. Em seguida, clique em "Add</p><p>SSH key" para salvar.</p><p>Página 150 de 176</p><p>https://github.com</p><p>Setup Inicial do Repositório:</p><p>Ao criar um novo repositório no GitHub, é importante incluir alguns arquivos</p><p>essenciais:</p><p>● README: Este arquivo fornece uma visão geral do projeto, suas</p><p>funcionalidades e instruções básicas de uso.</p><p>● .gitignore: O arquivo .gitignore especifica quais arquivos e diretórios devem</p><p>ser ignorados pelo Git, evitando que sejam incluídos no controle de versão.</p><p>● License: O arquivo de licença é fundamental para definir os termos de uso e</p><p>distribuição do seu código. A licença MIT é uma escolha comum devido à sua</p><p>simplicidade e permissividade, permitindo que outros usem, modifiquem e</p><p>distribuam seu código livremente, desde que incluam a declaração de direitos</p><p>autorais.</p><p>Configurar esses arquivos no seu repositório inicial ajuda a estabelecer uma base</p><p>sólida para o desenvolvimento colaborativo e o compartilhamento de código no GitHub.</p><p>Com esses passos, você estará pronto para começar a explorar as vastas</p><p>possibilidades oferecidas pelo GitHub, desde o compartilhamento de projetos de código</p><p>aberto até a colaboração com outros desenvolvedores em todo o mundo.</p><p>Para entender todos os detalhes de cada passo, assista à aula “Conheça o GitHub:</p><p>A Maior Rede Social de Programadores”. Nessa aula foi criado o repositório</p><p>https://github.com/renzon/pagina-enzo-pascal, que vai servir de base para criação de código</p><p>nas próximas seções.</p><p>Depois de criar sua conta e seu primeiro repositório remoto, chegou a hora de</p><p>aprender como copiar os arquivos gerados para seu computador, o que faremos juntos na</p><p>próxima seção.</p><p>Git - Instalação e Clonagem de Repositórios</p><p>Nesta seção, vamos aprender como instalar o Git em diferentes sistemas</p><p>operacionais e como clonar repositórios existentes.</p><p>Instalando o Git no Mac utilizando Homebrew:</p><p>O Homebrew é um gerenciador de pacotes para o macOS que facilita a instalação</p><p>de software de código aberto. Para instalar o Homebrew, execute o seguinte comando no</p><p>terminal:</p><p>/bin/bash -c "$(curl -fsSL</p><p>https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"</p><p>Depois que o Homebrew estiver instalado, você pode instalar o Git executando o</p><p>seguinte comando:</p><p>Página 151 de 176</p><p>https://l.dev.pro.br/github</p><p>https://l.dev.pro.br/github</p><p>https://github.com/renzon/pagina-enzo-pascal</p><p>brew install git</p><p>Instalando o Git no Ubuntu:</p><p>No Ubuntu, você pode instalar o Git usando o gerenciador de pacotes APT. Antes</p><p>de instalar, é uma</p><p>boa prática atualizar a lista de pacotes disponíveis com o comando:</p><p>sudo apt-get update</p><p>Em seguida, instale o Git executando o seguinte comando:</p><p>sudo apt-get install git</p><p>Clonando Repositórios:</p><p>A clonagem de repositórios é o processo de criar uma cópia local de um repositório</p><p>remoto. Para clonar um repositório Git, você pode usar o comando git clone, seguido do</p><p>URL do repositório. Por exemplo:</p><p>git clone https://github.com/usuario/repositorio.git</p><p>Isso criará uma cópia local do repositório especificado.</p><p>Verificando Configurações Remotas:</p><p>Para visualizar as configurações remotas de um repositório Git, você pode usar</p><p>o comando “git remote -v”. Isso mostrará os URLs dos repositórios remotos associados ao</p><p>seu repositório local, permitindo que você veja de onde você está puxando e para onde está</p><p>empurrando alterações.</p><p>Com esses passos simples, você estará pronto para começar a trabalhar com o Git</p><p>em seu sistema operacional preferido, clonando repositórios e colaborando em projetos de</p><p>desenvolvimento de software de forma eficiente e organizada.</p><p>Para entender todos os passos assista à aula “Mergulhe no Mundo do Git:</p><p>Instalação e Clonagem de Repositórios”. Repita esse processo para copiar os arquivos do</p><p>repositório que você criou no Github para seu computador local.</p><p>Agora que você já aprendeu como clonar repositórios, chegou a hora de aprender</p><p>como fazer alterações em seu projeto e colocar as mudanças no histórico do git. Confira</p><p>com na próxima seção.</p><p>Git - Gerencie Alterações em Seu Projeto de Software</p><p>Nesta seção, vamos explorar como gerenciar alterações em seu projeto de software</p><p>usando o Git. Partiremos do clone feito do nosso repositório e faremos uma mudança.</p><p>Vamos explicar cada comando conforme avançamos.</p><p>git status: O comando git status mostra o estado atual do seu repositório Git. Ele</p><p>informa quais arquivos foram modificados, adicionados ou excluídos desde o último commit,</p><p>e quais arquivos estão prontos para serem commitados.</p><p>Página 152 de 176</p><p>https://l.dev.pro.br/git-clone</p><p>https://l.dev.pro.br/git-clone</p><p>git add README.md: Com o comando git add README.md, estamos adicionando</p><p>especificamente o arquivo README.md ao área de preparação (staging area),</p><p>preparando-o para ser commitado. Isso significa que as alterações feitas neste arquivo</p><p>serão incluídas no próximo commit.</p><p>git add .: O comando git add . adiciona todas as mudanças nos arquivos do diretório</p><p>atual ao área de preparação. Isso inclui todas as alterações nos arquivos existentes e</p><p>quaisquer novos arquivos adicionados.</p><p>git commit -m "mensagem de commit": Com o comando git commit -m</p><p>"mensagem de commit", estamos criando um novo commit com as alterações que foram</p><p>adicionadas ao área de preparação. A opção -m nos permite incluir uma mensagem de</p><p>commit que descreve as alterações realizadas neste commit de forma concisa e descritiva.</p><p>git log: O comando git log exibe o histórico de commits do repositório. Ele mostra os</p><p>commits mais recentes no topo, incluindo o hash do commit, autor, data e mensagem</p><p>associada a cada commit.</p><p>git log --pretty=oneline: Com o comando git log --pretty=oneline, estamos</p><p>personalizando o formato de exibição do log para que cada commit seja mostrado em uma</p><p>única linha, facilitando a leitura do histórico de commits de forma mais compacta e</p><p>resumida.</p><p>Com esses comandos, você poderá gerenciar eficientemente as alterações em seu</p><p>projeto de software, acompanhando o histórico de commits e mantendo um registro claro de</p><p>todas as mudanças realizadas ao longo do tempo. Para entender como esse processo</p><p>funciona, assista à aula “Domine o Git: Gerencie Alterações em Seu Projeto de Software”.</p><p>Agora que você aprendeu a fazer modificações em seu repositório local, chegou a</p><p>hora de aprender a enviar essas mudanças para seu repositório remoto. Veja como na</p><p>próxima seção.</p><p>Como Enviar Mudanças para Repositório Remoto do Git</p><p>Enviar mudanças para um repositório remoto é uma etapa crucial no fluxo de</p><p>trabalho com Git. Antes de enviar as mudanças, é importante verificar o estado do</p><p>repositório local usando o comando git status. Este comando mostra o que foi modificado,</p><p>adicionado ou excluído e confirma que não há alterações pendentes de commit.</p><p>Depois de verificar o status, é útil revisar o histórico de commits recentes com o</p><p>comando git log. Este comando exibe uma lista dos commits, permitindo que você confirme</p><p>as mudanças que serão enviadas. Com o histórico de commits revisado, você estará pronto</p><p>para enviar as mudanças ao repositório remoto.</p><p>Para enviar as mudanças, utilize o comando git push, que transfere os commits do</p><p>repositório local para o remoto. O comando git push origin main envia especificamente as</p><p>mudanças para o branch principal do repositório remoto.</p><p>Página 153 de 176</p><p>https://l.dev.pro.br/git-add-and-git-commit</p><p>É importante verificar as configurações dos repositórios remotos usando o comando</p><p>git remote -v. Este comando lista todos os repositórios remotos associados ao seu projeto</p><p>local, mostrando os URLs de fetch e push. Com isso, você pode confirmar que está</p><p>enviando suas mudanças para o repositório correto.</p><p>Para obter informações detalhadas sobre o repositório remoto, use o comando git</p><p>remote show origin. Este comando fornece uma visão abrangente das configurações e</p><p>status do repositório remoto, incluindo informações sobre branches e suas configurações de</p><p>push/pull. Ao dominar esses comandos, você estará preparado para gerenciar eficazmente</p><p>o fluxo de trabalho entre seus repositórios locais e remotos.</p><p>Para entender todo esse fluxo na prática, assista à vídeo aula “Aprenda como Enviar</p><p>Alterações para o GitHub com Git Push”. Agora que você já entendeu o básico sobre como</p><p>enviar alterações para o repositório remoto, chegou a hora de aprender a fazer isso</p><p>profissionalmente através do processo que se chama feature branch. Confira como fazer</p><p>isso na próxima seção.</p><p>Processo de Feature Branch para alteração de projetos</p><p>Nessa seção, vamos explorar o processo de feature branch para gerenciar</p><p>alterações em projetos. Vamos começar com a abertura de uma issue no GitHub, supondo</p><p>que a issue tem o número 1. Este processo permite que você trabalhe em novas</p><p>funcionalidades ou correções de bugs de forma isolada do branch principal. Veja o exemplo</p><p>na imagem 4.01 a seguir:</p><p>Página 154 de 176</p><p>https://l.dev.pro.br/git-push</p><p>https://l.dev.pro.br/git-push</p><p>Figura 4.01: Criação de tarefa no GitHub</p><p>https://github.com/renzon/pagina-enzo-pascal/issues/1</p><p>Primeiro, crie uma nova branch para trabalhar na issue. Use o comando git branch</p><p>1 para criar uma branch chamada "1", que corresponde ao número da issue. Esta branch</p><p>será utilizada para desenvolver a nova funcionalidade ou correção de bug.</p><p>Você pode verificar a criação da nova branch e listar todas as branches disponíveis</p><p>no repositório local usando o comando git branch. Este comando mostra todas as branches</p><p>existentes e destaca a branch atual com um asterisco, ajudando a confirmar que você criou</p><p>e está trabalhando na branch correta. Veja o resultado da execução do comando, com</p><p>branch main em verde, mostrando que é a branch ativa no momento:</p><p>Em seguida, mude para a nova branch usando o comando git checkout 1. Agora</p><p>você está trabalhando na branch "1", onde pode fazer suas alterações sem afetar o branch</p><p>principal. Veja como muda o resultado do comando git branch, com a branch 1 agora em</p><p>verde:</p><p>Página 155 de 176</p><p>https://github.com/renzon/pagina-enzo-pascal/issues/1</p><p>Faça as mudanças necessárias no código e, em seguida, prepare-as para comitar.</p><p>Para criar um commit com uma mensagem detalhada, use o comando git commit</p><p>sem a opção "-m". Isso abrirá seu editor de texto padrão, onde você poderá escrever uma</p><p>mensagem de commit mais descritiva sobre as alterações feitas. Após salvar e fechar o</p><p>editor, o commit será criado.</p><p>Um detalhe importante é que você pode colocar comando para controlar o status da</p><p>tarefa no GitHub. Experimente incluir a mensagem Close #1, com referência ao número da</p><p>tarefa criada. Isso vai fazer com que a tarefa seja fechada automaticamente no fim do</p><p>processo de aceite da mudança.</p><p>Depois de fazer o commit, envie as mudanças para o repositório remoto com o</p><p>comando git push --set-upstream origin 1. Esse comando cria a branch "1" no repositório</p><p>remoto e estabelece um upstream tracking, permitindo que você sincronize facilmente as</p><p>mudanças entre a branch local e remota.</p><p>Uma vez que a branch esteja no repositório remoto, o próximo passo é criar um Pull</p><p>Request (PR) no GitHub. O Pull Request permite que outros membros da equipe revisem</p><p>suas mudanças antes de serem mescladas na branch principal. Isso facilita o processo de</p><p>Code Review, onde outros desenvolvedores podem verificar a qualidade do código, sugerir</p><p>melhorias e garantir que as novas alterações não introduzam bugs. A seguir, na figura 4.02</p><p>segue exemplo de criação de PR:</p><p>Página 156 de 176</p><p>Figura 4.02: Criação de Pul Request no GitHub</p><p>https://github.com/renzon/pagina-enzo-pascal/pull/2</p><p>O uso do processo de feature branch facilita a colaboração e o gerenciamento de</p><p>mudanças em projetos de software. Ele permite que você isole o desenvolvimento de novas</p><p>funcionalidades e correções de bugs, mantendo a branch principal estável e livre de</p><p>mudanças incompletas ou instáveis.</p><p>Para entender melhor esse processo de feature branch, assista ao vídeo “Como</p><p>Alterar Projetos de Software como um Dev Profissional”. Agora que você já sabe como</p><p>enviar suas alterações para aprovação de uma equipe de desenvolvedores, é necessário</p><p>aprender como atualizar o seu repositório local de acordo com as mudanças feitas no</p><p>remoto. Veja como na próxima seção.</p><p>Como Atualizar seu Repositório Local com Feature Branches</p><p>Para trazer as atualizações do repositório remoto para o seu repositório local, você</p><p>pode usar o comando git fetch. Esse comando baixa todas as atualizações do repositório</p><p>remoto, mas não aplica essas mudanças na sua branch atual. Isso permite que você</p><p>examine as alterações antes de decidir como incorporá-las ao seu trabalho local.</p><p>Uma maneira comum de incorporar as atualizações do repositório remoto à sua</p><p>branch local é através do comando git merge origin/main. Isso mescla as alterações do</p><p>branch principal remoto (geralmente chamado de "main" ou "master") com o seu branch</p><p>atual. No entanto, isso pode resultar em uma história de commit mais confusa,</p><p>especialmente se houver muitas mesclagens.</p><p>Página 157 de 176</p><p>https://github.com/renzon/pagina-enzo-pascal/pull/2</p><p>https://l.dev.pro.br/feature-branch</p><p>https://l.dev.pro.br/feature-branch</p><p>Outra abordagem para incorporar as atualizações do repositório remoto é usando o</p><p>comando git rebase origin/main. O rebase reescreve a história do seu branch, aplicando</p><p>cada commit do seu branch sobre os commits mais recentes do branch remoto. Isso ajuda a</p><p>manter uma linha de história mais linear e limpa, mas pode causar conflitos que precisam</p><p>ser resolvidos manualmente.</p><p>Se você quiser atualizar seu branch local e aplicar automaticamente as mudanças</p><p>do repositório remoto, você pode usar o comando git pull. Este comando é essencialmente</p><p>um atalho para git fetch seguido por git merge ou rebase, mas em uma única etapa. É</p><p>importante configurar qual das duas estratégias será usada para atualizar a branch local.</p><p>Depois de ter incorporado as atualizações do repositório remoto à sua branch local e</p><p>finalizado seu trabalho em uma feature, você pode excluir a branch da feature usando o</p><p>comando git branch -d <nome_do_branch>. Isso ajuda a manter o repositório limpo e</p><p>organizado, removendo branches que não são mais necessárias. Certifique-se sempre de</p><p>revisar e testar suas alterações antes de excluir um branch.</p><p>Para entender melhor todo esse processo assista à vídeo aula “Dominando o Git:</p><p>Como Aplicar Mudanças de um Projeto em Seu Repositório Local”.</p><p>Agora que você entendeu o processo completo de Feature Branch chegou a hora de</p><p>aprender a navegar no histórico de seu projeto e também marcar commits importantes. Veja</p><p>como na próxima sessão.</p><p>Como navegar no histórico do git e marcar pontos importantes</p><p>Navegar no histórico do Git e marcar pontos importantes é essencial para gerenciar</p><p>e entender a evolução de um projeto. Utilizando o Git, você pode facilmente voltar a versões</p><p>anteriores do seu código, criar branches para experimentação e marcar commits</p><p>importantes com tags.</p><p>Para começar, você pode criar uma nova branch e mudar para ela com um único</p><p>comando: git checkout -b 3. Este comando cria uma nova branch chamada "3" e</p><p>automaticamente muda para essa branch, permitindo que você comece a trabalhar nela</p><p>imediatamente.</p><p>Se você precisar voltar a um commit específico, pode usar o comando git checkout</p><p>{hash do commit}. O "hash do commit" é um identificador único gerado para cada commit</p><p>no Git. Esse comando permite que você navegue diretamente para o estado do projeto</p><p>naquele commit, permitindo visualizar ou modificar o código como ele estava naquele</p><p>momento. Você consegue checar os commits com respectivos hashes com o comando git</p><p>log --pretty=oneline.</p><p>Marcar pontos importantes no histórico do seu projeto é feito usando tags. Você</p><p>pode criar uma tag para um commit específico com o comando git tag passo-1. Este</p><p>Página 158 de 176</p><p>https://l.dev.pro.br/repo-local-feature-branch</p><p>https://l.dev.pro.br/repo-local-feature-branch</p><p>comando cria uma tag chamada "passo-1", que pode ser usada para identificar um ponto</p><p>importante na história do seu projeto, como um lançamento ou uma milestone. Por exemplo,</p><p>podemos marcar com essa tag o passo 1 da criação da página do Enzo Pascal que fizemos</p><p>na seção anterior.</p><p>Para compartilhar as tags com o repositório remoto, utilize o comando git push</p><p>--tags. Este comando envia todas as tags criadas localmente para o repositório remoto,</p><p>garantindo que todos os colaboradores tenham acesso a essas marcações importantes.</p><p>Para navegar diretamente para um commit marcado por uma tag, você pode usar o</p><p>comando git checkout {tag}. Substitua "{tag}" pelo nome da tag, como "passo-1". Isso</p><p>permite que você vá diretamente para o estado do projeto associado àquela tag, facilitando</p><p>a revisão e o gerenciamento de versões específicas do seu código.</p><p>Com esses comandos, você pode navegar de maneira eficiente pelo histórico do Git</p><p>e marcar pontos importantes no seu projeto. Isso facilita o controle de versões e a</p><p>colaboração em equipe, garantindo que todos os membros do projeto possam acessar e</p><p>trabalhar em pontos específicos da história do código.</p><p>Para entender melhor todos esses comandos em ação, assista à aula “Tags no Git:</p><p>Como Marcar Pontos Importantes em Projeto de Software”.</p><p>Agora que você entendeu como navegar no histórico e criar tags, de aprender como</p><p>corrigir seu repositório quando criar código na branch errada. Confira como na próxima</p><p>seção.</p><p>Como corrigir erros na hora do commit</p><p>Nessa seção, vamos explorar como corrigir erros que ocorrem durante o processo</p><p>de commit no Git. Corrigir esses erros de maneira eficaz é essencial para manter a</p><p>integridade e a clareza do histórico do seu projeto. Vamos abordar duas situações comuns</p><p>em que ocorrem erros e como resolvê-los.</p><p>Situação 1: Erro Detectado Antes de git add</p><p>Imagine que você está trabalhando na branch `main` e cria novos arquivos, mas</p><p>antes de executar `git add`, percebe um erro. Neste caso, você pode usar o comando `git</p><p>stash` para salvar temporariamente suas mudanças não commitadas. Esse comando</p><p>coloca suas alterações em um "stash" temporário, permitindo que você retorne ao estado</p><p>limpo da branch `main`.</p><p>Depois de “stashear” suas mudanças, crie uma nova branch para corrigir o erro com</p><p>o comando `git checkout -b correcao-erro`. Mude para essa nova branch e aplique as</p><p>mudanças stasheadas usando `git stash pop`. Isso trará suas mudanças de volta, agora na</p><p>nova branch, onde você pode corrigir os erros sem afetar a branch `main`.</p><p>Página 159 de 176</p><p>https://l.dev.pro.br/git-tag</p><p>https://l.dev.pro.br/git-tag</p><p>Situação 2: Erro Detectado Após o Commit na Branch Main</p><p>Se o erro foi detectado depois de um commit na branch `main`, você pode criar uma</p><p>nova branch a partir do estado atual da `main` usando `git checkout</p><p>para fazer ligações.</p><p>Somos bombardeados por propagandas, seja para venda de produtos ou com</p><p>modelos de como viver a vida através da alta exposição às redes sociais. Isso acaba</p><p>criando uma legião de pessoas que não consegue responder à seguinte pergunta: “Qual</p><p>seu objetivo de vida profissional?” E, ao não ter a resposta clara para essa pergunta, a frase</p><p>que o gato diz à protagonista do livro “Alice no país das maravilhas” cai como uma luva:</p><p>“Quando não se sabe para onde vai, qualquer caminho serve”.</p><p>Não ter um objetivo bem definido é a maior causa das pessoas não conseguirem</p><p>entrar na área de tecnologia. Elas perdem o foco facilmente, estudam áreas diversas e</p><p>acabam desistindo no meio do caminho. Não é à toa que 2, em cada 3 estudantes que</p><p>entram nos cursos superiores de tecnologia, desistem no meio do caminho. A razão não é</p><p>incapacidade de aprender, mas sim falta de clareza de onde se quer chegar. Por isso</p><p>começo esse livro com o ponto mais importante para sua carreira como desenvolvedor.</p><p>Defina um objetivo claro</p><p>O objetivo deste livro é claro e está contido em seu subtítulo: apresentar o caminho</p><p>mais curto para sua entrada na área de programação web. Se esse é seu objetivo,</p><p>entrar na área de programação web, eu vou te ajudar a chegar lá, colocando a seu serviço</p><p>mais de 15 anos de experiência com desenvolvimento de sistemas para internet, sendo</p><p>mais de 10 desses anos ensinando programação.</p><p>Se você não quer chegar nesse objetivo, agora é a melhor hora de desistir e nem</p><p>começar a ler esse livro. Pense em qual objetivo claro você quer alcançar profissionalmente</p><p>e corra atrás do seu sonho. Oportunidade que não te leva para onde você quer ir não é</p><p>oportunidade, mas sim distração.</p><p>Contudo, se esse é seu objetivo, prepare-se para dedicar os próximos meses da sua</p><p>vida. O caminho não será fácil, mas o destino com certeza valerá à pena. Se você fizer o</p><p>sacrifício de seguir os ensinamentos desse livro, você vai entrar para a área de tecnologia.</p><p>E uma vez dentro dela, nunca mais você irá se preocupar com desemprego ou salário</p><p>baixo. E, seguindo o caminho desse livro, você vai chegar nesse destino o mais rápido</p><p>possível, sem ter que estudar mais que o necessário.</p><p>O primeiro passo em direção a essa carreira maravilhosa é definir um cronograma</p><p>realista, que se encaixe na sua rotina atual.</p><p>Página 6 de 176</p><p>Defina sua Agenda</p><p>Apenas definir seu objetivo não é suficiente, você precisa agir de acordo. E a</p><p>primeira ação é organizar sua agenda para que você, todos os dias, se dedique a dar mais</p><p>um passo em direção à sua carreira com programação.</p><p>Então é hora de você organizar suas atividades diárias atuais em uma agenda. Se</p><p>você ainda não faz isso, é hora de fazer.</p><p>Pergunte a si mesmo: quanto tempo por dia eu estou disposto a dedicar para</p><p>conquistar minha vaga como programador? Esse tempo deve ser no mínimo 30 minutos e</p><p>recomendo que você comece com apenas 30, se nunca conseguiu seguir uma rotina de</p><p>estudos.</p><p>Já tive muitos alunos que começaram prometendo 6 horas de estudo diárias, mas</p><p>não cumpriram essa meta nem durante a primeira semana de estudos. E ao não cumprirem</p><p>a meta, desistiram. Por isso, recomendo que comece devagar.</p><p>30 minutos é tempo suficiente para começar os estudos. Ainda assim, é um intervalo</p><p>pequeno para você dizer que não cabe em sua rotina e usar isso como desculpa para não</p><p>começar a estudar.</p><p>Faça essa alocação do seu tempo no aplicativo de agenda que você usa. Se não</p><p>usa nenhum aplicativo, recomendo usar o Google Calendar. Aqui nessa vídeo aula eu</p><p>ensinei como usar o aplicativo para organizar todas suas tarefas diárias e como criar um</p><p>evento recorrente para facilitar o processo.</p><p>Durante essa meia hora de estudo, você deve evitar distrações. Coloque seu celular</p><p>em modo avião e vá para um lugar silencioso para você poder focar.</p><p>As grandes mudanças na vida não ocorrem de uma hora para outra, mas são fruto</p><p>de ações que tomamos no dia a dia. É muito fácil enganar pessoas que conhecemos e não</p><p>existe pessoa que você conheça mais do que você mesmo. Por isso eu vou te ensinar uma</p><p>tática que aprendi no livro “O Efeito Gatilho”, de Marshall Goldsmith.</p><p>Uma vez que você tenha definido esse evento recorrente diário em sua agenda,</p><p>responda à seguinte pergunta em todo final de dia: “Hoje eu fiz o melhor que eu poderia,</p><p>nas condições que eu tinha, para me tornar um programador web?”.</p><p>Escreva isso em uma lista, pode ser uma planilha do Google. E a cada dia você vai</p><p>se dar uma nota de 0 a 10. Aqui nessa vídeo aula eu ensinei como usar uma planilha do</p><p>Google com esse formato e compartilhei o exemplo nesse link para você fazer uma cópia e</p><p>usar.</p><p>Além disso você vai contar esse seu objetivo e seu plano para outra pessoa que</p><p>você conhece e respeita. pode ser um familiar, amigo ou namorado. Você vai pedir para</p><p>essa pessoa te ajudar, perguntando essa mesma pergunta para você, todo dia de noite:</p><p>“Hoje você fez o melhor que poderia, nas condições que tinha, para se tornar um</p><p>programador web?”.</p><p>Página 7 de 176</p><p>https://l.dev.pro.br/aula-agenda-rpv</p><p>https://l.dev.pro.br/aula-planilha-atividades-diarias</p><p>https://l.dev.pro.br/planilha-atividades-diarias</p><p>Não seja carrasco de si mesmo. Se em um dia você estava doente e precisou</p><p>descansar, você fez o máximo que podia nas condições daquele dia. O que vai fazer a</p><p>diferença é manter uma boa frequência de estudos como um todo, uma falta ou outra não</p><p>vai causar seu fracasso. Mas por isso você precisa manter essa lista de registros diários e</p><p>se comprometer com outra pessoa: as falhas diárias devem ser a exceção, não a regra!</p><p>Ao fim de cada semana veja como ficou sua média. Se você ficar com 8 na maioria</p><p>das semanas, eu garanto que você que irá conquistar esse objetivo de entrar na área de</p><p>programação web.</p><p>A partir de agora você não vai precisar pensar no que precisa fazer. Todas suas</p><p>tarefas estão na sua agenda e você só precisa executar o que está previsto, sendo auditado</p><p>e incentivado por outra pessoa.</p><p>A primeira etapa ruma à sua primeira vaga como programador web é estudar os</p><p>assuntos de tecnologia que o mercado precisa. Mas eu descobri que muitas pessoas não</p><p>sabem como estudar.</p><p>Por isso o restante desse capítulo vai te ensinar como aprender tecnologia. Por</p><p>incrível que pareça, muitas pessoas falham em se tornar programadores simplesmente por</p><p>não saberem estudar da maneira certa e não por falta de inteligência.</p><p>Caminhada das Imagens (Picture Walk)</p><p>As ideias que vou te apresentar no restante do capítulo não são minhas. Eu as</p><p>coloquei em prática desde meus primeiros anos de estudo, ainda no ensino fundamental.</p><p>Mas eu fiz isso “sem querer”, não de forma intencional. Apenas depois dos 35 anos</p><p>descobri a razão delas funcionarem ao ler os livros “Aprendendo Inteligência”, do professor</p><p>Pierluigi Piazzi e “Aprendendo a Aprender”, da Barbara Oakley.</p><p>A primeira técnica visa aliviar a ansiedade que temos para saber quanto trabalho</p><p>teremos pela frente para alcançar um objetivo, ao mesmo tempo que aquecemos o nosso</p><p>cérebro para começar o estudo. Eu traduzi a técnica como “Caminhada das Imagens”, do</p><p>inglês Picture Walk.</p><p>A caminhada das imagens consiste em você passar rapidamente pelo conteúdo de</p><p>um capítulo de livro antes de começar a ler. Você deve fazer isso olhando rapidamente para</p><p>os títulos, fotos, digramas, palavras em negrito e até para perguntas e exercícios ao fim do</p><p>capítulo, se existirem.</p><p>Pode parecer doido, mas você está dando uma ideia para o seu cérebro do que está</p><p>por vir, de maneira parecida a quando assistimos ao trailer de um filme ou dando uma</p><p>olhada no mapa geral do Waze, antes de começar uma viagem.</p><p>Você vai se supreender em como investir um minuto folheando o capítulo vai ajudar</p><p>a organizar o seu pensamento. Essa visão geral vai te dar cabides para organizar a</p><p>informação que você vai absorver. Sem cabides, sua roupa fica caida no chão, em uma</p><p>bagunça que dificulta enxergar e acessar as roupas que você quer.</p><p>Página 8 de 176</p><p>Modo Focado versus Difuso</p><p>Algumas vezes tentar demais é parte do problema, por mais absurdo que isso possa</p><p>parecer. E</p><p>-b correcao-erro-2`.</p><p>Esta nova branch conterá o commit com o erro, permitindo que você trabalhe na correção</p><p>sem afetar a `main`.</p><p>Em seguida, use o comando `git reset HEAD^1` na branch `main` para desfazer o</p><p>último commit. Este comando move o ponteiro da branch `main` um commit para trás,</p><p>efetivamente removendo o commit com o erro da história da branch `main`, mas</p><p>preservando suas alterações na área de staging.</p><p>Uso do Comando git commit --amend</p><p>Para corrigir o último commit sem criar um novo, você pode usar o comando</p><p>`git commit --amend`. Este comando permite que você modifique o commit mais recente,</p><p>seja para corrigir a mensagem do commit ou para adicionar/alterar arquivos. Isso é útil</p><p>quando você percebe um erro logo após o commit e deseja fazer ajustes sem poluir o</p><p>histórico do repositório com commits adicionais.</p><p>Com esses métodos, você pode corrigir erros de maneira eficiente durante o</p><p>processo de commit no Git, mantendo um histórico limpo e organizado. Para entender todos</p><p>esses casos e uso de comandos assista à aula “Git: Como corrigir erros na hora do</p><p>commit”.</p><p>Agora que você já sabe como evitar erros de commits feitos na branch main, chegou</p><p>a hora de aprender o que é como resolver um conflito no git. Veja como na próxima seção.</p><p>Como resolver conflitos no Git</p><p>Nesta seção vamos abordar como resolver conflitos no Git, uma situação comum</p><p>quando múltiplos desenvolvedores trabalham no mesmo projeto. Conflitos acontecem</p><p>quando duas ou mais branches têm alterações incompatíveis nas mesmas linhas de</p><p>um arquivo e você tenta mesclá-las.</p><p>Um conflito ocorre, por exemplo, quando duas branches diferentes fazem alterações</p><p>na mesma linha de um arquivo. Imagine que você tem um arquivo HTML com a seguinte</p><p>meta tag `<title>Passo 4</title>`. Em uma branch, essa tag é alterada para `<title>Passo</p><p>5</title>`, e em outra branch, ela é alterada para `<title>Passo 6</title>`. Quando você</p><p>tenta mesclar essas branches, o Git não sabe qual alteração manter e sinaliza um conflito.</p><p>Quando ocorre um conflito, o arquivo afetado é marcado com linhas especiais que</p><p>indicam as áreas de conflito. No exemplo do HTML, o arquivo pode ficar assim:</p><p>Página 160 de 176</p><p>https://l.dev.pro.br/git-stash</p><p>https://l.dev.pro.br/git-stash</p><p>As linhas `<<<<<<< HEAD` e `>>>>>>> branch-1` indicam o início e o fim do</p><p>conflito, e `=======` separa as duas versões conflitantes. Para resolver o conflito, você</p><p>deve editar o arquivo para manter a versão correta, remover as linhas de conflito e salvar as</p><p>mudanças.</p><p>Após resolver todos os conflitos, você pode usar o comando `git rebase --continue`</p><p>para continuar o processo de rebase ou `git commit` para finalizar a mesclagem. Isso</p><p>aplicará as mudanças resolvidas e concluirá o processo de integração das branches.</p><p>Para evitar conflitos no Git, aqui estão três boas práticas:</p><p>1. Manter a Branch Main Sempre Atualizada: antes de começar a trabalhar em</p><p>uma nova branch, certifique-se de que sua branch `main` está atualizada com as últimas</p><p>mudanças do repositório remoto. Isso reduz a chance de conflitos com as alterações mais</p><p>recentes.</p><p>Página 161 de 176</p><p>2. Fazer Entregas Curtas: realize commits e push frequentes com mudanças</p><p>pequenas e incrementais. Isso facilita a integração contínua e reduz a probabilidade de</p><p>grandes conflitos ao mesclar branches.</p><p>3. Gestão do Time para Evitar Conflitos: coordene com sua equipe para que</p><p>diferentes desenvolvedores trabalhem em partes distintas do código, evitando que múltiplas</p><p>pessoas façam alterações na mesma linha ou arquivo ao mesmo tempo.</p><p>Compreender como resolver conflitos e adotar essas boas práticas ajudará a manter</p><p>seu fluxo de trabalho no Git eficiente e harmonioso. E para entender melhor todo esse</p><p>processo de resolução de conflitos, assista à vídeo aula “Como resolver conflitos no Git”.</p><p>A partir de agora você conhece base fundamental de comandos e conceitos para</p><p>trabalhar com o git. Para finalizar esse assunto, vamos apenas exercitar os conceitos</p><p>mostrando que é possível criar um Pull Request com vários commits e também criar várias</p><p>tags ao mesmo tempo. Faremos isso implementando todos os passos da construção da</p><p>página do designer Enzo Pascal na próxima seção.</p><p>Push de vários commits e tags</p><p>No Git, é possível fazer push de vários commits de uma vez para a mesma branch.</p><p>Isso é particularmente útil quando você deseja manter um histórico detalhado e organizado</p><p>de todas as etapas importantes no desenvolvimento do seu projeto. Ao fazer push de vários</p><p>commits, você assegura que cada mudança significativa seja documentada e preservada,</p><p>facilitando a rastreabilidade e a revisão do código.</p><p>Além disso, você pode criar várias tags localmente e subir todas elas de uma vez</p><p>para o repositório remoto. Para isso, use o comando git push --tags. Isso é útil quando você</p><p>precisa marcar múltiplos pontos importantes no histórico do projeto, como versões de</p><p>lançamento, milestones ou etapas significativas no desenvolvimento.</p><p>Para entender todo esse processo e comparar o projeto que foi feito até aqui com o</p><p>que foi feito no capítulos anterior sobre HTML e CSS, assista à aula: “Como Navegar no</p><p>Histórico de Tags do Git: Evolução em Cada Passo”</p><p>Com esses conhecimentos, você agora sabe o essencial sobre Git que todo</p><p>programador web precisa conhecer. Este conhecimento permitirá que você colabore de</p><p>forma eficaz com sua equipe, mantenha um histórico de alterações organizado e resolva</p><p>conflitos de forma eficiente.</p><p>Agora que dominou o Git, chegou a hora de conhecer a última ferramenta essencial</p><p>da trilha fundamental de conhecimento: o Docker. Vamos começar esse estuda na próxima</p><p>seção, a última desse livro.</p><p>Página 162 de 176</p><p>https://l.dev.pro.br/git-conflito</p><p>https://l.dev.pro.br/multiplos-commits</p><p>https://l.dev.pro.br/multiplos-commits</p><p>Docker: Como Publicar Sua Aplicação na Web</p><p>Docker é uma plataforma que permite criar, gerenciar e executar aplicações em</p><p>contêineres, que são ambientes isolados e padronizados que contêm tudo o que é</p><p>necessário para executar um software, incluindo código, bibliotecas e dependências.</p><p>Usando Docker, você pode garantir que sua aplicação funcione da mesma maneira em</p><p>qualquer ambiente, facilitando o desenvolvimento, teste e implantação de software.</p><p>Neste capítulo, abordaremos os conceitos e comandos principais do Docker que</p><p>todo programador web deve conhecer. Vamos explorar como criar contêineres, construir</p><p>imagens, e utilizar o Docker Compose para facilitar a configuração do ambiente local de</p><p>desenvolvimento e também o ambiente de um servidor.</p><p>Ao longo do capítulo, você aprenderá a usar Docker para publicar a página do Enzo</p><p>Pascal em um servidor na internet. Este exemplo prático simplificado demonstrará como os</p><p>deploys são feitos atualmente com Docker, Git e Linux, proporcionando uma visão prática</p><p>de como esses processos são integrados no desenvolvimento moderno de software.</p><p>Como Instalar Docker no Mac, Linux e Windows</p><p>Neste capítulo, vamos aprender como instalar Docker no Mac, Linux e Windows.</p><p>Para usuários do Windows que utilizam WSL (Windows Subsystem for Linux), os passos de</p><p>instalação serão os mesmos que para o Ubuntu, facilitando a unificação dos processos.</p><p>Instalação do Docker no Ubuntu (e WSL)</p><p>1. Primeiro, remova qualquer versão antiga do Docker que possa estar instalada no</p><p>seu sistema com o comando:</p><p>sudo apt remove docker docker-engine docker.io containerd runc</p><p>Este comando remove todas as versões antigas do Docker e seus componentes.</p><p>2. Em seguida, adicione a chave GPG oficial do Docker:</p><p>curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o</p><p>/usr/share/keyrings/docker-archive-keyring.gpg</p><p>Este comando baixa e armazena a chave GPG que será usada para verificar a</p><p>autenticidade dos pacotes do Docker.</p><p>3. Adicione o repositório Docker às fontes do APT:</p><p>echo \</p><p>"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg]</p><p>https://download.docker.com/linux/ubuntu \</p><p>$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null</p><p>Página 163 de 176</p><p>Este comando adiciona o</p><p>repositório oficial do Docker à lista de fontes do APT,</p><p>permitindo que você instale as versões mais recentes do Docker.</p><p>4. Atualize o índice de pacotes do APT:</p><p>sudo apt update</p><p>Este comando atualiza a lista de pacotes disponíveis, incluindo o novo repositório</p><p>Docker.</p><p>5. Instale o Docker CE (Community Edition):</p><p>sudo apt install -y docker-ce</p><p>6. Adicione seu usuário ao grupo Docker para executar comandos Docker sem sudo:</p><p>sudo usermod -aG docker $USER</p><p>Este comando adiciona seu usuário ao grupo Docker, permitindo o uso de comandos</p><p>Docker sem precisar de permissões elevadas. Depois de executar esse último comando é</p><p>recomendado reiniciar o Ubuntu.</p><p>Instalação do Docker no Mac</p><p>Para instalar Docker no Mac, siga estas etapas:</p><p>1. Acesse o site oficial do Docker e baixe o Docker Desktop para Mac.</p><p>2. Escolha a versão correta para o seu tipo de Mac (Intel ou Apple Silicon) e</p><p>baixe o arquivo .dmg.</p><p>3. Abra o arquivo .dmg baixado e arraste o ícone do Docker para a pasta</p><p>Aplicativos.</p><p>4. Abra o Docker Desktop a partir da pasta Aplicativos e siga as instruções na</p><p>tela para concluir a instalação.</p><p>Após a instalação, os comandos Docker são os mesmos tanto para Mac quanto para</p><p>Linux. Isso significa que não haverá diferença no estudo do restante deste capítulo,</p><p>permitindo que você siga as mesmas instruções e comandos independentemente do</p><p>sistema operacional que estiver usando.</p><p>Para entender melhor o processo e te ajudar a instalar o Docker em seu</p><p>computador, assista ao vídeo: “Como Instalar Docker no Mac, Linux e Windows: Guia</p><p>Completo”.</p><p>Agora que você já instalou o Docker, chegou a hora de aprender os 5 comandos</p><p>básicos dessa ferramenta. Veja quais são na próxima seção.</p><p>Página 164 de 176</p><p>https://docs.docker.com/desktop/install/mac-install/</p><p>https://l.dev.pro.br/instalacao-docker</p><p>https://l.dev.pro.br/instalacao-docker</p><p>Os 5 Principais Comandos do Docker</p><p>Neste capítulo, vamos explorar os cinco principais comandos do Docker que todo</p><p>desenvolvedor web deve conhecer. Esses comandos são fundamentais para gerenciar</p><p>imagens, contêineres e processos no Docker, permitindo que você desenvolva, teste e</p><p>implante suas aplicações de maneira eficiente.</p><p>docker image ls</p><p>O comando docker image ls lista todas as imagens Docker disponíveis no seu</p><p>sistema. As imagens são os templates a partir dos quais os contêineres são criados. Ao</p><p>executar este comando, você pode ver o nome da imagem, o ID da imagem, a data de</p><p>criação e o tamanho da imagem. Isso ajuda a gerenciar e organizar as imagens disponíveis,</p><p>facilitando a escolha da imagem correta para criar um novo contêiner.</p><p>docker run</p><p>O comando docker run é usado para criar e iniciar um novo contêiner a partir de uma</p><p>imagem. Este comando permite especificar a imagem que deseja usar, bem como as</p><p>opções de configuração do contêiner.. Por exemplo, docker run hello-world cria e inicia</p><p>um contêiner imagem hello-world.</p><p>docker ps</p><p>O comando docker ps exibe uma lista dos contêineres atualmente em execução no</p><p>seu sistema. A lista inclui o ID do contêiner, a imagem usada, o comando de inicialização, o</p><p>tempo de execução, o status, as portas expostas e o nome do contêiner. Este comando é</p><p>útil para monitorar os contêineres ativos e verificar seu status e configuração.</p><p>docker exec</p><p>O comando docker exec permite executar comandos em um contêiner em execução.</p><p>Este comando é especialmente útil para depuração e manutenção, permitindo que você</p><p>abra um shell interativo ou execute scripts diretamente no contêiner. Por exemplo, docker</p><p>exec -it meu_container bash abre um shell bash interativo no contêiner meu_container,</p><p>permitindo que você execute comandos como se estivesse diretamente dentro do contêiner.</p><p>docker container stop</p><p>O comando docker container stop é usado para parar a execução de um contêiner.</p><p>Este comando envia um sinal de término ao contêiner, permitindo que ele finalize seus</p><p>processos de maneira ordenada antes de ser interrompido. Por exemplo, docker container</p><p>stop meu_container para o contêiner meu_container. Este comando é útil para gerenciar a</p><p>execução de contêineres e liberar recursos do sistema quando o contêiner não for mais</p><p>necessário.</p><p>Para entender o uso desses comandos em conjunto, assista ao vídeo “Os Cinco</p><p>Principais Comandos do Docker: Domine os fundamentos da Containerização”. Com esses</p><p>Página 165 de 176</p><p>https://l.dev.pro.br/docker-5-comandos</p><p>https://l.dev.pro.br/docker-5-comandos</p><p>cinco comandos, você estará bem equipado para gerenciar imagens e contêineres Docker,</p><p>permitindo desenvolver, testar e implantar suas aplicações com facilidade. Então chegou o</p><p>momento de você aprender a criar sua primeira imagem Docker personalizada. Confira</p><p>como na próxima seção.</p><p>Como Criar Imagens do Docker</p><p>Um Dockerfile é um arquivo de texto contendo uma série de instruções que são</p><p>executadas em sequência para construir uma imagem Docker. Essas instruções definem</p><p>tudo o que a imagem precisa para rodar uma aplicação, incluindo o sistema operacional,</p><p>dependências, configurações e o código da aplicação.</p><p>Vamos criar uma imagem Docker usando o Nginx, um servidor HTTP, como</p><p>exemplo. Primeiro, crie um arquivo chamado Dockerfile e adicione as seguintes instruções:</p><p>FROM nginx:1.27.0</p><p>COPY static /usr/share/nginx/html</p><p>Obs: nesse link você encontrará o exemplo de Dockerfile acima.</p><p>No exemplo acima, usamos a instrução COPY para copiar os arquivos estáticos da</p><p>pasta static no seu diretório local para o diretório padrão do Nginx /usr/share/nginx/html</p><p>dentro do contêiner. Isso configura o Nginx para servir esses arquivos estáticos.</p><p>Agora, vamos construir a imagem Docker. No terminal, navegue até o diretório onde</p><p>está o Dockerfile e execute o seguinte comando:</p><p>docker build -t nginx-enzo .</p><p>Este comando cria uma imagem com o nome nginx-enzo a partir do Dockerfile no</p><p>diretório atual (.).</p><p>Depois de criar a imagem, podemos rodar um contêiner e mapear as portas do</p><p>host para as portas do contêiner. Primeiro, mapeando a porta 8000 do host para a porta</p><p>80 do contêiner:</p><p>docker run -d -p 8080:80 nginx-enzo</p><p>Você pode então acessar página inicial do nginx no endereço localhost:8080,</p><p>conforme figura 5.01 a seguir:</p><p>Página 166 de 176</p><p>https://github.com/renzon/pagina-enzo-pascal/blob/main/Dockerfile</p><p>Figura 5.01: Acessando nginx via porta 8080 no host e 80 no conteiner</p><p>Agora, vamos trocar para a porta 80 do host:</p><p>docker run -d -p 80:80 nginx-enzo</p><p>Isso faz com que a aplicação seja acessível na porta padrão de HTTP (80) do host.</p><p>Assim você pode agora acessar a página inicial do Nginx na pota padrão, acessando</p><p>apenas localhost, conforme figura 5.02 a seguir:</p><p>Figura 5.02: Acessando nginx via porta 80 no host e 80 no conteiner</p><p>Para facilitar a identificação dos contêineres em execução, é uma boa prática usar</p><p>tags ao criar imagens. Podemos adicionar uma tag ao nosso comando de build:</p><p>docker build -t nginx-enzo:v1.0</p><p>Agora, a imagem terá a tag v1.0, permitindo identificar facilmente a versão da</p><p>imagem que estamos usando. Quando rodamos o contêiner, podemos especificar essa tag:</p><p>docker run -d -p 8000:80 nginx-enzo:v1.0</p><p>Página 167 de 176</p><p>Para entender todos esses comandos e execuções, além de poder ver com Nginx é</p><p>usado para servir as páginas do projeto do Enzo Pascal, veja o vídeo “Como Criar Imagens</p><p>do Docker com Dockerfile: Passo a Passo!”.</p><p>Com estas práticas, você pode criar, configurar e gerenciar imagens Docker de</p><p>forma eficiente, garantindo que sua aplicação esteja sempre pronta para ser executada em</p><p>qualquer ambiente. Agora que você conhece o Dockerfile e seus comandos, chegou a hora</p><p>de simplificar a execução e configuração de comandos com outro arquivo importante do</p><p>Docker, o docker-compose. Aprenda como usar esse arquivo na próxima seção.</p><p>Docker Compose: Configuração Simplificada</p><p>Docker Compose é uma ferramenta que permite definir e gerenciar aplicativos</p><p>Docker multi-containers através de um arquivo YAML chamado docker-compose.yml. Este</p><p>arquivo facilita a orquestração de vários contêineres, redes e volumes, simplificando o</p><p>processo de configuração e execução de ambientes complexos.</p><p>Vamos criar um arquivo docker-compose.yml correspondente ao comando docker</p><p>run -d -p 80:80 nginx-enzo da seção anterior. Este arquivo definirá o serviço Nginx e</p><p>mapeará as portas do host para o contêiner:</p><p>No exemplo acima, definimos um serviço chamado web que usa a imagem</p><p>nginx-enzo e mapeia a porta 80 do host para a porta 80 do contêiner. Para iniciar os</p><p>serviços definidos no arquivo docker-compose.yml, usamos o comando:</p><p>docker compose up</p><p>Página 168 de 176</p><p>https://l.dev.pro.br/dockerfile</p><p>https://l.dev.pro.br/dockerfile</p><p>Perceba que como todas configurações são feitas dentro do arquivo, o comando fica</p><p>muito mais simples que respectivo comando run aplicado direto ao Dockerfile.</p><p>Se quisermos que o comando seja executado em segundo plano (background),</p><p>adicionamos a opção -d, de forma análogo ao que fizemos ao comando run na seção</p><p>anterior:</p><p>docker compose up -d</p><p>O comando docker compose up -d cria e inicia os contêineres, permitindo que</p><p>continuemos a usar o terminal para outras tarefas enquanto os contêineres estão em</p><p>execução.</p><p>Para parar e remover todos os contêineres definidos no arquivo</p><p>docker-compose.yml, usamos o comando:</p><p>docker compose down</p><p>Este comando garante que todo o ambiente Docker Compose seja limpo, parando e</p><p>removendo todos os contêineres e redes criados.</p><p>Para entender melhor o funcionamento de todos esses comandos, assista ao vídeo</p><p>“Como Criar e Utilizar o Arquivo Docker Compose: Simplifique sua Configuração”.</p><p>Docker Compose simplifica a configuração e a execução de aplicativos</p><p>multi-containers, proporcionando uma maneira eficiente de gerenciar ambientes complexos</p><p>com facilidade. Esse é o último assunto sobre Docker que todo programador web precisa</p><p>saber para conquistar a primeira vaga com programação.</p><p>Para finalizar esse capítulo, falta apenas usar as 3 ferramentas ensinadas para</p><p>colocar nossa página do Enzo Pascal em um servidor na nuvem. Veja como fazer isso na</p><p>próxima seção.</p><p>Como fazer Deploy na AWS com Git e Docker</p><p>Nessa seção, vamos aplicar o que aprendemos sobre Linux, Git e Docker para</p><p>hospedar a página do Enzo Pascal na Nuvem, usando um servidor EC2 da Amazon. O</p><p>primeiro passo é criar um servidor na EC2, configurando-o para permitir conexões externas,</p><p>abrindo as portas necessárias para acesso via internet.</p><p>Com o servidor configurado, o próximo passo é clonar o repositório do projeto Enzo</p><p>Pascal diretamente no servidor. Usaremos o Git para isso, garantindo que temos o código</p><p>mais recente do projeto disponível no ambiente de produção.</p><p>Depois de clonar o repositório, instalaremos o Docker no servidor, seguindo os</p><p>passos que aprendemos anteriormente. Com o Docker instalado, basta executar o docker</p><p>compose up para iniciar a aplicação. Isso fará com que a página do Enzo Pascal esteja</p><p>acessível na internet, utilizando as tecnologias que dominamos até agora.</p><p>Para entender como executar esses passos, assista ao vídeo “Como fazer Deploy</p><p>na AWS com Git e Docker”.</p><p>Página 169 de 176</p><p>https://l.dev.pro.br/docker-compose</p><p>https://l.dev.pro.br/deploy-aws-linux-git-docker</p><p>https://l.dev.pro.br/deploy-aws-linux-git-docker</p><p>Com isso, você agora tem uma visão clara de como Linux, Git e Docker podem ser</p><p>utilizados em conjunto para publicar aplicações na internet. Para futuras atualizações, basta</p><p>buscar as mudanças no repositório Git do servidor e reconstruir a imagem Docker,</p><p>mantendo a aplicação sempre atualizada.</p><p>Agora que você dominou a base fundamental de conhecimento, chegou a hora de</p><p>escolher a direção que deseja seguir: se aprofundar no backend ou explorar o frontend.</p><p>Vamos discutir essas opções na conclusão a seguir.</p><p>Página 170 de 176</p><p>Perguntas do Capítulo 4</p><p>As Ferramentas do Programador</p><p>Quais as 3 principais ferramentas para programação web?</p><p>Para que serve o Sistema Operacional Linux?</p><p>Para que serve o Controlador de Versão Git?</p><p>Para que serve o Sistema de Container Docker?</p><p>O Terminal de Comando e o Sistema de Arquivos</p><p>Explique o que é o terminal de comando do Linux.</p><p>O que é repl?</p><p>Para que serve o comando pwd ?</p><p>Para que serve o comando man ?</p><p>Para que serve o comando ls ?</p><p>Para que serve o comando cd ?</p><p>Para que servem o ponto (.) e ponto-ponto (..) ao se usar o comando cd?</p><p>Cite uma opção do comando ls que muda o formato da listagem de arquivos.</p><p>Para que serve a tecla tab no terminal?</p><p>De que dois elementos é composto o sistema de arquivos do Linux?</p><p>Para que serve uma pasta no Linux?</p><p>Gestão de Arquivos no Linux</p><p>Para que serve o comando mkdir?</p><p>Para que serve a opção -p do comando mkdir?</p><p>Para que serve o comando touch?</p><p>Para que serve o comando cp?</p><p>Para que serve o comando rm?</p><p>Para que serve a opção -r dos comandos cp e rm?</p><p>Para server o comando mv?</p><p>Qual comando pode ser usado para renomear um arquivo?</p><p>Página 171 de 176</p><p>Edição de Arquivos pelo Terminal com VIM</p><p>Qual comando serve para criar ou editar um arquivo com VIM?</p><p>Qual tecla permite sair do Modo de Comando e entrar no Modo de Inserção do</p><p>VIM?</p><p>Qual comando serve para apagar linhas no Modo de Comando do VIM?</p><p>Qual comando serve para sair do VIM?</p><p>Qual comando serve para sair do VIM sem salvar alterações?</p><p>Qual comando serve para salvar edições feitas em um arquivo no VIM?</p><p>Qual comando serve para sair do VIM, já salvando possíveis alterações?</p><p>Como Acessar Servidor Linux via SSH de Forma Segura</p><p>Qual comando deve ser usado para criar o par de chaves SSH?</p><p>Qual tipo de chave SSH pode ser compartilhada publicamente?</p><p>Qual tipo de chave SSH não pode ser compartilhada publicamente?</p><p>Qual comando para acessar um servidor Linux na nuvem de forma segura?</p><p>GitHub - A Maior Rede Social de Programadores</p><p>Para que serve o controlador de versão git?</p><p>O que é GitHub e o que ele tem a ver com git?</p><p>Explique para que serve cada um dos arquivos que costumam estar presentes em</p><p>um repositório git: Readme, .gitignore e License.</p><p>Git - Instalação e Clonagem de Repositórios</p><p>Cite um gerenciador de pacotes para instalação de programas no MAC.</p><p>Cite um gerenciador de pacotes para instalação de programas no Ubuntu.</p><p>Qual é o comando que serve para copiar arquivos de um repositório remoto do</p><p>git para um repositório local?</p><p>Qual comando serve para conferir a configuração de repositório remoto do git a</p><p>partir de um repositório local?</p><p>Git - Gerencie Alterações em Seu Projeto de Software</p><p>Para que serve o comando git status?</p><p>Para que serve o comando git add README.md?</p><p>Página 172 de 176</p><p>Para que serve o comando git add .?</p><p>Para que serve o comando git commit -m "mensagem de commit"?</p><p>Para que serve o comando git log?</p><p>Para que serve o comando git log --pretty=oneline?</p><p>Como Enviar Mudanças para Repositório Remoto do Git</p><p>Para que serve o comando git push?</p><p>Para que serve o comando git push origin main?</p><p>Para que serve o comando git remote -v?</p><p>Para que serve o comando git remote show origin?</p><p>Processo de Feature Branch para alteração de projetos</p><p>Para que serve o comando git branch?</p><p>Para que serve o comando git branch 1?</p><p>Para que serve o comando git checkout 1?</p><p>Para que serve o comando git commit (sem a opção "-m")?</p><p>Para que serve o comando git push --set-upstream origin 1?</p><p>O que é um Pull Request?</p><p>Explique o que é Code Review com suas palavras</p><p>Como Atualizar seu Repositório Local com Feature Branches</p><p>O que faz o comando git fetch?</p><p>O que faz o comando git merge origin/main?</p><p>O que faz o comando git rebase origin/main?</p><p>O que faz o comando git pull?</p><p>O que faz o comando git branch -d 1?</p><p>Como navegar no histórico do git e marcar pontos importantes</p><p>Explique o que é para que serve uma tag no contexto do git.</p><p>Para que serve o comando git checkout -b 3?</p><p>Para que serve o comando git checkout h783hhd2d?</p><p>Página 173 de 176</p><p>Para que serve o comando git tag passo-1?</p><p>Para que serve o comando git push --tags?</p><p>Para que serve o comando git checkout passo-1?</p><p>Como corrigir erros na hora do commit</p><p>Para que serve o comando git stash?</p><p>Para que serve o comando git tag pop?</p><p>Para que serve o comando git reset –hard HEAD^1?</p><p>Para que serve o comando git commit –amend?</p><p>Como resolver conflitos no Git</p><p>O que é um conflito no git</p><p>e quando ele pode acontecer?</p><p>Como o git identifica um conflito em um arquivo?</p><p>Menciona 3 estratégias para evitar conflitos no git.</p><p>Os 5 Principais Comandos do Docker</p><p>O que faz o comando docker image ls?</p><p>O que faz o comando docker run?</p><p>O que faz o comando docker ps?</p><p>O que faz o comando docker exec?</p><p>O que faz o comando docker container stop?</p><p>Como Criar Imagens do Docker</p><p>O que é e para que serve o arquivo Dockerfile?</p><p>Qual comando serve para criar uma imagem Docker a partir de um Dockerfile?</p><p>O que faz o comando docker run -d -p 8080:80 nginx-enzo?</p><p>Docker Compose: Configuração Simplificada</p><p>O que é e para que serve o arquivo docker-compose.yml?</p><p>O que faz o comando docker compose up?</p><p>Para que serve a opção -d do comando da pergunta anterior?</p><p>Página 174 de 176</p><p>O que faz o comando docker compose down?</p><p>Página 175 de 176</p><p>Conclusão e Próximos Passos</p><p>Esse livro cumpriu o objetivo de ensinar os conceitos e ferramentas básicas para</p><p>quem quer trabalhar com programação web.</p><p>Começamos aprendendo como estudar programação no capítulo 1: Aprendendo a</p><p>Aprender Tecnologia. Com as estratégias de estudo avançamos nosso aprendizado no</p><p>capítulo 2: Fundamentos da Web. Aprendemos como a internet funciona, com seus</p><p>endereços de ip, domínios e sua linguagem de programação base, o HTML.</p><p>Depois disso chegamos no capítulo 3: Fundamentos do CSS. Aqui aprendemos a</p><p>formatar uma página web para incluir componentes visuais, com efeitos e cores,</p><p>construindo uma página real para o Designer Enzo Pascal. Mas todo esse desenvolvimento</p><p>foi feito sem uso de ferramentas profissionais para gerir nossa base de código.</p><p>Por isso, no capítulo 4, As Ferramentas do Programador, estudamos Git, Linux e</p><p>Docker para fazer o controle de versão de nosso projeto, instalar ferramentas em nosso</p><p>sistema operacional, empacotar as bibliotecas em nosso ambiente de desenvolvimento.</p><p>E finalizamos com chave de ouro com a publicação (deploy) de nossa página na</p><p>Nuvem da Amazon. Ainda que esse processo tenha sido feito manualmente, ele serve para</p><p>entender toda a base de como um projeto de software sai do campo das ideias, é</p><p>transformado em código e mantido em um servidor.</p><p>Essa base é fundamental para qualquer pessoa que quer conquistar sua primeira</p><p>vaga com programação web. Sem esses pilares, dificilmente a pessoa será contratada.</p><p>Contudo, apenas esse conhecimento não é suficiente para entrar nesse mercado. É</p><p>necessário se especializar em uma das grandes áreas da programação web: Frontend ou</p><p>Backend.</p><p>Se você gostou mais do capítulo de ferramentas, gosta de quebra cabeças e</p><p>entender como diferentes peças funcionam em conjunto para compor um produto, você</p><p>deve seguir na área de Backend. Para ajudar nesse processo, a DevPro criou a</p><p>Comunidade de Whatsapp que você pode acessar nesse link para obter mais informações</p><p>nessa área: https://l.dev.pro.br/whatsapp-trilha-backend.</p><p>Já se você gostou mais dos componentes visuais que vimos nos capítulos de HTML</p><p>e CSS, você deve seguir na área de Frontend. A DevPro também tem uma Comunidade</p><p>Whatsapp para essa trilha: https://l.dev.pro.br/whatsapp-trilha-frontend.</p><p>Se você decidir entrar em uma dessas comunidades de Whatsapp, você vai ganhar</p><p>30 minutos de consultoria com um dos nossos instrutores. A ideia é você poder tirar dúvidas</p><p>dessa área para poder tomar a decisão de qual área seguir de forma mais segura.</p><p>Então é isso, nos encontramos nas comunidades. Grande abraço de Roger</p><p>Camargo e Renzo Nuccitelli.</p><p>Página 176 de 176</p><p>https://l.dev.pro.br/whatsapp-trilha-backend</p><p>https://l.dev.pro.br/whatsapp-trilha-frontend</p><p>essa é uma questão extremamente comum durante o aprendizado de</p><p>programação, principalmente no ínicio. Entender isso é fundamental para você não desistir</p><p>pouco depois de começar.</p><p>Nós temos duas grande formas de pensar, segundo a neurociência: o modo focado</p><p>e o modo difuso.</p><p>Quando você usa o modo focado, você está prestando atenção. Por exemplo, ao</p><p>resolver um problema de matemática, assistindo a uma vídeo aula, jogando vídeo game,</p><p>resolvendo um quebra cabeças, aprendendo novas palavras em inglês ou agora que você</p><p>está lendo esse livro.</p><p>Quando você foca, diferentes partes do seu cérebro estão trabalhando. Quais partes</p><p>depende do que você está fazendo. Por exemplo, se você está fazendo uma multiplicação,</p><p>o foco vai usar partes diferentes do cérebro daquelas de quando você está falando. Quando</p><p>você está aprendendo algo novo você precisa focar intencionalmente para “ligar” essas</p><p>partes do cérebro e começar o processo de aprendizado.</p><p>Já o modo difuso acontece quando sua mente está relaxada e você não está</p><p>pensando em nada em particular. Isso acontece quando o professor pede para você se</p><p>concentrar, dizendo que você esta “viajando”, olhando para o nada. Nesse modo você usa</p><p>outras partes do cérebro, diferentes daquelas que você usa quando está em modo focado.</p><p>O modo difuso ajuda a fazer conexões imaginárias entre ideias. Normalmente a</p><p>criatividade aparece quando usamos o modo difuso. Para aprender de modo efetivo você</p><p>precisa alternar entre os modos focado e difuso.</p><p>Em programação é muito comum as pessoas resolverem o problemas usando o</p><p>modo focado e continuarem muito tempo nesse modo, mesmo quando estão travadas na</p><p>solução do problema, sem conseguir pensar em uma solução. Nesse caso, programadores</p><p>experientes usam a alternância de modos, mesmo que não saibam da existência deles.</p><p>Quando travam por mais de 10 minutos, programadores experientes vão fazer outra</p><p>coisa, como beber um café, tomar um banho, tirar um cochilo, fazer carinho em um cachorro</p><p>ou conversar com colegas. Quando voltam a trabalhar, “magicamente” conseguem</p><p>encontrar a solução. Isso acontece porque colocaram o modo difuso para trabalhar, quando</p><p>deixaram de focar na solução do problema.</p><p>Mas tome muito cuidado, existem duas formas de ficar travado. A primeira, como foi</p><p>descrita no parágrafo anterior, é quando você conhece os conceitos e fica travado na hora</p><p>de resolver um problema. Nesse caso, o modo difuso ajuda.</p><p>O outro caso é quando você não entendeu os conceitos iniciais, principalmente</p><p>quando está aprendendo algo novo, como programar. Nesse segundo caso, o modo difuso</p><p>não vai ajudar porque você não “carregou” nada no cérebro durante o estudo em modo</p><p>focado.</p><p>Página 9 de 176</p><p>Nesse segundo caso, você precisa voltar a estudar os conceitos, exemplos e</p><p>explicações em seus livros, vídeo aulas e suas anotações. Pode pedir para seu professor,</p><p>ou outra pessoa, que explique o conceito de outra maneira. Mas você não pode ficar</p><p>distraído durante esse processo, precisa focar completamente no assunto!</p><p>Por fim, não tente tirar conclusões precipitadas sobre estratégias de aprendizado.</p><p>Não tente mudar entre modo focado e difuso uma só vez durante os estudos e já concluir</p><p>que não funciona para você. Eu te garanto, alternar entre modo focado e difuso vai te fazer</p><p>aprender qualquer assunto, incluindo programação!</p><p>É muito bom você usar o modo difuso para se dar uma recompensa pelo trabalho</p><p>que teve em se manter em modo focado. Bons exemplo de ativadores de modo difuso são:</p><p>● Fazer um esporte, como jogar futebol ou basquete;</p><p>● Caminhar, correr ou nadar;</p><p>● Dançar;</p><p>● Pedalar;</p><p>● Desenhar ou pintar;</p><p>● Tomar um banho;</p><p>● Ouvir músicas, especialmente as instrumentais, sem letras;</p><p>● Tocar músicas que você conhece bem em algum instrumento musical;</p><p>● Meditar ou rezar;</p><p>● Lavar louça;</p><p>● Dormir (modo difuso mais intenso da mente).</p><p>Os ativadores de modo difuso a seguir são melhor utilizados como recompensas de</p><p>duração curta. Isso porque essas atividades exigem um modo focado mais intenso que as</p><p>atividades anteriores. Nesse caso, costuma ser bom colocar um cronômetro para elas não</p><p>tomarem muito do seu tempo:</p><p>● Jogar vídeo game;</p><p>● Conversar com amigos;</p><p>● Ajudar alguém com uma tarefa simples;</p><p>● Ler um livro;</p><p>● Mandar mensagens para amigos;</p><p>● Ver um filme;</p><p>● Ver TV.</p><p>Página 10 de 176</p><p>Como evitar a procrastinação</p><p>Procrastinação significa não fazer as tarefas que precisam ser feitas, deixando para</p><p>depois. Isso é um problema para qualquer tipo de estudante, seja criança ou adulto. É um</p><p>obstáculo no caminho de um bom processo de aprendizado.</p><p>Apesar disso, a procrastinação é algo natural. Por que você faria algo que não sente</p><p>que deveria fazer? Especialmente se você sabe de antemão que será difícil? Por que</p><p>estudar programação na segunda-feira se você só vai fazer processo seletivos daqui alguns</p><p>meses? Você não vai esquecer os conceitos de qualquer forma?</p><p>E aqui está o problema. Se você procrastina, normalmente você perde tempo. E</p><p>como você vai aprender nas próximas seções, tempo e prática caminham juntos para você</p><p>sedimentar novas ideias em seu cérebro.</p><p>Quando acaba seu tempo de poder se dedicar aos estudos, você não só não</p><p>consegue construir estruturas de aprendizado como você gasta energia se preocupando</p><p>com isso. Ou seja, você perde duas vezes, pois sofreu e não aprendeu nada. Ainda assim</p><p>muitos estudantes procrastinam. Vou compartilhar uma técnica para você vencer isso. Você</p><p>só vai precisar de um tomate de plástico!</p><p>Você reclama quando alguém pede para você lavar louça, fazer lição de casa ou</p><p>lavar uma bicicleta? Isso acontece porque machuca quando você pensa em fazer essas</p><p>atividades: pesquisadores podem ver a ativação de uma área do cérebro que causa</p><p>sensação de dor, o córtex insular, quando as pessoas pensam nesses trabalhos.</p><p>Para seu cérebro, pensar em arrumar a cama já começa a dor de estômago! Mas</p><p>aqui existe algo interessante. Assim que você começa a fazer a tarefa que você não queria</p><p>fazer a dor vai embora depois de 20 minutos. O córtex insular se acalma quando você</p><p>começa a tarefa que estava evitando. Você começa a ficar feliz quando finalmente está</p><p>começando o trabalho.</p><p>Então essa é a dica número um para aprender a programar: comece e continue</p><p>aprendendo! Não fique adiando! Mas como mudar os hábitos com os quais você já está</p><p>acostumado? A resposta, como já mencionei anteriormente é… um tomate!</p><p>A técnica pomodoro foi criada por Franceso Cirillo nos anos 80 para ajudar</p><p>procrastinadores. Pomodoro é a palavra italiana para “tomate”. A técnica é simples e</p><p>funciona.</p><p>Página 11 de 176</p><p>Figura 1.1: Um contador regressivo Pomodoro</p><p>Primeiro você precisa de um contador regressivo. Existem aqueles em formato de</p><p>tomate, mas qualquer um serve. E a técnica funciona da seguinte forma:</p><p>1. Desligue todas distrações - seu telefone, TV, música, seu irmão. Qualquer coisa</p><p>que fique no caminho da sua habilidade de focar. Encontre um lugar silencioso para</p><p>trabalhar onde você não será interrompido. Se você não tem um lugar desse</p><p>disponível, experimente usar fones canceladores de ruído ou até os plugues de</p><p>orelha com espuma, que são bem baratos.</p><p>2. Coloque 25 minutos no contador regressivo;</p><p>3. Comece a fazer e foque na tarefa o melhor que você puder. 25 minutos não é muito</p><p>tempo, você consegue fazer isso!</p><p>4. Por fim, a melhor parte. Depois dos 25 minutos, dê um presente para você mesmo.</p><p>Veja um Story no Instagram, converse com um amigo por 5 minutos, faça um</p><p>carinho no seu cachorro. A recompensa é a parte mais importante do processo</p><p>Pomodoro. Quando você está de olho na recompensa futura, seu cérebro te ajuda a</p><p>focar melhor.</p><p>Todo esse processo é chamado de “fazer um Pomodoro”. quando você fizer um</p><p>Pomodoro, esqueça sobre acabar a tarefa. Você não vai dizer que vai acabar o que você</p><p>estiver fazendo, como terminar um exercício de programação. Somente trabalhe o máximo</p><p>que você puder por 25 minutos. Quando o contador regressivo apitar, tire 5 minutos de</p><p>descanso e mergulhe em seu modo difuso com sua recompensa.</p><p>Você pode fazer um Pomodoro depois,</p><p>não há problema. Mas você está fazendo a</p><p>coisa certa ao trabalhar duro na tarefa. Não se preocupe com quanto trabalho você fez,</p><p>você vai acabar a tarefa. Mas desde que você tenha tempo o suficiente disponível e não</p><p>deixe para última hora. Por isso eu falei para você separar 30 minutos em sua agenda, nos</p><p>próximos meses, para aprender programação.</p><p>Você não vai aprender tudo em apenas 15 dias. Mas fazendo ao menos um</p><p>Pomodoro por dia, durante meses, definitivamente você vai conseguir!</p><p>Página 12 de 176</p><p>É super normal, ao começar com a técnica Pomodo, acabar se distraindo durante os</p><p>25 minutos. O importante é, assim que perceber que isso está acontecendo, se esforçar</p><p>para voltar a fazer a tarefa. São apenas 25 minutos. Qualquer pessoa consegue estudar em</p><p>25 minutos. Se você se pegar pensando em outras tarefas que precisa fazer, anote-as em</p><p>um papel, para não esquecer, e continue com foco no seu Pomodoro.</p><p>Com o tempo será normal você continuar trabalhando na tarefa, mesmo depois do</p><p>contador regressivo apitar, isso não é problema. Mas quando parar, é importante se premiar.</p><p>E quando se premiar, faça uma tarefa completamente diferente do que estava fazendo. Isso</p><p>vai descansar a área do seu cérebro que estava focada na tarefa. Se você estava</p><p>estudando programação sentado, levantar e se mover e/ou se alongar é o melhor a se</p><p>fazer.</p><p>Quantos Pomodoros você deve fazer no dia depende de você, da sua rotina, aquela</p><p>que você mapeou na sua agenda no início desse capitulo. O mais importante é você fazer</p><p>isso todo dia, ao menos de segunda a sexta. Ou seja, melhor você fazer um Pomodoro por</p><p>dia, nos 5 dias da semana, somando 2 horas e meia de estudo, do que ficar estudando 2</p><p>horas e meia seguidas no sábado e não estudar em nenhum outro dia.</p><p>E não se engane: faça uma, e apenas uma tarefa durante uma sessão de</p><p>Pomodoro. As pessoas acham que podem fazer várias coisas ao mesmo tempo, mas isso é</p><p>um erro. Quando você muda sua atenção, você gasta energia mental e vai ter uma</p><p>performance pior.</p><p>Dica de aprendizado: coloque o contador regressivo para também contar o tempo do</p><p>seu descanso. Caso contrário, é arriscado você passar dos 5 minutos e começar a</p><p>procrastinar, justamente o que queremos evitar.</p><p>E cuidado se a sua tarefa for estudar. Quando estiver lendo um livro ou assistindo</p><p>uma vídeo aula, verifique se está realmente prestando atenção. Para averiguar sua</p><p>atenção, pare de ler ou dê pausa na vídeo aula e se pergunte: quais as ideias principais</p><p>dessa página do livro? Quais os conceitos principais da vídeo aula? Repita os</p><p>conceitos em sua mente ou até em voz alta. Não releia a página ou assista ao vídeo</p><p>inúmeras vezes. Pensar nas ideias principais com sua própria mente é o segredo por trás</p><p>da ativação da memória.</p><p>Inclusive relembrar dos conceitos em diferentes lugares e momentos é</p><p>importantíssimo para fazer a informação ser melhor absorvida pela sua mente. Esse</p><p>processo se chama revisão ativa. Na próxima seção você entender porquê isso funciona.</p><p>Aprendendo enquanto você dorme</p><p>Cientistas pesquisadores interessados em entender como aprendemos analisaram</p><p>se nossos neurônios mudam durante esse processo de aprendizado. Porque se eles</p><p>mudam, entender isso pode ajudar a nos dar pistas de como aprender melhor.</p><p>Eles foram então capazes de gerar imagens de neurônios e perceberam que quando</p><p>prestamos atenção, aprendendo algo novo durante o dia, pequenos calos emergem dos</p><p>Página 13 de 176</p><p>dendritos em nossos neurônios. Acontece que esses dendritos ou, mais especificamente, a</p><p>conexão entre eles, é responsável pelo nosso acúmulo de conhecimento.</p><p>E o mais interessante foi o restante do estudo. Esses calos crescem muito mais</p><p>quando dormimos, se transformando em espinhas que formam as sinapses com os axônios</p><p>de outros neurônios. Ou seja, o cérebro reorganiza o que aprendemos durante o dia.</p><p>Então é possível ver os sinais elétricos viajando repetidas vezes pelo mesmo</p><p>conjunto de neurônios. Essa “prática noturna” durante o sono é o que parece permitir que as</p><p>espinhas dendríticas fiquem grandes.</p><p>Quando essa espinha cresce, a sinapse fica forte e consegue emitir mais sinais</p><p>elétricos. Nossas conexões neurais ficam um pouco maiores e mais solidificadas.</p><p>Mas é necessária concentração intencional durante o dia para criar os calos que dão</p><p>início a esse processo. E por isso a revisão ativa é tão importante. Ela ajuda na criação</p><p>dos calos.</p><p>Em direção oposta, quando você assiste a uma aula sem atenção, o calo não é</p><p>formado. E quando começa o processo de reorganização noturna, os conceitos serão</p><p>completamente eliminados, em vez de solidificados em suas conexões neurais. De fato, até</p><p>mesmo conexões neurais e espinhas dendríticas já formadas podem facilmente</p><p>desaparecer se você não praticar deliberadamente os conceitos com certa frequência.</p><p>Ou seja, é como se toda noite o nosso cérebro fizesse uma faxina, reforçando</p><p>conhecimento que indicamos para ele como sendo importantes, aquele que nós praticamos</p><p>ou prestamos atenção intencional durante o dia e, ao mesmo tempo, fosse jogando no lixo</p><p>as informações irrelevantes, aquelas que prestamos atenção apenas parcialmente ou que</p><p>não praticamos.</p><p>Eu quero te confessar que eu só aprendi isso que estou compartilhando com você</p><p>aos quarenta anos de idade. Apenas por acaso eu coloquei isso em prática quando era</p><p>jovem, durante meus estudos.</p><p>Quando criança eu gostava muito de brincar na rua. Mas minha mãe era muito</p><p>rigorosa com minhas atividades escolares. Se eu esquecesse de fazer lição de casa, eu</p><p>receberia um castigo certamente!</p><p>Então eu prestava muita atenção durante as aulas, tanto por ser curioso, tanto para</p><p>conseguir fazer a lição de casa mais rápido. E quando chegava da escola, eu já ia fazer a</p><p>lição de casa, pensando em poder sair para a rua e brincar, ou seja, pensando na</p><p>recompensa, como no método Pomodoro.</p><p>Eu também sentia que se fizesse a lição logo após a aula, era muito mais rápido do</p><p>que se deixasse para a noite ou para outro dia. Ou seja, sem querer, eu fazia prática</p><p>deliberada.</p><p>E o principal: fazia isso antes de dormir, favorecendo a geração de conexões</p><p>neurais. O efeito é que todo mundo me achava inteligente e eu era quase sempre o aluno</p><p>com maiores notas da turma.</p><p>Página 14 de 176</p><p>Mas o fato é que o restante das pessoas deixava para estudar de véspera. E como</p><p>vimos até aqui, sem revisão deliberada e prática, com conhecimento sedimentado durante o</p><p>sono, você efetivamente não aprende. Então não era questão de eu ser inteligente.</p><p>Era uma questão de que eu realmente estava aprendendo, enquanto a maioria não.</p><p>A maioria deixava a lição para outro dia, ou nem fazia. Não prestava atenção na aula, ficava</p><p>conversando com amigos. Ou seja, estavam desperdiçando tempo!</p><p>As pessoas diziam que eu gostava de estudar. Mas, na realidade, eu gostava</p><p>mesmo era de brincar na rua, eu só estava otimizando o tempo de estudo para poder</p><p>brincar mais!</p><p>A beleza desse conhecimento é que você agora pode utilizar isso em seu favor, para</p><p>aprender qualquer coisa! Em particular, para aprender programação, como veremos na</p><p>próxima seção.</p><p>O Conhecimento entra pelos dedos</p><p>Eu tive um professor na faculdade, chamado Fábio Carneiro Mokarzel, que dizia</p><p>“programação se aprende pelos dedos”. Eu sempre concordei com ele e passei a usar essa</p><p>frase no meu dia a dia como instrutor de programação. Mas agora eu entendo a razão</p><p>disso.</p><p>Na Dev Pro, onde ensino programação online, eu sempre falei para a turma praticar,</p><p>colocar a mão na massa. E percebi que, ao longo do tempo, existiam dois perfis de aluno.</p><p>O primeiro perfil achava que otimizaria tempo vendo todas vídeo aulas dos meus</p><p>cursos. Então focava na quantidade de aulas assistidas, às vezes vendo o vídeo em</p><p>velocidade dobrada, mas rápido que o normal.</p><p>Mas, nos cursos, as aulas são graduais. Todo conceito que você aprende em uma</p><p>aula será usado nas aulas seguintes. Então, quando chegavam nos vídeos mais</p><p>avançados, os alunos sentiam que não sabiam os conceitos.</p><p>Sabendo o que sei agora fica simples de explicar isso: eles não mantinham foco</p><p>intencional, não faziam</p><p>revisão deliberada, assistiam muito conteúdo, mas sem criar os</p><p>calos dendríticos necessários! Então acabavam se enganando que estavam aprendendo.</p><p>Já o segundo perfil era de quem assistia a aula mais devagar, mas prestando</p><p>atenção, repetindo todos os comandos que viam e fazendo suas próprias anotações.</p><p>Ou seja, aquelas que estavam prestando completa atenção! Esse tipo de perfil fazia</p><p>os exercícios pedidos na aula e viam a solução do professor só depois disso, para comparar</p><p>e aprender outras formas de resolução. Mais do que isso, faziam pequenas modificações</p><p>nos programas para melhor entender os conceitos, ou seja, já fazendo revisão ativa.</p><p>É notório ver como esse tipo de perfil faz várias perguntas e normalmente posta</p><p>comentários sobre como conseguiu pensar na solução do problema enquanto estava</p><p>tomando banho!</p><p>Página 15 de 176</p><p>É por isso que foi sempre fácil para mim, na posição de professor, identificar o aluno</p><p>que rapidamente se tornaria um programador. Bastava olhar a evolução no tipo de pergunta</p><p>e como esse perfil perguntava frequentemente, demonstrando que estava fazendo prática</p><p>deliberada todo santo dia.</p><p>E para terminar esse capítulo, vou revelar para você o último segredo que vai</p><p>aumentar demais a velocidade do seu aprendizado!</p><p>O poder das comunidades</p><p>Quando você está aprendendo algo novo é bom poder contar com pessoas</p><p>experientes para te ajudar nas dúvidas que você tem. Na programação isso é ainda mais</p><p>fundamental. Uma pessoa experiente vai conseguir encontrar o problema no seu código em</p><p>questão de minutos, quando você demoraria horas para encontrar, isso se encontrasse.</p><p>Durante sua caminhada para se tornar programador também é importante contar</p><p>com ajuda de pares, pessoas que estão mais ou menos no seu nível de conhecimento.</p><p>Esse apoio serve para você se motivar e se manter preocupado com o avanço de outra</p><p>pessoa que também está no seu mesmo nível. Assim você vai se manter estudando para</p><p>continuar melhorando, assim como o seu colega.</p><p>Mas isso também é importante porque, durante esse processo, você vai sentir</p><p>desânimo várias vezes. A área de programação exige aprendizado de muitos conceitos</p><p>novos e, no início, parece que você não está aprendendo. Por isso a importância de fazer</p><p>observações sobre o que você aprendeu. Por alguma razão que não sei explicar, muitas</p><p>pessoas acham que essas dificuldades só acontecem com elas, pensam que</p><p>provavelmente possuem dificuldade de aprendizado.</p><p>Ainda que cada pessoa aprenda em uma velocidade diferente, a verdade é que</p><p>todos passamos por essas mesmas dificuldades no início do aprendizado de programação.</p><p>Então ver seus colegas passando pelo mesmo que você ajuda a não desistir do seu grande</p><p>objetivo: se tornar um programador web profissional!</p><p>Não é a toa que existe o velho ditado popular “Quem quer ir rápido, vai sozinho.</p><p>Quem quer ir longe, vai acompanhado”.</p><p>E por saber sobre a importância desse acompanhamento que criei a Comunidade</p><p>DevPro. Nela você vai encontrar todo o conteúdo que você já está tendo acesso</p><p>gratuitamente neste ebook, além de respectivas vídeo aulas. Mas, mais do que isso, vai ter</p><p>suporte de pessoas experientes, que já trilharam esse mesmo caminho que você está</p><p>começando agora.</p><p>Lá temos fórum de dúvidas, encontros ao vivo e muita interação em um servidor</p><p>exclusivo do Discord, para você chegar muito mais rápido em sua primeira vaga como</p><p>programador.</p><p>Se você puder e quiser fazer parte, será muito bem vindo. E se você não puder, não</p><p>desanime. Procure apoio com outras pessoas experientes do mercado de programação e</p><p>use esse material que estou compartilhando com você e será plenamente possível você</p><p>conseguir sua primeira vaga como programador!</p><p>Página 16 de 176</p><p>https://l.dev.pro.br/comunidade-devpro-matricula-ebook-rpv</p><p>https://l.dev.pro.br/comunidade-devpro-matricula-ebook-rpv</p><p>Perguntas do Capítulo 1</p><p>Qual seu objetivo de vida profissional? Você quer se tornar um programador web?</p><p>Você já usou uma aplicativo de agenda? Você já fez a configuração de um evento</p><p>recorrente, com 30 minutos diários, para estudar programação?</p><p>Você já compartilhou seu objetivo com uma pessoa que você conhece ou respeita,</p><p>com um familiar ou amigo?</p><p>Você está respondendo à seguinte pergunta, todos os dias: “Hoje fiz o melhor que</p><p>poderia, nas condições que tinha, para me tornar um programador web?”?.</p><p>A pessoa com quem você compartilhou seu objetivo está te cobrando todo fim do dia</p><p>sobre os 30 minutos que você prometeu estudar?</p><p>Você está registrando as datas e as respostas para a pergunta acima? Você está</p><p>conferindo sua média semanal de atividades diárias?</p><p>Você fez uma “caminhada das imagens” no capítulo 1 deste livro?</p><p>O que você entende por modo focado de pensar?</p><p>Dê um exemplo de atividade que você precisa usar o modo focado para aprender.</p><p>O que você entende por modo difuso de pensar?</p><p>Dê um exemplo de atividade que ajuda a ativar o modo difuso de pensar.</p><p>Explique, com suas palavras, o que é a Técnica Pomodoro?</p><p>Explique, com suas palavras, o que é a revisão ativa?</p><p>Explique, com o que aprendeu neste capítulo, por que é melhor estudar 30 minutos</p><p>por dia, de segunda a sexta, do que estudar 2 horas e meia sem parar no sábado?</p><p>Explique por que é importante contar com comunidades durante seu processo de</p><p>aprendizado de programação.</p><p>Página 17 de 176</p><p>Capítulo 2: Fundamentos da Web</p><p>“...homem prudente que construiu a sua casa sobre a rocha… não caiu, por que estava</p><p>edificada sobre a rocha”</p><p>Sermão da Montanha, Mateus 7:24</p><p>Ainda que eu, Renzo, tenha convicção de que aprender programação só é</p><p>possível com prática, é necessário conhecer um mínimo de fundamentos e</p><p>vocabulário sobre a internet antes de colocar a mão na massa.</p><p>Através desse conhecimento mínimo você vai entender conceitos mais complexos,</p><p>pesquisar melhor suas dúvidas na internet, fazer boas perguntas para pessoas mais</p><p>experientes e formular hipóteses sobre as causas de seu sistema web funcionar ou não.</p><p>Neste capítulo mostrarei os fundamentos sobre internet que todo programador web</p><p>deve saber. Sem esse conhecimento você vai construir sua casa sobre terreno de areia e,</p><p>fatalmente, ela vai ruir sob a pressão da primeira chuva e vento leves, como prega o</p><p>Sermão do Montanha na bíblia, no livro de Mateus.</p><p>Por incrível que possa parecer, já fui responsável por avaliar programadores em</p><p>várias empresas e já tive que recusar pessoas que tinham anos de experiência, mas que</p><p>demonstraram não ter uma base de conhecimento sólida na área em que atuam. E é</p><p>justamente nessa base que se encontram as soluções de 99% dos problemas que ocorrem</p><p>em sistemas web.</p><p>Então, além deste capítulo ser importantíssimo para sua carreira como programador</p><p>web, o que você vai estudar a seguir vai lhe ajudar a escolher entre uma das duas</p><p>principais trilhas de conhecimento nessa área de programação: Frontend e Backend.</p><p>Eu sempre recomendei que meus alunos focassem em apenas uma dessas trilhas e</p><p>essa é a razão de centenas deles terem conquistado suas primeiras vagas como</p><p>programadores web em questão de meses de estudo. Contudo, percebi que ao menos o</p><p>mínimo de cada uma dessas áreas, além de ferramentas de apoio, precisa ser estudado no</p><p>início para que se tenha a visão geral do funcionamento de um sistema de internet.</p><p>Não pule esse capítulo achando que você vai avançar mais rápido em seus</p><p>estudos. Pelo contrário, proceder assim só vai te atrasar. Por isso peço que você tenha fé</p><p>em minha experiência. Não por acaso eu escolhi uma frase bíblica como inspiração para</p><p>esse capítulo. Tenha fé!</p><p>URL ou Link: você sempre usa, mas não prestou atenção</p><p>Todo dia você abre seu navegador e digita um endereço de internet. O nome desse</p><p>endereço é URL, (Uniform Resource Locator). Traduzindo para português, um Localizador</p><p>Uniforme de Recursos.</p><p>Por exemplo, se você acessar o maravilhoso site www.pudim.com.br, vai encontrar a</p><p>imagem dessa famosa sobremesa digna dos deuses:</p><p>Página 18 de 176</p><p>https://l.dev.pro.br/site-do-pudim</p><p>Figura 2.1: Acesso ao site do Pudim no navegador Mozilla Firefox</p><p>Se você copiar a URL direto da barra do navegador</p><p>vai perceber, ao colar em algum</p><p>campo de texto, que o conteúdo será diferente do que aparece na figura 2.1. Ela vai ter o</p><p>seguinte formato: http://www.pudim.com.br/.</p><p>Perceba que foi acrescentado o prefixo “http://” e também o sufixo “/” na URL.</p><p>Nessa seção nós vamos entender essas e todas outras partes que compõem um endereço</p><p>de internet. Vou exemplificar entrando em um site que acesso frequentemente.</p><p>Eu gosto muito de futebol e torço para o time do Santos. Sempre entro no site do</p><p>Globo Esporte e clico no ícone do meu time do coração para ver as notícias, como você</p><p>pode ver a seguir.</p><p>Página 19 de 176</p><p>https://l.dev.pro.br/site-do-pudim</p><p>Figura 2.2: Acesso ao site do Globo Esporte</p><p>Perceba que a URL do site é https://ge.globo.com/. Aqui já podemos notar uma</p><p>diferença para o site do pudim. No site do pudim o cadeado no navegador está com ícone</p><p>de cadeado com uma faixa vermelha em cima, enquanto o site do globo esporte está sem</p><p>essa faixa vermelha.</p><p>Isso acontece porque a forma de comunicação do Globo Esporte é segura, pois usa</p><p>o protocolo https. Enquanto isso o pudim usa um protocolo inseguro, o protocolo http.</p><p>Assim, com exemplos, deciframos a primeira parte que toda URL possui, o protocolo.</p><p>Quando se usa protocolo http, todas requisições feitas poderão ter seu conteúdo</p><p>lido por qualquer sistema que as intercepte em seu caminho na internet.</p><p>Já com protocolo seguro, a requisição é criptografada e apenas o site de destino vai</p><p>conseguir ler o conteúdo da requisição. Mesmo que a requisição seja interceptada, seu</p><p>conteúdo estará embaralhado e será impossível decifrá-lo.</p><p>Além do protocolo, também já conhecemos o endereço do site. O nome formal</p><p>desse endereço é domínio. Com esse conhecimento, já podemos separar os dois</p><p>endereços que vimos até agora:</p><p>Página 20 de 176</p><p>https://l.dev.pro.br/globo-esporte</p><p>URL: http://www.pudim.com.br/</p><p>Protocolo: http</p><p>Domínio: www.pudim.com.br</p><p>URL: https://ge.globo.com/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Muitas vezes você não digita essas URLs, como fiz para acessar os dois sites</p><p>anteriores. Eles são acessados quando o usuário clica em botões ou links, tanto em páginas</p><p>como aplicativos.</p><p>Toda vez que você executa uma dessas ações, o navegador vai acessar o</p><p>respectivo endereço de internet e te dar acesso aos recursos fornecidos pelo site. Veja</p><p>abaixo como fica a URL quando clico no ícone do time do Santos:</p><p>Figura 2.3: Resultado de clique no ícone do Santos</p><p>Veja que agora a URL tem um novo elemento que ainda não vimos:</p><p>https://ge.globo.com/sp/santos-e-regiao/futebol/times/santos/. Depois do domínio, aparece</p><p>mais uma parte que identifica a localização da página específica do time do Santos:</p><p>/sp/santos-e-regiao/futebol/times/santos/. A essa parte se dá o nome de caminho, ou</p><p>usando o termo em inglês, path.</p><p>Quando não existe um path definido, dizemos que estamos caminho raíz do site.</p><p>Esse caminho raíz é definido através da letra “/”.</p><p>Página 21 de 176</p><p>https://l.dev.pro.br/site-do-pudim</p><p>https://l.dev.pro.br/globo-esporte</p><p>https://l.dev.pro.br/globo-esporte-pagina-do-santos</p><p>Com esse novo conhecimento, conseguimos definir melhor nossas URLs:</p><p>URL: http://www.pudim.com.br/</p><p>Protocolo: http</p><p>Domínio: www.pudim.com.br</p><p>Path: /</p><p>URL: https://ge.globo.com/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Path: /</p><p>URL: https://ge.globo.com/sp/santos-e-regiao/futebol/times/santos/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Path: /sp/santos-e-regiao/futebol/times/santos/</p><p>Uma outra ação comum que fazemos no dia a dia é executar uma busca no Google.</p><p>Veja na figura a seguir o resultado de buscar “Comunidade DevPro”.</p><p>Figura 2.4: Resultado de busca no Google por “Comunidade DevPro”</p><p>Perceba que agora a URL ficou tão grande que nem apareceu completamente na</p><p>imagem:</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoH</p><p>u_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq</p><p>=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQ</p><p>sAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEE</p><p>LEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENED</p><p>EEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQ</p><p>QxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4</p><p>QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gB</p><p>AKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>Página 22 de 176</p><p>https://l.dev.pro.br/site-do-pudim</p><p>https://l.dev.pro.br/globo-esporte</p><p>https://l.dev.pro.br/globo-esporte-pagina-do-santos</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d&ei=esXCY-WoHu_s5OUP6JaAgAk&ved=0ahUKEwjlzaHOq8f8AhVvNrkGHWgLAJAQ4dUDCA4&uact=5&oq=Comunidade+DevPro&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQ6CggAEEcQ1gQQsAM6BwgAELADEEM6CwgAEIAEELEDEIMBOggILhCDARCxAzoFCC4QgAQ6CwguEIAEELEDEIMBOg4ILhCABBCxAxDHARDRAzoECAAQQzoICAAQgAQQsQM6CgguEMcBENEDEEM6CAgAELEDEIMBOgYIABAKEEM6CwgAEIAEELEDEMkDOgUIABCxAzoOCC4QgAQQxwEQrwEQ1AI6CwguEIAEEMcBEK8BOgsILhCABBDHARDRAzoHCAAQgAQQCjoHCC4QgAQQCkoECEEYAEoECEYYAFCIBFiHGGCmHmgBcAF4AIABlwGIAcYQkgEEMC4xN5gBAKABAcgBCsABAQ&sclient=gws-wiz-serp</p><p>Vou colocar em destaque apenas a parte inicial da URL, para que você possa</p><p>entender melhor o elemento que foi adicionado em seu final:</p><p>https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d</p><p>Ou seja, veja que agora, depois do path, existe uma letra “?”. O elemento depois</p><p>desse ponto de interrogação tem o nome de query string. Nesse elemento se encontram</p><p>os parâmetros, que são usados para fornecer informações adicionais para o Google.</p><p>Cada um desses parâmetros é separado pela letra “&”. E cada parâmetro em si tem</p><p>duas partes: seu nome e seu valor. Essas duas partes são separadas pela letra “=”.</p><p>Mais uma vez usando o nosso conhecimento, podemos dividir todos links já vistos</p><p>em suas partes:</p><p>URL: http://www.pudim.com.br/</p><p>Protocolo: http</p><p>Domínio: www.pudim.com.br</p><p>Path: /</p><p>Parâmetros: Não tem</p><p>URL: https://ge.globo.com/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Path: /</p><p>Parâmetros: Não tem</p><p>URL: https://ge.globo.com/sp/santos-e-regiao/futebol/times/santos/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Path: /sp/santos-e-regiao/futebol/times/santos/</p><p>Parâmetros: Não tem</p><p>URL: https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d</p><p>Protocolo: https</p><p>Domínio: www.google.com</p><p>Path: /search</p><p>Parâmetros:</p><p>1. Nome: q Valor: Comunidade+DevPro</p><p>2. Nome: client - Valor: firefox-b-d</p><p>Por fim, existe um último elemento que toda URL possui. Ele é chamado de porta.</p><p>Em inglês o termo é port. Curiosamente a tradução literal de port para o português é porto.</p><p>Mas, por alguma razão que desconheço, o termo é conhecido na comunidade brasileira de</p><p>programadores por porta.</p><p>Cada tipo de protocolo possui uma porta padrão. Quando se usa a porta padrão de</p><p>um protocolo, a porta pode, opcionalmente, ser omitida. A porta padrão do protocolo http é</p><p>a 80. Já a do protocolo https é a 443.</p><p>Sendo assim, a URL completa do site do pudim é http://www.pudim.com.br:80/ e a</p><p>do globo esporte é https://ge.globo.com:443/sp/santos-e-regiao/futebol/times/santos/. Se</p><p>Página 23 de 176</p><p>https://l.dev.pro.br/google-comunidade-devpro</p><p>https://l.dev.pro.br/site-do-pudim</p><p>https://l.dev.pro.br/globo-esporte</p><p>https://l.dev.pro.br/globo-esporte-pagina-do-santos</p><p>https://l.dev.pro.br/google-comunidade-devpro</p><p>https://l.dev.pro.br/site-do-pudim</p><p>https://l.dev.pro.br/globo-esporte-pagina-do-santos</p><p>você acessar os links acima, vai reparar que o navegador vai omitir as portas, mesmo que</p><p>elas estejam explicitamente definidas nas ulrs.</p><p>Portanto, analisando todos os sites que vimos até agora, temos as seguintes partes:</p><p>URL: http://www.pudim.com.br/</p><p>Protocolo: http</p><p>Domínio: www.pudim.com.br</p><p>Porta: 80</p><p>Path: /</p><p>Parâmetros: Não tem</p><p>Parâmetros: Não tem</p><p>URL: https://ge.globo.com/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Porta: 443</p><p>Path: /</p><p>Parâmetros: Não tem</p><p>URL: https://ge.globo.com/sp/santos-e-regiao/futebol/times/santos/</p><p>Protocolo: https</p><p>Domínio: ge.globo.com</p><p>Porta: 443</p><p>Path: /sp/santos-e-regiao/futebol/times/santos/</p><p>Parâmetros: Não tem</p><p>URL: https://www.google.com/search?q=Comunidade+DevPro&client=firefox-b-d</p><p>Protocolo: https</p><p>Domínio: www.google.com</p><p>Porta: 443</p><p>Path: /search</p><p>Parâmetros:</p><p>3. Nome: q Valor: Comunidade+DevPro</p><p>4. Nome: client - Valor: firefox-b-d</p><p>Eu gravei essa vídeo aula: As 5 PARTES de um link que TODO PROGRAMADOR</p><p>PRECISA SABER para você poder ver todos esses conceitos na prática. Ver o vídeo vai te</p><p>ajudar a entender mais profundamente todos esses elementos e onde eles se localizam em</p><p>seu navegador. É uma forma de fazer revisão ativa, como vimos no primeiro capítulo deste</p><p>livro. Por isso é importante assistir, acessar tipos diferentes de mídia sobre o mesmo</p><p>assunto ajuda no seu aprendizado!</p><p>Depois de ler essa seção e ver a vídeo aula, agora você conhece todas as partes de</p><p>uma URL: protocolo, domínio, porta, path e query string. Essas partes compõem os</p><p>endereços que acessamos na internet e seu formato é facilmente entendível por seres</p><p>humanos.</p><p>Contudo, computadores trabalham muito melhor com números e na próxima seção</p><p>vamos entender mais profundamente como esses nomes de endereços estão relacionados</p><p>com o chamado IP (Internet Protocol),</p><p>Página 24 de 176</p><p>https://l.dev.pro.br/site-do-pudim</p><p>https://l.dev.pro.br/globo-esporte</p><p>https://l.dev.pro.br/globo-esporte-pagina-do-santos</p><p>https://l.dev.pro.br/google-comunidade-devpro</p><p>https://l.dev.pro.br/aula-5-partes-de-um-link</p><p>https://l.dev.pro.br/aula-5-partes-de-um-link</p><p>Domínio, IP e Domain Server Name (DNS)</p><p>Como adiantado no final da seção anterior, computadores conectados à internet</p><p>possuem endereços numéricos que se chamam Internet Protocol (IP), cuja tradução literal</p><p>é Protocolo de Internet. Esse endereço é um número público que identifica cada dispositivo</p><p>conectado à rede mundial de computadores.</p><p>Inclusive você pode conferir o endereço de IP de seu computador, tablet ou celular</p><p>acessando o site https://www.whatismyip.com. Na figura 2.5 a seguir você pode ver um</p><p>exemplo de acesso a esse site:</p><p>Figura 2.5: Acesso ao site https://www.whatismyip.com</p><p>O endereço de IP possui duas versões em uso atualmente, a versão 4 e a</p><p>versão 6. Durante o acesso da imagem 2.5, pode ser constatado que o endereço de IP</p><p>versão 4 do dispositvo é 177.62.94.129 enquanto o de versão 6 é</p><p>2804:431:c7db:8874:c559:8d21:10a2:ba6b.</p><p>Normalmente, para dispositivos pessoais, esse endereço vai variar, sendo diferente</p><p>cada vez que você desconectar e reconectar o aparelho da internet. É através desse</p><p>endereço que outros computadores vão se comunicar com o seu enquanto estiver</p><p>conectado à rede de computadores.</p><p>Contudo, os seres humanos não são bons em memorizar números. Você até poderia</p><p>memorizar o IP na versão 4, mas seria difícil memorizar o de versão 6, que é tão grande</p><p>que possui até algarismos que são letras em vez de apenas números.</p><p>Por isso os endereços de IP podem ter “apelidos”, que são os domínios, que vimos</p><p>na seção anterior quando estudamos as partes de uma URL. Os domínios são mapeados</p><p>para endereços de IP por um serviço distribuído da rede chamado Domain Server Name</p><p>(DNS).</p><p>Página 25 de 176</p><p>https://l.dev.pro.br/what-is-my-ip</p><p>https://l.dev.pro.br/what-is-my-ip</p><p>Como os nomes de domínios devem ser únicos, existem organizações que ficam</p><p>responsáveis por subgrupos de domínios pelo mundo, normalmente começando com uma</p><p>entidade em cada país.</p><p>Por exemplo, a orgão responsável pelos domínios brasileiros, que terminam com</p><p>sufixo “br”, é o Núcleo de Informação e Coordenação do Ponto BR (NIC). Quem deseja ser</p><p>dono de um domínio brasileiro pode pesquisar a disponibilidade e comprar um domínio pelo</p><p>serviço Registro BR, fornecido pelo NIC. Por exemplo, segue o acesso ao Registro BR do</p><p>domínio dev.pro.br na figura 2.6:</p><p>Figura 2.6: Acesso ao site Registro BR</p><p>Uma vez que você seja o proprietário de um domínio, você pode usar qualquer</p><p>serviço de DNS para mapear os subdomínios. O Registro BR fornece o serviço de DNS,</p><p>mas existem outros, como o Route 53 da Amazon e o Cloudflare.</p><p>Com esse serviço</p><p>você poderá mapear seus domínios para endereços de IP ou até</p><p>mesmo para outros domínios, como mostra figura 2.7 a seguir</p><p>Página 26 de 176</p><p>https://l.dev.pro.br/nic-br</p><p>https://l.dev.pro.br/registr0-br</p><p>https://l.dev.pro.br/cloudflare</p><p>Figura 2.7: Acesso ao serviço de DNS do Cloudflare</p><p>Na figura 2.7 é possível ver que o subdomínio “blog” do domínio “dev.pro.br” está</p><p>apontando para o IP 162.159.152.4. Esse tipo de mapeamento feito direto para o IP versão</p><p>4 é do tipo A. Portanto, quanto acessamos https://blog.dev.pro.br, o navegador vai</p><p>consultar o DNS e chegar ao respectivo IP. É possível confirmar isso rodando o comando</p><p>ping no terminal, conforme imagem 2.8:</p><p>Figura 2.8: Uso do comando ping para saber o endereço de IP de blog.dev.pro.br</p><p>Todo domínio pode ter quantos subdomínios seu proprietário quiser. O</p><p>subdomínio é todo prefixo que se coloca na frente de um domínio, que ficam separados</p><p>pelo caractere “ponto”.</p><p>Por exemplo, também na figura 7 é possível ver que o subdomínio “forum” do</p><p>domínio “dev.pro.br” aponta para outro subdomínio, o “python.hosted-by-dicsourse.com”.</p><p>Esse tipo de registro é o CNAME, que significa Canonical NAME, cuja tradução é “Nome</p><p>Canônico”. Essa é uma forma de redirecionamento.</p><p>Nesse caso, o fórum da Comunidade DevPro é fornecido por uma empresa terceira,</p><p>a Discourse. Ela que fica responsável por fazer o mapeamento do domínio para um IP. é</p><p>possível usar o mesmo comando de terminal para saber o endereço de IP, conforme figura</p><p>2.9 a seguir:</p><p>Página 27 de 176</p><p>https://l.dev.pro.br/blog-devpro</p><p>Figura 2.9: Uso do comando ping para saber o endereço de IP de forum.dev.pro.br</p><p>Veja que nesse caso o comando mostrou o domínio de redirecionamento na</p><p>segunda linha (python.hosted-by-discourse.com) e também o endereço de IP versão 6</p><p>(2602:fd3f:0:ff06::111).</p><p>Existem alguns endereços de IP e nomes de domínios que são especiais. Nesse</p><p>início de aprendizado é necessário que você saiba dois desses casos.</p><p>O primeiro caso é o endereço de IP 127.0.0.1. Esse endereço especial aponta para</p><p>sua própria máquina e é utilizado quando você está testando uma aplicação web em seu</p><p>próprio computador.</p><p>O segundo exemplo é o domínio localhost. Esse domínio aponta para o endereço</p><p>de sua máquina local, ou seja, o IP 127.0.0.1. A tradução livre do termo é “anfitrião local”,</p><p>justamente por conta da máquina local estar sendo usada com um servidor.</p><p>Para você entender como acessar os serviços acima, comprar domínios, configurar</p><p>serviços de DNS e executar os comandos apresentados nessa seção, assista à aula Como</p><p>Funcionam os Domínios e endereços de IP. Lembre-se: consumir outro tipo de mídia te</p><p>ajuda a sedimentar o conhecimento e funciona como reforço de aprendizado!</p><p>Agora que você conhece em detalhes como funcionam os endereços na internet,</p><p>vamos construir nossa primeira página web e entender nossas primeiras linhas de código!</p><p>Como Funcionam as Páginas de Internet</p><p>Nesse ponto do seu estudo você já entendeu o fundamento sobre o que acontece</p><p>quando você digita uma URL em seu navegador, ou seja, ele vai enviar uma requisição</p><p>web que será atendida por um servidor que possui um número de IP.</p><p>O servidor então vai, a partir dos dados enviados, enviar uma resposta a essa</p><p>requisição, contendo dados que possuem em alguns formatos específicos, que o navegador</p><p>sabe interpretar e mostrar para o internauta no formato de páginas de internet.</p><p>Estas páginas estão organizadas em pastas e arquivos no servidor. Existem</p><p>diversos tipos desses arquivos como imagens, arquivos para download e outros tipos que</p><p>iremos estudar a seguir.</p><p>Entre esses arquivos está o HTML. Esse é o formato que o navegador consegue</p><p>interpretar e transformar nos elementos visuais que o internauta enxerga ao navegar em um</p><p>site.</p><p>Página 28 de 176</p><p>https://l.dev.pro.br/forum-devpro</p><p>https://l.dev.pro.br/aula-segredos-por-tras-dos-nomes-de-sites</p><p>https://l.dev.pro.br/aula-segredos-por-tras-dos-nomes-de-sites</p><p>Assim, quando fazemos a requisição para o site “pudim.com.br”, a resposta faz todo</p><p>caminho de volta, saindo do servidor até o navegador. Dentro desse pacote de dados é</p><p>enviado o código HTML, que então será transformado na página do pudim que já vimos no</p><p>início deste capítulo.</p><p>Esta página, na maioria das vezes não está completa, por isto o HTML é um dado</p><p>estruturado que o navegador precisa analisar e baixar todos arquivos necessários para a</p><p>página funcionar, antes de simplesmente mostrar os elementos na tela.</p><p>Para isso, o navegador pode fazer novas requisições para o servidor, solicitando</p><p>imagens e outros detalhes, visuais ou não, como arquivos CSS e JavaScript. Esses</p><p>arquivos serão todos estudados ainda nesse capítulo, mas neste momento você só precisa</p><p>saber que eles, junto com HTML, formam a base da internet. A figura 2.10 a seguir mostra</p><p>o modelo do gráfico do que foi descrito nessa introdução ao assunto.</p><p>Figura 2.10: Modelo de requisição e resposta</p><p>Veja a aula As 3 tecnologias que todo programador web precisa saber para entender</p><p>como funciona todo esse fluxo na prática!</p><p>Conhecendo esse modelo, vamos investigar a primeira tecnologia que é a base da</p><p>internet, o HTML.</p><p>Página 29 de 176</p><p>https://l.dev.pro.br/3-principais-tecnologias-da-web</p><p>Introdução ao HTML</p><p>HTML é a linguagem universal da internet. É utilizada para construir sites e</p><p>aplicações web. Foi criada na década de 90 e continua uma peça fundamental da internet</p><p>até os dias atuais. HTML significa Linguagem de Marcação de Hipertexto (do inglês</p><p>HyperText Markup Language) e consiste de tags (tradução do inglês é etiqueta, mas a</p><p>comunidade dev usa o termo tag mesmo), atributos e valores.</p><p>Tags dizem para os navegadores como os conteúdos serão exibidos, como <h1></p><p>para representar um título, <p> para representar um parágrafo ou <button> para desenhar</p><p>um botão. É um formato estruturado, ou seja, que contém estruturas muito bem definidas,</p><p>onde uma tag tem um início, fim e um valor. Além disso,as tags estão organizadas dentro de</p><p>uma hierarquia, ou seja, algumas tags são “filhas” de outras, o que significa que podem</p><p>estar “dentro” de outras.</p><p>Tags também são usadas para exibir imagens, links entre páginas ou criar botões. A</p><p>seguir, na figura 2.11, temos um exemplo de página web básica, com seu respectivo código</p><p>HTML.</p><p>Figura 2.11: Exemplo de código HTML e respectiva página web</p><p>Com o conhecimento básico do HTML vamos conseguir criar sites para serem</p><p>publicados na internet, para serem acessados de qualquer lugar do mundo. Esta é uma,</p><p>entre outras tecnologias, que iremos conhecer.</p><p>Página 30 de 176</p><p>Primeiras ferramentas necessárias</p><p>Inicialmente iremos precisar apenas de duas ferramentas para construir nossas</p><p>páginas: um editor de texto e um navegador (browser). Siga as instruções a seguir:</p><p>Editor de texto: No Windows, já vem instalado o editor de texto Bloco de Notas</p><p>(Notepad). Se você estiver no Linux, pode utilizar o gedit. Se você já tem costume de usar</p><p>outro editor de código, pode seguir com ele.</p><p>Navegador: Cada sistema operacional vem por padrão com um navegador. Por</p><p>exemplo, no Windows temos o Microsoft Edge e no Linux cada distribuição utiliza um</p><p>diferente. Porém é muito importante que você utilize o navegador Google Chrome. Ele é o</p><p>navegador mais utilizado atualmente e possui ferramentas que iremos usar daqui por</p><p>diante.</p><p>Como um desenvolvedor você vai precisar ter a habilidade de instalar programas no</p><p>seu sistema operacional, então já comece instalando o Navegador Google Chrome (caso</p><p>ainda não tenha ele instalado), faça uma pesquisa e descubra como fazer isto.</p><p>Agora que já temos as ferramentas necessárias, vamos construir nossa primeira</p><p>página na seção a seguir.</p><p>Olá mundo com HTML</p><p>Uma tradição no mundo de software é criar um olá mundo (do inglês, “Hello World”)</p><p>na tecnologia que estamos iniciando os estudos. O objetivo é fazer algo bem simples,</p><p>mostrar apenas uma mensagem, para entender o funcionamento básico da tecnologia.</p><p>Sendo assim, vamos criar nosso “olá mundo” em HTML. Vamos precisar criar um arquivo</p><p>de texto, que deve ser criado com os passos abaixo:</p><p>1) Abra o gerenciador</p>