Crie sites a partir de arranhões usando HTML, CSS e JavaScript (NENHUMA EXPERIÊNCIA DE PROGRAMAÇÃO É NECESSÁRIA)

1. E-mail: Como alguém sem experiência em programação e vai de uma página branca vazia para um site interativo e estilizado usando código. Vou te dizer, mas primeiro, deixe-me explicar o que faz um site. A web usa três linguagens fundamentais para funcionar. Essas linguagens são chamadas de HTML, CSS e JavaScript. O que eles fazem? Você pode perguntar, bem, o HTML é usado para estruturar o conteúdo de páginas da Web. Sem ele, seu site ficaria assim. No entanto, o HTML sozinho torna um site muito chato. É aí que entra o CSS. Css é a linha de design. Isso faz com que tudo pareça bonito que as pessoas voltem ao seu site. Por fim, é o JavaScript. Isso ajuda a tornar seu site interativo para que ele possa fazer coisas assim. Então, vamos voltar à nossa primeira pergunta. Como alguém sem experiência em programação cria um site estilizado usando código? É simples. Em menos de duas horas, eles assistem a um curso amigável para iniciantes que lhes dá as habilidades necessárias para começar a se tornar mestres das linguagens fundamentais da web. Para sua sorte, conheço exatamente o curso. É chamado de criar sites do zero usando HTML, CSS e JavaScript. Nenhuma experiência de programação necessária preenchimento. Neste curso, você aprenderá como criar os blocos de construção de um site em HTML. Faça com que pareça um CSS incrível e fique um pouco mais legal com JavaScript. Quem será seu instrutor? Bem, sou eu. Olá, sou Taylor English e gosto de programar. Então, o que você está esperando? Clique na próxima lição para começar. 2. Como configurar seu computador para escrever código: Tudo bem, a primeira coisa que vamos precisar para começar a escrever nosso site do zero é um editor de código. Agora, se você quiser, você pode usar algo como o Bloco de Notas, mas eu realmente não o recomendo porque este é apenas um editor de texto básico. Existem ferramentas muito melhores que podem nos ajudar a escrever código. O programa que vou mostrar hoje é muito fácil usar e vou mostrar todas as dicas e truques que você precisará. É um programa chamado Visual Studio Code, também conhecido como VS Code, e é feito pela Microsoft. Então, se você for ao seu navegador, você pode simplesmente pesquisar VS Code e clicar na primeira página. Agora estou no Windows, então vou baixá-lo para Windows. Se você clicar nesta seta aqui, você também pode baixá-lo para Mac ou Linux, ou há outros downloads também. Agora, se você estiver no Windows 11 e talvez até no Windows dez, isso pode funcionar. Você pode ir para a Microsoft Store, que está embutida em seu computador. Você pode baixá-lo de lá também. Se você fizer isso dessa maneira, acredito que ele manterá automaticamente o programa atualizado para você, o que é muito bom. Só vou baixá-lo para o Windows. É um download muito pequeno. Deve ser muito rápido. Aí está. Você pode simplesmente abrir. E os instaladores são bastante simples. Basta aceitar o acordo. Você não precisa modificar nada nesta página, a menos que queira, mas não precisaremos para este tutorial. Basta clicar em Avançar e clicar em Instalar. Agora, eu já o tenho no meu computador, então não vou reinstalá-lo, mas deixe-me mostrar como ele funciona. Então, quando você fizer login, você provavelmente verá algo assim. Agora, esta é apenas uma pequena página de Introdução algo para ajudar você a escrever seu código. Você pode usar isso se quiser ou desmarcar essa caixa para que ela não apareça na inicialização. Mas o que vamos precisar fazer primeiro para iniciar nosso projeto é criar uma pasta onde possamos armazenar todos os arquivos do nosso site. Clique no arquivo e clique em Abrir pasta. Agora precisamos escolher um lugar para armazenar isso. Então eu vou, vamos ver. Vou criar uma pasta aqui. Vou chamá-lo de meu site. Agora, se eu fosse você, eu faria tudo uma palavra sem espaços ou símbolos extravagantes, só porque isso poderia tornar parte do processo mais fácil mais tarde. Clique neste clique em Selecionar pasta. Agora estamos dentro dessa pasta. Então, deixe-me mostrar alguns dos recursos do Visual Studio Code ou do código VS. Aqui, à esquerda, temos nosso explorador. É aqui que você verá todos os arquivos que estão nesta pasta. Você pode clicar neste ícone aqui para criar um novo arquivo. Por exemplo, se eu quisesse criar um arquivo de texto simples, poderia dizer algum file.txt. E quando você coloca essa extensão de arquivo, o ponto TXT, ele reconhece automaticamente o que é e dará um pequeno ícone. Agora, para você, os ícones podem ser diferentes. Eu uso algumas modificações especiais. Este programa a ser feito. Algumas coisas parecem um pouco diferentes, então pode não parecer exatamente o mesmo para você. Se você explorar as configurações, poderá alterar o esquema de cores e coisas assim. Mas não faremos isso neste tutorial. Você pode criar arquivos. Este botão criará pastas. Novamente, talvez você não tenha esses ícones. Você pode ver essa flecha e tudo bem. Este ícone atualizará essa pasta caso alguma alteração tenha sido feita, o que geralmente você realmente não precisa disso. Se você tiver pastas abertas. Então, por exemplo, se eu tivesse esse arquivo aqui, então pressionar esse botão entraria em então pressionar esse botão entraria colapso e pedregulhos. Ok, vamos dar uma olhada em alguns dos outros recursos. Vou apenas excluir isso. Esta é a pesquisa, a opção de pesquisa. Isso permite pesquisar todo o projeto, pesquisar todas as suas pastas e arquivos. Então isso é super bacana. Não precisaremos nos preocupar com o controle da fonte. Podemos chegar a isso mais tarde, quando começarmos a publicar um site, mas não vamos nos preocupar com isso agora. Não vamos nos preocupar em executar d pelo Explorer remoto, mas vamos dar uma olhada nas extensões. Este é um dos melhores recursos Visual Studio Code. Visual Studio Code é muito modular, o que significa que você pode adicionar muita funcionalidade a ele com muita facilidade e é gratuito, o que é muito legal. Aqui. Existem todos os tipos de extensões que você pode obter que, elas ajudarão você. Então, vou recomendar um casal que possa ser útil para este curso. Se você olhar para o envoltório de tags HTML, isso é algo que você pode me ver usando de tempos em tempos. É apenas uma maneira de selecionar algum texto e, em seguida, envolver todo esse texto em tags HTML, sobre as quais aprenderemos mais tarde. Não é necessário, mas útil, mora lá. Você vai querer baixar isso, isso será muito útil. Isso só nos ajudará, só ajudará a tornar o processo de edição muito mais fácil. Eu recomendo baixar o servidor ao vivo. Então, se você quiser que seus ícones pareçam como os meus, você pode baixar este material, Ícone, Tema e assim por diante. Então eu acredito que são todas as extensões que realmente precisarão para isso. Claro. Muitas vezes, quando você está editando em outras linguagens de programação, você pode obter extensões para as várias linguagens e isso ajudará a realçar a sintaxe. O realce da sintaxe basicamente significa que partes do código são coloridas de forma diferente. Por isso, ajuda você a ver as coisas melhor enquanto você está editando. Esses são os principais aspectos do editor. No próximo vídeo, vamos saber como realmente iniciar seu projeto e começar a escrever código. 3. Como configurar sua primeira página na Web em HTML: Neste vídeo, vamos começar a criar nossa primeira, nossa primeira página da web, apenas uma página simples. E vou mostrar a estrutura do HTML e basicamente como estruturar um site simples e executá-lo em seu próprio computador. Vamos acessar nosso editor de código VS Code e vir aqui e seguir em frente e criar um novo arquivo. E vamos chamar esse arquivo de index.html. Agora você provavelmente está se perguntando, por que estamos chamando índice. Isso é apenas uma espécie de padrão com desenvolvimento web e ajuda o processo de publicação do seu site a ficar muito mais tranquilo. Agora precisamos colocar HTML de ponto porque este é um arquivo HTML. Então deixe-me explicar HTML. Estrutura do site. Essencialmente, existem três componentes para quase todos os sites. Html, CSS e JavaScript. Html é a estrutura da página. Todas as imagens, todo o texto, dos botões, tudo assim. Css, que aprenderemos mais tarde, faz com que pareça bonito, certo. Faz com que tudo pareça bonito e arrumado, do jeito que você quer. Em seguida, o JavaScript torna o site interativo. Isso faz com que os botões façam coisas. Isso faz com que as coisas aconteçam quando você clica em coisas ou algo assim. Vamos aprender todos esses três idiomas até certo ponto. Mas vamos começar com HTML. Deixe-me explicar como o HTML funciona. Ele usa um sistema de tags. Deixe-me mostrar-lhe apenas alguma estrutura básica. Então vou explicar como tudo isso funciona. Tudo está aninhado dentro dessas tags. Você terá uma etiqueta de abertura, que é simplesmente esses dois colchetes com o nome da tag dentro. E então você tem uma tag de fechamento que tem uma barra direta e, em seguida, o nome da tag que você sempre precisa. Bem, eu não deveria dizer isso. Você quase sempre precisa dos dois. Existem algumas tags que não exigem uma tag de fechamento, mas a maioria delas faz. Todo site terá essas três tags. Por três, quero dizer, essas três tags de abertura e as tags fechamento complementares, você precisa de uma tag HTML, uma tag de cabeça e uma tag de corpo. Vamos começar com HTML, se você quiser. Mas uma coisa que é muito boa sobre o VS Code é que você não precisa digitar o nome completo da tag. Você não precisa tirar os suportes. Você acabou de digitar esse nome rápido como HTML e pressionar Tab e ele o preencherá automaticamente para você. E então eu vou pressionar Enter. E isso vai criar esse espaço ali mesmo. A tag HTML. Não faz muito, mas é uma espécie de padrão de criar a estrutura da página. Tudo na página HTML bits dentro dos colchetes HTML para as tags HTML. Agora temos a etiqueta da cabeça. A tag principal é importante porque especifica informações importantes sobre seu site. Por exemplo, o nome da página que é exibida na guia na parte superior. Então, por exemplo, se eu fosse escrever aqui onde ela diz nova guia, isso é algo que definimos na tag head. É importante. Vamos definir algumas outras informações lá dentro, mas provavelmente não vamos nos aprofundar muito nisso. Não precisaremos fazer muito com isso. Agora, abaixo disso, está a tag body. Agora tenha cuidado para não colocar a etiqueta do corpo dentro da etiqueta da cabeça. Tem que estar abaixo dele. Dentro do body tag é basicamente onde colocamos todo o resto. Este é o resto da página HTML. É o corpo da página. Para começar com nosso site simples dentro da tag head, coloque uma tag de título. O título é essa parte. Na parte superior da página, a guia que você vê. Só vou dizer meu site. Você pode dizer o que quiser aqui. Isso não importa. Só vai ser esse texto exibido lá em cima. Porque esta é apenas uma simples declaração de uma linha. Eu não vou separá-lo como eu fiz com os outros com os outros. Isso é tudo o que vamos colocar na cabeça por enquanto. Então, no corpo, vamos fazer uma tag p, que significa parágrafo. E isso é apenas algum texto normal. E você acabou de colocar qualquer texto na tag p. E vamos apenas dizer, bem-vindo ao meu site. Pressione Salvar. Agora precisamos executar a página. É quando essa extensão do Live Server é útil. Se você notar aqui, no canto inferior direito, há um botão que diz Go Live e diz clique para executar o servidor ativo. Vá em frente e clique nisso. Se você não vir esse botão, basta clicar com o botão direito do mouse na página e clicar em Abrir com o servidor ativo. Isso abrirá uma página em seu navegador da Web que exibe seu site. Só quero parabenizá-lo muito rápido. Você criou um site. Este é um site para todas as intenções e propósitos. É que ainda não é muito interessante. Mas este é um site que você pode fazer. Isso. A programação da Web é muito divertida e não é terrivelmente difícil. Podemos aprender isso. Esse é o nosso site. Agora, o que é realmente legal sobre Live Server é que, enquanto estamos editando , sempre que pressionamos salvar, ele atualiza automaticamente nossa página e atualiza nossas alterações. Se eu adicionar outra tag de parágrafo e apenas dizer hello world, e salvá-la, atualizará automaticamente e aparecerá na página. Agora, uma coisa que você notará quando eu colocar aquele olá mundo é que ele apareceu abaixo. Bem-vindo ao meu site em vez de ao lado dele. E isso ocorre porque as tags de parágrafo exibem coisas como blocos. Significado. Você pode imaginar um bloco que vai até o outro lado da página. Para isso, bem-vindo ao meu site. Na verdade, podemos visualizar isso assim. Você tem que se preocupar com o que é isso. Essas são apenas algumas ferramentas de desenvolvimento úteis no navegador. Mas preste atenção nisso. Tudo o que eu destaquei em azul é o corpo. E você pode ver isso destacado aqui. Agora, se eu destacar sobre cada um deles, você pode ver que ele diz que é uma tag de parágrafo ali mesmo. Você pode ver a letra P e ela ocupa toda essa linha. E isso ocorre porque a tag de parágrafo é uma tag de bloco. É preciso sobre toda a seção. Qualquer outra tag que você colocar em seguida vai passar por baixo dela automaticamente. Isso é algo que poderemos alterar mais tarde usando CSS, se quisermos. Mas, por enquanto, apenas reconheça isso. E deixe-me mostrar algumas outras tags úteis. Então aprendemos a tag p. Isso é para parágrafos simples. Se você quiser cabeçalhos, há algumas tags para isso. Portanto, há H1, H2, H3, por H6. Ok, então estes são súbitos ou arrependidos, os seis tamanhos de cabeçalhos. Um sendo o maior, seis sendo o menor. Nós. É uma tag útil para ter. Então, por exemplo, se tivermos, se você estiver escrevendo um blog, por exemplo, você pode ter um cabeçalho e bem-vindo ao meu blog. Então, sob isso, você pode colocar uma tag de parágrafo e dizer, colocar algum texto aqui. É assim que você pode usar esses cabeçalhos. Essa é uma tag muito comum e útil. Vamos aprender algumas outras tags. Vamos aprender sobre listas. Se você quiser uma lista numerada, então você pode dizer l, o que significa lista ordenada, o que significa que ela será encomendada 12345. Então, dentro da lista ordenada, você precisa colocar itens de lista que são tags LI. Quero dizer item um, item dois, item três e assim por diante. Você também notará que ele os recua automaticamente. Agora, se você quiser uma lista de marcadores, então é isso que chamamos de uma lista não ordenada ou uma UL. Podemos fazer a mesma coisa, mas esses mesmos itens de lista lá. Mas, em vez de numerá-los, isso lhes dá pontos de bala. Tudo bem, então essas são apenas algumas das tags que vamos usar. Existem outros textos para coisas como imagens, links, botões e assim por diante. E entraremos nisso em vídeos posteriores. Mas, por enquanto, esse é o básico de como configurar um site HTML. Lembre-se de que criamos um index.html. O HTML de ponto é muito importante. Em seguida, temos tags de abertura e etiquetas de fechamento. Cada página HTML tem uma tag HTML, uma tag de cabeça e uma tag de corpo. 4. Outras etiquetas HTML úteis (parte 1): Neste vídeo, falaremos sobre algumas outras tags HTML que você provavelmente achará úteis. O primeiro com o qual vamos começar é chamado de tag a. E vamos usá-lo para criar links. E por que é chamado de tag a. É um pouco confuso. Ele significa âncora, mas não precisamos nos preocupar com isso para este vídeo. Então, vá em frente e digite a letra a e pressione Tab. Você verá que ele cria uma tag com um atributo chamado atrial. H ref é essencialmente onde colocamos o link para o que vamos colocar aqui. Os ups fazem uma anotação rápida sobre atributos. E atributo em HTML é algo que você coloca dentro da tag de abertura de um elemento. Esses são todos elementos para colocá-lo dentro da etiqueta de abertura. E vamos aprender um pouco mais sobre atributos mais tarde, mas eles permitem que você mude o estilo e outras coisas assim. Mas, para este, precisamos colocar o link nele. Então, vou para o Google. Só vou pegar esse link, jogá-lo aqui. Agora, se eu clicar em Salvar, você notará que nada aconteceu. E isso porque realmente precisamos anexar o link a algum texto. Vou colocar entre a etiqueta de abertura e fechamento. Vou digitar o Google. Você verá que temos isso diz Google aqui e está sublinhado mostrando que é um link. Se você for em frente e clicar nisso, e isso o levará ao Google. Nota rápida sobre tags e links. É muito importante que você tenha o HTTP ou HTTPS. Tenho certeza de que não funcionará sem ele. Eu poderia estar errado, mas geralmente estaria seguro e incluiria isso. A próxima tag sobre a qual vamos falar é a tag b. Isso é bem simples. Só significa ousado. Se eu tiver uma tag p, tenho algum texto e apenas digo, olá mundo. Se eu quiser tornar o mundo ousado, então vou cercá-lo em uma tag b. Ok, então isso torna isso ousado. Agora vou fazer uma anotação rápida sobre o que acabei de fazer. Você viu que eu selecionei o mundo e pressionei Alt W no meu teclado, o que não funciona, ainda não funcionará para você. Vou te mostrar como fazer isso funcionar. Esta é a extensão de envoltório de tags sobre a qual falei anteriormente no vídeo. Se você for para Extensões e encontrar o envoltório de tags HTML, vá em frente e instale-o se quiser. Este é apenas um truque útil. A maneira como você a usa enquanto seleciona a palavra e pressiona Alt W. E então você pode digitar o que quiser. E isso o colocará nas etiquetas de abertura e fechamento. Então, se eu colocar o b aqui, então ele coloca suas entradas tanto ali. É muito legal. Agora, se você quiser tornar o espaçamento um pouco menos confuso, você pode aninhar a tag de parágrafo assim, e tudo bem. Agora vou mostrar outra etiqueta. Esse é o eu marcar ou itálico. Então, vamos apenas dizer isso de novo. Vamos colocar isso. Você pode ver ali mesmo, ele itálico isso. Agora você provavelmente está se perguntando o que acabou de acontecer aqui, onde ele coloca essas duas frases próximas umas das essas duas frases próximas outras em vez de uma na parte superior, uma na parte inferior. Porque no editor de código, um estava na parte superior e outro na parte inferior. Bem, se voltarmos ao que falamos com elementos de bloco, tag de parágrafo é um elemento de bloco, o que significa que será um único bloco. Tudo dentro dele será um bloco. Se você quiser colocar algo sob ele, você precisa colocar outro bloco embaixo dele. A maneira como esse texto está sendo lido, ele também pode estar diretamente anexado a ele. Não nos fazendo pressionar Enter aqui e fazer essa pausa. É. Isso não nos ajuda aqui. O que precisaríamos fazer é. Crie uma segunda tag de parágrafo, então um segundo bloco e coloque-a lá e assim ela a colocaria abaixo. Agora, novamente, você não precisa aninhar essas coisas, mas pode ajudar se você tiver várias tags que podem tornar as coisas um pouco menos confusas. Vamos agora falar sobre a tag de imagem. Vá em frente e digite IMG e pressione Tab. Isso é simplesmente para exibir imagens em seu site. Ele tem dois atributos. Um é o atributo source e qual é o atributo alt? A fonte é onde sua foto está localizada no computador. Vou falar sobre a ALT em um minuto. Deixe-me descobrir que tenho uma foto aqui no meu computador, então vou pegar isso e arrastá-la para meus arquivos. Esta é apenas uma foto minha tocando piano. Se você não sabe, eu realmente gosto de tocar piano. Mas, de qualquer forma, eu tenho essa foto bem ali. Para tornar as coisas simples. Vou renomear e vou ficar. Vou me livrar de todos os espaços que farão nossas vidas mais fáceis. Na tag de origem, precisamos digitar isso tocando o ponto de piano JPG, JPEG. Essa é a fonte. Agora, se clicarmos em Salvar, ele vai aparecer. Muito, muito grande. Uau. É uma imagem enorme. Vou te mostrar como ajustar isso em apenas um minuto. Mas vamos falar sobre essa tag alt muito rápido. A tag alt é usada para exibir uma descrição de uma imagem. Se ele falhar ao carregar. Se fôssemos colocar tocando piano aqui. Vamos estragar o link das lojas rapidamente. Livre-se de uma carta e clique em Salvar. Não consegue encontrar a imagem porque ela não sabe como é chamada corretamente. E então recebemos esse pequeno erro e uma descrição tocando piano que pode ser útil. Agora, se você já passar o mouse sobre uma imagem ou outra coisa, e isso mostra a pequena caixa de texto flutuante. Isso é o que chamamos de atributo title. E deixe-me mostrar como isso funciona. Podemos adicionar um atributo aqui e dizer título. E se dissermos tocar piano aqui, então, quando passarmos o mouse, a imagem, obterá aquela pequena sinopse de texto onde diz tocar piano. Agora, essa imagem não é muito bem dimensionada, é enorme. Então, como podemos consertar isso? Podemos adicionar uma largura, um atributo, a tag. Se dissermos largura, podemos inserir uma medida. Vamos fazer isso em pixels. Se você não estiver familiarizado com pixels, essencialmente sua tela é composta de milhões e milhões de pixels, e é isso que cria toda a imagem na tela. Uma imagem como esta, eu tocando piano, é composta de uma certa largura em pixels e uma certa altura em pixels. Podemos verificar o que é para essa imagem acessando nosso explorador de arquivos. Clique com o botão direito do mouse na imagem. Em seguida, diga Revelar no File Explorer. Em seguida, podemos clicar com o botão direito do mouse sobre isso e ir para propriedades. E depois vá para detalhes. Aqui você verá as dimensões. São 4 mil por 6 mil, e você verá que a largura é de 4 mil pixels, altura é de 6 mil pixels. Vou tentar redimensioná-lo para algo bem pequeno. Vou encolher um pouco e apenas dizer 300 pixels. Você escreve isso por 300 px e certifique-se de que não há espaço entre o número e px. E clique em Salvar. Há a imagem. Agora, você provavelmente está se perguntando, eu tenho que verificar o tamanho de cada imagem que coloquei? Absolutamente não. Você definitivamente pode mexer com isso como quiser. Você pode apenas adivinhar números. E se não for bem o que você gostaria, torná-lo um pouco maior. Agora, a razão pela qual estamos colocando apenas a largura é porque se colocarmos apenas nesta medida, essa dimensão única, ela manterá automaticamente a escala da altura para que ela permaneça a mesma. Se quiséssemos, poderíamos adicionar atributos de altura e poderíamos escolher o que quisermos. Posso fazer um quadrado e dizer 300 pixels. Isso esmagaria nossa imagem em um quadrado. Agora isso provavelmente não é ideal para a maioria dos casos. É por isso que você manteria a dimensão única. Ou você poderia manter a largura, a altura. Ele escalaria automaticamente o outro. Ele manteria sua imagem intacta. Essa é a tag de imagem. No próximo vídeo, falaremos sobre mais algumas tags. 5. Outras etiquetas HTML úteis (parte 2): Vamos falar sobre mais três tags e depois vamos passar para o estilo. Então, estou animado por isso. Anteriormente, falei sobre a tag de parágrafo e como ela é um elemento de bloco. Se você se lembrar, mostramos um exemplo em que, se você colocar algum texto dentro deste parágrafo, ele só irá anexá-lo diretamente ao último bit. E se você quiser replicar esse comportamento, mas tiver tags separadas? Bem, há uma etiqueta para isso. É chamado de etiqueta de span. A tag span não é um elemento de bloco, é um elemento em linha, o que significa que ele será colocado ao lado de qualquer coisa, seja lá o que você estiver tentando criar. Agora, a coisa com inline é que não podemos colocá-lo ao lado tag de parágrafo porque o parágrafo é um tipo de bloco. Qualquer coisa que você colocar sob ele vai ser um novo bloco. No entanto, podemos anexar algumas tags de extensão juntas. Essas etiquetas de extensão ficarão próximas umas das outras. Mas se colocarmos outra tag de parágrafo, esse seria um novo bloco. Certo. Deixe-me mostrar-lhe algo. Se eu, vou destacá-los de uma forma que você possa ver cada um dos elementos. Você pode ver que o hello é seu próprio bloco. Então esses são elementos em linha, eles são separados. Você pode ver o olá novamente anexado um ao outro. Eles são separados um do outro, mas estão na mesma linha. E então a tag de parágrafo se separa desses. Essa é a etiqueta de span. Em seguida, falaremos sobre a tag break. A tag break simplesmente significa que você quer algum espaço entre objetos diferentes. Então, se eu tiver minha tag de parágrafo aqui e depois eu quiser colocar uma imagem, digamos, Eu ainda tenho essa imagem lá fora? É, sim. Digamos que eu tenha essa imagem com uma largura de 100. Digamos que eu queira mais espaço entre essa imagem. Vou dizer tocando piano. Eu posso simplesmente colocar uma tag break que é apenas BR. Agora você notará que ele só criou a única tag de abertura. A tag break é uma dessas tags que não precisa de uma tag de fechamento. É só sua pequena coisinha. Você pode vê-lo colocar esse espaço ali mesmo. Agora, posso copiar e colar isso algumas vezes. E isso coloca um monte de espaço. Essa é a tag break. Agora, a terceira tag sobre a qual vamos falar é a tag de botão, que não vamos fazer muito com ela agora, mas vamos fazer muito com ela mais tarde. A etiqueta do botão é divertida, é bastante simples. Você acabou de colocar algum texto dentro do que você quer que o botão diga. Posso dizer que me empurre. Agora há um botão. Agora isso é um fato divertido. Você notará que o botão foi ao lado da imagem e isso porque o botão é um elemento embutido, assim como a imagem. Ambos estão em linha, então ambos estão ao meu lado. Então, por exemplo, se eu quisesse colocar o botão embaixo dele, se eu pudesse colocar uma tag de quebra, talvez um casal. Agora você pode ver o botão Me apertar. Posso clicar nele, e é bem básico, mas não faz nada. É meio complicado obter muita funcionalidade com botões usando apenas HTML. Vamos precisar de algum JavaScript para isso. Então fique atento. Vamos fazer algumas coisas interativas legais mais tarde com JavaScript e largura, os botões. 6. Vamos construir um site incrível!: Nesta seção do curso, mostrarei como replicar o site que você está vendo usando HTML, CSS e um pouco de JavaScript. Então deixe-me dar uma rápida turnê por este site para que você saiba em que estamos trabalhando. É bastante básico e sua funcionalidade, é uma apresentação de slides simples. Ele não se move automaticamente, mas podemos alterar as imagens aqui clicando nessas imagens abaixo. Você verá que há um pouco de efeito de bolha. Então, quando eu destaque sobre cada uma das imagens, elas aparecem um pouco. Você pode ver que eles estão separados uniformemente e estão centrados na página como esta. Você também pode ver esse logotipo do Explorer na parte superior. Apenas uma fonte extravagante que fica azul quando eu passar o mouse sobre ela. E os botões de navegação ficam vermelhos quando eu passar o mouse sobre eles. Também vou mostrar a você uma navegação na página. Então, se clicarmos nesta página da galeria, é apenas uma página simples que criei que exibe todas as quatro imagens que estão disponíveis, mas vou mostrar como fazer a navegação dessa página. Agora, embora este site seja bem simples, quero impressionar suas mentes a importância do CSS neste projeto. E eu posso realmente ir em frente e desativar o CSS aqui e mostrar o que parece sem. Deixe-me ir em frente e fazer isso. Este é o HTML bruto da página. Temos imagens enormes que não cabem na tela. Então só temos alguns botões de navegação estranhos que não são ótimos. Exceto que o CSS ainda estava naquela outra página. Mas você pode ver que o CSS desempenha um papel enorme e enorme na aparência de uma página da Web. E não queremos que ele seja feito apenas de HTML. Nos próximos vídeos, mostrarei como estruturar este site em HTML. E aprenderemos algumas coisas novas lá. Também sou e, em seguida, nos vídeos posteriores, aprenderemos todo o CSS necessário para isso, bem como o JavaScript para ele. Não há muito JavaScript, mas há apenas um pouco para fazer a mudança da imagem na apresentação de slides funcionar. Vejo você no próximo vídeo. 7. Styling Your Header e Imagem Principal (CSS Parte 1): Tudo bem, vamos construir este site. Para começar. Comecei com uma nova pasta. Você pode fazer o mesmo ou modificar os arquivos em que trabalhamos anteriormente. Se você quiser, eu recomendo começar com apenas uma nova pasta. O que vamos fazer primeiro é criar nosso arquivo index.html. Vamos criar um arquivo de cada vez. Vou criar esse novo arquivo, index.html. Começaremos com o básico, a tag HTML e dentro da tag head e, dentro disso, o tipo de título. O título para isso. O objetivo aqui é replicar esta página. Aqui em cima, na guia , diz explorado. E então é isso que a tag de título é. Quatro. Vamos explorar. Então podemos realmente alinhar isso aqui. Lá vamos nós. Então, sob a tag head, vou criar uma tag corporal. Vamos colocar um H1. Basta dizer explore isso. Temos esse cabeçalho grande lá em cima. Vamos ver o que isso parece até agora. Vou salvá-lo e clicar com o botão direito do mouse e pressionar Abrir com o Live Server. Isso abrirá outra guia aqui. Podemos ver como nossa página se parece. Isso é o que temos até agora, apenas o H1 e também diz Explorer aqui no topo. Isso é incrível. Em seguida, vou pular a navegação por enquanto, mas vamos colocar as imagens. Certo? Então, o que queremos é uma imagem principal com quatro imagens por baixo. Vou colocar uma tag de imagem. Agora precisamos das imagens reais. Vou incluir um link no R. Vou incluir links de download para as imagens e qualquer outro, como links ou coisas sobre as quais falei no curso, que estarão todos na descrição do curso. Vou incluir links para baixar as imagens, mas deixe-me ir em frente e agarrá-las rapidamente. Eu tenho essas quatro imagens. Vamos colocá-lo aqui. Agora você verá, você pode ver esta pasta de código ponto VS. Você não precisa se preocupar com isso. É apenas algo que é criado automaticamente pelo VS Code e parece certas configurações nele, mas não tocaremos nele. Isso não afetará nosso projeto de forma alguma realmente. Tenho minhas quatro imagens e posso realmente visualizá-las aqui no VS Code. Eles são imagens realmente grandes, então eles levam um segundo para carregar. Mas eu tenho minhas quatro imagens. Então, o que queremos fazer é que nossa imagem principal comece pois queremos tirar uma das imagens para começar, vou apenas escolher Imagem um, que eu nomeei como para isso, essa imagem na fonte, vamos dizer imediatamente um ponto JPEG. O que podemos fazer no texto alternativo, que se você se lembrar, o alt-text é que iremos aparecer se uma imagem não puder ser exibida. Aqui, vou dizer montanhas. Ou vamos ver, direi uma cidade nas montanhas. Acho que é uma descrição decente. Mas não faz justiça à imagem. Ok, então vou salvar isso e veremos nossa página agora. Temos o Explore aqui em cima e depois uma imagem enorme. Vamos ter que trabalhar para redimensionar isso, o que será feito com o CSS. Temos nossa imagem principal. Vamos começar com isso. Vamos começar a trabalhar em nosso CSS. Precisamos criar um novo arquivo. Vamos chamá-lo de style.css. Precisamos vincular esse arquivo em nosso HTML dentro da tag head. Sob a tag de título, vamos dizer link. Então você pode passar o mouse para baixo, seta para baixo até CSS. E isso criará tudo isso para você. Digamos que seja uma folha de estilos, que é o CSS. E, em seguida, o link para o arquivo real por padrão é style.css. Temos muita sorte lá com a nossa nomeação. Agora, precisamos testar para garantir que o arquivo CSS funcione. Então, vamos tentar ajustar algo simples. Queremos que a página seja preta. Uma maneira de fazer isso é que podemos realmente. Podemos anexar alguns estilos a todo o corpo da página, à própria tag body e tornar a página preta. Deixe-me mostrar como fazer isso em nossas folhas de estilo, em nosso CSS. Você pode nomear uma tag. Vou dizer o nome do corpo da tag. E então você vai colocar esses suportes encaracolados aqui. E depois de criar, uma vez que você aperta o colchete de abertura, ele cria um par automaticamente, então você pode simplesmente pressionar Enter e ele fará isso por você. Agora, podemos colocar apenas, podemos colocar nossas propriedades CSS lá, que são os elementos individuais de estilo que adicionamos à página. O que queremos aqui é cor de fundo, preto. É bem simples à medida que trabalhamos em mais CSS, você verá que muito dele é muito legível, facilmente compreendido. Agora, o SSS nem sempre é fácil. Pode se tornar muito complexo. Mas espero que o que mostrei faça sentido. E espero que você não esteja com medo do CSS porque é realmente uma ótima linguagem e é bastante intuitivo na maioria das vezes, na minha opinião. Então vá em frente e clique em Salvar. Então, o que fizemos aqui foi que contamos a tag do corpo e tornamos a cor de fundo preta, o que significa que todo o fundo da página deve ser preto. Se formos para nossa página, você pode ver que ela é tecnicamente verdadeira. Mas só temos essa imagem que tirou a maior parte da página para você não possa dizer que é o plano de fundo é preto. Certo, então vamos trabalhar com isso. Vamos, vamos encolher a imagem. Vou mostrar algo chamado ID. No CSS, temos essencialmente três formas principais de anexar estilos a elementos. Podemos selecionar um elemento pelo nome da tag, que você acabou de ver com a tag body. Ou podemos usar uma ID ou classe. Uma aula é quando você deseja anexar um estilo a várias coisas. Você dá a mesma classe a cada uma das tags. E então você pode dar o mesmo estilo, todos eles. E ID é onde só queremos dar um estilo a um. Deixe-me mostrar-lhe como fazer isso. Em uma tag de imagem. Queremos reduzir um pouco a largura. Então, o que vou fazer é dentro da tag, vou adicionar outro atributo, fontes, um atributo, alt como atributo. Vamos adicionar outro atributo e vamos chamá-lo de ID. Se você apenas pressionar ID e pressionar tab, ele deve criar esse pequeno igual e, em seguida, a cotação funciona. Agora, dentro disso, está o nome do ID. Isso pode ser o que você quiser. Vou chamá-lo de imagem principal. Certo? Agora, normalmente, se você quiser várias palavras em nome de um ID ou classe, você vai querer colocar um hífen entre as palavras. Esse é apenas o padrão que geralmente é seguido. Vamos colocar a imagem principal lá. Agora, o que podemos fazer é selecionar isso em nosso style.css. Agora, para dizer ao CSS que este é um ID em vez de uma tag, é que precisamos colocar um sinal de libra, digamos imagem principal. Se for uma classe, colocaríamos um ponto e diríamos a imagem principal como esta. Mas é uma identificação, então vamos colocar um sinal de libra. E agora queremos alterar sua propriedade width. Vamos ver aqui. Vamos dar a ele uma largura, 100%. Agora, isso significa que a largura vai ocupar 100% do contêiner. Essencialmente. O contêiner dessa imagem é o corpo. É assim que ele fica na hierarquia. Dentro do corpo. Vai levar 100% da largura. Então, vamos ver o que isso parece. Incrível. Podemos ver que agora a imagem não se estende além da largura da exibição da tela. Ele se estende além da altura. Mas ele se encaixa na largura na tela porque ocupa 100% da largura. Agora, o que queremos fazer é que, se redimensionarmos isso, você verá que o quanto da imagem muda dependendo da largura. Queremos que isso permaneça bastante constante. Vamos dar a ele uma altura de 400 pixels. Agora você pode ver que esmagou a imagem um pouco. Mas isso é essencialmente do mesmo tamanho que aqui. Damos uma olhada. É aproximadamente do mesmo tamanho, mas está tudo embaçado. Agora vamos usar uma propriedade CSS chamada bit de objeto. E eu não sei tudo sobre essa propriedade. Mas o que posso dizer é que, como o nome diz, ele muda a forma como o objeto na página, o valor que vamos dar a ele é capa. Agora, o que isso fez é que a imagem não fosse mais esmagada, mas foi cortada. Ou seja, se você alterar o tamanho dela, verá partes diferentes da imagem. Essencialmente, ele está mantendo a mesma proporção. Mas, dependendo do tamanho da tela, você verá uma parte diferente da imagem. Agora, para nossos propósitos, tudo bem. Você pode ver na página principal, à medida que eu a redimensiono, também obtemos esse efeito. Temos nossa imagem. Agora, o que queremos fazer é não conseguirmos ver nenhum dos nossos textos. Não podemos ver o Explorer aqui em cima. Está lá, em algum lugar. Lá vamos nós. Está se escondendo porque preto. Vamos seguir em frente e mudar a cor disso. Vamos ver. Temos nosso aqui. Então, vou adicionar 81 porque é o nome da tag. Só vou dizer cor, branco. Você pode ver CSS, não é muito ruim. Agora coisas como o ajuste do objeto podem ser um pouco confusas. Vou colocar links para uma referência CSS e uma referência HTML que mostrará todas as propriedades HTML e CSS e marcadas que você poderia querer usar. E isso lhe dá ótimos detalhes sobre como usá-lo corretamente. Muito útil. Quando você está fazendo desenvolvimento web. Você não precisa memorizar tudo. Você nem precisa memorizar exatamente como tudo funciona. O importante é que você saiba pesquisar e descobrir as informações de que precisa. E isso é realmente bastante comum na maioria das programações. Antes de terminar este vídeo, vamos fazer mais uma coisa. Vamos mudar o estilo deste Explorer para que ele tenha essas fontes extravagantes e para que ele fique centralizado na página. A maneira como fiz isso quando usei um site chamado Google fonts. Se você for para fonts.google.com, você será levado para esta página. Você provavelmente não sabia que isso existia, mas é muito incrível. Deixe-me mostrar como funciona. Posso digitar algo aqui. Eu poderia dizer Explorer. Vai nos mostrar todos esses laços diferentes que poderíamos escolher. Um monte de coisas diferentes que poderíamos usar que podemos incorporar gratuitamente em nosso site. A fonte que queremos usar é chamada de escova de água. Esse é este aqui. Você pode ir em frente e clicar nele. E a maioria das fontes terá vários pesos, o que significa basicamente o quão ousado é. E assim você pode vê-los. Você também pode simplesmente digitar e ver como seria em tamanhos diferentes e nesse tipo de coisa. O que queremos fazer é clicar em selecionar este estilo. Agora venha aqui e clique em Exibir famílias selecionadas. Agora eu tenho outras coisas, então deixe-me remover isso. Eu só tenho essa escova de água. Agora diz para usar na web. Tudo o que você precisa fazer é incorporar essa tag, esse pedaço de código em HTML e, em seguida, usar isso para usar essa família de fontes no CSS. Vamos copiar isso, entraremos em nosso HTML. E vamos colá-lo embaixo do nosso link para o style.css. Vou colar lá em cima. Pode parecer realmente aqui. Se você clicar no início de uma linha e pressionar Tab, poderá alinhar tudo corretamente. Agora, se clicarmos em Salvar, isso não faz com que pareça que queremos. A outra parte é muito importante para onde diz as regras CSS. Vamos ir em frente e copiar isso. E em nosso H1 no CSS, vá em frente e cole isso. Essa propriedade é chamada font-family. E, como você pode imaginar, ele muda o que é a fonte. Essa fonte é chamada de escova de água, que tem acesso ao uso do Google Fonts. E diz que é cursivo. Pressionará Salvar. Você pode ir em frente e olhar para a página. E depois vamos, agora é chique. É tudo cursivo. Então isso é muito legal. Agora, o que precisamos fazer é centralizá-lo no topo da página. O que podemos fazer por isso é que vamos alterar o tamanho da fonte agora digitando o tamanho da fonte. Se você rolar para baixo, verá que existem muitos símbolos estranhos diferentes. Basicamente, essas são diferentes unidades de medida. Vamos usar um chamado EMS, escrito EM. Deixe-me mostrar como se parece. Parece assim. M é essencialmente o tamanho de fonte padrão do seu navegador. Acho que é baseado na altura da letra M. Este é um m, e isso pode ser diferente dependendo das configurações do seu navegador. Mas o que queremos fazer é se você mudá-lo, isso é duas vezes mais. O que queremos é cinco amperes, que tem cinco vezes o tamanho de fonte padrão. Existem outras maneiras de fazer tamanhos de blocos. Você pode fazê-los em pixels. Você pode realmente fazê-los em polegadas, centímetros, todos os tipos de coisas. Você pode experimentar com eles ou procurar online para aprender a usá-los. Isso, como existem muitas maneiras interessantes de fazer as coisas, você também pode usar porcentagens como fizemos aqui em cima. Mas vamos usar ems. Agora nós conseguimos. Temos o tamanho da fonte em andamento. O que precisamos agora é alinhá-lo no meio da página. Eu adiciono outra propriedade e digo centro de alinhamento de texto. E como você pode imaginar, isso alinha o texto no centro da imagem, assim como queríamos. Estavam chegando perto. Você pode ver que ainda não estamos lá, mas estamos fazendo muita coisa. No próximo vídeo, faremos ainda mais estilo. 8. Especificidade e efeitos do Hover (CSS Part 2): Tudo bem, vamos fazer mais CSS. Ok, então a primeira coisa que eu quero que você veja, quando comparamos esses sites, você quase pode ver uma diferença no lado da imagem. Você verá aqui esta imagem se estende até as bordas da tela. Enquanto aqui ele faz. Por que isso? Bem, os navegadores colocarão automaticamente uma espécie de preenchimento ou essencialmente uma camada de espaço na página. Eles apenas fazem por padrão, nós realmente precisamos fazer algo para nos livrar disso para que possamos estilizá-lo como queremos fazer com que pareça exatamente o mesmo em todos os dispositivos. Ok, então vamos em frente e veja nosso código. Veja como podemos fazer isso. No topo do nosso CSS. Faça algum espaço e coloque uma estrela, um asterisco. O asterisco é um símbolo que significa tudo. Significado. Em vez de selecionar uma tag ou uma classe ou um ID, isso se aplica a tudo na página. Certo? Agora devo mencionar que cada um deles é o que chamamos de seletor, um seletor CSS. Portanto, este é apenas outro seletor CSS e significa que estamos selecionando tudo. Então, o que precisamos fazer é nos livrar dos padrões. E então vamos adicionar duas propriedades. Um é chamado de margem e um é chamado de preenchimento. Então, qual é a diferença? Bem, a margem é essencialmente quanto espaço está do lado de fora de um objeto. Então, se você tiver dois objetos aqui e aqui, a margem é o espaço entre eles. O preenchimento é, por exemplo, se você tiver um objeto aqui e depois um objeto dentro dele, como alguns textos, o preenchimento é quanto espaço está entre as bordas do objeto e o que está dentro. Certo, então provavelmente falaremos sobre isso um pouco mais. À medida que prosseguimos. Vamos adicionar alguma margem e preenchimento às coisas. Mas o que queremos fazer é definir essas propriedades como 0 por padrão, queremos uma margem de 0, preenchimento de 0. Então veja o que vai acontecer. Apertamos Salvar e instantaneamente você verá que a imagem subiu contra os lados da tela. E isso porque nos livramos dessas propriedades padrão. Então você pode estar se perguntando, bem, se aplicarmos uma margem de 0 e um preenchimento de 0, tudo, o que acontece se quisermos alterar essas propriedades mais tarde? Bem, o bom sobre o CSS é que a propriedade que se aplica a um objeto é que depende de quão específico você é. Certo. Isso parece um pouco confuso. Deixe-me explicar. Por exemplo, se tivermos essa tag de corpo, temos uma cor de fundo preta. Bem, digamos que queremos colocar uma caixa em algum lugar na página que tenha uma cor de fundo azul. Certo. O que podemos fazer é dar a caixa, sou seletor mais específico, como um ID ou uma classe. E digamos que ele tenha uma cor de fundo diferente. E então o que é mais vago, estamos mais longe é cancelado. Então, se olharmos, então a maneira como a especificidade funciona são as tags mais gerais, depois as classes e, em seguida, as IDs. Então, uma identificação será superada em tudo. Vai sobreviver. Então, o que você disser no ID exclui tudo o que você disse antes. Tudo bem? Espero que isso faça um pouco, um pouco de sentido. Não teremos que nos preocupar muito com a especificidade em CSS nesta classe. Se você quiser saber mais sobre isso, você pode encontrar muitas coisas sobre isso online. Mas pensei que eu deveria deixar você saber que tipo de como isso funciona. Se você não entendeu o que acabei de falar, deixe-me resumir dizendo, podemos aplicar essa margem de 0 e esse preenchimento de 0 a tudo. Mas esse seletor é muito geral, pois só se aplica geralmente a tudo. Se fizermos algo mais específico, como selecionamos a tag , a classe ou o ID. Seja qual for a margem ou o preenchimento que colocamos , supera tudo e fora as regras. Isso. Certo? Isso apenas prepara o palco para nos deixar fazer o que quisermos. Vá em frente e salve isso. O que é diferente? Bem, há um espaçamento diferente aqui entre o cabeçalho aqui e o nav. Também temos essas imagens aqui em baixo. E também temos esses bons efeitos de focagem. Então, vamos começar com isso. Como fazer o pairar legal? Tudo bem, é bastante simples. O que precisamos fazer é criar outro seletor. E vamos dizer que é H1, mas colocamos dois pontos e dizemos pairar, o que significa que estamos, estamos selecionando a tag H1, mas estamos sendo específicos e dizendo se estamos pairando sobre ela, como isso, pairando o mouse. Certo. Então, o que podemos fazer é colocar uma cor azul. E, mais especificamente, vamos usar essa cor. Tudo bem? Agora, o que você pode fazer é copiar essa palavra por palavra, se quiser. Mas deixe-me mostrar como isso funciona. Então, quando eu criei isso, eu originalmente comecei com azul. O mais legal sobre o VS Code é que, se você passar o mouse sobre uma cor, ela permite que você a altere. Você tem esse seletor de cores. Certo. Achei a cor que eu queria. E você pode ver que ele tem esse código RGB na parte superior. E isso é essencialmente o que isso é. O código RGB basicamente significa que esta é a quantidade de vermelho, essa é a quantidade de verde, e essa é a quantidade de azul para obter essa cor. E, portanto, a sintaxe para isso é RGB. E então, entre parênteses, você apenas separa os valores por Aqaba. E certifique-se de que haja um ponto e vírgula depois disso. Então, se pressionarmos Salvar e formos para nossa página, se eu destacar sobre ela, ela agora fica em cor preta. Você notará, no entanto, que meu cursor não é exatamente o que queremos. Se você olhar aqui, tem mais do dedo apontado. É algo que identifica que você pode clicar nele, o que você pode. Mas não temos isso aqui. Então, como podemos conseguir isso? Bem, neste mesmo seletor de foco adicionará outra propriedade chamada cursor. Há uma variedade de cursores que você pode obter. Tudo, desde o carregamento até basicamente todos os cursores que você já viu na web pode ser definido aqui na maior parte. Por exemplo, se colocarmos agarrar e apertarmos Salvar, isso nos dá aquela pequena mão agarrada, como se pudéssemos movê-la. Ok, então o que estamos procurando é chamado de ponteiro. Isso é apenas esse tipo de clique simples. Então, queremos isso. Também queremos colocar uma transição aqui que meio que se desvanece, desaparece no balão para que pareça um pouco mais natural. Como aqui. Você pode ver isso meio que se desvanece um pouco mais devagar. Então, vamos colocar uma propriedade aqui chamada transição. Vamos usar uma transição chamada facilidade de entrada, saída. Agora, o que isso significa é que a transição tem, basicamente, tem um início lento e um final lento. Facilidade para entrar e sair. Certo? E então a saída é um pouco difícil de ver com isso aqui, mas você também pode apenas dizer facilidade. Há uma variedade de transições que você pode usar. Depois de facilitar a entrada, vamos colocar um espaço e colocar 0,2 S quatro segundos. Isso, essencialmente, faz com que a animação eu aconteça dentro de 0,2 segundos. Ele economiza. E agora passamos o mouse sobre ele. E você pode ver, mesmo que seja apenas 0,2 segundos, faz a diferença. Parece mais natural. É só que, só se sente mais agradável. Certo? Então, temos nosso cabeçalho basicamente feito. Por que não colocamos as quatro imagens abaixo da imagem principal aqui. O que queremos fazer em nosso código, vamos criar uma lista não ordenada. Portanto, a lista não ordenada é basicamente uma lista de marcadores. Não está numerado. Uma lista ordenada seria numerada. Então, estamos essencialmente fazendo uma lista de pontos de bala e mostrarei o porquê em apenas um minuto. Mas dentro desse ponto de bala. Listas, queremos colocar cada uma das imagens. Então, vamos dizer LI para o item da lista. E vamos criar uma tag de imagem. Imagem e a fonte. Queremos a imagem 1234. Queremos exibir todos eles. Eles dirão imagem de um ponto JPEG, JPEG. E podemos colocar as montanhas ali mesmo. Ok, agora, vou copiar isso e colar três vezes para que tenhamos quatro desses. Em seguida, basta mudar a imagem para a imagem três e a imagem para. Agora, para os propósitos desta classe, não vou me preocupar com as outras tags alt, mas isso é algo que você provavelmente quer colocá-lo. Você vai escolher. Vamos ver o que isso parece. Ok, então podemos ver que ele mostra as imagens. Eles são enormes, no entanto. Parece que precisamos redimensioná-los. Certo? Então, o que vamos fazer é criar uma aula para essas imagens. Porque se eu apenas dissesse select, desculpe, se eu usasse apenas a tag de imagem, ela também modificaria isso. E não queremos que isso pareça o mesmo que as imagens menores. Então deixe-me mostrar como criar uma aula. Vamos adicionar um atributo HTML chamado classe. Você pode simplesmente apertar a aba lá. E vamos chamar essa pequena imagem ou IMG. Agora, a razão pela qual estamos criando uma classe é porque queremos aplicar as mesmas propriedades a todas essas quatro imagens. Então, vamos adicionar essa classe, cada tag na lista. Vou salvar isso em nosso style.css vai digitar ponto para a classe e diremos uma pequena imagem. E queremos dar a cada um desses uma largura de 100 pixels. Ok, é só fazê-los realmente, qualquer um muito pequeno. E vamos ver o que isso parece. Certo? Então, temos as quatro imagens ali mesmo. Certo? Agora precisamos que eles estejam centrados. Então, vamos continuar. Vamos, na verdade, vamos apenas estilizar as imagens primeiro e depois mostrarei como fazemos o espaçamento. Certo? Então, vamos dar a cada um deles uma borda de, vamos dizer uma borda de três pixels, o que significa que tem três pixels de espessura. Vou dizer branco sólido. Agora, para arredondar os cantos, vamos usar uma propriedade chamada raio de borda, que é apenas uma maneira chique de dizer que vamos arredondar os cantos e vamos economizar dez pixels. Então você pode mexer com a medida aqui. Mas, essencialmente, quanto maior a contagem de pixels, maior será a corrente até que ela quase se torne circular. Então, vamos dizer dez pixels para obter um retângulo arredondado. Olhe. Certo? E sim, então vamos deixar esses lá por enquanto. No próximo vídeo, explicarei como alinhá-los horizontalmente sob essa imagem. 9. Aprendizagem Flexbox e Espaçamento de Margem (CSS Parte 3): Neste vídeo, vamos aprender sobre uma incrível propriedade CSS chamada Flexbox. Parece assustador, mas prometo que é incrível. Deixe-me desenhar o que é para que você possa entender isso um pouco melhor. Vamos imaginar que temos essa caixa, esse contêiner, ok? E, na verdade, vamos dimensioná-lo assim. Agora mesmo. Nossas imagens estão empilhadas assim. Certo? Então isso se parece com isso. Então isso é o que temos acontecendo. Agora, quando aplicamos o Flexbox. Veja o que vai mudar. Tudo vai ficar horizontal. E então, de repente, tudo ficará alinhado assim, certo? Oh, você não viu que eu não sou muito habilidoso no quadro branco. Mas você entende a ideia, tudo estará dentro dela. E o flexbox nos dá algumas outras propriedades interessantes. Vou colocar um link para uma referência de flexbox especificamente na descrição da classe. Eu recomendo muito olhar para ele. É um diagrama lindamente, apenas explica as coisas muito melhor do que eu posso aqui. Mas vou mostrar como vamos usar isso em nosso site. Então, o que queremos fazer é aplicar a propriedade flexbox à lista não ordenada porque é isso que contém Todos os elementos do item da lista. Então, se você esqueceu, esses são tecnicamente todos os itens de ponto de bala. Você simplesmente não consegue ver os pontos de bala. Porque tudo é preto e amassado. E, na verdade, vamos nos livrar dos pontos de bala mais tarde, vou te mostrar como fazer isso. Mas o que precisamos fazer é transformar isso em um flexbox para que ele possa ser horizontal. Então, vou digitar UL para a tag de lista não ordenada e dizer caixa flexível de exibição. Agora, se você olhar, há outras coisas aqui. Quando falamos sobre HTML e o início da aula, falamos um pouco sobre elementos em bloco e em linha. Portanto, outro tipo de exibição para um objeto é um flexbox. E você pode simplesmente escrever pretos para usar o flexbox. Certo. Vamos ver o que acontece quando fazemos isso. Ok, instantaneamente ele virou para o lado. Agora precisamos de algum espaço entre ele. Então, vamos usar uma propriedade específica Flexbox chamada justify content. Então, basicamente, isso significa justificar é o espaçamento. Então, como vamos espaçar o conteúdo dentro da caixa ou da lista não ordenada. Então, vamos dizer espaço. Então o que isso faz é deixar-me mostrar alguns clipes. Desculpe, não lá. Deixe-me mostrar algo legal aqui. Esta caixa roxa é nossa lista não ordenada. Então você pode ver quando usamos espaço entre os elementos estão tocando os lados nas extremidades, mas há espaço entre todos eles. Se você dissesse espaço ao redor, também haveria espaçamento do lado de fora dele. Certo. Então isso é definitivamente um passo melhor, mas não é exatamente o que estamos procurando. Ok, então agora precisamos adicionar outra propriedade. Queremos dar a isso uma largura restrita para que ele possa ser cortado e não ocupar toda a largura da tela. E vamos dar a ele uma largura de 500 pixels. Agora. Esmagados juntos, está começando a se parecer mais com o site original. Certo? Agora, o que queremos fazer é colocar algum espaço entre a imagem principal e esses caras. Então, vamos usar a propriedade de margem aqui. Agora, a maneira como a propriedade de margem funciona é que você pode dar a ela de uma a quatro entradas. Certo? Então, se dissemos dez pixels, isso colocaria uma margem ou um espaço de dez pixels na parte superior. Na parte inferior e nas laterais, você só pode realmente dizer que está na parte superior e lateral. Se colocarmos uma segunda propriedade, como cinco pixels, isso significa que haveria dez pixels de espaço na parte superior e inferior e, em seguida, cinco pixels à esquerda. E a taxa. Se colocarmos outro como cinco pixels aqui, então são dez pixels na parte superior, cinco pixels à esquerda e à direita e cinco pixels na parte inferior. E então a quarta propriedade, se colocarmos outra coisa como três pixels, então seriam dez pixels na parte superior, cinco pixels à direita, cinco pixels no lado inferior do pulmão de três pixels. Então isso parece muito confuso, mas deixe-me explicar isso de uma forma bem direta. Certo. Deixe-me puxar meu quadro branco novamente para que eu possa explicar isso um pouco melhor. Então, temos uma caixa aqui, e então temos algum espaçamento aqui em cima. Alguns espaçamentos aqui, aqui e aqui. Quando você está inserindo medições. Ou vamos ver. Quando estamos inserindo. Colocando entradas na propriedade margem, é assim que funciona. Comece sempre na parte superior e vá no sentido anti-horário. Então, se dissermos dez pixels, começamos no topo. E como há apenas um valor, ele se aplica a tudo. Certo? Se colocarmos outro que o primeiro é dez pixels. O segundo é de cinco pixels. E isso se aplica a ambos os lados. E então a parte inferior é dez pixels podem basicamente superior e inferior são nosso primeiro valor e, em seguida, os lados do mesmo valor. Se adicionarmos outro valor, o topo será dez pixels. Esses lados são cinco pixels e a parte inferior é de três pixels. Então você nunca pode simplesmente se mover no sentido horário. Certo? Então, se colocarmos um a mais do que o topo é dez, a direita é cinco, parte inferior é três, a esquerda é uma. Espero que isso ajude um pouco com isso. Para nossos propósitos, vamos usar algo um pouco diferente. Então, vamos começar com uma margem de 20 pixels. Deixe-me mostrar o que aconteceu lá. Ele coloca os 20 pixels em todos os lados, mas queremos que ele seja centralizado. Então, para o nosso valor esquerdo e direito, vamos dizer auto. E o que isso significa é que a altura é de 20 pixels, e então os lados são basicamente divididos automaticamente para serem o mesmo espaço. O que isso significa na prática é que, se redimensionarmos isso, o espaço à esquerda e grandes mudanças, mas os espaços são os mesmos, certo? Portanto, o espaço total muda, mas esses lados são equivalentes. O que eu, o que quero dizer que auto vai nos ajudar a centrar que eles estão bem. E agora vamos colocar essa propriedade hover nela. Certo? Então, com este, queremos fazer isso em nossas pequenas imagens. Então, o que vamos fazer é na verdade, a primeira coisa que queremos fazer é nos livrar de quaisquer pontos de bala que possam estar lá. Você não pode realmente vê-los por causa do preto. Mas se isso, se tudo fosse branco, lá vai você. Se a página for branca, você pode ver que há pontos de bala, então precisamos nos livrar deles. Então, o que vamos fazer antes de adicionar as pequenas imagens íntimas é que vamos dizer para todos os itens da lista, queremos que o estilo da lista seja nenhum. O que significa que você pode estilizar seus pontos de bala de maneiras diferentes e queremos que não haja estilo, então simplesmente não mostre nada. Certo. Agora, de volta às nossas pequenas imagens. Vamos criar uma imagem pequena. Cólon, superior, direito, assim como fizemos com o H1. E quando passamos o mouse sobre ele, para obter esse efeito de bolha, vamos realmente fazer algo bem simples. Você pode ver as imagens ficarem um pouco maiores. E isso porque tudo o que é é que está aumentando a largura. Podemos alterar a largura para ser, vamos fazer 110 pixels, porque normalmente é apenas 100. E assim você pode ver que é muito rápido. Quando eu realço sobre ele muda instantaneamente. Então, o que queremos fazer para tornar isso um pouco mais suave é outra transição. E para este, vamos apenas dizer facilidade e fazer 0,2 segundos. Certo? Então, é um pouco melhor. Mas parece que ainda há algum trabalho que precisa acontecer. Então é suave quando o mouse sobre ele, mas quando o mouse fora, é um pouco rápido demais. Não é muito suave. Então, queremos colocar a propriedade de facilidade nas imagens pequenas. Está na imagem pequena e não no pairar. Vou te mostrar o porquê. Então, se fôssemos colocá-lo, transição sobre transformação, desculpe, transição e dizemos Ease Out Talvez 0,3 segundos. O que acontece é que ele facilita quando você se destaca sobre ele, mas quando você passa o mouse ou ele usa. Então, por que colocamos na imagem pequena e não passamos o mouse? Bem, porque quando passamos o mouse, queremos que seja fácil. Mas quando é normal, como apenas sem o pairar, queremos que ele alivie. Agora você notará quando atualizarmos a página, vamos ver. É um pouco difícil de dizer. Mas às vezes as imagens são. Lá vai você. Você pode ver que a imagem faz um pequeno efeito de facilidade quando a página é carregada. E isso é resultado de colocarmos isso aqui. Mas acho que é, acho que está tudo bem. Agora, há mais duas propriedades que vou adicionar neste vídeo. A primeira é que quando passamos o mouse sobre essas imagens, queremos que pareça que podemos clicar nelas. Ok, então vou colocar meu cursor e dizer ponteiro. Ok, assim parece que posso clicar neles. Agora, mais uma coisa que você notará, quando a largura das imagens se expande, elas não estão centradas juntas. Você pode ver todos os topos estão alinhados aqui, mas os fundos não estão alinhados. Assim, podemos corrigir isso indo para nossa UL e adicionando uma propriedade chamada align items. Agora, ao contrário de justificar, conteúdo, justificar é uma espécie de alinhamento à esquerda e à direita e alinhar itens. Ou quando você diz uma linha, é um alinhamento vertical. Então, quando dizemos centralizar aqui, vai realinhar todas as imagens para que elas estejam sempre centradas para que o centro das imagens esteja sempre alinhado um com o outro. E dessa forma não é muito grande na parte inferior ou no canto superior direito. Até que possamos obter esse efeito de bolha. No próximo vídeo, vamos começar a criar nossa barra de navegação. E então isso vai ser muito emocionante. Então, vejo você no próximo. 10. Criando um Menu de Navegação: Certo, vamos falar sobre navegação. Esta é a nossa barra de navegação aqui em cima. Deixe-me explicar alguns dos recursos para você. Temos uma fonte diferente da fonte padrão, embora possa ser difícil dizer que essa não é a fonte padrão. Então, precisamos adicionar isso. Obteremos isso das fontes do Google. Precisamos fazer um efeito de focalização com as cores. Precisamos fazer a margem, obter algum espaçamento lá. Vamos usar alguns elementos Flexbox com ele e as coisas da UL, a lista não ordenada, coisas que fizemos com as imagens aqui embaixo. E precisamos fazer com que ele realmente navegue para outras páginas. Então, vamos começar. A primeira coisa que precisamos fazer em nosso código HTML é adicionar um elemento nav. Agora, a tag nav realmente não faz muito. É mais uma separação em nosso código para a pessoa que cria o site possa diferenciar as diferentes partes. É um desses padrões HTML estranhos que é apenas uma coisa. Mas vamos usá-lo aqui para garantir que possamos manter as coisas em linha para que não fiquemos confusos sobre onde está a navegação. E aqui dentro precisamos de outra lista não ordenada. E precisamos de itens da lista, certo? Então, temos as quatro páginas. Queremos a galeria da casa sobre e entre em contato. Obviamente, você pode fazê-lo como quiser. Mas isso é exatamente o que vamos fazer por este. Então, vamos criar tags para nossos links. Vamos criar uma tag aqui. E para o H ref, não vamos colocar nada ainda. Vou te mostrar o que faremos com isso em um segundo. Mas entre a etiqueta de abertura e fechamento, vamos colocar em casa. E agora precisamos copiar isso algumas vezes para que possamos ter Galeria e rejeição e contatos. Agora, se você der uma olhada no que isso criou, você pode ver que ele realmente apareceu aqui em baixo. Ok, então isso é interessante, isso me mostra que nosso código provavelmente está na ordem errada, ou seja, você pode ver nossa tag de imagem aqui está acima deles. Então, precisamos mover isso para lá. E vou salvar. E tudo bem, agora está aqui em cima. Você pode ver que está tudo perfeitamente. Acredito que isso significa que o link foi visitado. Então, se você vir um piscar sem estilo, geralmente é sublinhado e muda cores dependendo se você clicou ou não nele. Aquela coisa de quadril, queremos nos livrar de tudo isso para que possamos torná-la nossa própria coisa única. Ok, agora você notará algo muito interessante. Já está espaçado. Basicamente, como queremos . Por que isso? Bem, vamos dar uma olhada no nosso código. Certo? Anteriormente, especificamos que, se tivermos uma lista não ordenada, queremos que ela seja uma flexbox. Queremos ter espaço entre eles. Temos uma largura específica, margem específica e alinhamento de objetos. E como a navegação também é uma lista não ordenada, tudo isso também se aplica. Não só isso, mas porque temos o LI aqui com o estilo de lista de nenhum, isso também se aplica. Portanto, não precisamos nos preocupar em nos livrar dos pontos de bala. Então metade do nosso trabalho já está concluído e não precisávamos fazer nada extra, o que é bastante épico. A principal coisa que precisamos fazer é mudar a fonte, livrar-se dos sublinhados e fazer com que os links funcionem. Vamos começar com essa fonte. Vamos para o Google Fonts. E vamos obter uma fonte chamada densidade de barco a remo. Vou procurar aqui por um verdadeiro bote ao redor do barco a remo. Sim, eu não sei que ele está, mas vamos clicar nisso. Certo. Então você pode ver, ao contrário do outro, há muitos estilos diferentes aqui, muitas espessuras diferentes. E então precisaríamos decidir o que queremos porque não precisamos de nada extravagante. Vamos apenas com 400 regulares. Apenas o tipo de fonte básica padrão. Você pode selecionar vários vínculos que permitirão alterar o peso da fonte ou essencialmente a ousadia no CSS. Mas nós realmente não precisamos disso. Não estamos usando tantas palavras na página. Então, vamos selecionar esse estilo aqui e subir e vocês são famílias selecionadas. E agora precisamos incluir esse link em nosso código. Então, vamos em frente e adicione. Agora você notará algo interessante. Parte do código que ele conectou é a etapa em que você tem. Então, temos essas duas linhas para a fonte anterior que usamos, mas depois as incluiu novamente. Então, na verdade, não precisamos das duplicatas e nos livramos delas. Tudo o que precisamos é deste especial, desculpe-me, este especial que especifique Roboto. Certo, isso é ótimo. Uma ou duas a menos, menos linhas de código. E agora precisamos copiar as regras CSS ou as propriedades que copiarão isso aqui. E vamos ver. Então, a maneira que eu quero fazer isso é acho que seria bom ter uma aula em cada dos elementos da lista. Então, o que vamos fazer é colocar uma classe de item de navegação. Vou copiar isso. Cada um desses. Ótimo. Agora vamos fazer um ponto ou ponto para nossa classe e dizer item nav. E copie isso novamente. Ótimo. Então deixe-me mostrar o que está acontecendo aqui. A família da fazenda que escolhemos é Roboto. Mas tem a segunda propriedade que é San Serif. Sans-serif é uma fonte bastante básica. E a razão pela qual isso inclui é porque, se não puder, por qualquer motivo não conseguir obter o Roberto, é padrão enviar Sarah. Então, como se o site do Google falhasse e não conseguíssemos encontrar a fonte, não quebraria tudo. Parece um pouco mais feio, mas seria padrão para essa resposta. Então é isso que isso significa. Vamos em frente e pressionaremos Salvar. E vamos ver os resultados. Ok, então a fonte, acredito que seja diferente. Vamos testar isso. Vou pressionar Control Slash no meu teclado aqui e ele comenta esta linha para que não aconteça, não é um efeito. Ok, sim, então há uma pequena diferença nas fontes. Gosto, mas vamos, vamos ter isso. Certo? E agora o que precisamos fazer é nos livrar do roxo, dos sublinhados e tudo mais. Então, vou adicionar outro seletor aqui, e vamos chamar isso de guache de dois pontos. Então isso está se referindo, referindo-se à tag a e, da mesma forma que fizemos aqui, essa é a propriedade da tag chamada link. E podemos estilizar isso especificamente. Vamos dizer decoração de texto. Nenhum. O que significa que não sublinha. Semelhante a como não tivemos nenhum estilo de lista. Eles se livraram dos pontos de bala. É assim que o texto é decorado. Para um link. Não queremos que ele seja decorado. Colocamos isso lá. Agora adicionamos um chamado dois pontos visitados, o que significa que isso é visitado, que significa que o link foi visitado anteriormente. E é por isso que é roxo. E não queremos que ele faça nada. Então, novamente, vamos dizer decoração de texto. Não. Isso não fez nada. Certo. Talvez essa propriedade não fosse necessária. Mas vou deixá-lo lá por precaução. Mas o que realmente pode mudar isso é adicionar uma cor de branco. Certo, ótimo. Agora, quando visitamos o link, ele não funciona. Não fica roxo, o que é ótimo. Só precisamos que ele fique vermelho quando nos destacarmos sobre ele. Então, o que podemos fazer para isso é criar nav, item dois-pontos hover. Já fizemos isso antes e apenas dizemos cor vermelha. E novamente, queremos fazer uma boa transição para que pareça suave. Então coloque a transição. E este dirá facilidade para entrar, sair. E orvalho 0,2 segundos. Agora, se nos destacarmos sobre ele, é bom pouco. Bons efeitos. Ótimo. Certo. E então, basicamente, cobrimos tudo. Quando destacamos sobre o item de navegação. Temos o ponteiro. Acredito que seja um ponteiro por padrão porque é um link. E então pairava. Quando passamos o mouse sobre ele, é lido. Tudo o que precisamos fazer agora além de fazer os links funcionarem é acertar o espaçamento. Então, vou vir aqui e acertar a etiqueta de navegação, para que possamos estilizar isso especificamente. Agora você notará que eu continuo pulando por esse arquivo e adiciono coisas em lugares diferentes. A razão é que eu gosto de ser organizado e posso agrupar as coisas. Então você pode ver todos os elementos relacionados ao nav estão juntos, todos os A's estão juntos. E os ULs, os aliados como tudo, trabalham juntos. Grupo I agrupá-lo juntos. Então é isso que estou fazendo. Ok, então realmente devo mencionar que não importa onde no arquivo você coloca isso. Sempre funcionará. Então eu poderia cortar isso e colocá-lo aqui em baixo. E isso não faria diferença, certo? Só importa que esteja neste arquivo. Então, a última coisa que precisamos fazer aqui é a margem. Certo? Então, vou colocar margem. Agora, o espaçamento no topo já parece muito bom. Então, vamos com 0 para o topo. Agora, à esquerda e à direita, não precisamos mudar nada porque já temos essa bela margem. Então, gritos. Vamos tentar outro 0. Então, para o fundo, bem, para o fundo, faremos apenas dez pixels. E então, novamente, oh sim, sim. Portanto, este será o top 0, esquerdo 0, dez pixels inferiores. Certo? Então você verá que parece bom agora, porque temos zeros aqui e estamos usando apenas o fundo, na verdade há uma propriedade diferente que podemos usar. E é chamado de margem, fundo e tudo o que podemos dizer apenas dez pixels. Então, na verdade, não precisamos ter tudo isso aqui. Então, vou apenas dizer na margem inferior dez pixels. E vamos ver como ele está vindo. Vamos ver como ele se parece semelhante ao nosso outro site. Ok, você pode ver que eles são idênticos. A única coisa que resta é a funcionalidade. Então, vamos começar a fazer esses links. Certo? Então, temos nossos elementos H ref aqui. Precisamos vinculá-lo a algo. Anteriormente, falamos sobre vinculá-lo a um site, mas precisamos vinculá-lo a um arquivo que temos em nossa pasta conosco. Então, na verdade, vamos criar outra página chamada galeria dot HTML. Esta é a página da galeria que apenas exibe as outras quatro imagens. E a razão pela qual eu tenho essa página é apenas para demonstrar os links para, desculpe-me para estilizar essa página. Na verdade, vamos apenas pressionar Control a e copiar tudo sobre ele copiar tudo sobre ele e apenas nos livrar do que não precisamos. Dessa forma, não precisamos reescrever a maioria das coisas. Certo? Então, vamos ver aqui, podemos nos livrar do principal. Bem, vamos nos livrar de tudo isso por enquanto e deixaremos o topo. Dessa forma, as fontes e tudo ainda funcionam. Certo? Agora, o que queremos fazer aqui é vamos ver, queremos fazer uma imagem principal, o que significa que esta é a imagem principal. E na página da galeria, queremos exibi-la assim repetidamente. Então, vamos usar a imagem principal como uma aula aqui. E então vamos fazer isso. Criaremos uma tag de imagem. E vamos dizer que a fonte é a imagem um. E então eu vou copiar isso. Vamos mudar isso para três a quatro. Agora, precisamos dar a ele uma classe de imagem principal. Aqui está o problema. Já usamos. Imagem principal aqui como ID. Então, vamos realmente mudar isso para uma classe. E então, em nosso arquivo CSS, encontraremos a imagem principal. E em vez de ter um sinal de libra colocará um período. E agora é uma aula. Então, vamos ver, tudo quebra, ok, é bom, é bom. Ok, então agora vamos adicionar essa classe de imagem. E vou copiar e colar isso em cada um. Ok, agora não podemos ver como a página se parece ainda porque não temos uma maneira de chegar até ela. Então, no nosso index.html na galeria H ref, vamos apenas colocar o ponto da galeria HTML. É tão simples quanto isso. Nós apertamos Salvar. Posso ir em frente e clicar aqui agora. E isso me leva à página da galeria. Agora você pode ver que não é exatamente como queremos. Precisamos de algum espaço entre as coisas e ainda precisamos da barra de navegação no topo. Certo, aqui está o que vamos fazer. Vou mostrar a você como criar estilos em linha. Portanto, um estilo embutido é quando incluímos CSS diretamente no arquivo HTML. Em vez de criar um arquivo externo como fizemos aqui. A razão pela qual você pode querer fazer isso é se você tiver apenas uma ou duas coisas que precisam de estilo e não um monte. Normalmente, não recomendo usar estilos embutidos. Se você tem muitos estilos que estão acontecendo, ele simplesmente atrapalha o arquivo HTML. Mas aqui pode ser útil. Então, dentro da tag body, vou criar uma tag de estilo. Qualquer coisa dentro da tag de estilo é tratada como CSS. Então, vamos dizer IMG para imagem porque queremos colocar espaçamento entre todas essas imagens. Vou colocar uma margem inferior de 50 pixels. Dessa forma, há um pouco de espaço embaixo de cada um. Ok, isso nos dá esse efeito agradável, certo? Então é assim que você faz um estilo embutido. Agora, o que precisamos fazer é terminar nossa barra de navegação. Então, só vamos criar links para duas das páginas. Página inicial adicional. Vamos vinculá-lo a index.html. Para que não importa em qual página você esteja, se você clicar em Início, ela o levará a essa página principal. Agora, nestes, já que não estamos colocando nada, vamos colocar um sinal de libra. E isso é uma espécie de espaço reservado. Se você clicar nesses botões, ele apenas o redirecionará para o index.html. Então, agora que temos isso, vamos copiá-lo e colá-lo em nossa galeria sob o Explorer. Certo, e agora temos nossa barra de navegação. Agora, você pode notar que temos dois problemas aqui onde esses caras não estão fazendo o que deveriam fazer. Eles são azuis quando deveriam ser brancos. Então, vamos ver o que podemos fazer para corrigir isso. Vou ao nosso item de navegação aqui em nosso CSS e dizê-lo para ser sempre branco. Então, vou dar uma cor branca. Por padrão, é sempre branco, não importa se clicamos nele ou não. Mas isso deve resolver esse problema. Agora, a última coisa que eu quero fazer a navegação é fazê-lo para que possamos clicar neste ícone de exploração e fazê-lo ir para a página inicial. Neste momento, é apenas um 81. E então precisamos fazer um pouco de modificação. Para fazer isso, vamos colocar o H1 dentro de uma tag. Então, vamos seguir em frente e criar uma tag para isso. E queremos o H ref para o index.html. Então essa é a nossa página inicial. Agora podemos simplesmente cortar esse texto e colocá-lo dentro da nossa tag. Você pode aninhar tags assim, e nós só teremos nosso H1 dentro da tag a. Agora, se clicarmos nele, isso nos leva para a página inicial. Então, se formos à galeria, na verdade precisaremos copiar isso e colá-lo em nossa galeria também. Agora, se eu clicar nisso, ele nos leva de volta à nossa página inicial. Certo? Agora você pode ver que estamos tão perto de ser feito. Os sites parecem idênticos. Acho que não há diferenças estilisticamente entre os dois lados. A única coisa que precisamos fazer é adicionar algum JavaScript para torná-lo interativo para que, quando clicarmos nessas imagens, essa parte do site mude. E faremos isso no próximo vídeo. 11. Fazer o seu Slideshow Interativo! (JavaScript): Para finalizar, vamos adicionar algum JavaScript para fazê-lo modo que, quando clicarmos nessas imagens, ele altere o que é exibido como a imagem principal. Não vamos usar muito JavaScript. Portanto, este definitivamente não é um curso abrangente sobre JavaScript. Este foi um curso focado principalmente em HTML e CSS. Mas vou mostrar um pouco de JavaScript para fazer isso funcionar. Então, no nosso código VS, precisamos criar um novo arquivo. E vamos chamá-lo de aplicativo. Na verdade, não, desculpe, não aplicativo. Vamos chamá-lo de apresentação de slides. Dot js. Json significa JavaScript. Então, se você se lembra, JavaScript é a linguagem que torna as coisas interativas. Agora, para usar nosso JavaScript, precisamos inserir uma tag de script em nosso HTML. Na verdade, faremos isso abaixo do elemento body, mas ainda dentro do elemento HTML. Então, diremos roteiro. E você pode se mover para a fonte. E diremos slideshow dot js, e isso é tudo o que você precisa incluir aqui. Agora, por que abaixo da tag do corpo? É porque quando tudo, bem, quando carregamos o site, precisamos carregar todo o HTML e carregar o script por último. Dessa forma, tudo funciona em conjunto corretamente. Não seria realmente um problema neste site. Eu não acho que se tivéssemos a tag de script antes, mas em muitos casos você quer que ela fique abaixo da tag body. Então, temos isso lá dentro. Agora. Deixe-me mostrar o básico do JavaScript. Não vou te mostrar muito apenas o suficiente para descobrir como fazer isso funcionar. Javascript é uma de uma linguagem de programação real. Html e CSS são muitas vezes considerados linguagens de não programação por pessoas porque eles não têm muitos dos mesmos recursos que a maioria das linguagens tem. Gosto de chamá-los linguagens de programação porque isso me faz sentir melhor e acho que elas são legais. Mas o JavaScript é mais uma linguagem de programação tradicional, o que significa que podemos criar variáveis. Uma variável é apenas um pouco, você pode pensar nisso como uma caixa. E podemos dizer, vamos dar essa caixa e nome e vamos colocar coisas dentro dela. E depois, quando estamos em uma parte diferente do nosso programa, podemos dizer: Oh, vá pegar aquela caixa que tinha esse nome que tinha algo escrito ao lado. Nós vamos buscá-lo e pegamos o que está dentro dele. Então, espero que isso faça sentido. Vou te mostrar como isso funciona um pouco. Para criar uma variável em JavaScript, precisamos usar a palavra-chave let. Vamos apenas indicar que você está criando uma nova variável. Então, damos um nome a ele. O que queremos fazer essencialmente é que queremos criar uma variável que contenha essa imagem principal. E então vamos mudar qual é a fonte das imagens para que a mudemos para as outras imagens. Vamos chamar essa imagem principal. Agora, a razão pela qual eu fiz o DM minúsculo e o capital dos olhos é porque isso é o que chamamos de CamelCase. É um padrão em muitos programadores, onde se você tiver várias palavras em um nome de variável, a primeira letra é minúscula e todas as outras palavras são maiúsculas na primeira letra. Então, se eu dissesse imagem principal, legal, nós capitalizaríamos isso. Agora vou defini-lo igual a algo. Esta é a parte em que colocamos algo na caixa. Precisamos colocar a imagem na caixa. Ok, a maneira como fazemos isso em HTML é que vamos chamar o objeto do documento. O documento apenas significa que é um arquivo HTML. Então, vamos dizer documento. Vamos acessar uma parte do documento. Então, a maneira como fazemos isso em JavaScript é colocando um ponto. E agora vamos, uma das propriedades que o documento tem é que ele tem a capacidade de obter um elemento com base em informações, dar, dar a ele. Então, vamos dizer ponto do documento, obter elemento por ID. Isso é normal o suficiente em inglês para obter elemento por ID. O que isso significa é que vamos dar a ele um ID e ele vai obter o elemento que corresponde a esse ID. Certo? Agora, se você se lembrar anteriormente, mudamos a imagem principal para uma classe. Então, para que isso funcione, na verdade, vamos adicionar um ID. Assim, você pode ter várias classes e IDs para uma imagem ou um objeto. Então, vamos dar a ele um ID especial apenas para que não entendamos em conflito com a classe de imagem principal. E então, para essa ideia, vamos dizer a imagem principal traço JS. Isso só nos indicará que isso é para o propósito do JavaScript. É por isso que precisamos dessa identificação , então temos essa ideia. Vou copiar isso aqui. E em nosso código, dissemos obter elemento por ID. Agora, entre parênteses, vamos colocar aspas simples e o nome do id e, em seguida, colocar um ponto-e-vírgula no final. Então o que isso diz é, diz que temos uma caixa e é chamada de imagem principal. Agora precisamos colocar algo dentro da caixa. Então, vamos para o documento, que é apenas o HTML. E vamos dizer, Ei, HTML, preciso obter o elemento que tem um ID da imagem principal js. E o HTML faz, ok. A imagem principal id js se aplica a essa imagem específica indicando a imagem principal na página. Este aqui. Certo? E então dissemos, ok, temos essa imagem agora quando a tocamos em blocos. Então, espero que isso faça sentido. Temos a imagem e ela está dentro da nossa caixa. Agora o quê? Agora vamos criar o que é chamado de função. Uma função é algo que pode ser chamado repetidamente quando você faz alguma coisa. Nesse caso, toda vez que clicarmos em uma das imagens, vamos tratá-la como um botão. E vamos chamar essa função. E o que ele vai fazer é dizer, oh, você clicou nessa imagem. Bem, vamos fazer com que essa imagem se torne a principal que mostramos. Para fazer isso, escrevemos função e damos um nome à função. Então, vamos apenas dizer mudar a imagem. Certo. Agora, depois de mudar a imagem, vamos colocar esses parênteses. Essa é apenas a sintaxe de uma função. Sintaxe significa exatamente a maneira como você a escreve. E então vamos colocar os suportes encaracolados. Então é assim que uma função se parece em JavaScript. Então, vamos colocar de dentro dele. O que precisamos fazer é obter a imagem principal que agora salvamos como variável. Então nós dissemos: Ok, vá pegar essa caixa. E vamos fazer algo com o que está dentro da caixa. E fazemos isso pressionando o período, assim como fizemos com get elemento por ID. Então, dizemos imagem principal. Agora vamos dizer atributo set para algo. Se você se lembra, um atributo em HTML, é que existem essas coisas como classe H, ref, ID, Alt, todas aquelas coisas que se encaixam dentro das tags de abertura e têm algumas propriedades Isso é chamado de atributo. Então, queremos definir o atributo source, a imagem principal aqui. Queremos definir o atributo source como o mesmo que a imagem em que clicamos. Certo? Como fazemos isso? Bem, dentro do conjunto de um atributo, podemos colocar duas coisas. Primeiro, precisamos colocar o atributo que queremos definir. Embora entre aspas, vamos colocar o SRC para fonte. E depois disso, colocamos uma vírgula. E agora precisamos colocar a nova imagem, mas ainda não temos uma maneira de obtê-la. Então, vamos descobrir isso. Em nosso index.html, precisamos encontrar alguma maneira para que, quando clicamos em uma imagem, ela chame a função e diga o que essa imagem é fonte. Então, vamos adicionar novos atributos e isso se relaciona ao JavaScript. Isso é chamado onClick. Então, é bem simples. Quando você clica em algo, ele faz, ele executa uma função. Dizemos onclick. Precisamos executar a função Change Image. Agora, algo legal que podemos fazer em JavaScript é quando chamamos uma função, podemos passar um argumento, o que significa que podemos dizer, aqui, vou mudar a imagem, e aqui está a imagem que eu quero para mudar. Nós lhe damos outra coisa, algo para trabalhar. Então, vamos dar algo para trabalhar. Então, dentro da imagem de mudança, vamos colocar aspas e vamos dizer Image one dot JPEG. Então, quando dizemos mudar a imagem, vamos dizer: Ok, aqui está o que vamos te dar. Vamos dar-lhe image1 ponto jpeg. Isso será o que a função usa. Então, vou copiar isso para cada um desses itens da lista. E vamos mudar este para, mudar este para três. E este também. Então, toda vez que dizemos que clicamos na imagem três, diz: Ok, altere a função executar a mudança de imagem. E vamos dar a imagem JPG de três pontos para trabalhar. Então, agora, como implementamos isso no próprio JavaScript? Então, o que podemos fazer é dentro da função Change Image nesses parênteses, podemos apenas dar um nome a uma variável. Então, vamos apenas dizer imagem. Isso significa essencialmente que vamos passar a função algo e vamos chamar essa imagem. Portanto, não é como uma variável normal como essas. É mais como se pudéssemos chamar a função e dar o que quisermos. E isso só vai chamar essa coisa de imagem. Agora podemos colocar essa imagem aqui e garantir que você obtenha isso, esse ponto e vírgula. Então o que isso fez é dizer: Ok, bem, se estamos escolhendo a Imagem três, então dizemos, ok, Alterar imagem e dar-lhe essa cadeia de texto, imagem de três pontos JPG. E diz, ok, essa sequência de texto, vamos chamar essa imagem. E agora, quando chamamos atributo set, vamos colar essa cadeia de texto lá, substituir a imagem por essa cadeia de texto. O que ele faz é definir esse atributo de origem igual a essa cadeia de texto. E isso é tudo o que precisamos fazer para seguir em frente e clicar em Salvar. Agora, se formos ao site, onde quer que esteja, você verá que toda vez que clicarmos em uma imagem, ela muda a imagem que existe. Porque diz pegar a imagem, desculpe, diz fazer uma caixa chamada imagem principal. Vá encontrar o elemento que tem a imagem principal dot js, que é essa imagem geral. E diz, tudo bem, toda vez que clicamos em uma pequena imagem, mudamos a imagem grande, definimos seu atributo de origem como a nova fonte de imagem. Portanto, se clicarmos na imagem para, ela enviará a imagem para a fonte da imagem para a imagem. Esse é todo o JavaScript que vamos usar neste curso. Como eu disse, não vamos entrar na complexidade de fazer uma apresentação automática de slides de tempo neste curso. Mas isso é definitivamente algo que você conseguiria encontrar online. E então este é o produto acabado. Agora, no próximo vídeo, vamos falar sobre o projeto da classe e meio que encerrar as coisas. Vejo-te nessa. 12. Projeto Final e Conclusão: Antes de terminar este curso, quero que você faça uma última coisa para o seu projeto final. Quero que você use as habilidades que aprendeu nesta classe para criar algo próprio. Por que você criar algo, talvez um site de portfólio ou algo para o seu negócio, ou apenas algo para se divertir. Não precisa ser complicado. Pode ser muito simples, mas pode ser seu. Você pode criá-lo do zero com as habilidades que você aprendeu neste curso. Uma maneira de abordar meus próprios projetos criativos divertidos é escrever o que quero criar. Ou vou desenhar em um quadro branco ou em um pedaço de papel. Vou pensar eu quero que o site se pareça. Então eu descubro, descubro quais habilidades eu preciso aprender para fazer com que pareça assim. Então, vou aprender quais tags HTML vou precisar, que CSS vou precisar para estilizá-lo corretamente da maneira que eu quiser. E então vou aprender o JavaScript que preciso para obter a funcionalidade que eu queria. E então eu recomendaria fazer isso. Use os recursos que vinculei na descrição do curso para saber mais HTML, CSS e JavaScript. Agora, eu tenho mais duas coisas para você. Então, se você gostou deste curso, por favor, vá conferir minhas outras aulas de Skillshare a partir de agora, eu tenho outras duas. Uma delas é a manipulação do DOM JavaScript, que é essencialmente o que fizemos neste curso. Um pouco onde você manipula o HTML e o CSS com JavaScript, é uma habilidade muito útil. O segundo curso é aprender Angular, que é uma estrutura JavaScript. Uma estrutura é basicamente uma versão expandida do JavaScript que oferece mais recursos, mais funcionalidades e facilita as coisas complicadas. Então, eu recomendo que você vá conferir se quiser tornar seu site mais expressivo, mais dinâmico, eles são realmente ótimas habilidades para se ter. A segunda coisa é que, se você quiser ver mais tutoriais de tecnologia gratuitamente, se você quiser saber mais sobre programação gratuitamente, vá conferir meu canal do YouTube em youtube.com slash Taylor English. Lá você pode ver uma série de vídeos que eu coloquei para todos os tipos de perguntas que você possa ter ou coisas que você pode estar interessado em aprender. Certo? Agora, além disso, se você estiver interessado em música por qualquer motivo, você pode ir me conferir no Spotify. Vou vincular isso na descrição do curso também. Eu faço solos de piano e espero fazer mais piano e talvez música techno no futuro. Então, se você quiser ir verificar isso, isso é incrível. Mas eu só queria agradecer muito por assistir este curso até o fim e por aprender essas habilidades incríveis. Porque eu sei que o que você aprendeu realmente vai abençoar sua vida e a vida daqueles que você ajuda. Então, obrigado por fazer este curso e espero vê-lo novamente em breve. Desejo-lhe o melhor.