Desenvolvimento da Web com Frontend moderna: HTML, CSS, Javascript, Sass e Typescript

1. Apresentação: Olá e bem-vindo à minha nova aula, desenvolvimento web de front-end moderno. Sou Christopher Dodd. Sou um dos melhores professores aqui no skillshare.com que, em 2018, publicou sua primeira aula do Skillshare, Understanding Web Development, que se tornou uma das aulas mais assistidas na categoria de desenvolvimento web da Skillshare. Embora os fundamentos que compartilhei na aula ainda se apliquem, as linguagens, ferramentas e tecnologias da web continuam evoluindo. HTML, CSS e JavaScript ainda são as linguagens de front-end essenciais, mas compiladores como Sass e TypeScript agora surgiram e ganharam popularidade, transformando a forma como CSS e JavaScript são escritos. As estruturas de JavaScript também surgiram e se tornaram muito populares com estruturas e bibliotecas como React, Vue e Angular. A propósito, se alguns desses nomes não são familiares para você, não se preocupe, nós os abordaremos na aula. Lá dentro, vamos ter uma visão mais moderna do desenvolvimento web de front-end, mergulhando em algumas das ferramentas mais populares em uso atualmente. Aprenderemos como escrever páginas da web com HTML, estilizá-las com CSS e Sass e introduzir interatividade e busca de dados via JavaScript e TypeScript. Se você estiver interessado em obter uma visão geral de como o desenvolvimento web de front-end moderno realmente funciona, continue assistindo e nos vemos por dentro. 2. Frontend vs Desenvolvimento Web Backend: Provavelmente, o conceito mais importante a ser entendido no desenvolvimento web é a diferença entre o front-end e o back-end. Abordamos isso em Entendendo o Desenvolvimento Web, mas é um conceito tão importante que eu queria relembrar aqui. Simplificando, o front-end é qualquer código que é reunido em seu navegador, ou seja, o programa que você usa para navegar na web. O código de back-end é basicamente todo o resto. Se voltarmos um pouco no tempo para quando a web começou, os sites eram simplesmente páginas de informações. Esse estilo de site, apenas uma página estática de conteúdo principalmente de texto com talvez algumas imagens, era a norma. Sem estilo sofisticado e interatividade mínima. Basicamente, a única interação que tivemos foram os hiperlinks, que eram partes dos textos destacadas em azul com um sublinhado sólido que, quando clicados, nos direcionavam para outro URL. Como isso aconteceria? Da mesma forma que é feito hoje com algo chamado linguagem de marcação de hipertexto, mais conhecida como sua sigla HTML, que é fornecida ao navegador para fornecer estrutura ao conteúdo baseado em texto e imagem. É aqui que podemos começar a ver a distinção entre o front-end e o back-end. Quando acessamos o endereço do site, dizemos ao servidor qual conteúdo deve nos servir, e esse conteúdo volta do servidor na forma de HTML. Esse HTML é então lido pelo navegador e renderizado em nossas telas como vemos aqui. Usando qualquer navegador moderno, podemos abrir outro painel para visualizar o código bruto real, geralmente muito conteúdo de texto dentro dessas coisas aqui, conhecidas como tags HTML. Atualmente, o front-end costuma ser muito mais complexo. Os sites são muito mais elegantes e têm muita interatividade. Em alguns casos, você está executando um programa de computador inteiro em seu navegador, e isso é conhecido como aplicativos da web. Exemplos comuns disso incluem Facebook e o Google Sheets. Se desativarmos o JavaScript em nosso navegador, você poderá ver que esses aplicativos deixam de continuar funcionando. O que dá estilo e interatividade ao seu site é CSS e JavaScript , respectivamente. CSS significa folhas de estilo em cascata e é colocado em camadas sobre HTML para transformar completamente a aparência do HTML padrão. JavaScript então fornece qualquer interatividade além de algumas noções básicas em HTML. Basicamente, qualquer interatividade fora dos hiperlinks e campos do formulário, como caixas de seleção, botões de opção e menus suspensos, exige que o JavaScript funcione. Assim como HTML, CSS e JavaScript são executados no navegador e, portanto, fazem parte do front-end. Para reiterar, o front-end é basicamente tudo o que acontece no seu navegador. Agora vamos comparar isso com o back-end, que pode ser infinitamente mais complexo. O back-end de um site é o que é executado no servidor e abrange qualquer programação que acontece nos bastidores para fornecer o HTML, CSS e JavaScript apropriados ao navegador. O back-end geralmente é responsável por interagir com bancos de dados, determinar se o usuário está autorizado a acessar determinadas informações e, em seguida, fornecer esses dados entre o código de front-end necessário de HTML, CSS e JavaScript para o navegador. Para demonstrar isso, vamos interagir com uma das páginas mais visitadas na Internet, google.com. Como você pode ver aqui, eu tenho o google.com carregado no meu navegador, que é o Google Chrome. Eu prefiro o Google Chrome e é o que vou usar nesta aula. Eu o recomendo para desenvolvedores, um navegador muito bom por causa das ferramentas de desenvolvedor que ele possui. Mas, é claro, se você não gosta do Google, você não vai gostar do Google Chrome, que eu entendo perfeitamente. Qualquer navegador da web que você queira usar para esta aula é bom, no entanto, usarei o Google Chrome durante toda a aula. A razão pela qual eu carrego isso como anônimo, aqui você pode ver, é para que eu não esteja logado automaticamente. Eu só quero demonstrar a você o estado desconectado e , quando começarmos a falar sobre back-end, mostrarei a versão logada. Aqui você pode ver que ele reconhece , por meio do armazenamento da sessão ou dos cookies armazenados em nosso navegador, que eu não estou conectado no momento , então posso clicar aqui para “ Entrar”. Vou apenas clicar em “Não, obrigado” aqui. Vamos começar a interagir com nosso código de front-end aqui. Agora, se você se lembra do que acabei de dizer, o servidor entrega HTML, CSS, JavaScript para o navegador, e o navegador reúne tudo isso. Esse HTML, JavaScript e CSS são todos códigos de front-end. Como está montado no navegador, podemos realmente visualizar todo o código bruto. O que vou fazer é clicar na Opção Command I em um Mac para abrir as ferramentas do desenvolvedor. Isso aqui é chamado de DevTools e, se eu clicar nele, posso ver todos os diferentes painéis dentro dessas ferramentas de desenvolvedor. Este aqui é o console JavaScript, que veremos mais adiante. Aqui eu quero clicar em “Elementos” e vou fechar essa parte aqui embaixo. Aqui em cima você pode ver todo o HTML e aqui embaixo você pode ver todo o CSS que dá estilo a esta página. Agora, como tudo isso está acontecendo em nosso navegador, podemos realmente modificar isso rapidamente. O que posso fazer é clicar nessa coisa aqui e depois mouse sobre os diferentes elementos da página para vê-los no código. Agora, se eu clicar em um deles, vamos clicar nesse botão, você pode ver que esse código aqui é, na verdade, o que determina esse botão aqui. Como você pode ver na tag HTML, há muitas coisas acontecendo aqui. Obviamente, esse não é um exemplo básico, é google.com. Mas o que eu quero que você note aqui é que neste campo de valor temos a Pesquisa do Google, que se relaciona com o texto que aparece no botão. O que eu posso fazer aqui é realmente editá-lo para que, em vez da Pesquisa do Google, eu possa simplesmente mudar isso para Pesquisar e você pode ver as mudanças do botão. Aqui no CSS, eu posso realmente remover certos atributos. Se você ver aqui, esse estilo se aplica a esses dois botões, se eu passar o mouse sobre ele, você pode ver que ele está se aplicando a esses dois botões. Eu posso me livrar do raio da fronteira. Eu poderia fazer algo como mudar a cor do texto para chocolate desse jeito e, como você pode ver, o estado do mouse é um pouco diferente. Mas quando não estiver passando o mouse, pelo menos, a cor do texto será chocolate. Essa imagem aqui tem duas maneiras de fazer isso: eu posso clicar nela e depois clicar no elemento, ou eu posso clicar com o botão direito do mouse sobre ela e clicar em “Inspecionar”, que é minha forma preferida de fazer isso. Você provavelmente vai me ver fazendo isso com mais frequência na aula. Você verá que essa tag img aqui, que é uma tag de imagem em HTML, é o que renderiza essa imagem aqui. Como você pode ver aqui, há um src e se eu clicar com o botão direito do mouse aqui e “Abrir em uma nova guia”, você pode ver que temos o arquivo de imagem real do Google aqui. Obviamente, isso é google.com. Eles têm muitas outras coisas malucas aqui. Eles têm todos esses códigos estranhos aqui que estão dentro do atributo de classe aqui. Mas o que estou tentando transmitir para você aqui é que todo o código de front-end, todo o HTML, o CSS e o JavaScript. É mais difícil interagir com o JavaScript. Mas se eu entrar na cabeça aqui, posso realmente pesquisar aqui e depois posso encontrar put.js, que representa um arquivo JavaScript e talvez haja muito código aqui. Talvez eu consiga encontrar um arquivo JavaScript externo, não está realmente aparecendo. Mas aqui você pode ver que dentro dessas tags de script, que é o que usamos para inserir algum código JavaScript, há um código JavaScript aqui, que podemos realmente copiar ou simplesmente olhar para ver o que está acontecendo na página. Mas o exemplo do JavaScript é muito mais difícil com HTML e CSS. É muito mais fácil determinar o que está acontecendo porque você tem esse painel aqui, que mostra todos os estilos que se aplicam a essa tag de imagem e você pode realmente inserir a etiqueta de imagem real. Se eu clicar aqui para computá-lo, você poderá começar a ver alguns dos estilos computados e, se clicarmos aqui, poderemos ver onde está o conjunto, então a fonte de Ariel está realmente definida em todo o corpo do documento, que é basicamente o documento inteiro. Se eu clicar aqui, você poderá ver todas as fontes mudarem para o padrão, o que eu acredito ser Times New Roman ou algo parecido. Ou podemos mudar a cor padrão do corpo para outra coisa. Mas isso não substituirá lugares em que fomos específicos para elementos específicos. Não vai substituir essas cores ou essas cores. Mas isso é sobre a especificidade do CSS em um conceito mais avançado. O que quero dizer é que , quando acessamos google.com, recebemos o código de front-end nosso navegador e nosso navegador está reunindo isso aqui. Toda a interatividade que acontece agora após o carregamento da página está no front-end. É o HTML que dá estrutura à página e na verdade, coloca os elementos na página. É o CSS aqui que determina a aparência, o layout e é o JavaScript que nos fornecerá qualquer funcionalidade. Na verdade, vamos ver se podemos. Se eu clicar nisso, há um painel que se abre aqui. É possível que seja apenas CSS, mas provavelmente está vindo do JavaScript. Se eu clicar aqui, “Pesquisar por imagem ”, você verá que um painel está se abrindo aqui e então eu posso clicar aqui, “Carregar um arquivo”, no meu sistema de arquivos, que a interatividade está acontecendo no front-end sem que recarreguemos a página. Agora, uma coisa que você notará é que, quando eu atualizo a página, essas alterações desapareceram. O que é interessante, mas obviamente faz sentido. Posso voltar aqui e alterar isso para simplesmente pesquisar novamente. Mas é claro que o Google não nos permitirá mudar seu site para todos. Sempre que você estiver recebendo código de um servidor para o seu navegador, você pode modificá-lo. Mas é claro que isso não será salvo servidor real do Google e alterado para todos. Isso só está acontecendo na sua versão que você retirou do servidor no momento em que visitou o endereço. Se eu atualizar novamente aqui, ele será retirado do servidor novamente e agora você pode ver que está entrando repentinamente no modo escuro e também está determinado que estou gravando isso na Austrália. Isso é um pouco mais de magia do Google. Mas agora o que vou fazer é abrir o Google em uma nova janela, uma janela não anônima. Aqui você pode ver que temos uma experiência semelhante, mas a diferença é que você pode ver que estou logado no momento. Você pode ver meu nome, meu e-mail, que está oculto para fins de privacidade. É meu e-mail padrão. Você pode entrar em contato comigo no meu e-mail de trabalho, é claro, mas não no meu e-mail pessoal, por favor, respeite isso. Mas aqui você pode ver meu nome e minha foto aqui e de onde isso vem? Obviamente, isso vem de um banco de dados e esses dados são especificamente para mim. Como estou logado, em outras palavras, estou autorizado a acessar esses dados, agora tenho minha foto de perfil, nome e e-mail nesta página. Isso vem do back-end e de todas essas operações e coisas que eu posso ver e mexer no navegador. Coisas como autorização, coleta de dados, descoberta de quais dados fornecer, tudo isso é coisa de back-end. Porque se fosse feito no front-end para começar, seria um grande pesadelo de privacidade. Você não quer que eu possa acessar sua conta do Google ou a conta do Google de outra pessoa. A conta do Google de todos precisa ser separada. Como você pode ver, isso vem do back-end e é no back-end que a mudança permanente real acontece em um aplicativo como esse. A questão é que temos nosso código de front-end. Podemos entrar aqui. Podemos modificá-lo o quanto quisermos. Eu poderia até mudar minha foto de perfil aqui para outra imagem. Como você pode ver aqui, eu posso ir diretamente para a imagem aberta em uma nova guia. Na verdade, posso ir diretamente para a imagem. Eu poderia simplesmente substituir esse URL aqui no HTML por alguma outra imagem, e isso atualizaria a imagem. Eu posso mudar meu nome. Vamos ver. Se eu entrar aqui. Isso vai me mostrar todas as minhas contas. Se eu arrastar isso para que você possa ver que está bem aninhado. Eu poderia até mudar meu nome para Michael Jackson, por exemplo. Então, se eu clicar aqui, agora sou Michael Jackson. Eu posso modificar todo esse código de front-end, mas é claro que ele não vai modificar o back-end. O back-end é o que está nos servindo de HTML, CSS e JavaScript. Toda vez que fazemos uma solicitação ao servidor, atualizando aqui, e eu clico aqui, eu volto a ser Christopher Dodd porque ele está recuperando esses dados do usuário conectado do back-end do Google e os inserindo com o HTML, o CSS, o JavaScript, para criar a experiência de front-end, que é então montada em seu navegador. Espero que, por meio desse exemplo, você possa ver isso funcionando no mundo real, a distinção entre front-end e back-end. Gosto de usar esse exemplo porque acho que ele realmente demonstra a distinção entre os dois. Como podemos ver aqui, não há nenhum código de back-end aqui. Não consigo acessar diretamente o banco de dados. Claro, isso seria um grande pesadelo de segurança. O back-end é tudo isso, todos os detalhes da minha conta, operações mais complexas. A única coisa que aparece no front-end é a estrutura da página, o estilo da página e qualquer interatividade que precise acontecer sem recarregar a página. Você pode ver aqui que eu posso abrir este painel e alguns dos estilos aqui são modificados JavaScript está realmente fazendo isso por nós porque não estamos realmente recarregando a página. Estamos obtendo alguma interatividade de front-end. Eu posso abrir isso e obter meus aplicativos. Vou deixar isso aí, pessoal. No próximo vídeo, na verdade, vamos escrever pouco de HTML e, em seguida, vamos construir sobre isso com CSS, JavaScript e, em seguida, algumas das ferramentas de pré-processador que estão sobre essas linguagens. Te vejo no próximo vídeo. 3. HTML: Como aprendemos no último vídeo, HTML é a linguagem de marcação padrão para a web. Linguagem de marcação de acordo com a enciclopédia Britannica, ou seja, sistema de codificação de texto padrão, que consiste em um conjunto de símbolos inseridos em um documento de texto para controlar sua estrutura, formatação ou relação entre suas partes. Os símbolos de marcação podem ser interpretados por um dispositivo, computador, impressora, navegador, etc., para controlar a aparência de um documento quando impresso ou exibido em um monitor. Um documento marcado, portanto, contém dois tipos de texto. Texto a ser exibido e a linguagem de marcação sobre como exibi-lo. Acho que essa é uma descrição muito boa. Em HTML, como em outras linguagens de marcação, temos tags e , em seguida, temos o conteúdo da tag entre elas. Essa tag aqui com o sinal menor que e o sinal mais que representa uma tag HTML padrão. Na maioria dos casos, entretanto, alguns textos virão depois dele. Então, essa tag HTML padrão com uma barra após o sinal de menor que indica que esse é o fim do conteúdo desse elemento HTML específico. Também podemos aninhar elementos em outros elementos e você verá isso o tempo todo em HTML. É um sistema em que os elementos são projetados para serem colocados em outros elementos para criar uma estrutura semelhante a uma árvore apropriadamente chamada de árvore de documentos. Podemos ver qualquer estrutura HTML como uma árvore usando uma ferramenta como esta Live DOM Viewer. Mas, em vez de nos aprofundarmos em qualquer teoria aqui, vamos realmente escrever um pouco de HTML e vê-lo funcionando em ação. O editor de código que vou usar para a aula de hoje se chama Visual Studio Code. É muito popular porque tem basicamente todas as funcionalidades de um editor de código pago totalmente gratuito da Microsoft. Muitas pessoas o estão usando , inclusive eu. Não vejo nenhuma razão para usar um editor de código diferente. Mas é claro que se por algum motivo você quiser fazer essa aula em um editor de código diferente, você pode fazer isso. Algumas das instruções serão um pouco diferentes, mas na maioria das vezes você pode usar qualquer editor de código que quiser acompanhar. Se ainda não temos o Visual Studio Code instalado, basta pesquisar no Google. O Visual Studio Code, como você pode ver, é desenvolvido pela Microsoft, data de lançamento inicial de 2015. Já existe há algum tempo, mas foi nos últimos, eu diria, de 3 a 5 anos que se tornou muito popular. Aqui você pode ver que foi detectado que estou usando um Mac, então eu posso simplesmente clicar aqui para baixar a versão apropriada para o meu sistema operacional. O que eu vou fazer é voltar para o Visual Studio Code. Na verdade, vou passar para a janela do meu Finder aqui e vou criar um novo projeto para a aula de hoje. Vou chamá-lo apenas de Desenvolvimento Web Moderno. Então, a partir daqui, o que eu posso fazer é, como diz aqui, abrir um arquivo ou pasta usando esse atalho. Então, vou usar o atalho e, em seguida, navegar até a pasta de código e abrir essa pasta. Agora temos nosso projeto vazio. Vou atualizar o código do Visual Studio mais tarde. E aqui eu posso clicar aqui ou clicar com o botão direito do mouse em “Novo arquivo” e criar um index.html. Há uma razão pela qual eu o chamei de index.html. Índice geralmente significa que essa é a página inicial ou o arquivo raiz de um endereço e, em seguida, o extension.html indica qual arquivo é. Por que isso é importante é porque, quando executamos um servidor, ele procura o arquivo de índice quando estamos na rota raiz ou no URL raiz. Deixe-me demonstrar isso muito rápido. Deixe-me digitar um pouco de HTML apenas para começar e depois voltaremos a ele. Vamos fazer olá mundo entre algumas tags h1. Vou clicar em “Salvar” nisso. A forma recomendada de carregá-lo em seu navegador para começar é se acessarmos o Google Chrome e eu abrir o Finder, podemos literalmente arrastar esse arquivo HTML para o Google Chrome e ele o carregará. Pronto, temos nosso título dizendo olá, mundo. Nesse caso, não importa como chamamos nosso arquivo. Eu poderia renomeá-lo para page.html. Se eu clicar aqui, ocorrerá um erro porque o caminho foi alterado, um erro porque o caminho foi alterado, mas se eu alterá-lo aqui para page.html, tudo bem. Mas se fizéssemos algo como executar um servidor , aqui embaixo temos esse botão para clicar para executar um servidor ativo. Isso é uma extensão. Se formos até aqui para extensões, você poderá ver as extensões que eu instalei. É chamado de Live Server de Ritwick Dey. Se você quiser instalar isso, provavelmente o usaremos mais tarde na aula. Se fizermos isso e clicarmos em “Transmitir ao vivo” , ainda obteremos o page.html. Mas se formos para a raiz, esse endereço, você verá que ele não carrega. Se quisermos que a página seja carregada na raiz do nosso endereço, precisamos garantir que ela seja chamada de índice. Se eu clicar em “Salvar”, atualize aqui, você pode ver que não há nenhuma especificação do nome da página porque, com o index.html, ela será carregada na raiz do endereço. Como estamos executando um servidor aqui, temos um endereço IP e uma porta. Eu não quero me aprofundar muito nessas coisas aqui. Eu não quero te atrapalhar em teoria. Na verdade, vamos entrar em um pouco de HTML. Vou simplesmente descartar esse servidor. Vamos voltar ao que tínhamos antes, que era executá-lo a partir do sistema de arquivos. Como você pode ver aqui, diz aqui que você está visualizando um arquivo local ou compartilhado e aqui temos nosso documento HTML. O que eu vou fazer é fechar isso. Vamos tentar colocar os dois na mesma tela, desse jeito. Então, vamos realmente nos livrar disso, salvar, atualizar aqui e você pode ver que não temos nada agora. Vamos começar com um pouco de HTML. Vou fechar o Explorer aqui, aumentar o tamanho aqui, que fique mais fácil de ver. Na verdade, podemos obter algum conteúdo padronizado HTML apenas digitando HTML no Visual Studio Code e então eu posso obter esse código padronizado, o que é chamado de código padronizado. Se eu diminuir o zoom, você pode ver. Não vamos fazer isso para começar, porque estamos aprendendo HTML no momento. O que vamos precisar são duas coisas. Vamos precisar de uma etiqueta de cabeça e uma etiqueta corporal. Precisaremos de uma etiqueta de fechamento para ambas , porque vamos aninhar coisas dentro delas. Vamos abrir uma etiqueta na cabeça. Você pode ver que o Visual Studio Code nos ajuda com prático preenchimento automático e nos fornece a referência do MDM. Vamos lá. Se eu pressionar isso, ele cria automaticamente a tag de fechamento para mim, que, como discutimos anteriormente, é exatamente a mesma, mas tem essa barra antes da palavra. Vou entrar e pressionar “Enter” e isso abrirá bem formatado com recuo aqui. Isso é apenas formatação, para que o código seja mais fácil de ler. Então eu desço e crio o corpo e obtenho a mesma coisa. Se eu clicar em “Enter”, isso fornecerá um bom recuo para nós aqui. Se quisermos que algo apareça na página, precisamos colocá-lo em nossas marcas corporais. Se eu devolver o que tínhamos antes. Vamos fazer isso sem o h1. Vou apenas dizer olá, mundo, apenas um pouco de conteúdo de texto básico , atualize aqui, você verá que ele aparece. O cabeçalho é responsável por tudo o que é mais meta para o documento. Estamos falando sobre o título do documento, referências a arquivos CSS que podemos trazer, informações de SEO, coisas assim. Coisas que não aparecem na página, mas ainda são importantes para o arquivo HTML. O exemplo mais comum aqui é o título. Eu posso criar essa tag de título e entre a tag de título de abertura e fechamento, vamos colocar um título. Você pode chamar isso do que quiser, minha primeira página da web. Se eu clicar em “Salvar”, quero que você perceba, veja na guia aqui apenas o nome do arquivo. Bem, agora, se atualizarmos, você verá que ela vai aparecer como minha primeira página da web. Portanto, isso é para o usuário, mas também para os mecanismos de pesquisa do Google. Qualquer coisa que esteja inserindo ou incorporando a página em outro site. Como se você fosse compartilhar esta página no Facebook, por exemplo, agora você está informando o documento e dizendo à web qual é o nome da página. Por enquanto, isso é tudo que vou fazer com a etiqueta na cabeça. Vamos até o corpo aqui. Como você viu antes, eu criei um H1. Um H1 é um título de seção, então vamos executá-lo e seguida, clicarei em “Atualizar” aqui e, como você pode ver, obtemos um estilo pronto para uso. O que é um H1 é um título de alto nível, então ele vai até H6, eu acredito. Sim, aqui você pode ver até H6. Se não o tivermos definido em nosso CSS, obteremos um estilo padrão com o H1 sendo o maior, e então, se tivéssemos um H6 e um conjunto, chamaremos isso de título de sexto nível. Atualize aqui. Você pode ver que provavelmente é ainda menor do que se digitássemos um texto normal. Sim, é ainda menor do que textos normais, o que é um pouco estranho, mas você entendeu. Desde o H2, título de segundo nível, como você pode ver, e pronto para uso, ele vem com um estilo básico. Mas é importante observar aqui que você deseja usar os títulos certos, mesmo fora do estilo, porque isso é apenas um sinal de boa formatação para o Google. Na verdade, o Google examinará uma página da web e determinará se ela está estruturada corretamente, então você sempre quer usar essas tags de cabeçalho corretamente. se você estiver escrevendo um documento, você tem seu título superior e se quiser criar um título abaixo dele, seria Título 2, e se você quisesse criar um título abaixo dele, seria Título 3. Ainda use o título correto, mesmo se você estiver trabalhando com estilos diferentes. H1-H6 é uma tag muito comum. Eu vou me livrar desse H6 aqui. Em vez de texto normal, vou mostrar outra tag popular chamada tag de parágrafo. No Visual Studio Code, posso simplesmente digitar Lorem, clicar em “Tab” e ele inserirá Lorem ipsum. Se eu clicar em “Salvar”, atualize aqui, você verá que obtemos este parágrafo. Agora, o que é importante entender em HTML é que, a menos que o alteremos, estamos criando um estilo pronto para uso com HTML. Deixe-me abrir isso e então eu posso te mostrar no DevTools. Se eu clicar em “Opção Comando I” em um Mac. Agora podemos ver o código de saída aqui. É exatamente o mesmo que temos aqui, mas agora podemos ver isso chegando no navegador e podemos realmente interagir com ele. Na verdade, podemos entrar e mudar palavras como fizemos no exemplo do Google e podemos fechar e expandir tags como essa. Mas também podemos ver os estilos computados. Se passarmos o mouse sobre essa tag P aqui, você poderá ver a laranja aparecendo acima e abaixo do parágrafo. Não consigo passar o cursor ao mesmo tempo em que o mostro. Mas você pode ver à esquerda que você tem P, ele mostra suas dimensões e, em seguida, mostra espaço laranja acima e abaixo que é, na verdade preenchimento. Podemos verificar isso acessando Computado aqui e observando isso, o que é chamado de modelo de caixa. Você pode ver aqui que temos, na verdade não é preenchimento, estou corrigido, é margem. As margens são um pouco diferentes. Não abordaremos o modelo de caixa nessa classe em particular, mas eu o abordo na minha aula de HTML e CSS aqui no Skillshare, então você pode conferir essa. Mas, como você pode ver aqui, temos alguma margem por padrão. Se entrarmos no segundo título, também podemos ver que temos alguma margem por padrão. Mas também temos alguns outros padrões aqui, como o tamanho da fonte ser 50% maior e o estilo de exibição ser em bloco. Entraremos em estilos mais tarde. Mas eu só quero indicar aqui que quando escrevemos HTML sem nenhum CSS, estamos recebendo CSS de graça. Estamos recebendo um pouco de CSS por padrão. Aqui em nosso H1, você pode ver que temos um tamanho de fonte que é 2em, que é uma unidade. Obviamente, isso é meio em a mais no H2. Mas tudo isso é completamente editável com CSS , são apenas padrões em HTML. Aqui você pode entrar em estilos e ver a folha de estilo do agente do usuário, que é como a folha de estilo padrão. Isso pode mudar dependendo do navegador que você está vendo. Mas então você também pode entrar em Computado aqui, e este botão aqui mostrará de onde isso vem. Eu acredito que o peso da fonte também é ousado e isso faz uma diferença. Mas só para avançar um pouco aqui, podemos mudar isso para um peso de fonte menor. Ainda é um H1, mas simplesmente não tem esse estilo padrão H1. Então, é importante saber isso. Vamos abordar algumas das outras tags comuns que você verá em HTML. Como mencionei nos vídeos anteriores, uma tag comum é a tag A, que é o hiperlink. É apenas um simples A. Temos nossa etiqueta de encerramento aqui. Queremos colocar isso do outro lado do texto, queremos um hiperlink. Se eu clicar em “Salvar”, atualize aqui, geralmente devemos obter um estilo padrão. Mas acho que, como ainda não temos um href , precisamos realmente inserir, e esse será nosso primeiro atributo. Podemos adicionar atributos à tag de abertura, não à tag de fechamento, à tag de abertura e, como você pode ver aqui, href contém a URL ou o fragmento para o qual o hiperlink aponta. É isso que estamos procurando. Se eu abrir isso, não importa o que eu coloque aqui. Vamos colocar um hash que é o espaço reservado normal, e então eu clico em “Salvar”, atualizo aqui, você me verá agora obter o estilo padrão para um hiperlink. Nosso cursor muda. Recebemos os textos azul e sublinhado. Isso é uma escola muito antiga. Normalmente, esse estilo é substituído por muitos sites, mas esse é o estilo clássico de um hiperlink. Acabei de abrir o DevTools novamente aqui e vou colocá-lo aqui. Acho que podemos ver os três ao mesmo tempo. Como você pode ver aqui, como mencionei, a cor é o link do webkit, que é uma variável, e nosso cursor será ponteiro e vamos colocar esse sublinhado. Você pode ver aqui, ou se entrarmos em Computado, geralmente essa é a cor real computada ali e o estilo do ponteiro do cursor. Novamente, podemos entrar aqui, o que veremos mais tarde, e mudar isso para outra coisa. Cursor, podemos fazer uma mira, por exemplo. Quando você tem um link, você pode mudar para esse cursor em forma de cruz aqui. Podemos definir isso como quisermos com CSS. A questão é que temos um estilo padrão pronto para uso. Agora, antes de criar esse arquivo chamado page.html, vamos realmente voltar e colocar esse em page.html e vamos ficar bem preguiçosos com ele aqui. Vamos colocar novamente Hello World sem nenhuma tag HTML. Mas eu só quero mostrar aqui que podemos realmente criar um link para essa página aqui e, se eu atualizar aqui, clique nela, então você verá que está um pouco apertada. Mas você pode ver aqui que isso nos direcionará para page.html. Se eu estender isso até o fim, vamos voltar para aqui e talvez aqui coloquemos um link e o enviemos de volta para index.html. Vá para casa. Agora, se eu atualizar aqui e clicar em “Go Home”, isso nos levará de volta ao index.html. Agora podemos vincular dois arquivos. Vou remover o page.html, que era apenas para indicar um hiperlink. Vamos apenas deletar isso. Mova isso para o lixo. Tudo isso é muito básico, pessoal, se vocês estão muito avançados para isso, fiquem vontade para pular em frente. Mas vamos abordar mais algumas tags HTML agora. Como mencionei antes deste vídeo, o que podemos fazer é adicionar uma imagem também e vimos que, no exemplo do Google, era apenas uma tag IMG e esta é uma tag de fechamento automático. Na verdade, não precisamos ter uma tag de fechamento para isso, porque tudo o que precisamos fazer, no mínimo, é fornecer o endereço da imagem que queremos mostrar, e fazemos isso por meio do atributo SRC e , entre essas aspas duplas, colocamos o link para uma imagem. Esta é apenas uma imagem de espaço reservado e, em seguida, vou fechá-la com o sinal de menos que. Esse é o sinal maior do que, então você coloca isso no final e obtém uma tag HTML bem formada. Vamos lá, atualize aqui e aqui você pode ver que há um pouco de tempo de carregamento para que a imagem seja carregada dessa fonte externa, agora está armazenada em cache, então não será carregada novamente. Mas agora você pode ver que temos nossa imagem de espaço reservado aqui. Se inspecionarmos isso, você verá que temos, não, não obtivemos nenhuma margem com isso. Vamos encerrar esse aqui. Deixe-me estruturar este documento de forma um pouco diferente. Nós temos, vamos colocar aqui um parágrafo de Lorem Ipsum. Vamos colocar isso lá. Deixe-me expandir isso. Colocaremos a imagem aqui sob o título do segundo nível. Vou chamar esse texto com imagem. Clique em “Salvar”, atualize aqui. Você pode ver agora que temos esta seção aqui embaixo. Vou colocar uma tag extra aqui de hr, que é uma regra horizontal que acho que representa, e ela apenas criará uma linha entre os trechos do conteúdo. Salve, atualize aqui, você verá que isso cria essa linha. Então, o que vou fazer é colocar outro parágrafo de texto aqui e, em seguida, acrescentar algo apenas para demonstrar uma citação em bloco. Isso é principalmente uma tag semântica, mas com uma citação. O que quero dizer com semântica é que não há muito estilo, então é principalmente apenas a nomenclatura. Posso dizer aqui uma citação : “Homem sem carro não vai muito longe”. Uma das minhas citações favoritas. Como você pode ver aqui, parece exatamente o mesmo, mas com apenas alguns recuos. Se eu fosse abrir minhas ferramentas de desenvolvimento novamente, role para baixo e clique com o botão direito aqui, você pode ver que acabamos um atributo aqui chamado margin-block-start, que fornece essa margem à esquerda de 40 pixels. Então você tem esses 16 pixels na parte superior. Na verdade, você também tem 40 pixels à direita, então é isso que dá a ela essa funcionalidade recuada aqui ou uma aparência recuada, e então colocaremos outro parágrafo no final, atualizaremos aqui e você poderá ver. Vamos criar uma nova seção aqui. Crie outro h2 aqui. Vamos chamar isso de parágrafo e lista. Agora, mostrarei uma estrutura HTML comum aqui. Podemos abrir uma lista ordenada ou uma lista não ordenada. A lista não ordenada é normalmente mais comum, então eu vou para ul, que significa lista não ordenada, abri-la e, em seguida, criaremos uma tag LI aninhada para todos os itens da lista dentro da lista. Primeiro item, veremos isso em nossa tela em apenas um segundo, segundo item e terceiro item. Se eu clicar em “Salvar” aqui, na verdade esquecemos de colocá-lo em um parágrafo aqui. Novamente, só mais um pouco de Lorem ipsum. Clique em “Salvar”, atualize aqui e, como você pode ver, temos nossa lista aqui. Se eu fosse inspecionar novamente, que não farei desta vez porque acho que você entendeu, haverá um estilo aplicado a isso que lhe dará esse ponto e o recuo. Automaticamente, também há algum estilo no UL. Se quisermos criar uma lista ordenada que é apenas para numerá-la, podemos substituir o u por um o. Atualize aqui, e você pode ver se deveríamos adicionar um quarto item, ele automaticamente aparece como quatro. Guarde isso, vou mover isso de volta para cá agora, atualizar aqui, e o quarto item automaticamente tem um quatro na frente. Por fim, mostrarei alguns campos do formulário, que é a maior funcionalidade pronta para uso que você pode obter com o HTML. Vamos criar, vou chamar esse parágrafo com forma e depois colocarei um pouco de Lorem ipsum aqui. Mas depois do parágrafo de Lorem ipsum, vou colocar um formulário. Agora, a forma como os formulários funcionam é que podemos enviar os detalhes que definimos aqui para um endereço específico, e fazemos isso por meio do atributo action. Aqui, se eu inserir entradas intermediárias aqui e enviar esse formulário, ele enviará os dados para um URL específico. É assim que você costuma usar formulários. Mas, por enquanto, vou mostrar as entradas reais em si. O primeiro que vou te mostrar é um texto. Essas são etiquetas de fechamento automático. Não precisamos encerrar isso. Vou apenas colocar o tipo de texto de entrada e isso é o suficiente para fazê-lo funcionar, basicamente. Se eu atualizar aqui, você pode ver que temos essa caixa aqui que agora temos alguma interatividade. Eu posso colocar o que eu quiser aqui, olá mundo. Eu tenho essa caixa de texto editável. Também posso colocar um valor aqui, então, quando ele carrega, já tem algum texto nele. Aí está. Mas é claro que é uma entrada, então eu posso alterá-la. Eu também poderia, me livrando desse valor aqui, mudar isso para um campo numérico, que ficará basicamente o mesmo se eu atualizar aqui. Mas agora você pode ver essas setas para cima e para baixo. No momento, estou digitando caracteres aqui, não está funcionando. Eu tenho que digitar um número. Só aceitará um número, e então eu posso subir e descer. Esse é um campo numérico. O número 1 que podemos fazer é atualizar a caixa de seleção aqui, e você pode ver que posso clicar nela para ligá-la e desativá-la. Obviamente, isso realmente não faz muito sentido. Normalmente, o que fazemos é usar um rótulo. Posso criar um rótulo, colocar a caixa de seleção dentro do rótulo e escrever algum texto aqui. Digamos que é como um formulário em que você concorda com algo. Vou apenas dizer que concordo. Então, se eu clicar no rótulo, ele também marcará a caixa de seleção. Vamos continuar criando botões de rádio. Agora, os botões de rádio são um pouco mais complexos porque precisamos dar um nome a todos para que saibamos que estão relacionados. Vou chamar isso de Rádio 1 e vamos o que devemos dizer aqui de Opção 1, vou chamá-la apenas de Opção 1. Vamos precisar de vários deles. Vou copiar e colar. Na verdade, vamos reduzir um pouco o zoom, para que possamos ver tudo aqui. Opção 2. Queremos manter isso como Rádio 1, então eles estão vinculados. Vou clicar em “Salvar”, atualize aqui. Agora, com rádios, a diferença entre isso e as caixas de seleção é que, se eu selecionar uma e depois selecionar outra, ela remove a seleção da primeira. Ele faz isso porque eles estão no mesmo grupo. Se eu criasse ou duplicasse esses dois, e chamássemos esses dois de Radio 2 no campo do nome , eles seriam vinculados entre si. Se eu entrar nesse primeiro grupo e selecionar aqui, isso removerá a seleção do outro rádio do grupo. Se eu for até aqui, esse é um grupo separado, então ele não será removido do primeiro, a menos, é claro, eu tenha esquecido de mudar isso, e agora temos o mesmo grupo. Mas então teríamos que escrever essa Opção 4. Coisas muito básicas, mas apenas fornecendo uma visão geral de alguns componentes comuns em HTML. Também temos a área de texto, que é bem básica. Na verdade, é uma tag em que tem uma tag de fechamento, e o conteúdo do espaço reservado que podemos colocar na área de texto é o que colocamos entre as duas tags. Vamos colocar um pouco de Lorem ipsum em uma área de texto. Como você pode ver aqui, podemos realmente expandir essa caixa, o que é interessante. teremos que fazer mais formatações Normalmente, teremos que fazer mais formatações sobre isso, mas aqui você pode ver que temos um pouco de Lorem ipsum basicamente em um campo de texto de várias linhas. Isso também pode ser redimensionado. Podemos começar com um determinado conteúdo, começar com o Lorem ipsum e depois modificá-lo. Essa é a área de texto. Finalmente, o que vou mostrar é selecionar, e é assim que criamos um menu suspenso. Temos nossa seleção e, por dentro, queríamos opções de ninhos. Novamente, vou pegar a Opção 1, colar em uma duplicata, a Opção 2 e a Opção 3 aqui. O selecionado atualmente será o primeiro por padrão. Se eu atualizar aqui, você verá que temos um menu suspenso com a primeira opção selecionada automaticamente. Está saindo da tela. Deixe-me remover um pouco disso. Vamos fazer até aqui. Salve, atualize aqui. Se eu clicar aqui, você verá que podemos selecionar opções diferentes neste menu suspenso. Se quisermos selecionar uma opção diferente da primeira, podemos colocar um atributo opcional aqui, basta selecionar, pronto. Atualize e você verá a Opção 2 agora está selecionada por padrão, mas podemos alterá-la aqui. Isso é o que quero dizer com interatividade sem JavaScript, isso é padrão em HTML, e essa é uma versão muito Web 1.0 do desenvolvimento web. Deixe-me explicar essa afirmação um pouco mais. Web 1.0 é basicamente a primeira versão da web, que era muito parecida com essa. Era apenas um layout vertical com apenas títulos, parágrafos, formulários e listas, tudo o que fizemos neste vídeo. Foi muito básico. Não havia muito estilo. passar do tempo, agora existe esse termo, Web 2.0, que fala sobre a web atual fora de todas as coisas de blockchain que estão acontecendo, que agora tem esse rótulo de Web 3.0. Web 2.0, que é o que estamos usando agora, é mais layouts bidimensionais com muito mais interatividade fornecida pelo JavaScript. Na Web 1.0, eram apenas sites que exibiam informações. Tudo o que você precisava era desse conteúdo semântico, como um título de nível superior, um parágrafo e, em seguida, um formulário para aceitar alguns dados. Coisas muito básicas que também vinham com um estilo pronto para uso , que vimos antes quando as inspecionamos, todo o estilo que vem de fábrica. Isso é basicamente um desenvolvimento web em estágio inicial. Você realmente não vê, como você sabe, muitos sites com essa aparência agora, mas essa é a aparência padrão do HTML sem nenhum estilo. No próximo vídeo, vamos realmente estilizar nossa página da web, falar sobre CSS. Obviamente, CSS é um tópico importante, mas faremos apenas uma breve visão geral você possa entender como podemos realmente estilizar o que criamos neste vídeo e construir com base no que aprendemos sobre HTML. Te vejo no próximo vídeo. 4. Exoneração de responsabilidade rápida: Oi, pessoal. Eu só queria incluir um vídeo extra aqui como um pequeno aviso, porque acabamos de falar sobre HTML, que é bem básico e abordamos muito do que você pode fazer com HTML. Não há muitas, há apenas um agrupamento de tags dentro de outras tags, não é muito complicado. Mas, à medida que começarmos a entrar em CSS, JavaScript e outros conceitos, ficará muito mais complexo muito rápido. E muitos desses tópicos podem ser um curso por si só. Na verdade, algumas delas são, e eu vou fazer referência a essas outras aulas durante o resto da aula. Mas eu só queria deixar esse aviso aqui porque faço aulas de Skillshare há tempo suficiente para conhecer algumas das críticas que posso receber nas avaliações. Eu só queria ter certeza de que esta é uma aula para todos os níveis. No início, entramos no básico, entramos em HTML, falamos sobre CSS básico, mas você pode começar a ver a complexidade aumentar à medida que começamos a entrar em Sass, Tailwind, JavaScript, especialmente TypeScript, e depois passamos para estruturas de JavaScript, incluindo a extração de informações de APIs. Apenas na ordem em que eles aparecem, aqui estão apenas alguns detalhes extras que falam amplamente sobre os tópicos sobre os quais falaremos para o resto da aula. CSS, vamos falar sobre layouts porque eu acho que os layouts são a coisa mais complexa em CSS. Se você quiser que a cor de um texto específico seja vermelha , você pode definir a cor vermelha. Espero que não seja muito complicado de entender, mas layouts são um conceito totalmente novo. Vamos falar sobre o Flexbox, vamos falar sobre a grade CSS. Mas saiba que há muitos estilos diferentes no CSS. Se você quiser se aprofundar nisso, há uma aula aqui no Skillshare que eu criei chamada Fundamentos de Desenvolvimento Web, HTML e CSS. Depois da aula de CSS, falaremos sobre Sass e também abordaremos algo chamado Tailwind CSS mais tarde na aula. Como escrevi aqui, talvez seja necessário desenvolver alguma experiência com CSS para entender os benefícios dessas ferramentas extras. Como direi ao longo desta aula, HTML, CSS e JavaScript são as únicas linguagens de front-end que são executadas no navegador e são as únicas essenciais para aprender. Mas é claro que temos todas essas outras ferramentas como Sass, como Tailwind CSS, TypeScript, Vue. Esses são os que vamos falar nesta aula. Eles apenas se sentam no topo para ajudar os desenvolvedores. Para entender os benefícios deles, talvez você precise de alguma experiência com a coisa subjacente que eles estão tentando produzir. Em termos de estilo, seria CSS, em termos de funcionalidade, seria JavaScript. Passando para o JavaScript, vamos apenas arranhar a superfície desta classe e, em seguida, mergulhar no TypeScript e no Vue. Ele se move muito rápido quando chegamos à parte do JavaScript. Se você quiser fazer uma pausa quando chegarmos à aula de JavaScript e nos aprofundarmos no JavaScript, eu tenho uma aula completa sobre JavaScript, chamada Fundamentos de Desenvolvimento Web em JavaScript. Você pode conferir esse. Novamente, para entender os benefícios do TypeScript, que também tenho aqui, você precisará de alguma experiência com projetos de front-end mais complexos. Na verdade, é difícil encontrar um exemplo muito básico para usar o TypeScript, porque o benefício do TypeScript só se torna aparente quando você começa a trabalhar com projetos de front-end mais complexos. Então, finalmente, veremos o Vue.js. O Vue.js é apenas um exemplo de estrutura de front-end reativa. Você deve se sentir confortável com DOM Navigation and Event Listeners antes aprofundar em qualquer estrutura de front-end , como Vue, React, Angular, etc. Se você quiser saber mais sobre esses conceitos, especificamente, mergulhe nos Fundamentos de Desenvolvimento Web em JavaScript, minha aula aqui no Skillshare. Apenas um lembrete aqui, os únicos elementos essenciais do front-end são HTML, CSS e JavaScript. Todas as outras ferramentas estão lá apenas para ajudar no desenvolvimento dessas três. Além disso, qualquer outra ferramenta, discutida ou não nesta aula, pode entrar e sair de popularidade. O cenário está mudando constantemente e você pode utilizar essas ferramentas a seu próprio critério. Os únicos elementos essenciais, conforme está escrito aqui, são HTML , CSS e JavaScript. Então, eu só queria publicar este vídeo de isenção de responsabilidade apenas para abordar qualquer das possíveis preocupações que eu possa ver rapidez com que avançamos para o resto do curso. Se você estiver preso em um determinado estágio e quiser aprender mais sobre ele, pode ir para outra aula no meu canal Skillshare aqui e descobrir um mergulho profundo em muitos desses tópicos. Caso contrário, você pode ver outros tutoriais ou simplesmente pular essa lição por completo. Se não for a lição de HTML, CSS e JavaScript, fique à vontade para ignorá-la completamente. O objetivo desta aula é fornecer uma visão geral de algumas das ferramentas populares em uso atualmente, para que você possa escolher seu próprio empreendimento depois disso, como a aula original, entendendo o desenvolvimento web. Então, eu só queria deixar isso claro antes de seguirmos em frente. Sem mais delongas, vamos para o resto da aula. 5. CSS: Neste vídeo, vamos apresentar o CSS. CSS pode ser um curso por si só, e é por isso que eu tenho um curso dedicado ao Skillshare sobre HTML e CSS. Neste vídeo, abordaremos apenas o básico e como ele se aplica ao HTML, seguindo este exemplo que compartilhamos no último vídeo. Agora eu mostrei duas maneiras de carregar nosso HTML. Podemos fazer isso por meio do sistema de arquivos, como o Search, ou por meio de um servidor. Vou passar a entregá-lo por meio de um servidor neste vídeo. Um dos grandes benefícios de fazer isso é, em vez de ter que atualizar todas as vezes, então, se eu criar uma alteração aqui, terei que clicar em Salvar neste documento depois atualizar neste documento. Para ver a mudança, podemos facilmente eliminar essa etapa executando nosso Live Server, que, como mostrei no último vídeo, se eu abrir minhas extensões aqui, Live Server de Ritwick Dey. Se você quiser instalar isso, tudo o que você precisa fazer em sua versão do Visual Studio Code é digitar Live Server aqui, pesquisá-lo, ele aparecerá , clicar nele e clicar em Instalar. Extensões super fáceis de instalar no Visual Studio Code. Vou fechar essa guia e clicar aqui para entrar no ar. Isso vai abri-lo. Aqui você pode ver que tem index.html no final. Nem precisamos disso, podemos removê-lo e ele saberá o que é a página da web porque o índice representa o endereço raiz de um site. Vamos demonstrar isso agora. Se entrarmos aqui, eu chamar essa segunda opção em vez da opção 2 e clicar em Salvar. Você pode ver que não precisamos atualizar aqui porque é recarregado a quente, muito legal e prático para desenvolvimento. Agora vamos trazer um arquivo CSS. Na verdade, podemos criar algo chamado de tag de estilo aqui e colocar CSS aqui e ele se aplicará à página em que está. Mas vamos fazer isso da maneira mais limpa, que é colocar nosso CSS em um arquivo diferente. Vou abrir o Explorer aqui, criar um novo arquivo e chamá-lo de styles.css. Você pode chamá-lo como quiser, desde que seja got.css no final, pois isso indicará ao Visual Studio Code e ao navegador da web que se trata de um arquivo CSS. Agora, queremos vincular esse arquivo CSS ao nosso documento HTML e podemos fazer isso na tag head. Vou criar um link com um atributo rel com o valor de stylesheet, que informará à página que estamos trazendo uma folha de estilo, e depois href, que é o caminho para a folha de estilo. Como os dois estão no mesmo diretório, um ao lado do outro, tudo o que precisamos fazer é digitar styles.css, o nome do arquivo, clicar em Salvar nele. Para testar se isso está funcionando, vamos até aqui e escrever nosso primeiro estilo. O que podemos fazer aqui é fazer um reset. Agora você vê que temos margens e preenchimento que vêm automaticamente do HTML. O que podemos fazer é colocar esse asterisco aqui, eles o chamam de Seletores Wildcard. Então podemos colocar estofamento, colocar muitos Ds lá. Preenchimento, podemos definir como zero e a margem podemos definir como zero por padrão em todos os elementos. Como você pode ver aqui, definitivamente podemos ver que nossa vinculação da folha de estilo funcionou aqui porque isso agora está se aplicando. Se eu entrei aqui e inspecionei minha tag h1, você pode ver que nosso estilo padrão que tínhamos aqui foi substituído pelo asterisco selecionado aqui. Parece que tudo isso é margem, não preenchimento, mas se eu clicar nessa caixa de seleção aqui, posso ativá-la e desativá-la. A outra coisa que podemos fazer aqui é adicionar nossos próprios estilos diretamente no navegador por meio do Chrome DevTools. Eu posso entrar aqui e deixar eu colocar tudo na cor azul. Este não é um exemplo muito prático , mas como você pode ver aqui, podemos realmente mudar a cor e testar as coisas em nosso navegador. Agora, se eu atualizar a página aqui, isso não será salvo novamente em nosso documento, mas podemos experimentar diferentes CSS em tempo real em nosso navegador. Só precisamos ter certeza de que fazemos assim, então digamos que fizemos a cor de tudo sendo azul, então teremos que ter certeza de que podemos simplesmente pegar essa cópia e colá-la. Só teremos que nos certificar de colocá-lo em nossa folha de estilo e salvá-lo, que ele chegue ao navegador. Só funciona de uma maneira, não de outra maneira. Se criarmos alterações aqui , elas não serão salvas aqui. Só queria observar isso. Na verdade, vou remover isso e vamos falar sobre os principais conceitos em CSS e HTML. Aqui você pode ver tudo se acumular em cima de si mesmo. Você tem o h1 e não há conteúdo depois dele, é todo esse tipo de layout vertical. Mas é claro que temos algumas exceções aqui. Se eu colocasse um pouco disso em uma tag de link, a tag a e colocássemos um hash aqui como espaço reservado, você pode ver que isso é o que chamamos de embutido a tag a e colocássemos um hash aqui como espaço reservado, . Se eu inspecionar aqui para computá-lo, você pode ver que o estilo de exibição é embutido, mas todo o resto, o estilo de exibição é, por padrão, bloco, há apenas alguns elementos em HTML que funcionam em linha, mas na verdade existem vários tipos de exibição diferentes. Podemos fazer grade, podemos fazer Flexbox. Esses são os tipos de exibição CSS mais modernos e são muito usados agora no desenvolvimento web moderno. Vamos falar sobre isso. Como mencionei, a Web 2.0 é mais um layout bidimensional. O que eu vou fazer é remover isso. Vamos começar com um elemento básico comum para criar layouts em HTML, que é a tag div. Aqui podemos ler que o elemento div não tem nenhum significado especial. Ela apenas representa seus filhos. É uma tag muito ampla que, por padrão, tem um estilo de exibição de bloco. Vou colocar Lorem Ipsum na minha primeira div e novamente, Lorem Ipsum na minha segunda div aqui. Vou clicar em Salvar. Como você pode ver aqui, é um pouco difícil dizer, mas eles são um bloco de exibição. Se olharmos aqui, exiba o bloco, mas simplesmente não há margem por padrão. Mas se eu estender isso, você pode ver que um se acumula em cima do outro. Vamos fazer algo como entrar aqui e definir um estilo. Na verdade, posso direcionar tudo isso simplesmente colocando div aqui, abrindo colchetes para colocar nossos estilos. Vamos dar a todos os nossos divs uma borda de um pixel sólido para que possamos ver a separação deles. Aqui você pode ver que temos dois divs e, por padrão, eles são blocos de exibição, o que significa que eles se empilham um sobre o outro. Agora, se eu fosse entrar aqui e definir um tipo de exibição diferente. Vamos exibir em linha. Agora você pode ver que, se eu estender isso, eles não estão contidos em dois blocos, então agora estão tentando se sentar alinhados um com o outro. Então, o terceiro tipo comum na fila não é tão comum. Na verdade, podemos usar o bloco em linha. Como você pode ver aqui, eles se empilham um em cima do outro. Adicione aqui uma largura máxima de 300. Salve, eles se empilharão uns sobre os outros a menos que haja espaço suficiente para ficarem lado a lado. Se eu voltar para aqui, em linha, você pode ver o que temos. O bloco embutido é como um bloco, mas os blocos acabam ficando próximos um do outro se houver espaço suficiente. Se eu diminuir essa janela, você pode ver que elas voltam a se empilhar umas sobre as outras. Vamos remover isso e tentar criar um layout de duas colunas. Eu quero ter um elemento para a barra lateral. Crie uma barra lateral aqui e depois uma para o conteúdo principal. Agora, se eu clicar em Salvar nisso, novamente, bloco de exibição por padrão, um fica em cima do outro. Na verdade, vamos entrar aqui. Para diferenciar esses dois divs porque queremos estilizá-los separadamente, o que podemos fazer é usar um ID ou uma classe. O ID é reservado para um único elemento, então, se eu entrar aqui, posso criar uma barra lateral de atributo de ID. Se eu fizer isso, não posso fornecer um ID de barra lateral para nenhum outro elemento, caso contrário, as coisas começarão a quebrar. Aqui, posso fazer uma aula como alternativa e chamá-la de Main. A grande diferença entre classe e ID é que, com classe, eu poderia ter outro div chamado Main. Se eu fosse copiar e colar isso, eu poderia ter outro div chamado Main e tudo bem. Já que eu não poderia ter dois divs com um ID igual. Essa é a diferença entre ID e classe. Quando estamos desenvolvendo experiências de front-end, na maioria das vezes estamos usando aulas, mesmo que esperemos usá-las apenas uma vez. A aula funciona bem na maioria das situações. Vou chamar isso de barra lateral mas, na verdade, antes de fazer isso, vou mostrar como segmentamos um ID em nossa folha de estilo aqui. Usamos o hash para uma barra lateral de ID. Em seguida, colocaríamos nossos estilos aqui, e isso teria como alvo apenas o elemento com o ID da barra lateral. Para Main, o que faremos porque ele tem uma classe principal. Usamos um ponto, so.main e agora estamos segmentando todos os elementos que têm uma classe de Main. Eu só vou fazer essas duas aulas, então vá aqui. Barra lateral da classe. Vamos até aqui e depois colocar um ponto aqui, porque agora na aula, vamos fazer com que eles se sentem um ao lado do outro. Deixe-me colocar de volta, eu quero ver essas bordas para que possamos vê-las facilmente, contornar um pixel sólido, elas possam ver e agora o que vamos fazer é a barra lateral, eu não quero ser maior do que, vamos torná-la uma largura de 300 pixels. Então, aqui o que eu posso fazer é dar a ele uma largura maior de 500 pixels, você verá que eles ainda estão empilhados um em cima do outro. Vamos aqui e vamos, para os dois, criar este bloco embutido de exibição, atualizando seu comportamento padrão de bloco de exibição. Agora, como você pode ver, ainda está se acumulando um sobre o outro , provavelmente porque eu não deixei espaço suficiente. Vou fazer da área principal 400. Obviamente, isso depende da largura do seu navegador. Se eu estender aqui, você pode ver que eles se empilham lado a lado, vamos fazer 200 e esses 400 e agora você pode ver que a barra lateral está à esquerda e o conteúdo principal está à direita. Agora, o que eu quero fazer é colocar a barra lateral nivelada nos cantos e a razão pela qual ela não está fazendo isso atualmente é se olharmos, então temos esse painel aqui, se eu colocar isso de lado e olhar para a etiqueta corporal aqui, veja computada, na verdade tem uma margem padrão de oito pixels. Como você pode ver aqui, margem inferior oito, margem esquerda oito, margem direita oito, margem superior oito. Na verdade, vamos entrar aqui e eu vou direcionar todo o corpo, não há nenhum ponto ou hash que vá antes dele porque ele tem como alvo um elemento e, em seguida vou simplesmente remover a margem padrão, então vou dizer margem zero. Então você pode ver a margem ao redor de todo o corpo, o documento inteiro agora foi removido. Agora, aqui estamos usando larguras de pixels, que não são muito responsivas porque a altura ou as dimensões da janela de visualização, como na janela em que estamos vendo esta página, podem ser modificadas. O que eu quero é que essa barra lateral seja tão alta quanto o espaço disponível, então o que eu posso fazer é colocar um atributo de altura aqui e eu posso usar uma unidade chamada altura da janela de visualização, e esse número antes da altura da janela de visualização é a porcentagem da altura da janela de visualização que eu quero usar. Quero usar o espaço total disponível, vou clicar em “Salvar” e agora, como você pode ver, a barra lateral agora está altura total na altura total da janela que estamos vendo. Se eu fechasse isso , aumentaria o tamanho da janela e, como você pode ver, ela diminuirá totalmente, é isso que queremos da nossa barra lateral. Então, também podemos fazer aqui, é um pouco mais complicado com o bloco em linha, mas eu posso realmente usar algo chamado calc para fazer uma expressão matemática. Na verdade, posso fazer a outra unidade de largura da janela de visualização. Posso pegar a largura da janela de visualização e remover as 200 que precisamos para a barra lateral. Clique em “Salvar” e, como você pode ver, não funciona exatamente. Precisaremos refinar isso um pouco, talvez reduzir isso em 250, 210 e é aqui que bloqueio em linha fica um pouco complicado. Então, se formos até aqui, você pode ver que ela continuará se estendendo até o fim , terá 100% da largura da janela de visualização menos 250. Como você pode ver aqui na seção principal, ele está fazendo esse cálculo para cada tamanho de tela. Agora, como mencionei, o bloco embutido é um pouco complicado e não é realmente usado no desenvolvimento web moderno. O bloco embutido é antigo, muitas pessoas agora usam Flexbox ou grid, então vamos dar uma olhada em como faríamos isso no Flexbox. Aqui, não precisamos colocar o bloco de exibição em linha nos elementos individuais; em vez disso, o que vou fazer é entrar no índice aqui e criar um div, que envolverá esses elementos para criar o layout. Vou chamar isso de contêiner de página, podemos colocar um traço aqui para separar as palavras e, em seguida, vou recortar e colar isso dentro do nosso contêiner de página. Esse contêiner de página é o que nos dará o layout, então só precisamos estilizá-lo. Vamos entrar aqui no contêiner de página, você vai colocá-lo acima da barra lateral principal e da ordem, e eu vou definir o estilo de exibição, este é o pai desses dois para flexionar. Vou clicar em “Salvar” nisso. Apenas colocando o display flex, automaticamente obtemos o conteúdo lado a lado e flexionado em nossas telas. Se removêssemos essas larguras, o que vou fazer agora e clicássemos em “Salvar”, você ainda verá que as obtemos lado a lado, mas ele não sabe quanto espaço disponível usar. O que podemos fazer dentro da barra lateral é flexionar 1 e dentro da principal também, eu quero usar o flex 1. Podemos ter uma rota flex 1 quanto mais específica a flexão crescer. Isso é, como diz aqui, o fator de crescimento. Depende de quais outros elementos estão nesse contêiner. Mas se eu clicar em “Salvar”, você verá que agora temos um layout responsivo de duas colunas. Se eu fosse mover isso, você pode ver agora porque crescimento está definido para um em ambos, ambos terão a mesma largura e crescerão até o espaço disponível, então cada um deles terá a metade. Mas podemos mudar a proporção aqui, que vou fazer e quero a barra lateral tenha três vezes menos largura, então vou fazer a principal crescer por um fator de três. Então, como você pode ver aqui, quando eu aumentar, a seção principal crescerá três vezes mais do que a barra lateral do que você pode ver aqui. Mas queremos dar a essa barra lateral uma largura mínima porque teremos conteúdo nela, então o que vou fazer é adicionar o que é chamado de base flexível e quero que seja o que tínhamos antes, 300 pixels. Estou indicando que quero que tenha 300 pixels, aqui você pode ver que agora está estendendo isso e então eu posso ir aqui para definir o fator de encolhimento, vou dizer zero, que significa que ele nunca encolherá abaixo de 300 pixels, 300 pixels é um pouco grande demais, então vamos lá, 150 corresponderá à metade disso. Então, quando eu posso resumir todos esses três atributos em um atributo, eu posso simplesmente flexionar, o primeiro é crescer, o segundo é reduzir e o último é a base flexível. Eu posso substituir todos os três por aquele. Eu vou fazer isso. Clique em “Salvar” nisso. Você vê que obtemos o mesmo resultado. Agora, se eu clicar aqui, deve haver 150, o que, como você pode ver, é um pouco maior que 150, porque o fator de flexão ainda é um. Eu vou aqui e mudar crescimento para zero e isso vai garantir que ele nunca fique maior ou menor do que 150. Na verdade, tem 152 aqui, se eu for computá-lo, você pode ver que temos a borda de um em cada lado, então se quiséssemos que fosse exatamente 150, teríamos que remover a borda, o que eu acho que podemos fazer agora. Vou me livrar dessa borda ao redor dos desenvolvedores, clicar em “Salvar ” e, se olharmos para a barra lateral, será 150. Agora, para diferenciar a barra lateral da seção principal, vamos dar a ela um pouco de cor de fundo e vamos deixar a cor de fundo bege. Você pode ver que temos nossa barra lateral, nunca será menor ou maior que 150 e, em seguida, a área de conteúdo principal se expandirá para qualquer espaço disponível. Ele ficará próximo a isso dentro deste contêiner de página. Espero que isso faça sentido com o Flexbox. É uma maneira muito boa, responsiva e flexível de criarmos layouts bidimensionais. Mas, na verdade, existe uma maneira mais nova de fazer layouts em CSS: por meio do tipo de grade de exibição, que há alguns anos não estava disponível em todos os navegadores, mas se a verificarmos hoje em dia. Se pesquisarmos, posso usar no Google e clicar neste primeiro link, podemos realmente ver quanta adoção um recurso tem. Vamos usar a rede elétrica. layout de grade CSS, você pode ver que é amplamente adotado, é suportado pelo Chrome desde 2017, o Firefox é suportado desde 2017, mas tem essa aparência, então sim, é bem suportado. Se você olhar aqui, ele é suportado basicamente por 96,25% dos usuários em todo o mundo, então está pronto para a maioria dos casos de uso. Com qualquer um desses recursos modernos lançados, talvez você queira verificar se o compara ao Flexbox. Você tem o modelo flexível, pois 99,05% de todos os navegadores se adaptaram a isso. Essas são algumas das mais recentes, mas a grade CSS já existe há algum tempo. Como você pode ver, Chrome já a suporta há muitos anos, então você deve ser muito gentil usando a grade de exibição. Para demonstrar a grade de exibição, o que vou fazer é criar outra div aqui e chamar esse cabeçalho, para possamos colocar um cabeçalho que na barra lateral e no conteúdo principal. Agora, como você pode ver, porque eu o configurei dentro deste contêiner de página que atualmente está configurado como flexível, e ele terá todos eles na mesma linha. Se eu quiser ativar o rap, posso digitar flex wrap wrap e , se um deles ficar muito grande, digamos que queríamos nosso cabeçalho alvo aqui. Digamos que eu quisesse fazer do cabeçalho a largura, metade da tela que você pode ver e então digamos que tínhamos uma base flexível de metade da tela aqui também e uma redução flexível, então não terá menos da metade da largura da tela de zero, então você pode ver que ela será forçada a entrar em uma nova linha, mas na maioria das vezes, quando fizermos algo assim, vai empilhar tudo em uma linha. De qualquer forma, isso é Flex-box. Passando do Flex-box, vamos agora mudar isso para grade e agora teremos um estilo de grade, então isso vai se empilhar um sobre o outro porque ainda não configuramos nosso layout de grade, então definimos isso como pai. Vou me livrar desses atributos de caixa flexível e vou me livrar da altura aqui para me livrar da largura 50 e agora temos nossos três divs aqui. Vamos formatá-los criando nosso modelo de coluna, então criamos nosso div, podemos usar colunas de modelo de grade e fazemos isso por meio de frações. Vou criar algo semelhante ao que tínhamos antes, uma coluna que é uma fração e depois a segunda com três frações, clique em Salvar e, como você pode ver, agora temos o mesmo sistema que tínhamos antes, onde a primeira coluna é três vezes menor que a segunda coluna. Se eu clicar aqui, você pode realmente ver a grade, então, se eu clicar no contêiner da página, que é onde está a grade de exibição, podemos realmente ver as linhas da nossa grade. Mas o problema aqui é que nossa seção de cabeçalho que queremos estender pela barra lateral e principal está nessa primeira coluna, depois passa para a próxima div, que vai para a próxima coluna e, em seguida, a terceira div se que vai para a próxima coluna e, em seguida, a terceira encaixa e vai para a mesma primeira coluna. Não queremos isso, então o que vamos fazer é entrar aqui e digitar início da coluna da grade e queremos que comece na primeira linha da grade. Se voltarmos para aqui, a primeira linha aqui, quando ela aparece, é a primeira linha da grade, que logo ali está a segunda linha da grade e, do outro lado, aqui está a terceira linha da grade. Quero que comece com um e, em seguida, possamos ir para o final da coluna da grade e terminar na terceira linha da grade se eu clicar em Salvar nela . Agora você pode ver que o cabeçalho se estende pelas duas colunas, que é o que queremos. Na verdade, podemos organizar isso, podemos combiná-los em um atributo chamado coluna de grade e, em seguida, podemos fazer uma barra três para demonstrar a mesma coisa que basicamente resume os dois que tínhamos antes, início da coluna da grade e fim da coluna da grade, colocamos em um atributo separado aqui por uma barra. Agora temos o mesmo problema antes ou não, mas a mesma situação anterior, em que definimos a segunda coluna três vezes maior do que a primeira coluna, o que significa que, quando aumentamos a largura da janela, estamos fazendo com que o conteúdo da barra lateral cresça estamos fazendo com que o conteúdo da barra lateral um fator de três vezes menos. Para esta primeira coluna, vou agrupar isso em um mínimo e máximo, que me permite definir uma faixa de tamanho, então vou fazer o mínimo como automático e o máximo como 150 PX exceto isso e agora você pode ver que a primeira coluna nunca será maior que 150. Agora, o que eu também posso fazer é colocar um estilo aqui para a lacuna da grade, e isso criará uma lacuna entre os itens da grade. Vamos colocar uma lacuna entre colunas e linhas, então, se formos até aqui, você pode ver que agora temos essa área roxa que nos mostra a lacuna entre colunas e linhas. Outra coisa que temos aqui é o contêiner da página tem a largura mínima, pode ser basicamente, queremos fazer com que essa largura seja 100 e altura 100% para cobrir o espaço disponível, então, como você pode ver aqui, agora, o contêiner da página está cobrindo todo o espaço. Mas agora você pode ver que o cabeçalho é simplesmente muito grande, então o que vamos fazer é colocar linhas em um modelo de grade e colocaremos para a primeira linha, 150 para o cabeçalho e depois a segunda. Vamos fazer 1 fr, ver como isso funciona, acho que 150 é muito alto, então vamos fazer 50, lá vamos nós. A primeira linha será 50 e depois a segunda será todo o resto , e agora você pode ver que a vantagem disso é que agora temos a barra lateral estendendo o corredor até a página, e só para deixar o cabeçalho super óbvio, vamos dar a ela uma cor de fundo também. Não será a mais sexy, mas vamos criar uma bela cor de fundo, digamos cinza escuro, clique em Salvar nisso. Agora você pode ver que temos nosso cabeçalho na linha superior, nossa barra lateral e nosso conteúdo principal. Agora eu gosto dessa lacuna de grade entre a barra lateral e o conteúdo principal, mas quero que esse cabeçalho fique alinhado com a barra lateral, então o que precisaremos fazer é, em vez da lacuna na grade, é uma lacuna de coluna e agora você pode ver que não há espaço entre as linhas, mas há uma lacuna entre as colunas, aí você pode ver. Usando esses estilos, podemos configurar um pequeno layout de grade e , se eu clicar fora dele, você pode ver que ele responde e funciona independentemente do tamanho da janela do nosso navegador. Como você pode ver aqui, nosso layout bidimensional agora está começando a tomar forma. Novamente, há muita coisa que podemos abordar com CSS, podemos colorir certos elementos, adicionar bordas, adicionar o raio da borda, podemos alterar o tamanho da fonte, a família da fonte, obviamente todas essas coisas óbvias, mas as coisas que talvez sejam menos óbvias e mais web 2.0 são essas coisas de layout. O material do layout é muito importante e fundamental para criar layouts e menos óbvio do que simplesmente dizer quero que o texto tenha uma determinada cor. Qualquer um pode entender que configurar layouts responsivos é a parte complicada com HTML e CSS, e é nisso que me concentrei neste vídeo. Podemos simplesmente pesquisar no Google se quisermos algo específico, como colocar essa fonte em negrito, como fazemos isso? É bem simples, mas essas coisas são as mais complicadas. Como você pode ver, isso é muito diferente da última lição em que acabamos de ter esse conteúdo de estilo básico que ficava um em cima do outro em um formato de informação básico Agora estamos começando a criar layouts com CSS e migrando mais para esse espaço da web 2.0. Mas por falar em desenvolvimento web moderno, algo que é realmente importante é garantir que nosso site tenha uma ótima aparência em dispositivos móveis. Obviamente, muitas pessoas usam sites em seus telefones atualmente, por isso é essencial ter um bom layout móvel. É sempre melhor garantir que nosso site seja responsivo e funcione bem em qualquer dispositivo por padrão, mas há momentos em que precisamos criar um estilo específico para uma largura de tela específica. Deixe-me mostrar como fazer isso agora, então eu não queria fechar isso, só quero que ele o mova para o lado. Deixe-me movê-lo para cá. Se clicarmos neste pequeno ícone aqui, podemos alternar a barra de ferramentas do dispositivo. Agora podemos usar diferentes dispositivos aqui. Vamos fazer o iPhone Pro 12. Também podemos clicar aqui para usar diferentes tamanhos de tela, podemos fazer um tablet de 768 pixels de largura, um celular grande, um celular médio e um celular pequeno de 320 pixels de largura, que eu acredito que quase ninguém tem atualmente, de qualquer maneira. Aqui podemos ver que tudo está apenas ampliado, então não é o melhor. O que eu quero fazer aqui é adicionar uma meta tag especial aqui na nossa cabeça. Eu só vou colá-lo. Vamos dar uma olhada nisso. Na verdade, observe o que eu fiz depois de clicar em “Salvar”. Você pode ver que ele ampliou um pouco mais agora e é mais adequado aos nossos layouts móveis ou à nossa janela de visualização móvel. Basicamente, a tag é meta com o atributo de nome da janela de visualização e esse conteúdo à direita, largura é igual à largura do traço do dispositivo, escala inicial 1. Agora, esse é o padrão. Eu não digitei. Acabei de copiar e colar porque você simplesmente coloca isso em qualquer documento HTML e obterá esse recurso. É muito básico. Não precisa entrar em detalhes sobre como escrever isso. Você pode simplesmente copiar e colar isso e ele funcionará. Estamos aqui agora em nossa versão móvel, e você pode ver que temos tudo igual aqui. Talvez queiramos diminuir a barra lateral no celular, mas, nesse caso, precisaremos de todo o espaço possível. Vamos remover essa barra lateral completamente no celular. Como fazemos isso em CSS é usando uma consulta de mídia. Começamos com um símbolo at, digitamos a mídia e, em seguida, precisamos abrir os colchetes e especificar uma largura mínima ou máxima. Um equívoco que você pode ter aqui é que você pode pensar que eu coloquei algo como um dispositivo e depois coloquei o iPhone e apliquei isso a todos os iPhones. Mas na verdade não é assim. Na verdade, precisamos especificar uma largura. Temos que determinar em qual ponto de interrupção queremos que essa mudança ocorra. Agora, como você pode ver, podemos ver esses diferentes dispositivos e quais larguras eles têm. Mas um padrão comum é mudar o layout no tablet. Em 768 é o ponto de interrupção padrão do tablet. Mas podemos determinar o ponto de interrupção da maneira que quisermos. Podemos até mesmo sair do modo responsivo aqui e simplesmente reduzir nossa janela, testá-la, ler o que está aqui e escrever algumas consultas de mídia. Nem sempre precisa ser para dispositivos móveis. Mas aqui o que podemos fazer é criar uma largura máxima de 768 pixels, abrir colchetes e agora colocar um CSS normal que só será aplicado quando a largura for 768 ou abaixo da janela de visualização. Deixe-me entrar aqui, abrir um seletor de classe para a barra lateral e definirei o estilo de exibição como nenhum. Clique em “Salvar” nisso. Agora você pode ver que a barra lateral sumiu. Se eu abrisse isso, mesmo que eu não esteja no modo responsivo, largura da minha tela é menor que 768 no momento. Se eu arrastar isso para além de 768, você verá a barra lateral voltar. Esse estilo só se aplica ao que o definimos. Atualmente, a web é incentivada a fazer o desenvolvimento que prioriza dispositivos móveis. Podemos fazer o oposto do que acabamos de fazer aqui. Depende apenas de como você quer fazer isso. Defina a largura mínima de 768. Isso significa que escrevemos aqui nosso estilo padrão, supondo que seja móvel, e depois escrevemos nossos estilos de desktop aqui. Isso significa que, por padrão, não queremos que apareça. Então, quando chegar a 768, queremos que ele mostre um bloco. Se eu clicar em “Salvar” aqui, obteremos o mesmo resultado. Se eu estender isso além de 768, obteremos a barra lateral novamente. Isso é o que eles chamam de desenvolvimento que prioriza dispositivos móveis, em que você escreve o CSS, supondo que ele seja visualizado em um celular, e depois escreve suas consultas de mídia para desktop. Na verdade, prefiro fazer isso na maioria dos casos ao contrário. Gosto de trabalhar primeiro no desktop e depois criar estilos para um celular , voltando ao meu jeito preferido. Agora você pode ver no desktop que temos os estilos regulares, mas quando ele fica abaixo de 768 , esses estilos começam a aparecer. Esse é apenas um exemplo muito básico. Também podemos dizer, por exemplo, se queríamos algo no tablet, que seria um visual diferente do celular. Digamos que nosso maior celular que estamos suportando, digamos 425, podemos realmente colocar outros colchetes aqui, por fim. Podemos dizer largura mínima de 425 e largura máxima de 768. Em vez de não exibir nenhum na borda, na verdade, deixe-me mudar isso para 4-5. Há alguma sobreposição aqui, então vou fazer 426. Se estiver em 425, isso se aplicará. Mas se subir para 426, isso se aplicará, já que está abaixo de 768. Vamos apenas mudar. O que devemos fazer com a barra lateral? Vamos economizar aqui. Veja nossa visão do tablet. Vamos apenas fazer a barra lateral. Na verdade, em vez da barra lateral, vamos simplesmente entrar no contêiner da página, subir aqui e pegar isso. Vamos fazer a largura máxima da primeira coluna. Digamos que 50 no tamanho da tela. Agora você pode ver que provavelmente é um pouco baixo demais. Talvez eu faça com que seja 100. Então você pode ver que o tamanho da tela é maior que 768, vamos ter uma primeira coluna que não é maior que 150. Mas quando chegarmos abaixo de 768, vamos querer que seja no máximo 100. Você pode ver aqui que agora isso aparece em nossas ferramentas de desenvolvimento. Então, se formos menos de 425, vou rolar isso até 425, lá você pode ver que não se aplica mais. A barra lateral, se clicarmos aqui, agora não exibirá nenhuma porque essa consulta de mídia está em vigor. É assim que criamos estilos separados para dispositivos diferentes. Isso é feito por meio das larguras da tela. Não importa se você está em um dispositivo ou em um navegador normal e o atualiza dessa forma, podemos até mesmo fazer consultas responsivas para telas gigantes. Deixe-me abrir isso e podemos ir até aqui para um laptop grande, de 1440 pixels. Se eu for aqui, podemos ir para uma tela 4K e dar uma olhada nos estilos em uma tela 4K. Talvez queiramos tornar o contêiner da página com uma largura máxima para alguma coisa. Na verdade, podemos afetar qualquer intervalo de larguras de tela ou de janela em que a página da web está sendo visualizada. Não é apenas para dispositivos móveis, mas para dispositivos móveis, é assim que o direcionaríamos. Descobriríamos a largura máxima dos telefones que desejamos suportar e, em seguida, aplicaríamos um estilo separado a eles. Eu queria incluir SaaS neste vídeo, mas parece que estamos falando sobre esse assunto há algum tempo. Vou separar a conversa sobre SaaS e colocar isso na próxima lição. O SaaS é um pré-processador do CSS, por isso é muito relevante para o que estamos fazendo aqui. Só torna nossas vidas um pouco mais fáceis. Se você estiver interessado em SaaS, clique no próximo vídeo. Caso contrário, você pode pular para o JavaScript. 6. Sass: Nesta lição, falaremos sobre Sass, que significa folhas de estilo sintaticamente incríveis. É uma linguagem de script de pré-processador que é interpretada ou compilada em folhas de estilo em cascata, também conhecidas como CSS. Agora, isso provavelmente passou por toda a sua cabeça. Basicamente, Sass, o que ele faz é como falamos nos vídeos anteriores, há apenas três coisas : recarregar no navegador ou que o navegador interprete seu HTML, CSS e JavaScript. Onde entra o Sass? Na verdade, o Sass é CSS com superpoderes, mas para executá-lo em nosso navegador, precisamos compilá-lo para CSS, e é aí que entra a parte do pré-processador. O que vamos fazer é executar esse processo agora e criar nosso aplicativo ou nossa página da web um pouco mais nosso aplicativo ou nossa página da web com o Sass. Vou arrastar meu navegador até aqui, fazer isso funcionar aqui. Na verdade, eu poderia estender isso aqui para a parte de instalação deste vídeo. No código VS, podemos acessar nosso painel de extensões aqui e carregar algo chamado compilador Live Sass de Glen Marks. Novamente, se você não o tiver instalado no momento, tudo o que você precisa fazer é pesquisar na caixa de pesquisa aqui, compilador Sass ao vivo, e então você pode encontrá-lo aqui e clicar em “Instalar”. Para mim, eu já o instalei, então está dizendo desabilitar ou desinstalar. Basicamente, essa é a maneira mais fácil de começar a compilar o Sass no código VS. Só para você saber, existem muitas maneiras e muitas ferramentas para compilar o Sass. Essa é a maneira mais fácil, porque podemos fazer isso sem nenhuma configuração extra. Tudo o que precisamos fazer é instalar essa extensão especial e o que podemos fazer é ir até aqui. O botão ainda não está aparecendo porque, na verdade, precisamos criar uma folha de estilo, mas podemos ir até aqui e criar um styles.scss. Agora você pode ver o logotipo do Sass aparecendo lá e se eu clicar em “Enter”, agora você pode ver que está começando e agora temos esse botão para compilação ao vivo de Sass ou SCSS em CSS. Tecnicamente, isso é SCSS e o Sass é um pouco diferente, mas o SCSS é melhor na minha opinião porque o CSS é compatível com versões anteriores do SCSS. O que quero dizer com isso é que deixe-me mostrar isso agora. Vou pegar todo esse código, recortá-lo do styles.css colá-lo em style.scss. Na verdade, escrevi isso incorretamente, deveria ser styles.scss. Como você pode ver aqui, agora está vazio. Se formos até aqui, perdemos todos os nossos estilos, mas o que podemos fazer aqui é clicar neste botão para assistir Sass. Agora nosso styles.css é repreenchido e, dependendo nossas configurações no compilador Sass ativo, você pode ver que temos alguns atributos extras adicionados. Acho que neste caso é apenas um atributo extra e uma pequena referência a um mapa de origem aqui. Você pode ver que temos um mapa de origem que nos ajuda a rastrear o código do código compilado até o pré-processador aqui. Como você pode ver aqui agora, processamos nosso CSS e recuperamos todo o nosso estilo. Agora, o último vídeo ficou um pouco mais longo do que eu esperava. Na verdade, eu ia criar mais alguns recursos em nosso pequeno aplicativo web aqui. Vamos fazer isso e, em seguida, refatorar com SCSS. Vou escrever isso aqui. Este compilador Sass ao vivo observará todas as alterações aqui e depois será atualizado. Na verdade, vou desligá-lo por enquanto. Os botões continuam acesos. Preciso mover isso. Clique em “Assistindo”, livre-se dele por enquanto e eu excluirei tudo isso por enquanto. Eu fiquei um pouco à frente de mim mesmo lá. Na verdade, vamos construir isso com CSS um pouco mais. Eu quero, na minha barra lateral, criar um menu de barra lateral, então vou abrir isso. O que vou fazer é uma convenção semelhante à chamada BEM, Block Element Modifier. Basicamente, apenas uma convenção de como eu nomeio as classes. Este, porque está dentro de uma barra lateral, eu posso ir para a barra lateral e se você está se perguntando o que é isso, isso é Emmett, então eu posso fazer dot e então o nome da classe clicar em tab e ele criará um div com esse nome de classe. Vou chamar isso de menu da barra lateral. Então você pode ver que temos um div, mas digamos que queremos que seja uma lista para que eu possa mudar, colocar o nome do elemento na frente dele aqui, clicar em “Tab” e agora obtemos uma lista não ordenada com a classe do menu da barra lateral. Então, podemos entrar aqui e abrir algumas tags da lista. Na verdade, queremos alguns links aqui, então vamos colocar alguns links. Vou colocar o Link 1 e depois copiar isso. Link 2, Link 3, renomeie aqui. Agora teremos um menu de barra lateral aqui e, claro, não quero o estilo padrão de links e listas. Nesse caso, pode ser útil dentro do conteúdo principal, mas aqui estamos tentando criar um menu, então eu preciso reverter isso. Vou entrar aqui antes das consultas de mídia e vou digitar no menu da barra lateral e, se olharmos aqui e inspecionarmos, podemos ver quais estilos são realmente gerados automaticamente para esses elementos. Eu vou falar sobre isso. Aqui podemos ver nosso menu da barra lateral e você pode ver o tipo de estilo da lista. Se entrássemos aqui, vamos testá-lo primeiro nesse navegador, listar, estilizar, digitar, e então você pode ver aqui que podemos mudar essas coisas aqui. Não podemos fazer nada. Podemos remover esses pontos. Deixe-me copiar e colar isso aqui, e o que estamos tirando da caixa é pouco de preenchimento à esquerda de 40 pixels. Vou remover isso também, padding-left: 0. Lá vamos nós. Eu ainda quero algum nível de preenchimento, então o que vou fazer é fazer uma configuração geral para o preenchimento. Apenas dentro dessa seção, vou fazer com que seja de 10 pixels. Se olharmos para o menu da barra lateral, podemos ver que ele tem 10 pixels de preenchimento. Todo o conteúdo do menu da barra lateral terá 10 pixels na tentativa, mas também temos alguma margem na parte superior e inferior, ao que parece, então vou entrar, vou ver computado aqui. Temos cerca de 16 pixels de margem na parte superior e inferior. Vou remover as margens colocando a margem zero e pronto. Agora eu quero me livrar do estilo da tag do link. A maneira de fazer isso em CSS é começar selecionando o menu da barra lateral e, se eu colocar um espaço, posso selecionar crianças dentro dele. Vou selecionar os itens da lista dentro dela, mas dentro desses itens da lista está uma tag para que eu possa realmente fazer dois níveis de aninhamento lá. Vou procurar as tags de link em uma tag de item da lista nesse elemento do menu da barra lateral. Então, o que eu vou fazer é, novamente, referenciar o que vemos em um navegador aqui, olhar para baixo. Decoração de texto sublinhada, vamos remover isso. Decoração de texto. Nenhum. Definitivamente, queremos que o cursor permaneça apontado para indicar que é um link, como você pode ver aqui. Queremos que a cor seja, vamos deixá-la preta por enquanto. Vou clicar em “Salvar” e, como você pode ver, eles parecem muito mais normais agora. Talvez queiramos fazer com que pareçam um pouco mais óbvios do que são clicáveis. O que podemos fazer é adicionar uma pseudoclasse aqui. Novamente, estou lançando um monte de CSS novos para você neste vídeo, mas, novamente, se você quiser se aprofundar em HTML e CSS, você pode conferir minha outra aula. Mas isso aqui é o que chamamos de pseudoclasse. Eu coloco dois pontos aqui, e depois coloco o mouse , então o que podemos fazer é talvez trazer essa decoração de texto de volta, mas apenas ao passar o mouse. Vou sublinhar a decoração de texto e agora você verá que podemos ver que os links ou estamos indicando ao usuário que eles são links mudando o cursor e sublinhando-o. Legal, vamos criar um menu de cabeçalho também. Vou subir aqui e, em vez do cabeçalho, vou fazer exatamente a mesma coisa. Vou criar um UL com uma classe de menu de cabeçalho , entre aqui e vamos copiar isso aqui. Guarde isso. Vamos estilizar este de forma um pouco diferente. Em cabeçalho, vou criar um conjunto de regras para o menu de cabeçalho. Novamente, remova o tipo de estilo da lista, e o que eu quero fazer é que ela não seja exibida em cima de si mesma. Eu quero que ele seja exibido na tela. O que eu vou fazer é exibir o flex. Aí está. Agora que eles estão próximos um do outro , mas estão muito próximos, então vou fazer uma lacuna de coluna de 10 pixels. Aí está, eles estão separados. Em seguida, vou usar esse outro atributo no Flexbox chamado justify content center e isso colocará os links no centro. Lá você pode ver. Então, vamos formatar esses links. Novamente, podemos fazer exatamente a mesma coisa da última vez. menu de cabeçalho UL LI. Na verdade, não é o UL porque já estamos dentro de um UL. Em seguida, definiremos a decoração do texto nenhuma e o que faremos com a cor? Preto novamente, digamos, e talvez façamos a mesma pseudo-classe. Vou apenas copiar isso, colocar a pseudo-classe no final para passar o mouse e, em seguida, podemos estilizar nosso estado de foco , sublinhado na decoração do texto. Vamos fazer isso. Vou clicar em “Salvar” nisso. Agora podemos ver que temos nosso menu em nosso cabeçalho e nosso menu em nossa barra lateral. O que fizemos aqui é que você pode ver que fizemos alguns ninhos. Temos algumas cores. O que podemos fazer em Sass é transformar nossa nidificação. O compilador Live Sass foi desativado. Eu vou abrir isso. O que vamos fazer é copiar tudo isso. Vou até styles.css, colar isso aqui e, em seguida, queremos ter certeza de que todas as alterações que fizermos aqui vão para styles.css. Não ative isso e você terá seu CSS copiado aqui. Caso contrário, ele substituirá o que você escreveu aqui. Em seguida, clicarei em “Watch Sass”. Agora está assistindo. E como o CSS é compatível com versões anteriores do SCSS, tudo funciona normalmente. Agora, deixe-me mostrar alguns dos benefícios de usar o Sass. Se formos até aqui, não veremos mais o styles.css. Isso é só para o navegador agora. Vamos trabalhar em styles.css. O que podemos fazer aqui é trabalhar em nossa nidificação. Agora, como você pode ver aqui, estamos nos repetindo. Temos o menu de cabeçalho três vezes e temos li e a duas vezes aqui. O que podemos fazer é pegar isso, recortar, colar em nosso menu de cabeçalho definido aqui e, em seguida, corrigirei o recuo aqui. Como estamos copiando o menu do cabeçalho, podemos, em vez disso, depois de nos aninharmos dentro, usar o símbolo “e|”. Vamos lá. Podemos fazer “e”. Agora clique em “Salvar” e você pode ver como obtemos em nosso styles.css, o mesmo resultado. Se eu olhar aqui no menu de cabeçalho li a e la, eu passo o mouse aqui embaixo. Eles estão separados em nosso styles.css, que é o que precisamos para nosso CSS, mas aqui estão eles juntos. Na verdade, nem precisamos do fim nesse caso. Podemos simplesmente agir assim e , em seguida, o aninhamento aqui está implícito ao colocá-lo dentro do conjunto de regras. Mas podemos levar essa nidificação ainda mais longe. Você pode ver aqui que li e a se repetem sozinhos. Na verdade, podemos pegar essa parte e aninhá-la aqui, colocando a extremidade. O final simplesmente pega o pai e , em seguida, aplica qualquer seleção adicional a ele. Temos o menu de cabeçalho e, em seguida, aplicaremos esses estilos às tags de vinculação dentro das tags da lista menu do cabeçalho para que você possa ver como o aninhamento começa a funcionar aqui. Tudo isso funciona da mesma maneira agora, e o que podemos fazer para levar isso ainda mais um passo adiante, é que podemos usar o símbolo at para construir o próprio nome de uma classe. Veja como temos cabeçalho e menu de cabeçalho. Ambos têm cabeçalho. O que podemos fazer é pegar isso, cortar isso e, aqui dentro, podemos fazer um “e” para representar o cabeçalho do ponto e , em seguida, adicionar o menu do painel e obter exatamente o mesmo resultado. Se olharmos para o CSS, você verá que obtemos o mesmo resultado de antes. Cabeçalho, menu de cabeçalho, menu de cabeçalho, menu de cabeçalho ao passar o mouse. Ele o expande para o CSS necessário, mas em nosso editor de código, podemos usar esse aninhamento maluco. Pessoalmente, acho isso útil quando estou criando nomes de classes mais aprofundados. Por exemplo, poderíamos dar isso um nome de classe do link do menu de cabeçalho. Como você pode ver, estamos repetindo cada vez mais as palavras anteriores. Acho muito útil poder usar o símbolo “e”, o e comercial aqui para referenciar a parte anterior e ter tudo aninhado semanticamente. Agora, todos os nossos estilos de cabeçalho estão nesse único conjunto de regras. Então, é claro, temos todos esses conjuntos de regras aninhados. Podemos fazer a mesma coisa com o menu da barra lateral. Vou fazer isso de fora para dentro, vou pegar essa parte, que é a única parte que é diferente dessa. Recorte essa parte e coloque um “e” para passar o mouse. Agora, podemos simplesmente determinar o estado do mouse com os outros estilos do estado padrão. E então, é claro, a diferença entre esse seletor e esse seletor é a li a. Então, na verdade, podemos simplesmente pegar isso, aninhá-lo aqui e, na etapa final, podemos pegar a parte que é diferente daqui para cá, que é o menu do traço. Pegue isso, entre aqui e adicione o “e”. Livre-se disso. Agora, se clicarmos em Salvar, veja nosso resultado. Obtemos exatamente o mesmo resultado. Eu diria que, para mim, o maior benefício do Sass é esse recurso de aninhamento. Agora temos todo o código do cabeçalho em um conjunto de regras. Temos todo o nosso código de barra lateral em um conjunto de regras. Pode ficar confuso quando você está tentando pesquisar a base de código. Há algumas desvantagens. Por exemplo, se eu clicar aqui e entrando em um novo projeto e quiser encontrá-lo aqui , entro no arquivo Sass para alterá-lo. Eu não posso pesquisar dessa forma, mas eu poderia em CSS. Vou ter que encontrar o menu da barra lateral. Onde está? Também não está aqui. É aqui que começa a ficar um pouco mais complicado quando se trata de pesquisar, mas, por outro lado, gosto muito dessa abordagem de aninhamento. O outro recurso que podemos usar no SCSS são as variáveis. Eu posso ir até aqui e definir variáveis. Vamos dizer apenas a cor do cabeçalho e, em seguida, o que temos para a cor do cabeçalho? Cinza escuro e, em seguida, faremos uma cor na barra lateral. Obviamente, se o estivermos usando apenas em um só lugar, não é muito útil, mas talvez seja como se pudéssemos armazenar as cores da marca aqui. Coisas como cores de botões e coisas assim. Componentes que vamos usar regularmente. Nós fazemos bege aqui. E então, em vez de cinza escuro, colocaríamos a variável e, portanto, qualquer cor armazenada na cor do cabeçalho se aplicaria aqui. Qualquer cor armazenada na cor da barra lateral simplesmente passaria por aqui. Se eu clicar em “Salvar”, você verá que obtemos o mesmo resultado. E estamos sempre obtendo CSS padrão em nosso arquivo CSS aqui. Se você olhar aqui, não há variáveis, há nenhum aninhamento que temos no SCSS. Isso é apenas código SCSS. Isso facilita o trabalho com CSS e oferece recursos extras. Mas é muito importante observar aqui que o CSS compilado, a parte que é realmente lida pelo navegador, não será o Sass. Há alguns outros recursos no SCSS. Podemos criar funções e consultas de mídia personalizadas e todo esse tipo de coisa, mas não quero ser muito complexo neste vídeo e nesta aula. Se você quiser se aprofundar no Sass, eu tenho uma aula sobre Sass aqui no Skillshare. Clique aqui se estiver interessado em saber mais. A principal coisa que eu queria transmitir aqui é o que Sass faz. A ideia por trás de um pré-processador criar nossa própria linguagem que compila em uma das três linguagens às quais o front-end ao qual o navegador responde e também podemos configurar nosso ambiente de desenvolvimento com uma ferramenta como o compilador Sass ao vivo para compilar esse código personalizado, esse código que facilita nossa vida como desenvolvedor de CSS. Com isso resolvido, vamos deixar de estilizar por enquanto e falar sobre interatividade. Vamos falar sobre JavaScript. 7. Javascript: Neste vídeo, falaremos sobre JavaScript. Javascript é o que dá interatividade às nossas páginas da web no front-end. Já falei sobre JavaScript neste canal de compartilhamento de habilidades no passado. A maior crítica que recebi dos meus treinamentos anteriores em JavaScript é que eles não são práticos o suficiente, então, neste vídeo, vou escolher um exemplo que seja bastante prático e real. Vou adicionar uma gaveta de barra lateral a esta página da web, e teremos um botão para abrir a gaveta e um botão para fechar a gaveta. Esse é um exemplo bastante comum do mundo real e também bem simples. Não deve demorar muito para programar. O que eu vou fazer é entrar em index.html. Aqui, eu já fechei o arquivo SCSS por enquanto e posso encerrá-lo. Isso não significa que não esteja mais funcionando. Como você pode ver aqui, ele ainda está assistindo, mas simplesmente não vai atrapalhar tanto nosso caminho. Talvez eu mantenha isso expandido por um tempo. Aqui no conteúdo principal, obviamente preenchemos seção do cabeçalho e a seção da barra lateral, mas não colocamos nada no conteúdo principal, então vamos fazer isso agora. Vamos dar um título à nossa página, e eu vou apenas dizer de nível superior. Na verdade, vou chamar essa página de título. Então, abaixo, vou colocá-lo no parágrafo apenas para fazer com que pareça realista. Então você pode ver que temos um título de página com um texto de parágrafo abaixo. Então, aqui, eu vou colocar um botão. Neste botão, vou escrever Abrir gaveta. Como você pode ver, temos nosso estilo de botão padrão desde o início. Se eu passar o mouse sobre ele, você pode ver as cores mudarem. Esse é um elemento de botão padrão do HTML. Agora, teremos dois botões em nossa página da web. Para diferenciá-los e garantir que nossa segmentação seja bem específica, vou dar a ele uma identificação de botão de gaveta aberta. Agora, nossa gaveta ainda não existe, então teremos que criá-la. Vou entrar aqui, deixe-me arrastar isso novamente e criarei uma nova div com a classe de gaveta. Dentro da gaveta, vou criar outro botão e dar a ele uma identificação de botão de fechar a gaveta. Esse botão fechará a gaveta. Em seguida, dentro das etiquetas dos botões de abertura e fechamento, vou colocar o texto, que é apenas Fechar gaveta. Então, se você olhar de perto, verá que temos um div caindo em nossa grade agora porque está dentro do contêiner da página. Não queremos isso, então vamos movê-lo para fora do contêiner da página, e agora você pode ver que ele ainda está na parte inferior porque ainda não lhe demos nenhum estilo. A primeira coisa que queremos fazer fazer isso com nossas ferramentas de desenvolvimento, para que você possa ver isso acontecendo em tempo real. Se eu pressionar esse botão aqui, ele configurará uma seleção para essa classe. Aqui, o que eu vou fazer é escrever posição: absoluta. O que isso vai fazer é nos permitir posicioná-lo fora do layout normal e por cima do conteúdo, que é o que queremos para nossa gaveta. Agora vou posicionar isso explicitamente. Vou fazer com que seja zero pixels da parte superior e zero pixels da direita. Em seguida, queremos dar a ele uma largura de metade da largura da janela de visualização. Atualmente, não podemos vê-lo porque não há uma cor de fundo diferente. Vamos dar a ele uma cor de fundo preta. Também queremos que ele estenda toda a altura da página. Vou criar uma altura de 100 por cento da altura da janela de visualização. Agora, você pode começar a ver nossa gaveta se formando. Vou colocar um pouco de acolchoamento aqui para que o botão não fique alinhado com a lateral. Em seguida, certifique-se de não atualizar a página porque ela ainda não foi salva em nosso documento, então vou copiar os estilos que acabamos de configurar. Acesse nosso styles.scss. Certifique-se de não acessar o styles.css se você ainda estiver executando Live Sass Compiler ou planeja executá-lo no futuro, pois ele substituirá essas alterações. Então, vamos até antes das consultas de mídia, copiar e colar em nossos estilos de gaveta aqui. O recuo está um pouco errado, mas como você pode ver quando clicamos em Salvar, ele compila , atualiza nosso servidor ativo e, como você pode ver, temos nossa gaveta na parte superior. Agora, precisamos indicar se a gaveta está aberta ou fechada. O que eu vou fazer é ir até aqui e usar aria, que é uma forma de indicarmos o estado de um elemento para leitores de tela. Os leitores de tela são uma ferramenta que pessoas com deficiência visual usam para fazer com que os sites sejam lidos para elas. É bom usar esse atributo porque ele ajuda essas pessoas a acessar o site. Definiremos aria-hidden como true aqui, indicando ao leitor de tela que esse elemento está oculto no momento. Então, só precisamos entrar em nosso CSS agora e escrever uma regra de estilo que reflita isso. A forma como direcionamos um elemento com um determinado atributo é por meio desses colchetes e, em seguida, colocamos o atributo com seu valor dentro desses colchetes. Para ir para o lado da página, vou para a direita de menos 100 por cento. A razão pela qual estou movendo-o para fora da tela em vez de escondê-lo desta forma com a tela: nenhum é porque não podemos adicionar quadros-chave entre ligado e desligado se quisermos animar a abertura e o fechamento da gaveta. Em vez de exibir: nenhum, o que vou fazer é corrigir menos 100 por cento. Portanto, não poderemos vê-lo na página, a menos, é claro, o usuário faça o que estou fazendo agora, que é rolar a página horizontalmente. Obviamente, isso não é legal, então vou examinar nossos estilos para a etiqueta corporal e definir overflow-x como hidden. Isso pode ser um problema no futuro se quisermos rolar a página horizontalmente por qualquer motivo, mas, por enquanto, esse truque funcionará. A partir desse ponto, tudo o que precisamos fazer para abrir essa gaveta é alterar o atributo aria-hidden para algo diferente verdadeiro, porque é apenas 100% negativo. Se o atributo for verdadeiro, por padrão, será 0 correto. Também preciso inserir o estilo aqui para a transição, então vamos animar o atributo certo. Vamos dar a isso uma duração de meio segundo, e a curva de velocidade, vamos definir como “ease-in-out”. Agora que temos essas configurações, posso atualizar esse valor por meio das ferramentas de desenvolvimento alterando-o manualmente. Na guia Elementos, posso alterá-lo de verdadeiro para falso e, em seguida, você pode ver que a gaveta será animada. Se eu mudar de volta para verdadeiro, ele então se animará. Agora, é claro, os usuários não vão usar as ferramentas de desenvolvimento e mudar isso, então precisamos do JavaScript para fornecer essa interatividade no front-end aos usuários finais. Agora vamos criar nosso arquivo JavaScript. Vou estender essa janela aqui. Em vez de fazer lado a lado por enquanto, vamos abrir nosso explorador de arquivos aqui e criar um novo arquivo com o nome de scripts.js. A parte dos scripts não é essencial. Podemos chamá-lo do que quisermos, desde que o nomeemos com a extensão of.js, essencial para arquivos JavaScript. Em seguida, precisamos vincular esse arquivo de script externo em nosso HTML. Se formos até aqui, vamos colocá-la antes da etiqueta corporal de fechamento. Podemos criar uma tag de script. Dentro da tag de script, podemos colocar o JavaScript literalmente aqui, mas em vez disso, vamos apenas vinculá-lo a uma folha de estilo externa que acabamos de criar. Vou apenas digitar o caminho para esse arquivo que, por estar na mesma pasta aqui, podemos simplesmente escrever scripts.js. Para verificar se isso está realmente vinculado corretamente, vamos inserir um registro simples do console. Tudo o que isso faz é enviar uma mensagem para o console. Esse comando aqui é muito útil para depuração, mas, por enquanto, vamos apenas imprimir as palavras hello world. Se eu voltar ao meu navegador aqui, atualizar e depois formos para o Console, você poderá ver as palavras Olá, mundo. Se eu atualizar novamente, você verá que, após o carregamento da página, ela carregará esse texto de olá mundo. Isso verifica se o script está de fato vinculado e, portanto, aqui podemos começar a criar nosso JavaScript. Conforme mencionado, vamos usar nosso JavaScript para abrir a gaveta, então o que precisamos é de um ouvinte de eventos no botão. Então, esse ouvinte de eventos direcionará essa gaveta e mudará a direita para zero por meio dessa ária oculta. Se eu for falso, ele abrirá e depois colocaremos outro ouvinte do evento aqui para fechar a gaveta. Vamos até aqui e vamos direcionar esse primeiro elemento, esse botão de abrir gaveta. Atualize aqui. Feche a gaveta. Como fazemos isso é começar com o objeto do documento. Então, dentro dos objetos do documento temos algumas opções aqui, podemos usar querySelector, que é um método abrangente que podemos colocar aqui um seletor CSS e ele pegará o primeiro elemento que corresponda a esse seletor. É a mesma coisa que em nossos estilos. Se tivéssemos que direcionar nossa barra lateral, podemos fazer assim. Nesse caso, estamos direcionando esse botão específico que tem um ID para que possamos colocar o hash lá e direcioná-lo dessa forma. Ou podemos usar o método getElementById e depois inserir o ID. Agora temos o elemento selecionado. O que podemos fazer é adicionar outro método aqui chamado addEventListener. O primeiro argumento é o que vamos ouvir. Vamos ouvir o evento de cliques. Então, a segunda é a função que queremos executar. Eu vou fazer isso da maneira tradicional, assim. Então, aqui dentro, só para verificar se esse ouvinte de eventos está configurado corretamente, vou fazer um registro do console. Como eu disse, os registros do console são muito úteis para depurar e passar por um grande processo. Esse é um processo um pouco menor, mas podemos verificar se o ouvinte do evento está funcionando por meio deste console.log. Aqui, se eu clicar em “Abrir gaveta”, você pode ver no console aqui, clique aparece e se eu continuar clicando nela, o número ao lado do clique sobe. Isso é o que acontece quando você está registrando valores duplicados no console. Isso é bom. Sabemos que estamos selecionando o elemento corretamente e na verdade, podemos anexar código ao evento de clique. Agora vou entrar aqui e mirar na gaveta. Para isso, vou usar o QuerySelector. Há outro chamado querySelectorAll e esse é para criar uma matriz de elementos no caso de você querer selecionar vários. Queremos apenas selecionar o primeiro que corresponda nosso seletor CSS e que será a gaveta. Então, o que queremos fazer é executar o método setAttribute e, como esse é um botão para abri-lo, vamos definir o atributo aria-hidden como false, para não fique oculto. Se eu clicar em “Salvar”, volte aqui, clique em “Abrir gaveta” e você verá que ela está abrindo a gaveta e, se olharmos nos bastidores o código real da gaveta, você pode ver aqui que aria-hidden é verdadeiro. Veja o que acontece com aria-hidden quando eu clico nesse botão. Como você pode ver, ele está atualizando nosso HTML e tornando isso falso. Legal. Só precisamos seguir exatamente o mesmo processo novamente com o botão Fechar. Eu vou entrar aqui. Em vez de botão Abrir, botão de fechar a gaveta e, em vez de falso, verdadeiro, mas podemos reciclar todos os outros códigos. Atualize aqui, abra a gaveta, feche a gaveta, abra a gaveta, feche a gaveta e é tão simples quanto isso. Agora, esse é um projeto muito pequeno e eu o estou servindo localmente, então não está na Internet. Tudo está carregando muito rápido, mas no futuro, se você quiser colocar isso em um ambiente de produção, é bom esperar até que todos os elementos da página sejam carregados antes de começar a carregar esses ouvintes de eventos pois há uma chance de você tentar anexar um ouvinte de eventos antes que anexar um ouvinte de eventos antes o JavaScript consiga encontrar esse elemento. O que vou fazer é, apenas por uma questão de integridade, adicionar outro ouvinte de eventos que envolverá todo o nosso código JavaScript. Este é colocado no objeto do documento. Vamos adicionar um ouvinte de eventos para esse evento chamado DOMContentLoaded , como você pode ver aqui. Na verdade, não diz muito, mas basicamente, DOMContentLoaded é quando, como mencionado, o conteúdo do DOM é carregado, então o conteúdo da página é carregado. Eu vou pegar tudo isso e depois colocar isso lá. Isso apenas garantirá que todo o conteúdo seja carregado antes de tentarmos anexar esses ouvintes do evento pois receberemos um erro se não conseguirmos encontrar um elemento com um ID desse. Para resolver esse problema de tempo, colocaremos um ouvinte extra do evento aqui. Um exemplo bem simples, mas bastante comum, e espero que você concorde com um e espero que você concorde exemplo prático de usar JavaScript para criar interatividade em sua página ao abrir e fechar outro elemento na tela e, claro, gostaríamos de colocar algum conteúdo aqui, talvez alguma navegação, talvez no caso de um site de comércio eletrônico, você poderia ter seu Cartão de compras aqui, qualquer coisa que você realmente queira, mas agora pelo menos temos a capacidade abrir e fechar esta gaveta usando JavaScript. Se você quiser se aprofundar no JavaScript, obviamente eu tenho minhas outras aulas aqui no Skillshare. Você pode assistir à aula de JavaScript de Fundamentos de Desenvolvimento Web para uma aula aprofundada sobre JavaScript. Caso contrário, vamos seguir em frente e falar sobre o TypeScript, cujo conceito semelhante ao SAS é uma linguagem de script de pré-processador, exceto que desta vez é para JavaScript. Veremos isso no próximo vídeo. 8. Tipologia: Neste vídeo, vamos aprender ou pelo menos apresentar o TypeScript. O TypeScript é um conceito semelhante ao SASS versus CSS. CSS obviamente é o que é executado em seu navegador. JavaScript também é o que é executado em seu navegador, mas o SASS é algo que podemos usar para compilar em CSS para nos ajudar como desenvolvedores, mesma coisa com o TypeScript. É um script separado que é um superconjunto do JavaScript. Podemos colocar o JavaScript no TypeScript e ele funcionará exatamente como fizemos com o SASS, mas a diferença é que com o JavaScript, é uma linguagem de programação. É diferente do CSS no sentido de que o CSS é simplesmente folhas de estilo. Os recursos que fazem o TypeScript valer a pena são muito diferentes do SCSS ou do SASS. Como mencionado aqui, é um superconjunto sintático estrito do JavaScript e adiciona digitação estática opcional à linguagem. Isso é muito programador E. Se você é um iniciante ouvindo isso, isso pode passar despercebido. Se você quiser pular esta lição, à vontade, mas eu queria incluir isso, pois é usado no desenvolvimento web de front-end moderno. Ele se tornou muito popular nos últimos anos e muitas pessoas o estão usando. Para mim, até demorei um pouco para entender os benefícios de usar o TypeScript, mas até o final desta lição, espero que você entenda para que serve o TypeScript e se realmente deseja usá-lo. Que esta seja sua introdução ao TypeScript. Se você não quiser usá-lo, não é essencial, a menos que você trabalhe com uma equipe de desenvolvimento específica que o use. Se você quiser saber mais sobre o TypeScript, o site está aqui, o primeiro link do site que aparece no Google. Agora, para usar o TypeScript, você precisará do Node e do NPM. Se você não sabe o que são, acesse nodejs.org. Nodejs é um ambiente de execução de JavaScript de código aberto e multiplataforma. Essencialmente, tudo o que o Node é é a capacidade de executar JavaScript, uma linguagem criada para navegadores da web em seu computador, em um servidor, para que você possa usá-la. Então, o NPM, que significa Node Package Manager, que você pode encontrar em npmjs.com é essencialmente um gerenciador de pacotes. Somos capazes de instalar pacotes diferentes que as pessoas criam. Você pode pesquisá-los aqui. Você pode pensar nesses pacotes como módulos diferentes, diferentes códigos pré-construídos que outras pessoas criaram e que podemos instalar em nosso projeto e globalmente em nosso sistema. Para verificar se você tem o node instalado, você pode executar node -v. Em seguida, para verificar se você tem o NPM instalado, você pode executar npm -v e, em seguida, executar tsc --version para ver a versão do TypeScript que você tem. Se você não tiver o TypeScript instalado, verá que diz comando não encontrado: tsc. Então, o que você quer fazer é executar npm install -g typescript, e isso instalará o TypeScript globalmente em seu computador. O que você acabou de assistir foi um vídeo pré-gravado porque eu já fiz isso, certifique-se de ter o node e o NPM instalados. Então, se você não tiver o TypeScript instalado, siga os comandos que acabei de mencionar. Eu vou fechar isso e vou fechar isso. Com isso instalado, podemos realmente criar nosso primeiro arquivo TypeScript. Na verdade, antes disso, precisamos criar um arquivo tsconfig.json aqui, que é apenas nosso arquivo de configuração do TypeScript. Aqui você pode ver que está nesse formato chamado JSON, que é apenas uma forma de armazenar dados. Deixe-me corrigir o recuo aqui. Você pode ver que abrimos esse objeto. Adicionamos esse objeto de opções do compilador e , em seguida, adicionamos es5 para target, commonjs para módulo e definimos o mapa de origem como verdadeiro. Como você pode ver nesses comentários, tentei explicar o que cada um deles está fazendo. Este primeiro define a versão de destino do JavaScript para a qual desejamos compilar. O segundo define o estilo do módulo. Então, ao definir o mapa de origem como verdadeiro, seja, no momento em que ou seja, no momento em que transpirarmos nosso TypeScript, ele também gerará um arquivo de mapa e esse arquivo é o que mapeia o arquivo JavaScript transpilado para o arquivo TypeScript original, permitindo que o código TypeScript original seja reconstruído durante a depuração. Como eu disse, isso está ficando um pouco técnico e de alto nível, mas veremos isso funcionando em breve. O que agora podemos fazer com nosso arquivo de configuração do TypeScript aqui é executar o comando TSC, que significa compilação TypeScript, mas é claro precisamos primeiro de um arquivo TypeScript. O que vou fazer é exatamente como fizemos com o styles.css. Vamos renomear isso para ts e agora isso se torna um arquivo TypeScript. Lembre-se de que o TypeScript é um superconjunto do JavaScript, portanto, é compatível com versões anteriores. Podemos simplesmente colocar JavaScript puro em um arquivo TypeScript e ele deve funcionar. Então vamos abrir um terminal. Vou mudar para aqui para fazer o terminal e, em seguida, vamos simplesmente executar tsc para compilar TypeScript. Agora você pode ver que nosso arquivo script.js e scripts.js.map foram criados. Se eu olhar aqui dentro, você verá que é exatamente o mesmo, exceto talvez alguns espaços em branco sendo apagados e, em seguida, este comentário aqui que mapeia esse arquivo para o mapa de origem, que, como eu disse, quando estávamos configurando o arquivo tsconfig, nos permite mapear o arquivo JavaScript para o arquivo TypeScript original e isso nos ajuda depuração. Não se preocupe muito com o mapa. Vamos trabalhar com esse arquivo e, é claro, estaremos aqui ainda carregando o mesmo arquivo scripts.js de saída, que atualmente tem a mesma aparência do nosso arquivo TypeScript, mas isso é porque na verdade não o modificamos para ser mais TypeScript E. Agora, a razão pela qual ele é chamado de TypeScript é porque podemos ser mais específicos aqui em TypeScript definindo quais objetos são de quais tipos, porque em JavaScript é digitado de forma muito vaga, então nem sempre fica claro quais são os tipos de objetos. Na verdade, podemos especificar certos objetos como certos tipos. Na verdade, vamos fazer isso agora. Como você pode ver aqui, continuo fazendo referência a objetos semelhantes. Eu mencionei a gaveta duas vezes e depois mencionei o botão de abrir a gaveta e o botão da gaveta fechada. Vamos movê-los para suas próprias variáveis. Na verdade, vamos movê-los para constantes. Há duas maneiras de definir um valor, embora exista, na verdade, a var original em JavaScript, mas agora preferimos usar const ou let. Vamos lá, se esperarmos que o valor mude mais tarde. Mas quando temos como alvo elementos específicos do DOM, não esperamos que nada mude. Estamos apenas criando uma referência para esse elemento. Se eu conseguir aprender a soletrar corretamente, posso simplesmente copiá-lo e colá-lo na verdade. Eu posso pegar isso e configurá-lo para abrir usando o estojo Pascal e, em seguida, posso direcionar o botão de fechar pegando isso aqui. Estamos apenas refatorando nosso código aqui. Obviamente, esse código funciona, mas estamos apenas tornando-o um pouco melhor. Lembre-se de que o TypeScript e o SASS são para a experiência do desenvolvedor, não para o usuário final, e esse é a gaveta. Vou chamar isso de gaveta. Então, temos todas as nossas referências lá em cima. Agora, o que posso fazer é refatorar isso, substituir onde isso aparece no código por esse nome de variável ou esse nome constante. Vou entrar aqui, vou abrir o botão. Também vamos adicionar o ouvinte do evento. Isso só se torna uma gaveta. Isso se torna CloseButton no estojo Pascal, CloseButton e, em seguida, na gaveta novamente. Podemos simplesmente substituir isso por uma gaveta. Agora, se passarmos o mouse sobre o OpenButton, você pode ver que ele diz HTMLElement. Esse é o tipo. Se passarmos o mouse aqui, HTMLElement e, em seguida, aqui está Element. Podemos ser mais específicos e começar a escrever um texto datilografado aqui dizendo como e ficando mais específicos. O botão de abertura da gaveta é , na verdade, um elemento de botão HTML. Poderíamos entrar aqui e digitar isso: HTMLButtonElement. Agora, se passarmos o mouse aqui, você verá que o tipo agora é mais específico. Em vez de HTMLElement , agora está definido como HTMLButtonElement. Se o tipo não tiver sido detectado automaticamente, podemos especificá-lo aqui como ButtonElement. Então este é apenas Element. Aqui podemos dizer HTMLDivElement. Agora, nosso código sabe exatamente que tipo de elemento é esse, mas isso ainda não é particularmente útil. Foi difícil para mim descobrir um exemplo realmente prático, mas simples de usar o TypeScript com o que construímos até agora, mas descobri uma maneira de incorporar uma função aqui e vou chamar essa função de toggleDrawer. Dependendo do estado da gaveta, ela a abrirá ou fechará e, na verdade, podemos criar um botão, se quisermos , que abra e feche com esse método. Vou criar a função uma nova forma escolar e vou colocar aqui uma variável para especificar se queremos que ela seja aberta ou não. Vou chamá-lo de IWantitOpen e depois usarei a sintaxe da seta para criar a função. Agora temos uma função com um único argumento. Aqui eu vou fazer um simples “se” então. Eu direi que, se IWantItOpen, então vamos definir o atributo de aria-hidden na gaveta como false. Caso contrário, vamos definir isso como verdadeiro. Agora, se eu clicar em Salvar e passar o mouse, você pode ver que depois de IWantItOpen, diz qualquer um. Aqui diz que o parâmetro IWantItOpen tem implicitamente um tipo qualquer, mas um tipo melhor pode ser inferido do uso. Em vez de o parâmetro ser de qualquer tipo, podemos especificar que tipo precisamos que ele seja. Obviamente, estou usando isso como booleano aqui, então vou colocar dois pontos aqui e dizer booleano. Para aqueles que não são tão avançados em programação, booleano significa apenas um valor verdadeiro ou falso. Agora, estamos nos certificando de que, ao executarmos esse método, definitivamente teremos um argumento booleano passando pelo método. O que vou fazer aqui embaixo é clicar em OpenButton, executar essa função chamada ToggleDrawer e queremos que ela seja aberta nesta instância, então vou passar por true e não teremos nenhum erro aparecendo. Isso é bom. Então, aqui embaixo, vou colocar ToggleDrawer false. Eu escrevi tudo bem aqui, então nada está aparecendo errado. Se eu compilar o TypeScript, você pode ver aqui que ele compila para JavaScript. Então eu posso abrir e fechar isso. Obtemos exatamente o mesmo resultado. Por que usaríamos o TypeScript? Bem, digamos que não estávamos usando o TypeScript e eu acidentalmente coloquei, digamos, uma string aqui. Se fosse um arquivo JavaScript, não obteríamos essas linhas onduladas por aqui porque não teríamos especificado que o argumento tem que ser um booleano. Vamos pegar isso e eu vou colocar isso diretamente em scripts.js aqui. Então, é claro, não podemos escrever isso porque não estamos mais em TypeScript. Vou remover todo esse código TypeScript e deixar o código JavaScript. Vou clicar em Salvar. Ainda temos esse aqui. Atualizamos nosso scripts.js e colocamos o valor da string de true e o valor da string de false aqui. Isso pode parecer bom para nós. Se atualizarmos a página aqui, clique em “Abrir gaveta”, ela abrirá, mas não a fechará. Por que isso? Isso é interessante. Se entrarmos em nosso console, não haverá erros, porque, do ponto de vista do JavaScript, não fizemos nada de errado. Isso é o que quero dizer com linguagem de digitação vaga. Não é um JavaScript muito rígido, então você pode criar esses bugs sem nenhum erro, então você não sabe qual é o problema ou como corrigi-lo. O problema aqui é que estamos procurando um booleano aqui se ifWantItOpen. A verdade é que qualquer uma delas vai aparecer como verdadeira porque ambas não são sequências vazias. Se eu entrar aqui e presumir que está sempre aparecendo como verdade, esse log do console deve ser executado. Vou apenas dizer que IWititOpen é verdade. Se eu clicar em Salvar, vá até aqui e vamos dar uma olhada no nosso console. Se eu clicar em 'Abrir gaveta', IWantItOpen é verdade, sim, é justo. Mas se clicarmos em Fechar gaveta, ainda diz que IWantItOpen é verdade. Isso se deve a algo em JavaScript chamado valores verdadeiros. Uma string não vazia é um valor verdadeiro, portanto, é verdadeira mesmo que o conteúdo do texto seja falso. Agora, é claro, esse é um pequeno bug que pode ser difícil de decifrar em JavaScript, mas se estivéssemos executando o TypeScript, você pode ver aqui que obtemos essas linhas vermelhas onduladas. Ele diz que um argumento do tipo string não pode ser atribuído ao parâmetro do tipo boolean. Foi especificado que deve ser um booleano aqui ao lado do nosso argumento, então ele só espera um booleano e, portanto, receberemos um erro antes mesmo de executarmos a compilação. Então, se eu clicar em tsc, você pode ver que ele nem nos permite compilar porque são determinados erros antes mesmo de chegarmos ao resultado final, antes mesmo de chegarmos à produção. Isso é bom. Preferimos capturar nossos erros no início nosso desenvolvimento do que vê-los serem publicados e depois descobrir o bug. Esse é o benefício do TypeScript. Como você pode ver, ele não nos permitirá compilá-lo até resolvermos esse problema. Nós apenas ouvimos a mensagem de erro no TypeScript e depois a retornamos para booleanos. Eliminamos todas as linhas onduladas. Vamos executar o tsc novamente. Ótimo. Não houve erros. Se eu executar minha página da web novamente, lá você poderá ver que tudo está funcionando bem novamente. Aí está. Isso é TypeScript. Isso é tudo o que eu vou abordar hoje. TypeScript, novamente, é um desses tópicos sobre os quais você pode criar um curso de quatro horas criar um curso de quatro horas e é mais o programa E, portanto, não é realmente para iniciantes, mas se você o vê em uso em um projeto, pelo menos sabe o que está fazendo. , é uma grande variedade de desenvolvimento web de front-end moderno Atualmente, é uma grande variedade de desenvolvimento web de front-end moderno, mesmo que seja um pouco mais complicado de entender. Eu queria incluí-lo para que vocês pudessem ver algumas das ferramentas que usamos no desenvolvimento web de front-end em ação. Isso mesmo, provavelmente é uma das lições mais avançadas, provavelmente a lição mais avançada desta classe. Estou passando muito rapidamente por aqui. Parabéns se você ainda está acompanhando. Vou deixá-lo lá para o TypeScript. Vamos continuar falando sobre estruturas de JavaScript no próximo vídeo. 9. Quadros com javascript: Neste vídeo, vamos falar sobre estruturas de front-end. Atualmente, tenho o estado do JavaScript. É uma pesquisa anual. Eu tenho o site para isso na minha tela aqui, e falaremos sobre algumas das estruturas de front-end de JavaScript mais populares que estão se desenvolvendo um pouco. Mas antes de entrarmos nisso, quero dar um passo atrás e discutir o jQuery. jQuery foi a biblioteca JavaScript sobre a qual falei na minha primeira aula do Skillshare chamada Understanding Web Development, e o jQuery era muito popular naquela época, em 2018 e antes, porque o que é chamado de JavaScript Vanilla, que é o JavaScript sem nenhuma biblioteca ou estrutura, não era tão avançado quanto é hoje. Então, como você viu no vídeo que acabamos com o TypeScript e o JavaScript, conseguimos fazer tudo isso sem nenhum jQuery, e agora podemos fazer muitas das funções que o jQuery nos permitiu fazer nas versões mais modernas do JavaScript. jQuery está se tornando cada vez mais obsoleto, mas esse não é o único fator. Há outro fator, que é que estamos entrando mais nesse mundo de aplicativos da web agora, onde os sites estão se tornando muito mais parecidos com programas executados em seu navegador e menos com sites com funcionalidade mínima. Se você tem alguma experiência com jQuery ou se eu já fiz o curso antes, você saberá como o jQuery funciona. É muito parecido com o que fizemos aqui onde pegamos elementos diferentes. Adicionamos ouvintes de eventos a eles e, se determinados eventos fossem acionados, acionaríamos outras coisas. Podemos fazer tudo trabalhando com o DOM, também conhecido como Modelo de Objeto de Documento, que é basicamente todos os elementos do que é basicamente todos os elementos do nosso documento HTML. Podemos modificá-los usando jQuery, mas agora quase com a mesma facilidade por meio do Vanilla JS. Vanilla, novamente, significa que não está anexado a nenhuma biblioteca ou estrutura. É apenas JavaScript puro. O JavaScript, como linguagem em si , se popularizou em termos de funcionalidade. Mas para coisas em que gerenciamos o estado, como levar dados para o front-end e depois manipulá-los no front-end em tempo real, começamos a nos beneficiar de algo como uma estrutura de front-end. Agora, eu sei que parece muito conceitual e teórico no momento, mas você verá, enquanto eu construo algo no Vue nesta lição, como realmente faz sentido usar uma estrutura de front-end. Antes de fazermos isso, vamos dar uma olhada em algumas das estruturas e bibliotecas de front-end populares em uso atualmente. Aqui, de acordo com a pesquisa, você pode ver quais são populares, quais estão em declínio, quais estão em declínio no momento em que você estiver assistindo este 2022. Talvez não sejam as pesquisas mais recentes, então confira o estado do site de JavaScript e veja quais estruturas ainda são populares, ficando menos populares, ficando mais populares. Mas os três principais são React, Vue e Angular, conforme escrito aqui. Mas, como você pode ver, o Angular realmente caiu em popularidade, e esse chamado Preact, que eu nunca usei antes, é mais popular do que o Angular pelo que parece. Ember era algo popular antigamente , mas continua em declínio. Svelte se tornou muito popular. Há novos surgindo o tempo todo. É muito louco. Há muitas coisas sobre as quais falar. Mas aqueles que já existem há algum tempo, React, Vue e Angular, ainda são bastante populares. Obviamente, o Vue diminuiu um pouco, mas o React também diminuiu um pouco, mas isso porque a concorrência aumentou e há todos esses novos, mas os três principais foram React, Vue e Angular. Agora, a maior parte da minha experiência é com o Vue JS, acho que é fácil começar a Vue e é o que eu mais uso. Neste vídeo, vou demonstrar o que uma estrutura de front-end faz no Vue, mas os mesmos conceitos de uso de uma estrutura de front-end devem ser aplicados ao React, Angular ou a qualquer um desses outros frameworks de front-end. Agora, antes de criarmos alguma interatividade de front-end com o Vue, vamos dar uma olhada em um exemplo no mundo real. Aqui está um site de comércio eletrônico que ajudei a criar, e o Vue é usado em muitos lugares aqui. Se entrarmos em uma página de coleção, vamos dar uma olhada na coleção de botas antigas. Se rolarmos para baixo, você pode ver que temos esses filtros aqui. Podemos filtrar por homens, mulheres ou crianças, e esse filtro é adicionado aqui, e tudo isso sem recarregar a página. Temos muita interatividade de front-end aqui. Na verdade, isso é utilizar uma API e analisar os dados do back-end. Mas, como você pode ver aqui, não há produtos encontrados dentro dessas faixas de preço, e podemos filtrar por cor, e isso está nos proporcionando interatividade de front-end. Temos nosso estado aqui, que é o estado dos filtros da coleção, e eu posso atualizar o estado em tempo real e a página responde a isso. O mesmo pode ser dito se olharmos para um produto específico. Você pode ver aqui a seleção da variante. Aqui, não há muita mudança quando mudamos a variante, mas como você pode ver aqui, o Tamanho 7, resta apenas uma. Se mudarmos para 7,5, isso determinará automaticamente o nível do estoque e nos mostrará uma baixa notificação de estoque. Alguns deles têm várias variantes, acho que a preta aqui. Podemos carregar de forma mais dinâmica por aqui. Aqui está, o de Kununurra, acho que ele tem várias dimensões. Você pode ver aqui que, se selecionarmos algumas opções e encontrarmos uma variante que não existe, ela dirá, desculpe, isso não está disponível e ocultará o botão Adicionar ao carrinho. Mas se selecionarmos um que esteja disponível, temos um carrinho aqui, e esse carrinho também é Vue. Podemos atualizar o número de itens neste carrinho e, em seguida, o subtotal aqui e o subtotal aqui estão aumentando, e podemos até mesmo remover completamente esse item de linha sem recarregar a página. Você pode ver que temos algumas funcionalidades do aplicativo em nossa página inicial. Este é um grande avanço em relação à Web 1.0, que está apenas exibindo informações na página. Na verdade, vamos criar uma funcionalidade de tipo semelhante aqui. Vamos refatorar o código da gaveta e depois adicionaremos outra coisa. Para a gaveta, vamos tirar esse botão do conteúdo principal e talvez colocá-lo no menu da barra lateral. Vamos ver. Gavetas abertas, gaveta fechada. Ok, legal e então vamos substituir isso por uma página de produto. Fique comigo aqui, vou criar uma div de produto e dentro dessa div de produto, vou ter duas colunas, uma para as informações do produto e outra para a imagem, e vamos tornar isso estático para começar. Vou pegar algumas imagens e inseri-las em nossa pasta aqui. O produto em questão será um sapato, então temos branco com listra preta e a segunda variante será o oposto preto com listra branca e essas duas são imagens WebP. Eu vou voltar aqui e vamos começar com preto com listra branca. Vou colocar essa imagem lá e depois colocarei as informações do produto desse sapato, que é um tênis Nike. Este é um Nike Air Force 107. Eu acredito que o nome Força Aérea é duas palavras. Em seguida, criarei uma div com a classe de preço aqui. Vou colocar o preço de 170 abaixo disso. Vou colocar um menu suspenso para selecionar qual variante queremos. Fizemos isso no vídeo em HTML. Podemos colocá-lo na opção, preto com listra branca. A única coisa que não fizemos na última vez foi definir um valor para isso. O valor é que isso vai ser preto com faixa branca. Pronto, e então o segundo valor será o oposto. Branco com listra preta e depois aqui, branco com listra preta. Vou clicar em “Salvar” nisso. Vamos dar uma olhada em como isso aparece em nosso navegador. Como você pode ver aqui, a imagem é gigantesca e há alguns estilos que precisam ser feitos aqui. Vamos voltar. Ainda estamos usando o SAS aqui. Acesse styles.css e vamos antes das consultas de mídia. Isso não deveria estar aqui, deveria estar apenas no CSS de saída. Vou me livrar disso e, aqui, podemos inserir os estilos do produto e, como estamos usando o SAS, podemos usar todo o agrupamento disponível para nós. O que vou fazer é não falar muito sobre meu padrão de pensamento com esses estilos porque já falamos sobre CSS, mas vou adicionar alguns estilos aqui para começar, porque nesta lição, vamos tentar aprender sobre o Vue. Vou configurar o produto para exibir a grade e, em seguida, nossas colunas de modelo serão 1FR, uma, então duas colunas do mesmo tamanho. Vou fazer com que a largura máxima dessa área seja 100%. Às vezes, os limites da imagem podem sair do contêiner, então queremos evitar isso. Vou dar a toda essa área um pouco de preenchimento, 20 pixels de preenchimento e, em seguida, um espaço de coluna entre essas duas colunas de 20 pixels. E, como estamos usando SA, posso simplesmente aninhar a imagem que está dentro da div com produtos e também posso afetar isso. Novamente, queremos que a largura máxima seja 100% e não acho que precisemos especificar o início e o fim. Se eu for até aqui, tudo bem. Isso deve funcionar. Não sei por que esse é o caso. Está um pouco errado aqui. Deixe-me carregá-lo novamente. Lá vamos nós. Vamos lá. Ainda podemos abrir nossa gaveta ou dar uma olhada na página do produto e ver nossa imagem lá. Acho que faz mais sentido ter a imagem no lado esquerdo. Vou movê-lo para outro lugar. Imagem à esquerda e, em seguida, informações do produto à direita. Aqui você pode ver quando mudamos nosso menu suspenso aqui, nada acontece porque, é claro, precisamos atualizar a imagem, o preço, se necessário, e qualquer outra informação quando atualizamos aqui. Agora, vamos primeiro tentar isso no JavaScript Vanilla e ver como funciona. Desta vez, não vou colocar isso nos roteiros aqui. O que vou fazer é colocá-lo em linha para que possamos vê-lo na mesma página. Vá abaixo aqui, abaixo dos produtos, e digite o script. Antes de escrever qualquer ouvinte de eventos para interação na página, vou criar uma matriz de variações, então vou dizer product_variant. Acho que não precisamos disso agora. Nos dê um pouco mais de espaço. Isso é bom. Então eu vou abrir uma matriz, e essa vai ser uma matriz de objetos. Vamos fazer os primeiros atributos. Portanto, cada variante terá um ID com um ID de um estilo. Isso será apenas o que está nesse campo de valor, então o primeiro será preto com listras brancas ou, em vez disso, uma faixa branca singular. A imagem será vinculada ao endereço da imagem. Com o preto com listra branca, nós o temos lá. Basta copiar esse endereço e depois o preço de 170. Vou copiar esse objeto, criar a segunda variante com base nisso. O ID será dois e, em vez de preto com listra branca, branco com faixa preta. Então, vamos fazer com que o preço seja um pouco diferente para que possamos mudar outra coisa na página. Mas, na realidade, ambos têm o mesmo preço no site da Nike. Então, agora podemos começar a escrever para nossos ouvintes do evento. Como mostrei antes, quero ter certeza de que os elementos na página foram carregados primeiro, então vou adicionar um ouvinte de eventos para conteúdo DOM do evento carregado e, em seguida, abrir uma função aqui. Agora, isso só será executado quando tudo na página for carregado e, quando for esse o caso, vou direcionar essa seleção aqui. Vamos dar a ele uma classe, classe de produtos, seleção de variantes. Vamos chamá-lo assim. Vou descer até aqui. Documentos. Na verdade, vamos dividi-los. Você pode ver isso aqui em cima. Há uma seleção aqui que estamos visando. Documentos, seletor de consultas e, em seguida, podemos segmentá-lo por essa classe. Lembre-se de que estamos colocando o ponto primeiro para indicar classe, seleção de variantes. Isso nos dará o elemento de seleção, que é o menu suspenso, e depois adicionaremos um ouvinte de eventos para o evento de mudança. Quando isso mudar , escreveremos aqui uma função. Vou fechar isso. Na verdade, queremos pegar o elemento em que a mudança está acontecendo, então podemos fazer isso colocando uma discussão aqui e, em seguida, o que podemos fazer é consolar, desconectá-la. Antes de nos anteciparmos, vamos verificar se isso está funcionando. Eu vou ser capaz de encontrar os alvos atuais do evento, então isso significa o elemento no qual o evento foi acionado. Vamos abrir nosso console e, se eu mudar isso, você verá que obtemos o HTML da seleção de volta para nós. O que vou fazer é agrupar o valor aqui, clicar em “Salvar” para atualizar, e aqui você pode ver que o valor é branco com faixa preta. Quando eu seleciono preto com listra branca, estamos recuperando o valor. Agora, o que podemos fazer é comentar isso e vamos retornar o objeto dessa variação agora que sabemos qual deles estamos tentando selecionar. Em primeiro lugar, vou armazenar esse valor como sua própria constante, então vou dizer que o estilo selecionado constante é igual ao valor obtido. Em seguida, vou selecionar a variante do produto usando o método Localizar. O que podemos fazer é direcionar toda a matriz aqui, e então podemos encontrar um item específico na matriz usando find. Isso pode parecer um pouco estranho, mas dentro da função aqui, somos capazes de passar por cada uma das variâncias, então vou digitar a variante, diga isso. Então, aqui colocamos a condição após retorno do objeto variante que desejamos devolver. Estilo de variante de retorno, que é o atributo que estamos tentando combinar com nosso estilo atualmente selecionado. Agora, vamos fazer o registro do console para ver se esse objeto está voltando com sucesso. Atualize a variante do produto aqui. Agora, se eu mudar para aqui, você pode ver que recuperamos o objeto inteiro agora. Podemos usar esse objeto para atualizar todas as coisas diferentes em nossa página de produto. Então, é só uma simples questão de especificar onde queremos que isso mude. Precisamos selecionar todos os diferentes elementos e atualizar manualmente seus atributos. Vamos dar uma olhada na imagem, então vamos usar o seletor de documentos, de consultas e, em seguida, vamos criar produtos, imagens. Estamos usando um seletor CSS para encontrá-lo aqui e, em seguida, atualizaremos o SRC para a nova variante de produto que selecionamos e encontraremos o atributo Imagem dessa variante. Em seguida, vamos atualizar o preço, que eu acho que é o único outro aqui até começarmos a adicionar mais preço ao produto, e então, para esse, só precisamos alterar o preço em pontos da variante interna do produto HTML para reduzir o preço do objeto. Tudo bem, clique em “Salvar”, atualize e agora você pode ver quando o evento de alteração é acionado, determinamos o objeto que tem todas as informações e, em seguida, trocamos manualmente o HTML interno desse elemento e o SRC desse elemento para alterar a imagem que se alinha com o objeto recém-selecionado. Agora, com um exemplo simples como esse, há apenas dois pontos em que estamos alterando as informações. É perfeitamente normal usar o JavaScript Vanilla aqui. Mas o problema que temos aqui não é realmente um problema, mas algo que pode ser melhorado é que precisamos especificar. Isso começa com um determinado SRC, com uma determinada imagem, e isso começa com uma determinada opção selecionada, um determinado preço e, em cada seleção, precisamos encontrar a variante da lista aqui, o que é bom. Mas então temos que atualizar manualmente todos os elementos. Há apenas dois aqui, então não é grande coisa. Mas quando começarmos a ter um projeto maior, haverá uma descrição do produto, talvez variantes diferentes, dados que alimentam os outros dados, podem se tornar incontroláveis. É por isso que temos algo como uma estrutura de front-end. Temos uma estrutura de front-end por vários motivos, mas um dos grandes motivos é a reatividade. Agora, para entender isso, teremos que ver isso em ação. A maneira como vou fazer isso agora é refatorar esse código no Vue. Agora vamos falar sobre o Vue. Vue é um dos três frameworks de front-end populares que mencionei no início do vídeo. React Vue e angular, e Vue é a estrutura de front-end com a qual eu tenho mais experiência, então vou usar o Vue como exemplo para este vídeo. Vue também é muito fácil de configurar e incluir em qualquer projeto na web. Se você usa a CLI para criar um aplicativo inteiro baseado no Vue ou simplesmente trazê-lo para determinadas páginas. Vue é bastante flexível e, portanto, gosto de usá-lo e acho que é uma boa escolha para este vídeo. Se você quiser saber mais sobre isso, acesse Vue js.org. Há diferentes maneiras de instalá-lo, mas vamos usar o método CDN. CDN, que significa Rede de entrega de conteúdo. Basicamente, podemos trazer o script de uma fonte externa e começar a usá-lo em qualquer arquivo HTML. Eu vou fazer isso, não vou usar esse aqui. Vou usar, se voltarmos aqui, agora vamos comentar isso porque vamos fazer isso no Vue. Antes da tag do script, vou inserir nossa referência à versão de desenvolvimento mais recente do Vue, que é o que obteremos aqui, https://umpkg.com/vue@next. Então, o que vamos fazer é criar nosso aplicativo Vue embaixo . Precisamos de um objeto de opções, então vou chamar isso de opções. Isso vai ser um objeto e é aqui que colocamos todas as nossas configurações para o aplicativo Vue, e aqui eu vou escrever o aplicativo Vue cria. O primeiro e único argumento serão essas opções, aquele objeto que contém as opções. Então, vou encadear um método de montagem por pontos e, em seguida, precisamos descobrir onde estamos montando isso. Vamos entrar nessa área principal aqui e executar o aplicativo nesta div. Acho que já estamos dentro da div, então vamos sair. Aqui está a div completa da seção principal, então vou copiá-la e colá-la ou recortá-la e colá-la abaixo. Queremos mantê-lo fora da div que estamos segmentando, e vamos chamar isso de aplicativo Vue. Então podemos ir até aqui, montar o aplicativo Hash Vue. Dentro dessas opções, podemos armazenar dados, então fazemos isso inserindo um método e, em seguida, esse método retorna um objeto e, em seguida, esse objeto podemos colocar em nossas variantes de produto. Podemos simplesmente copiar esses dois objetos e jogá-los aqui. Eles estão comentados no momento, então vou remover esses comentários, e agora temos alguns dados em nossa instância Vue, essa matriz de variantes de produto, que contém a matriz de todas as diferentes variantes do produto. Depois dessa matriz, o que eu quero armazenar é a variante atualmente selecionada. Vou fazer isso usando o estilo atual e definiremos isso como padrão, que é preto com listra branca. Esses são nossos dados, a seleção atual e, em seguida, os dois objetos que compõem nossas variantes. Isso pode muito bem ser vários objetos, este é apenas um exemplo básico. Agora, tudo o que vamos fazer é, fora desse método de dados inserir algo chamado computado. Abra um objeto dentro do computado, e aqui é onde colocamos as propriedades computadas. As propriedades computadas são propriedades reativas, basicamente quaisquer dados que usamos na instância do Vue para criá-los. Se esses dados forem atualizados, esses campos computados também serão atualizados. Este é o lugar perfeito para colocar nossas variantes atuais, que serão armazenadas como um método aqui. Com variantes computadas, queremos apenas retornar um único valor. Mas um único valor pode depender de outros dados que temos em nosso aplicativo Vue. Assim como fizemos aqui, onde encontramos uma variante nessa matriz de variantes de produto, faremos a mesma coisa aqui em cima, mas vamos fazer isso da maneira ES6, então da maneira mais moderna. O que vamos fazer é usar isso, que nos dará acesso à instância Vue, que podemos então analisar os dados, e então vamos dizer productvariants.find, e então a versão curta do que tínhamos aqui embaixo, variantes em que o estilo da variante é igual ao estilo atual, mas temos que dizer this.currentstyle. Lá vamos nós. Isso deve ser suficiente. Agora que definimos essas opções, apenas as duas variáveis aqui em nossos dados e a propriedade computada, agora podemos atualizar nosso HTML neste aplicativo Vue com atributos especiais do Vue, e isso garantirá que todos os dados dentro do nosso HTML aqui estejam atualizados. Aqui, para tornar isso dinâmico, vou substituir o src por dois pontos e, em seguida, colocaremos os dados da variante atual. Eu vou dizer currentvariant.image. Aqui, quanto ao preço, vou removê-lo e adicionar um atributo aqui chamado v-html, e queremos definir isso como o preço da variante atual. Agora, aqui embaixo, não precisamos mais dessa classe, só precisamos adicionar o atributo especial Vue do modelo V. Quaisquer valores que definirmos aqui irão diretamente para os dados armazenados em nosso aplicativo Vue e, portanto, obteremos os dados do estilo atual para modelar a seleção aqui. Vou clicar em “Salvar” nisso. Agora vamos atualizar e ir até nossa página aqui e ver se funciona. Mudamos e agora você pode ver que o preço está mudando e a imagem está mudando, e tudo isso é feito de forma dinâmica. Na verdade, se você tem o Vue DevTools instalado, então se eu for até aqui, acho que preciso reabrir meu DevTools aqui. Você pode ver que há uma guia para o Vue. Eu tenho o Vue DevTools instalado e você pode ver aqui a representação ao vivo dos dados no computador. Você pode ver aqui que a variante atualmente selecionada é a Número 2, que é consistente com o estilo atual de branco com faixa preta, e você pode ver aqui os dados brutos das variantes do produto. Se eu acabei de mudar isso, você pode ver as mudanças de estilo atuais e, portanto, com elas, a variante atual. Agora, o que estamos fazendo é adicionar variáveis aqui para o src, para o preço, e isso é atualizado quando atualizamos nosso estilo atual, que está vinculado a agora ao que selecionamos aqui. Só precisamos fazer uma pequena configuração básica aqui, e agora obtemos essa reatividade automática. Agora você pode estar pensando que isso levou tanto código quanto nós gastamos aqui e tanto tempo para configurar. Mas quando o aplicativo fica cada vez mais complexo, a reatividade se torna ainda mais importante. Se fôssemos adicionar, digamos apenas uma descrição em cada uma dessas descrições, e diremos que é um sapato preto com listras brancas, e então alteraremos a descrição aqui para que seja um sapato branco com listras pretas. Agora podemos facilmente entrar aqui, criar um novo div, inserir V-HTML e, em seguida, pegar a descrição da variante atual. Coloque isso aqui, agora, se atualizarmos aqui e mudarmos isso, estamos alterando mais dados na tela. Obviamente, não está configurado perfeitamente, o estilo não é incrível. Mas, como você pode ver, quando começamos a armazenar mais dados, mais estados em nossa página aqui, o componente de reatividade do Vue se torna muito útil. Espero que você possa ver que, obviamente, quanto mais complexo o projeto se torna, mais um projeto se beneficia do Vue. Mas, como você pode ver, é um paradigma diferente aqui. Adicionar esses valores dinâmicos usando esses atributos do Vue em nosso HTML em comparação com a necessidade de executar esses ouvintes de eventos e, em seguida, atualizar manualmente o conteúdo usando o JavaScript Vanilla, que tínhamos aqui embaixo. Veja um exemplo de estrutura de front-end na forma do Vue e como a reatividade é útil. Novamente, se você não quiser usá-lo ou não entender, não precisa, esse é um recurso opcional, mas algo muito popular no desenvolvimento web de front-end, especialmente quando você está começando a criar sites e aplicativos da web superinterativos. Mas é claro que não é obrigatório, você sempre pode usar o JavaScript Vanilla, como fizemos anteriormente neste vídeo, se quiser que ele faça isso. Se você não sentir a necessidade ou não vê o benefício disso , sinta-se à vontade para ignorá-lo. Confie em mim quando digo isso, se você começar a entrar em projetos mais complexos com muita interatividade, você começa a valorizar algo como um Vue ou um react quando começa a entrar nessas situações. 10. CSS de Tailwind: Neste vídeo, falaremos sobre o Tailwind CSS, que é uma estrutura CSS de código aberto. A principal característica desta biblioteca, como diz aqui é que, ao contrário de outras estruturas CSS, como o Bootstrap, ela não fornece uma série de classes predefinidas para elementos como botões e tabelas. Falamos sobre Bootstrap entender o desenvolvimento web. Era muito popular naquela época e ainda é popular, mas o problema do Bootstrap é quando você o usa em sites. Todos parecem ter a mesma aparência. Tailwind não é assim em comparação. Em vez de uma biblioteca de componentes, é um conjunto de utilitários, e o que esses utilitários nos permitem fazer é escrever menos CSS e usar esses utilitários. Você entenderá o que quero dizer em apenas um segundo. Vamos dar uma olhada no site e o site deles é muito bom, como você pode ver aqui. Você pode ver isso acontecendo em tempo real aqui. Em vez de escrever CSS, o que você pode fazer é simplesmente adicionar classes especiais do Tailwind ao div e, em classes especiais do Tailwind ao seguida, ele o atualizará rapidamente. Aqui você pode ver que estamos atualizando os textos, estamos atualizando o layout. Tudo está acontecendo sem entrar no CSS e você pode ver aqui que também podemos fazer consultas de mídia de dentro do HTML. Podemos alterar os atributos com base na largura da tela de dentro do HTML. Agora, pessoalmente, não sou muito fã de incluir tantas classes em um único elemento. Você pode começar a ver que o HTML começa a ficar um pouco confuso quando você usa isso, mas o que você pode fazer para mitigar isso é criar suas próprias classes e , em seguida, aplicá-las em uma classe e substituí-las aqui por uma única classe. Isso é o que eu vou mostrar neste vídeo também. Aqui você pode ver mais sobre isso. Vamos ver do que mais eles estão falando. Sim, como eu disse, não são componentes específicos, classes utilitárias, então você pode criar seus próprios componentes aqui, mas use essas classes de utilitários que também têm definições definidas, então você verá que isso nos força a acessar uma determinada grade. Bem, isso não nos força, mas nos incentiva a usar determinados incrementos de tamanhos diferentes, que também nos ajuda a criar um design mais consistente. É bom que você não entenda de design, você pode simplesmente adivinhar o que é visto. Ele também vem com esquemas de cores, então acho que vi algo sobre os esquemas de cores aqui embaixo. Um deles se chama Slate. Na verdade, esta é uma primeira página muito boa. Você pode ver aqui text-slate-500, então você pode usar esses esquemas de cores. Um deles é chamado de ardósia. Você pode ver exemplos na primeira página, mas precisa realmente acessar a documentação. Vamos lá. Podemos entrar em documentos, esquemas de cores ou cores de decoração de texto. Como entramos nos esquemas de cores se eu digitar em ardósia? Às vezes, a documentação é um pouco difícil de pesquisar. Vamos lá. Em Personalização, você pode ir para Cores e ver aqui que temos essas paletas de cores ver aqui que temos essas paletas aqui que são boas, então, se escolhermos uma paleta de cores, podemos escolher criar nosso aplicativo nesses diferentes tons dessa cor. De qualquer forma, veremos tudo isso na prática em breve, então o que precisamos fazer é criar um projeto Node para isso. Podemos usar um CDN, mas não é tão fácil quanto o que acabamos de fazer com o Vue. Você viu aqui que, em vez de instalar o pacote Vue, simplesmente pegamos o vue armazenado no servidor de outra pessoa e o trouxemos aqui. Para isso, vamos realmente introduzir o código Tailwind, e a vantagem disso é que não dependemos de um servidor externo, especialmente quando estamos executando muitas coisas diferentes ao mesmo tempo. Se adicionarmos muitas solicitações externas para capturar bibliotecas, isso tornará nosso aplicativo mais lento e poderá resultar em falhas, então o que vamos fazer é criar um projeto de node aqui. A vantagem de transformar isso em um projeto de node é que podemos começar a instalar módulos de nós sobre os quais falamos antes quando analisamos npm e podemos começar a usá-los em nosso código. Ele é instalado com o diretório e é um sistema padronizado para que não precisemos fazer chamadas para código externo ou o código seja armazenado em nosso próprio projeto. Vamos fazer isso agora. Vou abrir um terminal pressionando “Shift Control Backtick”. Vou abrir um novo terminal aqui e depois vou executar o npm init. Antes de fazer isso, mais uma vez, precisamos verificar se temos o npm instalado. Sim, nós temos. Agora podemos fazer npm init. Isso está funcionando para que possamos escrever o que quisermos em cada uma dessas opções, mas vou clicar em “Enter”. Não precisamos especificar nenhuma informação específica aqui e, em seguida, o que obteremos é um arquivo package.json. Por padrão, o nome será qualquer que seja o nome da pasta. A versão por padrão será 1.0.0. A descrição ficará em branco e , como você pode ver, todos os outros padrões aqui. Um dos benefícios de ter esses arquivos package.json é que podemos configurar nossos próprios scripts aqui, o que servirá para gerenciar o processo de construção do Tailwind, mas a principal coisa que esse package.json faz é armazenar a lista de pacotes dependentes de que precisamos para executar esse aplicativo ou página da web em particular. Tudo bem, então, sem mais delongas, vamos instalar o Tailwinds. Vou escrever npm install. Vou colocar o sinalizador D que o instalará como uma dependência de desenvolvimento e depois colocarei tailwindcss, que é o nome do pacote. Vou clicar em “Enter” nele, e agora ele vai ser instalado, e quando for instalado duas coisas acontecerão. Vamos obter essa nova pasta aqui chamada node_modules e, em nosso arquivo package.json , você pode ver que temos a versão 3.2.7 do tailwindcss, que provavelmente é a versão mais recente no momento da gravação. Teremos isso em nossas devDependencies e teremos todo o código necessário para tailwindcss dessa versão armazenado em nossa pasta node_modules. Nesta pasta, se entrarmos, você pode ver muitos e toneladas de pacotes diferentes aqui, incluindo tailwindcss, e a razão pela qual existem todos esses outros aqui é porque há uma árvore de dependências, então tailwindcss pode depender de outros módulos que também têm suas próprias dependências e, portanto, todas as dependências fluindo, todos os pacotes recebem instalado nos módulos do seu node. Se formos para o arquivo package.json do tailwinds que você pode ver aqui, veja todas as devDependencies aqui, e então ele instalará todas essas devDependencies e as devDependencies delas também, então é para isso que serve o tempo de carregamento. Cada um desses pacotes tem seu próprio package.json e, portanto, eles podem se empilhar uns sobre os outros, e isso é essencialmente o sistema npm. Quando publicarmos nosso projeto npm na web posteriormente nesta aula, mostrarei como fazer isso. Ignoramos completamente essa pasta porque este documento aqui registra o devDependency e, sempre que abrimos este projeto em um novo computador, mesmo que eles não tenham a pasta node_modules , eles podem criá-la facilmente digitando npm install e todos os devDependencies serão instalados. Vamos fazer isso agora. Vamos remover completamente essa pasta node_modules e, em seguida, executarei o npm install. Eu não removi o devDependency do package.json, então, se eu executar o npm install, ele simplesmente reinstalará todos os módulos do node novamente. Na verdade, não precisamos rastrear ou passar esse conjunto de pastas para ninguém. Podemos simplesmente passar o package.json e qualquer pessoa que execute nossos projetos pode simplesmente executar o npm install e obter os mesmos módulos que temos. Espero que isso chegue em casa. Faz sentido para você. Agora, o que vou fazer é desativar Live Sass Compiler porque agora vamos criar nosso css usando o Tailwind. Não quero confundir você combinando Sass e tentando integrar tudo isso. Vamos apenas mantê-los separados, para que não trabalhemos mais com esse arquivo scss e o que faremos em vez disso, possamos voltar ao nosso terminal aqui. Em vez disso, o que faremos é criar um arquivo input.css e um arquivo output.css aqui, e então só precisamos adicionar esse arquivo output.css ao nosso índice, então entre aqui e vamos mudar isso de estilos para saída. Basicamente, o motivo pelo qual fiz isso é porque vamos colocar todo o nosso código tailwind aqui e vamos colocar todo o nosso código tailwind aqui executar tailwind compile, ele vai entrar neste output.css e é isso que queremos incluir em nosso documento HTML. Se eu for até aqui, você verá que perdemos todo o nosso estilo, mas vamos reconstruí-lo com base no vento de cauda, então vamos fazer isso agora. A forma como podemos compilá-lo é digitando npx tailwind -i input.css. Eu os nomeei de forma muito simples para que você possa ver claramente o que é o arquivo de entrada e o arquivo de saída e, em seguida, o sinalizador -O para determinar a saída que é simplesmente chamada de output.css. Se eu executar isso agora e depois examinarmos o output.css, ainda não temos nada porque esqueci de colocar algumas diretivas aqui. Vou adicionar uma base de vento de cauda, então vamos colocar estilos básicos, componentes de vento de cauda e utilitários de vento de cauda, então esse é um código de vento de cauda. Vamos executar esse comando novamente. Eu posso simplesmente pressionar app e clicar em “Enter”, e então, se olharmos em output.css, você pode ver agora que temos todo esse CSS que aparece, então, se olharmos aqui, atualizemos e uma das coisas que você notará sobre tailwindcss é que ele realmente remove praticamente todo o estilo HTML padrão de o estilo HTML padrão que falamos nos vídeos anteriores. Isso oferece uma configuração muito crua aqui, então nem mesmo os botões se parecem em nada com botões. A única coisa que os torna um botão é o ponteiro do cursor, mas, por outro lado, eles não se parecem nem um pouco com botões, então precisamos estilizá-los nós mesmos. Agora, como esse era um comando um pouco longo, embora tenhamos tornado isso super simples, vou movê-lo para um script em nosso package.json, então vou criar este tailwind: build. Sempre que executarmos tailwind:build, ele fará isso, mas eu também quero criar outro aqui, tailwind:watch, para que não tenhamos que executar build toda vez que fizermos isso. O que podemos fazer é adicionar o mesmo código novamente e colocar a bandeira do relógio aqui. Agora, em nosso terminal, podemos simplesmente executar npm run e, em seguida, podemos executar qualquer script que configuramos aqui, então tailwind:build construirá uma vez ou tailwind:watch com a bandeira watch o construirá e continuará aguardando quaisquer outras alterações. Se eu entrasse aqui e desse ao corpo uma cor de fundo vermelha e clicasse em Salvar, isso seria processado e enviado para o arquivo de saída e, como você pode ver aqui, nosso corpo é vermelho. Não precisamos executar a compilação toda vez que fazemos uma alteração. Sempre que fizermos uma alteração, ela será gravada e enviada diretamente para o output.css e, como estamos executando o servidor ativo, ela é atualizada automaticamente aqui. No momento, nossa configuração está quase concluída. Só precisamos de um arquivo extra em nossa pasta aqui. Ele será chamado tailwind.config.js e eu vou copiar e colar uma configuração padrão aqui. Vou clicar em Salvar e vamos reiniciar nosso processo aqui. Eu pressionei Control X para desligá-lo. Vamos reiniciá-lo apenas para ter certeza de que está usando o arquivo de configuração correto. Mude para aqui e agora poderemos usar os utilitários em nosso HTML. Vamos começar a reconstruir nossa página com o tailwind. Aqui dentro do contêiner da página, costumávamos usar essas classes e depois entrar em nosso arquivo css. Ainda podemos fazer isso, podemos entrar aqui no contêiner da página e reconstruir essa classe com classes do tailwind, para que possamos aplicar e então eu posso adicionar diferentes classes de vento de cauda, e você pode ver aqui o que essas diferentes classes fazem, mas por enquanto não vamos fazer isso. Vamos colocar isso em ordem e depois vou transferi-lo para as aulas um pouco mais tarde. Vamos entrar no índice aqui, e o que precisamos fazer é recuperar a grade de exibição. Podemos simplesmente digitar a grade e, como você pode ver aqui, ela preenche automaticamente a grade, a grade exibição e, em seguida, podemos fornecer uma lacuna de 0,5 rem, que se aproxima de 12 pixels. Isso está dentro de uma lacuna 3. Você pode ver aqui, se eu redigitar isso, você pode ver que o vento de cauda nos encoraja a usar certos incrementos, então zero a quarto rem , a meio rem, três quartos rem, um rem e então ele sobe nesses incrementos e você pode ver no comentário ao lado, quantos pixels isso equivale aproximadamente a, então é bom. Isso reduz as opções aqui, o que torna mais fácil para mim, um desenvolvedor web de front-end descobrir o que colocar aqui. Agora podemos fornecer essa grade aqui e, como você pode ver aqui, grade de exibição, a lacuna deve ser armazenada em algum lugar, talvez precisemos atualizar aqui. Sim, então agora precisamos atualizar , infelizmente. Não sei por quê. Vamos ver que nosso servidor ativo está funcionando. Sim, é. Isso é interessante. Só precisava que eu atualizasse e, obviamente, precisamos configurar nossas colunas de modelo novamente. Infelizmente, para nós, em nosso caso específico que, se usarmos nossos estilos aqui, isso é um pouco específico demais para uma classe padrão de vento de cauda, então o que precisamos fazer é usar um hack dentro do tailwind que nos permita definir um valor arbitrário. Para fazer isso, o que faremos é grid-cols e o truque é abrir colchetes e, a partir daqui, a primeira chamada será definida como minmax auto 150? Podemos definir isso aqui, automático, 150px e então podemos criar um sublinhado aqui para a segunda coluna que, se voltarmos aos estilos, era 3fr. Eu coloquei um espaço aqui. Vamos ver, lá vamos nós. Agora você pode ver que temos o mesmo estilo, mas é na forma de uma aula de vento de cauda. Então vamos até o cabeçalho aqui e eu vou definir o col-start como 1, col-end como 3. Então, aqui é onde podemos começar a usar a ardósia, o esquema de cores sobre o qual falei anteriormente, em vez das cores aleatórias que definimos como as que estavam em primeiro lugar na lista. Aqui, vou usar centenas de tons de ardósia e, em seguida, definiremos a cor de fundo para isso. Salve isso, atualize aqui, e então você pode ver agora que o cabeçalho tem uma cor de fundo e está se estendendo por toda a largura da página em ambas as colunas, então é isso que queremos. Depois do menu de cabeçalho aqui, colocarei flex para exibir flex list-none para o estilo de lista tipo none. Vou colocar p-0 para zero preenchimento nos eixos vertical e horizontal. Justify-center para definir justify content como centro, gap-3 para definir a lacuna da grade para três quartos de rem e, só para vocês saberem , pessoal, todas essas classes estão listadas na documentação. A documentação sobre tailwindcss é muito boa. Eu encorajo você a dar uma olhada. Eu não espero que você se lembre de tudo isso e eu realmente anotei isso, então eu sei exatamente quais colocar aqui. Mas para vocês, acesse tailwindcss.com , acesse os documentos e comece a ler mais sobre isso. Podemos examinar como ele personaliza as cores e você pode ver aqui os diferentes esquemas de cores, o código de cores exato para ardósia 50, ardósia 100, ardósia 700, etc. e um monte de outras informações. É preciso um pouco de curva de aprendizado para descobrir qual é a aula, mas é claro que depois de praticar bastante, você começa a entender essas coisas com mais facilidade, então vamos continuar aqui. Agora vamos para a barra lateral e, para a barra lateral, vou usar bg-slate-200, então um tom um pouco mais escuro para o menu da barra lateral. Eu vou fazer o pl-3, que é o preenchimento à esquerda. Ele vai configurá-lo para 0,75 rem, depois vou definir meus atributos flexíveis, então vou definir grow para definir flex grow para um. Vou colocar shrink-0 para definir flex shrink para zero, e então basis-24, que é aproximadamente 100, 96, e então deve ser isso. Guarde isso, refresque-se aqui, está muito bonita. O botão agora perdeu completamente seu estilo. Vamos entrar aqui e dar a ele um monte de novos estilos px-3 que lhe darão um preenchimento para a esquerda e para a direita, então basicamente preenchendo o eixo x, depois vamos preenchê-lo no eixo vertical, então preenchendo a parte superior e inferior de dois. Um pouco menos arredondado para dar um raio de borda ao botão pg-slate. Usaremos a paleta de cores de ardósia novamente e usaremos um tom mais escuro de 600. Também usaremos ardósia para a cor do texto. Só preciso ter certeza de que há contraste suficiente aqui, então vou configurá-lo para 50, um tom muito mais claro e depois m-1, que define a margem para quatro pixels ou 0,25 rem. Eu clico em Salvar nisso. Vamos dar uma olhada aqui e agora temos o estilo do botão. Agora, aqui em cima, temos essa lacuna de coluna. Não queremos isso, então vamos voltar aqui. Na lacuna 3, queremos que seja apenas uma coluna, então lá está col-gap-1. Às vezes, em vez de examinar a documentação, você pode adivinhar, então talvez possamos fazer gap-x. Lá vamos nós. Espaço entre colunas, quanto eram três? Pronto, e então não temos mais essa lacuna entre as linhas, apenas entre as colunas. Agora vamos para o menu da barra lateral. Listas-none para o estilo de lista nenhum, p-0 para sem preenchimento e, em seguida, queremos estender toda a largura, então faremos alturas. Vamos ver quais são as opções. Podemos percorrer tudo isso, ver se há uma opção aqui para 100%, h-4. Vamos tentar isso. Salve, atualize aqui. Agora, para alturas 100% legais e, como você pode ver aqui, não precisamos atualizar os estilos dos links porque eles já foram retirados do vento de cauda. Se quisermos trazer de volta esse estado de flutuação, podemos realmente fazer isso em ventos favoráveis fazendo essa classe e, em seguida, podemos colocar a pseudo-classe aqui hover:underlying deve nos dar a decoração do texto, mas eu clico em Salvar nela. Vamos dar uma olhada, atualizar. Aí está, então está funcionando. Só precisamos copiar isso para todos os outros aqui, vamos lá. Então, aqui também vou criar esse hover:state. Guarde isso. Agora você pode ver o hover:state acontecendo aqui. Não precisamos criar uma classe separada para isso. Podemos literalmente colocar isso no elemento em si, então coisas assim eu realmente agradeço. Isso é muito legal, e só por um tempo, vou remover essa visão aqui em cima, não vamos fazer mais nenhuma visualização nesta aula. Vou manter esta seção com a classe principal. Livre-se de todo esse código de visualização aqui. Voltando ao que estávamos fazendo antes. Não acho que precisemos colocar nenhum estilo especial na gaveta principal, mas para a gaveta, o que precisamos fazer é dar a ela um fundo de 200 ardósias. Queremos atingir a altura total da tela com a tela H. A posição precisa ser absoluta e eu posso fazer isso digitando um top 0 absoluto para definir os dois primeiros zero pixels. Largura, eu quero que seja metade da largura da janela de visualização. Esse é um valor arbitrário. Não acredito que o Tailwind tenha uma opção para isso, então vou abrir colchetes aqui, 50 de largura da janela de visualização, depois vou fazer a direita 0 para definir o atributo certo para zero pixels e, em seguida, vou facilitar para mim e colocar tudo de transição. Como você pode ver aqui, ele definirá vários parâmetros aqui, mas essencialmente isso criará a transição. Se vimos antes em styles.css, especificamos a transição para se aplicar apenas ao atributo correto, mas podemos facilmente colocá-la em todos, e então eles cobrirão todos eles que eu acho que faz sentido. Em seguida temos nosso botão aqui, que podemos simplesmente copiar as mesmas classes que temos para o outro botão. Lá vamos nós. Coloque isso aqui embaixo, corrija o espaçamento. Então, se eu clicar em Salvar nisso, vamos atualizar aqui. O desenho é exibido por padrão, se eu abrir isso e dar uma olhada nisso. Você pode ver que a gaveta está atualmente definida como zero à direita. Precisamos dar a ele um conjunto diferente de estilo se aria-hidden for verdadeira. Felizmente para nós do Tailwind, esse é um recurso em que você pode simplesmente usar dois pontos ocultos em ária e podemos definir uma classe para aplicada apenas se aria-hidden for verdadeira. Então, posso usar um valor negativo aqui à direita para corrigir, acho que está cheio para 100%. Se eu rolar até aqui, você pode ver na íntegra. Atualize aqui, a gaveta não será aberta por padrão. Aí está e eu posso abri-lo e fechá-lo aqui. Na verdade, isso precisa estender toda a altura. Talvez precisemos definir a altura da grade para 100%. Esquecemos de definir a altura da grade para 100%. Vou entrar aqui, fazer isso fora da rede e depois faremos h4, acho que por 100%. Vamos dar uma olhada. Altura, 100%. Então esquecemos de usar nosso estilo para o tamanho da linha. Nossas linhas de modelo de grade tinham 50 pixels, 1fr. Esse provavelmente vai ser um pouco complicado. Linhas de grade e, em seguida vamos colocar um valor arbitrário aqui, 50 pixels, 1fr. Vamos ver se isso funciona. Refresque-se aqui e eis que funciona. Aí está, 50 pixels, 1fr, que é o que tínhamos aqui. Agora temos nossa barra lateral de cabeçalho. Nossa gaveta está funcionando e tudo foi recriado no Tailwind. Eu só quero colocar um pouco de conteúdo principal aqui, conteúdo principal para que possamos colocar o que quisermos aqui. Temos o conteúdo principal aqui e talvez queiramos colocar um pouco de preenchimento lá também. Talvez esse seja um conteúdo principal h1, mas, novamente, faixas de tailwinds ou esses CSS padrão. Só de dar a ele o elemento de h1, isso não significa necessariamente que ele será maior. O que precisamos fazer é especificar nossas classes aqui. Podemos escrever texto 5xl e fonte em negrito para torná-lo maior e mais ousado e agora você pode ver que temos um título maior aqui. entanto, ele não vem com nenhuma margem, temos que especificar isso nós mesmos. Vamos lá. Vamos fazer o my-2 para dar um pouco de preenchimento superior e inferior, e isso deve bastar por enquanto. Tudo está funcionando lá e recriamos nosso layout usando o Tailwind CSS. Agora, há um grande problema aqui para mim, eu não sei, alguns como esse, mas temos atributos ridiculamente longos para as aulas aqui. tenho que rolar para o outro lado da página Às vezes, tenho que rolar para o outro lado da página apenas para visualizá-los Prefiro escrever nomes descritivos em classes em vez de apenas classes utilitárias. Por um tempo, eu não queria usar o Tailwind por causa disso. Eu pensei que isso é muito bagunçado. Gosto de escrever boas classes descritivas , como contêiner de página e menu de cabeçalho, como fizemos no passado. Mas, na verdade, existe uma maneira de obter o melhor dos dois mundos e eu vou te mostrar isso agora. Se usarmos nosso CSS de entrada, podemos realmente reconstruir nossa classe de contêiner de página com todos os utilitários que usamos com o Tailwind. O que vou fazer é pegar todas as classes que definimos após o contêiner da página. Não vou excluir o contêiner da página. Vou guardar isso e vou até aqui e posso simplesmente escrever Aplicar e depois colocar todas as aulas do Tailwind. Em seguida, ele aplicará tudo isso à classe de contêiner de página. Se atualizarmos aqui, você verá exatamente o mesmo resultado, mas agora não temos toda essa bagunça em nosso HTML. Você pode ver aqui que todos esses atributos foram empacotados juntos e colocados em uma única classe, que eu acho muito mais limpa. Agora vamos fazer isso com todo o resto. Para o nosso cabeçalho aqui, vou pegar esse conteúdo e vamos fazer o cabeçalho, aplicar e adicioná-lo. Aí está. Em seguida, entraremos no menu do cabeçalho. Pegue todos esses menus de cabeçalho, à direita, aplique. O mesmo processo em todo o processo. Estou apenas pegando essas classes utilitárias e aplicando-as na barra lateral da classe. Muito fácil com a diretiva aplicada aqui. Vamos detalhar as listas, os botões. Podemos direcionar todos os botões, então não precisamos ficar nos repetindo aqui para todos os botões. Em vez de segmentar um alvo ou botões de classe, coloque apply na frente disso. Lá vamos nós. Então eu posso remover essas classes desse botão. Vamos ver se há alguma quebra até agora, além de eu só ter certeza de que é um botão. Sem quebras, então temos nossos botões virados agora. Podemos pegar isso, colocá-lo no menu da barra lateral, aplicar. Então essa é uma boa pergunta aqui também, porque está nos repetindo repetidamente. Não queremos fazer isso. Em vez disso, o que faremos é pegar todas as nossas tags a dentro de uma lista não ordenada e aplicar o sublinhado ao passar o mouse. Agora podemos remover tudo isso. Vou usar o Command D em um Mac para selecionar todos eles e posso simplesmente removê-los de uma só vez. Então podemos entrar aqui para o nosso h1. Vamos usar essas classes em todos os h1. Entre aqui, h1, aplique. Vamos entrar aqui, para a última, para a gaveta e depois eu vou criar a classe para gaveta, usar aplicar e agora atualizando aqui obtemos exatamente o mesmo resultado. Mas agora você pode ver que nosso HTML é muito mais limpo, é assim que eu gosto. Aqui você pode ver que tudo tem um bom nome. Não estamos tentando decifrar todas essas classes CSS do Tailwind que, de outra forma, teriam. Se você olhar aqui, agora, tudo isso contém apenas o CSS de entrada e acho que é muito melhor tê-lo aqui do que no HTML real. Essa é minha preferência. Eu só comecei a entrar no Tailwind quando descobri que você podia fazer isso, você ainda podia usar as aulas. Você ainda pode segmentar elementos, mas também pode usar as classes Tailwind. Algumas das coisas que eu gosto que você tem essas pseudo-classes. Você está aqui novamente para sublinhar o mouse e a loucura é que você também pode fazer consultas de mídia aqui. O que temos em nosso styles.css aqui, não mostramos a barra lateral no celular no Tailwind, é um sistema que prioriza dispositivos móveis. Todas as consultas de mídia terão largura mínima, então elas são móveis por padrão e, em seguida, usamos as consultas de mídia para afetar tamanhos de tela acima de determinados níveis. Vou te mostrar o que quero dizer com isso agora. Se acessarmos a documentação CSS do Tailwind e eu pesquisar por design responsivo e consultar esta página, você poderá ver os prefixos do ponto de interrupção. Devo dizer aqui que o Tailwind CSS é móvel primeiro. Está usando um sistema de ponto de interrupção que prioriza dispositivos móveis, o que não é minha preferência. Eu prefiro usar um desktop primeiro. Mas eu mencionei que muitos sistemas modernos priorizam a mobilidade. Como você pode ver aqui, se usarmos a pequena pausa, ela afetará tudo acima de 640. Então, esses pontos de interrupção vão até 1536. Usando isso, vamos realmente entrar aqui. Em primeiro lugar, queremos criar por padrão, porque o padrão é móvel, queremos que isso não exiba nenhum, então apenas definimos como oculto. Mas, acima de pequeno, não queremos que ele fique oculto, então vamos colocá-lo em bloco, o que o configurará como bloco de exibição. Não é exatamente a mesma coisa que aqui porque é 640 e não 425, mas está perto o suficiente. Se formos até aqui e eu for para o iPhone 12 pro, você pode ver, sem nenhuma consulta de mídia, que nos livramos da barra lateral. Por padrão, como estamos no celular primeiro, exibição está definida como nenhuma. Deixe-me voltar a esse caminho. Quando ultrapassamos 640, você pode ver, então eu vou mudar isso. Estamos acima de 640. Você pode ver que essa consulta de mídia do Tailwind foi lançada, mas na verdade não precisamos escrevê-la sozinhos, tudo o que precisamos escrever no Tailwind é a classe que queremos aplicar após esse ponto de interrupção. Adoro como no Tailwind, se o instalarmos corretamente, podemos ver aqui o código exato que está sendo inserido em nosso CSS. É por isso que é importante continuar executando, compilar aqui, porque toda vez que criamos isso, ele cria o CSS bruto necessário em nosso arquivo de saída e faz todas essas coisas malucas para garantir que seja ideal e usando apenas o que precisa. É incrível quando você entende o poder do Tailwind. Mas, novamente, é uma ferramenta como qualquer uma dessas outras ferramentas. Tudo se resume a HTML, CSS e JavaScript. Novamente, se você não quiser usar isso, é totalmente opcional. Estou apenas mostrando uma das ferramentas mais populares que os desenvolvedores web de front-end estão usando atualmente. Se isso é algo que lhe interessa, definitivamente vá mais longe e aprenda mais sobre o Tailwinds. Posso até criar uma aula sobre Tailwind para vocês se estiverem interessados em aprender mais, mas tudo está documentado na referência aqui. Você não precisa necessariamente de um curso se puder ler toda essa documentação Estou animado para continuar usando o Tailwind e experimentá-lo em alguns projetos maiores. Eu, pessoalmente, gosto disso. Novamente, se você não se sentir à vontade, pode pular este vídeo. Você pode deixar de usá-lo. Não é uma parte essencial do desenvolvimento web de front-end, apenas outra ferramenta. Mas, com isso resolvido, vamos falar sobre algo que pode ser essencial para seu projeto de desenvolvimento web: coletar dados de uma API externa. Abordaremos isso no próximo vídeo. 11. Usando APIs: Neste vídeo, veremos as APIs. Especificamente, veremos um exemplo de API para trazer alguns dados falsos da loja para nosso pequeno aplicativo aqui. Lembre-se de que antes tínhamos essa página de produto como exemplo. Eu trabalho principalmente em comércio eletrônico, então gosto de usar esses exemplos de lojas de comércio eletrônico. Neste vídeo, o que vamos fazer é trazer dados de uma API de loja falsa. Isso nos fornece dados falsos da loja. Em seguida, podemos criar uma lista de produtos no front-end com esses dados que vêm de uma API. O que é uma API? Significa apenas interface de programação de aplicativos. Se você pesquisar a definição on-line, pode ser um pouco confuso o que ela realmente faz, pois pode significar várias coisas diferentes. Essencialmente, nesse contexto, uma API é apenas uma forma de nos conectarmos a um back-end para recuperar dados. Em minha primeira aula, Entendendo o Desenvolvimento Web, adotamos uma abordagem menos moderna ao escrever PHP, lidar com nosso próprio banco de dados MySQL e enviar esse conteúdo para a tela via PHP. Mas agora, à medida que o front-end se tornou mais complexo com estruturas de front-end e similares, agora é um padrão mais comum ter uma API separada e um aplicativo de front-end separados e conectar os dois. A API é basicamente o aplicativo de back-end, que nos fornece os dados. Nesse caso, você pode pensar nas APIs simplesmente como uma fonte de dados à qual podemos nos conectar. Para acessar esses dados, tudo o que precisamos é de um endpoint de API, que é apenas um endereço que, quando fizermos uma solicitação, ele retornará dados. Assim como fizemos uma solicitação para este servidor aqui e ele retornou o conteúdo da nossa página, podemos fazer uma solicitação a um servidor e recuperar alguns dados brutos. Isso é o que faremos neste vídeo. Vou compartilhar com vocês um exemplo simples nesta lição. Vamos abrir fakeapi.platzi.com. Essa é a API da Platzi Fake Store. Como diz aqui, é uma API REST para seu protótipo de site de comércio eletrônico ou de compras. Vamos usar isso para gerar uma lista de produtos e exibi-los em nosso pequeno aplicativo web. Você notará aqui que a API é uma API restante. Essa é a forma de API mais simples de entender. Há outro estilo de API que é mais moderno chamado GraphQL, mas que exige uma compreensão da linguagem de consulta do GraphQL. Com as APIs restantes, tudo o que precisamos fazer é atingir um determinado endpoint, que está aqui. Só precisamos clicar nesse endereço e ele retornará os dados. Se eu simplesmente copiar isso abrir outra guia e colar, você verá que obtemos uma lista completa de dados. Antes você via que ele aparecia como texto bruto que não estava formatado, e agora está fazendo isso. Isso ocorre porque eu tenho uma extensão do Chrome no meu navegador Chrome aqui que faz isso. Você pode ver os dados no formato JSON saindo muito bem. Mas se você não tiver essa extensão, verá que ela será lançada como formato bruto. Podemos simplesmente colocá-lo direto na nossa barra de endereço assim. Isso pode ser útil para visualizar os dados, pelo menos a estrutura que vem da API. Mas o que vamos fazer em nosso aplicativo web é usar esse endpoint para inserir esses dados em nosso front-end e então poderemos interagir com eles. O que vou fazer é, obviamente que temos uma lista de produtos aqui, vou criar uma pequena página de coleção em nosso aplicativo web usando o Vue e usando essa API. Vou manter isso na minha área de transferência, ir até aqui e depois mudar para o nosso editor de código. Estávamos falando sobre o Tailwind em um vídeo anterior. Deixe-me encerrar isso. Deixe-me transformar isso em Vue novamente. O que vou fazer é dar a isso um ID do aplicativo Vue para que possamos vincular nosso código Vue a ele. Também precisarei trazer de volta a referência ao Vue por meio do CDN. Vou simplesmente jogar isso dentro. Vamos fazer isso aqui mesmo. Scripts SRC e, em seguida, o endereço da versão de desenvolvimento mais recente, que é unpckg.com/vue @next. Eu digitei isso incorretamente. Eu disse roteiros em vez de roteiro. Em seguida, vou inserir outro aqui, e vamos inserir nosso código Vue aqui. Novamente, vou apenas criar meu objeto de opções, colocar o andaime aqui. Em seguida, criaremos o aplicativo Vue. Crie um aplicativo, carregando as opções e depois montando-o nessa div, à qual fornecemos o ID do aplicativo Vue. Podemos ir aqui, Hash Vue App. Se clicarmos em “Salvar”, atualize aqui, veremos que estamos executando uma versão de desenvolvimento do Vue. Se você tiver o DevTools for Vue instalado, se eu fechá-lo e reabri-lo, poderemos obter o Vue DevTools aqui. Eu recomendo fortemente isso. Para instalar o Vue DevTools, você pode acessar a Chrome Extension Store e digitar Vue DevTools. Por algum motivo, está demorando muito para carregar. Vou apenas digitar Vue. Aqui você pode ver que o que estou usando é este aqui, Vue.js devtools da Developer Tools. Voltando aqui, você pode ver que estamos executando um aplicativo nesta seção aqui, você pode vê-lo destacado. O que eu vou fazer é escrever algum código que eu quero executar quando este aplicativo for montado. Podemos fazer isso por meio do método de ciclo de vida montado. Se eu apenas criar um método chamado montado e colocá-lo dentro do objeto de opções, qualquer coisa que eu escrever aqui será enviada para a tela. Vamos voltar e copiar esse endereço de API. Certifique-se de que esteja em nossa prancheta. Então, o que eu vou fazer é escrever uma busca simples. Esse método aqui é super simples, mas super poderoso. Tudo o que ele faz é executar uma solicitação get para qualquer endereço que esteja nesse primeiro argumento. Em seguida, acorrentaremos um então. Nesse caso, vou colocar esse código, que apenas processa o JSON e nos permite convertê-lo em um objeto JavaScript para uso em nosso aplicativo. Então, com o JSON retornado, para começar, vou registrá-lo no console para que, quando nosso aplicativo for carregado, obtenhamos os dados em nosso console e, em seguida, possamos ver sua aparência. Aqui você pode ver. Vou atualizar novamente. Você pode ver que temos 177 objetos em uma matriz. Podemos examinar e inspecionar o interior da matriz e ver todos os diferentes dados do produto que vimos antes simplesmente digitando em nosso navegador. Agora que temos isso na forma de JavaScript, podemos carregá-lo em nosso aplicativo Vue. Vou clicar aqui. Vou adicionar alguns dados. Seguindo esse formato, retornaremos um objeto. Não se esqueça, temos que colocar nossa vírgula aqui e eu vou colocar uma matriz chamada produtos, que a princípio será uma matriz vazia. Então, aqui, o que eu vou fazer é porque o objeto JSON que está retornando é uma matriz. Se olharmos para trás, podemos simplesmente inserir essa matriz nessa matriz em nosso aplicativo. Só precisamos começar referenciando esse aplicativo, que é o aplicativo que estamos analisando atualmente, é assim que coletamos os dados e, em seguida, atribuiremos JSON retornado a this.products, não ao produto Pronto. Se eu clicar em “Salvar” e atualizar aqui, você verá que não há nada no console porque removemos o log do console, mas se analisássemos isso em nossas DevTools, você pode ver que essa matriz de objetos já foi carregada aqui. Agora, podemos interagir com isso em nosso aplicativo Vue. Vou até aqui e vamos realmente utilizar esses dados. Vou digitar aqui a coleção de produtos, o que quisermos. Na verdade, vou pular completamente o título e criar um div aqui com a classe de coleção e, dentro daqui, iniciarei um loop for com o Vue. Vou criar um cartão de produto. Esta será uma div para cada produto lançado, e eu quero que ela funcione para tantos produtos quantos existirem na matriz. Podemos usar um loop v-for aqui, e então eu posso simplesmente escrever produto em produtos. Podemos chamá-lo do que quisermos, ele apenas extrairá um item individual dessa matriz que corresponde aqui embaixo. Vou clicar para sair disso. Então, aqui dentro, queremos uma etiqueta de imagem, deixe-me chamá-la de imagem do produto e, em seguida, o src, vamos extrair do objeto do produto retornado. Se olharmos para trás aqui, entrarmos em um desses objetos, você pode ver que três imagens são retornadas, então obtemos uma matriz de imagens. Precisamos fazer uma escolha aqui. Vamos escolher o primeiro na matriz, que estará na Posição 0. Em seguida, vamos usar product.images e, para selecionar o primeiro na matriz na posição 0, basta digitar zero lá. Então, aqui, vamos colocar o título do produto. Em seguida, vou usar v-html para inserir algum HTML interno com base em uma variável. Eu vou usar product.title. Se voltarmos ao objeto, você verá que obtemos um valor para o título chegando aqui, e então eu clicarei em “Salvar” nele. Vamos nos refrescar por aqui. Como você pode ver, à medida que carregamos a página, estamos fazendo uma solicitação para essa API externa e trazendo as imagens e o texto. Deixe-me atualizar novamente. Ele vai rodar muito rápido porque é um aplicativo bem básico, mas como você pode ver aqui, a página carrega primeiro. Temos o cabeçalho e a barra lateral que carregam primeiro, depois você pode ver os nomes aparecendo depois as imagens. está acontecendo é que, se olharmos de perto, na verdade, está acontecendo muito rápido até mesmo para o aplicativo Vue detectar, mas inicialmente, essa matriz de produtos está vazia e, quando a solicitação da API é concluída, ela está sendo preenchida com os 177 produtos diferentes. Se eu for até aqui, podemos ver o objeto de produtos está inicialmente vazio e só depois de executado é que esses produtos entram na matriz de produtos. Uma coisa que eu quero fazer antes de executar isso é apenas garantir que a matriz de produtos não esteja vazia antes de começar a tentar gerar tudo isso. O que eu quero fazer para tornar isso um pouco melhor é quando eu atualizo aqui, você pode ver que há um período em que está em branco. Eu quero colocar um pequeno indicador de carregamento lá, então o que vou fazer é ter em mente que o Vue é reativo e, se os dados mudarem, a página mudará Podemos colocar uma declaração if simples aqui para verificar o tamanho da matriz. Como você pode ver aqui, coloquei uma tag de modelo aqui. Essa é uma tag especial do Vue na qual podemos colocar lógica, mas que na verdade não será renderizada na página. Vou colocar uma declaração if aqui e veremos se products.length for maior que zero, ou seja, não está vazia, então executaremos isso , mas se estiver vazio então, como alternativa, vou colocar um v-else. Se estiver vazio, que é o que será no carregamento da página, vou colocar um indicador de carregamento super básico aqui, carregando... Agora, se atualizarmos, você pode ver que, por uma fração de segundo, está escrito carregando antes de trazer todos os dados do produto. A outra coisa que eu quero fazer é limpar isso, obviamente, temos 177 produtos chegando, é um pouco demais. Vou limitar esse valor. O que eu posso fazer é mover esse v-for até aqui, e então eu posso pegar o índice, bem como o objeto real nesse loop, e então o que eu posso fazer aqui é mostrar apenas um cartão de produto se o índice for, digamos, menor que quatro. Somente os primeiros quatro itens aparecerão agora. Eu clico em “Salvar” nisso, atualizo aqui e você verá que temos os primeiros quatro itens aparecendo. Idealmente, gostaríamos de reduzir o tempo de carregamento restringindo a API para nos enviar apenas a quantidade necessária. Esse 177 é um exagero. Ainda está funcionando muito rápido, mas se examinarmos nossa documentação aqui, talvez haja uma maneira de limitar, então, os produtos. Vamos lá. Obtenha um único produto, crie um produto. Isso é chamado de especificação de API. Podemos acessar aqui para aprender como usar a API. Podemos dar uma olhada na paginação. Vamos lá. Podemos colocar um limite. Vamos fazer isso. Vamos descer até aqui e, no final, colocaremos? limite=4. Poderíamos colocar o limite no nível da API. Refrescante. Ainda está recebendo 177. Vamos dar uma olhada. Talvez tenhamos que colocar o deslocamento também, então sim, deslocar para zero e limitar para 10. Podemos separar esses parâmetros com o símbolo do e comercial. Vou atualizar nosso aplicativo web aqui. Como você pode ver, estamos recebendo apenas quatro da API agora, que é melhor porque não estamos fazendo uma solicitação mais longa do que o necessário. Com isso em mente, podemos até mesmo remover essa declaração if e ainda receberemos a mesma resposta, mas podemos colocar o limite no front-end e no back-end. Eu quero que isso apareça um pouco mais estilizado, então vou copiar e colar um pouco de CSS. No momento, ainda devemos usar o Tailwind, então vou colocá-lo no meu arquivo de entrada aqui, clicar em “Salvar” nele. Atualize aqui e você pode ver como ele está aparecendo mais em um formato de grade. Tudo bem, agora, se eu continuar atualizando e você disser “carregando”, obteremos novos dados a cada vez da API e obteremos nossos quatro cartões legais. Mas, na verdade, vamos aproveitar isso e incorporar alguma interatividade. Se realmente olharmos para cada um desses objetos, você poderá ver que cada um deles tem um ID. Podemos usar isso para identificar cada um deles. O que vou fazer é criar outra seção aqui para que possamos clicar em uma delas e nos aprofundar em seus dados. Vou voltar ao nosso aplicativo aqui e, em meus dados em Produtos, colocarei um novo campo para a ID do produto selecionado. Então, vamos definir isso como nulo para começar. Então, o que vou fazer da mesma forma que fizemos com a variação, vou criar um campo computado e esse será apenas o produto selecionado, que tudo o que ele fará é determinar o objeto do produto selecionado por meio da ID do produto selecionado. Ele examinará os objetos dos produtos, pesquisará o ID do produto selecionado e retornará esse objeto. Vou devolver this.products usando o método find novamente aqui, vamos procurar o produto em que o do produto corresponde ao ID do produto selecionado em nossos dados. Agora, precisamos de um método para definir o ID do produto selecionado. Vou entrar aqui e criar o objeto de um método. Dentro daqui, podemos criar um método chamado definir produto selecionado e usaremos apenas o argumento de ID. Esse será um método muito simples. Tudo o que isso fará é pegar o ID que foi passado e atribuí-lo a esse ID do produto selecionado. Muito simples. Agora, para selecionar o produto, vou colocar um ouvinte do evento em cada um desses cartões de produto. A maneira como fazemos isso no Vue é muito fácil. Tudo o que precisamos fazer é colocar um atributo aqui. Começará com o símbolo de arroba e o atributo será o nome do evento. Será um evento de clique simples. Então, estamos basicamente dizendo que o método onclick que queremos executar é definir produtos selecionados. Então, é claro, precisamos enviar por meio do ID que queremos configurar esse produto. Vou expandir isso aqui. Esse será simplesmente o ID do produto que estamos examinando no momento. Se eu clicar em “Salvar”, ainda precisamos criar esta seção aqui, mas vamos verificar se tudo está funcionando no Vue DevTool até agora. Você verá que, quando carregarmos o projeto pela primeira vez, selecionamos o ID do produto nulo e, portanto, temos um valor indefinido para produto selecionado dentro do computado. Mas se eu clicasse em um desses, parece que não está funcionando. Deixe-me refrescar aqui. Você pode ver, por algum motivo, que não é atualizado no aplicativo real aqui. Mas se eu clicar na sopa de tomate, atualize aqui, você pode ver que o ID do produto selecionado é 38. Como temos um objeto em nossa matriz com esse ID, é claro que temos porque usamos isso como as opções possíveis para o ID do produto selecionado, então podemos calcular o objeto para o produto selecionado. Se eu clicar neste e atualizar, agora temos o ID do produto selecionado de 41 e, portanto, estamos recuperando o objeto do produto selecionado. Agora, com isso em mente, tudo o que precisamos fazer é criar outra seção aqui com base no produto selecionado. Depois dessa coleção, div aqui , certifique-se de mantê-la no aplicativo Vue. Caso contrário, não funcionará. Vamos criar um div aqui, e vamos fazer um V if. Não queremos mostrar isso, a menos que o produto selecionado tenha dados dentro dele. Se for apenas um objeto vazio ou nulo, isso retornará falso, portanto, não aparecerá. Então, daremos a isso uma classe de produto. O que precisamos aqui, teremos a imagem e as informações do produto. Vou começar com a imagem aqui e carregar o SRC dinamicamente, que será selecionado apenas product.images porque lembre-se, cada uma delas tem várias imagens. Vamos pegar a primeira imagem na matriz e, em seguida, criarei outra div aqui chamada informações do produto para o resto das informações. Isso será formatado no lado direito. Em seguida, adicionarei h1, ainda estamos usando o Tailwind, para que possamos digitar algumas classes utilitárias do Tailwinds aqui, texto 5xl, fonte , negrito e margem inferior de aproximadamente oito pixels, e então definiremos isso como o título, selecionado product.title. Em seguida, desceremos e definiremos o preço aqui, preço, que será apenas um div. Em seguida, dentro de V, HTML, que definirá o HTML interno com base em uma variável, colocaremos product.price selecionado. Finalmente, a descrição do produto, que vou colocar apenas div quando você colocar uma classe para este. Mas vou definir o HTML interno para a descrição do produto selecionado, que acho que deve corresponder à API. Vamos dar uma olhada. Vamos selecionar um aqui. Atualização e descrição. Sim, tem uma descrição. Ok, legal. Vou copiar mais uma vez a mesma parte para não ficarmos atolados nisso. Então, de volta aqui, vamos ver se isso está funcionando. Se eu clicar neles, nada está acontecendo. Se eu arrastar isso para fora e entrar no console, você verá que temos alguns erros : “Não é possível ler propriedades de imagens de leitura indefinidas”. É importante que, se você se deparar com erros, leia as mensagens de erro. Estamos tentando ler imagens em algo indefinido. Obviamente, cometi um pequeno erro aqui. Deixe-me ver o código. Se eu rolar até aqui, você pode ver que eu escrevi isso incorretamente. Eu coloquei select product.images, eu deveria digitar selected. Isso é apenas um erro de digitação da minha parte. Agora, se eu clicar aqui, você verá que não há nenhum erro e verá que agora posso atualizar o produto selecionado e isso atualizará esta seção aqui embaixo. Agora, o preço não tem o símbolo da moeda, então vou corrigir isso rapidamente. Eu vou até aqui. O que podemos fazer é colocar aspas simples aqui para colocar uma string simples, e depois coloco mais para poder combinar as duas e clicar em “Salvar”. Agora, quando eu clico neles, eles vão ter um cifrão na frente deles. Podemos trazer dados de uma API externa e, uma vez dentro do nosso aplicativo, obtemos a reatividade de uma estrutura de front-end, como uma visualização, para poder interagir com esses dados. Obviamente, isso não está de acordo com a imagem. São apenas imagens aleatórias, temos textos aleatórios. Mas você entendeu aqui. Se conhecermos nosso HTML, CSS e JavaScript no front-end e soubermos como acessar APIs e trazê-las para nosso front-end, poderemos criar um aplicativo totalmente funcional. Então, temos tudo o que precisamos. Como desenvolvedor web de front-end, tudo o que você precisa é acessar uma fonte de dados. Você não precisa criar o back-end sozinho, o que, como desenvolvedor de front-end, prefiro que seja necessário escrever aplicativos de escrita. Eu posso me concentrar apenas no front-end e criar experiências de usuário muito legais. Para finalizar esta lição sobre APIs, eu só quero mostrar um outro lugar onde podemos verificar se a solicitação de API está sendo feita. Se você tiver problemas com solicitações de API, acesse a guia Rede, atualize aqui e filtre por busca de XHR, porque lembre-se de que estamos usando uma busca aqui. Isso verificará todas as APIs externas quais estamos nos conectando. Se eu clicar nele, você poderá ver o endpoint da API. Se eu passar o mouse sobre ele, ele deve mostrar o endpoint total da API. Então você pode ver aqui os parâmetros que estão sendo examinados. Desloce zero, limite quatro e, em seguida, podemos ver a resposta aqui, toda formatada bem. Há alguns lugares para ver a resposta. Podemos fazer login no console aqui, podemos olhar dentro de nossa guia de rede ou, se estivermos usando algo como o Vue, podemos olhar aqui dentro e ver o que é preenchido dentro nossa matriz de produtos se quisermos capturar dados de uma fonte externa e colocá-los em nosso aplicativo Vue. Podemos visualizá-lo aqui em nossa guia de rede ou podemos desconectá-lo do console e visualizá-lo dessa forma também. Mas eu só queria terminar com isso. Você pode ver aqui que os dados estão sendo transmitidos e agora podemos usá-los em nosso aplicativo. Isso é basicamente tudo o que vamos fazer na aula de hoje. No próximo vídeo, mostrarei como configurar seu projeto de aula e, em seguida, encerraremos essa aula. 12. Configuração de projetos de classe: Para seu projeto de classe, quero que você crie um aplicativo web simples com os seguintes requisitos que use uma API externa para exibir dados de forma bonita. Para ajudá-lo aqui, vou ajudá-lo a configurar seu ambiente de desenvolvimento e produção. Essa é uma maneira elegante de dizer a configuração dos projetos no seu computador e as etapas para colocá-los na Internet. Em primeiro lugar, você vai querer criar uma pasta para o seu projeto. Vou chamar isso de Projeto Moderno de Desenvolvimento Web, mas chame-o do que quiser. Dentro deste projeto, vamos configurar o NPM e o git aqui. O que eu vou fazer é abrir o Visual Studio Code. Vou expandi-lo para a largura e a altura da sua tela. Em seguida, usarei o atalho Command O para abrir nossa pasta de código e abrir esse projeto. Agora temos uma pasta vazia aberta no Visual Studio Code. Então, o que eu vou fazer é abrir o terminal, então controle a tecla de volta. Agora temos um terminal aberto em nosso aplicativo ou em nosso projeto. O que eu vou fazer é executar git init para criar um repositório git vazio. Isso nos ajudará a gerenciar as diferentes versões do nosso código e também a enviá-lo para a Internet. Vamos usar as páginas do GitHub neste vídeo aqui, mas você pode fazer isso por outros meios, se quiser. O GitHub Pages é a maneira mais fácil de fazer isso. Então, eu também vou colocar um init de NPM aqui. Você pode dar ao projeto o nome que quiser. Vou pressionar Enter em tudo apenas para aceitar todos os padrões. Isso nos dará um package.json. Em seguida, vou criar um arquivo com o nome exato de git ignore. O que esse arquivo faz é fornecer uma lista de arquivos e pastas que devem ser ignorados quando enviamos nosso repositório. Se você se lembra da lição de quando instalamos o NPM criamos um package.json e executamos a instalação do NPM. Ele criou uma pasta de módulos de nós. Dentro dessa pasta de módulos do nó , havia todos os códigos diferentes para os diferentes módulos. Esse código nunca muda. Não precisamos realmente enviar esse código no GitHub. Podemos simplesmente, onde quer que enviemos nosso código, ele simplesmente instalará quaisquer pacotes listados no arquivo package.json. Na verdade, não precisamos da pasta node modules quando enviamos este projeto para outro lugar, precisamos apenas do package.json. Vou remover os módulos do node para quando eles aparecerem. Não queremos que os módulos do node apareçam no git. Agora vou adicionar meus arquivos iniciais. Vou criar um index.html. Aqui, vou utilizar esse código padronizado que visualizei logo no início da aula, apenas criando um documento padronizado em HTML5 aqui. Vou percorrer até que chegue ao documento entre essas duas tags de título. Vou chamar isso do que eu quiser. Digamos que este seja um aplicativo de tarefas, ou meu primeiro site, ou algo parecido. Você pode atualizar o título aqui. Se você tocar novamente, você entra na etiqueta corporal. Em seguida, vou criar uma pasta para CSS. Dentro dessa pasta, crie um arquivo styles.CSS aqui. Em seguida, criarei uma pasta JavaScript. Dentro da pasta JavaScript, criarei um aplicativo principal ou index.js. Realmente não importa. Vou chamá-lo de Main neste caso. Então, é claro, precisamos vincular esses dois arquivos ao nosso arquivo HTML. Aqui eu vou colocar um link para uma folha de estilo real. Depois disso, colocarei href e vincularei ao estilo que agora está aninhado dentro da pasta CSS. Vou me certificar de adicionar isso ao caminho. Em seguida, vou, dentro de nossa tag corporal, inserir uma tag de script e um atributo SRC. Aqui você pode ver que podemos percorrer o caminho para o arquivo main.js. Agora que temos todos os nossos blocos de construção, o CSS, o JavaScript e o HTML, vou executar o git add. para adicionar tudo ao nosso primeiro git commit, tudo o que é exceto os módulos node, mas ainda não temos módulos node. Eu vou fazer o check-in aqui. Essas são todas as nossas mudanças encenadas. Podemos escrever nossa mensagem de confirmação e clicar em Commit aqui, ou podemos fazer isso na linha de comando, Git commit -m para a mensagem, e eu chamarei isso de commit inicial. Agora está tudo comprometido. Só precisamos criar um repositório git. Mas primeiro eu quero realmente colocar algum conteúdo na página. Provavelmente deveria ter feito isso antes de me comprometer. Mas digamos que queremos um h1 com meu primeiro site. Clique em Salvar nisso. Você pode ver aqui em nosso painel de controle de origem, você pode verificar quais alterações fizemos. Isso é muito útil durante o desenvolvimento. Eu recomendo fortemente que, se você se sentir confortável, use o Git. Mas é claro que não falamos sobre o Git neste curso. Se você quiser apenas usá-lo para colocar seu site on-line, como estou mostrando aqui, você pode simplesmente usá-lo para isso. Não há nenhum problema aí. Vou abrir uma janela aqui para o GitHub, e então podemos nos inscrever uma conta do GitHub e criar nosso repositório remoto, que será a forma como publicaremos nosso site na Internet. Não vou executar todas as etapas para criar uma conta no GitHub. Eu já tenho uma conta do GitHub. É muito comum entre desenvolvedores, praticamente todo desenvolvedor tem uma conta no GitHub, é apenas um lugar para armazenar código online. Depois de configurar sua conta, basta acessar GitHub.com slash new para criar um novo repositório. Vou chamá-lo de meu primeiro site, digamos, e vou torná-lo público porque vamos publicá-lo na Internet. Não precisamos adicionar nada disso aqui porque já o adicionamos ao nosso projeto. Vou clicar em Criar repositório e aqui você pode ver que temos nosso repositório público aqui. Tudo o que preciso fazer é pegar essa parte aqui, que adicionará a origem remota ao nosso projeto local. Vou copiar esse comando. Você também pode vê-lo aqui sob o título Enviar um repositório existente para a linha de comando. Então eu vou até aqui. Vou acrescentar essa origem remota. Pressione Enter. Se não houver erros , deveria ter funcionado. Em seguida, vou escrever esse título, o que não fiz da última vez. Vou fazer isso por meio do Visual Studio Code desta vez. Eu adicionei uma tag de cabeçalho. Só vou dizer que adicionei um título. Vou clicar com o botão direito do mouse e clicar em Stage Change. Então, serão as mudanças de estágio. Vou clicar em Confirmar e , em seguida, posso clicar neste botão para Publicar ramificação. Vou clicar em Publicar, e agora enviamos isso para nossa origem remota. Aqui você pode ver meu primeiro site. Não há nada aqui, mas se eu atualizar agora, você pode ver que o código do nosso site agora está no GitHub. Agora, para transformar isso em um site, só precisamos ativar o GitHub Pages. Vou entrar na guia Configurações aqui. Em seguida, vou até as páginas de código e automação. Em seguida, vou clicar em “Implantar a partir de uma ramificação”, depois vou selecionar a ramificação que temos apenas uma, que é a ramificação master. Vou clicar em “Salvar” nisso, e agora o que devemos poder fazer é acessar esse endereço aqui, que é seu nome de usuário.github.io. Abra isso em uma nova guia e, em seguida, colocarei barra seguida pelo nome do repositório, meu primeiro site. Você pode ver que ainda não há uma página lá. Provavelmente ainda está carregando e podemos verificar o status do carregamento acessando Ações aqui. Como você pode ver, um fluxo de trabalho está sendo criado aqui. Estava em amarelo há apenas um segundo, mas agora está funcionando. Se atualizarmos por aqui, você verá meu primeiro site. O processo de implantação do nosso site depois de fazer uma alteração é simplesmente fazer o que acabamos de fazer quando adicionamos esse título. Nós apenas criamos a mudança. Fizemos a mudança aqui em nossa linha de comando executando git add. Depois de adicionado, executamos git commit com dash m para a mensagem, ou usamos a interface do usuário no Visual Studio Code e, em seguida, clicamos nesse botão, clicamos em Publicar ou podemos executar o comando git push origin, e então isso deve funcionar, ou mais especificamente, git push origin master. Vamos adicionar um pacote agora para mostrar que, em ação, vou executar mesmo comando que tínhamos antes para instalar o Tailwind como uma dependência de desenvolvimento. O NPM instala o dash capital D, tailwindcss. Clique em “Enter” nele. Como você pode ver, agora temos um arquivo loc.json do pacote dash que foi adicionado e registra as versões exatas de todas as dependências. Você não precisa se preocupar com isso. Tudo isso é gerado automaticamente para nós, mas queremos confirmá-lo. Você pode ver aqui que nosso package.json agora tem uma linha adicionada ou três linhas adicionadas para dependências de desenvolvimento e temos o Tailwind adicionado. Então, também temos essa pasta de módulos do node, mas ela está em cinza, o que indica que ela não será comprometida com o git e , portanto, não irá para o GitHub. Mas, como eu disse, Github preencherá essa pasta automaticamente no servidor, pois sabe quais dependências instalar aqui, então tudo o que precisamos enviar é o package.json. O que vou fazer é copiar e colar o arquivo tailwind.config.js que tínhamos antes e depois copiar e colar os scripts que criamos. Aqui, o cólon do vento caudal é construído e o cólon do vento caudal corre, e como você pode ver, nossos caminhos são atualizados aqui. Vamos procurar um arquivo tailwind.css para processar e que será compilado para styles.css, que é o arquivo que temos aqui. Vamos fazer isso. Vamos configurar um novo arquivo aqui, chamá-lo de tailwind.css e pegaremos os utilitários básicos do Tailwind. Depois, o outro foram os componentes do Tailwind, que eu acho que ficam no meio. Vamos clicar em “Salvar” nisso e, em seguida, executaremos npm, executaremos o Tailwind build. Vamos executá-lo uma vez, que agora atualizará nosso styles.css antes do código do Tailwind com base no que escrevemos aqui e no que incluímos em nosso arquivo de configuração. Então, se clicarmos em Go Live para iniciar uma versão local, veremos nossos estilos HTML padrão desmoronarem e serem substituídos pelo Tailwind, o que não aconteceu. Vamos acessar nosso index.html aqui e verificar se nossa tag está correta. Eu perdi um e lá, folha de estilo. Se eu clicar em Salvar nessa atualização aqui, você pode ver que o estilo padrão para H1 agora foi removido porque agora estamos usando o Tailwind e você pode ver aqui todas as coisas do Tailwind chegando. O que faremos é dar a isso um estilo novamente via Tailwind, assim como fizemos antes, texto 5xl, fonte, negrito, e dar a ele uma margem inferior de aproximadamente oito pixels. Vou clicar em “Salvar” nisso. Isso já está afetando o elemento ali mesmo e agora temos nosso projeto com o Tailwind instalado. Agora, vamos executar o processo de implantação novamente. Fizemos algumas mudanças aqui. Você pode ver aqui que corrigimos a tag CSS lá. Adicionamos algumas classes de utilitários Tailwind. Package/loc.json foi adicionado. Atualizamos nosso arquivo package.json. Adicionamos o arquivo de configuração do Tailwind e, em seguida, todo o material CSS. Podemos pegar tudo isso e clicar com o botão direito do mouse em “Stage Changes”, ou de outra forma que seja independente qualquer editor de código que você esteja usando, podemos simplesmente executar git add dot para adicioná-los todos conforme o estágio muda. Aí está. Ele será atualizado aqui e, em seguida, podemos escrever um git commit com a mensagem de Tailwind adicionado que agora está confirmado. Como você pode ver aqui, podemos clicar aqui para sincronizar isso com o GitHub. Agora, se trocarmos por aqui, essa é a nossa versão local. Essa é outra versão local. Vou fechar esse e depois vamos até aqui. Você pode ver em nossos fluxos de trabalho que ele está implantando nosso aplicativo no momento, então vamos esperar que isso termine. Isso acontecerá automaticamente toda vez que enviarmos para o GitHub porque definimos a configuração das páginas nas configurações aqui e, como você pode ver, ela está quase lá. Lá vamos nós. Depois de um minuto, ele já foi construído e, se voltarmos para o endereço em nosso site está hospedado aqui, atualize-o, você verá as alterações que fizemos há pouco em nossa versão local. Como mencionei, quando acessamos aqui e entramos no código aqui, você pode ver que a pasta node modules não está em nosso GitHub porque quando o GitHub implanta nosso site, ele instala automaticamente os módulos de node corretos com base em nosso arquivo package.json aqui, o que informa ao servidor em que o estamos implantando para instalar esse desenvolvedor dependência e quaisquer dependências de desenvolvimento que dependam dessa dependência. Esse é um exemplo de fluxo de trabalho para vocês executarem, criarem seu projeto de classe ou qualquer projeto futuro. Crie um repositório git, transforme seu projeto em um projeto NPM, crie seus arquivos, faça seu trabalho, envie para o GitHub e veja o resultado aqui. Quando terminar e quiser compartilhar com a turma, você pode fazer isso na seção de projetos da aula. É isso. No próximo vídeo, concluiremos a aula e mostrarei como você pode se aprofundar em alguns dos conceitos sobre os quais falamos na aula de hoje. Certifique-se de clicar no próximo vídeo e vamos encerrar esta aula. 13. Conclusão: Parabéns, você chegou ao final desta aula sobre desenvolvimento web de front-end moderno. Sei que abordamos uma variedade de ferramentas e linguagens nesta aula, mas garanto que você não precisa ser um especialista em todas elas para começar com o desenvolvimento web de front-end. A intenção desta aula era fornecer uma visão geral das ferramentas e linguagens usadas para criar experiências de front-end na web. Nesta curta aula, abordamos um conjunto completo de conceitos de desenvolvimento web de front-end que, para aprender adequadamente, exigiriam muito mais horas de aprendizado e prática. Espero que, por meio desta aula, você tenha uma visão geral de onde cada tecnologia se encaixa no processo de tecnologia se encaixa no desenvolvimento web de front-end. Se você quiser se aprofundar, confira minha gama completa de cursos em christhefreelancer.com/courses. Como sempre, se você tiver alguma dúvida ou preocupação sobre o que abordamos na aula de hoje, deixe um comentário na caixa de discussão abaixo e farei o possível para indicar a direção certa. Como sempre, obrigado por assistir e espero ver você novamente em algumas das minhas outras aulas.