1. Introdução: Fundamentos de web design responsivo - HTML5 + CSS3 + Bootstrap: Oi lá. Meu nome é Daniel Scotts. Juntos, vamos aprender a construir sites responsivos. Criaremos sites profissionais modernos que ficam bem no celular, no tablet e no desktop. Vamos construir para locais juntos. Este site de restaurante simples, este site de reparação de bicicletas um pouco mais avançado. este site portfólio responsivo, e há site bootstrap para a minha empresa de iogurte protótipo. Agora, você vai aprender tudo o que precisa para criar um site, começando na sua primeira página, até carregá-lo para a internet. Vamos usar a ferramenta de design de site mais popular e surpreendentemente gratuita do mundo chamada Visual Studio Code. Existem arquivos de exercícios para download para que você possa acompanhar comigo e todos os vídeos. No final de cada vídeo também, eu vou salvar onde eu estou fazendo, para que no caso de você se perder ou algo não está bem, você pode copiar seus arquivos, mas meus arquivos, é uma maneira agradável e fácil de garantir que você não se perca. Vamos cobrir todas as coisas boas, como como criar o seu próprio [inaudível] a partir do zero usando alguns JavaScript básico e jQuery. Saiba como trabalhar com imagens e ícones responsivos, além de imagens fantásticas de plano de fundo em tela cheia e, provavelmente, gradientes de um para muitos. Aprenderemos como criar fontes e como escolher ótimas fontes para o seu site. Aprenderemos como trabalhar com fontes Bootstrap, configurar diretamente seu próprio nome de domínio e hospedagem e como enviá-lo ao vivo para a internet para que outras pessoas possam ver seu site. Ao longo do curso, eu defini alguns projetos de classe divertidos para que você possa praticar tudo o que você está aprendendo no curso. No final deste curso, você terá uma boa compreensão dos tópicos importantes de web design como HTML5, CSS3, flexbox, design responsivo Bootstrap. Se isso tudo soa um pouco assustador e um pouco extravagante, não se preocupe, este curso é destinado a iniciantes completos. Você não precisa de experiência em web design. Você não precisa ter codificado uma única linha em toda a sua vida. Aqui nós vamos começar bem no início e trabalhar nosso caminho através passo a passo. Quem sou eu? Meu nome é Daniel Scotts e não sou um web designer há cerca de 15 anos. Também sou um instrutor premiado pelos últimos dois anos seguidos. Um, um Mx Masters Award na enorme conferência Adobe MAX. Também tenho óculos de aro e uma camiseta legal. Tenho certeza que a combinação de justiça sozinha deve me fazer qualificar, talvez. Se você finalmente está pronto para atualizar você mesmo, inscreva-se para os mais legais e vamos criar sites responsivos juntos. 2. Como esse curso de web design está estruturado: Olá, bem-vindo ao curso. Este vídeo eu quero falar sobre como este curso está estruturado. Então, ele é dividido em cinco partes, vai começar no início com apenas uma introdução básica real para HTML e CSS. Então começaremos nosso primeiro projeto. Então, fase um, introdução rápida. Fase dois construirá este site. Então, vamos tirar um tipo de introdução básica de HTML e CSS e sintonizar este site aqui. Apenas um bom simples para começar. A terceira coisa que vamos fazer é criar este site ciclos regra. Agora este site é um pouco mais avançado. Digamos que é HTML intermediário e CSS. Nós cobrimos o básico e o primeiro, e então entramos em que um pouco mais de detalhes aqui.Terceira parte é que vamos fazer o nosso site responsivo. Só significa que ele vai se ajustar para os diferentes navegadores. Então telefones celulares, tablets e sites. É este aqui. É um site de portfólio, agradável e simples. Você pode ver aqui ele se ajusta para diferentes larguras do navegador. Em seguida, o final do curso é olhar para um framework.The framework que vamos usar neste curso é chamado Bootstrap. É super popular e significa que podemos pegar todo o conhecimento que conhecemos até agora e condensá-lo e usá-lo muito rapidamente para construir sites. Vamos introduzir coisas como este jQuery Slider aqui. Imagens deslizam ao longo, há este cursor na parte inferior é fácil Nev móvel. É uma ótima adição para qualquer um que está construindo sites. Um framework como Bootstrap vai fazê-lo ir super rápido, torná-lo super profissional sem você ter que fazer todo o trabalho pesado. Espero que esteja pronto. É hora de começar, e realmente começar a construir sites. Vejo-te no curso. 3. O que baixar para o curso de web design: Tudo bem. Vamos falar sobre o que você precisa baixar e o que você precisa instalar. O download é simples. Há alguns arquivos de exercícios. Haverá um link na página aqui em algum lugar para baixá-los, e eles serão tudo o que usaremos, como imagens e carrapatos que usaremos ao longo do curso. Baixe esses. Dentro do mesmo arquivo que você baixar, haverá algo lá chamado Arquivos Completados. Haverá uma pasta dentro dela. O que eles são é no final de cada vídeo, o que eu faço é salvar onde eu estou fazendo. Se você está acompanhando e não obtendo os mesmos resultados, você pode apenas olhar para o número do vídeo e, em seguida, dar uma olhada nos arquivos concluídos e apenas combinar minha versão com sua versão e ir. Muitas vezes é apenas talvez uma ortografia ou um erro de sintaxe, mas você pode comparar o seu que está funcionando ou o meu que está trabalhando com o seu que pode não ser. Eles estão dentro dos Arquivos de Exercício e Arquivos Completados estão completamente. Outra coisa a falar é sobre o que baixar. Estaremos testando nossos sites no Google Chrome. Certifique-se de baixar isso. O Google Chrome é de longe o navegador mais popular no momento. Baixe isso e faremos todos os testes dentro dele. É como Firefox, Safari, Microsoft Edge ou Internet Explorer, mas é o mais popular. Acesse o site do Google Chrome e eles mostrarão como instalá-lo. A outra coisa a instalar é um editor de código. Vamos usar o Visual Studio Code. Por quê? Há muitos editores de código diferentes. Você não precisa especificamente deste, mas você vai precisar dele para este curso em particular. Porque basicamente um site é uma mistura de HTML, CSS e JavaScript, e você pode usar qualquer editor de código para fazer isso. Vamos usar o Visual Studio Code, não o Visual Studio. É um produto maior. Você precisa do Visual Studio Code específico. É de graça. É feito pela Microsoft. Só para você saber, estou usando isso principalmente porque é o mais popular no momento. Se você estiver procurando trabalhar após este curso, você provavelmente vai acabar em um estúdio onde eles estão usando o Visual Studio Code. Você deve muito bem estar aprendendo o mesmo. As técnicas e ferramentas que você vai aprender neste curso vão aplicar o mesmo também se você estiver usando um editor de código diferente. Digamos que você esteja usando Atom, Sublime ou Bloco de Notas ++. São todos bons editores, mas acabam fazendo a mesma coisa. Os atalhos são diferentes, eles têm diferentes maneiras de trabalhar, mas a saída é a mesma. Portanto, não se preocupe se você aprender tudo isso no Visual Studio Code e então você tem que ir e usar outro editor. Tudo se aplicará adorável. Mas sim, instale o Chrome, instale o código do Visual Studio. Ambos são gratuitos e eu vou vê-lo no próximo vídeo. 4. Criando e testando nossa primeira página da web em HTML: Olá a todos. Este vídeo vamos fazer a nossa primeira página web. Não vai ser realmente emocionante, vai dizer “Hello World”, e em um navegador, ele vai mostrar “Hello World”. O curso fica muito mais empolgante, mas precisamos fazer o básico, e isso inclui como configurar uma pasta para o nosso site, como criar nossa primeira página HTML e como testá-la em um navegador. Vamos fazer isso. Então nós instalamos o Visual Studio Code, e nós o temos aberto na nossa frente. Agora o seu vai parecer um pouco diferente do meu. Temos esta aba de Boas-vindas aberta ao longo da parte superior, você pode ter outra aba aberta dizendo Novos Documentos de Lançamento ou algo semelhante, e também o seu pode parecer um pouco diferente porque eu estou usando um Mac ao longo deste curso e você pode estar usando um PC. Não se preocupe, eles funcionam da mesma forma. Apenas alguns dos atalhos são ligeiramente diferentes, mas vamos cobri-los durante o curso. Pode ser um pouco intimidante esta tela de boas-vindas e todas as outras guias na parte superior. Então, apenas para tornar tudo cristalino e fácil, feche todas as abas ao longo do topo, batendo nesta pequena cruz aqui, clique uma vez em todos eles até que você acabe com esta aplicação agradável, limpa e clara. A outra diferença que você pode ter também é ao longo do lado aqui tem um monte de guias. Isso vai ser útil, mas por enquanto, se você clicar no topo uma vez, duas vezes desaparecer, tudo é bom e limpo, e vamos criar nosso primeiro arquivo. Para criar a nossa primeira página web, ela precisa ir para uma pasta. Não pode estar apenas deitado em sua pasta de documentos ou em sua área de trabalho, ele tem que ir dentro de uma pasta e tudo para esse site precisa ir nessa mesma pasta. Então, para criar essa pasta, vamos para Arquivo e vamos para Abrir, o que é estranho. Vá para um arquivo, Abrir e ele diz, “Qual pasta você deseja abrir?” Ainda não criamos. Segure em. Então o que fazemos é em um Mac, há um botão Nova Pasta em um PC, é um pouco diferente, você está procurando por isso, é um pequeno ícone de Nova Pasta [inaudível] amarelo com um pequeno ponto de exclamação no canto, e decidir onde você vai colocá-lo. Para este curso, vou colocá-lo na minha área de trabalho. Veja como a minha área de trabalho está limpa, eu limpo totalmente isso para este curso. Mas de qualquer forma, Desktop, New Folder, como vamos chamá-lo? Vamos chamá-lo de Projeto 0. Clique em “Criar”, e essa é a minha pasta. Estou dentro do Projeto 0, e vou clicar em “OPE” N. Algumas vezes você tem que selecioná-lo e clicar em “Abrir”. Você sabe que é certo quando você está no topo e diz, “Bem-vindo ao Projeto 0" no topo. Do lado aqui, ele deve ter esta opção, Projeto 0. Não há nada dentro dele ainda. Mas essas telas de boas-vindas voltam. Vai-te embora. Então nós temos a pasta e tudo o que está na minha área de trabalho, é que eu tenho uma pasta sem nada nela. Então, estamos apenas fazendo uma pasta dessa maneira. Realmente não importa como você cria essa pasta, desde que ela exista, e você apontou VS Code para ela. Agora precisamos criar nossa página. Vamos criar nossa primeira página HTML. Vamos para Arquivo, vamos para Novo Arquivo. Vamos salvá-lo, File, Save, e vamos colocá-lo. Bem, ele deve saber automaticamente para onde ir. Ele está indo para o Projeto 0, e este vai ser chamado helloworld.html. Não dê nenhum espaço, uma palavra e tem que be.html, vamos clicar em “Salvar”, e apenas aqui em nosso editor, vamos digitar Hello World. Vamos para Arquivo, Salvar. Vou parar de te mostrar o caminho mais longo. Então meu Mac, é Command S. em um PC, é Control S. Eu vou apenas dizer Salvar a partir de agora. Agora precisamos descobrir como visualizar essa coisa porque nós fizemos isso, você fez um site, um pequeno. Mas como verificamos isso? Precisamos usar o Google Chrome. Então vá abrir o Google Chrome. Então eu abri o Google Chrome e nós vamos para Arquivo, e depois ir para Abrir arquivo, e então nós vamos encontrar o nosso Projeto 0. Está na minha área de trabalho. Lá está o Projeto 0, dentro do Hello World. Antes de clicar em Abrir, lembre-se deste momento, se você já fez um site antes, não é tão emocionante, mas se este é o seu primeiro, prepare-se para este momento, este momento de glória, pronto? É isso. Esse é o seu site da Hello World. Mas olhe em volta, lembre-se deste momento. Esta é a primeira coisa que você já fez. Lembro-me quando eu fiz meus primeiros sites, foi um pouco mais emocionante. O mundo Olá, o seu será também, e eu vou mostrar-lhe o site que eu fiz o meu primeiro um pouco mais tarde. Eu acho que talvez se eu mostrar para você aqui, você pode [inaudível] desligar. De qualquer forma. Foi ruim, mas foi há 20 anos. Então vamos recapitular o processo de volta ao código VS. Aqui vamos colocar ponto de exclamação, em seguida, aperte “File”, “Save”, eu prometo não te mostrar muito longe, eu fiz. Em seguida, volte para o Google Chrome e ele não foi atualizado. Então, sempre que você fizer um salvamento ou fazer uma alteração no VS Code, aperte este pequeno botão Atualizar ou botão Recarregar. Se você não pode vê-lo lá em cima, ele vai estar em algum lugar. Onde está Recarregar? Eu nem sei o caminho mais longo para Recarregar lá está. Então, se você recarregar, lá está ele. exclamação. Então esse é o processo. Faça a codificação em VS Code, verifique seu site no Chrome para se certificar de que ele está funcionando bem, não está quebrado, e você dança um pouco porque você fez um site, se o seu quebrou durante esse processo. É um mau começo. Está tudo bem. O que provavelmente acontece é que você se esquece de adicionar the.html, se isso acontecer. Você só tem algo chamado Hello World, não HTML. Isso vai acontecer com você. Você é como, “Claro que eu fiz. Eu segui Dan.” Mais tarde neste curso, se você é novo, isso vai acontecer com você. Então tudo o que você faz é aqui em qualquer um deles. Isto pode ser um pouco confuso, este Explorador. Isso diz, você toda a página que você tem aberto aqui. Isso informa todos os arquivos possíveis em sua pasta. Agora o problema com isso é que você só tem um e cada um, então eles apenas se repetem. De qualquer forma. Você pode clicar duas vezes aqui. - Não. Você pode clicar com o botão direito do mouse nele e ir para o que diz Renomear, e para dizer que na verdade era missing.html ou você soletrou errado, basta digitar, pressionar Return. Então vá e teste esse arquivo no Chrome, e você ficará bem. Isso não é realmente Web Design. É o começo. Vamos para o próximo vídeo onde nós realmente começar a fazer algum HTML adequado e alguns CSS apropriado. 5. O que é HTML5 e CSS3 em web design: Oi lá. Este vídeo é tudo sobre aprender os fundamentos absolutos do que é HTML, versus o que é CSS. Você pode pular isso se você tem um entendimento básico. Vamos fazer algumas coisas bem simples aqui, vamos adicionar algumas tags HTML. Ele vai ficar assim, e então nós vamos empatá-los usando CSS, e vai parecer, aqui vamos nós. Oh, isso é melhor, não pior. Mas você entendeu a idéia? Vamos fazer HTML e, em seguida, torná-lo bonito usando CSS. Vamos entrar no vídeo e aprender como. Para começar, vamos digitar nosso HTML primeiro. Então esta palavra “Olá mundo”, não é HTML, é apenas um texto antigo que digitamos, exclua isso. Quando escrevemos HTML, precisamos seguir alguma sintaxe. Então vamos colocar em algo chamado cabeçalho, e neste caso título 1, o título mais importante em um site, e um HTML usa a abreviação de h1. Agora não podemos apenas digitar h1, precisamos envolvê-lo em colchetes angulares. Então abra colchetes angulares <h1> e feche colchetes angulares. Você pode vê-lo aqui ele fez um par de coisas. Nós digitamos em nosso, colocamos os colchetes de ambos os lados, e você vai notar que código VS, colocar automaticamente nesta tag de fechamento extra. Então é assim que o HTML funciona. É uma etiqueta de embrulho. É uma etiqueta que vai ao redor do início, e o fim e tudo no meio. Este é o meu rumo, rumo um. Enquanto houver de um lado, do outro lado o envolto em colchetes angulares, o fechamento, você vai notar que tem essa barra, e isso diz ao navegador que este é o meu rumo. Vamos salvá-lo, vamos verificar no Google Chrome. Você pode ver lá, atualizar. Eu tenho o meu rumo 1, é grande, é ousado, é Times New Roman, é preto. Essa é uma configuração padrão para um título 1. Vamos adicionar um par de outras tags HTML. Aqui dentro, vamos voltar. Vou digitar colchetes angulares, fechá-los, você verá que ele coloca na sintaxe extra. Se não funcionar, por qualquer motivo, você pode digitar. Então eu vou começar a digitar, ele realmente quer ajudar. Obrigado, código VS. Vamos escrever o título 2. Essas são algumas tags HTML básicas brutas. Outro realmente comum é uma tag p, então colchetes angulares, , fechá-lo, e é o corpo do texto. Você provavelmente terá apenas um em sua página, mas você terá muitos textos de parágrafo diferentes porque é o corpo do texto. Salve-o, verifique em nosso navegador. Você pode ver que estes são o estilo padrão para essas três tags. Para substituir o estilo, é por isso que o CSS entra. Então o que precisamos fazer é nosso HTML é como as coisas na página, e nosso CSS é o estilo dessas coisas na página. Para fazer isso funcionar, vamos colocar um par de retornos no topo aqui, e tipo de tag chamado style. Fechá-lo, e novamente ele coloca na etiqueta de fechamento, e o que eu acabei de fazer lá, é que eu coloquei em alguns retornos. Devoluções não significam nada em código, você pode ter um milhão deles. Ele não será exibido na página. Eu só uso um monte de retornos quando eu estou estilizando as coisas apenas para ter alguma quebra visual de diferentes partes em vez de tentar juntá-las todas. Porque o que você vai notar aqui, é que se eu apagar isso, eu estou apenas trazendo isso para cima. Na mesma linha, se eu salvá-lo, você vai notar aqui no Chrome, é exatamente o mesmo. Então, não importa se você colocar retornos aqui um não, exceto que, parece difícil trabalhar em. Nesta tag estilo, este é o lugar onde nosso CSS está indo para ir. CSS tem um tipo diferente de sintaxe, enquanto HTML tinha um ângulo de fechamento de abertura colchetes, e uma barra para a frente lá. O CSS, você faz coisas assim. Você diz, “Eu quero o h1.” Isso é chamado de seletor. Estou selecionando o h1. Em seguida, você colocá-lo em um espaço e, em seguida, colocar os colchetes em vez dos colchetes angulares. Vou colocar um retorno em meus colchetes, só para separá-lo, não por nenhuma boa razão além de parecer um pouco mais fácil de se comunicar com você. Aqui, eu vou fazer algum estilo h1, e vamos começar com cor. Temos que soletrar do jeito americano. Cor, e depois disso, esta é a propriedade, então seletor, Eu estou selecionando o h1, Eu quero adicionar a cor da propriedade a ele. Ele precisa terminar com dois pontos, e então você escolhe uma cor, está fora para as padrão lá dentro, eu só vou colocar um espaço e digitar vermelho, e no final do CSS, e no final do CSS, nós temos que ter um ponto-e-vírgula. Chaves, dois-pontos, ponto-e-vírgula, que é a sintaxe praticamente para todos os nossos CSS muito simples. Guarde, e vamos ver se funciona. [ inaudível] no navegador, e atualize. Olhe que h1 é estilizado. Sei que não estamos aqui a fazer muito, mas estou entusiasmado. Estou animada por você. Lembro-me de aprender isto quando estava na revelação. Vamos fazer outra coisa. Vou colocar um retorno aqui. Vamos agrupar CSS. Queremos fazer algumas coisas para o h1, desde que esteja dentro dessas chaves, podemos digitar algo como fonte. Vou colocar no estilo de fonte. Você pode ver que este código realmente quer ajudá-lo a sugerir coisas penduradas como tamanho, estilo, exibição. Vou usar estilo. Estou usando meu mouse agora em vez de digitá-lo. Essa é apenas uma das pequenas coisas úteis que você pode fazer com código VS ou você pode usar as teclas de seta no teclado. Você pode ver a pequena linha azul se movendo, eu posso ir para lá e, eu retorno no meu teclado. Temos quase tudo, por isso temos a nossa propriedade. Há o cólon, temos o nosso valor real, que é itálico. O que acontece no final, você tem, ponto-e-vírgula. Vamos bater em salvar, vamos ver o que ele faz. Vamos atualizar. É itálico e vermelho e é um h1. Brilhante. Então eu vou dizer um exercício de aula agora. Eu quero que você altere este h1 para ser um tamanho de fonte de 100 pixels, ou px. Eu gostaria que você pausasse agora mesmo, vá apertar o botão e eu quero que você veja se você pode fazer isso. Tamanho da fonte em 100 pixels, dê uma chance, eu vou te dar uma mão em um segundo. Pausa, vai. Você pode ou não ter pausado. Você pode ou não ter feito funcionar. Vamos ver se você me seguiu. Então o tamanho da fonte, aqui vamos nós, vamos para dois pontos, em seguida, coloque em um 100, e o que as pessoas muitas vezes esquecem é que você precisa do px. Usamos pixels quando estamos lidando com fontes no momento, e o que acontece no final, ponto-e-vírgula. Salve-o, de volta aqui, refresque-se, gigante h1. Vamos discar o h2 juntos, e então eu faço outro pequeno exercício. Então h1, agora eu coloco um par de retornos aqui, chaves, e você pode separá-los usando estes seletor. Os colchetes, e tudo vai no meio que você deseja fazer para esse seletor particular. Neste caso, vamos fazer uma cor de azul, ponto e vírgula, e vamos fazer um tamanho de fonte de 50 pixels. Dê uma chance agora, e eu vou ver um exercício verbal. Quero que tente fazer a tag p. Sozinho, quero que fique verde, e eu gosto que você tenha um tamanho de fonte de 20 pixels? Faça uma pausa agora, veja como vai e pause. Como foi isso? Espero que tenha saído bem, vamos segui-lo juntos. Tag P, chaves encaracoladas, cor de verde. Há algumas verduras diferentes. Verde-amarelo, esse é o meu, ponto-e-vírgula, e vamos colocar um tamanho de fonte de 20 pixels. Ponto-e-vírgula, salve, volte aqui, atualize. Olhe para tudo isso. Coisas boas. Isso é apenas uma introdução ao que é HTML, e como a sintaxe se parece. Estes são estes tipos aqui em baixo, e o estilo deles. Falamos de seletores, eu uso as palavras de anuidade aqui, que se torne um pouco mais natural para você. Seletor, essa é a propriedade, esse é o valor dessa propriedade. Esse é o básico dos sites. Nós só vamos expandir isso. Vamos construir algumas caixas para colocar essas coisas. Vamos começar a fazer alguns bits interativos, mas sim, esses são os fundamentos do HTML e CSS. Vamos saltar para o próximo vídeo. 6. O que são as tag head vs. body vs. html em uma página de web design: Certo, é hora de fazer um site apropriado. No momento em que colocamos algumas tags HTML e alguns CSS básicos, mas isso não é tudo o que precisamos. Precisamos de outras partes, como o tipo de médico, a etiqueta de cabeça, a etiqueta de corpo. Neste vídeo vamos descobrir como adicioná-los rapidamente e o que todos eles fazem. A primeira coisa é que esta página que fizemos, este HTML helloworld é que tem o básico nele, mas está faltando um pedaço de elementos para torná-lo uma página oficial da web. Vamos fechá-lo e olhar para eles. Fechá-lo, vamos fazer uma nova página, então arquivar novo, e vamos salvá-lo, e este vai ser chamado de compreensão. Vamos colocar um hífen e colocar bodyhtmlhead. Certifique-se de que no final você add.HTML. No final da era, não sabe o que você está fazendo. A outra coisa a notar neste momento é que você não pode usar espaços ou você não deve usar espaços. Você precisa usar hífens ou sublinhados, não importa qual. Eu uso hífens e vamos salvar. Quando você estiver nomeando coisas, tente não usar coisas como $ sinais ou e comercial. Basta usar números e letras. Para tornar esta página oficial, ele precisa de algumas coisas. Ele precisa saber que estamos lidando com uma página HTML então é algo chamado DOCTYPE. é um DOCTYPE de HTML, então precisamos estabelecer que é um documento HTML que se define na língua do Inglês. Ok, feche isso e há provavelmente mais cinco ou seis linhas que precisamos adicionar para tornar esta coisa oficial. Nós não datilografamos isso. Houve um atalho fácil porque é uma coisa tão consistente e repetível que todo mundo precisa fazer, Vs código usa algo chamado emmet, não se preocupe que emmet a palavra, mas é um pouco de código sugerindo que realmente ajuda você a ir rápido. Em vez de digitar todas as coisas que precisamos para fazer uma página oficial da web, digitamos um ponto de exclamação e apertamos retorno no teclado. Isso é tudo o que precisamos para tornar esta página HTML legítima, há o nosso DOCTYPE, há a língua inglesa. Então ele tem algo chamado a cabeça e o corpo, e então está tudo embrulhado nesta tag HTML. Agora, o que são todas essas coisas? O doctype apenas nos diz que é HTML. Este aqui, se eu clicar aqui, HTML, você verá que há um wrapper correspondente no final aqui, e se todo o site está dentro dessa tag HTML. Como se tivéssemos o h1 mais cedo lembrar que tínhamos h1, e havia um começo e um fechamento e tudo dentro era o h1. É o mesmo com todas as tags HTML. Tudo isso é HTML. Muito obrigado. Não muito emocionante tag HTML, você não vai lidar com isso muito em tudo. Essas outras duas etiquetas dentro daqui, você vai, há a cabeça, há o corpo, então a etiqueta da cabeça, eu vou colocar alguns retornos, lembre-se, devoluções que significam qualquer coisa apenas para que possamos segmentar quanto mais estamos aprendizagem. A cabeça tem uma abertura e fechamento e tudo dentro daqui é material que o navegador precisa funcionar, então o Chrome precisa do material, mas o usuário não vê. Se salvarmos esse arquivo, saltamos para o Chrome, vamos para o arquivo, vamos para o arquivo aberto, e vamos encontrar esse novo, entendendo o corpo HTML head. Você vai notar que não há nada na página, então este é o corpo todo este branco quadrado no fundo, que é o corpo. A cabeça é coisas que o navegador absorve, mas não mostra, você pode ver que há muitas coisas que simplesmente não mostram. Eu vou lidar com tudo isso mais tarde, mas o básico aqui, este aqui, os personagens, apenas dizendo que estamos usando o teclado latino, ABC123. Vamos falar sobre essas coisas mais tarde, design responsivo precisa disso, alguns problemas com Microsoft edge, que ele precisa ser compatível com as coisas, o título do documento faria no próximo vídeo. Mas é tudo o que o navegador precisa que nós realmente não precisamos sem o usuário, nosso público não precisa ver, o que o público precisa dizer é tudo no corpo. Está bem. Eu coloquei um par de retornos aqui, cargas para muitos retém isso. Certo, mas no corpo, é aqui que adicionamos coisas. Vamos adicionar um h1, então vamos digitar entre colchetes h1 fechá-lo e aqui está Olá Dan, ou seu nome. Nós vamos salvá-lo. Tudo no navegador principal não salvou, tudo no corpo realmente é visto pelo usuário. Vamos dar uma olhada no nosso navegador, vamos atualizar, e lá é o nome. Então HTML, está tudo dentro da cabeça deles. Coisas que o navegador precisa funcionar, corpo é o material que o usuário vê. Essas são as nossas três marcas principais. Agora, vamos fazer algumas coisas. Vamos ver a etiqueta da cabeça. Lembre-se, queremos estilizar este h1. Para onde vai o estilo? Não colocamos no corpo. Está bem. Não o colocamos entre o corpo escondido. Vai para o lado da cabeça, está bem? Após o título, coloque um retorno, então podemos colocá-lo em nosso estilo. Lembre-se, abra colchetes, feche e retorne entre os dois. Tudo entre essas duas tags é o CSS, e um CSS pode ir na cabeça ok. Nós realmente não queremos que este código apareça na página. Queremos que isso afete as coisas que estão no corpo, então dizemos, lembre-se de tags incríveis, h1, chaves, e dizemos que vamos torná-lo a cor da cor aleatória desta lista. Pomar escuro lá vamos nós, porque no final, ponto e vírgula, salve, vamos dar uma olhada no navegador. Atualização do navegador, incrível pomar escuro, cuidado. Está bem. Cabeça, coisas que vão na página. Eu disse isso 10-20 vezes agora, mas você entendeu a idéia. Coisas como esta podem ir para a cabeça, mas a coisa que as pessoas vêem está no corpo. Algumas coisas que quero explicar antes de seguirmos em frente é que estou pulando entre esses dois, como ele fez isso? Em um Mac e você pode manter pressionada a tecla Command e pressionar Tab, e essas pequenas coisas se abrem, ok, e você pode continuar pressionando Tab para mover através deles. Em um PC, é controle Tab, e você pode virar entre eles também, basta tocar neles, então controle Tab, controle Tab. Você não precisa fazer isso, e o que você pode fazer é apenas tê-lo aqui, fazer algum redimensionamento de janela, que você possa ver uma de um lado, uma do outro, e é muito mais fácil trabalhar assim até você. Outra coisa que quero fazer antes de seguirmos em frente, vou deletar totalmente isso, é que, eu não quero que você neste momento volte, como eu vou lembrar de todas essas coisas? Porque vamos dizer que eu quero fazer isso Olá Dan, sublinhado. A coisa legal sobre a internet e especialmente HTML, é, uma carga de recursos. Eu quero fazer isso sublinhado, bem, o que ele faz? Entro aqui e começo a digitar sublinhado? Parece que não funciona. Certo, digamos que eu vá para o Chrome. Está bem, vou abrir isso de novo. Vou fazer uma nova caixa de pesquisa, vou dizer código HTML ou CSS para sublinhado. Nós vamos fazer isso durante todo o curso porque eu não estou aqui para ensinar cada pedaço de sintaxe. Eu quero você, estou ensinando você a pescar. Está bem. Vamos dar uma olhada. Eu pedi o código para subjacente, vai ser três lugares principais que você vai usar em seu uso mais web designers. Há algo chamado W3schools.com. Esse é um recurso muito bom, truques CSS que tem um site incrível brilhante Chris qualia. Há outro que aparece com bastante frequência e não está aparecendo menos, mas é chamado de estouro de pilha. Esses são os três principais para escrever e dizer sim, esses são os lugares para ir. Vamos dar uma olhada, ver se você vê uma declaração de texto. Você pode ver aqui usando um h1, há uma linha sobre, e não é o que eu quero na linha, então em vez de lembrá-los, você pode copiar isso, apenas copiá-lo quando meu comando de teclado C ou em um Mac ou controle C em um PC, e voltar para o código VS, e eu vou apenas colá-lo, salvá-lo, ok, e então saltar para o nosso navegador, visualizá-lo, e ele está sublinhado. Porque vai haver muito disso se você for tipo, cara, preciso anotar tudo isso? São muitas vezes que não gostamos. Não me lembro qual é a sintaxe, então você pode ir e encontrá-la. Ok, porque é preciso decoração é uma maneira estranha de discutir o subjacente. Mas depois de um tempo, você vai aprender algumas coisas que você está fazendo regularmente. Texto, decoração, por cima da linha. Nunca usei essa da minha vida. Refresque. Olhe para isso bom, você pode fazer isso. Tudo bem, isso vai ser tudo para este vídeo. Vamos saltar para o próximo. Começamos a falar sobre o meta título que temos ignorado. 7. Para que servem o título e a descrição no cabeçalho de uma página da web: Ei, ali. Este vídeo vamos aprender qual é o título na sua etiqueta de cabeça e vamos ver o que é uma descrição. A versão muito curta está nos resultados da pesquisa do Google. Esse é o título, essa é a descrição. Precisamos editar em cada página e vamos pular agora, mostrar como editar. O que os prós e contras, o que você deve fazer, ou não deve fazer. Vamos começar. Tudo bem. Vamos começar com a etiqueta de título. Isso é adicionado ao topo de cada página e a cabeça, Eu estava indo para editar o automaticamente por VSCode. O que é isso? É uma maneira de descrever o que está na página. Este documento aqui é apenas um lugar titular. Você pode digitar qualquer coisa aqui e você vai notar que tudo isso não é realmente linguagem de código. Você pode escrever comercial e você pode escrever colchetes e todo tipo de coisas que pode ser qualquer coisa que você queira escrever aqui. Mas você não quer que seja qualquer coisa. Digamos, este é um tipo de pensamento que realmente descreve esta página. É aprender a descrição HTML e tags de título e isso vai realmente descrever a página que estou tentando construir aqui. Agora, se eu salvá-lo e sair para o Chrome, vamos ver onde ele aparece. Chrome, este é o documento em que estou trabalhando. Você pode ver o documento da palavra lá que foi de mais cedo antes de substituí-lo. Se apertarmos a atualização, você pode ver que é aí que acaba. Essa é a sua etiqueta de título e acaba na aba, mas isso não é tão excitante. O que é realmente importante e é onde isso é usado pelo Google e resultados de pesquisa. Lembre-se, fizemos a pesquisa anteriormente por um sublinhado em HTML. Fizemos aquela busca, viu estes pedaços de texto azul aqui? Esses pedaços de texto azul são o texto total. E se você escrever lá aparecerá nesta pequena lista. Você pode imaginar se você levantá-lo como documento. Primeiro de tudo, o documento de palavra, Google simplesmente não vai listar sua página porque é muito vago e há provavelmente um milhão de páginas online com o documento de batida. Você precisa torná-lo único para cada página que é um pouco de uma dor. Veja que temos 20 páginas em seu site você precisa de 20 tags de título diferentes para cada página e ele precisa realmente descrever o que está nessa página. São cerca de 50 caracteres e você pode ver que alguns deles ficam um pouco mais longos, alguns deles são mais curtos, mas são realmente concisos e exatos sobre o que está na página. Não chame de página inicial. Se fosse eu para o meu site, você sabe que o meu é chamado de tutoriais web design por Daniel Scott. Seria uma boa etiqueta de título da página inicial para mim. Essa é a etiqueta do título. A outra tag que você deve adicionar e ela não está lá por padrão. Um muito comum logo abaixo é adicionar a descrição. Qual é a descrição antes de fazermos isso? É este pedaço. Que há o título, que há apenas o endereço do seu site. Essa coisa aqui que você tem controle. Você pode dizer ao Google o que colocar nesta descrição. Às vezes ele ignora, mas na maioria das vezes não vai, ele vai listá-lo aqui. Isto é um pouco mais de marketing do que é. Como este aqui ser realmente conciso, realmente boas palavras-chave, que realmente descrevem o que você está fazendo. Aqui em baixo é como se não soubéssemos quando estamos fazendo um resultado, que procuramos. Nós verificamos isso para ter certeza de que você está no estádio certo, então você usa isso apenas para confirmar que você tem mais detalhes e apenas verificar se você está no tipo certo de zona. Aqui é onde é mais marketing do que é, digamos codificação. Aqui embaixo, vamos adicionar a meta descrição. Por padrão, não está lá porque você não pode sobreviver sem um título, mas você pode sobreviver sem uma descrição, mas na minha opinião, você definitivamente deve editar. Aqui é onde é uma sintaxe feia mas você digita uma vez comigo agora e mais tarde você pode apenas voltar e copiar e colar este aqui. É chamado de nome do emissor e você precisa adicionar toda essa sintaxe. Eu só estou usando os atalhos que aparecem via VSCode, mas você precisa de nome, igual e você precisa das aspas e aqui dentro, este é chamado de descrição. Precisa ser escrito exatamente assim e precisamos do nome como descrição e o conteúdo vai ser o que você quer que a descrição seja. É aqui que você começa a colocar. Aqui você quer cerca de 120 caracteres ou 150 caracteres.Um cento e vinte é o que realmente vai aparecer em resultados móveis e 150 na área de trabalho. Você pode ver aqui, este aqui recebeu um grande pedaço. Considerando que este foi cortado muito pequeno [inaudível] vai ter uma meta descrição muito pequena. Às vezes também, não importa quanto tempo você faz, Google vai cortá-lo fora. Certifique-se de que todas as suas coisas boas estão no início desse parágrafo. Basta torná-lo um e torná-lo cerca de 120 caracteres. Agora, a única coisa para isso é meio que traz à tona um bom ponto. Você pode ver esta pequena raiz, esta ficou vermelha. Se eu salvar isso e vamos ver a página, vamos atualizá-la. Ficou um pouco louco. É como, bem, que estava na etiqueta da cabeça, estava aparecendo aqui no corpo. É porque nos esquecemos de fechar esta meta descrição tag então eu digo nós, eu. Ele tem uma abertura lá que lhe dá todos eles têm isso em colchetes de ângulo de fechamento. O final aqui fechando colchetes angulares, você verá o vermelho desaparece e de volta aqui, atualizar, está de volta ao normal. Se você tem coisas vermelhas, ruins e muitas vezes você vai notar a diferença quando você começa a pré-visualização no Chrome, ele vai mostrar que tudo vai ficar errado. Certo, esse é o meta título, meta descrição. Copie e cole isso em um bloco que você tenha um útil para quando estiver fazendo isso da próxima vez, para que você não precise digitá-lo todas as vezes. Realmente essencial para páginas. Vamos para o próximo vídeo. 8. Qual editor de código devo usar VS Code vs. Sublime vs. Dreamweaver vs. Atom vs. Brackets: Vamos falar de editores de código. Temos usado código VS até agora e vamos continuar para este curso. Por quê? Porque é o mais popular e principalmente porque é o mais elegante. Existem algumas peculiaridades que o tornam incrível, mas há pessoas lá fora que argumentam que Sublime Text é o melhor, ou Brackets é, ou Dreamweaver é, ou Atom, ou Notepad Plus. Há muitos editores diferentes. Vamos saltar para este vídeo e apenas dar-lhe uma rápida corrida através de alguns deles. Basta mostrar-lhe o que você deve procurar e o que é importante. Vamos entrar lá. Estamos usando o Visual Studio Code para nosso editor de texto. Podíamos ter feito este curso em qualquer um dos programas de edição. Agora, estamos usando apenas código VS neste caso porque o código VS é o mais popular. Meus cursos anteriores, eu usei o Dreamweaver porque muitas vezes passo a minha vida no mundo da Adobe, mas eu acho que o que eu queria mostrar rapidamente foi antes de tudo como esses editores são realmente úteis, mas muitas vezes podem ser muito na moda. Se eu tivesse feito este curso há um ano ou dois anos atrás, provavelmente teria sido neste chamado Texto Sublime porque era o mais popular então. Antes disso, havia coisas como Komodo e antes disso, havia o Notepad Plus Plus. Há muitos editores diferentes, mas todos acabamos no mesmo lugar fazendo a mesma coisa. As pessoas se acostumam com algumas das peculiaridades. Eu baixei e instalei o Sublime Text apenas para mostrar, se você está começando no Sublime, é muito mais limpo. Se eu quiser colocá-lo em todo o meu documento, material para HTML, neste caso, em vez de ponto de exclamação e tabulação, é HTML em uma guia. Você pode ver que chegamos a um lugar muito parecido. Ele não tem tanto no tipo de documento, apenas o básico real, mas acabamos no mesmo lugar. Descemos aqui e escrevemos h1, e começamos a digitar. Vamos ver os Brackets. Brackets é outro popular. guia de ponto de exclamação funciona da mesma forma que no VS Code. Eles não têm todos os pedaços que queremos no código VS. Eles decidiram sobre uma opção mínima real. Dreamweaver também, ótimo editor de código. Se formos para Arquivo Novo, eles não o farão automaticamente. Se você diz que deseja uma página HTML, você diz HTML5, clique em “Criar”. Você pode ver, ele coloca em todos os pedaços que você precisa para começar. A razão pela qual eu mostro isso é, se você está procurando trabalho depois disso, então você começa a trabalhar com diferentes desenvolvedores e eles estão usando diferentes editores, eles têm suas próprias vantagens e peculiaridades, mas estamos criando o A mesma coisa. Do jeito que eu faço quando eu estava projetando este curso, eu estava tentando descobrir qual deles usar. Stack Overflow, mencionei que antes, eles fazem uma pesquisa de desenvolvedores no final do ano. É 2019 agora, e esta é a pesquisa do ano passado. Acabei de passar e você pode ver aqui embaixo, na página, os resultados de volta para o Visual Studio Code é de longe o mais popular. Você pode ver Visual Studio é a grande versão deste, Notepad Plus Plus, Sublime Text, Atom, Eu pensei que era muito maior. Há apenas pessoas que amam seus próprios editores, mas ao contrário de algo como Photoshop, onde há apenas um produto e um ou dois concorrentes, há muitos editores de código diferentes. Alguns deles muito gerais, como o que estamos usando. Alguns deles muito mais específicos para, digamos, PHP ou Xcode. Mas de qualquer maneira, eu pensei em um pequeno vídeo explicando diferentes editores. No caso de você querer mudar para outra coisa ou esperar usar outra coisa, você pode usar o que você aprendeu neste curso em um editor diferente. Vamos para o próximo vídeo. 9. Como adicionar estrutura ao seu site usando as tags Div: Oi lá. Este vídeo vamos construir uma caixa amarela e, em seguida, uma caixa rosa, vamos tentar pelo menos. Vamos aprender a fazer isso usando algo chamado tag div. É uma divisão de espaço e nos dá as caixas que temos para colocar nosso site dentro. Vamos entrar e aprender. Para começar, vamos fechar os outros documentos em que temos trabalhado. Não vamos usar isso de novo. Vamos criar um novo só para separar tudo em todos os nossos diferentes pedaços de aprendizagem. Novo arquivo, vamos salvá-lo. Vamos chamar este divtags.html. Não se esqueça do html. Nós vamos adicionar toda essa etiqueta de cabeça, bondade colocando ponto de exclamação, apertando Return, mas é um pouco rasgado, nós nos certificamos de atualizar o título para as tags, nós colocamos na descrição, mas não estamos no momento porque é um projeto descartável só para aprender o que é a tag div. A etiqueta div vai para o corpo porque eu quero que as pessoas vejam. Como queremos que se pareça? Em seus arquivos de exercícios, há uma pasta chamada Wireframes e esta aqui chamada HTML. Div 1. Vou abrir isso. Sem motivo, desenhei no meu caderno, então esqueci que mostraria a você. Isto é o que eu faço quando estou emoldurando fio, não é um wireframe particularmente bom ou excitante. Queremos uma caixa amarela e uma caixa de mindinho por baixo. Primeira caixa, segunda caixa. Isso é o que vamos fazer. Para editar, adicionamos uma tag chamada div. Eu vou fazer algum espaço aqui no meu corpo, eu vou atravessar sem nenhuma boa razão a não ser que pareça legal, nós vamos colocar em uma tag div. Div tag começa com colchetes angulares, div colchetes de fechamento. É muito inteligente e coloca em um fechamento dessa etiqueta e tudo dentro disso vai ser o meu quadrado. Vamos ver o que fizemos até agora. Vamos salvá-lo. Acesse o Google Chrome. Vamos ao File, vamos ao Open. Onde está esse arquivo aberto, vamos colocar um. Aí está minha nova tag div, clique em Abrir e vá para o título, mas não há nada aqui na página. Uma tag div sem CSS é invisível. Está lá, mas ainda não o elegemos. O que precisamos fazer é dizer a ele para fazer algumas coisas como ser amarelo e dar-lhe um tamanho. Fazemos isso com nosso CSS, fazemos isso na tag principal. Lembre-se, antes de fechar a cabeça, vou digitar. Lembra-se do que sobe aqui em cima? Você se lembra, estilo. Estilo, e fechá-lo, mas vamos nos entregar. Eu vou colocar todos os meus estilos aqui, eu estou indo para a tabulação só porque parece legal. Só estou usando minha tecla Tab. O que vamos fazer? Precisamos estilizar o div. Lembre-se que tivemos h1 antes. Vamos estilizar esta div e o que vai a seguir? Chaves encaracoladas, perfeitas, então vamos estilizar, vamos dar uma cor. Agora, quando você está estilizando texto, ele é sempre chamado de cor. Quando você está tentando fazer uma cor de fundo, você tem que ir o plano de fundo completo. Lá é que você pode ver a cor de fundo. Que cor vamos usar? Vou colocar em amarelo. Lembre-se do que acontece no final, ponto-e-vírgula, salve. Vamos pré-visualizar no navegador. Nada aparece porque, no momento, essa tag div é amarela, mas não tem dimensões. Ou precisa de uma altura ou precisa de alguma coisa nele. Dentro desta div, eu vou digitar através de coisas nele. Se eu fizer isso, salve-o, volte para o meu navegador agora. Pelo menos agora com algum texto nele força que div tag abrir um pouco borrada para que eu possa vê-lo. Ele não sabe o quão grande é, ele só está me mostrando o suficiente para apertar o texto e ele está derramando. Vamos dar-lhe uma altura e uma largura. Aqui, vamos colocar uma tag p em vez de apenas texto simples e antigo. Vamos colocar alguns textos corporais, lembrar parágrafo para p, e vamos colocar na primeira caixa. Guarde isso, e vamos estilizá-lo. Aqui em cima, a etiqueta div é amarela. Vou colocar um retorno depois e vamos dar-lhe uma largura e uma altura. Largura, vou dar 600 por 400. Nós vamos para 600 pixels para a largura, mas tem que ter px e você tem que ter o ponto-e-vírgula e a altura. O mesmo, eram 400. Eu anotei. Agora, nós salvamos isso. Vamos entrar no meu Google Chrome. Aperte Atualizar. Essa é a minha estrutura. Pode ser a sua navegação, navegação muito grande, mas eles podem estar no meio do seu site ou do seu rodapé. É um bom cubo grande que podemos começar a colocar coisas como h1s ou p tags. Basicamente, seu site é composto de bits estruturais, essas tags div e elementos de texto e imagens que entram nele e vídeos, mas as tags div são a estrutura. Agora o que queremos fazer é colocar nesta segunda caixa aqui embaixo. Em código VS, eu vou para aqui, fazer uma segunda div. Vamos copiar o primeiro. Vamos poupar algum tempo, cópia. Sempre que estiver copiando, certifique-se de pegar a abertura e o fechamento. É fácil saber onde é o fechamento. Se você clicar nele, ele destaca aqui para salvar seu cursor piscando e como a cabeça aqui, há o fechamento. Eu tenho que ter certeza que eu pegar tudo isso, copiá-lo. Só estou usando a cópia de edição e vou colar. A tabulação é um pouco estranha, e como eu tenho TOC sobre isso, eu vou fazer tudo parecer legal. A primeira caixa e a segunda caixa, salve-a. Vamos visualizá-lo em um navegador. Pré-visualização. Temos uma segunda caixa. A última coisa que queremos fazer é torná-lo uma cor. Queremos torná-lo cor-de-rosa. No código VS, vamos subir aqui, e é aqui que nos deparamos com o nosso primeiro problema. Estamos desenhando essa coisa chamada tag HTML, essa div. O problema com isso é que esta div aparece duas vezes, mas só podemos colorir uma vez. Mais uma vez, eu vou aprender no próximo vídeo o que algo chamado uma classe CSS é. Ele nos permite atacar individualmente esta caixa de punho em vez da segunda caixa e estilizá-los de forma diferente. Mas, por enquanto, colocamos nossa etiqueta div. É incrível. Agora precisamos de dois tipos diferentes de tags div que tenham tamanhos e cores diferentes, e aprenderemos como fazer isso com uma classe CSS no próximo vídeo. 10. O que é uma classe do CSS e como colorir um fundo com ela: Olá, este vídeo é tudo sobre um seletor de classe. Isso vai nos permitir fazer isso, onde nós estilizamos a caixa amarela de forma diferente da caixa rosa. Nós fazemos a mesma coisa com esta tag p, vai fazer uma tag p diferente da outra e que é o trabalho de um seletor de classe CSS. Vamos entrar agora e aprender como fazê-lo funcionar. Aqui está o nosso CSS, esta coisa aqui é chamada de seletor de tipo, ele está selecionando todos os tipos div. O problema é bastante genérico porque todo tipo que acontece de ser um div, fazer o material para ele. É por isso que temos um seletor de classe. O que queremos fazer é colocar tudo isso, colocar minhas devoluções de volta na minha conta. Em vez de decidir div antigo em cada página da mesma coisa, vamos criar o que é chamado de seletor de classe. Tudo o que significa é que eu posso ser único, eu tenho apenas dizer, eu vou criar uma classe, para saber que é uma classe e não como aquele seletor de tipo que acabamos de fazer. Você coloca uma parada completa na frente dele em seu CSS. Sou uma turma, de que classe? Eu vou dar-lhe um nome, você pode chamá-lo do que quiser, isso nós vamos chamar caixa 1. Então, como o resto do CSS que temos feito, é o mesmo. Chaves encaracoladas ou girar, e então nós o estilizamos. Aquela parada completa no começo significa que sou uma classe. O que vamos fazer com essa aula? Vamos dizer que é uma cor de fundo de amarelo. Chamamos, vamos ter uma largura e altura com 600px por altura de 400px. Temos a caixa 1. Agora não há como conectar esses dois ainda. Diz: “Ei, caixa 1 seja amarela.” Mas aqui em baixo é como, “Bem, eu não sei em que você está aplicando isso.” O que você faz é deixar o div e o que você faz é depois colocar um espaço e digitar a classe palavra. Você pode ver VS Code realmente quer ajudar. Se você estiver digitando, certifique-se de colocar um igual e as aspas. Então temos uma aula de div. O que queremos fazer é aplicar a caixa 1. Agora que está ligado. As diferenças são apenas para ter certeza de que quando você está estilizando aqui em seu CSS, você tem que usar a parada completa para dizer, “Eu sou uma classe”. Aqui em baixo você tem que ser um pouco mais longo. Então você diz que classe é igual e você não coloca esse ponto lá, isso não vai funcionar. Versão longa da classe, versão curta. Agora espero que salvamos. Nós vamos para o nosso navegador, nós reiniciamos e a primeira caixa agora sabe que é amarelo e ele sabe que é 600 por 400. Esta caixa aqui em baixo não faz ideia do que precisa ser, então vamos contar. Como eu disse antes vamos fazer uma segunda aula, você está pronto? Então, Box2, coloque chaves e diremos : “Ainda faremos isso.” Isto é uma loucura. Mas queremos que este não seja amarelo, queremos que seja aquela cor rosa. Isso não é uma cor, para ser rosa. Poupe-o, o tamanho e altura errados, 400 por 250. Acabei de inventar esses tamanhos, você pode digitar o que quiser, 400 por 250, salve. Agora não vai funcionar. Por que não vai funcionar? Vamos verificar, atualizar apenas para confirmar que não está funcionando. É porque não o aplicamos a ele. Nós o elegemos, agora precisamos aplicá-lo aqui em baixo. Após a palavra div digite na classe. Você pode ver lá do jeito que eu trabalho, eu vou trabalhar um pouco mais abreviado como nós trabalhamos através. Você pode começar a escrever e toda a sintaxe se quiser, mas você vai notar que eu, espaço hit C. Isso é tudo que eu fiz e eu vou apenas apertar Return no meu teclado ou a tecla Enter e ele preenche toda aquela sintaxe adorável. Eu escrevo box2, carrego em Salvar. Agora, espero que refresque. Lá estamos nós. Nós temos que primeiro caixa e uma segunda caixa e eles vagamente se assemelham a nós. Legal. Aprendemos o que era um seletor de tipo. Você não precisa se lembrar desse nome, mas um seletor de classe para CSS é algo que vamos fazer um zilhão de nesta classe e é uma maneira de segmentar individualmente isso. Em vez da caixa um, isso pode ser cabeçalho e isso pode ser navegação, e isso pode ser conteúdo principal. Nós começamos a estilizá-los, colori-los e dimensioná-los. Vamos um pouco mais além e adicionar um pouco de estilo a ele e olhar para um seletor de classe, mas em um contexto diferente. De volta ao VS Code aqui, eu tenho duas tags p e elas parecem exatamente iguais no navegador. Digamos que eu quero fazer este uma cor diferente e um tamanho diferente. Em vez de estilizar a tag p como fizemos anteriormente, lembre-se que fizemos todos os h1s. Mas o problema é que cada h1 em cada página. Enquanto este, eu só quero que esse cara único na primeira caixa faça alguma coisa. Aqui embaixo da box1 ou box2, eu vou colocar em outra classe, lembre-se tem uma parada completa e eu vou chamar isso quando meu texto de destaque. Você tem que colocar um espaço em seguida você tem que colocar suas chaves encaracoladas. Chaves ao lado da sua tecla p. Então vamos dizer que eu gostaria que você fosse uma cor. A cor de fundo para a cor de fundo, ele faz uma cor baixa regular se você quiser estilizar o texto. Digamos que eu quero fazer desta uma das cores loucas se foram aqui. Vou fazer este cinzento escuro. Eles soletram para os dois lados, olhe para isso, legal. Vamos colocar o ponto e vírgula. Vamos fazer o tamanho da fonte para algo realmente grande para que possamos apenas vê-lo facilmente. Eu o salvei, agora preciso aplicá-lo, e isso é a mesma coisa. Eu posso dizer que você como uma tag p, mas também uma classe para o texto, Eu encontrei o meu no texto, texto de destaque. Vamos salvá-lo. Vamos verificar, eu atualizo. É maior e é o cinza. Você estiliza os seletores de tipo para fazer grandes traços gerais gerais. Então você faz pequenas coisas específicas usando classes e você as aplica a pequenos pedaços individuais, você pode usá-lo duas vezes, não há nenhuma razão para que não possamos dizer você, meu amigo também tem uma classe de texto de destaque e isso se aplicará a ambos, espero. Ele não fez. Estás a ver porquê? Não faço ideia do porquê. Agora, eu finjo que coloquei isso lá de propósito, mas esse é sempre o meu problema. Você pode não ser tão gramaticalmente desafiado como eu sou, mas eu acho que é muito difícil digitar essas coisas, quando eu não estou fazendo tutoriais eu tento e impressioná-lo com a minha velocidade de digitação, eu copiar e colar tudo. Copie e cole. É dolorosamente lento, mas contorna meu problema de digitar a palavra errada e depois tentar corrigi-la, não descobrir o que era, é só por causa de erros de digitação. Vamos apagar isso e mostrarei outros truques para ter certeza. Sim, você pode acompanhar ou corrigir quaisquer erros. A maneira mais fácil é comparar com o arquivo que estou fazendo. Diga que parece que você fez a mesma coisa, mas não está funcionando por algum motivo. Está em seus arquivos de exercícios que você baixou. Você vai descobrir nessa pasta que há algo chamado Arquivos Completados. Então aqui eu fechei. Esse foi o quinto vídeo que fiz este sexto vídeo. Se estás a ver este vídeo, é provavelmente o que estás a fazer. Na lata de vídeo, você vai encontrar, deixe-me terminar este vídeo aqui, você vai encontrar uma pasta aqui chamada lata. Pode abrir isso, vamos fazer uma. Eu cliquei duas vezes, abri e há as coisas em que estamos trabalhando. Você pode simplesmente abrir isso em código VS. Então vá para o arquivo aberto e compare o seu contra o meu. Farei isso durante todo o curso. Essa é uma das maneiras que você pode verificar seu código. As outras coisas para notar, ou eu acho que para verificar, e essas são as coisas que eu acho que meus alunos encontram quando eu estou dando aulas ao vivo é que as pessoas esquecem a parada completa. Para identificar uma classe ou eles começam a adicionar o ponto da classe aqui em baixo. O que você não quer. Um que sempre pega as pessoas é que eles acidentalmente apagam um destes com as chaves. Porque aquele abre e depois não fecha, enlouquece, não é? Você pode ver que mudou a cor de realce um pouco, mas está faltando. Muitas vezes você pode passar, eu vou clicar no primeiro colchete e você pode ver que está destacado, o fechamento. Se eu clicar neste, ele não iria clicar nele porque ele não sabe onde é o final. Não vai destacar seu amigo. Agora vamos colocar seu amigo de volta, lá está ele. Agora, se você clicar neles, eles apenas se conectam um ao outro, lá vamos nós. As outras coisas são as pessoas esquecendo de colocar dois pontos e ponto e vírgula dentro, apenas problemas básicos de sintaxe, erros básicos de ortografia como eu faço o tempo todo. Vamos fazer um pouco mais de verificação de erros mais tarde, vamos instalar alguns plugins para VS Code para nos ajudar com esses erros de sintaxe. Mas, por enquanto, esses são os básicos e será tudo para este vídeo. Vamos para o próximo. 11. Como aninhar divs dentro um do outro em HTML e CSS: Oi lá. Este vídeo nós vamos falar sobre aninhamento de tags div. O que isso significa é que vamos acabar fazendo isso onde temos nossa caixa amarela e rosa original e colocamos outras caixas dentro dela. Chama-se nidificação. Não é tão chique. Você pode ver aqui caixas dentro de caixas, eles acabam parecendo assim. No final, vamos colocar textos dentro de uma caixa, que está dentro de caixas. Vamos fazer isso agora. Vou te mostrar em VS Code. Vamos lá. O que estamos fazendo é em sua pasta Wireframes em seus arquivos de exercícios, estamos olhando para fazer este aqui, HTML, div 2. Então as mesmas caixas, usaremos a mesma coisa que criamos até agora. Vamos colocar duas caixas dentro, uma caixa cinza e uma caixa roxa. Essas são as alturas. Vamos descobrir como fazer isso. Em VS Code, vamos fazer o que é chamado de aninhamento. Só significa que vamos colocar divs dentro de divs. Então temos uma div aqui e uma segunda div aqui. Vamos trabalhar no primeiro, que vai ser o nosso cinza, um 100 por 300. Para onde é que vai? Depende de onde você quer, eu acho. Nós temos esta mensagem aqui, nós realmente não queremos mais. Isso foi apenas, eu acho que eu coloquei esse texto p lá para mostrar como poderíamos destacar e decidir a caixa com algum conteúdo nele. Vamos apagar isso por enquanto só para torná-lo agradável, limpo e claro. Então o que vamos fazer é colocar uma div dizer, exatamente o que esse texto p era. Então, se formos colchetes angulares, div. Agora nós não vamos fazer uma div na classe de crédito aqui em cima e depois voltar e nomeá-lo. Vamos fazer tudo de uma só vez. Então, em vez de apenas fechá-lo aqui, agora, vai desfazer isso. Vou colocar em aula antes de terminar. Então eu vou ligar para este chamado caixa três. Então eu vou fechá-lo. Só para poupar tempo, em vez de voltar e fazer isso mais tarde. Eu vou colocar, eu coloquei alguma coisa nele? Não, vou deixá-la vazia. Mas lembre-se que é aqui que ele iria para dentro daquela div. Apenas deixe vazio. Então salve-o. Ainda não vai aparecer. Refresque. A mensagem desapareceu e a etiqueta de div está lá, mas não consigo ver. Então precisamos estilizá-lo. Nós não precisamos mais disso, porque eu me livrei dele. Vou chamar este, ponto, lembre-se da caixa três, chaves e vamos roubar tudo isso, e vamos escolher cinza, que é soletrar para os dois lados. Sempre me apanho com isso. Cinza cinza e cinza, não sei por que acho isso incrível. É o mesmo cinza. Apenas soletrar de maneiras diferentes. Este tinha uma largura de 100 e uma altura de 300. Aqui vamos nós. Bem, 3.000. Isso não vai funcionar, guarde. Vamos verificar isso. Vamos ver se fizemos funcionar. Refresque. Olhe para isso. Muitas vezes, quando você está fazendo um site, você vai criar um plano de fundo geral do site, um grande contêiner, e dentro desse contêiner você vai aninhar muitas tags div diferentes, como o cabeçalho, e a navegação, e as imagens, e o carrossel, e todas essas coisas. Isso é nidificação. Vamos fazer isso com a segunda caixa. Eu só quero mostrar algumas coisas, se você não colocar no lugar certo, então vamos apagar essa tag p daqui. É para lá que deve ir. Mas digamos que o façamos fora daqui. Então vamos, colchetes angulares, div, espaço, classe, retorno. Este vai ser chamado de caixa quatro. Feche-o com suporte angular, vamos salvar. No topo aqui, vou copiar e colar a coisa toda. Muito preguiçoso. Caixa cheia. Este era roxo, e era 120 por 350. Na verdade, era 350 por 120. Altura de 120. Vamos dar uma olhada. Visualização no navegador. Incrível. Bem, não é demais, está no lugar errado. Então, se você obtê-lo no lugar errado, é realmente simples no código ir, na verdade você corta e cola. Vou alinhá-lo para que pareça agradável e tudo alinhado. Pressione Salvar e agora atualize. Deve estar lá dentro. Incrível. Agora, se eu quiser, digamos um h2 dentro daquele texto roxo, eu poderia colocá-lo aqui. Não há nada de errado em digitar h2, fechá-lo e digitar aqui, e bater dois, e isso é perfeitamente gramatical e sintaticamente, duvido que seja uma palavra, correto. Então vamos dar uma prévia. Está lá dentro. O que eu gosto de fazer para fazer tudo parecer bom é colocar retornos entre tudo isso para realmente expor o aninhamento para que eu saiba que há uma etiqueta de corpo, dentro disso é uma caixa um. Dentro disso, há uma caixa três. Você pode ver o recuo dizendo com esta caixa dois e dentro dela é caixa quatro e dentro da caixa quatro é h2. Isso faz sentido? Então nós estamos pegando o jeito dessa divisão div tag do espaço coisa e colocando caixas dentro de caixas. Vamos para o próximo vídeo onde vamos fazer um projeto de classe. Hora do dever de casa. 12. Projeto do curso 01 - Tags Div: Ele disse dever de casa no último vídeo? Eu fiz. Mas pense nisso mais como uma maneira incrível de conseguir habilidades melhores. Estabelecerei projetos ao longo do curso. Você vai encontrar os detalhes deles. Vou fazer um pequeno vídeo como este para explicá-lo, mas também em seus arquivos de exercícios, haverá uma pasta chamada Projetos de Classe, haverá um documento do Word lá, e é isso que parece. Estamos no Projeto Classe 01. Então, vamos trabalhar com o que você precisa fazer, e eu continuarei acrescentando isso à medida que passarmos pelo curso. Se você não tiver o Microsoft Word, não poderá abrir este documento e muitos outros programas. Se você ficar realmente preso, experimente o Documentos Google, você pode usá-lo para abrir um documento do Word. Enfim, o que você tem que fazer? Você tem que criar dois sites separados. Então o que eu faço é, no código VS, fechar tudo, salvá-lo, e criar um novo documento. Então você vai fazer um novo, o primeiro vai ser chamado Projeto Classe 1A. Estas duas partes, há 1A e 1B. O primeiro, e é este. Eu quero que você faça isso. Eu lhe dei um pouco dos detalhes, então o nome disso, estas são as caixas, e você pode ver neste visual aqui. A próxima coisa que eu quero que você faça, as caixas verdes dentro da caixa azul, etc, etc. Os tamanhos estão aqui embaixo porque minha caligrafia não é grande. Existem versões maiores deste, você pode torná-lo maior aqui no Word ou em seus arquivos de exercícios eu vou colocar cópia deles em Wireframes e é Div 3, aqui está lá, e Div 4. Então essas são as duas coisas que você vai fazer. Este é muito fácil, já fizemos isso antes. Este é um pouco de uma bola curva. Porque quero que penses nas etiquetas Div, e como elas funcionam. Então este, vamos olhar para o segundo, a diferença é, nós temos duas caixas dentro uma da outra, isso é fácil, caixa amarela, caixa cinza. Mas então eu quero que você coloque em dois h1s. Há um dentro desta caixa amarela. Coloque algum texto, não tem que ser o que escrevi aqui, mas algum texto neste, e outro h1 aqui fora. Como é que se consegue lá fora? Está fora da caixa amarela, mas dentro da caixa cinza. Então eu quero que você brinque com isso. Depois de fazer isso, digamos que você crie tudo no Visual Studio Code, que eu o visualizarei no Chrome e faça uma captura de tela. Agora, em um Mac, você mantém pressionada a tecla Shift 4, e você pode arrastar uma caixa ao redor dela, clicar em segurar e arrastar, e isso lhe dá uma captura de tela. Ele deve colocá-lo em sua área de trabalho. Você tem que ver o meu aqui embaixo, e eu quero que você compartilhe isso comigo. Em um PC, é diferente. Você tem o botão de impressão da tela no teclado, talvez seja necessário verificar se como fazê-lo na sua versão do Windows. É diferente em muitas versões diferentes do Microsoft Windows e não estou atualizado com todas elas. Então, basta verificar como você faz uma captura de tela, eu acho que é apenas imprimir tela no seu teclado e então você pode colá-lo. Mas a razão é que eu quero que você compartilhe para mim porque eu quero responsabilizá-lo por essas coisas. Eu quero que você me prove que você fez isso, e tudo que você precisa fazer é compartilhar isso nos comentários aqui, apenas dizendo, “Eu fiz isso.” Se você tiver algum problema, solte-o nos comentários. O que eu gostaria que você fizesse, porque estamos em um estágio razoavelmente simples, se você se deparar com um problema, e você tipo, eu não posso fazer isso funcionar, postar suas perguntas nos comentários e pedir ajuda. Para as pessoas que estão fazendo este curso que fazem isso com sucesso, eu quero incutir um pouco de ajuda a todos os outros. Então, se você está lá, e você está postando o seu, e você fez isso e você está tipo, “Eu fiz isso”, vá lá e se alguém tem um problema, e eles são como, “O meu não está funcionando por causa deste x, y, e z,” você pode Ajude-os. Explique o que fez para dar certo. Obter este pedaço de texto fora desta tag. Eu quero incutir isso no grupo para que não estejamos apenas confiando em mim para entrar e começar a trabalhar no código de todos. Eu gostaria que você ajudasse outras pessoas para que você aprendesse melhor. Você sabe o que quero dizer. Onde você postar essas coisas? Você tirou duas capturas e o documento da Microsoft explica isso. Ele diz que, dependendo do site em que você está visualizando isso, você pode ter uma seção de tarefas, pode haver um lugar para realmente colocá-lo, ou pode haver apenas um lugar nos comentários. Basta colocá-lo nos comentários. Além disso, assim , isto ou isto, vou fazer todos eles, nas redes sociais. Então, coloque no Instagram, me marque, Twitter, me marque, grupo no Facebook aqui, me marque, só para que eu possa ver que você fez isso. O que você deve fazer em todos estes é adicionar uma hashtag, eu pensei sobre isso antes. Então, marque-me sob o #byolweb, apenas para que eu possa agrupá-los todos juntos, e todos eles, para que quando eu estiver revisando, eu possa ver coisas da web diferentes dos meus outros cursos. Instagram, Twitter são bons lugares para postar material visual, e no Facebook, há um grupo aqui. Ele tem um nome terrível, então melhor o link, é chamado de, o que é chamado de “Tringer Your Own Laptop Online Group”. É um grupo, olá, onde compartilhamos muitos, no momento há muitas coisas da Web, muitas coisas da interface do usuário, muito Illustrator, Photoshop, InDesign, um pouco de UX UI, e agora vamos apresentar as coisas da web com este curso. Coloque aqui, adicione essa hashtag e diga, “Sim, eu fiz isso, tudo está quebrado” e espero que alguém entre e ajude você. Vou tentar o meu melhor para entrar lá também e ajudar. Esse é o seu dever de casa. Não pense nisso como dever de casa. Pense nisso como ficando mais incrível no web design. É isso? É isso. Projeto de classe acabou. Vejo-te no próximo vídeo. 13. Como criar uma folha de estilo em cascata separada em HTML e CSS: Oi lá. Este vídeo é tudo sobre separar nossa folha de estilo tirando tudo do HTML, e vamos colocá-lo aqui na cabeça, e vamos removê-lo e colocá-lo em seu próprio documento e conectar os dois. É bem simples. Vamos entrar e fazer isso. É muito simples criar uma folha de estilo CSS separada ou externa. Vamos trabalhar com tudo o que você tem aberto da parte anterior do curso. É agradável e aberto ou vazio. Se você não pode ver isso, clique na primeira pequena guia aqui. Se você não conseguir ver nada aqui, vá para o arquivo, abra e encontre o Projeto zero. É uma pasta que fizemos e clique em Abrir. Deveria ver todos os arquivos. Vamos trabalhar no divtags.html, realmente não importa qual deles. Temos este aqui. O que estamos fazendo é que temos metade trapaceando, então estamos traindo. Temos o estilo, todo o CSS, no cabeçalho do HTML. Isso funciona, não há nada de errado com ele, exceto que é um pouco doloroso se tivermos 20 páginas, digamos que temos 2.000 páginas, cada página tem uma caixa 1. Temos que escrever a caixa 1 em todas as nossas 2.000 páginas separadas. Se quiséssemos mudá-lo, você não mudaria. Se o cliente voltar e dizer: “Você pode fazer isso normal?” Como não, há 2.000 páginas que preciso abrir e mudar. O que queremos fazer é colocá-lo em uma folha separada. Agora 2.000 páginas podem fazer referência a essa folha CSS. Ok, então nós podemos mudá-lo uma vez nesta folha CSS e o HTML todos ir à procura dessa folha e nós vamos atualizar tudo bem de uma só vez. É difícil de explicar, vamos fazer isso. Primeiro de tudo, o que precisamos é de um documento CSS. Ele tem um arquivo, vamos para arquivo, obter um novo arquivo. Vamos salvá-lo agora. A diferença aqui é que podemos chamá-lo do que quisermos, desde que não haja espaços. Vamos chamar o nosso estilo, mas podemos chamar um estilo, estilos plural, e o que mais é chamado? Só não penso em outros nomes genéricos. Pode chamá-lo de qualquer coisa. Não consigo pensar em nada disso. Vamos chamá-lo de estilo e ele vai para be.css. Vamos clicar em Salvar. Basicamente, o que queremos fazer é copiar e colar o estilo deste documento para este documento. Tenho duas abas abertas. A partir deste documento, o que precisamos? Não precisamos da etiqueta de estilo. Esta marca de estilo está aqui apenas para dizer ao navegador : “Ei, isso não é HTML.” Dentro da tag de estilo, tudo aqui é um CSS, então vamos pegar tudo. Quando você está copiando e colando coisas acontecem comigo o tempo todo, como eu sempre esqueço os colchetes de fechamento, certifique-se de pegar todos eles, e vamos editar. Vamos cortar. Não precisamos da etiqueta de estilo agora. Só estava lá para nos dizer onde está o CSS. Muito mais limpo, em primeiro lugar. Aqui em style.css basta ir para editar colar. Isso é tudo que você precisa fazer em uma folha de estilo. Como já aprendemos antes, está em uma folha separada. Agora não vai funcionar. Vamos testá-lo. Nós vamos aprender e você funciona bem, arquivo, salvar tudo. Por que isso é útil? Isso é porque, nós estaremos fazendo mudanças no HTML e CSS e isso é super documentos. Vamos dar uma olhada na minha área de trabalho, e Projeto zero é tags e há estilo de CSS. Esses dois caras são separados. Era mais fácil ir, salvar tudo. Aprendo o atalho no meu Mac, é Command+Shift+3. O que é isso em um PC? Se você estiver olhando para um PC, vá para o arquivo, ele deve tê-lo ali mesmo. Eu estou supondo que Control+Alt+S. Então vamos salvar tudo e verificar em um navegador. De volta ao Chrome, já tenho etiquetas DIV abertas. Talvez seja necessário ir para Arquivo e abrir arquivo. Vou refrescá-lo e vai correr tudo mal. Nós movemos todo o estilo que lá, as etiquetas DIV todos eles colapsaram porque nós temos mais hype para eles. O que precisamos fazer, a segunda parte é que copiamos tudo de lá para lá. Mas este documento HTML ainda não sabe que esse cara existe. Ele não o encontra automaticamente, por isso temos de o dizer. Vamos fazer isso. Debaixo do título, é push-retain.The longo caminho é colchet-link e vamos tê-lo em relação à folha de estilo. Você pode dizer que eu nunca digitei isso e você tem que fazer ou você vai fazer referência e você digita o estilo. O que chamamos de nosso? Chamamos nossos estilos de plural que não me lembro. Novamente, você tem que ter certeza que fecha e você fica tipo, cara, eu não vou me lembrar disso. Você não precisa. O caminho mais longo é o mau caminho. Vamos fechá-lo e usaremos um código VS para nos ajudar. Nós podemos digitar link e, em seguida, basta rolar para baixo aqui e clicar sobre este, porque você pode vincular coisas diferentes. Onde você pode vincular a um ícone favorito, você pode vincular a JavaScript. Estamos olhando para CSS e ele coloca em deixar coisas para nós e até mesmo coloca o nome lá. Então isso não foi automaticamente e descobrir o que eu chamei, isso é apenas a coisa padrão lá dentro. Se você chamou seus estilos, você vai ter que passar e adicionar os s lá. Se você o chamou, eu não consigo pensar em outro nome, mas vamos chamá-lo de coisa, você vai ter que ir e mudá-lo porque eles colocam estilo e eles apenas automaticamente provavelmente bom hábito apenas para esfriar estilo. Vamos bater em salvar. Vamos salvar tudo. O show tem tempo. Vamos checar o navegador agora. Aqui vamos nós, refresque-se. Tudo funciona. Há muito trabalho, mas eu deixaria. Você pode dizer que a principal razão é que todos os documentos HTML agora que eu criei se vincularão a esta folha de estilo e quando eu fizer uma mudança aqui, ele fluirá através de um site inteiro genomas facilmente porque todos eles procuram por esse arquivo. Ele também o mantém agradável e limpo para que possamos manter nosso HTML separado do nosso CSS. Significa que isso é bom e arrumado e então isso é bom e arrumado. Você pode ver como CSS, sem o HTML tem uma linguagem de aparência muito limpa, amá-lo. Antes de seguirmos em frente, eu só quero mostrar a vocês, fechar isso, algumas pequenas coisas a fazer com CSS em uma folha de estilo se você passar o mouse acima, digamos, ele está me dizendo que é um elemento para pairar acima deste, você pode vê-lo, ele apenas me diz, é a cor de fundo do elemento. Este aqui especifica a largura. Você não pode pairar sobre essas coisas se você não tem certeza do que eles fazem ou se você abrir outro site de quem você gosta, o que essa coisa faz? Você pode dar uma breve explicação dentro do VS Code e também algo que é incorporado em CSS, mas não HTML por padrão é se você tiver erros, digamos que eu excluo com um colchete de abertura por acidente, você verá aqui em baixo que há um, “hey, você tem obteve um erro.” Se eu clicar nele, ele diz que na sua folha CSS, há um erro inesperado. Como o problema é que isso não ajuda muito. Nunca achei que esses erros fossem realmente úteis. Eu posso decodificar porque eu quebrei porque ele está esperando uma chave encaracolada no início lá. Você pode ver que há muitos erros, há quatro deles. Só há um. É porque ele é como um gotejamento de erros para que se quebre para que entenda o resto. Mas se eu colocá-lo de volta, poderia abraçar, não preciso do segundo. Todo o problema se foi. Não temos essa funcionalidade incorporada ao VS Code para HTML no momento, se anteriormente você estiver tipo, “Ei, não foi vermelho e como foi feito.” É uma opção que vamos adicionar um pouco mais tarde quando começarmos a olhar para as extinções, mas precisamos fazer isso um pouco mais tarde no curso. Agora, se você vir erros, provavelmente são seus colchetes, seus dois-pontos ou ponto e vírgula, eles estão faltando. Através disso, ele quebra, coloca em unbreak. Eu recebo um monte de alunos como, “Ei, meu não está funcionando em aulas e em vídeos” e normalmente é sempre apenas como um erro de sintaxe, normalmente. A outra coisa que as pessoas sempre esquecem de fazer é que se esquecem de conectá-lo em seu HTML. Eles fazem isso e eles separam tudo e então eles esquecem de voltar , voltar novamente e conectar isso e eu vou usar, vai ser apenas algo como isso. Há pessoas, muitas pessoas como eu que não estão funcionando e eu posso ver claramente que é um erro de ortografia. Então talvez alguns copiando e colando apenas para ter certeza que a sintaxe está tudo escrito corretamente. Agora vou fazer um pequeno projeto. Não vai ser um projeto de classe separado porque não adianta enviá-lo para mim porque vai parecer exatamente o mesmo. O que eu gostaria que você fizesse é criar dois documentos no tutorial anterior, lição de casa anterior. Se ele não o fez, volte e faça-os. Mas você tem esses dois documentos HTML. Eu gostaria que você os separasse e tivesse folhas de estilo separadas para ambos. Agora, quando você pede para imprimi-los, um pode ser chamado de estilos, mas porque eles vão para a mesma pasta, você não pode ter dois deles chamados estilos. Eu tenho duas folhas de estilo separadas apenas para passar pelos movimentos de copiá-lo para fora e certificar-se de que você acertar. Talvez chamar este style1.CSS e chamar este style2.CSS e ver se você pode fazê-lo funcionar. Tudo bem, é isso para folhas de estilo separadas. Vejo você no próximo vídeo. 14. Como criar um índice em HTML e um estilo do CSS: Estamos no projeto número 1. O projeto 0 está concluído. Isso foi se acostumar com as coisas, e aprender o básico. Agora vamos começar a fazer algumas coisas. Vamos construir uma estrutura. Essa é a nossa estrutura do projeto 1. Escrevi lá em cima. Nós vamos fazer alguma estrutura básica de tag div para ele, então vamos adicionar alguns detalhes a ele. Estas são as minhas armações. Vamos adicionar um logotipo, e alguns títulos, e alguns botões, e alguns mapas, e coisas legais. Eventualmente, espero que pareça assim. Isto vai ser uma coisa final. Eu sei exatamente, vai ficar exatamente assim, porque eu já fiz isso. Mas antes de tudo, neste vídeo, precisamos descobrir como criar uma página index.html e como connect.css juntos. Também mostraremos como separar os documentos como este lado a lado. Você está pronto? Projeto 1 prestes a começar. É hora do nosso novo site. Vamos limpar as coisas e começar o nosso novo site. Vamos fechar tudo em códigos VS, sem nada aberto. Temos trabalhado em uma pasta chamada Projeto 0. Estamos até o projeto 1, 0 foi um projeto descartável. Essas são coisas que acabamos de testar, entender o que algumas coisas básicas, coisas que tivemos que aprender até agora. O que precisamos fazer é criar uma nova pasta local. Chamamos de pasta local, porque está no seu computador, não na Internet. É local, local para você, pelo menos. Precisamos criar uma nova pasta, e criar nosso HTML e CSS, dar-lhes nomes e vinculá-los juntos. Primeiro, vamos para o arquivo, e vamos ter um criar uma nova pasta. Agora, não importa se você acha um pouco difícil ir, porque nós temos que abrir uma pasta, e então criar uma nova pasta. É estranho. Você pode fazê-lo através do seu sistema operacional. Se você estiver no Windows, ele é diferente, mas em um Mac, ele está no Finder. Vá para sua área de trabalho e, em seguida, aqui eu posso clicar com o botão direito e dizer Nova pasta. Não importa como conseguir essa nova pasta, mas precisamos de um projeto 1. Se você estiver em um PC, é muito semelhante. Abra seus Meus documentos localize sua área de trabalho e clique com o botão direito do mouse, crie uma nova pasta. De qualquer forma, queremos ter uma nova pasta, vou abri-la. Na minha área de trabalho, já lá, aqui está o meu novo projeto de pasta 1. Clique em “Abrir”. Nada realmente acontece. Ele só pisca quando você recebe a tela de boas-vindas novamente. Lembro-me de quando comecei a usar o VS Code, e fiquei tipo: “Cara, é confuso.” Então livre-se disso. Vamos fazer um novo documento. Arquivo, novo arquivo. Vamos criar dois deles. Vamos criar um HTML. Arquivo, salve. Agora, este documento HTML, nós demos a ele um nome aleatório até agora como, divtags.html, ou helloworld.html. Agora, para um site você precisa de pelo menos uma página, ou pelo menos uma página. Você precisa que sua página inicial seja chamada exatamente dessa coisa. Ele precisa ser chamado index.html. Se você chamou de homepage.html, colocá-lo na Internet e o navegador iria para o seu site, dansawesomewebsite.com, e ir à procura de índice, e não conseguiu encontrá-lo e vai carregar um grande erro em sua página. Então você precisa de pelo menos uma página chamada index.html. Use minúsculas ou maiúsculas. Sem espaços, tem que ser exatamente isso. O navegador vai e procura por esta página como sua primeira página inicial. Chame de índice, clique nele, salve. Vamos adicionar um pouco de HTML básico. Todos os nossos meda-dados. Lembre-se ponto de exclamação, volte. Vamos dar-lhe um título. Este aqui chama-se Restaurante Adare. Eu cheguei até o restaurante. Eu estava perto? Não há verificação ortográfica aqui, e eu também estou trapaceando. Estou olhando minhas anotações. Eu escrevi, eu nem sabia qual era o feitiço certo. De qualquer forma. Restaurante Adare vai ser o meu título. Precisamos criar, e conectar uma folha CSS. Vamos fazer isso indo para “Arquivo Novo”. Vamos para “Arquivo Salvar”. Podemos dar o nome que quisermos. Eu estava pensando sobre isso antes, entre os vídeos, eu era como se houvesse estilo. Eu costumava chamá-lo de principal o tempo todo, main.css. Não importa o que você chama. O único problema é se você chamá-lo de estilo, e você é um desenvolvedor web, ou designer, e você está fazendo muitos sites, você vai ter muitos arquivos em sua área de trabalho chamado Estilo. Torna um pouco difícil encontrá-los quando você quer, mas não tão difícil. Vamos chamar de estilo. Remember.css. Se você esquecer, como eu faço o tempo todo, é estilo. Não funciona, mas aqui você pode clicar com o botão direito do mouse, renomeá-lo e apenas put.css depois. Então ele sabe. Agora, vamos ligar os dois. Voltar para HTML. Logo abaixo aqui, sob Título, vamos colocar link, e então clique em CSS e ele recebe o nome certo, porque eu dei o nome certo. Vá em frente e aperte “Salvar”. Isso deve funcionar. Vamos testar se funciona. Vamos colocar o corpo aqui. Vamos colocá-lo em um h1. Agora, vou mostrar-vos uma maneira ligeiramente diferente de trabalhar. Vamos adicionar atalhos à medida que avançamos. Se gosta de “Cara, não estou pronto para atalhos.” Digite-o pelo caminho mais longo. Suportes angulares, h1, fechar. Já faz um atalho lá, mas vou mostrar-te um atalho mais curto. Eu só vou digitar h1 e eu retornarei. Você pode ver que eu não tive que colocar os suportes angulares para a frente. Eu vou fazer isso provavelmente para o resto do curso. Só porque eu faço isso por um hábito. Você pode estar se perguntando por quê, mas de qualquer maneira. Vamos chamar isso de “Eu Trabalho”. Salvar. Vamos para os nossos estilos. Vamos adicionar um estilo para chaves h1, h1. Vamos fazer com que apenas mude a cor como se estivesse em colunas. Cor. Nós vamos dar este marrom e ele saiu com semi-cólon dentro Vamos salvá-lo e vamos testá-lo em um navegador. Então essa é a nossa página antiga em que estamos trabalhando. Eu vou para Abrir arquivo. Vamos encontrá-la. Não estamos à procura do projecto 0. Agora, vá para a minha área de trabalho. Onde você está desktop? Projecto 1. Aqui está o meu index.html. Aí está o meu H1 e ele é castanho. Agora, algumas outras coisas que eu quero mostrar a vocês no VS Code é essa coisa, o Explorer. É legal uma vez que você o usa por um tempo, mas no começo você é como “É um pouco confuso”. Então, há duas seções para ele. Vou adicionar estas divisas aqui para amarrar tudo. Então editores abertos, eu nunca tenho aberto. O que significa editores abertos, é um editor. Está a mostrar-me que tenho estes dois documentos abertos. Eu não acho isso útil porque eu posso ver lá. No entanto, o projeto é muito útil. Esse será o nome do seu site. Nós o chamamos de Projeto Um. Mas se você estiver trabalhando neste site, você pode chamá-lo de Site Ideal e esse será o nome lá. Então aqui estão todas as páginas diferentes que você tem. Aqui se você acabar no projeto 1 criando um monte de outras páginas, digamos que chamemos este entre em contato conosco, e fazemos um monte de outras páginas e apenas fazemos mais uma. Só estou trapaceando. Você vai notar isso, você pode ver aqui dentro? Está a adicioná-lo ao projecto, está a correr bem. Eu olhei naquela pasta e estou vendo tudo lá dentro. Editores abertos, é só mostrar os dois que eu tenho aberto. Não tenho certeza se isso é útil para você. Eu achei isso muito difícil colocar minha cabeça em torno daquele pequeno explorador estranho lá. Eu abro esses caras, eles não são nada. Você verá que ele se atualiza. Em vez de ir “File”, “Open”, você pode simplesmente clicar duas vezes neles e ele vai abri-los se eles ainda não estão abertos. Como isso. A outra coisa que eu quero fazer é que eu tenho Index e estilo e eu vou alternar entre os dois e você girar para sempre alternando entre os dois. Vou mostrar-lhe um pequeno truque, não muitos truques mais cedo. Vamos ficar mais complicados à medida que formos, mas este aqui, é bom para ensinar e útil para o que estamos fazendo. Se você clicar e segurar a guia na parte superior para que eu vou agarrar a palavra estilo, segure-a. Pare de arrastá-lo por aí, você pode ver que essas caixas parecem um pouco estranhas. Você é tipo: “É aquele?” Mova-o vagamente por aqui. Não muito alto, nem muito baixo. Sobre lá. Você pode ver que está ocupando metade que tem sobre o cinza. É metade disso. Lá vamos nós. A coisa legal sobre isso agora é que eu posso ver meu índice e meu estilo, e eu não tenho que alternar entre os dois. Posso ir até aqui e dizer que vou mudar isso. Eu vou adicionar um h1, h2 tab que sobre isso, e aqui, você pode ver, olha, eu não tenho que sair ou alternar entre duas guias. Agora, eu faço este e uma cor vermelha. Agora, no navegador, atualize. [ Risos] Não está funcionando em tudo. Por que não está funcionando? Você notou que está tipo, “Eu não posso ver.” Vermelho. Eu trabalho? Salvar. Eu não salvei tudo. Lá vai você. Eu disse antes, eu me deparei com problemas. Arquivo, Salvar tudo porque eu salvei este lado, mas não este lado. Vou fingir que fiz isso de propósito. Mas eu não fiz. Isso é uma boa ajudante para se trabalhar. Você quer se livrar disso, você pode clicar neste pequeno ícone aqui. Você não pode. Só coloca de novo. Feche tudo. Fechar, salvo. Eu tenho que saber em qual botão clicar. Você pode arrastá-lo para estar aqui também. Onde é que está? Lá vai você. Pode ser por baixo. Tudo bem. última coisa que quero mostrar é que você passa sua vida indo do HTML, colocando coisas e instalando no CCS. Uma boa maneira de apenas dividir estes acima como você pode estar em qualquer um destes, e clique neste pequeno ícone no extremo direito aqui. Dê um clique. Vai separá-los. Faz uma coisa estranha. Eu acho que o botão, embora pareça incrível, Eu acho que a maneira mais fácil de fazê-lo é realmente apenas arrastá-lo. Então eu tenho esses dois. Então style.css. Se você clicar, segurar e arrastar o nome aqui, você pode apenas arrastá-lo para aqui, você pode ver que ele faz esta grande caixa cinza que aparece e é um pouco aleatório em termos de onde ele acaba. Mas o que estamos procurando está vagamente no topo bem aqui, porque queremos essa metade. Você pode ver. HTML desse lado, CSS desse lado. Você pode fechá-lo se você não gosta disso. Eu vou guardá-lo. Abra isso. São duas abas separadas, mas vou arrastá-la. Você pode tê-lo aqui em baixo também, dependendo de seus laptops. Eu só os misturei. Cara, acho isso difícil. [ Risos] Você pode colocar HTML acima do CSS. Eu nunca faço dessa maneira. Eu sempre o tenho aqui. Aqui vamos nós lado a lado até você. Agora eu posso entrar aqui e dizer que realmente eu quero uma guia h2 e que tal este aqui. Aqui, eu posso digitar, deixar meu suporte lá, eu poderia digitar um h2. Você pode ver que é útil. Cor, azul. Salvar. Verifique no navegador. Verificação do navegador, azul. - Legal. Uma coisa que você precisa fazer também é você precisa ir “Arquivo”, “Salvar tudo”. Eu acidentalmente apertei “Salvar”. Meu cursor está piscando aqui. Veja isso, se eu adicionar um h3, e outras coisas, e aqui eu começo a trabalhar e eu adicionar estilo meu h3. Cor de novo. Seja qual for. Eu guardo e digo : “Atualizar, atualizar, atualizar.” Eu o salvei. Mas por causa de quando eu salvei o CSS, ele não salvou meu h3. Posso passar muito tempo tentando resolver esse problema. E eu: “O que há de errado com o código?” Passei séculos tentando consertar um problema que não existe. Sou só eu sendo boba e não vou “Salvar tudo” como atalho. Se você tem o hábito de comandar S ou Control S, você precisa aprender o Command, Alt S como seu barbear padrão. Ou em um PC é Control Alt. Sim para salvar todos. Agora olhe, atualize. Sim, fácil. Vamos entrar no próximo vídeo. Na verdade. Não, vou passar o dia em casa. Estive gravando o dia todo e é hora de uma pausa. Amanhã você vai ouvir ou um mais animado e dependendo de quão bem seu bebê dorme ou um Dan menos animado dependendo de quanto café eu tive entre vídeos. Mas para você não vai importar porque eu estarei aqui em um segundo com o próximo vídeo onde começamos a olhar para plugins em código VS. Vejo-te então. 15. Teste o seu site em tempo real usando uma extensão do Visual Studio Code: Ei aí. Este vídeo vai fazer duplo propósito; ele vai nos mostrar como instalar o que é chamado de extensão no VS Code. Essa extensão vai nos mostrar como fazer atualizações ao vivo em nosso navegador, em vez de clicar em atualizar sempre. Instalei a extensão, vou mudar a cor aqui para verde. Vai ser amarelo verde, e vê-lo mudar aqui quando eu apertar “Salvar”. Eu não estou apertando “Refresh” pronto ele atualiza naturalmente. Mostrarei como uso isso, como configurei meu espaço de trabalho, meu espaço físico com meu desktop, meu laptop, e aprenderemos tudo sobre extinções no VS Code. Para começar, abra qualquer arquivo. Bem, eu tenho o nosso index.html aberto, você pode ter qualquer coisa aberta e nós vamos para a guia extensões aqui. Há um monte de ícones este é o último, ou pelo menos este com o quadrado, com um quadrado. Não sei como descrever isso. Clique nisso. A outra coisa, pode parecer diferente do meu ligeiramente por causa da largura dele. Veja o meu cursor, quando eu chegar perto desta borda ela, Eu posso clicar em “Segurar”, arrastá-lo para fora, e eventualmente se eu arrastá-lo grande o suficiente. Vamos apenas arrastá-lo grande o suficiente para que possamos ver os ícones. Pode ser um pouco grande para você, mas vai tornar mais fácil para nós descobrir qual extensão estamos realmente olhando. Vamos fazer uma pesquisa no topo aqui então eu vou colocar em uma pré-visualização ao vivo. Sei exatamente o que vamos instalar, mas vamos fingir que não. Quero fazer uma pré-visualização ao vivo do meu HTML. Você faz uma pesquisa aqui e você pode ter que continuar digitando algumas coisas diferentes para obter a extensão desejada. Agora, o que vamos usar é este aqui chamado Live Server. Agora isso é, eu acho que para ser claro como as extensões são feitas. Então, pessoas incríveis da Microsoft fizeram VS Code e compartilharam isso gratuitamente conosco. Obrigado, Microsoft. Bem, eles também fizeram e disseram: “Ei, resto dos mundos vamos permitir que outras pessoas criem extensões para o software.” Nós não vamos fazer isso não Microsoft, mas vamos deixar outras pessoas fazê-lo. É importante lembrar que estamos usando o servidor ao vivo e parece que faz parte do produto, mas não é. Se eu clicar nele é algo feito por Ritwick Dey. Um dia ele decidiu, eu vou construir este plugin para me ajudar a usar o código VS porque ele não é construído em por padrão, então ele fez isso, ele fez, e outras pessoas começaram a baixá-lo. Agora o problema é, é que eles podem ser um Live Server melhor lá fora. Pode haver outra pessoa que fez um, e pode aqui Live Server Preview. Parece muito bom, mas tem estrelas mais baixas, 3,5. Este aqui tem 5 estrelas e tem um zilhão de downloads que é assim que eu julgo. Quando procuro uma extensão para resolver meu problema e escrevo e, em seguida, passo e digo: “Quantas vezes ele está sendo baixado versus quantas estrelas ele tem?” Então é como vetor x. Eu só comparo todos e vejo quem tem mais estrelas, quem tem mais downloads, e então eu escolho essa. Acho que quero mostrar-te isso porque podes estar a ver isto num futuro distante. Pode ser Live Server não é tão bom agora que tem duas estrelas, porque Ritwick Dey foi atropelado por um ônibus e ninguém está cuidando desta aplicação. Você tem que fazer suas próprias escolhas aqui sobre qual você pode usar e estas vão mudar com o tempo. Nós vamos usar este aqui, e eu vou te mostrar para instalá-lo. É muito fácil, e eu clico nele, deve aparecer aqui. Outra pequena dica, este é o meu site não se foi, mas esta é a extensão. Fala-me um pouco sobre ele e eu geralmente leio através dele para ter certeza de que ele faz o que eu precisava fazer, e ele diz como instalá-lo e “ Sinto muito por estar ocupado agora se você quiser manter o projeto”. Veja, este é um bom. Há uma nota aqui de Ritwick dizendo: “Eu não vou apoiar este produto nesta extensão mais.” Eu sei que funciona perfeitamente porque eu estava usando hoje. Mas vai haver um momento em que provavelmente não vai funcionar e as estrelas vão cair fora. Ele diz: “Desculpe, estou ocupado. Alguém quer cuidar dele?” Isso é verdade para muitos programas agora um monte de software, XD está fazendo isso eles estão permitindo extensões para ser adicionado em vez de os fabricantes de software. Eles só fazem o núcleo e deixam outras pessoas fazerem todos os extras interessantes. Para instalá-lo, é fácil clicar no botão “Instalar”. Deve ser no início. Você pode vê-lo aqui que é sua qualquer sugestão visual que ele está fazendo algo até que ele diga Instalado e você pode desinstalá-lo se você não gosta dele. Você pode passar por alguns deles, ligá-los e desativá-los. Agora, para este em particular eu não acho que nós precisamos reiniciar o código VS, mas muitos deles vão, eles vão dizer isso em algum lugar aqui e se não estiver funcionando, essa é uma boa maneira de fazê-lo. Se não está funcionando, vamos fazer de qualquer maneira. Vamos para “Code”, “Sair do Visual Studio Code”, e agora eu vou reabri-lo e provavelmente vai funcionar. Como funciona este plug-in em particular? Se você ler a documentação basicamente ele diz ter o documento aberto e clique neste botão aqui em baixo. Clique em “Ir ao Vivo”, ele inicia o Google Chrome, e não parece muito diferente de onde estamos antes, exceto que este será atualizado ao vivo. Vamos mostrar-lhe o que quero dizer, tornando-o um pouco menor, e eu vou empurrá-lo para aqui, mover isto para aqui para que você possa vê-lo. Ele basicamente impede que você aperte o botão “Atualizar”. Você pode ser como, “Eu não me importo de apertar o botão de atualização”, e não instalar este plug-in. Nós não precisamos dele é apenas útil, eu gosto disso, mas se você é como, “Cara, isso é apenas muito trabalho e muita agitação, sim, você pode apenas fazer apertando “Refresh”. Mas eu acho que o que eu quero fazer é principalmente neste vídeo é mostrar-lhe como instalar outras extensões. Faremos outro no próximo vídeo. O que acaba acontecendo? Veja isso antes que eu tive que apertar “Refresh”, agora eu trabalho? Sim, eu sei. Eu apertei “Salvar” você pode ver que eu salvei ao lado, ele apenas atualiza automaticamente? Vou te mostrar em um segundo como eu uso isso, mas vamos recapitular rapidamente. Localizar extensão, digite o que você deseja fazer. Nós vamos usar FTP mais tarde, e nós vamos usar algumas dicas de código, encontrá-lo, passar e dizer, oh eu tenho quase o mesmo prazo. Este tem o dobro, mas ambos têm críticas muito ruins. Este tem menos, mas tem estrelas mais altas, então você toma uma decisão baseada em estrelas versus downloads. Bem, este parece bom, é o que vamos usar, porque tem 2,3 milhões de downloads será diferente quando você olhar para ele, com uma alta classificação de estrelas. Você pode fechar as extensões clicando novamente em sua exploração. Nós vamos pré-visualizar aqui e o que eu tenho feito é ter um lado a lado como este, que vai funcionar para a minha tela realmente grande. Vou te mostrar como eu normalmente trabalho, e vou pular para o meu celular agora e vou te mostrar. Como todo mundo é eu, eu sou real, não apenas tela de computador. Quero mostrar-te como trabalho. Laptop, tela grande, eu os conecto para que eles estejam conectados. Quando eu estou trabalhando na tela grande aqui eu tenho que usando código VS, e código VS eu vou lançar a coisa do servidor ao vivo legal. Então eu o lanço, ele vai grande. O que eu faço é clicar em “Segurar” e arrastá-lo para esta tela. Eu deixo lá o tempo todo e é assim que faço minha edição. Sobre ouvir em código VS eu vou tentar e fazer algo para que você possa ver uma mudança ao vivo. H1, vou dizer que o tamanho da fonte vai ser de 400 pixels maciços. Pressione “Salvar” e isso deve atualizá-lo é atualizado. Ei, então eu estou sempre hackeando por aqui e assistindo para ter certeza que os resultados do bem aqui, então eu teria que alternar entre telas ou alternar entre eles e você vai ter um problema extra enquanto você está aprendendo porque você vai tentar fazer isso, mas você também precisa assistir o vídeo que eu estou fazendo. Talvez algumas pessoas usem um iPad aqui para assistir o vídeo e depois fazer as coisas aqui. Você pode não ter, você pode ter um pequeno laptop em que você está trabalhando que vai ser divertido. Você tem que alternar entre todos os três vídeos. Mas é isso extensões, certifique-se de verificar a classificação por estrelas versus quantas vezes foi baixado e fazer sua própria escolha. O servidor ao vivo no momento é muito bom, mas pode não ser em um ano porque ninguém está cuidando dele. É isso. Nós instalamos nossa extensão Live Server está meio cheio e balbuciando. É mais difícil quando você está na câmera ao vivo, é fácil quando você pode editar quando você está fazendo uma transmissão de tela soa muito mais sensato. Mais divagação. Vejo você no próximo vídeo. Tchau. 16. Como verificar erros no seu código em HTML usando o VS Code: Ei, ali. Não seria bom se você fizesse um erro de digitação ou se esquecesse de fazer alguma coisa ou deixasse os colchetes desligados, que havia realmente erros que apareciam e lhe dissesse qual linha está ligada e como corrigi-los. Existe tal coisa. Não está instalado por padrão, é uma extinção. Vou mostrar-lhe como trabalhar com isso, além outras formas de verificar o seu código e pedir ajuda. Vamos indo. Tudo bem. Por padrão, você tem ar ticking em CSS por algum motivo, mas não em HTML. Você já deve ter notado isso. Quando eu faço algo errado aqui e eu esqueço de colocar um cólon dentro, ou eu colocar um cólon dentro, algumas coisas estranhas aparecem e ele diz que não sabe, não é esperar coisas e como consertar rapidamente. Estes nunca pareciam funcionar. Nenhuma das correções rápidas funciona, você vai consertar. Você só vai ter que passar e dizer, onde o problema começa? Os problemas começam aqui. Algo antes disso está errado. Mas isso é útil apenas saber o começo estranho. Na verdade, este deletado também, eu vou te mostrar onde mais ele começa. Estou feito aqui, acho que é como um pequeno erro bem no canto inferior esquerdo aqui. Eu clico sobre isso, este é o cólon esperado. Isso é realmente útil. Está esperando um cólon, você pode pegar um. Na linha três, e está afetando a linha 15 também, então o que eles estão dizendo? Mas linha no nosso personagem 15. Linha três, lá está ele, mas agora quando você tem um grande problema sério, torna-se mais útil quando há como na linha 1000. Na linha três é um problema e todo o resto deles, não se preocupe com isso até que você conserte o primeiro, porque se você consertar o primeiro, eles vão todos embora. É uma cascata de erros que são corrigidos pelo primeiro. Agora, isso não funciona em HTML por padrão. Se eu colocar algo aqui que não é para estar lá e a coisa não sabe o que fazer, me diz que não há nada para fazer se eu perdi a etiqueta inicial e eu faço partes disso, ele foi lido, mas lá não é um erro de problema. Eu nem tenho certeza se ele vai ser lido por padrão. Tenho certeza que é por causa do plugue que instalei mais cedo. Vamos ativar essa verificação de erros. Vamos fazer exatamente a mesma coisa de antes, então é o mesmo que instalar uma extinção. Clique neste ícone aqui, e eu vou torná-lo maior para que você possa ver e este topo aqui e excluir o que está lá, e eu vou dizer que eu gostaria de HTML e erro. Então é aqui que fica um pouco preso, porque você está tipo, como eu chamo? Não há uma boa regra, você só tem que começar a digitar e ver quais resultados aparecem. Você pode fazer algumas pesquisas no Google. Em termos de verificação de erros, às vezes é caça a frio ou linting com um L-I-N-T. Você pode tapar as coisas. Eu procurei em torno de tentar encontrar um, e o que eu uso é chamado HTMLHint. Mas mesmo assim, é realmente difícil encontrar nesta lista. Eu faço algumas pesquisas no Google e encontrei a que eu quero. Na verdade, é apenas uma palavra, HTMLHint, você vê que você não tem chance de encontrá-lo. Ok, então saiba que esta barra de busca de extinção está bem para começar e tentar encontrar coisas. Mas basta saltar para o Google e descobrir e apenas fazer a pergunta, o que é um bom plugin para essa coisa que eu estou tentando fazer. Você pode ver aqui que é muito popular. Quatro estrelas funcionam para mim, e tem 0,5 milhões de downloads. Eu clico nele para dar uma olhada. Você lê o que ele faz e como funciona, e eu vou clicar em instalar, e nós vamos esperar, e isso funciona. Este não diz “reiniciar “, pois não? Não, alguns dizem reiniciar, muitos não fazem mais, costumavam. Mas se não estiver funcionando, você pode desativá-lo e reiniciá-lo. Vamos fazer com que funcione. Vamos fechar esta pequena guia, que estava apenas me mostrando uma pequena pré-visualização do produto. Vamos colocar todos os três. Vamos voltar para o nosso explorador e vamos fazer isto um pouco menor. Agora, se eu fizer alguns erros, colocar em alguns códigos aleatórios onde não deveria haver, olhar pequena coisa verde e isso me diz que há um personagem especial no lugar errado. Não me diz muito de novo, mas pelo menos sei onde está o erro, está na linha 13, posso encontrá-lo. Em termos de verificação de erros, esse é um bom lugar para começar. Ligue a extensão, vou fechá-la por enquanto e ficar de olho nisso. Se você gosta, não está funcionando. Antes de me enviar um e-mail e dizer, hey, não está funcionando, verifique seus erros aqui, você pode ser capaz de se auto-diagnosticar. Agora outra coisa a fazer antes de você chegar para ver se há um problema porque às vezes ele não é realmente um problema. Você pode fazer algo aqui e alterar o código e verificá-lo em seu navegador, e o navegador não está aparecendo e você está como se algo estivesse errado. Às vezes, provavelmente uma em cada 50 vezes para mim, não está quebrada. Seu código é perfeito aqui, o navegador onde você tem visualizado como apenas segurando dados antigos. Você pode fazer algo chamado cache e ele armazena em cache sua versão anterior, do seu site, então quando você está dizendo atualizar ele está indo, eu vou usar esta outra versão em cache do seu site para ser rápido e inteligente e você é como, não seja rápido e inteligente, eu quero que você recarregue sempre, e a maneira de fazê-lo fazer isso, atualizar pode funcionar. Mas há uma maneira definitiva de recarregar. Se você baixou imagens aqui, muitas vezes o navegador vai, bem, se é o mesmo nome da mesma imagem, eu não vou atualizá-lo porque é a mesma imagem com o mesmo nome. Mas você mudou fisicamente a imagem, então às vezes as coisas não se atualizam mesmo que devam. Falando muito tempo. Mostre-lhes como fazê-lo, em seguida, envie uma vista e ative este conjunto assustador de ferramentas. Visualize o desenvolvedor e clique em Ferramentas do desenvolvedor. Certo, clique nisso. Isso abre o painel para baixo, o seu não parecerá o meu, mova o que parece por padrão. Vou desligar isso. Não me lembro, mas vamos falar sobre o principal. Não se preocupe com o que aparece aqui, o que você quer fazer é a opção. Agora, quando você clicar em recarregar, você pode clicar com o botão direito do mouse nele e ele oferece essas duas novas opções que não estavam lá antes, porque agora você está olhando sob o capô usando as Ferramentas do desenvolvedor do Chrome. Você tem essa opção, Esvaziar Cache e Recarregar Rígido. Você esquece tudo o que sabe sobre o meu site e recarregá-lo exatamente do jeito que eu estou exibindo aqui no VS Code. Isso pode, às vezes, se estou fazendo problemas, certeza deve estar certo, por que não está funcionando? Está tudo perfeito. Eu entro lá, verifico isso, faço, e às vezes conserta e você é como poucos, em vez de gastar tempo tentando chegar e descobrir como está quebrado. Não está realmente quebrado, apenas o navegador não foi atualizado. Tudo bem, o que mais você pode fazer? Agora você pode totalmente fazer perguntas deste curso como se houvesse comentários. Eu uso a seção de comentários, eu uso mídias sociais como você vê todas as mídias sociais nos arquivos de exercícios da classe, chegar assim. Mas muitas vezes é só eu para este curso, é um novo curso. Eu tento o meu melhor para responder perguntas. Às vezes eu recebo um pouco porta backlog, é o fim de semana ou de férias, então eu definitivamente posso usar isso como uma opção. Mas você também vai encontrar pesquisas do Google, eu sei que é uma coisa chata de dizer, ir e pesquisar no Google. Mas o que você vai descobrir é que há alguns lugares principais, na verdade um lugar principal, chamado Stack Overflow. Estouro de pilha aparecerá, a menos que você tenha resultados de pesquisa. Mas pesquisar neste site, é simplesmente incrível. Eu ouço podcasts do cara começou isso, é para designers e desenvolvedores. Qualquer coisa web, fazer uma pergunta aqui, você vai encontrar muitas e muitas respostas realmente úteis e eles são selecionados respostas de outros usuários. O que você provavelmente vai descobrir é que você realmente não tem que fazer uma pergunta. Você pode fazer login e se inscrever e fazer uma pergunta, mas você vai descobrir que provavelmente já foi perguntado, especialmente no nosso nível aqui onde estamos apenas começando. Stack Overflow é um site incrível e você recebe uma resposta imediatamente, e se você ainda estiver tendo problemas, me deixe uma linha. As diferentes maneiras que o site é visualizado, este curso de vídeo é visualizado, usar os comentários ou você pergunta botão e muitas vezes para corrigir o seu problema, Eu preciso ver o código, então zip para cima. Ele comprim-lo em como uma pequena pasta e enviá-lo junto, como um link talvez usando o Dropbox. Eu preciso dos arquivos, você não tem que descobrir um jeito que funcione para você. Às vezes você envia um como um sistema para enviar coisas, Dropbox é muito bom porque óbvio suas capturas de tela são muito difíceis de editar seu código. Caso contrário, tenho que redigitar a coisa toda e tentar descobrir o que deu errado. Agora minha única coisa é se você está fazendo perguntas, digamos que você postar uma pergunta, dar uma olhada nos outros comentários ou perguntas e ver se há algum que você pode responder. Digamos que você está achando isso, não é fácil, mas você tem esse conceito, ser como homem, div tags, tê-lo trancado e você vê uma pergunta que alguém faz sobre tags div. Eu adoraria tentar parar esse momento em que se você está fazendo uma pergunta, você tem que responder a outra pessoa também, ou pelo menos dar-lhe uma melhor opinião ou tentar fazê-lo, para que possamos obter respostas rapidamente. Para você, você vai encontrá-lo super valioso se você é capaz de responder às perguntas de outra pessoa, é bastante incrível como ser capaz de articular isso para outra pessoa realmente leva para casa em sua própria mente sobre esse assunto. Além disso, se estou de férias a beber colisões de amendoim, alguém que precisa de ajuda, mas não se preocupe, tenho um bebé e uma criança de cinco anos. Não há colisores de amendoim no meu futuro próximo. Para recapitular, faça sua própria verificação de erro usando o HTMLHint, que acabamos de instalar no Visual Studio Code. Verifique se não é realmente um problema, atualizando seu navegador. Mas lembre-se que você tem que fazer isso indo para a visualização e indo para o desenvolvedor e inspecionar ferramentas, KL Developer Tools e, em seguida, clicando com o botão direito do mouse no botão Atualizar. Empilhar habilidades é um lugar incrível, experimente comigo também. Wheez nos comentários ou me ligue nas redes sociais. Uma última coisa antes de irmos é que pode haver um, digamos que acontece um pouco, todos vão para a minha extinção CN e eu vou ser como, ótimo, este funciona. Parece que funciona. Eu instalo e não consigo fazê-lo funcionar ou está avariado. Às vezes você precisa desinstalar extinções. Para fazer isso, clique neste pouco estranho Clear Extension Input. Com isso limpo, sua pesquisa desaparece, e ele diz exatamente o que está habilitado, o que é recomendado, eu nunca acho isso útil, mas aqui, me diz os que eu habilitei. Posso clicar neles e dizer que HTML não funciona, vou desinstalá-lo e tentar um diferente. Você pode desativá-lo temporariamente. Diga que você é como, na verdade, está funcionando, está quebrando outra coisa? Vamos apenas desativá-lo, e então fazer algo e, em seguida, habilitá-lo novamente para ver se essa coisa desaparece. Nunca tive que fazer isso. Muitas vezes, a classificação de estrelas corrige isso ou pelo menos garante um plug-in ou extinção meio decente, e é isso. Isso é verificação HTML. Ele está ativado por padrão para o seu CSS. Vamos seguir em frente agora e realmente começar a construir a estrutura para o nosso projeto um, o restaurante. Vejo você no próximo vídeo. 17. O que são as tags em HTML5 header nav section article main footer: Ei aí. Este vídeo é sobre como aprender o que são as tags de estrutura HTML5. Ok. Eles são coisas como cabeçalho e principal e rodapé e nav e você pode tipo de ver o bastante simples. São apenas recipientes onde colocamos coisas exatamente como um div, exceto que damos nomes especiais porque eles fazem coisas especiais. Muito fácil de fazer. Vamos entrar agora, aprender o que são. Tudo bem. Então, o que são esses elementos estruturais HTML5. Basicamente, HTML4, o que costumávamos fazer é o que fizemos até agora, nós apenas fazemos uma tag div lembrar uma divisão do espaço. É uma espécie de caixa e nós lhe daríamos um nome de classe. Em seguida, instale aqui agora no nosso CSS e isso funciona bem. Ok. Temos uma caixa no topo para bater e uma caixa para navegação e uma caixa para as partes principais, uma caixa para o rodapé e nós apenas criamos todos esses divs com todos esses nomes aqui. Então, o que eles decidiram em HTML5 é como, “Ei, estamos reutilizando essas coisas. Não seria bom ter uma etiqueta real em vez de escrever div igual?” Você só escreve navegação. Ok. No final, vamos fechar o navegador. O mesmo com este aqui. Talvez esta seja a parte principal do nosso conteúdo. Ok. Vamos chamá-lo de principal e aqui chamá-lo de principal. Ok. Soletre direito e aqui estilize a palavra principal. Ok. Então é isso que é. Ok. Eles apenas substituem algumas tags div comumente usadas por alguns nomes pré-existentes. Agora, além disso, não há muita diferença entre divs e esse tipo de nomes predefinidos. Eles estão prontos para ir. Deve haver algumas opções de acessibilidade para leitores de tela que podem usar esse tipo de tags que têm que fazer um pouco mais de pesquisa e que nunca surgiu no meu trabalho. Ele vai desfazer isso porque eu estou trabalhando neste documento. Então, o que são essas etiquetas? Há alguns principais. Ok. Há todo o tipo de sugestões. Então eu sou w3schools.com e aqui está um monte de seu tipo de novas tags estruturais. Ok. Basicamente, são apenas alguns deles que se acostuma. Você deve, se você está indo para ser como o melhor implementador HTML5 do mundo, ir através e pesquisá-los todos e usá-los todos perfeitamente. O que você vai descobrir é que a maioria das pessoas escolhe os bons e há muita confusão sobre alguns de onde você deve usar alguns desses. Porque como prós e contras, bem, os prós são enormes e para adicioná-los, além de ser um pouco mais claro, as pessoas não os usam. Então eu acho que eu queria ser honesto sobre isso para que não sejamos alguns não dizendo que você tem que usar essas tags. Agora, eu fiz um pouco útil. Novos arquivos de exercícios, um pequeno desenho. Por que estou desenhando isso? Eu poderia usar o Illustrator. Eu sinto que é apropriado se eu entrar em wireframes. Se você entrar em wireframes e seu arquivo de exercícios, eu fiz esses dois. Portanto, há estrutura HTML a e b. Vou mostrar-lhe dois usos muito comuns deles. Então, em vez de imprimir cabeçalho div, vamos apenas usar a tag de cabeçalho. O navegador diz o que eu normalmente faço. Eu coloco um site, esta caixa externa, o tipo de verde não tem nome. Eles deveriam ter colocado um em um recipiente frio que todo mundo usa em web design, mas eles não colocaram. Então não há nome para isso fora. Temos de lhe dar um nome div. Mas dentro daqui, eu costumo colocar minha cabeça. Dentro do cabeçalho, coloquei meu logotipo aqui. Não há nenhuma tag HTML específica para o logotipo, então você vai colocar isso em como um elemento separado. Mas há um nav, então para o nav e eles muitas vezes no canto superior direito. Essa grande seção no meio, eu chamo de principal. Ok. Bem, eu chamo de principal. Na verdade, é um predefinido. Você pode vê-lo aqui. Na verdade, é uma tag HTML5 predefinida. Pensamos sobre o principal é que não se acostumar com muita frequência. E eu: “Por que você não daria uma explicação tão boa sobre o que é essa área?” Mas de qualquer maneira e rodapé é muito fácil. Então é isso que eu faço. Eu quero mostrar-lhe outra maneira de trabalhar que eu vejo um monte de outros sites feitos. Ok. Acho que não quero que me sigam perfeitamente porque há maneiras diferentes de fazer isso. Então, novamente, a coisa azul grande está do lado de fora é que não tem um nome específico. Vamos dar-lhe um nome em um segundo, mas cabeçalho. Então eu queria mostrar-lhe este também porque o nav não precisa estar dentro do cabeçalho para funcionar. Você pode ter o cabeçalho e você pode ter o seu logotipo e alguns gráficos. Eu não quero ir lá em cima, mas você deu sua navegação separadamente. Sua navegação pode ser feita à parte, embora ninguém mais faça isso. Então você tem isso, você tem seu rodapé. Nós já conversamos sobre, e você tem esses três. Estes são comuns o suficiente e de lado é muito fácil. Se você tem um web design onde você tem uma barra lateral ou algo assim. Muitas vezes, é como artigos relacionados ou feeds mais recentes do Twitter. Você pode ficar com isso. Você pode colocá-lo dentro de uma etiqueta div chamada de lado e é uva clara. Estes dois são os únicos realmente confusos. Então é assim que interpreto como foi estabelecido. Então você tem um artigo e é exclusivo para essa página. Pode ser uma postagem de blog que pode ser. Você está escrevendo sobre um assunto. Então, dentro desse artigo, você tem seções. Ok. Você pode ter um tipo principal de artigo, mas você pode ter alguns marcadores ou como pouco se uma filas ou tipo de pull quote, bits extras. Ok. Você pode ter 10 seções ou duas seções, mas você tem um artigo principal. Há argumentos em sites onde isso pode ser completamente o contrário. Você tem uma seção e você tem artigos dentro da seção, e você tem vários artigos na página. A documentação não é muito clara. Eu acho que eu queria compartilhar a incerteza porque você pode chegar a um site com ser muito deliberado sobre o uso de artigos e, em seguida, seções dentro dos artigos. Então você chega a outro site e eles fizeram algo implementou essa coisa de seção de artigo, completamente diferente e você diria, “Huh.” Então, se isso acontecer, se você chegar a esse momento, “Huh”. Não é você, é a Internet. Limpe a erva. Mas muita gente não usa o principal. É por isso que eu não incluí aqui. Tudo bem. Então aprendemos o que são esses tipos de tags, apenas substituições para divs com nomes especiais. Nós estamos indo para começar a construir nossa estrutura real de projeto no próximo vídeo. Te vejo em um segundo. 18. Como adicionar elementos de estrutura em html5 ao seu site em html: Vamos começar realmente a fazer o site. Nosso primeiro projeto será este restaurante. Nós vamos colocar na estrutura para o cabeçalho, o principal, e o nav. Vai parecer algo parecido com isto. Esta vai ser a estrutura principal que estamos construindo neste vídeo. Cabeçalho, nav, principal, rodapé, fácil. Vamos fazê-lo, e isso é o que parece e vamos centrá-lo também. Esse é o trabalho deste vídeo. Vamos começar a codificar. Dependendo do quão bem você tem seguido, eu vou fechar em tudo e aqui, exceto para, e eu abro meu Explorer. Estou no Projecto Um. Tenho o índice e o estilo abertos. Certifique-se de que abram. Agora, no estilo CSS, vamos excluir todo o código que temos até agora e limpá-lo, e mesmo aqui. Vamos nos livrar de todo o corpo. Então isso é bom e limpo. Mas se você estivesse tenso porque louco, e precisássemos de muito espaço. Certifique-se de que sua folha de estilos está vinculada e que o título, você tem um título. Qualquer tipo de título. Mas eu também quero fazer antes de seguir em frente, é que eu vou fechar no Explorer. Continuo querendo fazer isso em todos os vídeos, mas vamos fazer agora. Vamos ver. Agora, eu provavelmente vou fazer isso. Nós estamos indo para ver aparência e zoom C em. Você vai vê-lo se você quiser fazê-lo em um Sasquatch, você pode ver todos os textos ficou um pouco maior. Provavelmente é para ajudar, principalmente para ajudar o editor de zoom ao redor. Você provavelmente está ficando tonto enquanto estamos indo lado a lado, verificando CSS e HTML. Então fez os carrapatos um pouco maiores. Você pode ser o mesmo, você pode ser como, eu uso óculos e eu preciso fazer isso maior. Então veja a aparência e você pode ampliar. Se você reiniciar, estamos prontos para ir. Uma vez que você entra no estado de espírito, digamos que acordamos, temos duas idéias, temos um café e estamos tipo, ok, precisamos fazer um site para essa empresa de restaurantes ideias. Nós criamos nossa pasta local, que é chamado de projeto um, e nós criamos dois arquivos, índice e CSS. Nós adicionamos nosso título, e isso é tudo o que fizemos. Na verdade, nós conectamos o style.css pronto. A próxima coisa que eu quero fazer é começar a adicionar minhas tags de estrutura HTML5. Agora, vamos trabalhar fora de um diagrama que eu desenhei à mão para você. Está no Projeto um em seus arquivos de exercícios e é chamado de “arame frame P1A”. Se quiser abrir isso na sua tela como eu estou, vamos colocá-la ali. Só para trabalhar os tamanhos, as cores e as coisas, você não precisa disso. Eu desenhei mesmo assim. Vamos precisar do nosso primeiro e o primeiro é de cabeça. Em vez de escrever div igual nav igual cabeçalho, nós vamos apenas escrever, porque nós nem sequer precisamos dos colchetes angulares mais. Lembre-se, estamos usando novos truques, então vamos digitar cabeçalho. Lá está ele ali. Coloque o retorno para que haja um pouco de espaço, porque eu gosto do espaço entre as tags e agora vamos estilizá-lo aqui no meu CSS. A diferença entre o que estamos fazendo agora e o que fizemos antes é, quando escrevemos uma aula, temos que colocar, qual é a coisa que vai para a frente? Esse período ou parada total. Em seguida, escrevemos cabeçalho. Mas isso não é uma aula, você sabe que é uma classe porque lembre-se que escrevemos aqui div é igual a classe. É muito claro. Quando não é uma aula, é apenas uma etiqueta velha, não há classe na frente dela. Nós não temos que colocar os períodos deles, então você só coloca esse ponto se for uma aula. Este, não temos de o fazer. Cabeçalho Incrível. Então, colocamos nossas chaves e vamos estilizá-lo. Agora, como antes, vamos abrir [inaudível] está fora para ser uma caixa clara. Mas muitas vezes você não daria a ele uma cor de fundo e uma altura como nós estamos no diagrama que eu mostrei porque você deixa o logotipo e todos os carrapatos preencher a lacuna. Mas vamos colocar a estrutura em primeiro lugar. Em seguida, vamos excluir coisas como a altura e a cor de fundo. Primeiro cabeçalho. Você, meu amigo, consiga um passado. Cor do hífen, aí está você. Vamos usar azul para este. Vamos bater em Save. Nós estamos indo para lançar uma pequena coisa legal de pré-visualização ao vivo. Na verdade, o meu ainda está indo da última vez. Vá ao vivo. Inicie backup. Lá, [inaudível] Ótimo. Fundo azul. Por que não podemos ver? Porque não tem altura. Então, ou coloque conteúdo nele, que você normalmente faria, mas como não estamos fazendo conteúdo, separamos tudo isso em vídeos separados que podemos obter conhecimento indo primeiro, para que possamos têm uma altura de 118 pixels. É por isso que decidi sem uma boa razão. Agora, vamos lá e pré-visualização. Lá vamos nós. Agora, eu gosto de dar-lhe uma largura porque costurar todo o caminho através dele pode ser o que você quer. Mas, por enquanto, queremos que seja bom. Largura física. Quão amplo você deve fazer o seu site? Esta parte do nosso curso, vamos dar-lhe uma largura física. Nós diremos, você precisa ter uma certa largura. Mais tarde, faremos com que se adapte ou responda. Então, quando entrarmos em uma seção sobre design responsivo, faremos com que ele responda a tamanhos diferentes. Mas, no momento, vamos atingir como um tamanho padrão de laptop. Basicamente, sua largura pode ser qualquer coisa. Cabe a você, o que você acha que a largura deve ser. Mas você é novo, então precisa de orientação. Muitas vezes eu vou fazer o meu 1024 pixels de largura. Essa é uma largura de web genérica muito comum. Como os laptops são, por padrão são cerca de 1300 de diâmetro, então 1300. Enquanto menos do que isso, ele vai caber na maioria das telas. Outros tamanhos realmente comuns estão em 960, usado um pouco porque é, vamos olhar para isso mais tarde, mas é facilmente divisível por 12, que não faz nenhum sentido agora, mas vai deixá-la entrar. São as colunas que vamos usar mais tarde. Bootstrap, que veremos mais tarde também, usa 992. É uma estrutura que vamos olhar. Mas não se preocupe muito. Pode ser teclado em malha. Vai ser um site bem pequeno que um. Mas se eu fizesse 987, ninguém se importaria, não quebraria o navegador, desde que seja menor do que uma tela de laptop, vamos usar 1024. A outra coisa também é, você tem que dizer 1024. Se você está para reunião de grupo de web design e você começar a falar sobre 1.024, eles vão saber que você é um novato. Você tem que dizer 1024. Vamos guardá-lo e vamos verificar. Navegador legal, 1024 se encaixa na minha tela gigante, e que vai caber em telas menores. Tem uma altura e o fundo é azul. A principal coisa importante é que usamos cabeçalho em vez de nomeá-lo um div, dando-lhe uma classe, e estilizá-lo aqui. No próximo, um par de espaços, vou digitar o navegador. Então nav, aperte Return, espaço, aqui vamos nós. Eu vou fazer o mesmo aqui. Não me lembro de ter deixado aquela cinta ali. Vou digitar o navegador, não precisa de uma parada completa na frente dele. Vamos adicionar uma cor de fundo. Vamos trapacear porque já está lá em cima. Cores de fundo, você vai se acostumar, isso é muito longo para digitar para obter a sugestão certa. É um longo grupo de personagens de qualquer maneira. Vamos verificar o nosso diagrama. Onde está o meu pequeno diagrama, ele vai ter 40 de altura. Vamos usar a mesma largura, mas usamos a altura de 40. Isso acontece bastante. Eu faço isso e esqueço de colocar o P esperando. O que acontece no navegador? Vamos verificar, não apareceu. Salve, guardei aqui em cima. Por quê? Você pode vê-lo. Porque é azul. Vamos lá, isso vai ser vermelho. Estava lá o tempo todo. Ainda não está aqui. Vamos, navegador. É feito para fazer a atualização automática, por que não é? Você sabe por quê. É porque eu não salvei isso. Estou apertando o comando S, é o Controle S em um PC. Estou apertando Salvar, mas estou apenas neste documento. Fora do hábito esta manhã de dirigir o comando Alt S, que diz ambos os lados, então aparece. Eu finjo ouvir que estou te ensinando, mas realmente estraguei tudo. Há um navegador, o que mais temos que fazer? Temos a seção aqui que vai ser o meu principal e este vai ser o meu rodapé, 400, 100, vamos dar uma olhada. Por aqui eu vou esmagá-los em massa. Eu vou colocar em uma nota, eu vou colocar em principal, Voltar, colocar alguns espaços entre eles para que você possa ver. No fundo aqui vamos colocar no rodapé. Agora, observe que eu estava brincando com meu cursor. Eu só coloquei meu cursor na frente dele, apertei a aba para que tudo se alinhe. Você não tem que fazer isso. Vou colocar um Retorno nele para parecer com todos os outros. Tudo bem, então há minhas seções, aqui, eu vou trapacear, colar isso, este vai ser o principal. Este vai ser rodapé. Estamos fazendo muitas coisas, uma de cada vez. Mas muitas vezes quando você está trabalhando, você vai começar a fazer isso um pouco mais em massa fazendo as coisas. Então laranja, não tem que ser as cores, como esta e cores aleatórias aqui. Vamos olhar para mais cores baseadas em código mais tarde, mas eu estou apenas usando as que estão pré-preenchidas. Eram 400 e 100, não me lembro. Quatrocentos e 1000 será. Então altura, 400, e este é 100. No lugar certo, então. Salve tudo e, em seguida, vá para o seu navegador. Lá vamos nós. É a estrutura central. Agora a grande coisa que você gosta, eu quero isso centrado. Por que ele não está centrando? o próximo. Então o que podemos fazer é tentar centralizar cada uma dessas caixas e isso funcionaria. Mas o que é realmente comum é embrulhar tudo em uma div ou em um recipiente e fazer isso centrado para que esses caras apareçam. Na verdade, é fácil mostrar a você. Então, no código VS, vamos entrar aqui e dizer o cabeçalho. Então, para centralizar algo, é estranho. Para centrar um elemento estrutural como este, não há como me centralizar. Então é um truque. Ainda é como se fosse feito de qualquer maneira. Então você pode colocar em uma margem, que é o espaço ao redor do exterior. Mas você pode colocar uma margem à esquerda e eu vou clicar nela. Em vez de colocá-lo em uma medida real, você pode simplesmente digitar “Auto” e certificar-se de que ponto e vírgula vai no final. Então a sintaxe tem que ser assim. Vou apertar “Salvar”. O que isso faz é dar uma olhada nesse site. Você pode ver que eu fiz isso para o cabeçalho e é porque a margem é automática, ele apenas tenta ser automaticamente tanto quanto pode ser e então é por isso que pode ser é, mas eu posso ser enorme. Então é enorme, mas para neutralizar isso, você diz, “Eu quero uma margem à direita.” Exatamente a mesma coisa e eles lutam e de alguma forma magicamente eles acabam no meio. Então é assim que você centraliza as coisas. Então nós poderíamos fazer isso por isso e nós poderíamos fazê-lo por este também. Você pode trabalhar lentamente seu caminho através dele. Tecnicamente, não haveria nenhum problema com isso, exceto que seria um pouco estranho. Então eu vou pegar tudo isso, me livrar dele, salvá-lo. Então estamos de volta aqui e eu vou colocar todas essas coisas em um recipiente. Agora não há contêiner como tags predefinidas, temos que usar nossa tag div antiga escola. Então, do topo aqui. Então eu quero que ele seja antes do cabeçalho e eu quero que ele seja perto logo após o rodapé. Então aqui estou indo para fora uma vez e eu vou dizer, “Eu gostaria de uma div com uma classe de contêiner.” Agora eu estou chamando de contêiner, você poderia chamá-lo de banana. Pode chamá-lo do que quiser. Ninguém chama isso de banana. Só para o caso de as pessoas chamarem de embrulho , pode ser caixa. Nós vamos chamá-lo de contêiner para que seria um realmente comum é contêiner. Então estilo que, o problema é que ele abre aqui, e fecha apenas aqui. Então ele abre e fecha imediatamente. Preciso do fim disto. Fizemos isso jogando com nossa caixa de tag div mais cedo. Foi por isso que fizemos isso. Porque eu preciso disso eu preciso de um corte para cima, pegar todos os pequenos pedaços e depois de terminar rodapé, eu vou colá-lo dentro Então, agora, se eu clicar neste de cima aqui, ele abre aqui, fecha estes embora, tudo embrulhado. Vamos arrumar isso porque está parecendo um pouco estranho. Nós vamos fazer isso. Selecionei todos estes. Há um atalho sorrateiro para arrumar tudo, em vez de colocar tudo sozinho, em vez de colocar tudo sozinho, é clicar com o botão direito do mouse e ir para este que diz, “Seleção de formatação”. É apenas uma espécie de recuo tudo bem. A outra coisa que posso fazer para que isto pareça um pouco mais agradável é, sei que coloquei retentores, estou a livrar-me deles. Então eu vou esclarecer isso para que fique legal para você. Podem acelerar isso um pouco e vejo vocês em um segundo. Tudo bem, você está de volta. Agora você pode ir, isso parecia doloroso e é, mas é como eu trabalho. Eu gostei de tudo para tentar ser o mais agradável que eu puder, e especialmente fazendo tutoriais porque é bom para você ser claro sobre onde tudo está eo que ele faz. Então é bom e claro agora que, que está dentro de um recipiente, porque está recuado. Então, tudo o que precisamos fazer aqui é dizer estilizar o contêiner. Você é tipo, “Ele está fazendo errado?” Você é como “Definitivamente”. Foi um teste de verdade que eu fiz. Então você tem que, se você está assinando uma classe lembre-se, o período vai para frente e então nós podemos dizer, nós colamos que nós não fazemos. Então é melhor fazer de novo. Então vamos fazer margem esquerda. Vamos torná-lo automático, ponto-e-vírgula. Mesma coisa, margem direita, automático, ponto e vírgula, salve. Porque todos esses companheiros estão dentro do contêiner, eles não devem funcionar. Salve tudo, não um teste. Não estava tudo funcionando. Contêiner da classe Div. Direita, esquerda. Não há erros aqui em baixo, eu guardei tudo. O que está acontecendo errado? Eu sei o que é. Então eu adicionei uma largura porque estamos fazendo isso um pouco para trás. Eu adicionei a largura para esses caras internos, o recipiente precisa de uma largura. Precisamos trocá-los. Então você precisa de uma largura, não janelas. Precisamos de uma largura. Estou mais agitado, largura de 1.024. Esses caras podem sair. Bem, na verdade, eles podem ficar, assistir. Vamos dar uma olhada. Então o contêiner agora tem largura. Então agora as margens sabem empurrar para fora dos lados lá. Poderíamos deixar isso aqui, mas porque, por natureza, as tags div tentariam se esticar para preencher o espaço fornecido, e dissemos que o espaço fornecido é contêiner, esses caras não precisam ser avisados duas vezes, aqui vamos nós, parece exatamente o mesmo. Agora, em termos do fluxo aqui, eu quero que o contêiner esteja no topo só porque mais tarde quando eu voltar aqui, eu estou procurando quando a folha CSS fica bastante longa, eu estou bem, que as coisas no topo são as coisas mais importantes. Então recipiente, em seguida, cabeçalho. Estes são eu acho, mais baixo na ordem de separação em termos da estrutura para o site. Tudo bem, então isso é aplicar as tags HTML. Agora, em um anterior, onde está, este aqui eu mostrei a vocês em Wireframes, eu fiz este chamado estrutura A, e eu coloquei o nav dentro do cabeçalho. Então vamos fazer isso primeiro. Isso significaria apenas cortar isso. Lado errado, cortá-lo e colocar a cabeça dentro deste. Então essa seria uma forma de estruturar esse projeto. Digamos que o outro design não usou Main, eles usaram a seção em vez disso. Ou seção aberta e fechada eles usariam isso e seção de estilo aqui. Mas nada realmente mudaria. Estou usando o Main porque é assim que eu gosto de fazer, e eu fico confuso com seções e artigos. Muito bem amigos, temos a nossa estrutura básica para o nosso site com algumas cores feias. Vamos começar a adicionar coisas extras porque só fizemos textos e caixas simples. Vamos começar a adicionar cores de fundo adequadas. Vamos começar a adicionar imagens, texto e tudo nos próximos vídeos. Vemo-nos daqui a pouco depois do almoço. 19. Como colorir o fundo de uma página da web usando a tag body html: Oi lá. Neste vídeo, vamos passar deste fundo branco e velho para esta cor verde tóxica. Basicamente tudo o que eu vou mostrar a você como colorir o fundo usando sua tag corpo HTML e, em seguida, eu sair em um pouco de uma tangente para discutir cores RGB em cores hexadecimais e como usar este pequeno seletor deslizante de cor coisa. Está tudo à sua frente na próxima aula. Tudo bem, agora precisamos colorir esta parte de fundo aqui, então há branco. Não podemos colorir apenas o contêiner porque eles são contêineres sentados aqui no meio, então precisamos de outra maneira. Imagine se houvesse uma etiqueta que envolva em torno de tudo na nossa página. Olhe para isso. Etiqueta corporal. Ele já está lá e esta é a tag que você estiliza para alterar a cor de fundo completa. Agora podemos colocar o corpo aqui no final, mas é muito comum tê-lo no topo assim corpo. Lembre-se que ele não precisa de um período ou parada total na frente dele. Basta digitar corpo e nós vamos adicionar o nosso usuário de fundo retarda os tempos para baixo cor de fundo Lá está ele. Vamos escolher uma destas cores aleatórias para o momento. Coral. Vamos check-out coral é, e é sim. Eu meio que gosto. Não está funcionando com essas cores, mas é assim que mudar sua cor de fundo. Faremos imagens de fundo mais tarde no curso, mas por enquanto eu quero focar um pouco na cor, porque usando coral e vermelho, e vermelho indiano e vermelho rubi, há muitos tipos diferentes de nomeação. Eu não sei quem estava encarregado de nomear essas cores, mas hey, isso é o que eles são. Muitas vezes, o que queremos fazer é passar o mouse acima dele. Eu não estou fazendo nada, eu não estou clicando nele, eu só estou pairando sobre ele. É estranho no código VS. Às vezes, ele liga e você não pode ativá-lo mesmo que você realmente queira, então apenas passe o mouse acima dele, veja não vai ligar. Agora vai. Certo, e aqui embaixo, podemos fazer algumas coisas. Esse controle deslizante à direita é a tonalidade, então arraste-o para obtê-lo mais ou menos na zona. Digamos que queremos mudar isso para e vamos dizer verde brilhante só porque então nós colocamos na faixa verde brilhante e vamos você quer um pouco mais amarelo? Verde-amarelo? Um pouco mais de verde azul? Vamos pegar o azul-verde. Então aqui está a opacidade, então, como ver através. Para a cor de fundo, você não pode realmente ter transparência ou opacidade porque não há nada para ver, mas mais tarde ele será útil e aqui, é onde este ponto termina, então você clica em segurá-lo e movê-lo. Se eu subir aqui, não importa qual é a tonalidade, eu vou ter branco, que é RGB 255 em todos eles. O que eu quero fazer é voltar para ele pairando sobre ele e voltando para aqui, pegando o verde, pegando o verde-azulado ele e voltando para aqui, pegando o verde, e clicando aqui e apenas entrando onde eu sinto que deve ficar bonito e é isso que eu quero fazer. Estou escolhendo uma cor aleatória para o momento. Agora, basta clicar no fundo ou mover o mouse para longe. Você percebe que as cores mudaram de ser RGB, desculpe, de um nome para esta mistura vermelha, verde e azul e aqueles mix verde com azul faz agora uma cor verde louca. Vamos salvá-lo e testá-lo no navegador. Esse é o lugar errado. Aí está, ali está o meu verde. Outra maneira de fazer cores é usar cores hexadecimais. Vou apagar tudo isso. Isto é para as pessoas que já sabem. Digamos que você sabe o que números hexadecimais. Começa com hash e muitas vezes as pessoas usarão código de três ou seis dígitos. Só vou fingir um. Acontece que se eu apertar essas teclas estão aleatoriamente no meu teclado, eu fico com um verde então é três ou seis dígitos, principalmente seis dígitos. Onde conseguimos essas cores de lá? Na verdade, eles são feitos de vermelho, verde e azul. Os dois primeiros dígitos vermelho, segundo dois dígitos de verde, últimos dois dígitos azul. Você não precisa saber disso, mas, digamos que você está trabalhando com diretrizes de marca, você está procurando um cliente corporativo, ele pode fornecer esse número hexadecimal ou o número RGB, e você pode digitar o que funcionar para você. Para mim, eu estou trabalhando a partir desta maquete aqui no XD vamos olhar para XD mais tarde, mas esta cor no fundo, eu cliquei no meu nome aqui em cima. Não se preocupe se você nunca usou o XD e falaremos sobre isso mais tarde no curso. Eu clico sobre isso e você pode ver que isso me dá meu número hexadecimal ou ele poderia ir RGB. Eu poderia datilografar. Todos os tipos diferentes de criação web, produtos de design, você poderia usar Photoshop ou Illustrator todos XD ou Sketch para projetar seu site, mas você construí-lo em código VS e, em seguida, apenas descobrir quais os códigos de cor que você deseja usar. Certo, esse é o código que eu quero. Vou copiá-lo e entrar em código VS e isso, meu amigo, é o tipo de cinza escuro que eu quero. Guarde isso, navegador, esse é o cinza escuro. Ok, o primeiro foi fácil. Falamos sobre adicionar a etiqueta corporal e depois fiquei um pouco tempo demais sobre as cores. Parecia que era a hora de fazer isso. Talvez seja para mais tarde. Vamos cobri-lo novamente enquanto passamos, se isso pareceu um pouco rápido. Estou de volta do almoço, tomei um café, correndo através das coisas, abrandar lá, respire e te vejo no próximo vídeo. Estamos respirando. 20. Como adicionar imagens a um site usando HTML e o que é alt: Este vídeo é tudo sobre a adição de imagens ao seu HTML. É bem fácil. Vamos entrar agora e aprender a fazer isso. Para adicionar nossa imagem, vamos colocá-la dentro do cabeçalho. Clicando entre o cabeçalho, colchetes angulares colocam retenção e vamos usar IMG, essa é a versão abreviada da tag que descreve uma imagem e aperta “Return” e coloca todo o lixo que precisamos. Então a fonte da imagem, exatamente onde ela está e não está em lugar nenhum no momento, então precisamos colocá-la em um lugar dentro de nossa pasta local, vamos fazer isso primeiro. O que vamos fazer é saltar para o nosso localizador, em um Mac é chamado de localizador, em seu PC, é chamado de janela, então encontre seu painel de documentos pegue isso e na sua área de trabalho dentro do seu projeto 1, Temos índice e estilo, mas precisamos colocar nossa imagem aqui e é muito comum não jogar isso sentado com esses caras. Você os coloca em um grupo em sua própria pasta chamada imagens. Vamos clicar com o botão direito do mouse, eu vou fazer uma nova pasta que é basicamente a mesma no Mac ou PC e você poderia chamá-lo de IMG ou imagens. Eu chamo de imagens, metade do mundo chama de IMG e a outra metade do mundo chama de imagens. Eu chamo de imagens, não é bom ou ruim, mas você tem que tomar partido. Temos uma pasta lá chamada imagens. Não há nada nela. Então vamos para nossos arquivos de exercícios, vamos para o projeto 1 e dentro daqui, há um PNG chamado logo-adare-restaurant, eu vou clicar com o botão direito do mouse nele, eu vou copiá-lo. Onde está a cópia? Eu uso atalhos, você pode dizer, eu posso copiar? Lá vai você, copie ou comande C ou controle C em um PC. Vamos voltar para a nossa área de trabalho e colá-lo em, desktop, projeto 1, imagens, clique com o botão direito do mouse colar item e não há, então realmente não tem feito muito, eu acho que ele traz um ponto muito bom. Tudo neste site precisa estar nesta pasta chamada Projeto Um. Lembre-se, não precisa ser chamado de Projeto 1, mas tudo tem que estar dentro daqui. Ele é chamado de raiz do site, então ele precisa saber que esta é a base inicial e ele não precisa saber que o resto do seu computador existe. Só precisa saber que essa pequena pasta é seu próprio mundo pequeno e fonte de imagem, então eu vou digitar im, eu comecei a digitar im, você pode ver ele vai, “Ei, eu olhei para a sua pasta raiz e eu vi essa pasta chamada imagens. Gostaria de usar isso?” Você é como, “Eu faria.” Se ele não aparecer, ele provavelmente está quebrado e você precisa ir e verificar se a pasta de imagens está no lugar certo. Mas se ainda não estiver funcionando, basta digitar no IMG e então você precisa uma barra para dizer que eu estou dentro dessa pasta e o que dentro dessa pasta, só há uma coisa. É muito inteligente, agora vamos salvá-lo, salvar tudo e vamos pré-visualizar em um navegador, lá está ele, está alinhado à esquerda, vamos movê-lo para o meio, mas é assim que você adiciona uma imagem muito fácil. O texto alt-é super importante quando você está adicionando imagens e, basicamente, alt-text é abreviado para alternativa e isso significa que, se esta imagem não foi carregada, que texto descreveria melhor esta imagem? Este vai ser o logótipo do Restaurante Adere. É assim que lhe chamamos? É o Restaurante Adere. Esse é o meu restaurante [inaudível]. Então isso descreve uma imagem e por que fazemos isso é por algumas razões. Os deficientes visuais terão um leitor de tela que irá lê-los no site, obviamente, se você não pode ver o logotipo, você precisa ser descrito o que é, então ele precisa ser um descritor muito bom para as pessoas recebendo leia o seu site. A outra coisa é que o Google o usa para ajudar a descobrir o que é o seu site. Então, se você acabou de comprar logotipo, tudo bem, mas você pode muito bem colocar, para Adere Restaurant, porque se alguém está procurando por Adere Restaurants e seu site é muito claramente para Adere Restaurant, isso ajuda seu rankings. Certifique-se de que o texto alternativo é realmente claro o que é, mas também é muito específico para o seu alvo no nosso caso queremos pessoas procurando restaurantes nesta cidade chamada Adere para onde eu vou me mudar em algumas semanas, eu não posso esperar. De qualquer forma, isso vai ser para este vídeo, nós colocamos em uma imagem, vamos fazer como criar imagens fora de programas mais tarde no curso, vamos separar isso, vamos fazer Photoshop e Illustrator e XD, como fazer imagens. A única coisa que você precisa saber se você está criando-os agora é que eles não devem ter nenhum espaço. Se eu tiver um espaço lá, ou pelo menos no arquivo que criei na minha pasta de imagens, isso não deve ter espaços. Mesmas regras como nomear estes, deve ter sublinhados ou hífens ou, não importa se ele não tem espaços, apenas certifique-se, sem espaços. Agora o próximo vídeo, vamos. 21. Como centralizar uma imagem em HTML usando CSS: Oi lá. Neste vídeo vamos tirar a imagem que é padrão deslizando para a esquerda e mudá-la para o meio. É fácil. Vamos entrar e fazer isso. Tudo bem. Queremos centralizar esta imagem dentro do cabeçalho, e a maneira mais fácil de fazê-lo neste caso é o cabeçalho. Vamos dar uma olhada no nosso design. Vamos centrar tudo o que está dentro dele, porque essa é a única coisa neste cabeçalho. Não há nada nas navegações fora da caixa de cabeçalho, então é apenas uma imagem. É agradável e fácil. Vamos encontrar o estilo de cabeçalho aqui e vamos alinhá-lo ao centro e vamos usar alinhar texto. Você está tipo, por que você está usando o centro de alinhamento de texto? É assim que as coisas são. centro de alinhamento de texto funciona muito bem para horizontais. Entendo isso errado o tempo todo. Horizontal ou vertical, sabe o que quero dizer. No meio, por ali. centro de alinhamento de texto funciona muito bem. Vamos testá-lo. Vamos visualizar em um navegador. Dentro do meu cabeçalho tudo é centro de alinhamento de texto. Tudo bem. É assim que a nossa pequena imagem fica no meio. Vamos começar a trabalhar com alguns dos textos deste documento. Próximo vídeo, por favor. 22. Como alterar o tamanho e a cor do estilo de fonte de h1 p em HTML e CSS: Olá, colegas web designers. Este vídeo, vamos passar disto para isto. Removendo os fundos, adicionando alguns textos, estilizando os textos, olhando para as famílias de fontes, vamos olhar para o preenchimento do lado de fora e do topo, vamos olhar para a diferença entre preenchimento e margem. Uau, muito o que fazer neste vídeo, vamos entrar e começar. O que queremos colocá-lo em nosso texto e fazê-lo parecer assim. Ok, isto é em h1 e depois há uma etiqueta p. Vamos pegar a cópia. Coloquei em seus arquivos de exercícios, então encontre seus arquivos de exercícios e no Projeto 1, há um chamado Texto do Projeto 1. Abra isso em algo, e, sim, tem algumas coisas aqui. O que queremos é, vamos nos encontrar, e vamos trazer isso primeiro, então minúsculas só se você olhar. Você pode adicionar a maiúscula se você quiser e então nós vamos trazê-lo em um segundo. Vamos entrar no VS Code. Onde é que a queremos? Quero que seja, estamos pulando o navegador que você gosta, vamos para o nav. Vamos fazer os bits fáceis primeiro e vamos passar para como estamos construindo em nossas habilidades, então guia h1, ou retornar e colar nesse texto, salvar. Vamos dar uma olhada no navegador. Lá está ele. Vamos carne. Vamos adicionar a tag p e pegar o texto, copiar, colá-lo. Agora isso traz um bom ponto. Vamos salvá-lo e visualizá-lo, certificar-se de que ele funciona. Onde estamos? Aqui vamos nós. Está lá dentro. Agora, na visualização de código, isso pode, se você gosta ou não e eu vou mostrar a você algo que eu faço, então o texto sai e vê na parte inferior aqui, há muito texto então você tem que rolar através. Cabe a você se você quer deixá-lo assim, porque eu sinto que isso é prós e contras com ambos. Eu vou apagar isso, então a tag p, eu estou apertando minha “Delete Key” porque lá vai você. Lá vai você. Está tudo em uma linha que você pode gostar disso. Muitas pessoas e eu inclusive, eu desligo, então vou mostrar a vocês dois. Eu queria me envolver. Uma coisa que eu quero que você perceba é que cada nova linha começa com um novo número e isso deixa bem claro. Na linha 22, apesar de ser bastante longo, está tudo na linha 22, mas se eu for ver e fiz este aqui, alterne o contorno da palavra. Você pode ver que ele abre uma lacuna na numeração, porque isso normalmente ainda é a próxima linha, mas é apenas uma espécie de envolvê-la, porque depende de quão grande o espaçamento é. Entendeu o que quero dizer? Cabe a você. Vou embrulhar o meu, mas talvez não goste disso. É mais fácil desativá-lo clicando exatamente no mesmo botão. Certo, então agora precisamos estilizar esses dois caras e depois adicionar um pouco de estofamento porque, aquele é ousado e é branco e não é Times New Roman. Estamos usando Arial neste caso e você pode ver isso se incorporando nas bordas. Enquanto que no momento, você vê que ele está correndo todo o caminho, além disso, precisamos centrá-lo. Vamos fazer todas essas coisas. Então aqui no meu CSS, h1 e coloque chaves e vamos fazer, vamos começar com o tamanho da fonte. Quando você está construindo, você vai gastar muito mais tempo indo, são 40, ou talvez 60 e apenas testando porque eu já fiz essa aula para vocês. Eu já sei que são 84 exatamente. Vamos testar no navegador, você vai entrar no hábito e, em seguida, fora do hábito de apenas tentar fazer todo o estilo, você vai entrar, aqui está. Agora isso significa cor de branco e então você faz a próxima coisa e depois a próxima coisa sem verificar e então você vai verificar e algo vai estar totalmente errado e você não vai ter idéia de qual parte do seu código você realmente quebrou. Meu conselho, especialmente no início, é fazer uma coisa, ir verificar, depois voltar aqui e fazer outra coisa. Esse caso meio divertido com isso que ainda não fizemos é a família das fontes. Pense nisso como alterar a fonte ou o tipo desses padrões. Nós vamos usar os padrão para o momento, não há muitos, mas vamos olhar para expandir isso à medida que passamos. O que vou usar é com antena. Vou para Times New Roman para Arial Helvetica sans-serif. Vamos acertar ponto-e-vírgula, salve. Vamos pré-visualizar. Em vez de ser Times New Roman, deixe-me desligar isso e eu vou te mostrar como eu faço isso em um segundo, então as vezes que você possui com todos os pezinhos, isso é chamado de fonte serif. Ele tem os pequenos pedaços para pendurar o lado e se eu mudá-lo para Arial, não vejo pés pequenos. É um sans-serif, sem os pés. Fiz algumas coisas. Um deles estaria comentando em um segundo. Este aqui, isto vai esperar. Por que há três fontes? Diga que quer Helvetica. Agora, o que estamos fazendo aqui é que estamos usando o que é chamado de fonte padrão. O que está acontecendo é que você não é como colocar aéreas neste site. O que está acontecendo é, digamos que eu construí o site e nosso amigo Bob carrega seu site. O que acontece é que seu navegador entra e verifica seu sistema, então verifica, o computador de Bob para ver se ele tem antena e carrega. Se ele não tem antena, vai verificar a Helvetica e se não encontrar Helvetica, ele vai procurar por isso, em cada computador tem pelo menos sans-serif. É como a fonte padrão para o núcleo da máquina. Eu sugiro Arial, mas você não tem, eu sugiro Helvetica. Se você não tem, sugiro san-serif. É por isso que quando você vê alguns desses mais longos, nós escolhemos antena porque é fácil. Mas vamos apagar todo esse tipo de família, cólon, família, espaço que escrevi. Agora o seu pode não ter feito isso. Acho que pulei isso também. Vamos voltar. Quando eu estou digitando em uma família, em vez de bater os dois pontos, eu clicar sobre isso porque ele me dá todas essas sugestões legais. Olhando para esses caras pode ver 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet', há muita coisa nessa lista, certo? Está dizendo para verificar o computador do Bob para Gill Sans, se ele não o tiver, ter Gill Sans MT. Se não tiver, então coloque Calibri, se não tiver esse Trebuchet. Ele não tem isso, eu desisto e uso o tamanho padrão da fonte, sans-serif. Você vai notar que alguns destes são brancos e alguns deles não são. Alguns deles têm estas pequenas marcas ao redor. Alguns deles não. Palavras solteiras não precisam delas. Palavras ou fontes que têm dois como um espaço entre eles precisam desses apóstrofos. Vou com apóstrofos, coisas complicadas. Eu vou voltar para Arial, porque você poderia escrever aqui. Vamos escolher fontes mais sugestivas. O que temos? Comic sans. Você pode digitar isso lá e provavelmente será carregado na maioria dos computadores, porque a maioria dos computadores tem Comic sans. Mas se não tiver, terá Gill Sans e calibri, entende o que quero dizer agora, certo? Vou me livrar de tudo isso e começar a digitar a antena, garantir que o ponto-e-vírgula vai no final. É isso que vai fazer. A outra coisa que eu entrei lá e eu não queria, eu sinto que isso deveria ser mais tarde no curso, mas nós meio que abrimos essa caixa, é que eu realcei isso e eu queria desligar tudo por causa do momento, está funcionando. É Arial. Se eu quiser desativar isso, eu posso fazer um truque sorrateiro, em vez de excluí-lo e depois salvá-lo e depois verificá-lo, você pode meio que desativá-lo momentaneamente. Basicamente você precisa dessa sintaxe. Você precisa colocar uma barra na frente dele. Isso é apenas para CSS. Você precisa colocar uma barra para a frente, então você precisa colocar seus asteriscos, que está amarrado com sua tecla oito, número oito no seu teclado, e meio que o reverso disso no final. Se você colocar isso em torno de qualquer coisa, então barra para frente, apóstrofo e no final disso, apóstrofo. Isso não é apóstrofo. São seus asteriscos, desculpe. Asterisco, barra, pode ver enquanto estiver dentro desse pequeno grupo de personagens, ele vai desligá-lo, fica verde e o navegador não sabe mais que existe, e é apenas um truque útil. Mas você também teria notado que é super rápido. Há um atalho. É um pouco cedo para esses atalhos, mas já estamos lá. O que fazemos, é destacar o bit que queremos desligar, e mantemos pressionada a tecla Command em um Mac ou a tecla Control em um PC e apertamos o botão de barra para frente. No meu teclado, está no canto inferior direito do meu teclado. O seu pode estar em outro lugar, basicamente procurando essa chave, a tecla de comando e clique nela e ele faria isso automaticamente. É muito útil. Destacá-lo, comando barra, controle barra para frente. Vamos seguir em frente e fazer a etiqueta P. Então P, este aqui, o que fazemos com este? Fizemos o tamanho da fonte. Eu quero tudo isso. Meu cérebro preguiçoso diz para copiar. Certo, mas o tamanho vai ser diferente. Queremos que o tamanho seja 18 pixels. E vamos deixar a cor e a fonte. Vamos verificar. Então agora são 18 pixels. É Arial e é branco. Agora a próxima coisa que quero mostrar é que agora podemos passar e dizer, porque queremos que pareça desenhar, para combinar com isso, queremos tudo no meio. O que eu poderia fazer, é entrar no meu código TS e eu poderia dizer, nós fizemos este e este aqui faz muito mais sentido. Texto, alinhar, centro, perfeito. Terminamos para o H1 e está feito. Mas não é feito para este fundo, não está centrado. O que faremos com B, porque é tudo sobre ser econômico com seu código, faça uma vez em vez de fazer dez vezes. A mesma coisa, lembre-se mais cedo em que fizemos o contêiner, fizemos auto esquerda e direita na coisa que encerra tudo, vamos fazer a mesma coisa para isso. O que envolve tudo isso, é a etiqueta principal. Que palavra é essa? Principal. Se eu fizer a mesma coisa para isso, digamos você meu amigo, tudo dentro de você será o centro de alinhamento de texto, ele fará a mesma coisa. Realmente não importa, mas estamos procurando pontos de estilo como designer de front-end. Isso está funcionando, isso está centrado. Vamos trabalhar com o estofamento porque eu quero um grande pedaço no topo e um grande pedaço nos lados. Agora podemos fazer isso para o tipo específico novamente, mas vamos fazê-lo para o contêiner. Bem, é uma margem para a etiqueta principal. Vamos fazer o principal, vamos fazer estofamento e vamos usar o estofamento até o topo. O que eu quero que seja, eu já resolvi isso, são 80 pixels. Vamos verificar. Incrível. Então, há 80 pixels de preenchimento no topo. Vamos fazer isso pela esquerda e pela direita. Preenchimento, esquerda e neste caso, é 240 pixels pares. Certifique-se de que é ponto e vírgula no final e faça o mesmo para a direita. Legal. Tudo bem, vamos fazer um teste, ver se quebramos. Não, acolchoado no topo, acolchoado nas laterais. Legal. Agora, ao longo deste curso há duas maneiras de colocar espaços dentro, há preenchimento e margem, e esta é uma boa maneira de mostrá-lo, a diferença entre os dois. O que faremos agora é principal. Fizemos o preenchimento. Vamos fazer a diferença. Em vez de estofamento top, vamos fazer margem superior, porque pode ficar confuso como, qual deles eu uso? Às vezes não importa. Vamos mostrar no momento porque deixa bem claro. Eu fiz margem superior em vez de estofamento top. Olha o que acontece. Funciona. O texto é tão longe para baixo dessa caixa vermelha como era para preenchimento, exceto margem é o lado de fora desta caixa porque dissemos principal ser laranja. margem superior empurra-o para longe da parte superior da caixa, toda a laranja desce, enquanto que o preenchimento é o interior da caixa, as partes internas. O texto vai acabar no mesmo lugar, mas o preenchimento é o interior da caixa, de modo que o laranja. Entende o que quero dizer? Vamos dar uma olhada. Texto no mesmo lugar, mas a caixa chega ao exterior. Margem empurra a caixa para baixo mais um pouco mais como disse topo margem e acolchoamento topo para espero esclarecê-lo, se você gosta, Eu quase explicar este direito. Faremos isso algumas vezes. Vamos fazer mais 80 pixels. Esperemos que solidifique essa ideia. Você pode ver que há 80 pixels lá na margem, e então há outros 80 pixels aqui logo depois para isso. Há um pouco mais aqui porque esta fonte aqui tem um pouco sobre ele por padrão. Este provavelmente preenchimento no topo deste H1 por padrão, que irá desligar mais tarde, mas para dar-lhe uma margem principal no exterior, preenchimento no interior. Então eu também disse às vezes que não importa e não importa quando você se livrar dessa cor de fundo porque nós só usamos essa cor de fundo para apenas uma espécie de identificar essas caixas. Eu não quero uma grande caixa laranja ou uma caixa azul, então o que vamos fazer é na sua margem, vamos apagar isso. Adeus. Salve isso. Vamos dar uma olhada. Isso é o que eu quero. Agora, se eu tivesse margem ou estofamento, você pode ver que não faria diferença. Porque o texto iria acabar no mesmo lugar e porque não há cor de fundo, você entende o que quero dizer. Dean, já o disseste dez vezes. Tudo bem. Nós temos isso. Se não o fez, faremos de novo mais tarde. Enquanto estivermos aqui, vamos nos livrar do fundo do logotipo. Onde está o cabeçalho? A cor de fundo azul. Apagá-lo. Aqui vamos nós. A última coisa antes de eu ir, quando eu ensino isso ao vivo e sempre foi um na classe, você pode ser essa pessoa, as pessoas esquecem de colocar o PX e salvá-lo e você está tipo, hey, não está funcionando, eu estou mudando no números, eu estou fazendo para cima e para baixo e não está funcionando. É só porque você tem o PX porque não é algo natural. Lá vamos nós. Não se esqueça disso. Isso é tudo para este vídeo. Te vejo em um segundo no próximo. 23. Como criar um link clicável em html e alterar a cor: Boa tarde. É hora de falar sobre hiperlinks, e às vezes eles são chamados de h-refs ou tags. Eles são links clicáveis. Assim fazer uma reserva, nós vamos editar e quando eu clicar nele, neste caso, ele vai abrir uma nova guia. Vai para o Google, porque não tenho um bom lugar para ir, mas é isso que vamos fazer. Nós vamos fazer um tanto por si só e em linha com o texto no topo aqui. Vamos entrar e descobrir os caminhos do hiperlink. Para adicionar um link, vai ser esse cara aqui chamado “Faça Reserva”. É chamado de hiperlink, então vamos para o VS Code. Na verdade, é referido como um H-ref. Onde queremos isso? Quero-o depois da minha etiqueta e vais reparar que o meu embrulho está desligado. Ele desliga toda vez que você fecha o programa, então, entre os vídeos, eu ia para casa e então eu disse, “Não, eu vou fazer mais um vídeo hoje à noite antes de ir para casa.” Fechei o VS Code, abri de novo, e o embrulho sumiu. É bom mostrar que ele tem um atalho muito fácil se você pode ser incomodado lembrando dele. Eu vou colocar o meu logo abaixo da etiqueta p aqui e o que é isso? É uma etiqueta. Se eu digitar um A e apertar Return, ele coloca tudo o que precisamos. Ele precisa de referência h e entre aspas, como a maioria das coisas aqui, é onde colocamos o link que queremos que ele vá. Neste caso, vou usar algo no Yelp. Vou pausar aqui e estarei de volta em um segundo com um link. Estou de volta apenas com um restaurante aleatório que encontrei em um dia ao acaso. Fui lá uma vez, gostei muito da comida, Neville Cross. De qualquer forma, peguei um link para irmos, então vamos voltar ao código do Visual Studio. Quando alguém clicar neste botão, ele vai para onde? Você poderia digitar dois pontos HTTP, deveríamos ter feito isso. Você precisa de todo o lixo. É melhor ter todo o lixo, então HTTP dois-pontos barra, barra, ponto, e a URL, é para onde este botão vai ir. Porque eu passei por todo aquele aborrecimento e encontrei um link, eu vou digitá-lo mesmo que seja realmente grande. Agora, no momento, não vai fazer nada. Vou guardá-lo, pré-visualização, vamos dar uma olhada. Não funciona. Ele precisa de algum texto e o texto entra como uma tag. Há uma abertura e você pode ver as duas chaves entre as duas tags h1. Eu vou passar entre estas etiquetas e nós vamos fazer reserva, isso vai funcionar. Eu só digitei e poderia ser qualquer coisa, apenas texto como a tag p, mas porque você embrulhou isso nesta etiqueta H-ref, nada acontece. Vamos salvar. Nada acontece. Isso traz à tona um bom ponto. Lembra que eu disse que fechei o código VS? Fechei o código VS, mas não fechei esta janela de pré-visualização. Lembra do servidor ao vivo? Isso traz à tona um bom ponto. Presumi que ainda estivesse ligado. Sei que não, mas esqueci-me. Fechei o Visual Studio Code, abri de novo, e essa conexão quebrou entre aqueles dois. Vou deixar isso no vídeo porque é um bom argumento. O que vou fazer é voltar ao vivo. Vai iniciar uma nova página, há a minha antiga que não está mais conectada, fechamos, aqui está o meu Trip Advisor, e agora está conectado. Aqui está. Legal. Agora pode ser azul, o meu é roxo porque eu já estive nesse link antes. Mas dê um clique, carregue, e há aquele adorável conselheiro de viagem. É assim que se adiciona um URL. Faremos um pouco de estilo em um segundo também. Uma coisa que você pode querer fazer é quando você clica nele, no momento em que ele clica nele e ele está realmente substituindo essa página por isso você não pode realmente voltar facilmente. O que você faz é que há uma opção no seu refúgio. O que podemos fazer é nos livrar de tudo isso. Sinto que fez parecer feio. Estou mais para fazer parecer legal para você, então vamos colocar no Google, Google Dot com. Tudo que você precisa fazer é depois do h-ref, então uma tag é o que estamos usando, h-ref é apenas uma parte dela. Depois disso, e vamos adicionar algo chamado alvo é igual a branco. Na verdade, acho que precisa ser sublinhado em branco. Preciso que verifique isso duas vezes. Vamos dar uma prévia. Tente adivinhar aqui lembre-se, salve tudo, visualize em um navegador, e vamos clicar e ele funciona. Legal. Se você adicionar esse sublinhado em branco, você pode ver o que ele fez? Ele deixou essa guia lá e lançou este link em uma própria guia. Às vezes está na janela, você não pode realmente controlar isso, mas se você apenas adicionar o alvo em branco, ele pode fazer isso. Neste caso, não é o que eu quero, mas vai ser algo que eu vou associar a esses vídeos para que você possa voltar. Vou deixar lá dentro. Vamos viver lá dentro. A outra coisa a observar é que quando você está fazendo URLs, digamos que isso quer ir para outra página neste site, muitas vezes você não sabe o que é isso ainda. Você é como, “Será que vai ser a página About Us dot HTML?” Mas você não tem isso ainda, então o que as pessoas tendem a fazer como desenvolvedores é colocar um hash, perto da chave três. O símbolo da libra, haxixe, como é que lhe vais chamar? O que isso faz é que é um ótimo lugar. É claro que esse é um suporte de lugar e se você deixá-lo em branco, muitas vezes o que pode acontecer é que ele pode lançar um erro. Se você deixá-lo, não tem mais certeza se o Chrome comete um erro. Vamos verificar. Apenas lança em sua própria janela. Isso é bom. Está funcionando bem, mas alguns navegadores surtam se não houver nenhum link, então você coloca um hash. Eu te mostrei isso porque é muito comum ter isso. Você pode obter um site de modelo de outra pessoa e eles deixaram hashes lá e você fica tipo, “O que são esses?” Eles são apenas suportes de lugar para que quando o botão é clicado, ele não lança um erro. Legal. Vamos deixar haxixe lá dentro. Não, vamos voltar ao Google. Agora vamos estilizar isso. Quero que faça uma pausa agora e faça um pequeno teste. Como eu estilizaria isso? Apenas pense nisso. Você não tem que fazer isso. Você poderia fazer isso, isso vai ser legal. Mas eu quero que você veja se você pode estilizar esta coisa e a primeira coisa que eu quero que você faça é torná-lo branco porque é roxo no momento, às vezes é azul, se ainda não foi clicado. Eu quero que você faça isso. Você teve um pensamento? Não se preocupe, é só para pensar ou no final da tarde para mim. É o “A”. É um por aqui. Eu vou dizer que a cor, por favor, vai ser branca. Ele vai mudar a cor e também vamos dizer que eu quero que a família de fontes seja a mesma que o resto dela, então eu vou digitar tudo isso. Você pode ver agora que eu não estou indo tão lento como eu fiz no início da aula, você pode realmente adicionar código muito rápido usando todas essas pequenas dicas úteis. Se estou indo um pouco rápido, desculpe, mas já fizemos isso algumas vezes. Vamos dar uma olhada. Ei, é a cor certa, é a fonte certa, e nós vamos deixar o sublinhado porque eu quero aqui, porque eu sinto que às vezes se não é muito claramente um botão clicável, você precisa deixar o sublinhar, mas vamos dizer que não é e você quer se livrar dele. É uma coisa estranha. É chamado de decoração de texto, faz sentido, mas também é estranho e você quer defini-lo para nenhum. Texto-decoração, nenhum, vai se livrar do sublinhado lá. Quero o sublinhado. Vou deixar isto no código aqui para ti, por isso vou comentar. Eu vou fazer isso um pouco mais neste curso para que as coisas que eu mostrei vocês estejam nos arquivos preenchidos salvos, mas mesmo que eu não queira usá-los eu mesmo. Agora, a outra coisa a saber sobre este hiperlink, nós fizemos isso como suas próprias etiquetas separadas, então ele acabou pendurado no fundo aqui. Digamos que você queira fazer essa palavra como a palavra satisfazendo um link. Vamos usar a palavra Adare. Digamos que as pessoas podem clicar nele e ele vai para um mapa de Adare. Onde é que está? Só vou colocar alguns espaços para limpar tudo. Não quero que haja espaços, mas quero deixar isso claro para você. Vamos fazer a mesma coisa, uma etiqueta, que tem um A e que o retorno coloca lá dentro. Para onde é que ele vai? Eu não sei ainda. Ele vai para hash e dentro dos suportes aqui, o que eu quero aparecer, eu vou pegar este [inaudível] ele vai para dentro de lá. Vamos salvá-lo, vamos verificar, e você pode ver que está sublinhado. Já foi dito o que fazer em termos de uma etiqueta. A tag a ainda se refere a este e a este, e está adicionando o sublinhado e está no texto. Este é chamado de inline. Este é um h-ref embutido ou uma tag ou hiperlink. Tem o nome para a mesma coisa. A. O que significa um? Acho que é uma ligação ativa, eu deveria garota. Mas como ele é colocado no fluxo desta tag p, ele irá apenas fluir ao longo disso porque ele é colocado por si só fora da tag p. Ele sai sozinho, então você não sabe se eles realmente fazem alguma coisa. Você notou os outros espaços? Não mudou nada. Veja, eu acabei de editar lá para parecer arrumado, mas vou colocá-lo de volta lá. Esse é o curso intensivo em hiperlinks. Vamos entrar no próximo vídeo. 24. Como adicionar uma imagem de fundo a um site: Olá a todos. É hora de substituir nosso fundo cinza chato por nossa imagem de fundo emocionante. É legal, tem um elástico, se encaixa lá, cobre todo o fundo, parece limpo. Não sei o que estamos comendo, mas parece gostoso. A ironia é que sou vegetariano, mas a carne parece boa, especialmente nestas fotografias. De qualquer forma, vamos entrar e descobrir como fazer o fundo. Para adicionar nossa imagem de fundo, é um pouco estranho. O vídeo anterior ou um dos vídeos anteriores, editamos nossa imagem. Nós editamos para o HTML e ele apareceu no topo do nosso documento aqui, e é ótimo. O único problema em editá-lo para o seu HTML é que você não pode ter coisas acima do topo, ou pelo menos não muito facilmente. Queremos isso nesse plano de fundo, e queremos que seja mais um efeito, em vez de algo com o qual você possa interagir, apenas se escondendo na parte de trás para que seja mais como um estilo, digamos. Nós editamos nos estilos CSS. Fazemos isso aqui em nosso styles.css e editamos para, qual deles devemos editar? Lembre-se, nossa etiqueta que vem todo o fundo que fizemos cinza, é a mesma etiqueta. A etiqueta de corpo aqui que fazemos cinza, podemos deixar cinza lá e eu deixo a cor de fundo lá normalmente porque às vezes leva um pouco de tempo para a imagem carregar, então pelo menos há algo no fundo até que ela carregue. Do jeito que eles fazem, é um bem chamado, é chamado de imagem de fundo, legal. Uma coisa que não é muito clara é o que fazer em seguida, e sua URL, é uma dessas opções lá dentro. URL é um URL de imagem de fundo dentro desse colchetes, você digita onde ele vai. Vai ser em images/, geralmente está na barra e o CSS diz, “Ei, você quer dizer esta imagem, o logotipo?” Você é tipo, não, não o logotipo. Eu quero outra imagem que eu usei para o fundo. Guardei para você, está em seus arquivos de exercícios. Você precisa sair para o seu localizador, encontrar seus arquivos de exercícios, encontrar o projeto 1, este aqui chamado fundo, eu vou copiá-lo, eu estou usando Command C em um Mac, Control C em um PC, desktop, você está vai colá-lo nesta pasta de imagens junto com o logotipo. Agora, espero que eu possa apagar a barra, aí vai você, digita de volta e diz, “Você quer dizer esse cara?” Eu sou como eu faço, daí o cara. Vamos, vamos colocar o ponto e vírgula, vamos salvar, e vamos ver se funcionou. Isso pode ser o suficiente. Você pode ser como feito, siga em frente. Mas se você é como eu e vê que o momento não faz exatamente o que eu quero, você pode gostar. Mas no momento, eu queria me mudar. Se alguém olhando em uma tela menor que a imagem ainda é santa. É uma classe CSS muito agradável e fácil que podemos usar. Nós não somos um atributo de classe, ele é chamado de fundo, outro bom, tamanho de fundos e há este aqui chamado capa. capa do tamanho do fundo nos permitirá fazer isso. Vamos dar uma chance. Redimensionar, bom. Agora, veja não ouvi falar de repetições nativas porque a proporção dessa coisa é um pouco estranha e a imagem que temos não se encaixa bem no aqui, então tem que fazer algo no momento, está repetindo. Vamos dar uma olhada em se livrar da repetição. Vai ser metade do [inaudível] fixo. Dizemos fundo, repito. Antecedentes que eu gostaria de sentar sem repetir, por favor. Incrível. É bom ir e já se foi. Porque as caixas cinzentas lá, tens de decidir o quanto isso te irrita. Porque a próxima coisa que precisamos fazer é um pouco estranha. Para fazer isso funcionar, o que você faz são os corpos, a etiqueta com que temos trabalhado, certo? Mas há uma tag abrangente sobre tudo HTML legal. Para fazer isso desaparecer, você tem que colocar em outra tag logo acima dela e dizer, eu gostaria que a tag HTML tivesse uma altura de 100 por cento e isso corrige isso. Nem sei porquê, mas é o que fazemos. Como às vezes em web design, eu vou explicar para você e às vezes eu não posso, então lá vai você. Está cobrindo, se encaixa, é legal. Mais uma coisa se você tem um exigente é que santo e fica lá dentro, mas não é bem santo. Gosta do porquê e está bem centrado? Você pode mexer com o fundo. Como é que se chama? Linha de fundo. Se eu soletrar. Alinhamento de fundo, não é, posição de fundo. É isso. Posição de fundo e nós digitamos no centro; e isso deve corrigir isso. Agora ele vai do centro, em vez de esquerda e direita, eu gosto. Uma coisa se você está seguindo junto em uma tela muito pequena que você gosta de mel faria com que fazê-lo que então é verdade. Eu só pensei que eles neles, como se você tem uma tela muito pequena, vai ser muito difícil como arrastá-lo para fora grande o suficiente para fazê-lo fazer todos os bits de redimensionamento. Isso é algo para saber. Eu acho que o que você está fazendo, em como você provavelmente pode se safar com praticamente tudo isso fora. O problema será quando alguém como eu com uma tela gigante abrir e dizer, não está bonito. Se você está trabalhando em um laptop muito pequeno e você está, eu não posso nem sentir o gosto disso. Mais tarde no curso eu vou mostrar a vocês como fingir ser uma tela realmente grande. Só queria acrescentar que eles só no caso de você querer fazer isso funcionar, mas é potencialmente necessário. Imagens de fundo feitas e polvilhadas. 25. Como tornar uma tag div transparente usando HTML e CSS no VS Code: Olá a todos, vamos olhar para fazer as coisas passarem, normalmente referido a codificação como transparência alfa ou opacidade. Entende o que quero dizer, nós vamos de isso para isso onde é um pouco ver através ou muito ver através. Vou mostrar-lhe agora como fazê-lo em CSS. Tudo bem para fazer a transparência nós vamos fazer isso para este nav Atualmente, é vermelho, vamos primeiro mudá-lo para uma cor que tinha que fazer preto. Então isso vai para VS Code. Vamos encontrar o nosso equipamento de navegação. Aí está a cor deles. Vou datilografar preto. Nós realmente não precisávamos fazer isso primeiro, mas certifique-se de salvar tudo, pré-visualizá-lo. Aí está, é preto. Queremos torná-lo um pouco transparente. Ok, eu mencionei isso antes, mas se você realçar a palavra preto ou apenas clicar em melhorar, um pouco difícil ativar essa coisa. Eu encontro homens, aqui está. Eventualmente você pode fazer isso funcionar. Agora, isso realmente não importa. Você pode fazer um preto aqui na mosca. O que acaba acontecendo é que se você escolher uma cor sólida, você tem três opções. Vermelho, verde e azul no momento, se eles estão todos definidos para zero, isso significa que você fica preto. Você define todos eles para 2,5,5, você pega todos eles. Mas cria uma cor branca. Não tem nada a ver com um ensaio longo, exceto que você pode adicionar uma quarta dimensão. Então aqui, se eu arrastar o controle deslizante para baixo para dizer, eu estou olhando para cima aqui, ok, que quando eles vêem 0,0,0 e há esta nova opção de edição extra. Pense neles como porcentagens. Se eu for alto, eu olho quando estou em um sólido desaparece, mas se eu descer 0,975 é como 97 por cento isso é 50%, transparente e chegar aqui em baixo, é como 10% opaco, 10% opaco é melhor Explicação. Então eu sou 10 por cento de cor nisso 50 por cento de cor, 90% significa que é quase completamente preto novamente, se eu explicar que, ok, você arrastá-lo para cima e então, você vai resolver isso. Então eu vou ter o meu cerca de 30 por cento. Ok, e você vai ver que ele está lá. Então 0.3 significa que é 33 por cento preto. O não salvá-lo muito, vamos testá-lo. Então olhe aqui você vai Agora, se você é da velha escola Web Design e usando esses números hexadecimais, lembre-se que hash, nós fizemos o hash meramente executar, e eu escolho algumas cores aleatórias. Você não pode fazer transparência alfa com isso. Você tem que usar essa coisa chamada RGBA. Que tem vermelho, verde, azul e alfa, que é o ver através do EBIT. É assim que se faz com que algumas coisas se vejam. Agora nós fizemos isso para a cor de fundo aqui em nosso navegador. Mas você poderia fazer isso com o Type. Você pode fazer qualquer cor que você aplicou às coisas e ligeiramente opaco ou muito opaco. É isso. Vejo você no próximo vídeo. 26. Como criar uma navegação de texto simples em um site em HTML e CSS: Oi lá. Este vídeo vamos fazer esta navegação de texto simples. Nós realmente vamos construir, essa é a maquete que nós realmente vamos construir. Vamos chegar até aqui neste vídeo de qualquer maneira. É apenas agrupado no topo aqui, o alinhamento não é perfeito ainda, mas está lá, está tudo ligado. Vamos aprender uns atalhos novos ao longo do caminho. Vamos indo. Primeiro, vamos colocar nossos links. Aqui dentro do nosso navegador, eu vou colocar um retorno, e eu quero colocar em quantas opções nós temos? Temos 1, 2, 3, 4, 5, 6. Quero seis etiquetas. Este vai ser um cardápio bem simples. Nós estamos indo para construir provavelmente quatro em todo este curso, texto simples um, vai fazer botões no próximo projeto e, em seguida, será menu suspenso e legal jQuery Burger menus para celular. Ficaremos mais chiques e mais extravagantes à medida que avançamos, mas apenas uma simples para começar. O que eu quero fazer é adicionar meus seis links. No Visual Studio Code, quero digitar uma tag, retornar. Vamos colocar haxixe para que não vá a lugar nenhum. O primeiro é em casa. Podemos fazer isso seis vezes e tudo bem. Você pode copiá-lo e colá-lo e alterar o texto. Vou te levar em um atalho. Vou tentar introduzir pequenos atalhos à medida que avançamos. Eles são apenas divertidos e são bons e são úteis e eu os uso para que eu saiba que eles são bons. O que podemos fazer em VS Code é que podemos fazê-lo em uma tag minúscula a, mas eu quero três deles. Podemos usar os tempos seis deles. Os tempos neste é a chave de asterisco. É por baixo, muitas vezes combinado com o número oito, então mantenha pressionada a tecla “Shift” e clique em “oito”. Então, um asterisco seis significa que quero que estes seis atinjam “Return” aquilo. Você é um web designer, você é um hardcore e você está programando rápido. O que eu quero fazer é colocar um haxixe e tudo isso. Imagine se há um atalho para fazer tudo isso, aí está. É um processo um pouco lento. Muitas vezes você acaba trabalhando nesses vários grupos fazendo várias coisas da mesma forma. Podemos fazer, vamos fazer mais um. Mais um atalho e você pode simplesmente digitá-los, mas se você estiver em um Mac, é sob este aqui. Esse é o atalho que você está procurando. Está sob vista, não, está sob seleção. É este aqui, Adicionar Cursor Abaixo. Em um Mac é o comando de opção e a seta para baixo. Os cursores são para cima, para baixo, para esquerda direita. Em um PC, é Control Alt seta para baixo. Aqui onde eu estou piscando, então certifique-se de que o cursor está piscando lá. No meu Mac, vou manter a opção Command, Alt, Command e bater para baixo, para baixo, para baixo, baixo, para baixo, então eu vou digitar hash. Se você estiver em um PC, ele é Control Alt down, down, down type hash. Eu quero me livrar disso agora porque eu não quero casa e todos eles. Vou clicar uma vez em qualquer outro lugar. Estou clicando no primeiro e em seu texto lembrar nos arquivos de exercícios há um arquivo chamado Projeto um texto. Eu só vou copiar e colar em tudo. Copiar colar, você pode fazer o mesmo, se você pode digitar, você pode apenas digitar tudo em. Você não tem que colocar nada. Vou acelerar isto. Muito bem, obrigado editor, é Jason, a propósito, eu o chamo de editor o tempo todo, mas o nome dele é Jason e ele é incrível, obrigado Jason. Nós apenas salvar tudo e vamos visualizá-lo no navegador e, esta atualização? Ali está ele. Tenho toda a minha mensagem lá dentro. Não está certo porque lembre-se, é porque há uma etiqueta e nós desenhamos a etiqueta a aqui em baixo. Esses caras, ei, somos iguais, vamos fazer a mesma coisa. Vamos ter que fazer um estilo específico para isso para que pareça com a minha maquete aqui, mas podemos fazer isso. A primeira coisa que faremos, porém, é que queremos centralizá-lo. O que vamos fazer é que já fizemos isso antes. Queremos ir através e centro usando centro de texto vai fazê-lo para o nav, vai dizer todo o texto dentro de mim, Ele vai ser text-align, centro, semi dois-pontos, salvar, salvar todos os preview em um navegador, que nos levou, pendente para mexer com sublinhados para mexer, mas isso vai ser tudo para este vídeo. Pelo menos colocamos os navegantes e aprendemos alguns atalhos. Tudo bem, eu voltei duas vezes. Terminei o vídeo. Eu era como se eu devesse mencionar isso. Começamos a fazer atalhos agora. Senti que era a hora de começar a fazer algumas coisas básicas. Se você é como, como eu vou me lembrar dessas coisas? Ou talvez já tenha começado a escrevê-las. Eu criei uma pasta em seus arquivos de exercícios, arquivos de exercícios, folhas de atalho abrem isso, e nós temos que ignorar essa no momento. Vamos olhar para ele mais tarde, mas estes dois serão úteis, VS código vai olhar primeiro. Existe um Mac ou PC dependendo do que estiver a utilizar. Vou abrir o meu Mac. Digamos que é uma boa página que você pode imprimi-lo fora e levando em seguida você computador destacar os que você acha útil, você não vai se lembrar de todos eles, mas o que acabamos de usar pode ver seleção multi-cursor, que é o que eu uso para inserir o cursor abaixo. Você pode apenas destacar que um agora, imprimi-lo, destacá-lo e dizer que foi um útil, então eu vou tentar e lembrar que um que você pode ter lido através, talvez mais adiante no curso que você pode ler através e obter, então perceber que era o atalho, pode ser realmente útil. Bem, este salva tudo. Se não te lembras, destaca essa. Certo, isso é código VS. O outro ali se chama Emmet. Emmet que realmente não falamos, tem um nome separado, os atalhos que eles chamavam de atalhos Emmet. Mas para você, são esses quando dizemos que todos os Emmet são coisas como uma etiqueta. Se eu digitar um e apertar o retorno, Emmet está fazendo isso, mas realmente não importa o que ele é chamado, mas Emmet, é como ele é chamado. A mesma coisa antes de fazermos uma vez seis lembrar. Isso é um Emmet. Podemos vê-lo abreviatura emmet lá vai você. Você provavelmente já viu. Chamam-lhe Emmet e fiz um atalho. Bem, eu não consegui. Eu colecionei isso para você. O problema com este é como 24 páginas. Tem todas as coisas que você pode fazer. Acho que esta impressão útil fora das duas primeiras páginas, porque o resto delas, é bastante difícil. Eles destacaram os realmente importantes para os que você provavelmente usará. Talvez você imprima os dois primeiros. Eu acho realmente interessante olhar para essas estruturas que você pode fazer. Vamos entrar nesses mais adiante, mas provavelmente é um bom momento para imprimi-los agora para que você possa começar a rabiscar seus novos atalhos. Certo, agora é o fim do vídeo. Vejo você na próxima. 27. Como usar o estilo CSS em mais de uma classe de tag de uma vez em classes compostas: Ei, todo mundo. Vamos levar o nosso menu neste vídeo, que se parece com este neste momento. Preenchimento de ambos os lados, algum espaço entre eles, tamanhos de fonte. Para fazer isso, vamos ter que aprender o que é um seletor composto. É muito legal, agradável e simples. Vai permitir-nos ser web designers mais sofisticados. Vamos entrar e aprender o que ele faz. Seletor composto. O que é uma classe composta? É só mais do que um. Nós temos um problema agora, porque o que eu quero fazer é, eu quero estilizar esses A-tags. Quero desligar o sublinhado, porque não o quero aqui. Mas eu já empatei as etiquetas. Lembra-te mais cedo, dissemos: “A-tags, queremos sair.” Desligamos isso, porque queremos deixar o sublinhado. Temos um A-tag controlando algumas coisas. O que podemos fazer é usar algo chamado especificidade. Significa que vai substituir se você for mais específico. Geralmente todos os a-tags fazem isso, mas se eu disser a a-tag especificamente no nav, faça essa outra coisa, isso vai ganhar porque é mais específico. Genérico, um pouco mais específico, porque estamos dizendo as etiquetas A dentro do navegador. Vamos apenas fazê-lo, em seguida, código Visual Studio. A maneira como você estrutura uma classe composta ou um seletor composto, composto só porque há duas partes nele, você pode ter mais de uma. Só vamos fazer uma. O que queremos dizer é que, se houver um navegador, com um “A “dentro dele, basta colocar espaços entre ele. Porque estamos lidando com seletores de tags, o navegador e o A, não é uma classe, não precisamos de parar. Faz tudo por si só, com espaços entre eles. Se houver uma etiqueta A dentro de um navegador, faça outra coisa. O que queremos dizer é que a decoração de texto está definida como nenhuma. Está bem, fixe. Ponto e vírgula, feito, salvar. Vamos dar uma olhadinha, é isso, certo? Funciona, legal. Essa é boa, mas porque ela diz que as etiquetas A estão dentro do navegador, você entendeu. Selectores de compostos. Super-útil. Fazemos assim porque é a maneira mais simples e agradável, limpa e clara. Podias ter-te livrado disto. Vou embrulhá-lo na barra de comando, para comentar. O que eu poderia ter feito era criar uma classe chamada, “sem sublinhar”. Gostaria de mostrar-vos os dois caminhos, porque não há nada de errado com este caminho. Por aqui, eu vou dizer que a decoração de texto será definida como nenhuma, e aqui nós podemos dizer, na verdade eu gostaria, depois do “HRF” lá, eu vou colocar em uma classe chamada “sem sublinhar”. Guarde, e espero que apenas um deles esteja funcionando agora. Eles vão você. O problema com isso é que eu tenho que aplicar essa classe a todas essas etiquetas, e tudo bem. Se eu fizer outro, tenho que ir para a aula deles. Não há nenhum problema real com isso. Mas você pode ver a elegância deste primeiro. Elegância é a palavra? Eu sinto que é. Incrível. Nós aprendemos o que são selector composto é e a sintaxe para ele, espaços. A próxima coisa que quero fazer é arrumar o estofamento aqui. Centrando em uma caixa. Centralizar horizontalmente é perfeito. Verticalmente é muito difícil, surpreendentemente difícil. Não me pergunte por quê, mas é. Mais tarde no curso, quando olhamos para algo chamado flexbox, vai ficar mais fácil. Mas no momento, no nosso nível de habilidade atual, é super difícil. O que vamos fazer é fingir. Vamos colocar um pouco de estofamento no topo e no fundo, até parecer que está no meio. A maneira mais fácil de fazer isso, há algumas maneiras, mas a maneira que vamos fazer é, vamos adicionar um pouco de preenchimento a este nav. Porque no momento ele está bem no topo então vamos adicionar um pouco para o topo e um pouco para o fundo e talvez se livrar da altura. Vamos tentar mostrar o que quero dizer. Primeiro de tudo, vamos nos livrar da altura, isso vai torná-lo um pouco mais claro. Aqui está a altura do meu nav. Você pode comentar ou simplesmente excluí-lo, porque eu não quero. Veja o seu colapso, mas se eu adicionar algum preenchimento para o lado de fora do nav, ou eu poderia adicioná-lo às tags reais em si, realmente não importa. Vamos fazer isso no navegador só porque me apetece. e nós vamos dizer “estofamento” e vamos fazer “estofamento”. Eu vou fazer com que 14 pixels no topo e o mesmo para a parte inferior. Só vou copiar e colar na parte inferior. Incrível. Vamos salvá-lo e vamos pré-visualizar em um navegador. Você pode ver que chegamos ao mesmo ponto. Desmoronou, agora há estofamento empurrando-o para fora. Se fizéssemos isso com margens, não funcionaria direito. Eu só coloquei isso em você, a diferença entre margens de enchimento. Você pode ver que há algum estofamento. Há 14 pixels acima e abaixo ali, porque se eu subir para 140, você pode ver que há muito espaço lá. Mas porque é o lado de fora da caixa, ele realmente não faz o que precisamos que ele faça. “ Desfazer”, “desfazer”, “salvar”, pré-visualização. - Legal. Vamos corrigir algumas outras coisas que estão me incomodando, como o tamanho da fonte é um pouco grande, e o espaço entre os botões do menu são minúsculos. Precisamos ajustar isso. Vamos entrar no VS Code. O que devemos fazer? Vamos fazê-lo para o nav como, porque eu quero fazer este um tamanho de fonte de 12 pixels. Queremos que ele seja bem pequeno para combinar com o meu design? Vamos dar uma olhada. Salvar. Isso é melhor. Agora, vamos fazer o espaço entre todos eles. O que vamos fazer é um pouco de estofamento. Não importa se é preenchimento ou margem neste caso. “ preenchimento” e “esquerda”. Eu vou colocar em 10 pixels, e eu vou fazer o mesmo para o preenchimento direito. “ Direita”, 10 pixels. Vamos dar uma olhada, incrível. Por que eu fiz as duas coisas? Porque se eu fizer isso, vai ficar um pouco torto. Vai parecer bom, mas vai ser empurrado de um lado, e eu acho que você não pode realmente notar isso nisso. Imagine que temos um pouco de estofamento para um lado, mas não para o outro. Em cada um destes. Visualmente, não parece diferente, mas você tem estofamento em ambos os lados agora. Eu meio que costumo fazer isso. Eu apenas agarro meu cursor e clicar sobre ele e arrastar, para tentar destacá-lo, e isso me dá uma idéia meio vaga do que está acontecendo. Essa é a nossa navegação básica. Não vá a lugar nenhum ainda. Nós temos uma página de índice, nós teríamos que criar uma página de menu, e uma página on-line de pedidos. Nós só fizemos um até agora, então estamos apenas usando esses hashes ou símbolos de libra, apenas para torná-los ativos, mas não realmente fazê-los ir a qualquer lugar ainda. Isso é tudo para a nossa navegação realmente simples. Vamos para o próximo vídeo. 28. Projeto do curso 02 - Rodapé: Surpresa, é hora do dever de casa. Você tem todas as habilidades agora para recriar esta foto. No momento em que se parece com isso no navegador, essa coisa verde. Não se preocupe com este grande mapa no meio. Vamos fazer isso daqui a pouco. Quero que te concentres no mapa para baixo. Então você vai se concentrar nessa parte. Então o que eu quero que você faça é que eu gostaria que você fizesse isso parecer assim. Está pendente? É margem? Como é que o conseguimos no centro? Como faço para tornar a fonte menor? Eu quero que você embrulhe em uma etiqueta P e eu quero que o fundo seja preto, mas transparente, mas não tão transparente como isso. Então isso é um pouco mais escuro. Essas são as regras. Lembre-se nos seus arquivos de exercícios no início dos arquivos de exercícios, há um chamado projetos de classe, e há um documento de palavras aqui. É isso aqui. Este é o projeto da classe 2. Então corra por isso. Aí está a margem que acabei de explicar, não precisa ser perfeita. Mais alguma coisa? Ignore o mapa, o espaçamento acima e abaixo do rodapé. Aí está o texto para isso. Certifica-te que está numa etiqueta P. Você poderia pular que os botões são apropriados. Basta colocá-lo em uma tag de parágrafo, e então estilo isso. Uma dica, você provavelmente vai precisar de um seletor composto. Isso é o que eu estou tentando sugerir para que você faça aqui. Cores de fundo transparentes, e é isso. Uma vez feito isso, faça uma captura de tela para garantir que ela esteja comigo no painel de tarefas. Basta tirar uma captura de tela e enfiá-la lá dentro. Dependendo de onde você está assistindo isso, nos comentários, nas atribuições, e envie-o para mim no Instagram. Mantenha-te honesta. Mande-o para mim e diga : “Olha, tenho este ficheiro e fi-lo sem trapacear.” O que eu quero dizer com batota é abrir os arquivos completos e/ou assistir o próximo vídeo onde eu passar por ele e mostrar como fazê-lo. Vai provar a si mesmo que você pode fazer isso. Compartilhe comigo. Certifique-se de usar esta hashtag, #BYOLweb. É isso. Vá fazer seu dever de casa. Vejo você no próximo vídeo. 29. Projeto do curso 02 - Rodapé COMPLETO: Bem-vinda de volta. Como foi a lição de casa? Ou você está sentado lá presunçoso pensando: “Sim, eu fiz isso. Sou um web designer. Eu quebrei aquele rodapé e parece ótimo.” ou você está sentado lá dizendo : “Você não é tão bom professor quanto pensa que é, Dan. Correu mal e o site não funciona no meu computador pegou fogo”, o que, de qualquer forma, eu estou muito feliz com. Porque é o começo, você é nova. Se você pulou, aqui é onde eu estou tuting, eu estou apertando meu dedo. Você não pode ver, mas eu estou tutting, apertando meu dedo, tut, tut. Devias ter feito o teu dever de casa. Mas se não o fez, tudo bem, estamos todos aqui agora, vamos ver como eu faria isso. Há algumas maneiras de fazer isso. Vamos fazer do jeito que eu fiz. Se você tem uma boa solução, isso é perfeito. Mas vamos ver. Vamos para o VS Code, e por onde começamos? Pergunto-me por onde começaste. Eu sinto que, eu quero colorir o fundo primeiro por algum motivo. Vamos para o rodapé. É fácil. Livrar-se disso, e nós poderíamos apenas digitar preto, mas nós poderíamos realmente apenas passar sobre isso e arrastá-lo para baixo para este canto inferior. Eu só estou arrastando para onde ele precisa ir, soltando e depois voltando e arrastando para baixo. Agora eu me sento [inaudível] cerca de 80 por cento, mas que tal isso? Salve isso. Visualização no navegador. É transparente, talvez o quão escuro nas costas não importa. Mas nós temos a idéia de que há um pouco preto e é transparente. Vamos editar os tiques e fora daqui. Vamos encontrar o rodapé. Vamos adicionar nossa tag p. Vamos encontrar o texto, lá está ele e colá-lo. Impressionante, guarde, veja como é. É onde estamos. Legal. Vamos fazer algumas coisas. Vamos talvez torná-lo menor e centralizá-lo horizontalmente porque essa é a mais fácil de fazer. Você poderia realmente apenas estilizar o rodapé. Você poderia dizer, eu quero que ele seja um tamanho de fonte aqui dizer 10 pixels, o que quer que você escolheu e que funcionaria. A razão pela qual eu sugeri fazer um seletor composto, então algo como rodapé que tem uma tag p nele, é para que se você tem como uma imagem dentro de lá também, ou dizer alguns links ou muitas coisas diferentes, você pode ser muito específico sobre isso. Você pode dizer que eu quero os textos de parágrafo que estão dentro do rodapé. Não importa como você fez isso, desde que funcionou. Vamos fazer o tamanho da fonte. Eu fiz 10 pixels. Vamos dar a isso um teste todas as vezes. Vamos ter certeza de que está funcionando. Vamos fazer o centro de alinhamento de texto. Como você está indo até agora? Há momentos ou é como, “Sim, eu fiz isso, eu acertei.” Vamos dar uma olhada, é perfeito. Eu fiz o meu um pouco mais escuro. Não era branco. Mas você não sabia disso. Cor Eu só estou fazendo isso porque eu quero que ele seja uma cor ligeiramente diferente. Você está mudando as regras, e eu quero que ele seja um cinza ligeiramente silenciado porque parece muito brilhante lá em baixo. Tudo bem, a próxima coisa que quero fazer é acertar o espaçamento. Como você fez isso? Você deixou o jogo de baixo com as alturas, brincar com as margens? É assim que vou fazer, vou me livrar da altura do rodapé. Lembre-se de onde, no início, nós adicionamos um monte de alturas, e estamos removendo tudo lentamente porque eles eram apenas úteis no início para dizer que enquanto estamos aprendendo, podemos ver as coisas, mas agora está tudo bem Deixá-lo assim porque eu sei mais tarde enquanto eu estou construindo, eu posso dizer, “Eu faço um rodapé P, ou para o rodapé.” Eu acho que você pode fazer isso para qualquer um. Eu me pergunto o que você fez. Deixe nos comentários, o que você fez. Se você gosta, “Ei, eu fiz essa outra coisa e ainda funcionou.” fazer isso porque então outras pessoas poderiam dizer, “Sim, eu também, eu fiz isso de outra maneira. Há uma distância melhor. Dan está escrevendo mal.” Estou feliz por isso. Por enquanto, eu vou fazer algum preenchimento fora do topo, 50 pixels, e o mesmo para o fundo. Inferior 50 pixels. Vamos verificar, e é onde eu queria chegar. Cumpri todo o meu relatório. Ignorar o mapa, fez espaçamento acima e abaixo, perfeito. Rodapé, a etiqueta p, cor de fundo, nós fizemos isso. Se o seu não funcionou, eu vou salvar este arquivo agora e colocá-lo nos arquivos concluídos apenas para recapitular que os arquivos concluídos porque eles são super úteis. Sob seus arquivos de exercícios, haverá uma pasta nele chamada, Arquivos Completados. Eu estou dando a eles separados enquanto eu estou trabalhando neste curso, mas eu vou despejar toda essa pasta lá quando eu terminar, e você vai encontrar este, e você pode ver estes são todos os diferentes vídeos que nós fizemos. Abra-os e você deve ver o código que eu tenho aqui e você pode comparar. Esse era o nosso projeto fotográfico acabado. Bem feito você. Vamos começar algumas coisas novas. 30. Como adicionar um botão simples de e-mail a um site usando o mailto em HTML: Oi lá. Este vídeo é tudo sobre a adição de um botão de e-mail realmente simples para o site. Nós tínhamos esse link que fizemos antes, e quando clicamos nele, ele foi para o Google, isso não foi tão útil. O que queremos fazer agora é quando clicamos nele, ela abre nossa campanha de e-mail, e como há um site pré-preenchido e as linhas de assunto feitas, é um bom pouco prático truque rápido, super fácil e rápido para adicionar esse tipo de para o seu site. Vamos entrar e fazer isso acontecer. Para que funcione, vamos fazer isso com o botão que temos aqui no momento em que ele não entrar no Google. Ele iria para outra página web, Eu quero obtê-lo para que quando você clicar no usuário, Eu estou neste site e a idéia, Eu quero clicar nele, e enviar um e-mail para sobre uma reserva. Eu estou fazendo um formulário, vamos fazer mais tarde no curso porque é muito difícil de fazer. Vai fazer isso mais tarde, mas por enquanto, um pouco de correio duas coisas vai ser agradável e simples, rápido e fácil de fazer. Tudo o que precisamos fazer é nós, fizemos este href mais cedo, então se você não fez este, procure por fazer um vídeo de hiperlink mais cedo, e tudo o que precisamos fazer é trocar este pote, então em vez de ir Google.com, vamos enviá-lo para o correio dois, dois pontos, então ele tem que ser exatamente como este, então você coloca o endereço de e-mail, sem espaços. Se quisesses enviar-me um e-mail, mandavas um e-mail ao Daniel para o meu website.com. Quando alguém clica nisso, eles vão mostrá-lo, alvo em branco ou não, realmente não importa neste caso porque ele vai carregar e sua própria coisa em branco, e é isso que deve fazê-lo funcionar. Vamos salvá-lo, vamos dar uma prévia. Vamos clicar nele, olhe para isso. Abriu meu sistema de e-mail na minha máquina. Eu estou fingindo que sou o cliente agora, então eu estou procurando na internet por um restaurante e tipo, bem, vamos fazer uma reserva. Clique no botão, isso abre, e por isso está abrindo correio, e quer executar um assunto e eu poderia dizer, eu poderia obter uma reserva? É uma maneira agradável, barata, fácil e rápida, então são cinco segundos para implementar, e é mais fácil do que um formulário. Algumas coisas que podem ser úteis é terminar uma linha de assunto como prefixá-la em, então o que você pode fazer, você pode fazer um pouco de extra para o final disso, então o email dois é legal, mas no final do.com, coloque um ponto de interrogação. Você tem que colocar um ponto de interrogação e um tem que ser soletrado como capital é e tem que ser sujeito. Um capital de ponto de interrogação é para assunto, e então você pode colocar um igual porque o tem que ser exatamente assim, então você pode apenas adicionar a linha de assunto, então você pode dizer reserva, ir. Vamos clicar em Salvar e vamos pré-visualizar. Vamos fechá-lo, ele é visualizado no navegador. Clique nele. Você pode ver muito do meu e-mail e colocar o assunto em legal. Você pode fazer outras coisas como obter o CC e você pode colocar cópia amigo e eu acho que você também pode. Eu não os conheço de cor, mas você pode ir e dar uma olhada nisso agora, tudo que você precisa realmente procurar é, procurar por e-mail para um HTML, e você vai encontrar uma página sobre o que você pode ou não adicionar, e serão coisas diferentes como esta. Imagino que será ponto de interrogação, CC é igual, você coloca outro endereço de e-mail e, mas isso é um palpite e apenas um bom truque barato para adicionar um e-mail, então é isso para este, vamos para o próximo se você estiver Pensando, esse será o último para esta noite, eu vou fazer um pouco mais amanhã. Faça o próximo, o próximo é incrível. Incorporar códigos que vão nos fazer parecer incríveis, é esse mapa, não vai demorar muito, ou te vejo em alguns segundos, ou te vejo amanhã quando acordar. Tchau agora. 31. Como adicionar o Google Maps ao seu site usando códigos de inserção: Olá, pessoas de boa aparência. Este vídeo, vamos olhar para algo chamado código de incorporação e vamos começar com este aqui. Vês isto é? É um mapa. Está no nosso site. É interativo. Mostra-nos onde é o nosso restaurante. É super fácil de fazer. Google faz todo o trabalho tudo o que fazemos é copiar e colar coisas, ok? Mais tarde adicionaremos um vídeo também, certo? Do YouTube ao nosso site e vamos adicionar esta coisa de reserva legal onde alguém pode fazer uma reserva. Nós não vamos fazer isso. Não estamos codificando. Não estamos estilizando. Estamos apenas indo para esses sites como YouTube, Google Maps e OpenTable e eles estão nos dando tudo o que precisamos. Nós apenas copiamos e colamos e ficamos incríveis, certo? Vamos entrar agora e descobrir como. Isto é o que queremos acrescentar, certo? É apenas uma captura de tela nos momentos. Na verdade não está funcionando, então nós queremos e adicioná-lo ao nosso site e a coisa legal sobre coisas como esta, nós vamos fazer o Google Maps aqui, mas você poderia ter um calendário do Google Maps aqui, uma planilha de O Google. O que mais? Você poderia ter bilhetes de Ticketmaster ou Eventbrite você poderia ter feeds do Facebook ou Twitter feeds. Todos eles usam o mesmo método. Chama-se código de incorporação. Na Alemanha, em algo chamado iframe. Primeiro, vamos pegar o código. Vamos usar o Google Maps, está bem? Eu acabei de carregar versão Nova Zelândia, mas ir para google.com/maps, ok? Eu fui para o .co.nz, mas de qualquer maneira não importa e depois digite o negócio que você quer listar, ok? Digite-o e encontre-o e digamos, então é para aqui que eu vou me mudar, certo? Estou muito animado, como Adare. Adare Manor é um grande estado chique. Uma casa senhorial ali. The Carriage House at Adare Manor parece um lugar muito legal para adicionar ao meu mapa fictício. O que eu vou fazer é clicar nele para que eu esteja apenas isolando aqui porque eu não quero todas essas coisas aqui também. Só vou encontrar a Casa de Carruagem na Mansão Adare. Porque o que você vir aqui vai ser o que está no seu mapa. Vai me mostrar os outros restaurantes. Ir para onde os restaurantes? Ele se foi embora. Algumas coisas que você precisa fazer quando você está fazendo um mapa é ampliar e reduzir, porque este é o tamanho se você quiser mostrá-lo em relação a como Dublin, ok? Que fica a quilômetros de distância, Adare Ireland, eu sou da Nova Zelândia. A minha mulher é irlandesa. De qualquer forma, então você pode decidir a escala, ok? Você pode ver a distância de condução entre Dublin? Dublin está lá em cima em algum lugar ou você quer realmente mapas localizados para que as pessoas possam ver a rua que está em muito perto. Você acerta, clique e arraste até obter a posição certa. Então o que você está procurando, agora eu vou mostrar a você como está no momento. Toda vez que dou aula e faço um vídeo, eles vão e se movem para onde está esse botão, certo? Sabe reclamar? Google muda para mim, você tem que desenterrá-lo e encontrá-lo. Se estiver em um lugar diferente, escreva nos comentários para que outros alunos saibam para onde foi. O que estou procurando é um código de incorporação. Onde está no momento? Está sob este chamado Compartilhar. Dá opções para compartilhar e você está procurando esse chamado Incorporar, certo? Embeded um mapa, clique nele. Então o que eu quero fazer é que você tem os tamanhos diferentes. Vou escolher um tamanho personalizado. Você poderia escolher um desses como tamanho personalizado. Agora, quão grande queremos que seja? Eu quero que seja, Eu sei que a largura do meu site é 1.024, então eu também poderia torná-lo largura, 1.024 mesmo. Quão alto? Estou apenas a adivinhar 500. Isso é pré-visualização no tamanho real. É assim que vai parecer, está bem? Uma vez que ele carrega eventualmente, incrível. Tudo o que eu preciso fazer agora é ir para copiar HTML e colocar isso no meu site. É muito fácil, tão bom. Pesquisando sobre isso vai nos fazer parecer muito bem se isso funcionar. Onde é que eu vou colocá-lo? Vou colocá-lo dentro do principal, então logo antes dele. Vou colocar um par de rotinas e vou passar por lá. Legal, então isso me dá meu iframe. Vamos ver se ele funciona direito sem qualquer, às vezes ele precisa de ajustes. Vamos verificar. Não consigo lembrar e pré-visualizar no navegador. Vou ver como é que isto vai correr. Você está pronto? Qual deles é? Sim, parece ótimo. Acho que empurrou para o lado, mas está lá, olhe para ele. Você pode ampliar, diminuir o zoom, as pessoas podem verificar, encontrar direções e fica bem no seu site. Nós não temos que fazer nenhuma dessas coisas hardcore. Google faz toda a força de trabalho duro. Agora, por que está tudo confuso? É principalmente porque colocamos um par de coisas. Uma é colocá-la dentro desta etiqueta principal, que eu esqueci. Tínhamos uma ferramenta de preenchimento, está bem? Vou deixar isso no curso porque, essas são coisas que acontecem e você fica tipo, “O que aconteceu então?” Eu sei porque lembre-se do nosso principal, dissemos mais cedo mais tarde, dissemos que adicionamos estofamento gigante. O que eu vou fazer é dizer, “Não vamos ter isso na principal. Vamos tê-lo depois em uma etiqueta.” Certo, que etiqueta? Vamos usar uma secção, está bem? Poderíamos, sim seção. Seção é uma coisa boa de usar, ok? O que vamos fazer é, você pode usar um div. Só explorando usando seções, certo? Ponha aí dentro. Ele vai resolver alguns dos nossos problemas porque está em um diferente, o preenchimento não vai ser afetado espero. Vá e isso consertou todos os nossos problemas, legal. Ok, então este nosso mapa, temos alguns problemas de preenchimento que precisamos corrigir, ok? Mas isso é fixe. Apenas despeje-o e parece incrível. Vamos consertar o estofamento e então eu vou te mostrar um pouco rápido através de alguns dos códigos de incorporação. O que eu vou fazer é aqui minha seção e eu vou dar-lhe um nome de classe, ok? Vou chamar este, o que vou chamar a este mapas, fixe. Por aqui, o que eu quero fazer é dizer se houver .maps, eu gostaria que ele tivesse algum preenchimento ou margem. Olhe preenchimento toda a margem vai funcionar. Vamos fazer fundo de preenchimento e quantos? Vamos colocar 100 pixels para ver o que parece. Aqui vamos nós. Um pouco de espaço lá. Minha imagem não é grande o suficiente para carregá-la. Se você está trabalhando em uma tela pequena, você provavelmente não vai ter problemas de imagem, mas aqui vamos nós. Vejamos alguns outros códigos de incorporação porque o processo é o mesmo. Faremos mais dois. Um muito comum é o YouTube. Ok, então vá ao YouTube, encontre um vídeo que você gostaria. Eu conheço um bom vídeo e leitura para realmente este para lançar, porque ele vai mostrar todo o meu histórico de pesquisa. O que Dan gostava de assistir? Não é tão ruim. Vamos fazer shows de carros e obras de renovação de casas. Você é como, “Por que há muitos programas de web design?” Porque eu gosto de fazer vídeos de web design não vê-los de qualquer maneira. Vamos adicionar um vídeo. Traga-o aqui no topo. É obrigado a ser um bom vídeo lá. Olha para este tipo. Ótimo, e vamos pegar esse. Ok, é um dos meus vídeos antigos nos meus outros vídeos. O que você está fazendo é encontrar o vídeo que você quer. Certifica-te de que tem um kiwi bonito, está bem? Depois de descobrir que você está procurando o botão de compartilhamento. Mais uma vez, isso pode mudar. O YouTube também muda as coisas o tempo todo, então procure o Compartilhar. Estará lá em algum lugar e irá para onde quisermos. Compartilhar link incorporar ver que um lá. Clica nisto, está bem? Este é o nosso iframe como antes. Você pode começar a partir da posição. Você quer os controles do jogador? Quer o botão “play “ou não? Eu ia copiar tudo isso. É só uma cópia, aqui está você e eu entro no meu código de estúdio. Onde é que eu vou colocá-lo? Vou pô-lo debaixo deste iframe. Sim, coloque aqui embaixo. Sei que vamos nos livrar dele e mostrar a vocês, por exemplo, colá-lo. Vamos ver se há algum problema. Vamos dar uma olhada. É o antigo. O novo parece assim. Há um mapa e um vídeo debaixo dele. Agora você pode fazer coisas como torná-lo uma largura de 100%. O que mais você pode fazer? Vamos dar uma olhada no código porque dissemos que seria altura e largura, ok? Vou fazer uma largura de 124. O que é que isso é igual? Nem sequer tenho a certeza. Posso apagar a altura? Acho que podes apagar a altura e deixá-la fazê-lo por ti. Não, você tem que descobrir qual é a proporção e torná-la maior. É um vídeo muito magro. Não sei o que é, então vou deixá-la por enquanto. É uma bagunça que meu cérebro não pode fazer agora, hora de passar noites tarde demais para matemática. Vamos dar uma olhadinha. Sim, adicionando vídeos. Eu só vou mencionar alguns outros agora que você pode ir e fazer. O Twitter faz a mesma coisa. Se você quiser adicionar seu feed do Twitter, adicione um pouco de vida ao seu site. Vá para o Twitter e eles têm um código de incorporação para que você possa incorporar um fluxo de seus tweets, ok? Você pode ir para o Facebook e colocar seu grupo no Facebook aqui, bem como em diferentes posts. O que mais você pode fazer? MailChimp tem um. Diga que você quer adicionar uma inscrição por e-mail, ok? Muito rápido e fácil. Vá para MailChimp, inscreva-se e eles lhe darão um pequeno código de incorporação que você pode simplesmente colar em seu site e eles vão fazer todo o trabalho pesado. Eles pegarão os e-mails. Eles confirmam para você. Eles os adicionarão a uma lista que você pode enviar e-mails ou um dos que eu queria mostrar era OpenTable. OpenTable, já não é grande aqui na Irlanda, mas eu não falo em todo o mundo. Mas de qualquer forma, digamos que você queira adicionar uma reserva, porque no momento em que temos essa coisa razoavelmente chata, enquanto isso? Talvez estejamos lá com um botão? Ok, mas digamos que se eles realmente querem reservar uma hora e um lugar e você não quer ter que codificar tudo isso, porque é realmente complicado. Pode ser, você pode ir para OpenTable e se você foi aceito em, digamos que você é o dono do restaurante, ok? Ou o web designer para o restaurante, você vai ter que fazer com que eles se certifiquem de que eles adicionem seu restaurante e tenham que saltar através de aros para dizer, “Sim, eu sou um restaurante e é um OpenTable.” O que você pode fazer então é que eles têm o criador de widgets, ok? Encontrei um restaurante novo, Filadélfia. Eu nunca estive lá. Mas este restaurante, porque está no OpenTable, permite que você crie um widget muito rápido e fácil, ok? Você pode escolher a ferramenta de tamanho. Vamos copiar o código, despejá-lo em seu site e esperar que ele não o quebre. Onde vou colocar o meu? Eu coloquei aqui embaixo. Cole, veja o que ele faz. Vamos dar uma olhada. Aí está, legal. Ele passa e alguém pode ir, Eu quero fazer uma reserva por agora e para duas pessoas às 19:00 PM e clique em “Encontrar uma mesa” e ele vai enviar um pedido de reserva para OpenTable. Eu acho que eu mostrei tudo isso, eu defini algumas vezes, mas eu queria compartilhar esse material de código de incorporação porque nem tudo tem que ser feito por você. Você pode ficar sobre os ombros de gigantes que têm fazer pequenos códigos de incorporação legal. Você pode arrancá-los e colocá-los aqui. Já falamos sobre outros? Um par de outros que eu uso é Eventbrite. Eu criei o meu negócio de sala de aula sentado baseado em Eventbrites. Incorporar códigos me permitiu fazer para algumas pessoas para pegar bilhetes e invadir meus cursos sem eu realmente ter que fazer muito. Vou passar agora e apagá-lo. Vou guardá-lo para este vídeo, mas vou apagá-lo para o próximo. Quando eu acordar amanhã e começarmos nosso próximo vídeo, esses caras vão sumir porque o mapa fica, mas o resto das coisas são apenas coisas que foram jogadas para aprender. Como é que foi boa gente? Verei no próximo vídeo. 32. Como colocar o site online na Internet com o seu próprio domínio: Ei amigo, é viver eu e você. Eu senti que esta manhã nós vamos começar o dia, nós vamos fazer um vídeo ao vivo porque eu sinto que nós estamos presos atrás da tela por muito tempo. Hoje é um dia muito emocionante, para lançar este vídeo é um vídeo muito emocionante porque nós temos que furar nossa internet, nossa internet. Nosso site on-line. Vamos fazer duas coisas. Nós vamos comprar um nome de domínio e obter alguma hospedagem e então nós vamos colocá-lo para cima e outras pessoas serão capazes de vê-lo. O nome de domínio é algo como www.adarerestaurant.com vamos verificar se ele está disponível e vamos comprar isso. Então precisamos de algo chamado hospedagem e isso é apenas um serviço onde eles vão dizer, nós vamos cuidar de seu site para você, suas imagens e seu HTML e CSS e vai cuidar dele e nós vamos certificar-nos de que é disponível para todos. Essa é a parte de hospedagem e o nome o nome do domínio é apenas o nome. Tudo bem, tempos emocionantes vamos pular atrás do computador novamente e ver se conseguimos arrumar tudo. Certo, antes de começarmos, quero mostrar o que fazemos no final. É isto. Agora é como se eu já tivesse visto isso antes. Nós fizemos isso. Mas veja, agora está em adarerestaurant.com. Na verdade, é ao vivo na internet. As pessoas podem ver. As pessoas vão começar a fazer reservas e a verificar-nos no nosso mapa. Tudo bem, é isso que vamos fazer. Vamos entrar agora. Tudo bem, então vamos começar isso. Vai ser duas partes, precisamos nos inscrever para nosso nome de domínio e nossa hospedagem. Fazemos isso juntos e, em seguida, precisamos descobrir uma maneira de conectar nosso VS Code com essa hospedagem para carregá-lo. Onde vamos comprar um nome de domínio e hospedagem? Cabe a você. Há muitos sites que fazem isso. Minha recomendação é um lugar chamado Bluehost, e é isso que vamos fazer neste vídeo, mas há muitas outras alternativas. Por que eu escolho Bluehost? Se você quiser ir para Bluehost, vá para BringYouRownLaptop.com/Blue e ele irá redirecioná-lo para lá. Eu gosto do Bluehost porque é o que eu uso. Eu também gosto porque duas razões para ambos ganharmos e eu tenho um acordo de afiliado com eles onde eu recebo uma pequena parte do seu cadastro então quando você se inscrever, eu fico um pouco. Você pode ir até mim se você não quiser, você pode ir para Bluehost.com, tudo bem. Mas se você usar BringYouRownLaptop.com/Blue, duas coisas acontecem. Eu ganho um pouco mais e você ganha um grande desconto na sua inscrição. Se usares isto, olha, é Bluehost e tem a minha cara lá. Fazemos algumas coisas junto com Bluehost. É um pouco agradável, eles fizeram um pequeno site para mim, o que eu não posso acreditar. A coisa legal sobre isso é que você começa o seu nome de domínio livre como parte dele e tem todas as coisas que vamos precisar para este e futuras aulas que eu tenho planejado onde vamos fazer WordPress. Não vamos fazer isso agora. Se você está procurando outras alternativas para hospedagem, há algumas coisas que você só precisa tomar cuidado. Não fique atento, apenas certifique-se de que está incluído. Você precisa de um domínio e hospedagem. Esses são os princípios básicos. Depois disso, seria muito legal se eles tivessem instalação WordPress realmente simples. Não precisa fazer isso por todo o curso, porque não vamos fazer isso. Mas se você planeja seguir em cursos posteriores, será super útil. As outras pequenas coisas para olhar para fora é algo chamado um certificado SSL. Certifique-se de que eles têm isso. A maioria deles tem agora e deve ser livre como parte de sua hospedagem, este Bluehost tem. Outra coisa nerd é ter certeza de que ele é um servidor Apache e que você pode executar PHP nele porque mais tarde neste curso específico, nós vamos executar algum PHP básico para fazer algumas coisas legais de validação de formulário. Se isso aconteceu todos vocês estão nele como o que ele está falando, basta usar Bluehost e me siga. Tudo bem, vamos começar. Vamos clicar em Começar agora. Certo, escolha o nosso plano agora. Sim, há sempre três, por que há sempre três? Para você, para esta aula, tudo o que precisamos é do plano básico. Você pode fazer o mais ou a escolha mais. Não é muito mais caro. Mas a razão que você faria é se eu estou apenas projetando um site, digamos que eu sou o proprietário do Adare Restaurant e eu não preciso ter 10 outros sites. Vou usar o básico porque é a grande coisa que é diferente aqui em baixo. Domínio estacionado, subdomínios, só significa que este aqui eu posso ser mais um web designer e dizer, tudo bem, eu tenho 10 clientes e eles estão todos usando o mesmo host. Eu tenho que comprar 10 nomes de domínio para adarerestaurants.com e então eu estou fazendo algo para o dentista do Dan e, em seguida, web design do Dan e, em seguida, mecânica de automóveis do Dan. Estou fazendo muitos sites para pessoas, que é onde você pode decidir usar este plus ou escolha plus para que você começa a fazer muitos sites usando o mesmo custo mensal em vez de, imagine como eu comprei um e então eu tive que comprar um segundo Um, eu já estou em US $5 por mês, então eu poderia muito bem ir para algo como isso. Você pode ligar mais tarde. No momento, vamos usar Select e vamos escolher um novo nome de domínio. Agora, nesta fase, você tem duas opções, três opções na verdade, seu nome de domínio, onde você pode escolher seu.com ou o que você quiser. Se você já tem um nome de domínio, digite-o aqui e Bluehost irá ajudá-lo. Basicamente, são duas coisas separadas. O nome de domínio é apontado para a hospedagem e se você já tem um nome de domínio, digite-o aqui, Bluehost irá ajudá-lo apontar para a hospedagem que estamos prestes a se inscrever. Se você não tem um, coloque aqui se você tentar e sair de onde está, porque como às vezes você gosta de verdade, eu não tenho certeza, aqui você vai. Eu não sabia como ativar isso, mas parece que quando você tenta deixar isso, ele diz, hey, não pode decidir sobre um nome de domínio, você pode fazê-lo mais tarde. Você só recebe um crédito e você pode adicioná-lo mais tarde. Se você já passou uma hora tentando descobrir um nome de domínio, volte mais tarde e faça isso. Como ativar esse pequeno pop-up, não faço ideia. Apenas mexa o rato por aí. Eu acho que se você for em direção a isso, riscando para fora, ele parece lançá-lo. Agora vamos verificar se o Restaurante Adare está disponível. Vamos clicar em Avançar. Eu acho que Adare, é uma palavra estranha, de qualquer maneira, então ninguém tem, sua disponível que é incrível. A próxima coisa a fazer é obviamente você sabe o que fazer lá. Detalhes do pacote. O preço que temos está bem. Acho que são 2,95 para os EUA. É um pouco menos em euros, mas isso é baseado em 36 meses, então três anos e você pode ser como uau, grande compromisso. Você pode descer para 12. Só vai te custar mais por mês que depende de você. A outra coisa a pensar é estes, agora isso depende de você ter um pouco de leitura e o principal que eu vou falar é a proteção de privacidade do domínio. Quando você preenche os detalhes de um nome de domínio como este material, na verdade é um conhecimento de domínio público. As pessoas podem entrar e descobrir quem é o dono do nome de domínio e descobrir o endereço. O que as pessoas fazem, não eu, é que algumas pessoas colocaram um endereço falso que nunca ouvi falar disso antes. Mas outra maneira é fazer essa proteção de privacidade do domínio. Eu não tenho idéia de como eles fazem um custo mensal que bloqueia as pessoas, mas isso acontece, você tem que entrar em contato com Bluehost para obter a informação. Simplesmente não está facilmente disponível. Mas leia um pouco disso. Eu não uso nenhum desses. Eles são apenas extras opcionais ter uma leitura através deles. Eu recebo um pouco mais eu leio sobre algumas dessas coisas e assim ter um pouco de ler através de si mesmo e decidir se eles são certos para você e o que mais. Não preciso da hospedagem de e-mail. Detalhes do cartão de crédito. Assine sua vida, preencha todos os detalhes e eu o verei em um segundo depois que você passar por esta página, farei o resto. Muito bem, esta é a página em que acabas. Lembre-se, se você estiver assistindo isso no futuro, tudo pode ser um pouco diferente, mas devemos acabar em um lugar semelhante. Vamos definir nossa senha para a conta. Farei isso sem você olhar. Você desvia o olhar, promete, e te vejo em um segundo. Senha completa. Vamos fazer login. Tudo bem, eu vou para o meu login de hospedagem e eu vou entrar. Te vejo em um segundo. Tudo bem, ele está tentando nos fazer instalar o WordPress, que é apenas uma maneira diferente de construir um site. Você não está realmente, bem você está construindo, sim, mas usando modelos. O que queremos fazer é pular este passo para baixo. O seu pode ser um pouco diferente. Eles mudam isso o tempo todo. Eles estão nos dizendo aqui que eles vão colocar a instalação do WordPress em um domínio temporário. Nós não vamos usá-lo, então vamos pular, parar de construir, porque é parar de construir esse site WordPress nós vamos apenas para a nossa conta de hospedagem. Tudo bem e este é o seu painel. Começando. Não quero comprar agora. Não, obrigado. Tenho certeza que não quero. Muito obrigado. O que eu quero fazer agora é fazer upload do meu site. A próxima coisa que queremos fazer é mostrar-lhes duas maneiras de enviar seu site para seu novo domínio. Usaremos as línguas do homem das cavernas, super simples e não podem ser quebradas. Depois, há a maneira de fazer isso automaticamente diretamente do código VS, o que é útil, mas um pouco mais difícil de configurar. Estamos à procura do Gestor de Ficheiros. Pode não estar aqui, quando você vai para aqui, eles podem mover isso um pouco, mas você está procurando o Gerenciador de Arquivos em algum lugar. O Gerenciador de arquivos vai carregar. Essa coisa grande se abre. Isto é olhar para, lembre-se antes de termos algo chamado local. Deixa-me mostrar-te. Na nossa área de trabalho criamos esta pasta local chamada Projeto 1, e dentro dela está o nosso site. O único problema é que temos uma página de índice e podemos vê-la, mas o resto do mundo não pode. Toda hospedagem é que há uma empresa como Bluehost que diz, vamos pegar esses arquivos e vamos compartilhá-los com o mundo e vamos garantir que ele está ao vivo e conectado ao seu nome de domínio. Quando as pessoas vão para adarerestaurant.com, eles vão ser mostrados este índice e eles prometeram ter sempre um tempo de 100 por cento para que todos possam vê-lo o tempo todo. O que acontece é que esta é a estrutura de pastas que você obtém. Seu site é mantido neste chamado public_html. Clique duas vezes em public_html para entrar nele. Este é o que está no seu site no momento. Não é o que precisamos apenas , tem um site reservado aqui para nós. Vamos selecionar tudo e excluí-lo. “ Selecione tudo” e no topo aqui “Excluir”. Vamos adicionar tudo isso à exclusão. Deixe no lixo. Você pode colocar no lixo, é com você. Mas agora eu tenho um arquivo vazio. Agora quero fazer upload de algumas coisas. Lembre-se que estamos no public_html. Vamos fazer upload. Aqui podemos arrastar arquivos ou clicar neles um de cada vez. Selecione o arquivo, vamos fazer o índice, “Abrir”. Não vai funcionar a menos que tenhamos todo o resto dos arquivos. Nós [inaudível] meio trabalho. Precisamos fazer o CSS e o HTML. Ou você pode simplesmente arrastá-lo, é com você. Você não pode arrastar pastas para essa coisa por algum motivo. É por isso que é um pouco das cavernas fazendo assim. Mas tenho o meu índice e o meu HTML carregados. Agora eu quero adicionar uma pasta Imagens e carregá-las separadamente. Vamos voltar. Eu tenho esses dois e só precisamos reconstruir isso. Precisamos desta pasta chamada imagens. Certifique-se de que está escrito exatamente o mesmo. Eu vou fazer uma pasta, colocá-lo em, “Criar pasta”. Abra clicando duas vezes nele, faça upload de algumas coisas para ele. Encontre nossas imagens. Não tenho muito, dois. Vou arrastá-los para o outro lado. As imagens demorarão um pouco mais para serem carregadas. Estou em uma internet terrível aqui, então, está indo muito rápido. Eu sou o web designer que está trabalhando na sombra ao lado das ovelhas, com Internet terrível. De qualquer forma, é rápido o suficiente. Vamos voltar. Estamos lá dentro? Sim. Volte para public.html apenas para ver, você tem todos eles lá. Vamos dar uma olhada. Você está pronto? Este é um grande momento. Vou para uma nova janela. Vamos digitar adarerestaurant.com. Você está pronto? Segure o lugar. Isso é como um [inaudível] ir, faça carregar. Há um mapa. A coisa boa sobre isso é que você agora, como um estudante pode ir para adarerestaurant.com e provavelmente estará aqui. Avise-me se não for. Porque eu não paguei minhas taxas de hospedagem, ele pode vir para baixo em algum momento, porque por mais que eu goste deste site, ele não serve qualquer propósito real além de aprender. Essa é a coisa legal sobre isso, é que agora qualquer um pode ir e ver que você está. Você pode enviar para sua mãe, você pode enviar para seus amigos e dizer, vá ver meu site. Você pode começar a postar nas redes sociais, eu fiz um site. Eu fico animado porque mesmo que seja apenas o meu, eu fiz um zilhão de sites, e há apenas aquele momento, é como o nascimento do seu site. Está vivo, todo esse trabalho duro, outras pessoas podem ver. O problema é que ninguém vai realmente ver isso. Ninguém vai encontrar este site, a menos que eu comece a compartilhar e contar às pessoas e adicioná-lo a listas, e esse tipo de coisas. Mas está vivo, é excitante. Uma coisa que você pode encontrar quando você começar é que, surpreendentemente, eu suponho que durante este curso nós íamos fazer o upload aqui, comprar nosso nome de domínio. Os nomes de domínio demoram muito tempo para serem preenchidos. Muitas vezes você precisa esperar por um dia ou algumas horas para adarerestaurant.com trabalhar. Estou realmente surpreso com o quão rápido Bluehost conseguiu isso. Não sei se é só porque eles são incríveis. Levei entre gravar isso e realmente fazer aquele lançamento lá, eu não sei, cerca de 15 minutos assim. Isso é bastante incrível. Se você vai para o seu host e seu nome de domínio e você tem danswebdesign.com e ele ainda não está carregando está chegando com não reconhecido ou não pode encontrá-lo, dar-lhe o máximo de um dia. Se ainda não estiver funcionando após um dia, entre em contato com o Bluehost. Bluehost são incríveis no atendimento ao cliente. Essa é a razão pela qual estou muito feliz em enviar as pessoas para o seu caminho porque suporte Bluehost 24 horas é realmente incrível. Onde estamos? Esses caras, você pode ligar para eles, você pode usar chat ao vivo, você pode enviá-los por e-mail. Eles são loucamente rápidos em voltar para você. Não é um cheque de animais de estimação, é apenas mais, nem todos os negócios são tão bons como este, eu gostaria que mais fossem. O nome de domínio veio através. Talvez tenha que esperar um pouco. Eu só quero entrar aqui rapidinho, porque eu disse para esperar um pouco. Na verdade, você não precisa, você tem que esperar um pouco para que o nome de domínio seja preenchido, mas há um nome de domínio temporário que você receberá. Eles provavelmente enviarão três e-mails; sua conta se inscreve, alguns detalhes como este. Verifique todos eles e você encontrará um deles que tem essas informações importantes da conta. Este é o que você pode usar temporariamente. Porque se você está um pouco deflacionado porque gosta, eu tenho um nome de domínio e não funciona. Use isso, copie e cole isso no navegador. Esta é uma retenção temporária para o seu nome de domínio que mais tarde se tornaria ativa. Apenas use isso. O seu não será adarerest, o seu será qualquer nome de domínio que você estiver usando, então isso será diferente para você. Vamos voltar para o vídeo. Novamente, se você tiver algum problema com isso, com a hospedagem, você pode entrar em contato comigo e eu vou ajudá-lo o melhor que puder. Mas porque isso é mais coisa do Bluehost, e eles mudam as coisas e movem as coisas, pode ficar um pouco, será mais fácil para eles e mais rápido provavelmente para eles para ajudá-lo. A casa é onde começamos. Vamos apenas recapitular. O que Bluehost quer que você faça é se inscrever no WordPress. Ignoramos isso e excluímos as coisas do site. O que você quer é o Gerenciador de arquivos e basta recriar as pastas e carregá-lo manualmente. Outras partes interessantes sobre o seu anfitrião estão sob este Avançado. Clique nisso, você verá tudo isso novamente, mas há algumas outras coisas úteis aqui, depende de quão nerd você quer ir. Você pode configurar seu endereço de e-mail a partir daqui, você pode configurar o rastreamento de quantas pessoas já foram para você site, todos os tipos de coisas legais. A outra coisa é, algo chamado de certificado SSL será criado e aplicado a ele mais tarde. No momento, se formos para adarerestaurant.com, você verá que ele diz não seguro. Isso é só porque ainda não foi feito e feito. Isso se tornará uma carta segura. Se você vai para o seu site, ele diz que este é um site desonesto procurando. É porque a segurança ainda não foi colocada. Está tudo bem para você olhar. Tudo bem para qualquer um olhar, porque não é malicioso. Mas vamos precisar estar lá eventualmente, porque o Google não gosta de sites não seguros. Mas isso vai acontecer automaticamente para você. Caso contrário, entre em contato com o Bluehost e peça a eles para ajudar, mas parece ser um processo automatizado com eles. Eu prometi a você que faria o longo caminho que está usando cPanel e Gerenciador de arquivos, e atualizá-lo manualmente. Agora seria bom apenas estar em código VS e apenas enviá-lo automaticamente. Vamos fazer isso agora. Este vídeo é épico, certo? É bastante longo. Vamos fazê-lo no próximo vídeo, separá-lo. Te vejo em um segundo. 33. Como conectar o Visual Studio VS Code usando sftp ao host bluehost: Oi lá. Neste vídeo vamos usar o VS Code para se conectar diretamente ao nosso host, em vez de usar qualquer outra coisa. Então, estamos usando seu site [inaudível] feito dentro VS Code, vamos instalar este plugin chamado SFTP. Isso vai me mostrar tudo no meu site muito bem, e quando eu quero fazer upload de coisas, eu basta clicar com o botão direito do mouse e dizer Fazer upload e acaba no meu site símbolos. Então, neste vídeo, vamos nos conectar diretamente do VS Code. Vamos usar algo chamado SFTP, e é uma das extensões como fizemos anteriormente. Lembre-se que fizemos extensões para HTML Hint e Lifesaver. Como os outros, SFTP é o mais comum no momento. É o que usei e parece funcionar muito bem. Tem 4,5 estrelas, e tem um pedaço de downloads. Então, você vai verificar quando você está fazendo isso. Há outros aqui que têm listas de estrelas, é o que vamos usar para o momento. Leia um pouco como funciona, eu vou te mostrar como se faz. O principal para este é o uso. Diz que tens de fazer isto. Você precisa abrir a linha de comando, o pellet de comando e executar essa coisa, e eu vou te mostrar como fazer isso em um segundo. Mas, basicamente, aí está , é onde precisamos colocar os detalhes. Vamos instalá-lo primeiro, dê um segundo. Está instalado, nada acontece. Você deve ter notado que há um novo ícone aqui que ainda não funciona, temos que configurá-lo. Isso é o que eles vêem aqui. Eles dizem, faça isso, execute o atalho no Windows ou no Mac e, em seguida, digite isso. Então vamos fazer isso, e o caminho mais longo é em View and Command Palette. Então, Command Palette é que você é capaz de dar comandos a esses plug-ins. É uma maneira grosseira de fazer isso. Depende, você pode estar feliz com a linha de comando do terminal, algumas pessoas não estão. O que eu quero fazer é que eu quero digitar em SFTP, ele deve pré-preenchê-lo. Para configurar este seja o software, isso é o que precisamos digitar. Vamos lá. Vou fechar meu HTML e meu CSS. Vou até fechar isso clicando duas vezes nele, então é bom e limpo. Este pequeno arquivo JSON é os detalhes que você precisa preencher para que esta coisa funcione. Agora você, “Onde eu consigo todos esses detalhes?” Eles são as coisas que vieram através de um e-mail. Eles vêm através de um e-mail do Bluehost ou, se você acessar sua conta Bluehost, você os encontrará em Início, vá para Avançado, vá para Contas FTP e você os encontrará na parte inferior disso. Este top aqui é aquele que é gerado automaticamente e que tem que ter todos os detalhes nele. Você clica em “Configurar Conta FTP” e aqui estão os conceitos básicos que você precisa. O nome de usuário, o servidor que está indo e a porta. Alternativamente, se você não quiser usar este plugin que estamos usando no VS Code, se você está mais familiarizado com o FileZilla ou Cyberduck para Mac, você pode usá-los. Um instruções legais de como usá-lo, é apenas outra maneira. Então vamos copiá-los e colá-los. O que temos? O nome do servidor, chama-se Bluehost. Isso não importa, você pode digitar qualquer coisa lá. No próximo, o endereço do host é realmente importante. No momento, é hospedagem local, na minha máquina, não é o que eu quero. Vou pegar este aqui, FTP. Agora, se você estiver usando algo diferente do Bluehost, às vezes ele não pode ter o FTP na frente dele e às vezes tem. Então, se você está usando alguma outra empresa de hospedagem, às vezes ele está lá, FTP, às vezes não está, neste caso é. Agora eu acho que neste caso estamos apenas usando FTP não SFTP. Vamos verificar. Eu acho que você pode usar qualquer um neste caso. Eu coloquei minha senha, onde está minha senha? Realmente não tem, é uma opção. Lembro-me disto quando estava a prepará-lo primeiro. Isso precisa de uma senha para entrar, senha. Então você apenas digitá-lo dentro das aspas, dois-pontos e sua senha vai entre aspas bem e termina com uma vírgula. Então temos um nome, temos um host, temos uma senha, temos FTP, o número da porta, muitas vezes é 22 no caso de Bluehost. Eles são 21 lá. Seu nome de usuário, onde está meu nome de usuário? Há ali. Adareres, e o caminho remoto. Neste caso, dizem que o meu caminho remoto é, agora, não é isso. Geralmente para praticamente todas as empresas de hospedagem que eu já lidei com a sua, deixe-me ter um pouco de olhar, gerenciador de arquivos. Lembra-se de public_html? Esse é o que queremos. Lembra-se desta? Essa é a pasta. Porque no momento estamos entrando nessa grande diretiva que não precisamos, queremos encontrar esse public_html para chegar ao nosso site. Então aqui, vamos para public_html e este, um é com você. Upload-on-save eu sintonizá-lo para falso só porque o problema de tê-lo como verdadeiro significa, toda vez que eu apertar “Salvar” lembrar o arquivo salvar tudo, ele vai tentar e empurrar meu site ao vivo para adare-restaurant.com. Se eu estiver faltando um cinto com ele e ele estiver todo quebrado e meio acordado, o site vai estar meio acordado ao lado. Então eu defini o meu como falso. De qualquer forma, isso é o que aquele cara precisa. Então nós vamos salvá-lo e nós vamos fechá-lo, e nós estamos indo para esta opção aqui para o nosso SFTP. Você pode ver nosso pequeno host lá, você vai deixá-lo cair, esta pequena barra azul vai passar por um tempo até que ele se conecte ao seu servidor. [ inaudível] é claro que ele faz. Lá vai você. Então ele encontrou meu índice, meu estilo e minhas imagens. O problema é que isto não está no meu computador. Isto é realmente olhando para esta pasta aqui no Bluehost que está conectado ao meu URL, que é este. Isso é o que isso é. Então, se eu entrar aqui agora e clicar nisso, e eu clicar nele com o botão direito do mouse e eu disser excluir, tenha muito cuidado. Você vê no fundo aqui que diz: “Tem certeza de que deseja excluir sua página de índice?” Eu estou bem com isso, então eu vou colocar um backup em um segundo. Mas como eu excluí aqui, meu site vai pirar porque ele não tem uma página de índice. Vou apertar “Refresh”. Vamos dar uma olhada aqui também, você vê isso cantarolando. Está pensando, está checando o servidor. Nunca é um processo rápido. Acho que se foi, depois apaga. “ Tem certeza?” Excluir. O arquivo não existe. Legal. Essa coisa poderia levar um pouco de atualização, mesmo que eu cliquei em “Atualizar” ele ainda estava listando. Lá, ele se foi. Então, agora, se eu for ao restaurante Adare, diz, “Ei, eu estou pirando. Não tenho página de índice.” Essa é a razão pela qual precisamos do index.html. Está me mostrando outras coisas aqui. Tenho folhas de imagens, mas isso não ajuda muito. Então, como recuperar as coisas? Digamos que eu estou no meu arquivo Explorer, este top, e aqui eu vou indexar página e eu estou trabalhando nisso. Este Explorador é o meu material local, este aqui em baixo, é o controle remoto. Remote é considerado o disco rígido do Bluehost. Isso é para o seu site, como para outras pessoas, este é você. Então faça o seu trabalho localmente e depois empurre-o ao vivo. Para empurrá-lo ao vivo, clique com o botão direito do mouse nele e diga Carregar. Lá vai, e deve estar carregando. Esperemos que em um segundo, eu possa ir para adarerestaurant.com e eu deveria estar de volta. - Legal. Agora, isso vai funcionar bem para metade de vocês e o resto de vocês que tem hospedagem em outros lugares vai ser, “Ei, não está funcionando, foi tão perto.” Como consertamos isso? Algumas coisas são que você precisa abrir a mesma coisa que antes, para voltar para fazer as configurações. Isso é muito estranho. De qualquer forma, é apenas a forma como plug-ins funcionam em VS Code. Eu posso ir para o View, ir para o Command Pellet, e é a última coisa que eu fiz, e eu posso abrir este arquivo JSON. Se você não consegue se lembrar de como fazê-lo, você vai para a Extensão, eu vou fechá-los, e ele me mostra os que eu ativei e você clica nele, e eles lêem a documentação novamente sobre como fazê-lo . Você pode ver que acabamos de fazer algumas coisas básicas, há muito mais que podem entrar lá. Você pode fazer Pastas Watcher que é legal. Há muitas coisas que você pode precisar fazer para que funcione, talvez na sua escola, na sua universidade ou no seu trabalho. Então, o que estamos fazendo? Oh, sim, problemas. Então eu vou fechar todas as extensões, e eu quero ir para View, Command Pellet e abrir isso novamente. Se não funcionar, algumas coisas que você pode tentar facilmente você mesmo, é às vezes que seu nome de usuário tem um endereço de e-mail. Pode ser isso em adarerestaurant.com, mas às vezes pode conseguir que alguns anfitriões façam isso. Às vezes você não precisa do sublinhado de barra pública. Ele pode ser levantado por si só. Deixe a barra aí. Às vezes isso funciona. Às vezes ele precisa ser SFTP. Às vezes, você pode errar sua senha. Falamos sobre o host às vezes ele não precisa do FTP na frente, você pode excluir isso às vezes. O nome do host não faz nada. Apenas ambos são listados nesta pequena pasta aqui. Se isso ainda não funcionar, copie isto. Na verdade, vou copiar e colar isso em um documento do Word agora e colocá-lo em seus arquivos de exercícios. O que você faz é entrar em contato com o seu anfitrião. Diga com GoDaddy, seu HostGator ou outra pessoa. Basta ver o ticket de suporte e dizer, “Ei, eu tenho uma conta com você e não consigo conectá-la. Você pode me dizer o que colocar nisso?” Eles podem dizer, “Oh, você está fazendo isso, você está errado. Você tem que colocar na porta 23 ou 22 ou qualquer outra coisa.” Ou eles vão te dizer como mudar isso. A maneira de testá-lo é, uma vez que você fez isso, salve-o. Isso pode ser algo que você fez errado também. É ir para arquivo salvar, clique sobre isso, e clique em Bluehost, e espero que isso eventualmente irá preencher com as coisas em seu site. Agora o que pedir que você tente se ele ainda não está funcionando e FTP pode ser bloqueado por seu provedor de internet, não seu provedor de internet, mas digamos que você está em, eu não sei, um café ou um hotel que você está tentando fazer isso em? Às vezes, a infraestrutura lá, a rede Wi-Fi, bloqueia ervas daninhas, coisas assim, porque você está tentando se conectar com um servidor on-line e eles surtam às vezes. Então, se isso estiver acontecendo ou pelo menos o seu estiver quebrado, tente se conectar a um Wi-Fi diferente. Diga que está no trabalho, tente em casa. Se você estiver em casa, experimente na casa de um amigo e tente exatamente a mesma coisa, porque às vezes é a sua internet que está errada. Não são os detalhes, não é o VS Code. Às vezes tenho que fazer um hotspot no meu telefone, como se chama? Tethering em um iPhone ou um hotspot móvel no meu telefone Android, e eu conecto meu laptop a isso e vou tentar e funcionou bem. Se ainda não estiver funcionando, entre em contato com o host. Eles estão lá, eles são muito rápidos, Bluehost é muito bom em voltar para você e ajudá-lo. Mesma coisa. Vou colocar isso em um documento do Word agora, tentar lembrar [inaudível]. Vou colocá-lo em seus arquivos de exercícios em um segundo e ele estará Projeto 1 e eu vou chamá-lo de Código FTP e é isso, eu liguei-o, está online. É empolgante que as pessoas possam vê-lo, podemos atualizá-lo, e se precisarmos fazer alguma reparação, vamos enviá-lo para o nosso site. O que você precisa fazer agora é clicar nele, você pode realmente pegar um pedaço de coisas, você pode dizer que eu quero imagens e tudo isso, clique com o botão direito do mouse em todos eles e dizer Upload, e ele será enviado para o seu host. É isso para o Projeto 1, terminamos. É o mais longe que vamos chegar com este. Vamos avançar para outro projeto, até mesmo Projeto 2. Há oficina de reparação de bicicletas, vamos adicionar muito mais detalhes a ele. Nós vamos adicionar formulários, vai ser emocionante, vai ser linhas para o seu intervalo. Sacuda, eu também vou e vamos nos preparar para o próximo projeto. Te vejo em um segundo. 34. Configurando o nosso projeto de web design e discutindo os nossos tópicos: Olá a todos. Este vídeo vai ter duas partes. Vamos falar sobre as coisas que vamos realmente fazer nesta próxima seção do curso e também teremos esse tipo de coisas legais configuradas como a Pasta Remota e conectando o CSS, esse tipo de coisas. Vamos fazer isso primeiro, vamos arrumar tudo e nos preparar, e depois vamos passar por tudo o que vamos fazer. No momento eu estou no meu Explorer aqui. Atualmente, estamos usando a pasta local chamada Projeto 1. Eu não quero colocar um segundo site aqui. Porque não queremos indexar arquivos, porque não podemos. Vamos ao “File” e vamos ao “Open”. Depende de como você gostaria de fazer isso. Vou ao meu “Desktop” e criar uma nova pasta. Eu vou para o “Projeto 2". Excitante. Clique em “Abrir”. Nada realmente acontece. Tenho uma pasta vazia, volta à tela de boas-vindas. Esboço. Vou fechar clicando nele. Vou criar um arquivo de Índice e Estilos e conectá-los. Arquivo, Novo Arquivo, este vai ser salvo e vai para o lugar certo. Legal. Index.html. Vamos soletrar direito. Tudo tem que ser minúsculo. Vamos criar um segundo arquivo. Este vai ser salvo. Vai chamar-se Style. Style.css ou principal com estilos. Vamos ligar os dois. Na verdade, vamos movê-los ao longo, agarrando a aba. Vamos deixar tudo bonito e bonito antes de começarmos. Vamos ligar dois. Lembre-se, ponto de exclamação, aperte “Return”. Coloca tudo lá dentro, por baixo disto. Não tem de estar por baixo disto. Não sei porquê, sinto que o título tem de estar lá em baixo, mas não tem de ser. São alguns problemas de ordem. Mais tarde, mas no momento realmente não importa com estilos, desde que seja antes do fechamento da Cabeça. Então vamos fazer a ligação. Vamos fazer uma ligação de CSS. Vamos escolher o estilo. Lembre-se, apenas adivinhei, mas é o que temos. É isso? Acho que é isso. Eu gosto de rodar Open Editors porque acho isso confuso e esse sou eu. Vamos falar sobre as coisas que vamos abordar neste curso. Vamos acabar com isso. Este é o design que fiz no Adobe XD. Se você é como, o que faz este programa XD? É um software diferente e é apenas o design. Não é codificação, não é um site de verdade. É como uma maquete. É um programa muito bom. Eu tenho um curso sobre isso, se você quiser ir dar uma olhada. Procura o meu curso XD. Mas o que vamos cobrir neste? Vamos fazer coisas como gradientes em segundo plano. Há um pequeno ali. Vamos construir este tipo de cartas. Onde temos, vamos olhar para os Ícones. Vamos olhar para a criação desses pequenos módulos. Provavelmente a maior coisa que vamos abordar neste curso é algo chamado Flexbox. Nós estaríamos instalando divs no momento e movendo-os por aí. Nós vamos ter que tipo de fazer algumas coisas legais onde todos eles se empilham ao lado do outro e bits à esquerda e bits à direita eo último projeto para mantê-lo bastante simples para que possamos encenar o material para fora. Não vou olhar a minha lista aqui. Vamos começar com um reset CSS. O que mais vamos fazer? Vamos olhar para comentar no código. Já olhamos para isso. Altura mínima. Flexbox é o grande. Vamos fazer fontes porque no momento em que temos aquela Arial. Vamos fazer fontes fantásticas do Google e vamos olhar para diferentes tamanhos de fontes, coisas como Em e Rem. Vamos olhar para as imagens corretamente, como criá-las. As diferenças entre JPEGs e PNGs. Vamos fazer esses botões em vez de apenas texto. Tem um ali. Vamos adicionar algumas sombras. Há uma sombra sobre este sujeito aqui. Há cantos arredondados. Outro par de grandes é fazer um menu suspenso. Quando você reservar on-line, que vai cair para baixo e vai realmente ter uma navegação adequada. Vamos olhar para a criação de um Formulário em vez apenas aquele mailto realmente simples que fizemos no último. Isso vai ser tudo para este projeto O que mais cobrir? Projeto três, lembre-se vai ser um site responsivo. No momento, este não vai se ajustar para celular. Vamos falar disso no terceiro projeto. O quarto vai ser bootstrap. Tudo bem. Pronto, pronto, vá para este novo projeto. Vejo você no próximo vídeo. 35. O que é uma redefinição de CSS zerando Eric Meyers vs. Normalize: Oi lá. Neste vídeo, vamos discutir coisas como normalizar, reiniciar, HTML5, Reset do Dr. Eric Meyer. Basicamente, eles são todos a mesma coisa. Há todos os chamados CSS Reset. O que eles fazem? A versão rápida real é que, por padrão, muito sobre tags como h1, h2. Como algumas de nossas listas em tags p que terão estilo aplicado a elas. Um CSS Reset, você edita seu CSS para fazer com que todos pareçam iguais. Estes ainda são h1's, ainda h2's e ainda listas não ordenadas. Mas todos eles parecem iguais e nós, como designers, começamos a passar e decidir quais os tamanhos, qual é a fonte, qual é o peso, sem deixar os padrões ou lutar contra eles. Isso é um CSS Reset, também nota neste vídeo chegando. Eu digo Eric Ries muito em vez de Eric Meyer, porque eu estou lendo o livro Eric Ries sobre Lean Startup pela terceira vez e ele está no meu cérebro. Então eu vou alternar entre esses dois nomes ao longo deste vídeo. Desculpe, Eric Meyer, vamos entrar. Tudo bem, eu sei que acabamos de criar esses arquivos, mas está fechando. Nós vamos criar um arquivo como um jogue fora primeiro, apenas para provar os pontos e então nós vamos voltar a aplicá-lo ao nosso projeto real. Vamos criar dois arquivos, adicionar dois novos arquivos. Vamos salvá-lo. Este vai ser chamado delete me 1, ou apenas chamá-lo deleteme.html. Eu uso a palavra delete me então eu dou permissão para meu eu futuro para fixar isso sem sequer verificá-lo. Você sabe que você faz esses arquivos e você os tem em sua máquina, você gosta dessa ligação? Se eu chamar isso de me excluir, eu me dou permissão, excluí-lo sem sequer verificá-lo. Eu vou salvar isso e eu tenho deleteme.css. Temos dois, deleteme.html, deleteme.css. Vamos conectá-los, separá-los como o último. Coloque seus meta dados e conecte-os, é uma boa prática. Ok link, CSS. Não se chama estilo neste caso. Chama-se delete.css. Tudo bem, então o que essa coisa CSS Reset que você fala? Basicamente, sempre que fazemos um documento em HTML que foi material predefinido. Então, se eu fizer um cada um, e eu chamar este, meu título e eu apertar Salvar e então eu visualizá-lo e por favor note que não estava funcionando para mim um segundo atrás, eu não consegui encontrar aquele pequeno botão. Se você não conseguir encontrar esse pequeno botão, basta clicar com o botão direito do mouse em sua página aqui e dizer abrir com servidor live. As alegrias dos plug-ins. Um pouco rápido para isso. Eu tenho que abrir aqui. Sabemos que se colocarmos esse título, será um grande e ousado Times New Roman preto. Há carícias por cima dela. Há algum espaçamento à esquerda. Definitivamente há algum espaçamento por baixo. Aí estão os padrões. Em algum lugar nos dias da Internet, alguém decidiu que é assim que um h1 deve ser o tempo todo. A primeira coisa que faço como designer, é que quero alterá-lo e é aí que entra o CSS Reset. Quero que o título pareça exatamente o mesmo que o título dois, exatamente o mesmo que um parágrafo. Eu decidirei que tamanho eles são, não tipo de luta contra os padrões. Vamos olhar para fazer isso para ver o que ele faz primeiro. Aqui temos o nosso rumo um. Vamos colocar no segundo lugar. Agora, colocar em prática um cabeçalho leva como tarefa, ok, porque você tem que pensar em algo para colocá-lo em como eu faço isso o tempo todo. Então colocamos alguns textos falsos chamados Lorem ipsum. Você provavelmente pode ter se deparado com ele novamente em lugares diferentes. Mas basicamente se eu digitar em lorem com um e, ok e bater em retorno e coloca em um monte de palavras latinas misturadas. Eles jogam palavras, mas estão todos meio confusos. Mas como um tipo de legal como, eu vou salvá-lo, você vê, é apenas um lugar agradável pequeno titular. Esse é um pouco longo. Vou fazer algumas coisas. Uma é, vou voltar a ligar o meu embrulho. Então, se você alternar a quebra de palavra e o que eu vou fazer é, eu não quero tantas palavras. Então fica ainda melhor. Lorem, isso está usando emit. Lembre-se que conversamos sobre isso antes. Tão pequena abreviatura e digamos que só quero cinco. Então, não emita espaços, cinco, retorne cinco larguras. Bem, vamos colocar em algum outro tipo de tags padrão ou colocar uma tag p. Eu quero que este seja Lorem de digamos 20, hit return. Vou colocar um par de outras etiquetas que você ainda não sabe. Vamos UL, dentro da UL, coloque um LI. É uma lista não ordenada com um item de lista dentro dela. Se você gosta, o que é isso? Lidaremos com isso mais tarde. Então UL e um OL com LI estão lá dentro. Se você não pode fazer isso acontecer, não se preocupe. Não é muito importante. Eu tenho que escrever algo no meio aqui, eu vou adicionar algo no meio. Você está me observando. Às vezes fica um pouco sem fluidez. De qualquer forma, lista desordenada é um ponto de bala, lista ordenada e OL tem um número, mas eles tinham suas próprias coisas, é espaços entre estes, isso é recuado. Este aqui tem uma grande lacuna, o outro tem ainda uma lacuna maior. Este é ousado, este não é. Então vamos limpar todos os padrões, mas fazendo um CSS Reset. Agora, há algum específico que você possa usar? Não, há um zilhão deles. Você pode fazer o seu próprio. Aquele que eu uso mais e é bastante popular na internet. Se você olhar em seus arquivos de exercícios, há um chamado Projeto Dois e vamos ver este aqui, CSS Reset, Eric Meyer. Ele era o mais famoso. Esse cara aqui. Desenvolvedor de onda, ele fez um CSS Reset. Todos usaram. Está sendo atualizado algumas vezes. Eu ainda uso. Adoro, mas há outros. Há coisas como normalizar, vamos discutir neste, mas há outras que não vamos cobrir que apenas alternativas para ele. Há um chamado normalizado, estamos fazendo esse. Reinicializar, HTML5, doutor, o que mais? Esses são os que vêm ao topo da minha mente, mas há muitos e se você é como eu, você acaba começando com alguém como Eric Meyer e depois ajustando como quiser. Vou abri-la. Eu vou copiar tudo isso para fora dele. Estou apenas selecionando tudo, copiando e voltando para o Visual Studio Code. Agora, onde você coloca isso? O que vamos fazer, é colocá-lo neste delete.css. Vamos colá-lo e é isso. É tudo o que temos que fazer. Vou salvar todos, alguns lados. Agora vamos olhar para o documento. Só limpa tudo. Só diz que somos todos iguais, somos todos iguais aqui e agora você pode passar como designer e dizer, tudo bem, agora em baixo aqui, depois de tudo isso, eu posso dizer, eu quero que meu h1 seja arial e agora vamos colocar uma fonte, família de arial, ponto e vírgula. Então agora eu tenho que decidir e eu meio que construo isso a partir daí. Consegue ver o tipo de lógica nele? Pelo menos você pode não gostar. Você pode gostar de começar com todos os padrões e é totalmente divertido. O que mais eu estou fazendo? Tentando falar e programando. Lá vamos nós. Eu o fiz maior. Faço isso sempre que estou começando um novo site, vou passar, pegar um de Eric Meyer e apenas colocá-lo no início e trabalhar de baixo para baixo. Vamos dar uma olhada neste. Isto é dizer normalizar. Vou deletar tudo isso, deletar, e olhar para o normalizado. Ele gosta de um sabor diferente. O que normaliza faz, em vez de redefinir seus padrões, o que ele faz é, eu vou copiar tudo isso, colá-lo, salvá-lo, e dar uma olhada. Você é tipo, isso parece muito parecido com o que era e meio que é. O que vou tentar fazer é abrir essa. Voltarei em um segundo para compará-los. Tudo bem, então sub lado a lado e você é como, eles parecem iguais, mas olhar os pares diferentes lá dentro. Está bem. Eu acho que a grande diferença entre ele é, normalizar cabeças consistência entre navegadores. Sabemos que estamos usando o Chrome, neste caso, é nosso navegador, mas você pode estar usando o Microsoft Edge ou Microsoft Internet Explorer, Mozilla Firefox, Safari. Há muitos navegadores diferentes e o problema com todos esses navegadores diferentes, todos eles decidiram interpretá-lo, nossas tags h1 ou h2 ou p. Todas estas coisas são ligeiramente diferentes. É um pouco difícil mostrar o extremo. Então estou te mostrando no safári, parece diferente. O Firefox. Parece diferente, o espaçamento é um pouco diferente. Agora o que normalizar faz, é que ele vai torná-lo consistente em todos eles. Todos eles têm o mesmo preenchimento no lado, todos eles têm exatamente os mesmos espaços entre eles. Esse é o trabalho de normalizar. Lá estão eles. Em vez de tentar fazer as coisas e testar em um navegador, e é como, “Por que é diferente sobre isso, normalizar é uma maneira de realmente muito duro bit de CSS. Isso só tenta, eu acho, fazer tudo parecer consistente. Você pode ver aqui que há muitos comentários. Você pode ver esta pequena opção aqui, isso com pouco hack vai fazer os tamanhos de fonte de h quando eles estão em uma seção e artigo ser consistente em todos esses navegadores diferentes. Esse é o seu trabalho, consistência. Ainda é uma reinicialização CSS, mas está fazendo algo um pouco diferente. É só fazer com que tudo pareça igual enquanto o de Eric Ries faz tudo, nada. Então vá embora tudo o que esse aqui vê todos são iguais faz sentido? Talvez o primeiro, mas não o segundo, isso é mau ensinamento. Então o que eu vou fazer agora é não aplicá-lo vamos fazê-lo em um segundo na verdade, vamos aplicá-lo ao nosso projeto para citar, mas algumas coisas para pensar quando você está fazendo isso nunca é colocar isso no meio de um trabalho porque é como uma casa de cartões. Quando paramos de construir coisas, tudo depende de tudo o resto. Você viu uma etiqueta de corpo para ser uma fonte, mas então você muda a h para escolher uma fonte diferente e ela é construída em cima daquela etiqueta original e é uma torre dilacerante. Então você não pode simplesmente ir e jogá-lo no topo do seu documento e esperar para corrigir alguns problemas, não funciona, apenas deixá-lo de fora. Se você tem um site que não tem, eu mostrei para você porque você vai ter sites que já tem lá. Você seria como, o que é tudo isso? Eu nem sei o que ele faz e você começa a apagar coisas e vai ser como, sim, não está fazendo nada. É porque alguém usou um CSS reset como este. A outra coisa a notar é que ele é muito opinativo. As pessoas não gostam do Eric Ries por causa de X, Y, Z e outra pessoa, acha que é bom, mas eles deveriam mudar isso e ele não deveria ter feito aquilo e havia muitos desses resets diferentes, eu já dado a você um par, mas há monte deles lá fora e você vai encontrar as vezes que nós gostamos realmente que vê seus resets não está funcionando para mim então você vai criar como um Eric Ries', Eric Reese e modificado por Dan. Eu continuo dizendo que Eric Reese, ele é uma pessoa diferente do Eric Meyer, Eric Ries ele é o cara da startup magra? De qualquer forma, você entendeu o que quero dizer, certo? Tudo bem, então vamos implementar isso. Eu não vou salvá-lo porque era apenas como uma página de teste descartável e o que eu vou fazer é eu vou deletá-lo aqui para torná-lo agradável e limpo para nossas notas. Vamos apagar, foi embora. Tudo bem, então abra os dois, clique duas vezes neles. Eles abrirão duas abas em vez de apenas uma e estamos de volta. Então, para aplicá-los, você não pode simplesmente despejá-los no CSS e a maioria das pessoas, eu pessoas incluídas, gostam de mantê-lo em sua própria folha separada. Então o que vamos fazer é criar outro arquivo, chamado, salvá-lo, e eu vou chamá-lo de CSS reset, mas sem espaços, CSS. Isso é descanso. Redefinir, vamos clicar em Salvar. Então nós temos duas folhas de estilo, apenas uma delas está conectada e precisamos adicionar a elas e isso é realmente importante para onde ela vai. Então a coisa boa sobre CSS é que você pode ter quantos quiser, você pode ter dois deles apenas para separar tudo o resto fora. Para um pequeno site, você realmente não precisa fazer isso a menos que você tenha algo como isso, como um CSS reset como chamamos? Chamamos-lhe CSS, redefinir ou descansar? A grande coisa é que este pedido, você vai redefinir precisa estar na frente de sua folha de estilo caso contrário ele vai fazer coisas muito estranhas porque você vai dizer como B H um e seu próprio, vamos dizer que está de volta para o outro lado . A página é carregada de cima para baixo. A primeira coisa que o navegador vê é como, Ei, eu sou HTML e ele vai polegar para cima e então ele diz, hey, eu estou escrito na língua inglesa e ele vai polegar para cima. Então ele está lendo para baixo do topo e chega aqui, então você vai chegar ao seu estilo e você diz, eu quero que o meu batendo seja branco e no reset diz: “Ei, todo mundo seja preto e então ele continua. Então você pode ver como seria o problema, as coisas que você carregou estão ficando redefinidas de volta ao normal. Então ele garante que o reset está acima do seu CSS e eu tenho meus estilos não é nada neste. Meu CSS reset, vou colar o do Eric Ries. Não normalizar, copiar. Vou mostrar-lhe isso agora porque parece estranho, você vai encontrar sites que o têm e quando mais tarde fazemos coisas como Bootstrap e que vai fazer isso para nós, então nós meio que agradável para apresentá-lo agora. Consegues ver o que está a fazer quando vê todas estas etiquetas? A margem zero zero zero zero, eu só me livro de tudo o que joga e me lembro dos “O L “que tínhamos? Onde é que eles estavam? Estão aqui em algum lugar? Eles estão lá, a lista ordenada, listas não ordenadas, digamos, estilo de lista nenhum. Livre-se do ponto de bala e do pequeno número que o começo acabou de sair, por favor. Tudo bem e isso vai ser você pode fechá-los agora. Vamos salvá-lo primeiro e agora nada vai parecer mudado, mas eu tenho esse pequeno estilo definido no fundo, fazendo a sua coisa. Então, quando eu adicionar um H um e praticar um pequeno atalho lá, guarde-o. Vou abri-lo em um navegador, desligá-lo, ligá-lo. Lá está um pequeno H um, mas ele é bom e pequeno e não tem estilo. Tudo bem, nós vamos nos livrar do H um, ele era apenas um pequeno lugar detentor e vamos fazer comentários apenas para deixar bem claro para nós mesmos. Nós comentamos aqui, lembra? Fizemos coisas e, em seguida, embrulhamo-lo naquelas etiquetas. Lembre-se que é barra de comando no meu teclado, ou você só tem que digitar os asteriscos barra para frente. Para HTML, é um pedaço de código diferente. O que eu quero fazer é dizer que este é o CSS de Eric Meyer reset. Só para me ajudar mais tarde no meu futuro eu ir sim, isso é o que isso é. Então, mas eu não posso simplesmente deixá-lo assim, tipo de envolvê-lo na minha tag, você pode usar a mesma barra de comando de atalho no meu MAC, controle barra em um PC e você pode ver que o comentário HTML é muito maior. Você precisa colocar entre colchetes, ponto de exclamação, dois hífens e o outro lado é apenas dois hífens e suportes angulares. Então, uma vez que você tem lá dentro, isso é realmente útil, então eu posso ser um pouco mais específico com a minha rotulagem noturna. Esta é a minha própria folha de estilo, eu separá-los com os retornos porque é assim que Daniel ruge e título do documento que quase esquecemos. Chama-se “Roar Cycles” e é “Bike Repair” em Dublin. Boa palavra-chave suculenta lâmpada de título rico, fazer um salvar tudo e eu vou vê-lo no próximo vídeo. 36. O que é uma altura mínima em comparação com a altura de uma tag div: Este vídeo tem duas partes. A parte principal é aprender o que é min-height em vez de altura. Então vamos fazer apenas um pouco de limpeza. Vamos adicionar alguma estrutura à nossa página. Vamos adicionar um contêiner e flutuador no meio, batedor e Main e essas cartas abaixo aqui. São coisas que você já fez antes, mas precisamos fazer antes de passar para o próximo vídeo. Vamos aprender o que min-height está em código. Tudo bem, primeiro, precisamos de algo para dar alguma altura ou min-altura. Primeiro de tudo, vamos criar um div, chamado recipiente. Pressione “Espaço” ou pressione “Return” no seu teclado, div class é igual a contêiner. Vou colocar um [inaudível] separá-lo. Por aqui, vamos estilizá-lo. Lembre-se, parada total na frente dele e recipiente, chaves encaracoladas. Então vamos dar-lhe uma largura primeiro. Faremos o mesmo que antes, 1024 pixels. Não se esqueça dos pixels, e não se esqueça do ponto-e-vírgula. Vamos dar uma cor de fundo. Vou escolher qualquer coisa, está bem? Não vou usar os nomes. Vou fazer variações de verde. Vou começar com verde escuro, para começar. Certifique-se de que o ponto-e-vírgula vai no final. Vamos verificar isso. Não será capaz de ser visível porque ainda não demos uma altura, mas vamos manter isto em marcha. Eu tenho um pouco da minha outra tela. Vem cá, amigo. Bom. Precisamos dar uma altura e é aqui que entra min-height porque se dermos uma altura regular e eu digo que quero que seja, digamos, vou dizer 300 pixels porque torna o meu exemplo mais fácil. Dê uma olhada, mas nos deparamos com esse problema antes se começarmos a adicionar coisas a isso, digamos que adiciono uma tag P e coloquei alguns lotes de conteúdo, temos um grande artigo longo ou um post de bug. Quero colocar 500 palavras, o que não é enorme. Aperte “Salvar”, salte para aqui agora. Você pode ver que derrama. Em vez de usar uma altura, é muito simples que usamos apenas uma altura mínima. Estamos apenas dizendo que o mínimo que você pode ir é 300, mas você pode ir qualquer tamanho maior do que isso se o conteúdo precisar. Vamos guardar isso. Vamos pré-visualizar aqui. Aqui está. Diz para estar a 300, a menos que precises de mais, por isso vai aumentar. Sempre que você está pensando altura agora praticamente para tudo, pense min-height. Quero centrá-lo. Pausa aqui, digitando a centralização. Lembra-se da Centralização? Quero que faça uma pausa, veja se consegue. Vá. Tudo bem. Você está de volta? Lembra o que era? Era margem esquerda. Minha margem, esquerda. O que era isso? Isso foi auto. Você conseguiu. Bom trabalho. Em seguida, margem direita, margem direita. Tudo bem, vamos verificar. Está no centro. Tudo bem, então nós vamos jogar em alguns outros pedaços. Agora, vamos olhar para a simulação. Está em seus arquivos e Arquivos de Exercício, Projeto 2, há um chamado exemplo Mock up. Olhe para a página inicial primeiro. Pode abrir isso. Estou usando o arquivo XT só porque é uma diretiva, mas a mesma coisa. Vamos ter o nosso contentor. Vamos ter um cabeçalho no topo. Nós vamos ter uma seção principal, ok, então nós vamos adicionar alguns cartões também. o principal vai ser este título. Este texto aqui eles separadamente, nós vamos fazer esses três caras aqui. Algumas pessoas se referem a eles como telhas, ou cartões. Vamos nos referir a eles como cartas, mas os azulejos não importam. Caixas pequenas que podem chamá-las do que quiserem. Coloque isso e discutiremos isso mais tarde no curso. Tudo bem, então vamos jogar esses pedaços no meu embrulho de volta, pegou um quebra de palavra, que eu estava clicando no errado. Eu fui clicado aqui, então é quebra de palavras no CSS, que é separado. Agora, ele faz isso aqui, e eu quero me livrar desse pedaço gigante de P tag. Só estava lá como exemplo. Do que precisamos? Precisamos de ir, um predefinido, adorável. O que mais precisamos? Precisamos de uma parte principal. Nós ainda temos um rodapé neste. Não tem rodapé. Você não tem que ter um rodapé. Eu não projetei este, com um, então não temos um. O que eu gostaria de fazer é colocar três cartas. Vai ser fora deste principal porque eu quero que ele não faça parte deste recipiente principal. Quero que esteja em todas as páginas e você vai. Está nesta outra página há uma pequena caixa separada. Não existe tal coisa como um pré-definido como o recipiente. Não há nome para cartões que temos que dar. Acho que se chama “cartas paralelas”. Não foram feitos e vamos fazer as três cartas separadas e um segundo vai fazer como uma caixa que todos eles vão entrar. Nós vamos projetar envoltório de etiqueta que vai em torno de todos esses caras, é o principal este aqui e então nós vamos colocar os pequenos pedaços individuais dentro. O mesmo com o cabeçalho. Nós fizemos isso como um grande grosso aqui no topo dentro dele vai para ir, o logotipo, dentro dele vai ser estas pequenas etiquetas, desculpe pequenos botões. Tudo bem, então eu tenho cartas, vamos estilo cartões. Temos contêiner, temos cabeçalho. Vamos ter uma cor de fundo de quê? Vamos ter visões desse verde. cor de fundo, ele estava indo para ir mais leve e mais leve como eu ir junto. Nós; vamos colocar em um min-height, min-height. Agora, você pode ver isso, não está funcionando. Não é pré-preenchê-lo. [ inaudível] ou começa a fazer isso é porque nós esquecemos de fechar aquela propriedade no topo lá. Agora, se começarmos a digitar, ela está de volta. Vai ser 100 pixels. É tudo o que quero fazer com ele. Agora, vamos verificar antes de irmos adiante, o que eu fiz? Eu não apertei “Salve tudo”. Lá estão eles. Eu tenho um recipiente que é o verde escuro é um cabeçalho e no final. Vamos dar uma olhadinha. Agora, as cores estão aqui apenas para o seu prazer de visualização, para que você possa ver onde as coisas para cima e estilo o principal e [inaudível]. Este aqui vai ser ainda mais leve. Legal. Este aqui tem uma altura de 300. Faremos o mesmo pelas cartas. Estou ficando muito preguiçoso agora. Incrível. Este chama-se “cartões”. Este aqui vai ser ainda mais leve de novo. Salve isso. Vamos ver o que temos. Certo, então há um contêiner escondido no fundo. Está coberto agora. Depois há um cabeçalho, depois há um principal, e depois há os meus cartões. Minhas cartas são grandes demais, não é? Vamos mudar isso em um segundo. Está tudo bem. Certo, então isso nos tira da estruturação básica. Próximo vídeo, vamos olhar para adicionar cartões e trabalhar com algo chamado Flexbox. Está bem, vejo-te depois. 37. Obtendo tags div em uma linha usando Flexbox em HTML e CSS: Ei aí. Neste vídeo vamos falar sobre empilhar caixas ao lado do outro. Parece simples. No projeto anterior e eu empilhei tudo em cima um do outro por uma razão apenas para fazer essa parte do curso agradável e fácil de nos começar. Mas você vai querer muito rapidamente colocar as coisas ao lado um do outro, o que é bastante natural. Mas por padrão, Se você começar a empilhar coisas, eu fiz essas pequenas caixas, e eu colocá-los no meu HTML e por padrão eles realmente querem estar em cima um do outro. Você gosta de ir lá, vamos usar algo chamado Flexbox para fazê-los ficar ao lado um do outro como queremos. Você está pronto? Eu estou pronto. Vamos lá. Antes de podermos adicionar nosso flex, precisamos criar um par de contêineres. Eu vou criar dentro desta classe de cartões fora de, tomar aqui, nós vamos criar três novas divs dentro dela, e nós vamos chamá-lo de carta um. Parece que vamos ter outro, eu só vou trapacear, copiar, colar, colar. Todos os três, tenho um, vou chamá-los de cartão um, dois e três. Agora, eu estou dando nomes específicos porque mais tarde no curso, eu estou pensando um pouco, eles estão na verdade para fazer coisas diferentes, porque este tem um fundo dessa imagem, este tem um imagem, que tem uma imagem diferente. Eles fazem coisas diferentes. Vou dar-lhes nomes específicos. Se seus cartões são genéricos, ele não teria que dar nomes separados. De qualquer forma, bem, pelo menos pode ser tudo chamado de “cartão um”. Agora, vamos começar todas essas cartas. Começaremos com o cartão um e depois copiaremos e colaremos isso algumas vezes. Vamos dar-lhe uma cor de fundo e uma altura mínima, o mesmo que esta. Mudaremos a cor para ser algo ainda mais leve. Na verdade, vamos mudar de esquema de cores porque meu plano verde não está funcionando perfeitamente. Eu vou para o, eu nem tenho certeza. Eu quero dizer melão de água? Não, [inaudível] não. De qualquer forma, rosa. Vamos fazer este e limpar tudo e escolher uma cor, e vamos usar a mesma altura, mas altura mínima no caso de precisar ficar maior. Vamos dar-lhe uma largura porque eu quero três deles lá dentro. Eu quero, você poderia dar-lhe uma largura de pixel, ele tem uma largura absoluta. Você poderia malhar. Eu não quero ir 1024 dividido por três, está impedindo isso, e você pode fazer isso. Ou um bom truque fácil é, não importa se você usa pixels ou, neste caso, podemos fazer uma largura de, você faz isso para tudo, não apenas para esses cartões. Podemos fazer a largura das porcentagens. Se fizemos 33,3%, ele vai para outro que, nós perdemos um pouco lá, mas ele vai caber três através fácil. Vamos dar uma olhada no que temos, salvar todos e vamos, estes são meus primeiros. Vou duplicar isso algumas vezes, duas vezes. [ inaudível] Eu tenho três deles. Você, isso tem que ser você, e você, que tem que ser três. Vou mudar as cores. Mais leve. Não mudou o suficiente, então. Este aqui vai ficar super leve. Eu tenho três tons diferentes do meu rosa e por padrão eles sempre se alinham em cima um do outro, que é apenas a maneira como ele funciona no cartão. Se você não fizer mais nada, todos eles vão tentar se empilhar bem em cima do outro. É onde Flexbox vai entrar neste vídeo em particular. Nós vamos empilhá-los bem juntos, e a maneira como Flexbox funciona é que ele é novo para, como se você já fez um curso anterior do meu, nós estávamos flutuando para a esquerda e para a direita. Isso ainda funciona, mas é mais difícil de implementar porque você tem que limpar flutuação e esses tipos de coisas. Se você nunca ouviu falar de carros alegóricos, não se preocupe, Flexbox apenas facilita as coisas e é novo para HTML5 e funciona em todos os navegadores no momento, o que é legal. Tudo o que você precisa fazer é que precisa haver uma tag pai. É por isso que este grupo, estas cartas têm a sua própria gangue leve, ou os próprios pais pequenos. Eles são tag pai, estes são os filhos, porque eles estão dentro do pai. Este pai precisa ser dito para flexionar e todos dentro dele vão se alinhar bem. É muito mais fácil de fazer. Encontre cartas e vamos dizer “display”. Obrigado. Vamos dizer “flex”. Certifique-se de que o ponto-e-vírgula vai no final e espero, enquanto o trabalho está feito para nós. Olhe para isso. Agora, se você é novo no web design e você é tipo, sim, isso é legal. [ inaudível] Vamos. Se você já fez isso antes e você é como eu e parar, não, isso é incrível. Adoro, mas flutuar antes de limpar carros alegóricos foi um drama. Agora não é. Mas eu não vou continuar porque você provavelmente é novo e você provavelmente não se importa tanto e tanto quanto eu. Mas a coisa a recapitular é que porque eu poderia ter escapado por não ter este invólucro aqui porque não há nenhuma razão real porque os acabamentos principais e então esses caras começam. Mas eu queria este wrapper porque todo esse pai porque eu quero aplicar flex a ele. Você não pode aplicá-los individualmente para os caras foram dudet. Você tem que fazer isso com o pai em vez disso. É o que vamos fazer com o Flexbox no momento. Você não pode se apressar e aprender mais sobre o Flexbox. Entrei neste curso para tentar e, não sei, não jogar tudo em um vídeo. Há mais vindo sobre Flexbox, mas para o momento, maioria das vezes eu estou usando isso é apenas para obter as coisas para manter em sua própria linha. Sim, e é isso para este vídeo e eu te vejo no próximo. 38. Adicione espaço uniforme entre tags div usando Flexbox sem margens externas: Tudo bem, você vai voltar, eu estou de volta com este vídeo. Vamos falar sobre espaçamento e entre as nossas caixinhas aqui em baixo. Super fácil usando Flex Box. A fraude é apenas adicionar isso e você está balançando para o pai. Mas vamos falar sobre isso um pouco mais no vídeo para que possamos realmente entendê-lo. Além disso, fica por aí, há uma folha de atalho no final. Te vejo em um segundo. Você pode ter visto isso no último vídeo, mas antes de começarmos, precisamos consertar meu problema de sintaxe. Você deve ter notado que esqueci de colocar isso, os ponto-e-vírgula no final. Por que eles não quebraram ainda funcionando bem? É porque, é a última coisa nesta lista. Então, como fundo, ele precisa do ponto e vírgula para saber que está terminado. Então o mesmo com altura mínima, ele precisa conhecê-lo. Então esta para começar, mas não há nada depois, então está tudo bem. Não é até você ir, eu quero fazer algo com a exibição, mas não funciona. É a cor errada e não preenche previamente. É porque eu tenho esses caras. Isso é bom. Vá por outro lado. Então o que queremos fazer é, queremos adicionar um pouco de espaçamento e vamos mostrar-lhe o caminho ruim e, em seguida, o caminho realmente fácil. Ok, nós poderíamos apenas passar porque nós precisamos fazer as caixas um pouco menores porque não há espaço no momento para espaçamento. Então nós poderíamos entrar aqui agora e vamos fazer 30 por cento para tudo isso. Agora vou usar o meu multi cursor. Já fiz o multi cursor? Se não o fizermos, pode manter a honra Mac. É a tecla Option. Em um PC é a tecla Alt. Você pode clicar uma vez, duas, três vezes, ver meu cursor piscando ou todos eles. Fizemos de uma forma ligeiramente diferente. Se você não tem certeza do atalho ou não está funcionando para você, é este aqui. Você pode alternar entre Command click para multi cursor, ou há outra opção que é alt click. Você pode alternar entre esses dois, apenas descobrir qual deles funciona para você. Vamos ao seu prático PDF de atalho que lhe demos. Lembra-se disso? Vamos ter um 30. Salve tudo, pré-visualização. Agora temos alguns espaços por todo o lado, então queremos colocá-los no meio. Podemos fazer isso, podemos ir à margem. Então o primeiro vai ter um pouco de margem à direita, e vamos dizer que queremos que seja 20 pixels. Então este aqui, eu quero 20 pixels à direita deste também. Então neste você gosta de pedir demais, então é aumentado. Este um pouco até chegarmos à borda e você acabar, o maior problema é misturar porcentagens com tamanhos físicos. A coisa realmente fácil de fazer é excluir isso. Mais uma das vantagens do Flex Box. Vamos aprender muitas vantagens do Flex Box. Precisamos das larguras. Tudo o que precisamos fazer com os pais é dizer, eu gostaria que você justificasse o conteúdo, e eu quero que seja, há muitos outros diferentes. Vamos usar o espaço. Agora há dois que você vai usar o espaço ao redor deles entre eles. Vamos dar a volta, e depois colocar outro ponto-e-vírgula. Então todas as crianças vão espaçar bem, vamos dar uma olhada. Então vamos colocar espaço em ambos os lados. Então ambos têm quantidades iguais de ambos os lados. Eles se dobram no meio porque ambos estão se conectando. A outra maneira que você pode fazer é a outra. Então fizemos espaço ao redor, e o outro é chamado de espaço entre. Salve isso. Esse é o que eu quero. Lá vai você. Então apenas os separa bem. Obrigado, Flex Box. Se você é como, essa coisa Flex Box, eu nunca vou lembrar disso também, porque eu faço isso. É justificar o conteúdo? Há outro chamado “justificar itens”. O que eu fiz é que eu te dei em seus arquivos de exercícios, em sua folha de atalho, essa coisa chamada Flex Box Sheet de Joni Trythall, que serve. Isso é muito legal, muito bonito também, bom trabalho. Você pode querer imprimi-lo. Você pode querer apenas olhar para ele assim, e isso só me dá um pouco de compreensão básica deles. Você pode ver aqui para ativar os poderes de Flex Box, o recipiente precisa ter display Flex sobre ele, e então as crianças vamos dizer este aqui. O que queríamos era, o que fazemos? Nós justificamos o espaço de conteúdo ao redor, espaço entre ir direto para as bordas. Então ele tem um bom visual do que eu acho que é super útil e você pode simplesmente passar. Vamos cobrir muito disso no curso. Mas vamos nos referir a este. Obrigado por isso, Joni. Tudo bem, é isso para este que fizemos o nosso espaçamento, vamos para o próximo vídeo. 39. Como ter 2 tags div de tamanhos diferentes na mesma linha HTML vs. CSS vs. Flexbox: Oi lá. Neste vídeo, vamos fazer tags div de tamanhos diferentes. Fizemos coisas uniformemente espaçadas, agradáveis e fáceis, mas neste caso eu quero que este seja dois terços e este seja um terço desta parte principal do meu site. Não vai olhar para isso bonito, nossa versão vai ficar assim, mas é o mesmo princípio. Dois terços, um terço usando Flexbox e display flex. Para começar, precisamos adicionar duas caixas. Esta caixa aqui que vai ter o meu H1, a etiqueta p e este botão nele, e esta outra caixa aqui para ter a imagem nele. Haverá duas caixas grandes aqui. Vamos colocá-los em nosso HTML. Para onde eles vão? Eles vão entrar na principal e colocar um retorno, e eu vou colocar dentro. Como vou chamá-los? Eu poderia chamá-los de seções. Vou chamá-los de “Div Tags”. Seções, artigos, eu me confundi. Este vai ser um div de herobox1. Vamos colocar isso em primeiro lugar. Muitas vezes, esta área, o mastro principal pode ser chamado de herobox. Bem, a imagem de herói ou a imagem principal principal, herói se acostumar um pouco, eu usá-lo um pouco. Então temos duas caixas. Nós vamos ter esse, eu vou copiá-lo, colá-lo. Então nós temos dois, e eu vou dar-lhes nomes diferentes porque queremos que eles sejam de tamanhos diferentes. Legal. Vamos separar isso um pouco. Digo que estou fazendo isso por você, mas na verdade sou eu. Sou uma pessoa visual fazendo código. Na caixa de heroína eu quero adicionar algumas coisas. Eu quero adicionar um H1, legal, e eu quero adicionar talvez Lorem, talvez larguras completas para a batida, e eu vou adicionar um p-tag, e esse p-tag vai ter talvez 30 pesos. Incrível. Salve-o, vamos verificar no navegador. Lá vai você. Legal. Quero fazer o mesmo para a próxima caixa. Vou pegar isso, roubá-lo, e colocar a mesma coisa dentro, herobox2. Essas são minhas duas caixas, eles têm exatamente o mesmo conteúdo, eles têm nomes. Algumas coisas que precisamos fazer é primeiro, precisamos basicamente fazer o que fizemos nos últimos vídeos, colocá-los empilhando um ao lado do outro. Eles só vão empilhar um ao lado do outro se tiverem uma largura. Então precisamos dizer, “Vocês têm uma largura.” Vamos fazer isso primeiro. Vamos fazer uma citação herobox1, e eu vou dar a isso uma largura de, digamos, 50%. Parece um bom número porque é metade, e faremos o mesmo com a segunda caixa. Este vai ser herobox2. Nós damos a ambos cores de fundo diferentes. Cor de fundo, e este vai ser, vamos nos livrar dessas cores, mas azul de centáurea. Legal. Este vai ser cor de fundo, e este vai ser cor aleatória próxima, creme de hortelã. Vamos levá-los para cima. Na verdade, estão todos trabalhando. Sim. Então eles têm uma largura que eu empilharia um ao lado do outro. Como fazemos isso antes de tudo? Não estamos preocupados com as alturas no momento porque estes paus e estão mantendo estas caixas abertas. Se você estiver fazendo isso sem essas tags h1 e p-, coloque algum conteúdo lá, ou dê a eles algumas alturas. Então empilhá-los ao lado do outro. Você se lembra do quiz pop, pronto, cidade, o que você fez? Pausar? Vá tentar, empilhá-lo ao lado do outro, isso mesmo. O pai precisa ser chamado de flex de exibição. Então, neste caso, o pai é principal. Então, principal, eu vou dizer display, e vamos dizer flex, por favor, e então precisamos fazer, todas as crianças, ok, que são esses dois caras, vão entrar, empilhados um ao lado do outro. A outra coisa a saber sobre o Flexbox é que o que ele quer fazer é, antes de serem realmente curtos, então eles só vieram para o fundo do texto, agora eles preenchem todo o espaço fornecido. Isso é como um recurso do Flexbox. Você não pode desligar isso. Eu não vou cobrir isso agora, mas você pode ir para a sua folha de atalho e você pode fazê-lo que eles apenas se alinham na parte inferior do texto. Cabe a você me explicar assim. O que eu quero fazer é esse cara aqui, lembre-se que esse cara ocupa cerca de dois terços e isso é cerca de um terço. Foi fácil com esses caras, porque Flexbox vai empilhá-los ao lado do outro. Eu quero que eles sejam separados, e eu poderia usar porcentagens. Não há nada de errado em fazer isso. Eu posso fazer flexbox1 70 por cento, e este aqui 30, isso funcionaria. Mas eu quero mostrar a vocês como Flexbox faz isso. É outro método de fazê-lo, e você verá que ele é carregado online. Então você precisa saber como fazê-lo, especialmente mais tarde no curso quando fazemos Bootstrap e algumas outras coisas, outros frameworks, eles usarão esse método. O que eles vão dizer é, “Eu quero ser flexível ”, então isso é flexível: e você decide o tamanho que você quer que este seja. Quero que seja 2. Quero que este seja um flex de 1. É uma proporção. Eu quero que você pegue duas partes e esta parte. Vamos guardá-lo e vamos verificar. Não se esqueça de ponto-e-vírgula feito. Vamos dar uma olhadinha, aí está. Isto é duas partes, que é uma parte. Agora, eu não preciso de getters neste momento, eu tenho cores aqui agora, mas nós vamos nos livrar deles. Estou feliz por isso para comprar-se bem ao lado dele, e vamos adicionar um pouco de preenchimento para o interior para obter o texto para pop de volta. Para recapitular, se você quiser formas regulares, você pode dar, mais tarde você pode usar pixels. Pixels são ruins porque quando tentamos redimensionar para um tablet, que entraremos no próximo projeto, e é melhor usar porcentagens ou usar essa opção onde diz “Flex”, um ou outro, não importa. Eu só quero mostrar ambos os métodos porque flex é incrível e você vai vê-lo carrega on-line ou em sites de outras pessoas, ou sites que você herda, cabe a você qual maneira você quer trabalhar. A maneira como funciona é que este flex só funcionará se o pai tiver o display flex ativado. Isso levanta a questão como por que isso não agarra o corpo e diz que na verdade eu quero que todo o corpo se torne flexível, basta colocá-lo em flex e então tudo vai funcionar. A razão pela qual você não quer fazer isso é um par de razões. Uma é que não vai funcionar. O que acaba acontecendo é que o pai tem que ser o pai direto. Não pode ser o avô, e essa coisa de pai e filho que eu vou ficar bem, mas você tem que ser como você vê que isso é herobox aqui? Display flex tem que estar neste sujeito. Não pode estar no recipiente que está fora do corpo. Estes são aninhados dentro um do outro. Tem que ser o descendente direto. Desculpe. Entendeu a ideia, certo? Então não vai funcionar. Além disso, o Flex faz coisas, mistura as coisas. Digamos que eu queira alinhar tudo. Eu poderia usar o display flex no corpo e dizer, “Todos alinhados à direita”, mas então tudo está alinhado à direita, todo o site. Neste caso, podemos ser muito específicos. Podemos dizer apenas o principal, apenas fazer uma coisa no nosso caso, como se o último fosse espaço entre as cartas, seja ele. É por isso. Eu fiz essa pergunta, é por isso que estou te dizendo a resposta. [ inaudível] foi como, “Isso virou a coisa toda.” Você não pode. Tudo bem. Isso é por ter tamanhos irregulares em HTML. 40. Como centralizar verticalmente o conteúdo em uma tag div html usando Flexbox e CSS: Oi lá. Este vídeo é sobre centralização vertical, super fácil usando Flexbox. Este texto aqui está dentro desta cor roxa maior aqui, e é centralizado verticalmente. O mesmo com esta imagem, é meio que pairando aqui no meio. Vamos entrar agora e descobrir como fazê-lo. Tudo bem, lembre-se no último vídeo nós meio que temos essa questão centrada. Colocamos estofamento na parte superior e na parte inferior para fingir. Está bem. Então o que vamos fazer agora é usar Flexbox porque é super fácil de fazer. Então o que queremos fazer com nossa outra maquete, queremos o conteúdo, vou verificar essas pequenas caixas que eu adicionei, para ser tipo de centrado neste tipo de div principal aqui. Agora há algumas coisas que você precisa fazer. Primeiro de tudo, a div principal, que está indo para dentro, então esses dois caras pequenos estão lá dentro. Esta div principal precisa de uma altura, uma min-altura. Então ele tem uma altura mínima de 300 que vai funcionar perfeitamente. Então o que precisamos fazer é dizer a ele para fazer alguma coisa. Queremos usar os itens de alinhamento, alinhar itens ao centro. Vamos salvá-lo, vamos verificar. Vá em frente. Está bem. Então, por padrão, vimos no último vídeo, se você apenas cuidar do Flexbox, ele meio que se estende para caber em seu pai, ok? Com isso, deixe-me apenas comentar isso, salvá-lo na verdade. Talvez nosso conteúdo seja tão grande, mas ele se estende, então você pode meio que substituí-lo fazendo coisas diferentes. Então nós estamos dizendo, na verdade, faça o mesmo teste, então ele assume que eu vou desistir de todas as coisas extras e nós vamos apenas executar o meio aqui. Vá em frente. Agora, este é o favorito. Este é, de longe, o que eu mais mandei por e-mail, tipo, “Ei, como você se meteu no meio de novo? Ok, verticalmente, sim, é difícil lembrar de fazer. Mas de qualquer maneira, como você se lembraria? Está bem. Ou marcar este vídeo ou na sua folha de truques, você meio que passa por isso, e você tem um olhar e você pensa, “É isso que eu quero?” Justificar o conteúdo até o fim, não é o que eu quero. Justificar o centro de conteúdo, que é interessante porque ele centraliza todo o seu conteúdo. A maioria das pessoas não usa isso. Eles apenas fazem o centro de alinhamento de texto. Fizemos isso antes para a nossa imagem, que parece tão bom. Mas de qualquer forma, o espaçamento entre nós fizemos isso, você meio que rolar através, e eu amo que isso é tudo visual porque eu sou como, “Oh, olha para isso.” Veja, nós poderíamos fazer alinhar flex-end, mas estamos fazendo centro, apenas teste flex-end, apenas [inaudível]. Então nossa tag pai, vamos fazer flex-end, fazer um flex-start. Flex-start é por padrão e pré-visualização, vá flex-end. Flex-start seria útil se você não quisesse que ele se esticasse. Vamos dar uma olhada. Você pode ver que ele vai para o topo sem tipo de encher o resto do espaço. Vou desfazer isso. Há algumas coisas que queremos fazer antes de irmos só para arrumar, porque acabamos de receber um texto de espaço reservado. Antes de fazermos isso, vamos recapitular. Para isso funcionar, precisa de um pai. Está bem. Então essas duas garotas no meio aqui ou caras, elas são minhas criancinhas e eu quero fazer o [inaudível] para elas. Então você aplica isso ao pai. Então não temos um pai na caixa. Digamos que você está assistindo este vídeo mais tarde e você diz : “Meu site não tem uma tag pai.” Basta colocar um por aí. Basta envolvê-lo e dizer para chamá-lo de uma etiqueta de embrulho. Tudo o que você vai fazer é aplicar uma altura nele, e você vai se inscrever. Display flex tem que estar ligado. Está bem. Nós ativamos o nosso por padrão nos últimos vídeos. Se só estás a ver este vídeo, também tem de estar ligado. Então ele precisa de uma altura, flexibilidade de exibição e, em seguida, alinhar itens ao centro, e tudo dentro dele fará isso. Tudo bem, o que eu quero fazer agora? Quero começar a remover algumas das minhas cores. Então, onde é isso? Eu quero me livrar da cor principal, salvá-la, ou apenas continuar testando isso enquanto avançamos. Ok, e você vê o fundo, essa é a cor que usamos para o recipiente. Vou me livrar disso agora também. Se você está achando-os mais úteis, vamos começar a nos livrar de pedaços. Onde mais? Vamos nos livrar do azul. É uma cor muito alta para ver que um, cone azul pálido e creme de hortelã, adeus creme de hortelã, ir porque é isso que eu quero. Nós vamos preencher o fundo e um pouco com este grande gradiente de fundo nesta imagem. [ inaudível], Eu quero substituir o texto aqui e a imagem. Então, o texto é fácil. Está nos seus arquivos de exercícios. Certo, há um no projeto dois. Há um chamado texto ou é um texto de projeto dois? Ok, e depois aqui, reparos de motos móveis. Você também pode digitar isso e salvá-lo. Este é o corpo, tipo de cópia debaixo da etiqueta p. Certifique-se quando você está fazendo isso, muitas vezes eu acidentalmente perderei os últimos suportes angulares, e eu faço isso, e então tudo dá errado. Vamos ter cuidado. Você pode ver que é colocado nisso. Entramos aqui porque eu copiei e colei a partir deste software [inaudível] lá dentro. Não importa quando passar para o outro lado. Apenas meio que ignora isso. Você pode não gostar disso embora você apenas arrume tudo se você quiser. Se você quer estar em duas linhas, isso é um bom ponto. Nunca cobrimos isso. Então, se você quer estar em duas linhas separadas porque não era, será apenas em uma grande linha. Mesmo se você colocar um retorno ou um retorno fino, não importa, ok? Então o que você precisa fazer é colocá-lo em duas tags p individuais. Eu vou cortar isso fora. Vamos tentar deixar isso agradável e claro. Esse é aquele cara. Tudo bem, vamos colocar um ponto final. Então eu preciso de outra tag p aqui. Está bem. Então, p, eu vou colá-lo nisso. Lá vai você, duas etiquetas separadas. Tudo bem. Vamos substituir este texto por uma imagem. Então, onde estamos? Quero tudo isso aqui. Vou colocar uma etiqueta de imagem tão img, e de onde vem? Ainda não o colocamos na nossa pasta local. Então você se lembra. Agora arquivos de exercícios, há um chamado. Não faço ideia de como se chama. Espere aí. Ali está ele. Vamos usar este aqui, o serviço “A”. Deixe este para o momento. Vamos ver isso mais tarde. Ok, apenas use este. Image-bike reparo, salve como um. Eu vou copiá-lo. Na verdade, não. Usa aquele sem o A. Não importa, mas, no momento, usa-me este. Vamos olhar para estes quando fizermos imagens responsivas em um pouco, e eu vou colocá-lo na minha área de trabalho, no meu projeto dois. Eu quero colocá-lo nele, pasta Imagens. Está bem. Então, uma nova pasta aqui chamada Imagens. Abra, cole-o, lembre-se disso. Vou remover o erro, não é para estar lá, espere. Ei, cara, ele se foi. Agora, em VS Code, devemos ser capazes de iniciar imagens/notar o que está lá. Não se esqueça de colocar um texto alternativo. Está bem. Lembre-se que o texto alt é o que é carregado. Se a imagem não carregar, mas é principalmente o que o Google gosta de ver. Eu coloquei pessoalmente a manutenção de uma bicicleta em Dublin porque realmente explica a fotografia, mas realmente enchendo boas palavras-chave no meu site para que eu possa potencialmente classificar melhor. Tudo bem, então é isso. Vamos dar uma olhadela agora. Tudo bem, temos uma imagem, e temos algum texto que precisamos formatar o que faremos daqui a pouco. Tudo bem, então podemos [inaudível] entrar. Vai melhorar, prometo. Mas, por enquanto, é isso. Vejo-te no próximo vídeo. 41. Projeto do curso 3 - Cabeçalho Flexbox: Tudo bem. É tempo de projeto de classe novamente. Vou definir algumas tarefas agora, e você pode fazê-las sozinho. No próximo vídeo, eu vou mostrar como eu fiz isso, mas certifique-se quando este vídeo terminar, sair para fazer o seu trabalho, e então me enviar uma captura de tela e enviá-lo como sua tarefa para que eu saiba que você fez isso. O que estamos fazendo é esta estrutura no topo aqui. Então a imagem e o texto. O texto só pode ser texto simples e antigo. Vou mostrar-lhe os exemplos acabados. É assim que o seu parece. Não muito legal, mas comparado com o que você tinha, melhor. Este cabeçalho aqui, eu quero que você coloque uma imagem de um lado, então vai ser uma tag div indo neste lado com você imagem nele. Vai ser um nav div por este lado com algum texto nele. Agora o texto é apenas texto simples e antigo. Não há hiperlinks ou [inaudível] em botões em um vídeo futuro, então não há tags P, apenas texto velho simples sentado lá, e as regras são, eu quero que ele tenha um pouco de preenchimento em e as regras são, cima e em baixo. Vamos remover a altura assim que você colocar o logotipo dentro, remover a altura do cabeçalho porque é supérfluo, porque vamos adicionar um pouco de preenchimento para o cabeçalho superior e inferior. Os grandes estão fazendo isso para ser deixado e isso para ser certo. Essa é complicada. Já fizemos isso antes. Vou te dar uma dica. Está fazendo coisas, a mesma coisa que fizemos com isso, para que eles se separem. Nós também queremos que ele seja centrado nesta div. Então o cabeçalho é amarrado a este show, mas o cabeçalho é sobre esta altura, estes estão sentados no centro, Então é a imagem tipo da mesma forma que esta. Vamos dar uma olhada rápida nos requisitos aqui. Lembre-se, em seus arquivos de exercícios, em seus projetos de aula, há o documento do Word. Eu também tenho em seu projeto dois arquivos classe projeto três. É como uma captura de tela do que você precisa seguir. Altere a cor do plano de fundo também. Você teria notado uma grande mudança. Essa é a cor. Remova a cor do cabeçalho sempre que estiver pronto e adicione o logotipo não e caixa de navegação. A imagem está em seus arquivos de exercícios, então você terá que copiá-la para a pasta local. Este é o texto a colocar. Lembre-se de desestilizá-lo. O navegador precisa estar alinhado à direita. Remova a cor e a altura do fundo do cabeçalho, adicione o preenchimento à parte superior e certifique-se de que ambos estejam centralizados verticalmente. Quando terminar, publique-o nas tarefas. Ok, basta fazer uma captura de tela, não tem que ser todo o código. Basta me mostrar que você fez isso, e ou postá-lo aqui nas tarefas ou você pode postá-lo nos comentários nesta página ou mídia social e me marcar. Ok. Então, no meu Instagram, eu sou @bringyourownlaptop, Twitter eu sou danlovesadobe e no grupo do Facebook, há um grupo do Facebook. Vá verificar isso e apenas marcá-lo com isso para que seja fácil encontrar o material web para mim. Tudo bem. Aproveite o projeto da aula. Vamos ver como se sai. Alinhar direito vai ser o mais difícil. Se achar isso frustrante, tudo bem, faremos juntos no próximo vídeo. Boa sorte. Vejo-te daqui a pouco. 42. Projeto do curso 3 - Cabeçalho Flexbox COMPLETO: Tudo bem. Lembre-se, é assim que vai parecer quando terminarmos. Há um logótipo à esquerda. O nav à direita não está fazendo muita coisa da marinha, mas você entende o que quero dizer, apenas coloque as tomadas mais velhas por enquanto. Vamos começar. Vamos ver como isso vai correr. Seria interessante ver se fez o dever e comparará o seu com o meu. - Sim. Vamos ver como o seu é diferente. Parece que o descrevemos, não importa, não há certo ou errado. Está quebrado. Isso é errado. Mas se parece bem, está tudo bem. Primeiro de tudo dentro do cabeçalho, vamos colocar em dois divs. Agora o primeiro não há nenhum logotipo predefinido, vamos realmente criar um logotipo chamado e vamos colocar nossa imagem lá e vamos criar outro chamado nav. Mas há um navegador. Se você foi e chamou de classe div igual a nav, tudo bem também. Não se preocupe com isso. Dentro do logotipo aqui, eu vou colocar na minha imagem. Eu preciso copiar e colá-lo porque ele está em meus arquivos de exercícios, projeto 2 e é chamado logotipo, Estamos usando o png. Não se preocupe se usar o SVG. Vamos olhar para svgs mais tarde no curso, por enquanto, eu vou copiá-lo na minha área de trabalho, encontrar minha pasta local, e ir para o projeto 2, em minhas imagens. Vou colá-lo aqui. Eu já fiz isso ou lugar. A próxima coisa que eu quero fazer é editar, então as imagens são cortadas e há o logotipo lá. Certifique-se de editar todo o texto. Este é o logotipo para bicicletas de rugido loja de reparação de bicicletas. Vamos verificar no navegador. Incrível, o nosso logótipo está dentro Em seguida, vamos adicionar o nav. Agora, eu só disse para adicionar o texto. Isto pode ter sido um pouco confuso. Ele vai copiá-lo para fora do arquivo do projeto. Vou colá-lo e vou livrar-me disso. Salve isso. Vamos dar uma olhadinha. Eu tenho uma mensagem. Agora, preciso que esteja aqui à direita. Como você fez isso? Há algumas maneiras e a maneira que eu vou fazer isso é eu vou dizer o pai, que é o cabeçalho, eu vou dizer que eu gostaria que você mostrasse e eu gostaria de exibir flex, por favor. Lá vai você. Eles estão lado a lado. A próxima coisa que quero fazer é empurrá-lo para a direita e colocá-lo no centro. Vamos fazer isso indo direito. Eu estaria interessado em saber se você está indo de forma diferente para mim. Em código VS aqui, eu vou dizer cabeçalho, e eu quero que você dividi-los para mim. Eu quero ir para o cabeçalho, e eu quero dizer justificar. Eu quero justificar o conteúdo e eu quero dizer e espaço ao redor. Quero o espaço entre eles, separa-os. Essa pode ser a única, se você for tipo, “Eu nem sequer pensei nisso.” Em vê espaçados para fora e colocar espaços entre eles agradável e uniformemente e sem lacunas no lado. Você poderia ter feito de uma maneira diferente. Tentando pensar em outra maneira. Você pode ter alinhado o navegador, escrever os comentários se você veio com outra maneira, oh, eu sei que da outra maneira você poderia ter feito isso, você poderia ter feito flex. Flex um e, em seguida, flex dois, ele pode ter obtido recross e, em seguida, alinhar à direita o texto nele com um seletor composto. Estou interessado agora. Avise-me o que você fez. A próxima coisa que quero fazer é colocá-lo no meio aqui. Vamos usar algo parecido. Fizemos isso antes, alinhe itens e vamos para o centro. Vamos dar uma olhada. Ali está ele. Você fica confuso às vezes. Você pode ver que há um conteúdo de alinhamento e itens. Basicamente, os itens são um único alinhamento, o conteúdo é grupos de alinhamentos. Provavelmente é mais fácil te mostrar. Vou diminuir o zoom para que o editor possa ampliar. Alinhe o conteúdo ao centro. Você pode ver? É mais de uma linha de conteúdo. É como grupos de coisas lá dentro. Ele ainda está alinhando centro na div enquanto que se eu rolar para cima, as coisas ficam um pouco nervosas, há itens alinhados para o centro. Você pode ver? É só uma fileira. Ele vai espremer em uma linha. Itens, individuais, conteúdo, grupos de coisas, não se preocupe, eu esqueço, você vai esquecer. Experimente ambos e atualizaremos mais tarde. Obrigado, Microsoft. O que mais eu disse para fazer? Eu disse, vamos nos livrar da altura mínima e adicionar um pouco de estofamento superior e inferior. Quanta estofamento? Não me lembro, vou acrescentar, o que você fez? Eu fiz padding-top, e vamos dizer 20 pixels. Podemos mudar isso, superior e mesmo fundo completo. A altura provavelmente poderia ficar lá, mas eu quero. Sim, não precisamos da altura, então por que a temos? Tenho um pouco de estofamento de ambos os lados. Eu disse mais alguma coisa? Eu disse cores. Eu disse uma cor de fundo. Agora, como você fez sua cor de fundo? Espero que tenhamos feito isso, para o corpo porque é tudo na página, fomos cor de fundo, lá vamos nós, e vamos colocar isso, lá vamos nós. Observe que há um par de espaços extras lá dentro, não importa. Lá vamos nós. Vamos nos livrar da cor do cabeçalho, adeus. Arrumando tudo. É isso. Temos tudo o que precisamos, vamos dar uma olhadela. Legal. Essa era a nossa tarefa. Eu me pergunto como você chegou lá se é um pouco diferente. Deixe uma mensagem, envie-me um comentário, envie-me uma captura de tela. Sim, é isso. Vejo você no próximo vídeo. 43. Como criar um gradiente de fundo completo em um site CSS: Oi lá. Neste vídeo, vamos aprender como adicionar um gradiente ao fundo de um site. Vamos nos certificar que vai até o fim. Vamos brincar com a direção, vamos acabar assim com um bom gradiente sutil. Mas vamos olhar para os maus, vamos mostrar-lhe onde obter inspiração para gradientes em diferentes lugares legais. Como escolhê-los a partir de um site usando um pequeno plug-in legal. Se você acha que gradientes são suficientes, você pode pular totalmente este vídeo inteiro. São como 10 minutos de vida que você pode ter de volta. Se você está interessado em gradientes ouvir. Para adicionar um gradiente é muito fácil. Vamos fazer isso com a etiqueta do corpo porque isso cobre todo o fundo. Temos uma cor existente no momento. Vamos apagar isso. Legal, então cor de fundo. Imagine se pudéssemos digitar segundo plano. Ele não existe. Vamos usar a imagem de fundo para fazer isso. Imagem de fundo e, em seguida, você começa a digitar em qualquer linear, assim l. Você pode ver que no topo lá. Gradiente linear enquanto r, para gradiente radial. Cabe a você se você quer um círculo ou uma linha reta. Nós vamos usar um gradiente linear e nos colchetes aqui nós digitamos em duas cores separadas por uma vírgula. Só vamos fazer vermelho e amarelo. Porque você vai notar que quando eu começar a digitar não é pré-preencher as cores como normal, só porque é um caso de uso estranho então de qualquer maneira. Coloque em seu ponto e vírgula de fechamento, Salvar tudo, pré-visualizar no navegador. Aí está, ardente. Não se preocupe que pare aqui. Vamos falar sobre isso em um segundo. Mas por enquanto, sim, é isso. Gradiente linear e, por padrão, ele vai de cima para baixo. Você pode mexer com isso colocando um valor na frente do vermelho. Você pode usar 90deg, então 90 graus. Guarde e agora vai da esquerda para a direita, ou há uma sintaxe estranha onde você pode fazer. É estranho, é bom. Você pode dizer para a direita. Algumas delas são muito estranhas como, hey, você tem que usar esta imagem de fundo aleatória para fazer um gradiente. Mas então nós vamos usá-lo como vários intervalos como, eu não sei, código foneticamente correto. Isso vai fazer a mesma coisa. Para a direita, para a esquerda. Vamos dar uma olhada. Vai para o outro lado. Isso não importa. Você pode usar diplomas ou isso. O que funciona para você. Eu vou deixar isso fora. Eu só quero ir direto para cima e para baixo. Você pode adicionar mais de uma parada. No momento ele vai vermelho para amarelo, mas poderíamos dizer vermelho para amarelo para azul. Isto vai ficar bem. Boom. Se você usou algo como o Adobe Illustrator, sinto que é aqui que eles obtêm ideias para gradientes padrão. Eles são terríveis nisso. De qualquer forma, há mais coisas que você pode fazer. Eu nunca me lembro de toda a sintaxe para isso, então eu coloquei um link no seu documento de texto. Está no arquivo do projeto 2 chamado Texto. Esse é todo o conteúdo que temos usado até agora. Eu coloquei esse link aqui. Para w3schools.com e esta é uma boa explicação de tudo o que você pode fazer. Fica lindo, olha para isso. Olha, você pode colocar em um monte de cores. Para separá-los, você pode ver aqui para separá-los de uma vírgula. Você pode colocar transparência, você pode fazer coisas repetidas. Eu não vou cobrir tudo porque você pode estar procurando, eu não sei, repetindo. Uau, alguns bons. Há muitas coisas diferentes que você pode fazer aqui e apenas ter uma leitura através para obter o que você precisa. Pare de rolar então. Estás a deixar as pessoas tontas. As outras coisas que eu quero mostrar são, onde eu tenho minhas idéias para gradientes. Há alguns lugares. Grabient é muito bom. Na verdade, antes de entrarmos nisso, porque você pode não se importar com gradientes, mas você pode se importar com onde essa coisa pára. Um par de coisas é, este aqui pára porque o nosso contentor termina aqui. Porque é um site bem pequeno no momento. Ele só termina lá e está realmente repetindo. Está se repetindo no fundo. Poderíamos tentar adicionar um não repetir, mas então você só tem uma caixa de cor diferente aqui embaixo. A maneira de contornar isso é, eu sei que enquanto estou construindo este site, vai ficar mais longo e isso vai desaparecer. Só está lá porque a minha tela é muito grande. Se eu torná-lo menor, se você estiver usando uma tela menor, você provavelmente nem vai ter esse problema durante este curso. Você é tipo, “Não há problema.” Mas nas telas de algumas pessoas como esta, isso é um problema. Se eu estava construindo o site, eu apenas deixá-lo sabendo que meu site vai ficar maior e não vai ser um problema. Porque olha, é para aqui que vamos. Esta é a versão de gosto que eu fiz. Porque é tão grande que sai da tela e não adianta fazer essa próxima coisa. Mas você pode encontrar esse problema, e tudo que você precisa fazer para corrigi-lo é Visual Studio Code. No topo aqui, vamos marcá-lo em nossa tag HTML. Colchetes errados. Lembre-se, nosso HTML é todo o documento. Então o corpo é tudo o que usa isso. Você pode fazer coisas para o HTML. Esta coisa aqui, se eu fizer a altura 100%, eu realmente não sei por que isso funciona. Só sei que corrige o nosso problema. Vejo que está cheio quando as pessoas dizem: “Ei, coloque um gradiente.” Coloque o esconderijo. Ninguém explica o porquê, e ainda não sei porquê. Olha, de volta ao nosso original. Lá vamos nós. Meu gradiente espetacular, todo o caminho. Vamos ficar longe de cores suficientes e vamos ver de onde eu obtenho minhas idéias de gradiente. Um lugar muito bonito chama-se Grabient. Gradient.com e eles só têm cores muito legais. Você tem um monte de páginas e se você fez algum dos meus cursos, você provavelmente verá alguns deles porque eu apenas usá-los como uma idéia ou como um guia. Gosto deste aqui. A maneira como eu entro em VS Code é, você pode ver aqui em baixo se eu pairar acima desta cor? Isso me dá isso. Posso clicar nele dizer: “Você é meu amigo, você vem comigo.” Vou pegar o haxixe e tudo mais. Tudo o que preciso fazer é substituir o vermelho por isso. Este aqui, copie e cole. É apenas muito fácil. Cole e então eu vou me livrar do azul. Obrigado, azul. Aqui vamos nós. Temos esse gradiente aplicado. Essa é uma maneira fácil. Mas eles estão bem. É bom vê-los in situ. Vou mostrar-lhe alguns lugares que eu tenho minha inspiração em geral para design, para web design, mas também para cores. Dois lugares que eu uso. Eu uso Dribble, drible com dois bs, e Behance, que é o da Adobe. Eu entro aqui e qualquer um desses. Eles são muito diferentes. Por alguma razão, eles estão fazendo um trabalho semelhante, mas eles têm uma aparência ou tipo de usos muito diferentes. Eles têm diferentes tipos de conteúdo. Eu fiz uma pesquisa sobre isso por gradiente. Basta trazer alguns gradientes, mas você não precisa. Mas digamos, você pode ver meus sentimentos, os gradientes vieram apenas deste tipo de trabalho. Isto vai mudar. Se você está assistindo no futuro e você é como, “Gradientes são tão 2019. [inaudível], saia daqui.” Isso é bom também. Pule todo esse vídeo. Mas digamos que você goste de um pouco disso e você pensa, “Oh, eu realmente quero fazer algo com uma cor.” Estou apenas rolando, rolando. Onde estamos? Vou escolher um que eu goste. Diga que gosta de algumas dessas coisas e eu vou pegar uma e ir embora. Eu escolho este. Veja esta laranja para esta outra laranja. Quero essas duas cores. É difícil tirá-lo. Se você conhece o Photoshop e o Illustrator, você pode fazê-lo facilmente. Faça uma captura de tela, traga-a, use a ferramenta conta-gotas. Mas nem todo mundo vai ter essas habilidades. No Chrome, o Chrome tem algumas coisas legais onde o navegador você pode instalar algo chamado de extinção. Um muito legal é esse chamado FileZilla. Mas se você for para as extinções do Chrome, então pesquise as extensões do Chrome e, enquanto estiver lá, procure pelo seletor de cores. Um seletor de cores é a palavra geral para tudo isso. Encontre um que tem críticas altas e muitos downloads e, em seguida, diga Instalar e ele vai aparecer no topo bem aqui. Você pode ver meu seletor de cores. Então eu vou, selecionador de cores, escolher a cor da página e então eu vou apenas me mover até que eu possa ver aqui. É difícil porque o meu rato está aqui em baixo, mas tu, com os teus olhos, olha para cá. Olha, aqui está você e escolhe. Incrível, e ele só é adicionado no topo aqui para o meu seletor de cores e ele também é automaticamente copiado para a minha área de transferência. Tudo o que preciso fazer agora é entrar aqui e dizer Excluir, Colar tudo. Colar. É aquela laranja. Eu vou escolher uma cor aleatória, porque se eu escolher algo perto daquele rosa, não vai ser um bom exemplo. Eu só vou pegar este verde escuro aqui. Clique nele. Vamos copiar para a minha área de transferência, colar, salvar. Vamos verificar o nosso site. Ei, legal. Estou indeciso. Mas você entendeu a ideia. Behance é bom enquanto você está aqui. Em termos de minhas idéias gabadas para web design e como a prova de construção dos tópicos para esta classe. Tive que construir uma loja de bicicletas falsa. De onde posso tirar as ideias? Muitas vezes há kit de interface do usuário ou design de interface do usuário A interface do usuário é muitas vezes um bom lugar para obter idéias e cores esquemas e estrutura. Use-o como inspiração. Faça a mesma coisa no Dribble. Você pode ter seu próprio lugar para ter idéias legais, mas essas são minhas. Antes de irmos, vamos adicionar os gradientes apropriados de nossa marcação. Talvez sejam essas cores e elas estejam no seu texto aqui. Este aqui. Vou copiar e colar isso, e vamos seguir em frente. Você pode seguir em frente agora enquanto eu colá-los. Colar, Salvar, documento de texto. Se você perguntasse ou tipo, “Ei, como ele faz aquela coisa de saltar de um programa para outro?” Eu te disse mais cedo, mas você pode ter esquecido. Em um Mac, é comando e tabulação. Mantenha pressionada a tecla de comando e toque na tecla tab até chegar à direita, ou você pode apontar para ela com o mouse e simplesmente soltar as teclas. Em um PC é muito semelhante. É guia de controle, ou é segurar Tab. ou PC. Não tenho certeza. Experimente os dois. Vamos dar uma olhada. Temos nossa linda cor rica? Nós fazemos. Apenas um gradiente sutil. Não muito. Vai ser isso, vejo-te no próximo vídeo. 44. Como alterar o tamanho e a cor do tipo de fonte padrão em um site usando HTML e CSS: Oi lá. Neste vídeo vamos falar sobre a fonte padrão e alterá-la, porque por padrão é preto e é Times New Roman. Queremos mudar isso para cada tag que está no lado, vez de fazê-lo individualmente. Até agora temos feito isso por tags, o h1 agora é Arial, e então a tag p agora é Arial. Vamos fazer isso uma vez por todo o site. É bem fácil. A versão curta é apenas editar a família da fonte para a tag corpo, trabalho feito. Por que esse vídeo é tão longo? É porque eu quero falar sobre especificidade também, então fique aqui para isso. Sim, vamos indo. Temos nossa fonte padrão, é Times New Roman preto, e é 16 pontos, esse é o padrão, queremos mudar isso. Porque o que fizemos no último projeto cada um que fizemos Arial, então fizemos a tag p Arial, então fizemos individualmente, mas seria ótimo apenas mudá-los todos por padrão. É muito fácil, usamos a etiqueta do corpo. Body tag é a coisa toda na página. Então nesta etiqueta aqui, precisamos dizer a família da fonte e vai ser Arial neste caso. Faremos fontes extravagantes no próximo vídeo, mas agora será este, o título, então temos um h1 aqui, onde está? Há um h1 e a etiqueta p, eles são todos Arial. Além disso, eu quero que o padrão para o site seja uma cor de branco, não trigo. Isso é o que você precisa fazer no início de tudo ou no início de um site. É apenas estão em algumas coisas padrão geral. Então, mais tarde, você pode substituí-la. Eu quero falar sobre especificidade novamente em CSS, porque isso é bastante genérico, está no topo da tag body, tudo está na tag body. Isto é muito genérico. Tudo que você precisa fazer é colocar algo muito específico, como, um h1. Basta dizer, na verdade eu quero que o h1 seja de um tamanho diferente. Nós vamos ir para o tamanho da fonte uniforme e nós vamos escolher como 80 pixels porque no topo na verdade nós não dissemos o tamanho aqui em cima, não é? Digamos que queremos mudar a cor dele em vez do tamanho da fonte. Vamos dizer que vamos usar uma fonte, ou vamos usar cor. A coisa boa sobre VS Code é que porque eu usei estes no código anteriormente, ele sugeriu para mim. Então eu vou torná-lo preto agora. O topo dizia ser branco, mas aqui em baixo dizia ser preto. Porque isso é mais específico, corpo genérico e h1 é um pouco mais específico, ele vai substituí-la. Agora, quando não há uma especificidade muito clara para ele, digamos que você tem dois h1, então isso acaba acontecendo. Parece idiota agora quando eles estão bem ao lado um do outro, mas quando você tem um documento CSS muito longo ou que você está usando o site de outra pessoa e você não sabe onde há algum lugar neste código o h1 sendo transformado em talvez branco ou preto ou roxo. Você simplesmente não pode descobrir onde, tudo que você precisa fazer é mais abaixo na cascata, então é Cascading Style Sheet, o navegador lê de cima para baixo. Se há coisas que são igualmente específicas, então o último ganha. Então aqui em baixo, se eu disser para ser vermelho, este vai ganhar porque é depois disso. O topo é ser branco, vai para algo como, eu não sei, seria dito muita coisa. A parte de cima diz ser branco, todo mundo ser branco e diz ser preto, e depois ser vermelho. O vermelho vai ganhar porque está mais abaixo na lista. O h1 vencerá o body tag toda vez, não importa onde esteja, porque é mais específico. Vamos testar isso. Vamos pegar o h1, vamos cortá-lo. Não está mais lá embaixo, está acima de tudo. Aqui vamos nós, colá-lo, guardá-lo, e ainda deve estar vermelho. É uma mistura do fluxo, da cascata, e isso pode ser preocupante às vezes porque você está jogando coisas em todos os lugares e você pensa, por que é isso? Eu disse para ser branco porque é a última coisa na cascata, então é uma mistura do fluxo, da cascata, da cachoeira, chegando a uma mistura de especificidade. É uma maneira difícil de dizer isso. Eu vou me livrar deste vermelho e eu vou mudar a cor de volta para branco, eu vou apenas deixar o tamanho da fonte lá. Tudo bem, vamos para o próximo vídeo onde começamos a adicionar algumas fontes extravagantes porque estamos todos cansados de você Arial. É hora de ir. Vejo você no próximo vídeo. 45. Como escolher e instalar fontes do Google em seu site HTML CSS: É hora de ir de Arial entediante para Playfair e Roboto. Você pode não estar tão animado quanto eu, mas essa aula é dolorosa. Ele está lidando com as fontes básicas reais por muito tempo. Agora temos que fazer fontes bonitas. Vamos usar algo chamado Google Fonts. Vou mostrar-lhe como escolhê-los, como incorporá-los e obter o código funcionando, bem como maneiras de escolher fontes e como estilizá-los. Onde obter alguma inspiração. Chega de conversa, mais coisas. Vejo-te no vídeo. Para começar a usar o Google Fonts, primeiro lugar, por que estamos usando o Google Fonts? Então fonts.google.com, existem concorrentes, Font Squirrel, 1001 Fonts, Star Font, há concorrentes para ele. Tudo o que você precisa fazer é certificar-se de que é uma fonte hospedada para você usar em um site. É diferente das fontes que você baixar para usar em seu computador. Se você vai para DAFont e baixar uma fonte gratuita, não é algo que você pode usar em seu site, tem que ser algo que vive na Internet. Um bom lugar para encontrá-los é algo como fonts.google.com, eles são gratuitos. Eu vou passar por como eu escolher os estilos, emparelhamento de fontes e algumas outras coisas depois de fazer o básico real de como colocá-lo em e código, porque isso pode ser tudo o que você está aqui para. Então eu vou usar um par de fontes. Então, aqui na busca, vou digitar Roboto. Eu não sou porque ele está bem ali, mas você pode ter que digitá-lo e clicar em mais. Isso é adicionado a este pequeno, aqui em baixo, esta pequena fonte, selecionou meu pequeno grupo de fontes que eu vou usar no meu site. O outro que eu quero está aqui em cima, vai ser Playfair. São duas palavras? Não, eu tenho jogo de feitiços. Cérebro funcionando. Então é Playfair, é uma palavra. Você pode vê-lo lá, eu estou usando apenas a Playfair Display. Vou editar. Vamos editar aqui em baixo. Isso não faz muito. Vamos apertar este pequeno botão para abri-lo. O que queremos fazer agora é personalizar. Então, no momento, digamos Playfair, lá está ele, e Roboto, no momento, ele só vai carregar uma versão dessa fonte. Agora você tem que decidir com base em seu design, e isso é muito importante quando você está usando um programa para projetar seu site, digamos que é este XD ou Sketch ou Illustrator ou Photoshop. Usar um monte de fontes diferentes vai ser um pouco doloroso quando seu site tem que carregar. Então, no momento, eu só tenho um tamanho. É o tamanho normal que usei no meu design. Aqui em baixo, onde chega ao Body Copy, usei o Roboto e usei a versão light e não usei mais nada. Mas você provavelmente acha que pode precisar usar um ousado também, talvez um itálico. O único problema com isso ou a coisa a se preocupar é dizer que eu preciso da versão negrito e do itálico regular, você pode ver essa coisa aqui dizendo: “Ei, seu site vai levar um tempo moderado para carregar.” É por isso que você é laranja, mas aqui em baixo e você diz, “Na verdade eu quero regular e eu tenho luz, e eu quero médio bem e eu usei ousado.” Você pode ver aqui, ruim, ficou vermelho aqui e disse que seu site vai levar uma eternidade para carregar. Por que isso é ruim? É ruim para o usuário em geral. Então a pessoa vai para o seu site e leva muito tempo para carregar por causa das fontes, e isso provavelmente não vai valer a pena ou pelo menos uma consideração que você precisa ter em mente. A outra coisa é que o Google usa velocidade da página ou a velocidade de carregamento como um dos ticks do algoritmo de pesquisa. Não é a única coisa, mas é uma das coisas a considerar se você está construindo um site que realmente precisa classificar bem nos resultados do Google, que a maioria dos sites faz, você só precisa ter certeza de que você não está se matando colocando muitos fontes lá. Então eu tenho no momento apenas o regular e eu só preciso da versão light. Eu provavelmente vou precisar de negrito em algum momento porque meu site não é muito grande no momento, não é realmente chegar a esse ponto, mas vamos apenas mantê-lo leve. Nós o personalizamos, queremos, agora precisamos adicioná-lo ao nosso site. Uma coisa legal que você pode fazer enquanto estamos aqui é, não, eu vou cobrir isso um pouco, vamos para o site. Clique em incorporar. Assim como fizemos quando importamos o Google Map, é muito fácil. Eles fazem todo o trabalho para você. Pegue essa parte e copie-a. Estou usando o Comando C no Mac, Controle C em um PC, e ele diz, “Coloque isso na sua cabeça.” Eu posso fazer isso. Então vamos copiá-lo aqui no Visual Studio Code. Lembre-se, aqui está nossa etiqueta de cabeça, abre, fecha. Para onde é que ele vai? Vou colá-lo lá no fundo. Eles não disseram onde colocá-lo. Então eu vou apenas colá-lo lá. Você pode ver onde ele é adicionado. Dizia: “Quando esta página carregar, vá buscar as fontes.” Essas fontes, eu quero pegar Roboto e Playfair, e os brancos. Quero que descarregue este. Deve ser para os dois. O outro chama-se Display. Então você pode mudar isso, dizer mais tarde você é como, “Na verdade, eu não quero usar isso, eu quero usar o 500,” que é a fonte mais pesada. Você vai notar que eles eu não uso, eles dizem negrito, mas o código refere-se a ele como 700. Então, se eu quisesse 700 agora e não os 300, eu poderia apenas editar lá em vez de voltar para o Google e tentar personalizá-lo novamente. É metade editar, então você adicioná-lo ao HTML e, em seguida, você tem que editar para onde você deseja que ele se aplique. Então, no nosso caso, temos o meu Body Copy. Eu gostaria que tudo fosse Roboto. No momento, tenho tudo definido para Arial. Então eu vou entrar aqui e pegar o embutido. Então isso na cabeça, isso no CSS, e eu vou pegar o Roboto um, copiar tudo isso, e apenas substituir tudo isso. Salve agora, e espero que no meu navegador que agora é Roboto, e você é como, “Não parece muito diferente de Arial.” É tão bom, Roboto é o mais genérico, Open Sans, Source Sans, e Roboto são o Body Copy para on-line. É o mais comumente usado. Vamos aplicar um que seja um pouco mais específico ou pelo menos um pouco mais visualmente diferente. Então é este Playfair, clique em copiar e eu vou editar para o meu site, então eu vou adicioná-lo ao meu h1. Então aqui embaixo, eu vou colá-lo, salvá-lo, pré-visualizar. Olhe para isso, Playfair. As margens falharam, vamos brincar com elas em breve. Mas isso é como implementá-lo, despejá-lo na cabeça e, em seguida, editar no CSS. Agora eu disse, eu vou te dizer como eu escolho fontes. Então isso é um pouco mais criativo, como eu escolho minha fonte, então nada técnico. Você fica sozinho aqui para poder ir para o próximo vídeo se estiver contratando. Mas se não, fique por aí, vamos falar sobre porque eu estou fazendo esse processo de design. Estou usando o Adobe XD. Você poderia estar usando algo assim. Eu não sei, PowerPoint, se é aí que suas habilidades estão ou Photoshop para fazer web design, Illustrator para fazer web design. Eu tenho cursos sobre tudo isso se você quiser ir conferir. Mas vamos dizer que você está usando XD e você não vai ter Roboto ou Playfair em seu computador, para realmente começar a usar, mas você quer simulá-lo em seu design real antes de ir para implementá-lo para o site. Então, o que você faz é no mesmo lugar, no Google Fonts, você começa exatamente a mesma parte. Você vai, eu quero baixar tudo isso, e você adicioná-los ao grupo como nós fizemos. Lá em cima, no topo desta pequena, veja a pequena flecha aqui, que era a coisa que eu ia tentar mostrar-lhe mais cedo, mas nós nos separamos. Clique nisto. A coisa legal sobre isso é que vai baixar essas fontes para o seu computador. Você pode clicar duas vezes neles, abri-los e eles serão instalados, e eles são livres para usar, eles são muito legais. É uma boa maneira de obter fontes grátis. O que você pode fazer se você estiver baixando-os para o seu próprio computador vai realmente personalizar e passar e simplesmente levar todos eles. A coisa legal sobre eles é que você pode usá-los para design gráfico, bem como web design, apenas um ótimo recurso para fontes. Então você sabe como baixá-los. Vamos falar sobre como escolhê-los, como você escolhe estilos. Então vamos voltar para o Google Fonts, então eu estou apenas clicando no logotipo aqui. Google em si tem algumas características agradáveis, enquanto digamos que estamos fazendo alguns títulos, e eu quero encontrar algumas fontes título, Display é o termo geral para um pouco mais fontes criativas. Então você pode passar por isso, April, eu gosto dele, e encontrar a coisa que vai funcionar para você. O mesmo com Body Copy, ou você vai fazer um Serif ou um Sans-Serif. A diferença é que uma fonte Serif é como Times New Roman. Ele tem todos os pés pequenos extras nos ins que são chamados Serifs e Sans-Serif é sem pés. Então é uma coisa mais comum e muito fácil de fazer. Isso não vai ser Font 101, mas uma maneira básica real de escolher fontes para o seu site é sempre escolher um oposto. Então, se os cabeçalhos são fonte Serif, escolha uma cópia de corpo Sans-Serif, há bastante mudança visual neles para. É um bom ponto de partida. É muito difícil obter duas fontes Serif para ser o cabeçalho e a fonte Body Copy porque muitas vezes suas alterações não são grandes o suficiente para ter uma distinção visual agradável entre os dois. Então, uma maneira fácil e agradável é escolher um para o título e depois um para o Body Copy. Outra regra é apenas escolher duas fontes. Uma fonte pode funcionar se houver o suficiente, uma fonte Sans-Serif como Roboto, que você poderia usar para todo o site. Por quê? Porque há um monte de tamanhos diferentes para isso. Então o preto é muito pesado e muito distinto. Então você pode usar isso para os títulos e, em seguida, usar o meio ou o regular para o Body Copy. Isso vai funcionar bem também. Algumas dessas fontes simplesmente não têm muita variedade, elas podem ter apenas alguns tamanhos. Outra coisa que você pode fazer aqui é que o espaço reservado marca aqui, você pode realmente clicar nele. Você pode digitar meu nome. Digamos que você está fazendo um design para alguém e você precisa aplicar a todas as fontes. Porque às vezes você baixa uma fonte, você fica tipo, “Isso parece incrível.” Então você baixou e digita seus litros, diz: “Cara, fica bem na linha, mas quando baixou, não parece bom.” Você pode fazer tudo aqui, brincar com os tamanhos e os pesos, e isso é divertido. Outras coisas que você pode fazer quando você está escolhendo, especialmente uma fonte de título, para o nosso design aqui, não é tão ruim. Consegues ver que temos três palavras no topo? Mas lá fora é bem pequeno. Digamos que você está fazendo um site e ele está cheio de posts, artigos, receitas ou, eu não sei, mas você vai ter muitos tamanhos ou comprimentos de títulos variados. Alguns podem ter apenas 20 caracteres e outros podem ter 40 caracteres. Você não precisa, mas é uma consideração que eu definitivamente levaria em conta é a largura. Se eu ativar a largura e arrastá-la para baixo, eu vou me dar acesso a, vamos ativá-los, eu vou me dar acesso a fontes que são apenas mais finas, e você pode apenas obter mais on-line. Então diga este aqui ou este aqui e então tudo ótimo. Mas digamos que gostemos, vamos subir mais um para lhe dar mais variedade. Não importa, só escolho um. Veja este aqui, em vez de usar o que estamos usando Playfair, este aqui tem um potencial de encaixar mais personagens em uma linha e não quebrar em dois. Então a largura é algo para olhar. Mas digamos que você é tipo, eu ainda não sei como escolher, e usar o termo pares de fontes. emparelhamentos de fontes são uma dica muito útil. Acabei de colocar pares de fontes no Google e coloquei na data deste ano. Porque há coisas antigas por aí, só quero coisas contemporâneas. Faça uma busca por isso. Eu cliquei nos dois primeiros resultados. Não se preocupe com esses sites, faça o mesmo e veja que estamos em 2020. Você pode ver que a coisa legal sobre pares de fontes é que alguém, e este caso é um DB Morgan. Ela passou e escolheu fontes que combinam bem e as colocaram no local, o que eu realmente gosto. Porque você pode ter algumas idéias de design legal e ela é escolhida, você pode ver Seriifed, Sans-Seriifed, Sanifed, Sans-Seriifed, nem sempre é verdade, mas você pode ver San-Seriifed, Seriifed. Comparamentos de fontes, você pode ir, eu vou usar Raleway e Lato. Estes dois ou combinações de tudo, você escolhe o seu próprio, mas é apenas útil para encontrar outras pessoas. Eu gosto deste. Nunca vi isso móvel. O emparelhamento de fontes é útil, fontes do Google é um lugar, é o lugar principal. Existem outras opções para isso. Dobby fazê-lo, Font Squirrel faz isso, há alguns outros lugares que fazem fontes livres ou até mesmo fontes pagas. Mas para implementá-los como super fácil, basta adicionar o código à tag head e , em seguida, adicioná-lo aos seus CC da coisa que você deseja estilo. Amigos, isso foi tudo para fontes. Nosso site está começando a parecer um pouco mais agradável agora com nosso gradiente e nossas fontes, eu vou vê-lo no próximo vídeo. 46. Qual é a diferença entre os tamanhos de fonte PX, EM e REM: Olá a todos. Este vídeo vamos falar sobre por que você não pode mais usar pixels para tamanhos de fonte. Vamos usar rems e EMS. Sim. Vamos olhar para as diferenças entre eles, como calculá-las. Neste vídeo, eu fico realmente auto-consciente sobre meu sotaque. Sinto que tenho um sotaque neutro, até começar a falar sobre rems e EMS. gosta, “você não tem sotaque neutro Dan.” Sinto-me como se tivesse. Homem internacional. Nota: se eu me apresentar na Irlanda e disser: “Meu nome é Dan”, eles sempre dizem “Oi Dean”. Sim. Recebo mensagens de texto, “Ei Dean, te vejo no fim de semana”. Meu nome é Dan. O Dan. Sou Daniel na Irlanda, principalmente. Coisas que você não precisa saber, vamos entrar em rems, EMS, pixels. Primeiro, vamos fechar o que estamos fazendo agora. Só vamos mover isso em seu próprio pequeno documento porque vamos fazer um pequeno experimento. Então vamos para Arquivo Novo. Eu vou salvar este, e eu vou chamar este fontcraziness por html. Agora, nós vamos estar lidando com fontes porque ele é usado um pouco para eles, mas é uma medida em geral. Você pode usá-lo para dimensionar caixas. Vamos adicionar todas as nossas coisas normais do tipo doc. Em seguida, no fundo aqui, vamos jogar em algumas coisas. Vamos colocar duas etiquetas P. Põe o teu nome nelas, duplica-as. Agora, já fizemos duplicação antes? Se não, cobriremos de novo. Mantenha pressionada a tecla Shift e, em seguida, mantenha pressionada em um Mac, é a tecla Option e, em um PC, é a tecla Alt. Em seguida, aperte a seta para baixo. Isso duplica a linha no seu. Então temos dois deles. Vamos chamar este, como devemos chamar este? Vamos dar uma aula a este, e vamos chamar isso de tamanho ruim. Este aqui vai ter uma classe de bom tamanho. Então, no topo, aqui vamos estilizá-lo. Você deveria usar uma folha de estilo externa, mas vamos voltar para a velha escola. Nós só vamos estilizá-lo e o sucesso aqui, só para tornar mais fácil. Então vamos estilizar os dois. Até agora, nós os colocamos dizendo que tamanho ruim é o tamanho da fonte é, digamos que queremos que seja, não sei, 30 pixels. Infelizmente, esse é um tamanho ruim. Pixels são o que chamam de fontes absolutas. São iguais em todos os computadores e não podem ser trocados. Eles são tipo, você tem que ter 30 anos. Pixels é uma fonte absoluta, não pode mexer com eles. O que precisamos é de algo chamado fonte relativa, e é aí que ele eme e rems entram. Então vamos apenas verificar o que está acontecendo primeiro, vamos provar em um navegador. Feche, abra de novo. Então fizemos 30 pixels para ele. Então, em vez de usar pixels, vamos fazer outra fonte, e vamos fazer este é o tamanho bom. Este aqui vai ter o tamanho da fonte de, vamos usar, digamos três R-E-Ms. Esses são os rems do usuário. Estes ems e rems, vamos falar sobre a diferença de dois, mas rems é o que vamos usar e provavelmente a coisa mais contemporânea comum de usar. Agora, vamos ver como eles se parecem primeiro e depois vamos falar sobre o que eles são. Então, salvando, provando o navegador. O que eu poderia fazer por este vídeo, é apenas tê-lo aqui, para que todos possamos ver tudo. Legal. Então, três rems é maior que 30 pixels. Por que é isso? Um rem ou um em. Eles são muito comuns, muito parecidos, pelo menos. Então três em ou três rem, não importa. Eles são três de qualquer que seja o tamanho padrão da fonte no navegador. Então o navegador, se eu colocá-lo em uma etiqueta P sem nada nele. Então, uma etiqueta P, e coloquei Daniel Scott na parte de baixo aqui. Esse é o tamanho padrão da fonte. Eu não o estilizei, não fiz nada a ele, isso é apenas um tamanho. São 16 pixels, geralmente sobre isso. Navegadores diferentes têm uma aparência ligeiramente diferente da fonte, mas o Google Chrome, que estamos usando, tem 16 pixels como tamanho de fonte padrão, 16. O que um rem ou um em faz é dizer: “Eu sou três vezes qualquer que seja o padrão”. Então três vezes 16 é? Eu não posso fazer matemática tão bem quanto eu posso soletrar, é 48. Então, três rems no momento, que tem 48 pixels de altura. Por que fazemos isso em vez disso, porque podemos apenas digitar 48 e deve ser o mesmo? Quarenta e oito pixels, o mesmo tamanho. tipo 48 parece mais fácil. Agora a razão pela qual fazemos isso, é para pessoas que têm dificuldade em ver o site. Digamos que sou deficiente visual e acho isso muito pequeno. O tamanho padrão da fonte é muito pequeno. Eu posso ir para o Chrome e dizer Preferências, e eu posso dizer realmente aqui, eu vou dizer, “Eu vou torná-lo maior, eu vou torná-lo muito grande.” Porque é disso que eu preciso, exatamente o que eu preciso para ver as coisas. O que você vai notar é muito grande. Vamos verificar o nosso documento. Agora, o que acaba acontecendo é que esse cara ficou maior, esse cara não. Lembre-se que eles eram do mesmo tamanho. Vamos verificar as configurações, vamos colocá-lo de volta para baixo. Média. Então eles são exatamente do mesmo tamanho. Eu disse, “você tem 48 e você acaba sendo 48”, mas na verdade é mais apenas vezes no padrão, enquanto eu faço isso maior. Fica maior para mim. Você pode ver se eu sou deficiente visual, isso não é bom. Isso é ótimo. Então é isso que acontece. Essa é a razão pela qual o Google realmente quer incentivá-lo. Então vamos usar isso para que as pessoas possam usar nosso site melhor. Uma das outras razões, é que o Google irá basear o seu site em quão acessível é para as pessoas que precisam de alguma ajuda extra. Então, novamente, de volta aos rankings. Se você está construindo um site, você quer que o Google o ame, para que ele classifique você, e uma de suas medidas, juntamente com um milhão de outras, é que seu site seja acessível às pessoas que precisam dessas mudanças feitas. Então é por isso que usamos rems ou EMS. Na verdade, vamos voltar ao meu tamanho normal, normal. Por aqui do mesmo tamanho. Se eu mudar isso de Rems ou EMS, não vai mudar. Falaremos sobre isso a seguir, a diferença entre REMS e EMS, mas antes disso, você precisa superar meu sotaque, porque REMS e EMS provavelmente parece muito ruim. Eu sei, é o meu sotaque. Sei que Rems e Ems parece estranho. Rems, Ems, lá vamos nós. Isto vai ser um pouco dobraçador de cérebro. Então vamos começar. Então eu tenho esses dois. Vamos nos livrar dessa tag P aqui. Guarde-o, por isso desapareceu. Então, digamos que eu tenho uma etiqueta P aqui embaixo. Tab através. Vai ter uma palavra diferente aqui, vai ter picles só porque. Este picles eu gostaria de dar-lhe uma classe de, Eu já tenho algumas aulas. Vou usar vamos dizer mal, não, bom tamanho. Não queremos usar tamanhos ruins, então tenho um bom tamanho. Parece exatamente o mesmo que o resto deles, mas sabemos que em um site, temos tags corporais, mas nunca temos apenas tags p pendurados por si mesmos. Eles também estão dentro de contêineres, que estão dentro de tags principais, que estão dentro de seções. Digamos que este tipo está dentro de uma etiqueta, por isso vou pôr uma etiqueta à volta do lado de fora dele. Vou chamar essa etiqueta de “Minha caixa”. Vou pegar a etiqueta div, então ela abre lá e fecha do outro lado, e então faz tudo parecer bonito. Estamos bem com isso. Esse cara está dentro de uma div chamada “Minha caixa”. Parece o mesmo. Agora, vamos começar com a minha caixa. Digamos que estamos usando EMS. Parece exatamente o mesmo. É aqui que vem a diferença. Mas quero que a minha caixa faça algumas coisas. Ele vai fazer algumas coisas para mim, ele vai dizer, eu vou fazer 2ems. O que acaba acontecendo é que eles acabam se juntando. Minha caixa é 2ems e, em seguida, bom tamanho aplica-se também, então acabamos com 5ems. Somos como compostos. A diferença é que se eu usar rems. Tão bom tamanho agora, se for um rem, ignora o tamanho rápido das etiquetas e diz: “Não me importo com o que você faz ou o que o resto do mundo está me dizendo para fazer. Eu vou voltar para a fonte.” R é raiz, então raiz em. Ele vai todo o caminho de volta ao início e diz, “Tudo bem, o padrão ainda é 16, então eu tenho 3 vezes 16.” Não é tão complicado no nível em que estamos agora porque não temos muita coisa acontecendo, especialmente neste vídeo, mas mesmo em nossos outros sites, não é tão grande. Mas quando você chega a frameworks e WordPress e coisas grandes e enormes que você está usando ou tentando editar, às vezes você fica tipo, “por que você é tão grande ou pequeno?” Há todas essas coisas acontecendo. Se você fizer um rem, ele diz: “Esqueça todas as outras coisas que me disseram. Eu só vou ser três vezes o padrão.” Agora, você pode usar pixels? Você pode totalmente. Se você for tipo, “Cara, isso era como Nárnia. O que foi isso? Início? Há muita informação, coisas dentro das coisas, rems, ems, seu sotaque louco.” Você pode apenas usar pixels. O site não vai explodir, mas eu estou tentando fazer duas coisas, uma é você precisa ser um bom web designer para deficientes visuais e também, você vai correr para esses rems e ems mais tarde quando você estiver trabalhando com outros sites e modelos. Outra coisa útil é saber, é útil? O que é três em? Digamos que eu queira escolher um tamanho de cópia corporal para este aqui, e eu quero que ele tenha 20 pixels porque foi nisso que eu o projetei. O que é isso em rems? Há calculadoras online. Você pode fazer ems para calculadoras de pixels ou rems para calculadoras de pixel. Mas estranhamente, minha calculadora aqui, se eu quiser que seja 20 pixels, eu posso vezes por 0,0625. Anote, post-it e anote e ele lhe dará os rems ou ems, a mesma coisa. Então é isso que vai ser. Usaremos os rems apropriados. São 20 pontos. Se eu quiser que seja 48, eu digito 48 vezes 0,0625, e novamente, 3 rems. Mas isso provavelmente não vai ficar na sua cabeça como tem a minha. Há calculadoras, apenas o Google. Eles são fáceis de fazer, sei que um tem cerca de 16 anos. Quando eu digo cerca de 16, diferentes navegadores tipo de tratar o tamanho da fonte padrão um pouco diferente. Você notou como o Google não disse 16 pixels, disse médio? Você deve dizer 16 pixels avisos médio. Tudo bem, então eu vou salvar e fechar isso, e nós vamos revisar e editar nosso grande site agora. Feche isso, faça isso maior, abra tudo, nosso explorador precisamos de índice, estilo, porque precisamos voltar agora e consertar as coisas que fizemos. Nós fizemos nossos tamanhos de fonte, então o que eu vou fazer é mudar meu tamanho de fonte padrão de 16 para ser um tamanho de fonte de 1,125 rems. Você poderia colocar 1.1. O 0,25, o extra 25, está realmente mudando muito? Cabe a você. É o quão legal você é sobre esse tipo de coisa. Vamos dar uma olhadinha. Todo o meu tamanho de fonte padrão aumentou um pouco. Vamos ver este aqui. No meu documento XD, é 52. Então aqui eu vou encontrar meu 'H1' e eu digo, “80 não é o que eu quero.” Eu vou fazer 52. Então 52 vezes 0,0625. É um pouco maior do que 3 rems. Quanto me importo com os 0,25? Provavelmente não o suficiente para nos preocuparmos, mas vamos colocar tudo. Rems, vamos dar uma olhada agora, e é do tamanho certo. Sim, parece bom, mas pelo menos combina com a minha maquete aqui. Agora uma das outras coisas que acabei de mencionar no final disto é que quando eu estou olhando para este design aqui, esta fonte parece realmente leve, e é exibida de forma diferente do que está no meu site. Ele só se torna diferente. Esse é o peso certo porque eu economizei o topo aqui no Visual Studio Code, e lembre-se aqui, eu diria que Roboto é 300. Então ele está exibindo o peso certo. O problema é, é que no XD vai usar Roboto 300 de forma diferente do que o seu site vai. A coisa é que se eu olhar para isso no Safari e depois no Firefox, todos eles vão fazer um pouco diferente. Incomoda-me, como designer, que as fontes não parecem exatamente as mesmas em muitas coisas. Acho que essa é a grande coisa que você precisa deixar ir se você está vindo de um fundo de design mais tradicional. Você só tem que esquecer as coisas porque você não pode forçar o alias de fontes, e uma coisa que me lembrou é que nós só tivemos um tamanho na mão. Digamos que você tem dois, há 300 e 500 e 700. Então você tem tamanhos diferentes. Não os implementamos porque não precisávamos. Mas digamos que você tenha tamanhos diferentes que você escolheu nas fontes do Google. Aqui, você pode ir através da seção do corpo para usar, é este aqui, é o peso da fonte, e você diz, “Na verdade, eu quero que este seja 600.” É isso. 600. Será uma fonte 600 se você tiver várias opções. Não precisei porque só tenho um. Tudo bem, vamos seguir em frente. Vamos consertar tudo isso com coqueluche e ignorando as lacunas e espaços entre eles. O que está incorporando, espaço após parágrafos, todas essas coisas divertidas no próximo vídeo. 47. Espaço de altura da linha entre parágrafos, também conhecido como espaço após: Olá a todos. Vamos de um terrível espaçamento de linhas e todo tipo de amontoado até agradável, respirável e legível para combinar com a nossa maquete. Vamos aprender algo chamado altura da linha. Então vamos olhar para o espaço entre parágrafos, o espaço depois, mas realmente é chamado de margem inferior. Vamos entrar agora e descobrir como fazê-lo. Muito bem, então espaçamento de linha e altura de linha. Vamos fazer o espaçamento de linhas primeiro. É o espaço entre eles. Então este é um parágrafo bem ali. É uma etiqueta p, divida-as em duas linhas. Esse é o espaçamento de linhas. O espaço entre parágrafos é entre essas duas tags p separadas, e elas são diferentes. Você sempre começa com a altura da linha primeiro porque a altura da linha afeta tudo e então podemos olhar para fazer o espaço entre os parágrafos. Espaçamento de linhas é muito fácil, vamos para o Visual Studio Code. Não temos um estilo para o seu “p tag get”. Vamos dizer que a etiqueta p é, o que vamos fazer? O que vamos fazer? Chama-se altura da linha. A altura da linha depende das medições. Depende se você está usando rems como nós usamos. Usamos rems para altura de linha porque queremos que correspondam. Se você estiver usando pixels para tamanhos de fonte, use pixels. Agora, quão grande é a altura da linha? Há muita adivinhação. Um não vai ser nada. Seja qual for o tamanho da cópia do corpo. Decidimos tudo aqui, que significa que a etiqueta p é 1,125. É aí que começamos, então qualquer coisa acima disso, vai mostrar uma lacuna. Então, se tivermos um 1.5 rem, vai ser uma pequena lacuna. Até Rem. Vamos verificar. Há um pequeno espaço aberto. Vamos dar uma olhada em 2.5 só para mostrar, grande lacuna. Você decide. Seja qual for o seu tamanho, cerca de metade está ficando maior. Isso é sempre um bom ponto de partida na minha cabeça, e funciona para mim. Mas eu quero este parágrafo para espaçar um pouco, legal. Para fazer esse espaçamento entre parágrafos, não há nenhum especial real que você usou na margem ou no fundo do preenchimento. Isso não importa. Parte inferior da margem ou inferior do preenchimento. Por quê? Porque vai parecer visualmente o mesmo. Sabemos que faz coisas diferentes, empurra de dentro ou de fora, mas não importa. Agora, isso basicamente qualquer coisa acima de zero vai mostrar-lhe algo que o padrão é zero de nosso CSS reset. Vejamos 0,5 rem. Isso é provavelmente o que eu quero. É só uma lacuna maior aqui. Você pode colocar uma grande lacuna lá dentro, é com você. Aqui está. Você deveria colocar um zero na frente dele. Eu acho que se eu deixar o zero fora da frente ele sempre funciona, mas eu aposto que há um caso onde ele não funciona. Sejamos sintaticamente corretos. Tudo bem, a próxima coisa que eu quero fazer é a etiqueta h, ok, o h_1 pelo menos eu quero empurrar um pouco de espaço por baixo dela. Tenho de encontrar o meu H_1, vamos fazer a mesma coisa, vamos fazer. Agora, meu h_1 não quebra em duas linhas. Se acontecesse, teríamos que começar a olhar para a altura da linha. Mas não acontece, então vou usar a margin-bottom. Quão grande deveria ser? Não faço ideia. 0,5 rem, muito grande. Fechei algo lá. Vocês levem tudo de volta à estaca zero. Isso foi muito grande. O que devemos fazer? 0,1 a 0,2 então. Vamos dar uma olhada. Talvez ainda um pouco grande, vamos fazer 1 rem. Isto é bom. Esse espaço embaixo do h_1 funciona para mim. Tudo bem, e o que podemos fazer aqui só para arrumar tudo, você pode ver que esta tag div vai até o limite aqui. O que essa tag div chama? Não me lembro, herobox1, podemos adicionar um pouco de estofamento. Então, herobox1, vamos adicionar um pouco de preenchimento e vamos adicioná-lo à direita. Eu vou adivinhar para alguns pixels, isso funciona para mim. Muito bem, altura da linha, o espaço entre as linhas é chamado de altura da linha. Eu chamei isso de espaçamento de linha antes, altura de linha. Não existe espaço após ou espaço entre parágrafos como em algo como Word ou InDesign, ok usa margem ou preenchimento inferior. E, em seguida, certifique-se de que a medida que você está usando é a mesma, ou pelo menos a unidade de medida é a mesma que a unidade que você está usando para o tamanho da fonte. Então pixels, isso seria pixels também. Certo, vamos para o próximo vídeo. 48. Quando usar uma imagem svg em vez de jpg ou png em web design: Ei, ali. Este vídeo vai falar sobre as diferenças entre JPEGs, PNGs e SVGs; vamos até mencionar GIFs no final. Se você sabe de tudo isso, você pode pular em frente. Não vamos realmente fazer nada nesta aula. Muitos de mim conversando e explicando. Mas se você talvez nunca ouviu falar de um SVG, Scalable Vector Graphics, hangout porque este é incrível. Vou te mostrar um exemplo. Veja, PNG embaçado. Muito bom SVG, e escala para sempre. Assistir. Continua a aumentar a escala. Oh, olha como ele é bom. Tudo bem, vamos entrar e descobrir tudo isso. Tudo bem, vamos falar sobre os principais tipos de imagem: JPEG, PNG e SVG. JPEG e PNG estão por aí há algum tempo. JPEG é provavelmente o mais comum. JPG, JPEG; como quiser chamá-lo. É incrível para imagens como esta. Oi, Dan. Fotografias fazem muito bem como JPEGs. Por quê? Porque o tamanho do arquivo é muito pequeno em relação à qualidade que você pode obter com ele. Você pode obter algo que parece realmente bom, um monte de cores; há milhões de cores em um JPEG, mas o tamanho do arquivo em comparação é muito, muito pequeno, então usamos isso. Onde os JPEGs pararam, e você fica tipo, “Ok, vamos usar JPEGs para tudo.” O grande problema com JPEGs é que não há transparência. Você não pode ver através de um JPEG. Não há como ter um buraco para mostrar as coisas e é aí que o PNG começa. Ok, agora, vamos olhar para o nosso logotipo que fizemos. Este logotipo aqui. Consegues ver as nossas Roar Bikes? Na verdade, é uma imagem. Você pode ver quando eu arrasto por aí? Na verdade, é ver através. Então eu posso mudar a cor por trás dele e a cor muda lá. Se isto fosse um JPEG, escolha uma cor para o fundo e seria para sempre. PNGs são incríveis. Eles têm um monte de cores também. Você pode usar milhões de cores em um PNG, mas também tem transparência. Você pode estar dizendo: “Por que não usamos isso?” Porque os tamanhos de arquivo são enormes para PNGs em comparação com um JPEG. Você tem que fazer uma troca fora. Preciso de transparência? Legal. Se você fizer isso, então você tem que deixar JPEG para trás. Se você não, como esta imagem aqui, definitivamente um JPEG porque não há transparência então eu poderia muito bem ter toda a bondade das cores com o tamanho de arquivo baixo. Agora, a terceira opção, o SVG. É bem novo. Se você ainda não ouviu falar disso, é um gráfico Vector Escalável, e vetor é o bit legal. Se você sabe sobre gráficos vetoriais, você vai dizer, “Realmente, você pode fazer vetor online.” Sim, você pode. Se você nunca ouviu falar de vetor antes, você pode pesquisar o termo. É vetor, V-E-C-T-O-R, porque não vamos cobrir muito aqui, mas o benefício disso, desde que seja uma forma muito simples como um ícone ou um logotipo, um SVG seria terrível para isso, mesmo se você quisesse transparência, seria terrível porque há tantos detalhes. Mas para formas simples, SVGs são brilhantes. Então o logotipo está aqui. Vamos trocar isto por um SVG e ver as vantagens. Vamos trocá-lo primeiro e ver a diferença e então eu vou explicar as vantagens para qualquer SVG. Em seus arquivos de exercícios, então, se você for para “Arquivos de Exercício”, “Projeto 2", havia um PNG leão que usamos anteriormente. Vamos usar este chamado SVG. Copie isso. Vá para sua área de trabalho, coloque-a em sua pasta do Project 2, em suas imagens e cole-a. Agora, em seu código, vá para Visual Studio Code, pressione sob sua tag de imagem na div do logotipo. Mudar PNG para SVG. Vamos dar uma olhada na diferença. Este é o original e prepare-se, olhe para o segundo. Pronto, nítido e claro. É óbvio que estás a ver este vídeo. Às vezes, dependendo da sua internet, às vezes as pessoas escreviam comentários no fundo, como: “Parece o mesmo.” Você pode estar olhando para uma resolução muito baixa do vídeo. Muitas vezes, se você marcar no canto inferior direito do vídeo, pode aumentar ou diminuir a qualidade do vídeo que está assistindo. Só para que você possa ver esses detalhes, mas vamos torná-lo um pouco mais óbvio. Eu posso ampliar, então se eu ampliar este aqui, eu estou segurando o comando e batendo nele algumas vezes. Isso é em um Mac, Control plus em um PC. Ampliando meu site para que você possa ver a grande diferença. Um PNG usa pixels para criar seu gráfico. Embora fosse muito pequeno, estava tudo bem. Tinha uma borda ligeiramente embaçada, mas vetor, este SVG, ele escala até o infinito. Você pode dimensioná-lo tão grande quanto você gosta e a coisa legal sobre ele é que ele sempre será nítido e claro do lado de fora e ainda tem um tamanho de arquivo muito pequeno. Você poderia fazer um PNG parecer muito bom neste tamanho. Você pode torná-lo maior ou torná-lo ótimo, mas o tamanho do arquivo vai ficar realmente grande. Você vai encontrar muitos sites agora usando SVGs, compatibilidade de navegador é realmente bom agora. Se for um ícone ou um logotipo, use um SVG. É uma boa regra de cobertor. Se for uma imagem, mostrarei um bom exemplo. Este aqui. Este é um gráfico que eu fiz para uma parte posterior da aula e vamos dizer que eu queria ficar exatamente assim. Meu iogurte gigante de carne de erva que fiz para vocês. Mas tem uma cor de fundo. Isso funcionaria melhor como um JPEG. Vou te mostrar como exportar tudo isso em um segundo, mas vamos entendê-los primeiro. Isso seria ótimo como um JPG porque ele tem muitas cores aqui e é razoavelmente fotográfico e o tamanho do arquivo será bom e pequeno. Mas digamos que eu preciso que ele tenha fundo vazio. Essa coisa de xadrez é a maneira do computador dizer que não há nada por trás disso. Isso teria que ser um PNG. Por que não seria um SVG? Um SVG precisa de detalhes muito simples. Se este fosse um SVG, o tamanho do arquivo seria enorme e ficaria terrível e simplesmente não funcionaria. Não posso fazer isso no SVG. SVG perfeito para este tipo de coisa quando há um linhas realmente simples. Qualquer coisa feita no Illustrator pode ser exportada como um SVG porque isso é realmente básico. Formas básicas, cores simples, fácil. JPEGs para imagens, PNGs para imagens que precisam transparência e qualquer coisa que seja realmente simples linhas como ícones e pequenos gráficos, setas, esse tipo de coisa seria perfeito para um SVG. Você é como, “Ele não mencionou GIFs.” A única razão pela qual você usa GIFs nos dias de hoje se precisar animá-los. Os GIFs têm uma grande desvantagem. Eles só têm 256 cores, o que é uma dor. Você só pode fazer coisas pequenas e as cores não podem ser muito amplas. Não há razão para usar isso a menos que você queira animá-lo e mesmo assim, animando GIFs, eles são realmente nicho caso de uso. Você pode animar em CSS e muitas outras maneiras melhores. Eu não vou cobrir GIFs aqui. Eu cobrir muito mais e meu outro, dizem aulas Photoshop e Illustrator. Fazemos todo tipo de GIFs animados lá, mas não vamos usar esse tipo de web design tradicional agora. O que vamos fazer é agora que você entende essas coisas. Eu poderia realmente mudar a próxima parte deste vídeo para outro vídeo que você pode apenas assistir que agradável e por si só. Mais tarde, você pode voltar e mostrar como exportar esses SVGs, PNGs e JPEGs facilmente. Sim, então vamos fazer isso no próximo vídeo. 49. Como exportar svg png jpg do XD Photoshop Illustrator para design de sites: Olá a todos, este vídeo vai mostrar-lhe como exportar gráficos de um monte de produtos de software da Adobe. Vamos ver o Illustrator, Adobe Photoshop e o Adobe XD. Agora eu sei que nem todo mundo vai ter o software, mas é realmente comum em, como um web designer ter acesso a isso. Você não tem que pagar um produto pago. Há testes gratuitos para eles, provavelmente vai ser vezes que você vai ter que encontrar este software, ou pelo menos para arrastar os gráficos para fora deles. Vou mostrar-lhe como fazer tudo isso, neste vídeo. Tudo bem. Isto vai ser apenas uma corrida rápida. Quero lhe dar algumas habilidades básicas. Como web designer, você precisará saber com frequência. Digamos que você está trabalhando com um mais de designer gráfico, que é fazer o layout que projetar dele. Na verdade, você só está fazendo a codificação. No entanto, basta entregar um documento do Photoshop, aqueles estão ansiosos para fazer isso, ou um documento SD, e dizer corrigir isso para o Illustrator, ou você pode estar fazendo a coisa toda como eu. Gosto de fazer a parte de design, assim como a codificação. Vamos percorrer os programas que eu uso. Não vão ser todos eles, mas eles são realmente comuns para a indústria. Vamos começar com o XD. Adobe XD, é como UX Design Program. É um novo que está ganhando popularidade, é realmente um grande concorrente para esboçar. Tudo bem. Exportar a partir disso é muito fácil. Clique no gráfico que você projetou no XD e pressione “Command E” em uma marca ou “Control E” em um PC. Ou Exportação de arquivo, e vamos usar exportação selecionada. Apenas certifique-se de que está selecionado, e deve sair. Neste caso, vamos dar-lhe um nome. Vou ligar para este, homens de bicicleta. Você usa sublinhados ou hífens. Você não pode usar espaços onde é má prática usar espaços, porque alguns navegadores mais antigos para começar a gostar. Então eu vou colocar minha indústria na área de trabalho só para mostrar a vocês, e aqui em baixo, você pode decidir o seu formato, Easy-peasy. A PDS não vai funcionar para o nosso site. Então queremos PNG, SVG, que um JPEG. Neste caso, por causa deste, já falamos sobre isso. Qual é que queremos? Sim JPEG. Depois, há a qualidade. Para um site, nunca 100 por cento.Esta é sugestão, entre 40 e 80, realmente depende do gráfico. Esta é uma imagem stock. Está bem. É muito bom do outro jeito, mas lembre-se, é muito bom poder ir muito baixo se você tem algumas filmagens dos clientes, e é mostrado em um telefone celular, muitas vezes, a qualidade pode descer tão baixo. Basicamente, o que significa é que o tamanho do arquivo vai ficar menor, e é isso que você quer. Vamos falar sobre a velocidade de carregamento da página ser uma parte importante da classificação no Google. Então, o meu caso, porque esta é uma imagem bastante importante, eu provavelmente conseguiria 80%. Para esses caras aqui em baixo, que apenas gráficos de apoio atrás, eu provavelmente iria para entre 40 ou 60. Você pode digitar e realmente fazer uma sinfonia. Agora não vamos cobrir como 2x e 3x, no momento, vamos olhar para imagens responsivas um pouco mais tarde no curso. Mas, por enquanto, é assim que consigo o meu JPEG. Aqui vamos nós, e vamos fazer mais alguns do XD e então vamos para outro programa, lá vamos nós. Acabei de clicar na minha área de trabalho agora, eu tenho JPEG, apenas saindo sem fazer nada, isso é 36 kilobytes, é de boa qualidade. É assim que se liberta o JPEG. Este aqui. Agora, o que deveria ser isso? JPEG ou PNG ou SVG. Então, replicar, você pode clicar com o botão direito do mouse neles, às vezes depende , este está sendo marcado para exportação, então vamos usar um atalho, comando E. Eu vou usar um longo caminho. Este aqui, vai funcionar muito bem não é SVG, deixar todos os padrões, vamos clicar em exportar, e espero que na minha área de trabalho, eu tenho SVG. Aqui vamos nós. SVG não visualizou muito bem. Está bem, mas só esta, esqueci-me de mudar o nome. Posso fazer isso depois. Posso colocar hífens nele. Eu não sei agora. Lembra-te de o fazer. Agora, provavelmente não há razão para realmente exportar um JPEG, PNG neste caso, mas você sabe como fazê-lo. Está no mesmo menu suspenso, e não há ajustes reais para PNGs, basta ir e exportá-la. Estes aqui, para o tamanho das ervas daninhas é quando começamos a fazer aplicativos móveis. Quando exploramos para Android iOS, não precisamos dele no momento. Esse é o básico para o XD. Agora há muito mais nisso, se você fizer meus cursos Full HD, um capítulo inteiro sobre ele, nós não vamos fazer isso tudo aqui. Está dando isso a você, obter por coisas. Vamos olhar para o uso do Photoshop, muito comum usar o Photoshop, mesmo que seja como um programa de edição de fotos, é muito comum usá-lo ainda em web design. Então eu quero exportar essa coisa como, e nós queremos o fundo completo? Isso vai ser perfeito como JPEG, porque eu quero transparência. Vai ser um PNG. A razão pela qual este não é um SVG, é porque não é realmente gráficos simples é muito acontecendo aqui. Tudo bem. Para exportar do Photoshop, há algumas maneiras, a melhor maneira é exportar arquivos, e esse nome insignificante aqui, é chamado Exportar como é brilhante. Se você estiver usando, Safe For Web, tudo bem. Só não é tão bom assim. Algumas pessoas lá fora podem estar lutando comigo por isso, mas essa é a coisa nova, e minha experiência é a melhor coisa. Então o mais legal é que você não precisa redimensioná-lo antes de vir aqui. Muitas pessoas vão dizer, “Oh, eu tenho essa grande imagem. Agora eu preciso ir para imagem, tamanho da imagem, torná-la menor e, em seguida, exportá-la. Em seguida, eles desfazem o tamanho da imagem para que ela fique grande novamente. Enquanto XD, o que significa que você pode fazer aqui. Tudo bem. Formate aqui. JPEG, GIF, SVG. Isso é tudo que você realmente precisa. Vou te mostrar algumas outras regalias. Você pode dizer, “Ok, ele precisa ser um JPNG, mas eu preciso que ele tenha 500 pixels de largura.” Você pode fazer isso nesta fase, o que é muito bom. Mas digamos que você precisa de uma versão menor também para algumas coisas que você pode acertar um pouco mais lá. Então você pode ter um que é metade do tamanho, então 0,5, bem, talvez um que é o dobro do tamanho sirva. Este é um design mais responsivo. Você pode adicionar diferentes versões do gráfico, diferentes versões, diferentes tamanhos dele. Mais alguma coisa? - Não. Clique em “Exportar” e eu apenas vinculo à minha área de trabalho. Vou ter um monte de SVGs no tamanho certo. Agora, nós realmente não precisamos cobrir isso, mas vamos fazer isso bem rápido. Exportar um JPEG apenas lá, e os controles deslizantes de qualidade apenas ao longo do topo aqui. Como dissemos antes, as mesmas regras aplicam-se neste caso, porque tem um fundo completo. Agora você vê a transparência porque é o JPEG, digamos que está tudo bem, é o que precisamos, e eu vou conseguir 60%, e a qualidade vai ser muito boa, porque é uma boa imagem que foi modelada na Adobe. Eu vou fazer isso em dimensão, que é legal, pequeno programa 3D que eles têm. Só vou ter um tamanho. Muito obrigado, e clique em “Exportar”. Agora, SVG vai funcionar. Este aqui não é realmente, é em um gráfico vetorial. Ele precisa ser algo desenhado com vetor agora em, desculpe, no Photoshop ele vai precisar ser algo desenhado com essas ferramentas. Você tem um monte desses, estas são todas formas vetoriais, e você pode ver que isso é realmente simples. Estes exportação grande é um SVG, isso não é. Agora, há muito mais que você pode fazer para o Photoshop, para o web design. Eu tenho um curso completo sobre isso também. Se você quiser procurar o meu Photoshop para o curso de web design. Mas a última coisa que quero mostrar é que você pode encontrar a camada, clicar com o botão direito do mouse nela e dizer “Exportar como”, ou usar a Exportação Rápida. O seu provavelmente vai dizer, “Exportação Rápida”, JPEG completo. Isso é bom. Eu mudei minhas preferências também, porque eu exploro principalmente como um JPEG ser ir para aqui. Você só exporta essa camada. Só mais uma maneira de chegar a ele. Há muitas outras coisas legais que quero te mostrar. vez, é um outro capítulo, e isso é lógico. Vamos ver o último da nossa gangue vai ser o Adobe Illustrator. Então este pequeno logotipo aqui, eu quero exportar este add é um desses gráficos aqui. Agora em ilustrado como painel legal, janela legal, e está sob exportação de ativos. Ok, este pequeno painel se abre. Há um já por algum motivo. Tudo bem. Então parece assim, e o que você precisa fazer é agrupar a coisa que você quer manter juntos. Se não está agrupado, acaba fazendo coisas estranhas. Então este é um grupo. Eu só arrasto para aqui, e há. Se for desagrupado, mostro-te o que acontece no caso de o fazeres. Aqui, porque é um pequeno pedaço se eu gráfico tudo, e arrastá-lo para dentro você vê, será como apenas pequenos gráficos sendo exportados. Então vamos desfazer isso. Legal, então eu posso arrastar isso, digamos, eu fiz um design de site completo em um Illustrator. É totalmente perfeito para fazer isso. Bem, deve agrupar esses 10, agrupá-los. Agrupei alguns deles, jogando todos aqui, então como um grande grupo que é Co. Eu posso dizer que na verdade eu faria todos eles para ser PNGs ou SVGs, e eu vou exportá-los, e colocá-los em meu desktop. Está ficando um pouco, me dê um [inaudível]. Está bem. Vai exportá-la. Agora, o que é realmente legal sobre isso? Onde estão os meus SVGs? Lá estão eles. Ilustrar como colocá-los em um pequeno grupo agradável. Há um, na verdade, que foi um bom argumento. Você pode ver que este vai para a linha azul em torno dele. Então ele só exportou aquele, que vai te pegar. Então, selecione ambos, clique em um, mantenha a tecla shift com o próximo. Ou eu acho que se você não tem nada selecionado, e você vai um seleto todos eles. Eu mudaria no meu teclado, clicava nos dois, pressionava a exportação, e deveríamos pegar os dois agora. Substitua. Lá está na minha área de trabalho. Legal. Activo 2 e activo 3. Tudo bem. A outra coisa legal que você pode fazer aqui. Bem, o que é legal sobre este painel de ativos é assistir isso. Se eu mudar isso para outra cor, em vez de ter o gradiente, eu escolho outra cor. você vê atualizado aqui, eu não preciso arrastá-lo para dentro e fazê-lo. Eu posso dar um nome aqui também, então eu posso chamá-lo de foguete. Posso voltar a exportar e poupa-me tempo. Eu tenho que arrastá-lo de volta, e identificá-lo novamente. Ele só atualiza instantaneamente. Eu só clique em Exportar, e aqui está o meu foguete. Mesmas coisas se precisar, PNGs ou JPEG, depende de você. Digamos três contra software, eles são antigos da Adobe. É bastante comum usar produtos da Adobe. O único outro que é usado muito comumente é algo chamado esboço. Ainda não tenho um curso de desenho. Mas se você ilustrar eu vou ter cursos genéricos ilustrados como essencial e avançado. Mas eu tenho um muito específico, para web design que pode ser útil para você. Ele é chamado de ilustrador para web design, é a interface de usuário mais legal estratégia e web design, mesmo para o Photoshop. Estas classes genéricas é um Photoshop ferramentas essenciais e avançado. Mas há um especificamente para web design e XD. Eu tenho que XD é apenas web design útil. Então só há um curso que deve escolher um. Mas espero que haja o suficiente neste vídeo para mostrar como obtê-los, pelo menos o básico deles. Mas é o software, e não foi muito de uma venda cruzada tentando esmagar outros cursos que você não precisa fazê-los, porque muitas vezes você apenas, em vez de fazer um monte de design, você pode ser apenas fazendo a codificação na criação. Tudo bem. Mas é tudo o que veremos no próximo vídeo. 50. Imagens de nível de bloco versus imagens de fundo em HTML e CSS: Oi lá. Neste vídeo vamos colocar as imagens de fundo do bacalhau semelhantes ao fundo que fizemos no projeto 1. Nós vamos adicionar um pouco de extravagância extra com a posição de fundo e vamos falar sobre a diferença entre imagens de nível de bloco e essas imagens que eu defini como fundos CSS. Vamos saltar para dentro e trabalhar para fora. Primeiro, queremos colocar esses gráficos de fundo. Agora, eu quero trazer à tona um ponto porque há momentos em que nós simplesmente colocar na imagem no HTML. Nós fizemos isso até agora com este aqui, é fonte de imagem e nós colocamos no lado HTML real, e nós fizemos isso quando colocamos como uma imagem de fundo. Lembre-se que fizemos isso no último projeto, tínhamos aquele gráfico de fundo gigante. Por que você faria as duas coisas? Agora, o que vai acontecer é que você terá uma mistura de ambos. A razão pela qual você o tem aqui no HTML é porque, se ele está no HTML, é o que é chamado de imagem de nível de bloco. Isso significa que ele é visto pelo navegador, ou pelo menos pelo mecanismo de busca. O mecanismo de busca aparece como o Google ou o Bing e vem aqui e diz: “Olha, há um site, é tudo sobre reparos de bicicletas.” Porque nós temos isso em nosso título lá. Também diz: “Oh, também há um texto sobre reparos de bicicletas. Há até uma imagem, que tem excitação do cara sobre fazer coisas com motos.” Tudo isso aumenta a capacidade dos motores de busca para entender como é o seu site e o que você deve classificar para. Enquanto aqui no CSS ele o ignora, ele diz, “Eu não me importo se você passou idades jogando com o cabeçalho superior porque ele não adiciona nenhum valor à pesquisa. Com seu acariciar é que, ou com seu espaçamento de linha, o mesmo problema são as imagens nos gradientes de fundo. Eles serão ignorados. É melhor ter tantas imagens como você pode no HTML porque você quer contá-lo contra o seu site ou contra ele em seu site, digamos. Considerando que a razão pela qual você coloca imagens no fundo como nós vamos fazer, neste caso é porque duas coisas.Uma é, [inaudível] suportando gráficos eles não são realmente tão úteis. Eles não são partes chave do site. Eles são apenas estilo. A outra razão é esta, queremos colocar as coisas por cima e isso torna super fácil quando é um gráfico de fundo CSS. Basta fazê-lo e é onde você coloca as coisas por cima. Enquanto que se você fizer isso com uma imagem, é realmente difícil colocar as coisas em cima dela. Vamos dar uma olhada rápida com a minha imagem aqui. Aí está a minha imagem, quero colocar uma etiqueta P logo acima dela. Vou colocar uma etiqueta P e vou colocar uma mensagem. Mas como estas são coisas em nível de bloco, texto em nível de bloco, imagens em nível de bloco, eles tentariam lutar uns com os outros. Você pode ver aqui que o texto empurrou esse cara para a próxima linha. Realmente não importa se este texto está na frente dele ou atrás dele. Eles realmente não querem misturar, eles são como óleo e água. Há maneiras de fazer isso acontecer. Você tem que começar a jogar com coisas como posicionamento e índice Z e é um monte de agitação. Para nos afastarmos dessa confusão, vamos usar uma imagem de fundo. Para fazer isso, precisamos copiar os gráficos. Vamos encontrar aquele arquivo de exercícios. Vamos para o Projecto 2, e eu quero estes três. Imagem de fundo 1, 2 e 3, vamos copiá-lo. Vamos para minha área de trabalho, encontrar o projeto 2, colocá-lo em nossa pasta de imagens e olhar, eles já estão lá dentro. O seu não vai ser, os meus são. Cole o seu aqui, os meus já estão aqui porque eu já tive um par de coisas como ir neste vídeo e está mal. Tentando explicar nível de bloco versus CSS fundo, ele me levou alguns passos, mas eu sinto que eu acertei isso desta vez, então é a última vez que eu vou fazer isso de qualquer maneira. Imagens do, vamos adicioná-los. Nós vamos para o cartão 1 e vamos fazer um par de coisas, vamos nos livrar da cor de fundo de todos esses. Aqui, aqui, aqui, aqui. Você não precisa mais deles. Cartão 1, vamos colocar em um fundo, você se lembra o que era? Imagem de fundo. Essa é fácil. A próxima parte disto é estranha. É URL. URL, alguns colchetes e dentro daqui você precisa digitar o caminho para a imagem. No nosso caso são imagens, e então eu posso clicar em “Cartão de Fundo de Imagem 1, e no final aqui, coloque um ponto-e-vírgula. Salve isso. Vamos verificar. Funciona. Você pode vê-lo repetindo lá, a imagem não é alta o suficiente para caber. Você nunca vai conseguir que a imagem se encaixe perfeitamente. Você pode forçá-lo, mas como estamos usando uma porcentagem, que é 30 por cento, vai ser muito difícil torná-lo perfeito. A maneira de fazê-lo se encaixar perfeitamente no fundo é, você se lembra qual era a coisa? Chamava-se fundo, não me lembro? Tamanho do fundo, talvez este, capa. É realmente útil propriedade CSS que apenas se encaixa na caixa em seu final. Se a caixa ficar menor, digamos que são 250. Na verdade, eu vou torná-lo substancialmente menor, só para que você possa ver. Uma largura de, vamos deixá-lo assim como uma altura mínima. Por que ainda é alto? Cartões aqui. Originalmente, adicionamos uma altura às cartas, e isso realmente ilustra por que é um pouco difícil adicionar alturas. Fazemos isso nesta aula só porque torna mais fácil para mim mostrar a vocês : “Fizemos uma etiqueta div e sabemos que está no lugar certo porque demos uma altura e uma cor.” Mas sempre que trabalho, nunca adiciono alturas. Alturas vêm do conteúdo. Eu vou apagar cartões, você faz o mesmo. Esperemos que agora, ainda está funcionando? - Não. Todos esses caras estão brigando. Esses caras estão mantendo sua caixa bonita e alta. Não é o que eu quero, então o que eu vou fazer é me livrar da altura mínima em você e você, e vamos ver. Aqui vamos nós. A coisa legal sobre isso é, se eu fizer 100 pixels de largura agora e torná-lo 50 de diâmetro, você pode ver que a imagem tenta esticar para preencher a lacuna? Se eu fizer isso 10 por cento, tampa ainda tenta colocar a caixa lá dentro. Foi uma explicação terrível. O que eu quero que você faça no entanto é que eu gostaria que você tivesse uma altura mínima de, digamos, 250 por enquanto para os três desses. Acho que foi fixado 300. Vamos mudá-lo aqui, e eu gostaria que você não tivesse altura nas cartas. Não há cor em nenhum desses. Dê uma olhadinha. Você tem que salvá-lo e dar uma olhada. Nós vamos fazer isso. Quero mostrar-lhe um pouco mais. Agora imagem L tem feitos sendo cortado porque o que acontece é esta capa por padrão que tenta santo tudo. Não, usa o canto superior esquerdo. Porque se eu fizer isso, não, eu não vou mais mexer com o alto, é usar o canto superior esquerdo e se eu fizer a caixa mais curta, você só vai ver a cabeça dela. Há uma maneira de forçá-lo a fazer o que você quer. Em vez de estar no canto superior esquerdo, você pode obtê-lo para ser o fundo. Você usaria algo chamado posição de fundo. Não quero dizer por favor, e agora, espero que devamos ver os pés dela. Estou a usar o botão porque isto aqui no topo, não me importo de ser cortado. Você pode usar o centro. Digamos que você queira cortar a diferença porque sua imagem tem um pouco de ambos, você pode usar o centro e isso significa que ele vai cortar um pouco do topo fora e um pouco do fundo fora. Vamos dar uma olhadinha. Vou voltar ao fundo. Vai desfazer. Eu gostaria que isso estivesse em todos eles. Eu vou pegar isso e eu faço o mesmo aqui, e o mesmo para três. Mas eu preciso passar e mudar aqui para dois e aqui para três. Vamos ver se correu bem. Aquele funcionou, o outro não funcionou. Bem, porque eu coloquei 12. Você viu. Aquele cara pode ser diferente. Você pode decidir ir ao centro para um ou outro. Eu acho que a grande vantagem disso é que nós sabemos metade o que é uma imagem em nível de bloco versus uma imagem de fundo CSS, e nós aprendemos alguns truques extras como brincar com a posição de fundo. Isto pode ser bom agora. Lembre-se do nosso primeiro projeto, a grande imagem de fundo, você pode passar agora e mudar a posição para dizer centro em vez de estar no topo. Vamos deixá-lo lá para este. Vamos embrulhar como sendo especificamente as imagens de fundo. No próximo vídeo, vamos terminar o, ou pelo menos começar, ou pelo menos fazer um pouco mais dos cartões. Vamos colocar os tiques, obter estilo, vamos fazer algumas coisas divertidas com cartões clicáveis completos. Vejo-te no próximo. 51. Finalizando nossos cartões: Tudo bem. Com toda a honestidade, este vídeo não é super emocionante. Vamos adicionar os H2 aqui em baixo. Nós vamos adicionar nossas tags p e fazer um pouco de estilo. É a carne e as batatas do curso. Fazendo isso, sabemos como fazê-lo. Vou dar algumas dicas e truques. Vamos fazer coisas divertidas com margens, mas quando digo diversão, pena assistir, é o que quero dizer. Nós vamos adicionar estes. Vamos saltar para dentro. Eu realmente não vendi, mas é a verdade. Não há momentos de Eureka neste, é só fazer coisas em vídeo. Neste vídeo vamos adicionar uma etiqueta H2 e P a todas as nossas caixas. Por que um H2? Algumas razões; uma é que ele é visualmente vai ser menor como bater um é o nosso mais importante e estes e é importante para a importância papel do site, porque não é essencial, mas é mais importante dar o seu H 1 todo o poder que ele pode por não diluí-lo. Se você acabar tendo como dez H1 na sua página inicial, torna-se difícil para os motores de busca saber o que o seu site é tudo sobre. Guarde para um ou dois e esses caras vão ser H2's. Você tem H2's, 3's, 4's, 5's, 6's para que você possa espalhar tudo. Vamos adicioná-los. Não tenho cópia porque é só livro online. Podemos datilografar isso. Vamos enfiá-lo dentro Ele tem um cartão 1, eu tenho que colocar um retorno em e em seguida para um H2 e este vai ser livro on-line. Salve isso. Vamos dar uma olhadinha. Nós sempre provamos enquanto passamos. Isto vai ser apenas uma tag P e nós vamos colocar em algum lorem ipsum básico e 15 palavras foi o que funcionou. Vai ser bom por causa de um pequeno olhar, que vai funcionar bem. Vamos estilizar este H2. No meu CSS, eu os mantenho juntos. Não há razão para que o H2 tenha que estar acima da etiqueta P, mas é bom quando você está procurando por ele para encontrar todos os H's juntos. É barato e pegar todas as coisas H1 e apenas brincar com o tamanho. Agora, eu já trabalhei para os meus tamanhos. Talvez a minha relação louca, os tempos 0.0625. Vai ser duas resmas para o tamanho que eu quiser. Quero que seja colocado aqui e uma margem que ainda não decidi. Vou apagar isso. Vamos dar uma olhadinha. Esta é a minha H2, a minha etiqueta P. No momento, ele está usando tudo o que eu fiz atualmente para o P, mas no meu caso, eu quero que eles sejam realmente pequenos. Você pode ver meu projeto aqui? Este texto é muito menor do que esta tag P. Vou começar a tag P genérica. Quero mudar este e vamos usar um seletor composto. Já olhamos para estes antes. O que eu quero dizer é que depende de quão específico você quer ser. Pode-se dizer que quero que esteja no cartão 1. Se houver uma etiqueta P, faça essa coisa, mas porque vai estar em todas as cartas, o que eu vou dizer é que vou usar essa. Vou dizer aquele invólucro que usei lá fora. Eu posso dizer, se há uma tag P em qualquer lugar dentro de toda aquela tag div gigante que abre lá e fecha lá, que inclui cartões 1, 3, e 3 deve funcionar. O que eu quero fazer, eu descobri que eu quero que o tamanho da fonte seja cerca de 0,85, salve-o. Vamos dar uma olhadinha. Não está funcionando. Guarde, jogue, ainda não está funcionando. Você sabe por quê? Não sei porquê. Vou pausar e descobrir e voltarei. Vocês todos viram. Aprendendo. Esqueci de colocar um REM e o ponto-e-vírgula. Ele levanta metade deste índice fora. Ufa, fácil. Agora, nós vamos ter que lutar com a altura da linha porque nós o configuramos aqui para ser perfeito, mas agora não está funcionando. Vamos usar uma altura de linha de apenas qualquer coisa maior que 0,85. Já trabalhei no meu em 1.2. Agora, eu quero ver isto e isto. O que eu poderia fazer é dizer, “Tudo bem, eu quero que você seja o centro alinhado por texto.” Mas tenho de o fazer duas vezes. Eu teria que fazer isso vista para você trabalhar, copiá-lo, então você pode fazê-lo e, em seguida, colá-lo aqui e isso funcionaria bem. Totalmente. Mas vamos apenas ser inteligentes e não tê-lo sobre estes e tê-lo no invólucro do lado de fora. Nós vamos dizer que tudo nas cartas vai ser furar o centro da linha. Dê uma olhada agora faz o mesmo trabalho. A coisa legal sobre isso é que ele vai fazer isso, e no próximo vídeo quando adicionarmos o ícone, será simples também. Só um pouco mais inteligente. Um par de outras coisas que eu quero fazer é ir muito perto das bordas mais o cabeçalho acima disso e todas essas coisas. Vamos adicionar um pouco de preenchimento e eu quero mostrar um atalho legal. Até agora temos feito isso. Se quisermos algum preenchimento acima e abaixo e esquerda e direita. Você pode ver que eu quero um pouco de preenchimento acima, esquerda e direita e abaixo e que pode ser doloroso quando você está fazendo. Você quer um pouco de enchimento ou uma margem. Neste caso, não importa. Eu vou fazer margem, topo, e então você faz isso e você combina com baixo, esquerda, direita, e você tem muitas linhas. O que você normalmente faz agora que todos estamos chegando um pouco mais longe nisso, é que nós apenas digitamos, “Margem” Há alguma abreviação. Basicamente, começa no topo. Digamos que queremos que seja um dez no topo. Aqui estão dez pixels, sem vírgula. Esse é o topo, e basta colocar um espaço e você quer 30 à direita. Eu gostaria que fosse 20 na parte inferior e depois 30 na esquerda. Ele sempre funciona assim ao redor, topo, e então ele vai ao redor no sentido horário. O topo, a direita, a parte inferior, a esquerda. Isso faz sentido. No sentido horário, e salve-o. Vamos dar uma olhada. Vamos editar os dez no topo, 30 lá, 20 na parte inferior, e 30 ali. 20 na parte inferior não faz sentido no momento. Mais tarde no curso, quando adicionamos o ícone acima que ele empurra. É apenas um pouco de espaço por baixo, para que não fique à direita no fundo aqui. Isso é uma pequena abreviação legal. Digamos que queremos 20 porque no momento temos dez no topo e 20 no fundo. Digamos que não nos importamos. É muito comum fazer o mesmo no topo. Quero 20 no topo e no fundo, quero 30 na esquerda e na direita. Você pode ficar ainda mais curto, Hentry. Se eu fizer 20 e 30 e só tiver duas medidas, pressupõe que quer dizer superior e inferior, esquerda e direita. Isso faz sentido. Você pode apenas digitar margem, parte inferior, canto superior esquerdo e ter quatro linhas. Mas esta é a versão super abreviada. Eu não poderia usar isso porque eu queria que o topo fosse diferente do fundo. 20px e, em seguida, 30 novamente. Legal. Nós vamos adicionar um pouco de preenchimento no H2 também porque eu quero que ele não seja apenas fora do topo desta caixa, mas ele vai ser fora do ícone que vamos adicionar mais tarde. Nós estamos indo para ir. Esta capa e sua forma perfeita, margem superior, porque não temos outras medidas que queremos adicionar. Estamos adicionando a 20 pixels. Por que estou usando pixels e não rems? Essa é uma boa pergunta porque às vezes você pode usar anéis para tamanhos como este bem, mas eu não posso ver a razão para ter rems que se alguém escalar uma fonte, que o espaçamento do topo precisa mudar. Acho que não precisa. Não importa se essa fonte fica maior. Ele ainda pode ficar 20 pixels do topo. Eu encontro coisas como espaçamento, eu vou deixar como pixels, tamanhos absolutos de fontes, e para coisas como medidas reais de fontes. É o que chama um tamanho relativo. É um rem é relativo a qualquer que seja o tamanho padrão é definido para o navegador. Relativo, absoluto. Vamos editar as outras caixas e depois seguimos em frente. Vou pegar tudo isso. Vocês entenderam, eu vou colá-lo lá dentro. Vou colá-lo aqui e ia mudar. O que temos? Tipos de serviço. Muito obrigado. O último, por favor, vamos. Estou tentando usar atalhos, pedir conselhos. Vai ser o último. Você só tem que digitar isso. Aqui vamos nós em nossos H2's. Deve estar em todos os três. Vamos dar uma olhadinha. - Legal. Isso é tudo para este vídeo e para o próximo vídeo vamos fazer tudo clicável, o que é legal. Nuvens vindo junto. Vejo você no próximo vídeo. 52. Como adicionar ícones ao seu site usando uma fonte incrível VS Code: Olá, este vídeo que vamos colocar em ícones. Você é como, “Ei, isso só se parece com o logotipo ou a imagem, quão difícil isso pode ser? Por que o vídeo é tão longo, então?”. É porque vamos usar fontes para fazer ícones. Vamos olhar para algo chamado Font Awesome, vamos olhar para o material do Google para ícones. É uma maneira inteligente de implementar ícones em seu site sem usar imagens. Há prós e contras, e é apenas outra maneira de usar coisas como PNGs ou imagens para ícones. Observe também que no final eu tenho um final falso. Eu sou como, “Sim, obrigado e você está pronto”, então continue um pouco e mostrando-lhe um pouco mais de estofamento no topo. Então fique por aí para a última parte. Pule então. Então, o que teríamos feito no passado? Nós teríamos adicionado uma imagem; um PNG ou um SVG ao nosso gráfico, ou ao nosso código e, em seguida, na minha visualização ao vivo aqui, há o ícone aqui, e que está carregando um JPEG, ou um PNG, ou um SVG, por isso está sendo baixado. Eles não são muito grandes, então você pode usar imagens, tudo bem. Mas vamos olhar para o uso de fontes ou fontes de ícones neste vídeo específico. Eu quero mostrar para vocês porque há muitos frameworks mais tarde em que você pode encontrar que usá-los e a outra coisa legal sobre eles é que há apenas muito legal, você não tem que projetá-los você mesmo. Eles estão todos em pequenos grupos agradáveis, eles são gratuitos, há todos os tipos de boas razões para usar fontes, mas para mim pessoalmente, a primeira coisa que eu quero fazer quando eu baixar uma dessas fontes é abrir no Illustrator e mudá-lo e bagunçar ao redor com. Vou mostrar-lhe isso também, mas vamos usar esses ícones de fontes que são realmente fáceis de usar. Vejamos, pois, os dois principais intervenientes neste processo. Bem, o principal é Font Awesome. Font Awesome funciona da mesma maneira que nossas fontes do Google, lembre-se no início do curso quando estávamos como, “Eu gostaria de ter algumas fontes novas ótimas no meu site”. Adicionamos este pedaço de CSS, para ir ao Google Fonts e baixamos Playfair e Roboto. É exatamente o mesmo princípio aqui para usar Font Awesome, exceto a fonte que eles mudaram o ABC para bacon, bolo, hambúrguer. Então isso é tudo o que realmente está acontecendo. Vamos fazer isso, vamos fazer uma busca. Há uma versão pró-versão, e basicamente a versão pro-te dá pesos diferentes. Vou te mostrar o que quero dizer em um segundo, vamos usá-lo de graça. Eu vou procurar por fontes, eu vou dizer, “bicicleta”. Eu já me preparei, então eu encontrei uma legal que é uma bicicleta. Na verdade, ignorei estes aqui. Tentei encontrar alguns, só escolhi aleatoriamente. Eles não eram bons ícones, eu estou escolhendo novos, motos. Então a diferença entre profissional e pago, que é uma fonte livre, que é uma fonte paga e ser como, “qual é a diferença?” e há apenas pesos diferentes. Você pode ver que um tem um bom e fino, que um é um mais fino, que um meio cheio. Você tem que decidir se você pode viver com isso, ou se você realmente quer este. Então essa é a diferença e você vê que o preço não é grande. Assinatura, você obtém muito mais ícones, todos os acinzentados, são aqueles que você não pode usar, mas há uma versão gratuita de todos eles. Agora, para usá-los, clique em um. Esta página carrega, parece mudar de cor cada vez que eu recarregar esta página, rosa no momento, o seu será diferente. Então o que precisamos é do material ao longo do topo aqui, principalmente. Na verdade, é meio que mostrando algumas coisas legais, eu posso vê-lo como uma cor sólida, como branco em preto, tamanhos diferentes, tudo muito legal. Então vamos começar a usar este ícone. Há duas partes que precisamos, precisamos dessa parte e precisamos, onde está? Não tem um projeto configurado. Está um pouco escondido. Vamos fazer isso primeiro. Então, comece aqui e basicamente esta é a CDN, é uma rede de entrega de conteúdo, é exatamente a mesma que fizemos para fontes do Google. Tudo o que precisamos fazer é copiá-lo, e entrar em nosso código. Ponha aqui, vou colocar logo embaixo. O que ele realmente precisa fazer é apenas estar embaixo do seu style.css. e realmente não importa de que maneira fontes do Google e este Font Awesome vai, mas ele só precisa estar no topo lá. Certo, a próxima coisa que preciso fazer é voltar. Então, uma vez que está dentro, você só precisa fazer isso uma vez por página. Isso precisa estar em todas as páginas em que você tem um ícone. Ele não precisa em páginas que não usam ícones, então ele não precisa estar em todas as páginas, mas muitas vezes apenas jogá-los na função. Então o que precisamos é essa coisa aqui, esse pedaço de código, isso vai para o nosso HTML, eu vou copiá-lo. Não importa se você pegar de lá ou daqui, a mesma coisa. Copie-o e vamos para o nosso código e colocá-lo onde você quiser. Então eu vou me livrar desse ícone de imagem e eu vou colá-lo aqui. Eu vou bater e alinhá-lo bem e bater Salvar e nós vamos ver como ele funciona e você está lá. Aqui está o meu pequeno ícone. Então, por padrão, é muito pequeno, na verdade o estranho é que você tem que pensar nisso como uma fonte, o que é realmente difícil de fazer. Você é como, “Ok, eu quero dimensionar isso, eu vou fazer uma largura de 100 pixels”. Não vai funcionar. Você precisa dele para torná-lo um tamanho de fonte de 100 pixels, ok, porque esta é uma fonte, é por isso que é tão pequena. O seu pode ser maior porque ele está usando qualquer tamanho padrão que veio nos navegadores 16, o que nós mudamos esse padrão para? Acho que é para 18 pixels, seja lá o que for, é o tamanho padrão da fonte. Então, para ir e estilo isso, vamos dar uma olhada em nosso HTML. Então podemos estilizar isso, temos uma tag i, é o que é usado para o ícone, lembre-se p para o parágrafo h2 para bater dois, i é usado para ícones e tem um par de classes aplicadas a ele que vamos falar sobre isso em um segundo. Então você pode segmentar qualquer um desses, porque eu só tenho um grupo de ícones nesta página inteira. São apenas um, dois, três. Vou marcar todos os ícones. Você pode ter que ser um pouco mais específico. Então eu vou dizer, “todos os ícones têm um tamanho de fonte de, eu vou usar 100 pixels”. Por que estou usando pixels mesmo que fizemos anéis antes? Principalmente porque, se eu der uma olhada, não vai ajudar os deficientes visuais se isso ficar maior e menor. Não vai torná-lo mais legível, é uma imagem de uma moto muito estilizada e simples. Você pode argumentar que ele precisa ficar maior e menor, talvez você esteja usando um tamanho menor. Então podem ser anéis ou você está usando em linha com o texto, digamos que chega ao fim, você está usando esta pequena moto no final de uma frase, então seria uma boa idéia ser um anel e é assim que começar a usá-los. Então, a coisa legal sobre eles, vamos fazer um pouco mais de detalhes, mas basicamente, ele está carregando uma fonte que acontece de ser em vez de letras, eles são ícones, há cargas para escolher de Font Awesome, e isso significa que eles são escaláveis bem como vetor, você sabe, nós conversamos sobre ser, onde está todas as minhas coisas, nós falamos sobre ser escalável. Se eu ampliar isso, você verá que minha moto fica escalada, como um SVG, mas ela é carregada como uma fonte e se alguém esteve em um site que usa Font Awesome, que muitos sites usam isso, significa que quando eles chegam a seu site, ele pode ser carregado ainda mais rápido porque eles já estão pré-carregados, mas se você está pensando, “hey, por que eu simplesmente não carregá-lo como uma imagem parece uma coisa fácil de fazer em vez de chamar a CDN no topo e, com toda a honestidade, Isso é o que eu faço. Eu mostro-lhe isso porque você está indo para encontrar sites com isso em e este pequeno i tag implementado ea razão que eu não faria isso desta maneira é porque a primeira coisa que eu quero fazer é baixar a moto de Font Awesome como um SVG e eu acho que você pode baixá-lo a partir daqui de um SVG, onde está, aqui está no topo aqui diz “download, SVG”. Eu concordo e download e você terá apenas um gráfico antigo regular, porque o que eu quero fazer é baixá-lo, abri-lo no ilustrador e, em seguida, começar a mexer com ele e alterá-lo. Então não há uma maneira certa ou errada de fazer isso, mas aprendemos a fazê-lo. Vamos entrar em um pouquinho mais de detalhes. Vejamos a estrutura disso. FAS, então ele se deu duas classes, tão bem, é sugerido duas. FAS, e FA- motocicleta. Então FAS é Font Awesome, então está escrito duas vezes lá, Font Awesome esta é uma versão sólida, há uma versão regular e uma versão light, então se eu tivesse pago por isso, eu poderia obter a versão FAR a versão FAL e a coisa é que eu não tenho que sair e mudá-lo, eu não tenho que tipo de usar o site para fazê-lo. Posso entrar aqui e dizer que paguei por isso agora e estou usando... Eles lhe darão um CDN diferente no topo aqui para os pagos e você pode entrar aqui e alterá-lo para R, ou light, mas estamos usando versão sólida gratuitamente. Este outro pouco aqui, o FA diz que este é Font Awesome e motocicleta é muito claro o que isso faz. Certo, vamos dar uma olhada. Então eu vou editar para esses outros dois... Eu vou fazer isso mal para outros cartões. Lá vamos nós, cara, estou em uma manhã ruim. Vamos lá, você consegue. Tudo bem, agora o que podemos fazer é dizer que na verdade eu quero, eu estava procurando um COG. Qual deles vai ser o COG? O que é que temos? Temos Tipos de Serviço, Chamada para Aconselhamento, então vamos fazer o serviço será Cogs. Então eu descobri que alguns Cogs e eu gosto deste e em vez de ter uma cópia e colar o código, eu posso apenas dizer, oh olhe para isso, se uma Cog. Então isso é o que está escrito lá e eu vou apenas para aqui, eu vou para dizer que você é Cog e eu estou supondo isso, eu estou totalmente adivinhando telefone. Ainda não preparei este. Fez um trabalho? Que eu o guarde? Salvar. Olha, havia um telefone. Você pode esperar pelo melhor e tentar adivinhar, exceto muito bem nomeado. O que é que eu escolhi? Eu usei o telefone, meu exemplo preparado, o RNA-seq, vivi em. Então é assim que usá-los e como implementá-los se você precisar colori-los, como você pintá-los? Tenha um pensamento. Parar, pausar, pausar o vídeo, pensar. Você fez uma pausa? O que você acha? Eu faço assim? Lembre-se que é apenas uma fonte antiga normal, então você estilizá-lo usando todas as coisas que você pode para fontes. Então nós teríamos agora azuis, a única razão pela qual meu é branco é porque eu na minha cabeça tag aqui em cima disse que todas as fontes que estão na etiqueta do corpo são brancas a menos que eu diga o contrário. Então é por isso que ele está vindo através de White, eu não preciso dizer isso novamente aqui. Aquela pequena caixa de cores que eu o ignorei, eu me acostumei com ele. Você provavelmente não vai. Você começa a apagar coisas e aquela caixinha branca meio que desaparece. Só está lá por um tempo e desaparece. Se você achar irritante, eu também. Caixa de cor irritante que não parece chegar a conhecer a forma como as cartas diz legal, mas também é uma dor. Agora outra coisa que eu só quero mencionar brevemente é que Font Awesome é uma opção e pode não ser no futuro que você pode passar e pode haver algo mais incrível. Outro que é bastante comum é o Material. Então material.io é mais do que apenas ícones. Font-Awesome é apenas fontes, ícones e material como um monte de coisas. Nós conversamos sobre isso em outros cursos como nosso curso UX UX, mas ele tem ícones realmente bons também. Então, se você for ao material.io e passar e dar uma olhada, estou tentando adivinhar onde ele está. Eu normalmente apenas ícone do Google material.io, lá está, eles são populares. Isso vai mudar também, eu aposto que você quando chegar aqui, mas se você ícones do Google Material você vai acabar aqui ou algo que se parece razoavelmente com isso. Por que eu usaria isso sobre Font Awesome? Este aqui você usa isso para muito mais tipo de, se eu estava fazendo o site de um banco ou um aplicativo para algo de contabilidade, algo que precisa de ícones mais institucionais, há muito mais ícones institucionais aqui. Além disso Fonte impressionante é divertido, mas alguns dos ícones são um pouco ambíguo, enquanto este Material Design parecem, tende tipo de ter um pouco mais. Eles combinam com todas as coisas que estão sendo usadas em aplicativos Android. Muitas vezes esses ícones estão sendo ensinados ao mundo através dos aplicativos do Google; Gmail, Chrome, é uma coisa universal que o Google usa, por isso é bastante útil. É de uso gratuito. Não há versão paga disso, mas não há tantas fontes. Você não vai encontrar uma escavação ou haverá um ícone do Instagram? Duvido que haja. Provavelmente há um Instagram ligado, não vai haver um palhaço em uma moto, enquanto que provavelmente há um palhaço em uma moto em Font Awesome. Aqui, você pode fazer semelhante ao que você fez em Font Awesome. Há estilos diferentes, então há uma versão preenchida, você pode vê-lo lá, eu vou rolar para cima. Há uma versão arredondada que não parece muito diferente, dois tons, versão Sharp. Então você pode escolher um desses, fazer uma pesquisa no topo aqui. Digamos que preciso de uma foto de uma Cog, não vai ter uma. Sem Cogs, mas eles são é uma carteira, não há uma carteira [risos] Há uma engrenagem de cartão de crédito. Então eu clico nele e é um tipo muito semelhante de coisa, você pode baixá-lo como um SVG aqui, então você pode dizer SVG, por favor faça o download. Já clique em Baixar indo ou você pode clicar na pequena seta aqui, ver pequena divisa, e você pode incorporá-lo. Então você precisa fazer duas coisas. Vá para as instruções, ele vai abrir tipo de como fazê-lo e você apenas rola porque você gosta, eu sou hardcore Eu não preciso de todas essas coisas, eu só preciso de você. Então, basta agarrá-lo, para que seja o mesmo tipo de fontes do Google que fizemos antes, mas a família de fontes é ícones do Material, digamos copiá-lo, enfiá-lo na cabeça do seu documento. Então aqui em cima, você provavelmente poderia combiná-lo com este aqui. Sim, você definitivamente poderia ou você poderia ter um separado não importa. Carregue duas vezes, e então você cola o HTML e exatamente como fizemos antes, então lá está. Tudo bem, então são apenas dois deles. Existem muitas opções diferentes, mas duas mais populares no momento. Tudo bem, basta sobre ícones e fontes. Vamos para o próximo vídeo, então. Apresse-se. Tudo bem, espera. Segure para cima. Segure para cima. Olhe para o ícone ali. Eles estão tocando no topo, não podem deixá-los assim. Então nós vamos passar agora e apenas empurrá-los para cima. Não é muito divertido ou excitante. Como vamos fazer isso? Planeio fazê-lo com o meu, como é que temos de o fazer? Eu poderia fazer isso para, se eu fizer isso com o cartão, se eu disser que o cartão estava pendente lá, eu ainda vou fazê-lo uma, duas, três vezes porque nós temos o cartão um, dois e três. Então eu vou fazer o ícone e eu só estou fazendo isso para isso porque eu tenho o luxo de ter apenas aqueles I, os ícones uma vez em uma página e isso é tudo que eu estou usando para. Se você estiver usando são muito ícone site pesado. Isso parece uma péssima ideia porque então você vai mais tarde em seu site design você seria como, oh, eu vou adicionar um ícone e vai ser o estofamento de tiro nele. Então nós vamos fazer, o que nós podemos fazer é padding-top e vamos dizer o estofamento no topo disso, eu não tenho idéia. Pixels. Vamos dar uma olhada, você vai lá. Não, muito, 30. Tudo bem. - Sim. Eu estou lá. Eu estou lá e uma coisa que podemos fazer é que não há nenhum mal em agora dizer fazer um seletor composto, então eu quero etiquetas I, mas apenas se eles estão dentro de um cartão. Eu não deveria ter usado cartões, e vai fazer a mesma coisa. Vai funcionar. Mas mais tarde, se você usar o ícone fora desses cartões, isso não vai se aplicar. Então você pode estar apenas à prova do futuro. É o tipo de coisas que penso quando penso, é uma coisa muito fácil que funciona agora. Isso vai me causar uma grande dor de cabeça mais tarde. Tudo bem, agora, este é o fim. Vejo-te no próximo vídeo. 53. Como transformar uma caixa de contêiner DIV inteira em um link clicável: Oi lá. Neste vídeo vamos passar e fazer cada parte deste cartão clicável. Tudo de uma só vez em vez de adicionar um texto, cada elemento separado, a coisa toda vai ser agradável e clicável, indo para um só lugar. Vamos entrar e descobrir como fazê-lo agora. Eu quero essa coisa toda clicável e eu quero que o ícone clicável, o texto clicável, tudo isso clicável de uma vez indo para o mesmo lugar. Então eu poderia passar e lentamente, mas certamente ir, eu poderia embrulhar meu h2 em uma etiqueta A. Então, no começo eu vou digitar um A. Preciso de um espaço para isso tudo pré-insinuação para funcionar. Então eu preciso do espaço entre o meu H2 e o meu A. Então o invólucro vai daqui. Eu coloquei a tag A abre antes e depois. Não precisa dos espaços só para deixar claro. Para onde mais ele vai. Vai para um lugar aleatório que ainda não decidi. Isso funciona. Ficou roxo porque este é um link visitado que não é legal, mas vamos corrigir isso. Mas posso continuar fazendo isso para esta fonte, para esta etiqueta P. Eu poderia fazer isso para sempre, mas é mais fácil encaixar todo o código em uma etiqueta. Alguma ruína, segure. Uma maneira tão problemática. Então, no início de há uma etiqueta, eu vou dizer, no início deste código um, eu vou embrulhar esta coisa toda, certo? Clique no botão “Div” e ele deve destacar, ok, então há um começo e o final. Então eu quero começar como eu tomo aqui. Vai para haxixe. E se você tem o que o hash faz, ou o sinal de libra, lembre-se, é apenas um lugar para segurar o link porque eu não tenho outras páginas. Este projeto em particular vai fazer outras páginas porque nós vamos. Mas isso agora vai torná-lo um link inteiro, que normalmente funcionaria, está funcionando, tudo está roxo, porque é um link visitado vamos torná-lo branco. Mas na verdade está funcionando. Eu posso clicar em todos eles, está tudo ativado. O problema é que ele arrasou minhas caixas, você gosta, o que aconteceu lá? Lembra quando estávamos falando sobre flexbox porque esses cartões usam flexbox, certo? [ inaudível] dizemos display flex. Ok, e nós fizemos esses caras 30%. E a coisa legal sobre flexbox é, é apenas geral em uma linha e então nós os espaçamos uniformemente. Então, estamos usando muitos atributos de caixa flexível. E eu me lembro de um dos papéis era que seus cartões têm que ser filhos diretos dos pais. Os pais dizem que você vai flexionar e então esses caras têm que estar diretamente embaixo. O que fizemos foi enfiar uma etiqueta A entre a família feliz. Códigos um, precisa ser diretamente o próximo descendente dos códigos. Levei a coisa da família longe demais. Tenho uma terapia familiar disfuncional, terapia para as etiquetas div. Então o que vamos fazer é desfazer isso. Como contornamos isso neste caso? O que vamos fazer é dizer que não precisamos da etiqueta A para enrolar estes três. Não precisa estar perto disso. Ficaremos bem porque eu adoraria que tudo fosse clicável. Mas, no momento, serão apenas todos os ingredientes, todas as coisas dentro, e estou feliz o suficiente com isso. Nossa etiqueta A, vai para haxixe. Vou pegar tudo isso. Cole lá, coloque-o no lugar certo. O que você vai fazer com você? Aqui, vamos adiar um pouco isso. Eu não estou fazendo nada agora, a não ser tabulação. Realmente parece legal. Então, código um dentro dela, depois a minha etiqueta A, e depois todas estas coisas. Estes são todos igualmente importantes para não dentro um do outro. Estão todos no mesmo tipo de margem aqui. Se você der uma pré-visualização um cheque; e ele funciona. Está tudo roxo, não está funcionando. A cor padrão para links que foram visitados é roxo. Vamos mudar isso. Então vamos mudar isso. Este é um teste pop também, você está pronto? Questionário, você tem que puxar em um segundo e tentar resolver isso por conta própria e depois voltar e ver se você chegou perto. Tudo bem, eu quero que você faça um branco e eu queria que você se livrasse do sublinhado. Como você faria isso? Pausa agora e te vejo em um segundo. Tudo bem, você de volta, há algumas maneiras de você fazer isso. Enquanto você pode fazer isso, você pode dizer se esses códigos, no plural, ok? Há uma etiqueta A com um h2 nele, você poderia fazê-lo como uma combinação múltipla, há h2-s, eles estão dentro de uma etiqueta A que são códigos. Eu quero dizer que a cor vai ser branca? Isto é tudo branco. Você pode ver lá, se é um H2 está lá, é branco. E eu posso dizer decoração de texto. Este pode ser, você entendeu, certo? Você é como, como você se livra do subjacente? Decoração de texto. Ok. Nenhum. Nem sequer. Tudo bem, então a linha foi por baixo dela. Não é, porque eu fiz algo errado. O que eu fiz de errado lá? Decoração de texto, muitas vezes eu preciso do código ajudando a garantir que minha sintaxe está correta, minha ortografia está correta, e a linha se foi. Tudo bem, então isso não funciona [inaudível] ok mesmo que isso pareça bom. Mas então eu tenho que passar por isso, fazer um para a etiqueta A, e um ícone e então isso está a um tambor de distância. Então você pode ter ido por esse caminho. Você pode ter algumas aulas diferentes. Você poderia realmente dizer, na verdade, não precisa ser tão específico, apenas etiquetas A dentro das classes. Vamos dar uma chance, jackpot. Agora o que você também pode fazer é ir; eu vou encontrar muitos problemas. Nunca quis ser roxo e nunca quis sublinhar. O que você pode começar a decidir é que lembre-se, eu vou ver que diz recente no topo aqui. Fizemos o nosso próprio CSS reset? O Eric Meyers, podemos chamá-lo de barra Dan Scott de Eric Meyers, porque podemos entrar neste CSS reset e parar de fazer nossa própria versão. Podemos entrar aqui e dizer, na verdade, eu quero que todas as etiquetas A sejam, brancas por favor e não tenham sublinhado. Você pode editar isso, então eu não preciso dele aqui. Eu não preciso dizer isso. Então você pode descobrir que toda vez que eu faço um site, eu nunca quero o sublinhado. Então você pode parar de fazer sua própria redefinição CSS. Eu não vou salvá-lo. Eu disse para reiniciar o Meyer desta vez? Eu nem tenho certeza. Tudo bem. Desculpe, Eric Meyers. Tudo bem, se você fez de uma maneira diferente, eu adoraria ver nos comentários. Deixe-me saber como você fez isso, tirar uma pequena captura de tela de como você fez um trabalho. E sim, foi assim que eu fiz isso funcionar. Você pode encontrar uma maneira melhor e ter uma boa razão para isso. Mas o que realmente importa para mim no momento é que ele é clicável, e é um branco sem sublinhado. O resto deste vídeo não vai ser muito emocionante e nós vamos passar por isso e fazê-lo. Bem, uma coisa que quero fazer, enquanto estamos aqui, começamos a chegar a um ponto em que, sei lá, depende. Você pode ser como se ainda fosse muito difícil e eu não sei o que estou fazendo. Mas se você se sentir apenas um pouco menos nervoso sobre isso, e olhando para o seu site que você gosta, e você fez este porto. Eu quero que você se orgulhe. Eu quero que você vá através e vá realmente olhar, [inaudível] código que há código acontecendo. Estou codificando um site, há muitas coisas para aprender. Você pode ver que há muitos vídeos assumidos neste curso, mas espero, você pode ter uma sensação de rolagem para cima e para baixo e ir, “olhe para mim”, eu entendo como a maioria disso funciona no momento. Não na próxima semana, mas no momento você está tipo, “na verdade, eu poderia passar e começar a ajustar as coisas ou pelo menos fazer outro site de igual complexidade deste.” Não quero que se esqueça disso. Eu quero que você se orgulhe porque sempre há coisas para aprender. Estou bem como web designer. Mas há muitas pessoas muito melhores do que eu. Mas não importa mesmo que eu termine um site e é bem simples, eu sempre [inaudível] Eu sou como, “olha para mim fazendo a codificação”, me sinto bem. Como você se sente bem? E isso é o suficiente. Agora vamos terminar os últimos pedaços. Vou embrulhar o resto destes tipos em etiquetas. Vou copiar isso, vou colocar vários cursores. Um aqui, outro ali, segurando, no meu Mac, é “ALT”. Desculpe, no meu Mac a tecla “Option” para clicar duas vezes. No seu PC, provavelmente é “ALT”. Mas lembre-se, você pode fazer multi-cursores. Você pode ir e verificar o que está aqui. Você pode colocar um espaço, e colocá-lo em, eu vou para Tab ele de volta, então é tipo de onde eu queria estar. Tab tudo isso, todos os cursores são úteis, certo? Sobre lá e depois fecho a minha etiqueta A. Então eu vou fazer isso multi-cursores e eu vou colocá-lo na minha tag A. Fechando o A, lá vamos nós. - Legal. Tudo bem. [ inaudível] e o navegador não quebrou. É tudo clicável. Não vai a lugar nenhum. Se você for tipo, “cara, essa coisa de hashtag não funciona”. Basta digitar HTTP, dois pontos barra barra [inaudível] ponto, obter um [inaudível]. Esse é o meu site. E se você já sabe, ele vai redirecioná-lo para o meu site, pelo menos alguns do olhar, clique. Certifique-se de clicar em “Salvar”. Clique, código dois e depois código dois. Tudo bem, isso é o suficiente para este vídeo e as travessuras. Vejo-te no próximo vídeo. Olá, eu. 54. Como usar o box-sizing border-box do Flexbox no VS Code e web design: Olá a todos, este vídeo é sobre tamanho de caixa e border-box e é magia. Temos estas caixas aqui. Eu quero adicionar um pouco de preenchimento para o interior para apenas alinhar todas essas coisas para cima, mas quando eu faço isso, preenchimento adicionado e as caixas vão maiores. Você adiciona estofamento e parece fazer as caixas maiores, estranhas. Vamos adicionar tamanho de caixa, border-box, e magicamente temos estofamento, mas eles não ficaram maiores. Não mais minusing o preenchimento do tamanho e largura das caixas. Sua magia, vamos ver como fazê-lo agora em VS Code. O que faz essa caixa mágica de tamanho, border-box bondade? Ele se relaciona com a caixa flexível novamente. um dos seus pequenos complementos agradáveis para HTML5. Ele tem ótima compatibilidade com o navegador, e o que isso significa é que podemos adicionar preenchimento sem quebrar caixas. Você vai notar que nós dançamos ao redor, nós colocamos o preenchimento na parte inferior da tag p para empurrar o fundo para baixo. Adicionamos preenchimento no topo do nosso ícone. Adicionamos estofamento à tag p aqui à esquerda e à direita para mantê-lo longe das bordas. Por que não adicionamos ao cartão em si? Basta colocar uma fronteira ao redor do lado de fora. Isso é fácil, porque ele quebra. O que vamos fazer é provar o ponto. Vamos ao nosso código. Na verdade, vamos adicionar um par de aulas, fazer uma de uma vez. Vamos fazer Card1, Card3, Card3. Você pode fazê-las todas de uma só vez. Há uma vírgula lá. Você vai notar antes de fazermos um composto enquanto que neste aqui. Isso significa que esses caras têm um relacionamento um com o outro, uma etiqueta dentro das cartas. Considerando que esta coisa que estamos fazendo agora é esta vírgula e isto e aquilo. Eles vão gostar de separar pequenas coisas. Uma vírgula separa-os. Se fosse sem as vírgulas, estaria à procura de um card3 que está dentro de um card2, isto dentro de um card1, que não existe. Nós vamos adicionar preenchimento, e vamos fazer isso todo o caminho em torno de apenas 20 pixels. Poupe-o, e vamos dar uma olhadinha. Explodiu as bordas aqui, foi longe demais. Não adicionou ao interior. Estranhamente ultimamente, acaba com o tamanho geral. Se o tornarmos ainda maior, digamos que conseguimos até 50, percebemos que só vai ser banana. Eles vão parar de empurrar um para o outro e isso não está quebrando muito mal, mas o preenchimento está lá, 50 pixels, mas adiciona-o ao tamanho, e é aí que o border-box funciona. Podemos dizer que é realmente adicionar esse preenchimento, mas nós vamos fazer o tamanho da caixa e vamos usar border-box, e pressione salvar. A coisa legal sobre isso é que ele remove as larguras agora. É só um jeito fácil de fazer isso. Nós vamos remover o material do estofamento, e isso nós fizemos. Também depois da etiqueta p, então limpe um pouco porque eu dancei em torno dele por um longo tempo porque eu sinto que você está lendo agora. Pronto para o border-box. - Sim. Porque o que você poderia fazer é passar por aqui e dizer realmente tudo bem. Vamos fazer isso e depois vamos parar de desviar a largura. Eu vou dizer largura é igual a menos, e você pode começar a tentar menos fora o que você adicionar o preenchimento para e ele apenas faz você escondido. Isso é o que você tinha que fazer. Vamos consertar isso. Temos border-box, retorno border-box. Primeiro, vamos nos livrar de todas as outras coisas que fizemos. Sob a tag p, fizemos margem inferior que precisamos disso. É cartas de baixo e nós fizemos, então fizemos margem em torno desta coisa. Ainda precisamos da margem logo acima dela. Faremos margin-top de forma diferente. Margin-top, mas não precisamos de todo o resto disso. O que usamos? Usamos em 30 esquerda e direita e 20 na parte inferior. Você diz: “Por que não continuamos fazendo assim?” Porque não aprendemos “border-box “se fizermos isso. Basta deixar assim e você vai correr para ele no Código e você vai correr para aquele problema de apenas como, “Ei, isso apenas colocar preenchimento em torno dele.” Por que é que está a aumentar? mesmo com essa margem, ele só adiciona a ele, mas se você quiser magicamente menos a margem do preenchimento fora da largura total da caixa, use border-box. Vamos fazer isso. Estou ficando um pouco perdido agora. Você pode ser o mesmo. Se você apenas colocar em um atributo, ele vai todo o caminho ao redor, lembre-se. A parte de cima deste caso, se colocarmos a etiqueta “i”? Padding-top 30, porque é o que colocamos neste top aqui. Vamos fazer esse cara e dizer, “ Top vai ser o que eu acabei de dizer, 30. Trinta pixels ou g pixels. A esquerda e a direita serão 30. Não use ponto-e-vírgula no final deles. Topo, direito, fundo, nem se lembra agora, 20? Vamos dar uma olhada nele. Ponha isso aí. O último é 30. Incrível. Isso deve funcionar. Dê uma olhada, aqui vamos nós. Se eu o guardei, tenho uma boa maneira de o fazer. Eu meio que mantive isso um pouco mais tarde no curso. Agora, provavelmente quando eu colocar minhas cartas na primeira vez, eu adicionaria o preenchimento antes de jogar todas as coisas nele, e apenas certifique-se de usar border-box naqueles cartões. Você pode usá-los individualmente. Isso pode estar dentro. Poderia cortar isso e colocar dentro de todas as cartas. Tenho-o nas três vezes. Eu só mantive isso separado para este vídeo, e um pouco melhor. Eu não tenho certeza que ele está economizando muito tipo, mas de qualquer maneira isso faz sentido? Espero que tenha feito. Sem ele desligá-lo, vamos dar uma olhada. As caixas apenas obter seus 30 por cento originais mais este preenchimento. Eu poderia deduzi-lo dos 30 por cento, mas menos 30 pixels de porcentagens é alucinante. Para mim, pelo menos, é melhor apenas adicioná-lo a ele e manter border-box ligado. Trabalho feito em cinco. Vejo-te no próximo vídeo. 55. Como criar um botão colorido no VS Code usando HTML CSS: Oi lá. Vamos fazer um botão. Não é um velho botão feio como este. Um botão bonito como este. Ignore o cabeçalho superior, vamos corrigir isso no próximo vídeo. Mas nós temos um botão, é clicável, e tem um bom fundo. Vamos entrar e descobrir como fazê-lo. Alerta de spoiler, é só um A-tag com algum preenchimento, mas vamos fazê-lo juntos mesmo assim. Para fazer o nosso botão, o que você pode estar realmente inclinado a fazer é descobrir onde vamos colocá-lo. Eu quero colocá-lo logo após este p-tag aqui. Aí está, herobox1, aqui está o meu p-tag. Então, logo depois, vou colocar o que soa sensato como um botão. Vou clicar aqui e clicar em “Salvar”. Vou pré-visualizar e pegamos aquela coisa. Existe o botão de formulário. Isso não é o que queremos aqui porque queremos que pareça a nossa simulação aqui e é muito difícil de fazer usando esse botão. Você pode formatá-lo um pouco para torná-lo assim, mas é mais fácil apenas começar com um a-tag para dar-lhe algum preenchimento e cor de fundo. Então não vamos usar o botão. Vamos para o botão Excluir. Botão de adeus. Tudo o que queremos é um “A-tag”. Já usamos isso muitas vezes. Para onde é que ele vai? Vamos fazer com que vá a algum lugar. Tenho certeza que você está cansado de colocar haxixe. Então vamos fazer a nossa página Arquivo, Nova. Eu vou salvar este aqui e este vai ser chamado de minha página de teste. Podemos ligar a ele a partir de nossos links agora. Isso vai para be.html. Eu vou colocá-lo em um h1 dizendo, “Yippy nós fizemos isso. Nova página.” Vou fechá-lo. Então eu fiz, fechei, e vou ligar a ele agora. Então, como lhe chamamos? Página de teste. Na verdade, vai a algum lugar. O que é que este botão vai fazer? É para ir para o nosso Livro Online. Então, entre os A-tags, vamos dizer Livro Online. Será que eu queria maiúsculas? - Não. Então, estamos usando caso de título e isso é o que parece no navegador. “ Como é que isso é muito melhor do que o botão feio?” É fácil estilizar como um. Vamos fazer o básico. Depende se você foi e se lembra mais cedo nós estilizamos nosso a-tag potencialmente na cabeça ou no CSS, o que chamamos de CSS reset. Teria sido útil, mas não o fiz. Eu vou dizer, na verdade eu não vou ser muito específico. Eu vou ser bastante amplo. Eu vou dizer todos os A-tags aqui em cima. Por que está no topo? Porque eu sinto que é um golpe muito largo, então deve estar no topo. Eu vou dizer, bem A-tags agora precisam ter uma cor de branco. Isso provavelmente vai voltar e nos morder no traseiro. Parece que sempre acontece quando faço estilo livre assim. Cor e nós vamos dizer que a decoração do texto é definida como nenhuma. Isso vai nos fazer começar, espero. Lá vai você. Nada vai voltar para casa. Tudo bem, vamos dar uma cor de fundo e colorir o texto. Na verdade, o que podemos fazer é começar a criar nossa própria classe porque não vamos definir todos os a-tags como botões. O que eu vou fazer é, logo após as aspas aqui, eu vou dar a ele um nome de classe de mybutton. Por aqui, vou dizer que o meu botão faz algumas coisas. Isso é totalmente inútil agora. Podemos nos livrar dele? Nós podemos. Porque eu coloquei todas as etiquetas como brancas sem decoração de texto. Guarde um pequeno cheque rápido e certifique-se que eu tenho trabalhado qualquer coisa. Sim, perfeito. Mybutton precisa de um ponto na frente dele e nós vamos dizer a este botão, “Eu quero uma cor de fundo de, deixe-me usar branco.” Vai gravar. Certifique-se de que há ponto e vírgula no final e certifique-se de salvar tudo. Lá vai você. Está destruída. Se você não consegue ver nada, é que você não salvou, ou não há texto no botão. Se você acabou de deixar isso de pensar que vai voltar a isso mais tarde, e porque não pode ser visto ou não há coisas para embrulhar, ele precisa de algumas tomadas no A-tag. Outra coisa pode ser, dependendo de onde você está assistindo isso e sim, nós vamos realmente lidar com isso no próximo vídeo. Mas se você ainda está desgastado aqui e você está preso lá, você pode ter que fazer display inline-block ou display block. Vamos falar sobre isso na próxima. Mas isso pode estar causando problemas a você também. Então faça isso, isso pode consertar o seu. O nosso está funcionando bem. O problema com o nosso é que a cor do texto também é branca. Então vamos a cor do texto de, vamos usar este top aqui para formar nosso gradiente. Essa é a coisa legal do VS Code é que ele olha através do seu CSS e diz: “Ei, você já usou isso antes. Quer usá-los de novo?” Eu sou como, “Sim.” Poupar-lhe tempo para dar uma olhadela. Eu também gostaria de torná-lo para a Playfair. Então família Font, vamos ser um jogo justo. Na verdade, não me lembro de toda a sintaxe, então vou roubá-la. Vou usar a função de pesquisa, que é Command F em um Mac ou Control F em um PC. Vou digitar “Play”. Há muita brincadeira. Ali está a Playfair. Então a razão pela qual eu não me lembro, eu provavelmente poderia adivinhar Playfair, mas eu nunca consigo lembrar se é em duas palavras ou uma palavra. Lembre-se se é em duas palavras, ele recebe essas citações em torno dele. Se a fonte que você está usando não tiver duas palavras, ela não terá essas aspas ao redor. Então, vai acabar com você. Vamos dar uma olhadela agora. É bom e bom. Vamos colocar um pouco de estofamento em torno dele. Então vamos fazer estofamento. Agora, vamos fazer nossas coisas de atalho. Vamos usar estofamento rigoroso e vamos fazer o topo e o fundo. Acho que já discutimos isso antes. Então, se você colocar uma fonte antiga ela vai para cima, e nós estamos usando 11 e 25. Então pixels para o topo, 25 para a direita. Então ele vai no sentido horário começando no topo. Podemos dar toda a volta. Mas porque é muito comum ter os mesmos eixos x e y, então os topos e os fundos são os mesmos na esquerda e a direita é o mesmo. Você não precisa escrever toda a repetição extra que está lá dentro. Presumirá que se houver dois, você quer dizer para cima e para baixo para o primeiro e para a esquerda e para a direita para o segundo. Isso deve funcionar. Aqui vamos nós. Precisamos de um pouco de margem acima, mas isso não vai funcionar. Falaremos mais sobre isso no próximo vídeo. Margem superior. Vai ter 10 pixels, porque eu sei que você vai tentar. Não vai funcionar. Enlouqueceu-me também quando, no início, estava a funcionar o que aquilo fazia. Por isso, não te preocupes com isso no momento. Vamos voltar para ele. Tem algo a ver com a bondade de exibição inline-block. Na verdade, vou separá-lo para outro vídeo, mas se você quiser apenas corrigi-lo, adicione a margem e digite “display”. Porque eu sei que de qualquer maneira todos vão para o próximo vídeo. Então exiba, vá inline-block. Se você definir isso e agora fizer a margem, vai funcionar. Mas falaremos sobre isso com mais detalhes no próximo vídeo. Tudo bem. Então nós temos estofamento, nós temos você, nós temos isso. É tudo o que vamos fazer por este, porque temos um botão. Nós clicamos nele e ele funciona. Vai lá sua nova página do Yippy. Yippy nova página mesmo. Desapareceu, espere. Sim. O que vamos fazer? É isso para este, você pode apenas adicionar alguma margem para a parte inferior da p-tag, mas não vai funcionar para o topo. Nós vamos falar sobre elementos inline e bloco no próximo vídeo para realmente saber o que estávamos fazendo quando estamos digitando em display inline-block. Vamos fazer no próximo vídeo. 56. Por que não consigo adicionar margem ou preenchimento na parte superior e inferior da minha tag Inline vs block elements: Olá pessoas frustradas. Não podemos adicionar margem à parte superior do botão. Nós empatamos uma tag e queremos empurrá-la da margem superior ou da margem inferior, mas não está funcionando. Por que não está funcionando? É porque a propriedade display está definida como inline. A versão rápida deste vídeo é apenas colocar display inline-block em seu botão e certifique-se de salvá-lo e, em seguida, você pode fazê-lo. Fique por aí para todo esse vídeo porque nós vamos falar sobre as diferentes propriedades de exibição, bloco inline, e nós vamos fazer um CSS chique onde nós conectamos um par de classes e uma tag juntos. Você está pronto? Vamos adicionar margem máxima ao nosso botão. Lembre-se no último vídeo, tivemos problemas para colocar a margem acima disso e é algo a ver com sua propriedade de exibição. Nós criamos este pequeno pedaço de HTML descartável. Você não tem que fazer isso. Você pode jogar junto, se quiser. É apenas um simples documento HTML ticks. Há muitas propriedades de exibição. Vamos falar sobre os principais que se encaixam em você como um começo, web designer, e que é inline e block. Há algumas coisas que são exibidas por bloco por padrão. O que isso significa é que vamos olhar para uma tag p com algum texto, na verdade, vamos adicionar um texto em pedaços. Lorem, vamos colocar em 50. Outro é h1 que é por padrão o que é chamado de nível de bloco, e tudo isso realmente significa é, vamos adicionar mais alguns. Vou colocar uma lista desordenada, que é uma lista de pontos com alguns itens da lista, mas eu quero 10 deles. Dentro disso, vou colocar itens. Estes são todos de nível de bloco. O que isso significa é que, se eu olhar para isso, você pode ver que aquele cara empurra o cara para baixo em sua própria linha. Este é o seu próprio bloco de coisas. Este é um cara tão grande também. Todos esses caras que correm um pequeno bloco, eles empurram um ao outro. O oposto para esses caras são inline. São úteis para coisas como, digamos, uma etiqueta. Vou colocar uma etiqueta, e esta vai fazer hash, e vai ser a minha ligação. É uma linha inline. O que está nos dando esse problema. A diferença entre inline é, você pode ver, ele não afastou todos os outros. Ele joga bem com os outros. Ele funciona em linha, enquanto bloco diz, “Você tem que estar em sua própria linha,” própria linha, em linhas, o mesmo com uma imagem, se eu precisar adicionar uma imagem aqui IMG, as fontes, imagens, barra colocar essa em e dar-lhe uma altura em Pelo menos, não é muito grande. Você pode fazer alturas no HTML, o que é estranho. É inline para que você possa mudá-los ao redor. Você pode dizer: “Na verdade, eu gostaria do meu estilo aqui.” Eu não estou usando uma folha CSS para este particular apenas para economizar algum tempo. Eu vou dizer, “Eu quero que as imagens sejam propriedade de exibição sejam bloqueadas.” Você bloqueia as coisas. [ inaudível] fazendo sua própria coisa. Legal. Uma das propriedades para, digamos, uma tag aqui, porque é inline por padrão é que você não pode colocar uma altura, você pode fazer esquerda e direita. Posso dizer que quero uma etiqueta que tenha uma grande margem à direita. Isso funciona perfeitamente, 200 pixels. Vamos dar uma olhada, ele tem uma grande margem para a direita, mas eu não posso fazer uma grande margem velha para o topo, que nós já sabemos do nosso último vídeo. Vamos 100 pixels para o topo, por favor. Não faz nada, não empurra 100 pixels para baixo. O que você pode fazer é dizer. “ Na verdade, uma tag que eu gostaria que você parar de ser inline e eu quero que você seja um display”, Eu não quero que ele seja bloco porque bloco neste caso não faria o que eu quero que ele faça. Meu Deus, meu, a ter problemas. Vamos lá. Lá vamos nós, porque ele está empurrando para baixo para sua própria linha, e você é como, “Na verdade, é o que eu quero. Quero um pouco do intermediário.” O intermediário é, eu quero que você fique em linha, mas também seja um pouco bloqueada. Faz um pouco dos dois. Basicamente, o que ele vai fazer por nós é, ele vai ficar em linha. Ainda está na mesma linha que o nosso parágrafo. Vamos nos livrar da etiqueta de imagem. Ele está fazendo tudo parecer um pouco confuso. Fique neste parágrafo, mas permita-me fazer coisas como bater ou margin-top. Todos eles têm sua habilidade natural. Diga estes itens da lista aqui. Lembre-se que esses caras realmente querem estar em suas próprias linhas que são chamados de nível de bloco. Eles são realmente chamados, como eles são chamados? Tenho um especial para eles. Listar itens. Vamos dizer: “Exiba, por favor.” Eles têm este chamado, onde está o item de uma lista? O que faz o mesmo que bloquear, com alguns empurrões extras. Em vez de ser bloqueada, quero que você seja inline. Vamos dar uma olhada no que ele faz. Veja esses pequenos itens da lista, eles estão todos empilhados na mesma linha agora, então haverá muitas vezes em que você precisa deixá-lo como o padrão. Ocasionalmente, você diz : “Na verdade, faça parte da gangue.” Eu quero um h1 com a tag p ao lado dele porque eu fiz algumas coisas de design legal e eu preciso implementar isso. Considerando que os acertos realmente querem estar em sua própria linha porque eles têm elementos de bloco. Isso ajuda a recapitular? As tags por padrão são inline, o que significa que elas permanecem na mesma linha que todos os outros. P tags, h1s, block, existem propriedades de bloco de exibição, para que todos possam estar em sua própria linha. Se você quer um pouco de ambos, inline-block é um grande pouco de ambos, um pouco de inline, um pouco de bloco, e principalmente o que ele vai nos permitir fazer agora é que vamos voltar para esta página. Clique duas vezes em você, clique duplo em você, arrastá-lo por aí, você vai até aqui eu vou dizer para o meu, onde você está? MyButton. Eu não vou fazer isso por todos eles porque eu poderia dizer no topo aqui eu quero todas as tags para ser inline-block, mas eu não quero fazer isso para todos eles. Eu só vou fazer isso por isso e você começa a ser inline-block. Agora, eu tenho que fazer uma margem no topo. Nós vamos colocá-lo em, eu não tenho idéia, 20 pixels, vamos dar uma olhada. Agora esta é genial. Este não está funcionando. Salve tudo. Para dar uma olhadinha. Ainda não funciona, MyButton. Não está funcionando para essa classe aplicada à minha tag, então o que eu vou ter que fazer é dizer, “Na verdade, eu quero que haja uma tag com myButton aplicado.” Isto ainda não vai funcionar. Esta é uma boa informação suculenta. Se eu pegar esses dois, e eu disser, “Você, eu gostaria que você fizesse isso.” Provavelmente ainda não vai funcionar, ainda não. Legal, porque o que está acontecendo é, o que ele está procurando em termos da sílica que eu acabei de fazer, é dizer, “Eu quero encontrar um MyButton dentro de uma etiqueta.” Mas não está lá dentro. Tenho uma etiqueta que é MyButton. Não está dentro dele como fizemos no passado onde temos um h1 que está dentro de uma caixa de herói que está dentro do meu principal não dentro dele, é na verdade apenas uma etiqueta com um rótulo de MyButton. Como se conserta isso? É estranho. Espaços mostra que essas migalhas de pão de myButton está dentro da tag a. Considerando que se eu juntá-los, então não há espaço entre eles, ele vê um, uma tag que é um myButton. Aplique o material. Vamos guardá-lo, ver se funciona. Ainda não está funcionando. Vamos lá. Ainda não está funcionando. O que mais fazemos? Eu tinha um aglutinante cerebral lá e eu estou deixando no curso porque é realmente útil aglutinante cerebral. Pensei que sabia o que estava fazendo. Eu disse: “Sim, então fazemos isso e podemos nos juntar a eles. É por isso que ele estava quebrado e ainda não estava funcionando.” A razão pela qual não estava funcionando, eu sempre ajustando isso. Eu sou como, “Homem que trabalha.” Estava verificando a sintaxe. A razão pela qual não funcionava era perfeita. Foi porque fizemos este pequeno curso para baixo. Eu abro isto, lembras-te do pequeno testador? Eu o abri e testei no navegador, e fiz uma conexão entre VS Code e esta página. Então eu fechei e fui o meu negócio e continuei com este e fechei. O que eu esqueci é que essa conexão, essa conexão ao vivo foi quebrada entre minha página original aqui e VS Code porque eu saí e fiz outra coisa, você só pode amarrar a um de cada vez. Agora, eu estou regateando com isso, coçando minha cabeça dizendo, “Eu não sei como isso funciona.” Isso é porque eu fui para esta outra página, visualizá-lo agora eu vou ter que fechá-lo, abri-lo de volta para que o tether e conexão entre o site existente. Agora ele vai mostrá-lo para mim, mas confuso, eu estou. Agora funciona. Aprendemos algumas coisas. Eu quero acabar com isso e eu quero deixar na maldade lá dentro apenas, você vai se deparar com esse problema. É uma daquelas coisas que gostamos, “Não está funcionando, vou para a cama”, e você acorda de manhã e começa a funcionar como, “Não estava acordando ontem à noite, eu prometo.” É porque você fechou e reabriu isso. Aprendemos algumas coisas. Aprendemos sobre exibições. Mostramos bloco, que é o nosso material de nível de bloco. É por isso que estabelecemos etiquetas de laboratório em nível de bloco como esta quando estive a falar. Você tem inline, que são coisas como nossas tags de imagem e agora um tags, muitos atributos embutidos, elementos, mas há alguns deles fazer um pouco de ambos. Era o que queríamos neste caso. Quer que MyButton me permita fazer alguma margem no topo. A outra coisa boa que fizemos foi esta outra forma de escrever CSS. Fizemos vírgulas. Fizemos isso aqui. Onde estamos nós, vírgulas, dissemos, “Eu gostaria que você visse card1, card2 e card3". vírgulas fazem as ands. Se você colocar um espaço entre as coisas, eu estou tentando encontrar um que tenha um espaço, agora, tem que haver um. Será que temos um? Nós fazemos. Eu quero etiquetas p dentro de cartões, e aplicar essas coisas, mas só se houver uma tag p dentro dela. Este aqui é, eu gostaria de uma etiqueta com esta classe aplicada a ele. Pode usar isso. É aplicado a ele literalmente está preso ao lado dele. É aplicado ao lado. Sem espaço, espaço ruim. Também aprendemos que você precisa reiniciar a visualização do navegador se você pular entre diferentes projetos. Boa sorte depois perder-se na frente das pessoas. Você vai usá-lo como uma experiência de aprendizagem, é assim que eu vou chamá-lo. Para o próximo vídeo. 57. Como adicionar cantos arredondados a um botão ou tag div em HTML e CSS: Olá a todos, este vídeo vai ser tudo sobre radius em torno dos cantos dos botões. Mas vamos fazer isso com imagens e vamos fazê-lo com tags div também. Vamos fazer grandes radius feios como este e agradáveis simples como este, agradável e pequeno. Além disso, vamos fazer os aleatórios como este ou este ou este, você começa a idéia, cantos arredondados. Este vídeo é como quatro minutos de duração, mas realmente basta adicionar raio de borda para seus botões e você estará pronto. Mas se você quer a carga total para baixo, vamos assistir até o fim. Para adicionar pequenos cantos arredondados às bordas de nossas tags de botão ou div ou qualquer caixa, é super fácil. Em código VS, vamos encontrar o meu botão e eu vou dizer que você tem um raio de fronteira do que você quiser. Eu vou usar pixels e eu vou dizer, eu quero que sejam dois pixels e isso vai fazer todos os quatro cantos. Vamos dar uma olhada e olhar, eu tenho pequenos cantos arredondados. Vamos torná-los um pouco mais óbvios só para que você possa ver, 12 cantos arredondados gigantes. Você pode fazer cantos individuais. Vou te mostrar algumas coisas para fazer com o raio de fronteira enquanto estivermos aqui. Em primeiro lugar, não importa o que você aplicar, desde que seja uma caixa e tenha bordas. O que temos, estas cartas; cartas 1, 2 e 3. Eles vão trabalhar, cartas 1, 2 e 3. Você cola. São cantos arredondados de cartão 1. Esta imagem um pouco mais estranha. Está numa caixa. Mas se eu fizer isso em herobox2 que é a caixa em que ele se senta enquanto herobox2. Se eu fizer isso, não vai funcionar. A caixa é, mas há uma imagem dentro da caixa. Precisamos dizer, se há uma imagem, se está dentro da herobox2 então você realmente a aplica à imagem. A única razão pela qual eu estou fazendo uma classe composta é só porque eu não quero fazer isso em todas as imagens no documento. Você pode gostar disso. Imagem dentro da herobox2. Faça isso a todas as imagens, herobox2. Está aqui em herobox2 ou estou inventando nomes para coisas? Isso está acontecendo em hero2, é chamado herobox2. Aqui vamos nós. É isso, pode ser qualquer coisa. Você entendeu a idéia. A outra coisa que você pode fazer com o raio de fronteira é que acabamos de fazer isso para todos os quatro cantos, como fizemos com o preenchimento. Você pode usar qualquer um que faz todos eles, dois que faz superior e inferior, esquerda e direita. Eu poderia fazer 12 e vamos dizer três ou zero. Vamos fazer zero para cima e para baixo para que você tenha o primeiro. Entende o que quero dizer, difícil de explicar. cima à esquerda é o primeiro, depois este é ignorado. Você entendeu. Eu sei que você entende, eu não posso explicar. Isso é o que isso faz. Se você quiser fazer quatro então começar no canto superior esquerdo, dar a volta o próximo vai ser três ou seis pares, e então o próximo vai ser 100. Vai passar por todos estes. Agora, o que acaba acontecendo para 100 é que, na verdade, não são 100 pixels. Ele vai e o mais longe que pode, então é o mais longe que pode. Pode ser 1000 e não importaria. Pode usar isso a seu favor. Eu posso apenas fazê-los todos 1000 pixels e ele dá-lhe aquela caixa de forma redonda pálida porque ele apenas tenta encaixá-lo para fora até que ele entra em um círculo e, em seguida, não pode ir mais longe. Você pode fazer truques legais com isso. Você pode ir zero pixels, 1000 e 1000 e, em seguida, 0. Está tudo bem? Aqui está. Você pode fazer pequenas formas interessantes com ele. Mas você começa a idéia. Eu vou colocar em dois pixels porque este apenas como real sutil como pequena borda sobre ele. Isso é um raio de fronteira, meus amigos. Bom e fácil, mas eu estendi por alguns minutos. Vamos para o próximo vídeo. 58. Como adicionar uma sombra projetada CSS a tags div de botão de site e títulos de fontes de texto: Oi, todo mundo. Este vídeo é tudo sobre sombras. Solte sombras, solte sombras. Off, on, off, on. O problema comigo é que eu gosto da minha sombra sutil, por isso é um pouco mais difícil para skeet na tela tão alternado entre eles fazer você ficar louco. Mas você acertou. Solte sombra em textos, seja em botões ou faça isso em grandes tags div antigas, é uma extravagância de sombra. [ inaudível] agora e descobrir como fazê-lo em CSS. Vamos começar por adicioná-lo ao nosso botão. Nós temos o nosso botão lá ele está aqui, ele não está lá, onde ele está? Aqui está este aqui. Enquanto eu marcava href em nossa classe chamado “meu botão”, lá está o meu botão e tudo quando você faz é adicionar caixa-sombra, o que é estranho. Caixa-sombra. A sintaxe funciona. Há x, y, borrão e depois cor. Você não pode simplesmente colocar um x e y. Você pode dizer que na verdade eu queria ter cinco pixels para a direita e então eu quero cinco pixels para baixo. Você não coloca vírgulas. Basta colocar em espaços. Apenas presume que, você pode deixá-lo lá. Você pode apenas colocar uma sombra, para baixo e para a direita dela. Vamos dar uma olhadinha. Você vê isso lá dentro. Basicamente, o que ele está usando é realmente difícil e vai fazer o editor para zoom e você pode ver a coisinha rosa lá dentro? É porque está usando a mesma cor do meu texto. Neste caso, vou precisar adicionar uma cor, que é a terceira. Vou dizer preto. Aqui vamos nós. Posso adicionar outro porque é como uma sombra, feia. O que queremos é borrar um pouco, e assim x, y, e então o terceiro vai ser borrão. Eu vou dizer que eu gostaria de borrar por cinco pixels também. Isso só coloca uma confusão nisso. Mas você também pode fazer com sombras como usamos preto. Preto é legal. Mas se eu clicar em preto e branco para isso com cor pegá-lo aqui, eu quero brincar com a opacidade. Vou usar uma cor RGBA só para baixar a opacidade para que não seja tão violenta. Mais uma vez, acho que é um botão gigante. Você pode gostar. Eu prefiro simples assim, eu não gosto de nada no x. isto é o que eu faço normalmente. Você não precisa. Mas, algo assim me dá um bom como tão zero atravessando, então ele só sai do fundo. Tem um borrão muito curto e a opacidade baixa. É como 22 por cento. Vamos fazer um teste e ver como é. Como um pequeno botão sutil e às vezes você precisa dele. Eu acho que isso é bastante claro que é um botão, mas muitas vezes eu vou projetar algo que simplesmente não se parece com um botão. Você tem que dar algumas sombras só para fazer parecer que é clicável. Agora, nós fizemos isso por este botão aqui. Na verdade, não somos a favor de um botão. Nós realmente acabamos de fazer uma etiqueta. Você pode fazê-lo para qualquer tag. Digamos que h1. Vamos pegar tudo isso. Copie isso. Descubra h1. Certo amigo, está aqui, e você cola. Temos a mesma coisa e enviamos para o quarteirão. Fizemos sombra de caixa. A sombra da caixa vai funcionar bem para caixas. Texto vai funcionar bem para sombra de texto, você sabe disso. Aqui vamos nós. Agora, vá aquele pequeno subtil [inaudível]. Eu vou colocá-lo muito alto, então se você está assistindo e a qualidade não é grande, e eu vou colocar até 90% você pode ver uma sombra de gota muito forte. Caixa para caixas, texto para sombras de texto. Vou voltar para a minha pequena e sutil sombra. O que mais queremos fazer? Fizemos isso para a nossa etiqueta, fizemos isso para o nosso h1. Faremos pelas nossas cartas também. Vou fazer a mesma coisa. Cartas 1, 2 e 3. Há 1 e 2. Eu não quero aplicá-lo aos cartões plurais ou ao embrulho porque ele vai ser bem ao redor do lado de fora. Você pode ver que todos esses caras têm uma sombra e provavelmente não é forte o suficiente até mesmo para mim. Vou passar e empurrar isto para baixo para a esquerda e para a direita. Eu vou embora, talvez. Eu nem sei. Vamos ficar doidos 10 e vamos ter um borrão 10. Esperemos que, se a opacidade for baixa o suficiente para a Carta 1, provavelmente, a distância para isso é muito alta. Talvez com um borrão, mas cinco. Você pode seguir em frente agora. Vou voltar e voltar até ficar feliz com o cartão. Aquela faixa branca no exterior irritante. Eu tenho ignorado isso, então é na verdade da minha imagem que eu fiz. Acabei de fazer uma má imagem. Não pode ser se livrar dele. Tenho que entrar e acertar aquele JPEG. Eu gosto dessa. Vamos fazer isso por todos eles. Copiar. Legal. Solte sombras em todos esses caras. Parece legal. Agora uma coisa que vou mostrar é que fizemos o básico e há mais. Você precisa se preparar para a quantidade de sombras que você pode fazer. Eu fui para a W3schools.com/. Você pode ver o URL lá. Vou colocar no texto via projeto. Está sob sombras. Se você quiser dar uma olhada, há algumas coisas terríveis que você pode fazer. Ele só passa por toda a sintaxe diferente. Você pode fazer sombra. Há um borrão ao redor. Você pode ver, se você colocar 0, 0, é borrão ao redor do lado de fora se você precisar disso. Pode ser bom se você tiver texto acima de uma imagem. O que mais temos? Múltiplas sombras. Olhe para isso. Você pode colocar uma vírgula e colocar duas sombras. Eles parecem muito parecidos, essas duas cores. Mas, de qualquer forma, você entendeu a idéia. Vamos ver isto. Há uma sombra e outra sombra. Você pode colocar uma fronteira ao redor do lado de fora. Há muitas. Isso piora? Senti que me lembrava de olhar para isto. Eles são maus. Saiba que cobrimos um pouco disso, mas não a coisa toda. Gosto da sombra da caixa. Não sou muito fã dessa. Vamos fazer o pairar em um pouco e vamos olhar para pseudo-classes em um próximo vídeo. Não é bem próximo, [inaudível]. É isso. texto, sombras de caixa. Vai x, y, borrão, cor. É isso. Vejo você no próximo vídeo. 59. Como fazer backup do seu site enquanto o cria: Ei, todo mundo. Vamos olhar para fazer backup seu site no caso de tudo correr terrivelmente errado, você precisa reiniciá-lo, ou você ser hackeado, ou seu hackear você mesmo quebrá-lo. Há uma maneira oficial onde ele é feito automaticamente todos os dias. Se você estiver usando Bluehost, ele se chama CodeGuard. É uma taxa todos os meses, mas eles lidam com tudo. Eles enviam para você como um arquivo zip, você pode simplesmente reinstalá-lo, reverter para uma data ou fim diferente. Vou mostrar-te a maneira de o homem das cavernas fazer. Você apenas se volta, basicamente apenas rolando em um zíper, dar-lhe um bom encontro, e você tem duas maneiras de fazer backup. Vamos ver como fazer as duas coisas. Há duas maneiras de fazer backup do seu site. Há o caminho do homem das cavernas e, em seguida, é a maneira automática, e você provavelmente vai apenas fazer as duas coisas. Meu jeito de homem das cavernas é apenas fazê-lo localmente você mesmo manualmente cada vez que você toca seu site. Isso é o que eu faço. Meu processo é este, eu vou descobrir desktop. Eu vou como um jogo, prestes a mexer com os sites. No caso de eu quebrar tudo, o que eu faço é selecionar tudo. Eu clico no topo, mantenha a tecla Shift pressionada, clique no último, clique com o botão direito do mouse nele. Em um Mac é compactar, ok, em um PC ele é visto e, em seguida, há como uma pasta zip. Se você conseguir resolver isso, confira como compactar um arquivo em sua plataforma. Tenho o fecho aqui no meu Mac. O que eu faço é chamá-lo de data, então arquivar e vai ser a data de trás para a frente. Hoje é dia 19. Qual é o dia de hoje, é junho, eu nem sei que data é hoje. Acho que o dia 19, 20, acho que é hoje. Sei que os americanos fazem o contrário, mas você precisa fazer assim. O dia 20 do sexto, 2019, significa que quando eu fizer outro dia, diga que é na próxima semana. Está no mês e eu comprimo. Fiz a mesma coisa e acabei de marcar a data por isso ainda é este mês, mas é dia 30. Significa que eles colam Alfa numericamente. Se eu fizer outro, você acerta. Vou pensar que é normalmente o que estou fazendo aqui. Dezenove dizem, é mais tarde no ano, é quase o fim do ano. Significa que o fundo é sempre o mais recente. Eu sei que quando estou olhando para backups, eu posso vê-los em ordem cronológica, tão novo, segundo mais novo, mais antigo. Vou te mostrar um pouco mais no treino. Onde está um dos meus arquivos, um dos meus sites, sim, este aqui. Também coloque em uma pasta Zold, sobre a qual falarei em um segundo também. Você pode ver que este é um site antigo. Vou tentar descobrir quando eu me lembrei que eu tenho e você pode ver lá que é um backup realmente antigo e este é um novo, este é um novo. Isso é realmente útil porque é 2019 agora e eu posso dizer, este é um antigo. Há um de mais cedo e isso significa que posso voltar. Às vezes você simplesmente saltar para uma pequena mudança rápida e , em seguida, carregar o site e, em seguida, você vai embora e , mais tarde, você percebe que você destruiu alguma outra página. Você pode reverter. Zold, vou te mostrar o que faço, Zold. Área de trabalho, Projeto 2. Eu sempre coloco os backups, em vez disso em arquivo, coloco em algo chamado Zold. Zold é apenas velho com um Z na frente, então ele acaba na parte inferior da sua lista alfanumérica, já que estava na parte inferior, e então, eu vou fazer minha pequena coisa de arquivo e, em seguida, jogá-los lá quando eu terminar, colocar o data sobre eles e, em seguida, eu vou apenas mantê-los em Zold. - Sim. Eu fico um pouco maluco organizacional com coisas assim. Você lê isso. Esse é o jeito do homem das cavernas. Da maneira automática, você deve fazer as duas coisas. Nunca confio em nenhum deles. Bluehost tem um serviço muito legal, onde está o seu Bluehost. Aí está você. Este é o seu painel quando você faz login no Bluehost. Se você estiver usando uma empresa de hospedagem diferente, todos eles têm algo semelhante. Bluehost chama isso, eu tenho alguns nomes por algum motivo, mas se você tem um mercado, é uma solução paga. Isso é chamado, nós vamos para os complementos. Sim, complementos e isso é chamado Bluehost CodeGuard. Já vi isso referido como um profissional de backup. É um custo também. É quase tanto quanto o meu anfitrião. Você tem que decidir se isso é certo para você. No seu estágio, você pode apenas estar feliz fazendo estilo homem das cavernas, mas você pode querer este pouco extra e isso apenas adiciona à sua conta mensal. Obrigado Bluehost. Lembre-se, se você não se inscreveu para Bluehost, você pode ir para bringyourownlaptop.com/blue e isso vai levá-lo lá e obter um desconto sobre ele e eu recebo uma pequena porcentagem do seu primeiro Cadastre-se, não custa custo extra você arrendamento, mas Só um lembrete. É isso, e eu só espero que minha foto carregue. Muito orgulhoso que eu esteja deste lado, olhe para mim. É isso. Vejo você no próximo vídeo. 60. Reutilizando uma classe de botão na navegação: Ei amigo, uma simples e agradável. Fizemos este lindo estilo de botão que queremos reutilizar para a nossa navegação, para mudá-lo deste para este. Então vamos reutilizá-lo e vamos adicionar um pouco de extra apenas para espaçar. É bem simples. Vamos entrar e fazer isso. Tudo bem, então você quer repetir o nosso trabalho chique que fizemos aqui em baixo ao longo destes pequenos botões aqui em baixo e fazer um pouco de extra para separá-los. Então, para reutilizar nosso estilo, vamos abrir VS Code. Nós estamos indo para o topo aqui. Acabamos de colocar essas coisas básicas para começar, lembra? Vamos digitar, precisamos de três links, então precisamos de uma etiqueta. Agora eu poderia começar a datilografar todos. Vou te mostrar uma coisinha legal. Então, quando uma etiqueta com o meu botão se aplicou a eles. Então, enquanto eles estiverem unidos, isso vai dizer que eu vou ter uma etiqueta com o meu botão adjacente. Também quero três deles, por favor. Retorno e cola. Vou ter o meu cursor múltiplo. Agora, eu não tenho um PC, eu tenho um Mac. No meu Mac, é opção de comando e eu apenas usar minha seta para baixo e fiz vários cursores. O seu será Control Alt em um PC. Eu só vou ter um hash dois todos esses caras. Agora preciso de SMS, não consigo lembrar o que era, o que era? Nós tivemos, zoom out. Era livro on-line sobre em contato. Então eu posso fazer isso, livro on-line sobre eu seria realmente typer rápido se eu posso soletrar. Fechei-o, tentei impressionar-te com os meus atalhos. Não funcionou. Foi um grande fracasso. Estou digitando muito rápido. Vamos verificar no navegador. Agora, porque eu fui almoçar entre este vídeo e o último, eu vou apenas desligá-lo e ligá-lo novamente só para ter certeza de que eu não me deparei com o mesmo problema novamente. Certo, e não atualizando. Então, vá em frente. Então nós reutilizamos a mesma classe aqui, mas eu queria fazer algo um pouco diferente. Quero que haja um pouco mais de espaço entre eles. Então o que eu vou fazer aqui é dizer que na verdade eu gostaria se aquele botão um.my aparecer, se estiver dentro de um navegador. Lembrem-se, espaço significa isto dentro disto. Eu quero que você faça algo e talvez um pouco de margem para a esquerda, eu quero esquerda. Sim. Esquerda. Quantos pixels? 30 pixels. Então dê uma olhada, legal. Então eu não queria que ambos os lados, obviamente, esse é o direito, esse é o lado esquerdo é um pouco lá, um pouco ali e há realmente coisas penduradas aqui. Há uma margem desse lado, mas não faz diferença no meu design, então estou feliz. Certo, é assim que se reutiliza. O que vamos fazer no próximo é personalizá-lo um pouco. Bem, nós vamos personalizar um enorme chegando. Vamos soltar menus e coisas legais. Sim, é assim que reutilizar uma aula que você fez e adicionar um pouco de extra. Certo, próximo vídeo. 61. Projeto do curso 04 - Botão personalizado: Você pode dizer pelo nome [inaudível]. É outro projeto de classe. Não se preocupe, isso é divertido. Eu dizer isso não faz com que seja verdade. Vamos aprender. Classe Projeto 04. Se você está procurando as notas eletrônicas para isso, elas estão na pasta do seu projeto de classe. Há um documento do Word. Algumas coisas que você quer fazer. O principal é fazê-lo parecer assim. Atualmente parece assim com esses botões que reutilizamos. Quero que faça parecer assim. Há uma linha ao redor do lado de fora. Não há preenchimento. Estamos usando o Playfear no meio. Carrapatos brancos, não há sublinhados. Faz com que pareça assim. Vamos manter este aqui em baixo. Deixa o meu botão em paz e crias um novo. Sugeri um botão de navegação de código. Pode chamar o que quiser, mas essas são as coisas. Uma das grandes coisas é que, você ainda não sabe como fazer fronteiras, nós não fizemos isso. Então eu propositadamente deixei isso fora por enquanto. Ensinando você como pescar essa coisa, onde ou apenas Google ou procurar Stack Overflow e uma maneira de colocar uma linha ao redor do exterior. Estou evitando a linguagem que realmente é encontrada porque eu quero que você seja capaz de encontrá-lo e implementá-lo você mesmo. Há algumas maneiras de fazer isso. Vamos explorar todos na próxima. Qualquer outra coisa que precise entrar. Todos eles vão ser uma etiqueta, o que eles já são. Vamos criar botão de navegação. Vamos colocar uma borda branca, Playfair, pegar este branco, sem sublinhado, fundo, sem cor de fundo. Quando você terminar, antes de passar para o próximo vídeo, eu quero que você tire uma captura de tela dele e apenas compartilhe comigo nas redes sociais para dizer, “Sim, eu fiz isso. Acertei.” Se der terrivelmente errado, você pode compartilhar essa foto também. Eu só quero que você seja responsabilizado e eu sei que eu não tenho nenhuma maneira dizer que você não está fazendo uma foto disso. É um pouco virtual essa coisa de vídeo, mas podemos nos conectar via mídia social. Lembre-se de usar a hashtag ByolWeb. Traga sua própria web de laptop e o grupo do Facebook aqui. Não se esqueça disso. Vou mencionar novamente porque é muito útil e está crescendo muito bem e há muitas pessoas respondendo. Eu amo que é o mais recente projeto de Stephen Butler. Ele é um dos moderadores. Transformou os sobrinhos dele a desenhar nisso. Olha como é fixe. Há coisas de vídeo, você pode ver aqui que é algumas das coisas UX do XD. Tem todo tipo de coisas legais aqui, mas eu quero mais coisas da web aqui. No momento é muito gráfico para os nossos outros cursos. Então veja, ele coloca seu próprio laptop online. É um grupo, você tem que pedir para participar, mas você tem que postar uma pequena captura de tela lá. Vejo você no próximo vídeo. 62. Projeto do curso 04 - Botão personalizado COMPLETO: Tudo bem. Como é que correu? Você fez isso, antes de tudo? Em segundo lugar, correu bem? Polegares para cima. Será que correu mal? Polegares para baixo. Está tudo bem. Vamos trabalhar sobre como fazê-lo agora. Vamos dar uma olhada nesse código. O que vamos fazer é remover o meu botão, de todos estes e aplicar a nossa própria classe. Um pequeno atalho legal é, realmente não importa se você tem que selecionar que vai apenas fazer um cursor dentro de algo como uma classe, ele pode estar dentro de qualquer coisa. Mas se você quiser algo mais abaixo na página, você pode clicar em Command D em um Mac, Control D em um PC e assistir este Command DD fechar esse. Se você quer o que está aqui de novo, D. Você pode ver apenas salta para versões antigas disso. Isso pode ser super útil. No nosso caso, porque eles são empilhados uns sobre os outros, você poderia usar vários cursores, mas DDD. É Controle D em um PC, Comando D em um Mac. Este vai ser chamado de botão de navegação. Legal, aqui embaixo, vou criar nosso botão de navegação. Coloque uma parada completa ou um ponto, botão de navegação, pegue as chaves, o que precisamos fazer? Agora, há duas maneiras de você fazer isso dependendo de quão antiga a solução que você encontrou, há uma nova maneira e uma maneira antiga. Ambos são perfeitamente tão bons quanto o próximo, então estilo de borda e você configurá-lo para sólido, isso é um e meio dele. Então você diz peso da borda, em seguida, tamanho da borda. É o tamanho? Vamos verificar. Não, é a largura da borda. - Sim. Largura da borda. Legal e eu vou definir o meu para um pixel. Isso deve nos aproximar. Vamos dar uma olhadinha. Vai parecer um pouco estranho, mas aqui está, esse é o tipo de básico. Agora, precisamos adicionar estofamento a ele e todo o resto. Mas vamos falar do outro jeito. Em vez de fazer isso, você pode realmente apenas digitar na borda, dois pontos e, em seguida, você pode colocá-lo em uma ordem que ele vai para o peso em torno do lado de fora, o estilo. Só estou usando espaços entre todos eles. Vou usar branco. Preciso escrever branco? Não me lembro, mas isso fará exatamente a mesma coisa. Isso é apenas uma sintaxe mais curta do que fazê-los separadamente como tamanho da borda, estilo da borda, cor da borda. Eu acho que por padrão ele leva a cor do texto dentro dele, um 100 por cento. Mas essa é uma maneira de fazer isso. Vamos adicionar estofamento e vamos usar o nosso estofamento chique. Usou o estofamento chique? Ou o estofamento, acolchoamento à esquerda, acolchoamento à direita? Não importa você chegar ao mesmo lugar, mas lembre-se, como margens, você começa no topo. Quero que o topo seja de 11 pixels de espaço. Então vamos usar a direita, e eu vou fazer 25 pixels. Se eu deixar como dois se lembram, isso vai acabar sendo de cima e de baixo, eles vão ser esquerda e direita. Salve isso. Vamos dar uma olhadinha. Legal. Eu quero que ele seja Playfair, e então estilo de fonte Não, não tamanho, estilo, e eu quero isso. Venha, então. Font-família. Não finja que é um teste, na verdade, vá roubá-lo. Aqui está. Você provavelmente fez isso também. Eu aposto que você fez. Porque eu sempre esqueço que são duas palavras, é uma palavra de qualquer maneira. Guarde isso. Vamos dar uma olhadinha. Eu acho que nós fizemos em tudo, é uma etiqueta. Dê uma olhada na nossa lista é uma etiqueta. Nós criamos nossa própria classe chamada botão de navegação. Temos uma borda branca ao redor do lado de fora. É a Playfair. É branco. Não há sublinhado e não há cor de fundo. Agora, o texto é branco e sublinhado, pode depender de como você implementou seu site. O seu era roxo e estava sublinhado ou azul e sublinhado. O meu não é porque no início do curso, eu cuidei dele lembrar, Eu disse, vamos apenas adicionar uma etiqueta. Todas as etiquetas em todo o nosso site são brancas, e não têm sublinhado, decoração de texto, nenhum. Se você não fez isso, você teria que editar aqui. Mas espero que isso funcione para você, e se ainda assim não funcionou. Eu só estou pensando, se ainda está sublinhado em azul, bem, você tem que fazer isso. Você vai ter que obter um, uma etiqueta que é unida ao botão de navegação e estilizá-lo para ser cor branca, e eu vou fazer com a coisa toda. Nós apenas vamos, chegamos até aqui. Decoração de texto nenhum. Estou culpando um pouco da minha ortografia, não consigo ver o meu teclado. Quando você vai filmar esses cursos, bem, você não está, eu sou. Tem um grande microfone bem na minha frente. Você pode me ouvir e meu grande som. Porque se eu estiver muito longe, você me ouve aqui, e não é tão legal, então eu tenho que me sentar bem e fechar, que significa que está bem na frente do meu teclado então ou eu estou olhando em volta assim, ou eu simplesmente não posso ver o que estou digitando e eu não sou um bom datilografador o suficiente para não ser capaz de ver, de qualquer maneira. Agora eu acho que mais tarde nesses cursos, bem, eu tenho um bazilhão de vídeos, e eu sinto que nós cruzamos o Dan é ser um super profissional no início e nós estamos muito em compartilhar. Você pode dizer que dividindo muito Dan, e eu vou endireitar isso por um tempo, pelo menos. Agora estamos falando de famílias e meus problemas com meu microfone. Vamos entrar agora e entrar no próximo vídeo antes que eu faça outra tangente. Tchau agora. 63. Como adicionar uma regra horizontal usando HTML5 e CSS3 no VS Code: Ei, todo mundo. Simpático, simples. Não temos fila. Agora temos uma linha. Super simples. Vamos adicionar uma borda à caixa do título. Vamos falar sobre a <hr> tag '', bem como saltar para o VS Code e fazê-lo acontecer. Primeiro, vamos falar sobre a linha que precisamos é esta aqui, certo? Na minha simulação, eu tenho esta linha que atravessa o documento até a página superior, entre o cabeçalho e esta caixa de herói principal aqui e é capa como um cinza claro. Escolhi essa cor do C-C-C-C-C-C, e vamos mostrar-te como se faz. A maneira ruim, bem, não é uma maneira ruim, é apenas não parece ser usado muito frequentemente e ele tem algumas desvantagens então entre o cabeçalho eo principal, eu só vou ficar aqui no meio e nós vamos usar esta tag . Se você já fez algum dos meus cursos anteriores, esta <hr> tag '' é o que usamos, a regra horizontal. Ele aparece na página. É perfeito. Tem um monte de pé sobre ele, que é provavelmente o maior problema com ele. Estranhamente sobre uma etiqueta '' também, ela não tem um fechamento '', não precisa dela. Eu não sei porquê. Apenas magia. Não precisa fazer aquilo tudo. Há um par de tags que fazem isso, e então a razão pela qual nós não fazemos isso é que eu não estou na documentação HTML5 que diz, “Ei, nós não estamos usando isso mais como uma régua. Estamos a usá-lo como uma quebra de conteúdo e vamos escondê-lo.” Você deve torná-lo para que ele estilos você não pode vê-lo e ele é usado para quebrar conteúdo. Ainda funciona, mas vamos simplesmente não usá-lo mais e eu vou te mostrar a maneira mais fácil de contornar isso, super fácil porque o outro inconveniente com '' é algo em sua página, e eu vou ter que ter isso em cada abaixo de cada cabeçalho. Uma boa maneira de contornar isso é ou nós vamos adicionar uma borda como fizemos para os botões aqui na parte inferior do cabeçalho ou o topo do principal, qualquer maneira vai nos levar ao lugar certo. Vamos o cabeçalho e você notará como o suporte estava lá, não está quebrado. Só isso me irrita. Eu gostaria que ele fosse separado assim. Vamos usar “fronteira”. Soletre certo hoje. Border bottom, e assim como fizemos antes, podemos colocar uma linha para que o primeiro seja o quão largo ele é, e então ele vai ser sólido e então ele vai ser cinza. Eu amo isso. Você pode usar cinza com um A ou um E. É da mesma cor. Acho que nem há versões americanas ou inglesas da ortografia. Acho que são apenas duas soletrações da mesma palavra. Provavelmente estou errado sobre isso. Mas de qualquer forma, lá vai você. Há um cinza claro para ambos. Ambos os feitiços são iguais. Você pode ter as duas soletrações. Você pode ver que ele está fazendo exatamente o mesmo trabalho e é apenas uma coisa mais simples enquanto o outro tinha toda essa profundidade estranha para ele. O '<hr>' tem algum estilo de peso para ele, tipo de velha escola. Você tem sólido, você tem pontilhado. Há muitos estilos diferentes para ele. estilo é bem pequeno. Vou torná-lo bonito e grande para que você possa vê-lo no caso de você querer pontos gigantes, mas é isso. Bom vídeo curto, fácil de fazer linhas. Não use mais o '', basta encontrar uma das caixas que se aplicam. Agora, haverá momentos em que você diz, “Na verdade, eu quero uma pequena linha atravessada”, e você pode usar o '<hr>'. Você pode apenas estilizá-lo para se livrar de todos os bits extras. Eu não vou cobrir como remover todo o estilo construído para ele. Você pode achar que há realmente um bom uma linha reta usando o '' porque o CSS reset que você está usando pode ter esclarecido isso, mas o que estamos usando de Chris Meyer não é. Tudo bem, é isso. Vejo você no próximo vídeo. 64. Como fazer tags div quebrarem em linhas separadas usando HTML5 CSS3 Flexbox: Ei, todo mundo. Este vídeo, você vai notar que temos todos esses depoimentos aqui. Estão aqui porque quero mostrar como funciona o Flex-wrap. Nós temos esses caras todos em uma etiqueta de pai. Eles não estão em linhas individuais. Eles estão todos em sua própria tag e há um pequeno recurso legal chamado text-wrap, ou pelo menos Flex-wrap que irá quebrá-los em suas próprias linhas. Sim, então vamos aprender a fazer isso e adicionar alguns depoimentos. Na minha maquete, inventei quatro testemunhos diferentes aqui. O que eu gostaria de fazer é que eu gostaria que este site apenas crescesse, enquanto eu continuo adicionando depoimentos para ficar cada vez mais tempo. Em vez de fazer uma linha, eu poderia fazer uma tag div como um pai, e colocar esses dois nele, e dividi-los usando Flexbox, e então fazer um segundo. problema com isso é que eu tenho que fazer um pai para cada um e o que eu quero fazer é mostrar a vocês o atributo Flexbox chamado text-wrap. Significa que vamos fazer um gigante ou um pai para todos eles entrarem e o que vamos dizer é que os caras acabam na próxima linha. Se houver muitos de vocês e não se encaixarem, vão para a próxima linha. Porque por padrão o que ele tenta fazer como esses caras aqui apenas tenta espremer todos na mesma linha. Agora vai demorar um pouco para construir isso. Se você quiser apenas cortar para a folha de atalho em seus arquivos de exercícios em Flexbox, este é o atributo aqui. Você pode ver o que ele está fazendo lá. Vai para a etiqueta principal. Basta adicionar essa condição de embrulho. Mas se você está trabalhando junto comigo, vamos passar pelo resto deste tutorial porque eu quero adicionar alguns pedaços e peças. Porque há algumas coisas mais tarde neste curso, se você está pensando, “vamos pular este”. Ele vai voltar, porque eu quero fazer pseudoaulas e todo tipo de outras coisas divertidas mais tarde. Onde adicioná-los, fica confuso aqui e você fica tipo, onde está tudo isso? Eu acho apenas clicando neles e você pode ver que é meio que casado com seu amigo lá em cima. Cartas lá dentro. Depois que as cartas terminarem, quero que os meus depoimentos comecem. Vou dar uma boa oportunidade para tornar as coisas mais fáceis para todos. Vou criar uma aula chamada Depoimentos. Funciona o suficiente para mim e dentro de lá, eu vou fazer, quantos? Precisamos de três deles. Vou criar todas as aulas agora. Este, vou chamá-lo de “T Box “e diferente dos nossos cartões. Temos o cartão um, dois e três. Porque estes são exatamente os mesmos, todo o caminho. Eu só vou usar a mesma classe para controlar todos eles. Legal. Dentro destes T-boxes vão estar alguns ticks que tenho na pasta do projecto dois. Procure o texto do projeto dois e eu tenho meus depoimentos. Vou mostrar-lhe isso. testimonial-generator.com, eu não uso isso para mim. Mas eu estava procurando algo para esta aula e eu só precisava passar e eu encontrei o testimonial-generator.com. Você colocou em seu serviço de projetos, massagem nas costas do Dan. Ninguém quer um desses, e lá vai você, gere. Desde que investi na massagem nas costas do Daniel, eu ganhei mais de 100 mil lucros, eu estaria perdido, mas você entendeu a idéia, certo? Você pode gerar todas essas coisas. Fiz por estes, mas não pelos meus. Eu coloquei ciclos de matrícula e o que eu gostaria de fazer é que eu gostaria disso. O nome separado da cópia do corpo em duas tags P. Eu vou copiar esta primeira parte e eu vou entrar aqui, e eu vou colocar em uma etiqueta P e colar isso, e eu vou arrumar isso porque esse é o cara que eu sou. Lá vamos nós e vamos fazer outro P tag com, eu poderia apenas fazer o nome certo. Outra tag P, e eu vou colocar este aqui. Tudo bem, então eu quero isso para três deles. Então eu vou apenas duplicá-los. Copiar, colar, colar. Estão todos a conseguir. Minhas guias estão se misturando. Lembra-se do que fizemos antes? Eu vou selecionar enquanto tudo isso e um clique com o botão direito nele e eu vou para a seleção de formatação. Você vê o atalho ali. Se você está encontrando, você sabe, você quer fazer isso o tempo todo. Agora é agradável e espaçado. Está bem, vai mudar o texto. Vou pedir ao editor para acelerar. Agora o editor é, Jason. Obrigado, Jason. Por alguma razão, decidi que precisávamos de três. Claramente precisávamos de quatro, certo? Aqui vamos nós, cola-os e coloque o último e te vejo em um segundo. Tudo bem, você está de volta. O que você deve ter notado foi quando eu fiz minha limpeza, limpando meu código. É estranho colocar isso aí e não sei por quê. Talvez seja o apóstrofo. Não tenho certeza. Na verdade, não limpei. Acertei minhas guias. Mas isso é uma coisa estranha com a etiqueta P. Lembre-se se o seu está fluindo para fora da página, obtenha uma visualização e alterne a quebra de palavras. Ok, se está indo até o fim, pode haver como você gosta, eu não. Tudo bem, então eu tenho minhas quatro coisas dentro Vamos dar uma olhada na minha página. Tenho estes quatro depoimentos. Eu não os estilizei em tudo. Então vamos fazer isso. Vou estilizar o T-box primeiro, está bem? Porque eram eles que tinham a largura e a altura. Vá para a caixa T. Vou fazer algumas coisas com ele. Quero dar-lhe uma largura. Neste caso, vou usar porcentagens e vou fazer. Já testei isto, está bem? Vou fazer 37% para dar uma olhadinha. Lembre-se, na verdade isso é um pouco pequeno sim bom trabalho, Dan testá-lo. Então eles são perfeitos. Eu gostaria de colocar um pouco de estofamento em torno dele. Ok, então preenchendo todo o caminho, eu vou fazer 50 pixels. Quero colocá-los na mesma linha. Na verdade, coloque a linha do lado de fora primeiro só para que possamos fazer isso. Assim como a fronteira. Vou soletrar errado pela milionésima vez. Fronteira. E vamos fazer o mesmo que fizemos para os botões. Vai ter uma largura de um. Vai ser uma fronteira sólida, vai ser branca. Então dê uma olhada. Quão perto é isso? Isso é muito bom. Ok, agora eu quero colocá-los em sua própria linha. Nunca vai acontecer no momento, porque temos o nosso um pouco grande. Você pode ver que eu fiz 47%, ok? Mas, já passou disso, já passou dos 50. Por que é isso? Você sabe, por quê? Porque nós adicionamos o preenchimento. Lembre-se do preenchimento adicionado à largura total. Você está tipo, ok. Eu poderia, é por isso que eu tinha 37 na minha cabeça porque 37 mais meu estofamento, faz com que seja menos da metade. Ou é menos da metade? Certo, e só estava sendo um truque sorrateiro. Não queremos fazer isso. Queremos ser todos oficiais. Lembre-se de como fazer isso. Fazemos isso na caixa ou na caixa de embrulho. Acho que podemos fazer isso. Eu nem tenho certeza. A mente ficou em branco. Vamos verificar. Vamos editar nossos depoimentos. Lembre-se do que era. Lembrem-se da caixa de fronteira. Não, o tamanho da caixa. Tamanho da caixa, caixa de borda. Lá vai você. Não, você tem que fazer isso com as próprias coisas. Claro que você sabe. Isso faz sentido. Lá vai você. Ok, então fazendo isso, isso desfaz isso e estamos prontos para ir. Tudo bem, a próxima coisa que queremos fazer é colocá-los na mesma linha. Como é que fazemos isso? Quero que faça uma pausa e pense um pouco. Não é um exame. É como um teste pop. Tudo bem, o que fizemos antes. Lembre-se que definimos a tela para Flex. Ok, e por padrão que todos tentam apertar na mesma linha, o que é, legal. A próxima coisa que vamos ver é a parte que temos. Bem, nós não precisávamos mencionar ou apontar totalmente para isso. Ok. Da sua folha de truques Flexbox. A partir de seus arquivos de exercícios e definimos o flex-wrap para embrulhar porque é isso que queremos fazer. Ok, e vamos dar uma olhada. Vamos para aqui. Vamos definir o flex-wrap para embrulhar. Lá vamos nós. Veja se funciona. - Legal. Bem, de alguma forma, eu quero separá-los. Eu poderia começar a adicionar estofamento entre eles. Eu posso fazer um pouco duro. Ok. Você se lembra da classe que adicionamos do Flexbox apenas para separá-los todos. Fizemos isso por este. Você pode trapacear e ir e verificar essa. Certo, onde estão as minhas cartas? Ali está ele aqui em cima, está bem? Lembra-se desta? Justificar, conteúdo, espaço entre, tudo bem, cartas. Ele só estava enrolando porque não se lembrava um pouco. Mas é isso que é. Justificar, conteúdo, espaço entre, ok. Deve separá-los todos. Agora eu quero um pouco de margem para o topo, ok? Então, destas pequenas caixas em T aqui, vou dizer margem. A margem vai fazer o topo. Quanto vamos fazer? 50 pixels. Aqui vamos nós, há umas pequenas fronteiras. Ok, nós temos essa coisa estranha acontecendo com a altura aqui. Certo, sem gradiente indo aleatoriamente no fundo. Vamos consertar isso. O que está controlando ele? O topo aqui. Adicionamos isso antes para corrigir um problema em que nosso site era muito pequeno. Ok, e fez essa visão inicial 100%, o que meio que nos leva até o fim da minha tela. O seu pode não ter esse problema porque sua tela pode ser menor ou maior. Certo, mas não precisamos mais da altura para ser 100%. Porque meu site é bom e longo. Fazendo algum estofamento por baixo desses caras. Na verdade, onde você adiciona o estofamento agora? Ok. Nós não temos um rodapé neste site. Nós realmente não projetamos um com um. Então eu não tenho que ter um. Onde devo fazer isso? Eu poderia colocá-lo no fundo dos depoimentos. Estou relutante em adicionar estofamento no fundo do corpo só porque sou tímido. Mexer com o body tag pode fazer coisas estranhas, especialmente se você estiver trabalhando com coisas como Bootstrap, Flexbox. Todos têm os seus mitos por quererem fazer coisas com o corpo. Ok, eu vou ser super cuidadoso e usar o que eu fiz. Eu sei que eles não vão mexer com isso. Ok? Vou dizer margem, fundo. Vou dizer 50, talvez 100. Vamos dobrar. Dê uma olhada, essa é a minha maquete. Aqui vamos nós. Algum preenchimento na parte inferior, ou pelo menos margem na parte inferior. Tudo bem, então nós olhamos para o que flex-wrap faz. Significa que esses caras são todos caras cheios, todos em uma caixa. O legal sobre isso é que se eu fizesse esses caras menores ou eu adicionasse mais deles. Certo, então vamos copiar. Vou adicionar mais alguns colar, colar, colar, fazer muito mais. O legal sobre eles é dar uma olhada. Eles podem continuar enrolando na próxima linha. Tudo bem. Eu não quero todos aqueles caras indo. Agradável e limpo. De volta para onde começamos. Você aí, pegue o microfone. Estamos acabados. Está bem, vejo-te no próximo vídeo. 65. Como alterar a cor do foco e animar meu botão em HTML e CSS: Ei aí. Até agora, nosso botão acabou de definir lá não fazendo muito. Mas agora veja quando eu mover meu mouse sobre, desbotada em verde. Isso é chamado de pseudo-classe. Vamos usar o pseudo pairar. Vou mostrar-lhe como fazê-lo agora neste código. Atualmente, o meu botão não tem o cursor do mouse. Quando eu passo o mouse sobre ele, eu tenho o tipo de mão do Mickey Mouse, mas eu não fico pairando como você viu na introdução. A maneira de conseguir isso é algo chamado uma pseudo-classe. Porque esta tag A aqui tem mais de um estado. Ele não está sendo tocado estado e tem um estado hover. Tem quando eu clicar nele estado e tem que eu já estive lá antes estado. Ok. Há outras palavras técnicas, mas você entende o que quero dizer, há um código, ele faz algumas coisas diferentes e você pode detectá-las criando uma pseudo-classe. A pseudo-classe funciona assim. Eu vou fazer isso com o meu botão porque é isso que eu tenho aplicado a esta coisa. Você cria outra classe e diz, meu botão. Ok. Soletre direito, você precisa, eu gostaria de passar o mouse, e a maneira como uma pseudo-classe funciona é que a única velocidade se juntou e precisa salvar isso. Vou pegar o pairar, o estado de pairar deste botão. O que vamos fazer? Alterar a cor do plano de fundo. Vou escolher provavelmente alguma coisa. Seleciona. Tudo bem. Espero que agora, quando eu visualizá-lo, eu possa pairar sobre ele e você vai. Isso tem um pseudo-estado de pairar que eu encontrei e mudei. Hack legal. Você pode fazer, você deve ter notado na introdução, eu fiz desaparecer. Vamos fazer isso. No CSS3, podemos fazer uma transição, uma duração de transição. Vai fazer quanto tempo demoraria um segundo. Então vai levar um segundo para esta coisa se ativar. Vamos dar uma prévia. Pronta? Agora que olhamos para o estado flutuante, aqui estão os outros. Só estou mostrando w3schools.com para as diferentes pseudo-classes. Esse é o que falamos. Vamos dar uma olhada no pairar feito. É o principal quando você vai fazer. Eu nunca toco link visitado ou ativo. Mas vamos dar uma olhada para dizer que você sabe o que eles são. Então, no momento, está pronto, se você não clicou nele, já clicou nele e está verde. Visitei isto por isso é verde. Quando eu pairo o mouse, é rosa quente. Então você vai, isso é o que nós fizemos, o pairar. Este aqui, quando está ativo, fica azul. Veja isso, quando eu clicar nele. Fica azul por um segundo. Eu nunca coloquei isso porque quem vai ver? Porque eu clico assim, como uma pessoa normal, super rápido e você nunca vê a cor mudar. Cabe a você, embora você possa estar amando mudar a cor ativa. Você pode ver apenas a sintaxe. É dois pontos, e então estes são predefinidos. Vai certificar-se de que é o cólon no meio. Há muitas outras pseudo-classes. No fundo desta escola W3 há um monte de diferentes. Ok. Vamos cobrir mais alguns deles no próximo vídeo. Então, sim, vamos cobrir os que eu uso de qualquer maneira. Muitos deles aqui. Eu nunca tive a chance de usar. Mas sim, há muitas pseudo-classes fora de apenas pairar. Vamos saltar para o próximo vídeo e verificar alguns deles. 66. Como direcionar tags específicas em HTML para aplicar css usando pseudoclasses: Oi lá. Vamos levar as pseudo-classes para um próximo nível. Vamos segmentar esta segunda etiqueta P e agora depoimentos e vamos torná-la menor, vamos acessá-la. Você vai notar agora HTML que não aplicamos uma classe a ele, porque isso é o que teríamos feito até agora. Nós teríamos ido P tag obter uma classe, mas olhe que apenas tags P antigas simples, mas de alguma forma em nosso CSS magicamente seremos capazes de isolar isso usando uma pseudo-classe. Fazemos isso com nosso testemunho, fazemos isso com essa coisa boa, cada terceiro item da lista é vermelho. Pseudo-classes são o lugar onde está acontecendo. Junte-se a mim neste vídeo e você também pode ser legal com pseudo-classes. Aprendemos o pairar de pseudo-classe no último vídeo, mas há muitas outras coisas legais que você pode fazer com pseudo-classes. A versão escolas W3 de explicar tudo pode ser muito seco e que às vezes é realmente o que eu quero, mas às vezes é bom ir e verificar algo como CSS-truques, Chris Coyier é muito bom em apenas dar coisas um aplicativo prático e às vezes ele vai dizer que você tem que fazer algo de acordo com o manual. Mas então você fica tipo “Realmente” e então você vem aqui e às vezes Chris diz: “Sim, isso é o que você queria fazer”, mas não é o que as pessoas fazem, não o que os designers normais fazem ou os desenvolvedores. De qualquer forma, este é muito bom, css-tricks.com/pseudo-classselectors, basta fazer uma pesquisa neste site e dá-lhe explicações mais práticas. Agora, eu vou passar por eles eu mesmo porque há muito nisso, mas apenas saiba que há mais que podemos cobrir neste vídeo em particular. Tem um muito comum. Como fizemos aqueles, vamos olhar para estes. A posição e a numeração são realmente úteis, porque o que eu gostaria de fazer para nossos depoimentos é esta última coisa aqui, esta última tag P. Eu gostaria de torná-lo menor, recuado um pouco, aqui está a minha maquete. Eu nem fiz isso na minha maquete, mas eu quero o menor empurrado para a direita e talvez itálico para que possamos mirar coisas assim usando pseudo-seletores. Vamos dar uma olhada então vamos usar este chamado primeiro filho primeiro e então vamos olhar para o último do tipo talvez. É algo para o nosso Visual Studio Code. Comece a trabalhar com as pseudo-classes um pouco mais complicadas. Vamos olhar para o primeiro filho, porque o que eu gostaria de fazer é que eu gostaria de dizer estilo o H1 dentro desta herobox. Podemos dizer que dentro da herobox 1 gostaria de estilizar o primeiro filho. Lembre-se que falamos sobre pais e filhos que faz um pouco mais de sentido agora. Eu quero encontrar o primeiro filho e agora o que você faz com ele é um aqui em cima, vamos olhar para o mais cedo. Quando queremos encontrar uma etiqueta P dentro das cartas colocamos um espaço e é o mesmo com essas pseudo-classes. Eu não quero anexá-lo diretamente a isso e fazer o primeiro filho, porque isso não é o que eu quero, o que eu quero fazer é encontrar o primeiro filho dentro de. Só tenho este espaço aqui como fizemos antes nas aulas mais antigas. Quero encontrar a primeira criança dentro de uma caixa de heroína, gostaria de fazer a cor azul. É muito abaixo que enviamos SMS para o nosso, eu também encontro uma maneira. Legal. Eu encontrei a primeira criança dentro de lá você poderia dizer a última criança. Ele vai olhar para herobox e encontrar a última coisa lá dentro, e a última coisa nele é este botão aqui e é aplicado a cor azul ao texto. Vai funcionar para nós, o que queremos fazer não é herobox queremos encontrar nossos cartões. Aqui estamos nós e vamos dizer, eu gostaria dentro do tbox, eu gostaria de encontrar o último filho porque é a última coisa em seu último filho que é o que eu quero. Um pouco de sintaxe, menos chaves e vamos fazer o tamanho da fonte, apenas certifique-se de que funciona. Tamanho da fonte, eu vou sintonizar para baixo para talvez 0.8 ems ou rems. Vamos salvá-lo, vamos dar uma olhada. Isso funcionou? Aqui está. Eu salvei o último filho desta caixa aqui para fazer isso com ela. O que eu poderia fazer bem é se estes mais como é bastante simples caixas que você pode fazer, vamos comentar que para fora para que ele está lá e vamos olhar para uma maneira ligeiramente diferente porque sua tag div pode ser mais complicado do que isso. Há outros aqui, vamos dar uma olhadinha. Vamos fazer nth de tipo ou tipo este é um bom. Criança está apenas lidando com quem está dentro do pai e do tipo, digamos que queremos encontrar o último do tipo e que tipo de tipo? Nós vamos dizer dentro do tbox, espaço, porque eu queria que ele estivesse dentro tbox Eu quero que você encontre um último e não último filho vai encontrar o último do tipo. Que tipo de tipo? Quero que seja a etiqueta P que estes dois ganham. A última tag P dentro da tbox vai fazer a mesma coisa. Eu vou fazer o tamanho da fonte, tamanho da fonte de 0,8 rems e vamos fazer um pouco de preenchimento no, que lado é que vamos esconder é deixado. Basta empurrá-lo um pouco mais. Quão longe? Vou adivinhar isso por enquanto. Vamos dar uma olhada e nosso cara está lá. É o último do tipo P que acabamos no mesmo lugar, mas você pode imaginar se você tem muitas coisas depois. Depois desta etiqueta P talvez haja uma imagem que o nosso último filho não vai funcionar, porque esta é a última criança agora. Então você pode ser um pouco mais específico com ele. Agora, novamente eu não vou cobrir todos eles porque ele vai ter, eu acho, o seu próprio lugar. Vamos olhar para talvez apenas mais alguns, mas o que podemos fazer é deixar isso porque está funcionando e eu vou deixar que lá você pode decidir qual deles você quer usar. Vou fechar isto e criar um novo documento. O que eu fiz que acabei de criar como um documento descartável. Há uma lista não ordenada que é uma lista de marcadores e há 10 pequenos itens dentro dela, e parece com isso. Você pode jogar junto, você pode criar isso se você quiser e então eu vou fazer o meu estilo na tag cabeça para o momento. Vamos ver algumas outras coisas. Digamos que eu queira atingir o terceiro cara, só esse cara. O que eu posso fazer é dizer dentro da UL colocar um espaço porque algo dentro dela, eu gostaria de mirar o enésimo filho. Entre parênteses você digita o número que você quer, então eu quero mirar o terceiro filho dentro desse cara. Eu vou colocá-lo no meu aparelho encaracolado, eu vou dizer para você uma cor de um vermelho que usamos muito azul. Vamos fazer um teste no navegador. O legal é que se eu parar de colocar coisas aqui maçãs, eu vou acelerar isso. Isso vai fazer, vamos salvá-lo, vamos dar uma olhada. Então a laranja é vermelha, mas a coisa sobre isso é que se eu mover a ordem disto, eu vou fazer as laranjas no topo, isso realmente não importa, você pode ver que a banana agora ficou vermelha. É uma ótima maneira de direcioná-lo e você pode despejar coisas na página e não importa a terceira pessoa ficará vermelha. Então você também pode fazer em vez de apenas o terceiro filho, você pode realmente dizer que eu quero a letra n depois. Será a segunda versão dele e apenas repita o mesmo que você poderia colocar em terceiro. Há muitas outras coisas que você pode fazer e em termos de tentar encontrar específico. Você pode estar despejando montes de dados em uma página e você precisa estilizar cada 20ª linha, mas somente se, e isso é o que você pode pular em algo como Chris Coyier é um pouco mais, ele vai mergulhar em pequenos exemplos agradáveis. Mas acho que disse que lhe dá uma boa explicação. Mas a grande coisa a saber é que diferente da nossa outra classe muitas vezes há um espaço no meio. Porque quero encontrar a enésima criança dentro desta coisa. Mas se você quiser ser bem específico se eu quiser encontrar o LI, eu quero encontrar o enésimo filho que só tem como alvo as LIs dentro da UL que se juntam. Estranho, mas verdade. Nós realmente fazemos L? Nós escrevemos isso é o que eu realmente queria fazer e é por isso que criamos nossos depoimentos. Para que possamos aprender um pouco mais sobre pseudo-classes. Se você for como, “Homens que pareciam ser grandes. Por que estamos fazendo isso?” Porque mais tarde no curso, vamos precisar saber um pouco mais sobre pseudo-classes. É uma boa base para nós. Vai facilitar mais tarde. Isso é tudo para este vídeo eu vou vê-lo no próximo. 67. Como criar um botão de menu de navegação suspenso simples HTML CSS: Olá você. Você está pronto para a parte mais complicada de web design que vamos fazer até agora? menu suspenso parece fácil, e é fácil. Passo a passo, muito fácil. Todos juntos aquela coisa. Um pouco de CSS que precisamos para fazê-lo funcionar, mas vamos fazê-lo passo a passo para obter o não tão assustador quanto eu estou ameaçando. Eu estou fazendo eu preciso ser um pouco indiferente sobre isso para que sim, não, está tudo bem. É fácil e é apenas fazê-lo bem rápido. Então você olha para a duração do vídeo e você pensa que são 20 minutos, são 20 minutos? Provavelmente é sobre isso agora. Mas de qualquer maneira, menu drop-down em uma navegação tudo por si só. É por isso que estamos fazendo isso aqui, para que possamos apenas olhar para ele e é puro eu e você pode mantê-lo separado. Então vamos dobrá-lo no site real que estamos construindo no próximo vídeo. Vamos começar. Vamos fazer isso isoladamente primeiro, e depois no próximo vídeo vamos integrá-lo em nosso site de vídeo de bicicletas, desculpe. Feche o site e vamos fazer um novo. Podemos ir File, New. Vamos criar dois arquivos. Um vai ser HTML e outro vai ser CSS. Vamos manter isso separadamente, ser útil para você manter para si mesmo também é que você tem um menu suspenso trabalhando sozinho. Vamos salvá-lo, e vamos chamar este menu suspenso CSS. Há muitas maneiras de fazer cardápios. Estamos fazendo isso em CSS porque é algumas das habilidades que já conhecemos, vamos mostrar-lhe mais tarde usando jQuery, mas este é realmente bom, fácil, bem, fácil, fácil, é fácil de entender. Isso vai ser HTML ponto. Vou fazer um segundo documento que vai ser o CSS do mesmo nome. Na verdade, vou dar o mesmo nome para manter claro. Conecte-se a dois. Aqui, ponto de exclamação, retorno, aqui em cima sob o título, vamos dizer estilo, não, vamos dizer link e vamos vincular o CSS. Vamos chamar os nossos de outra coisa, não de estilo. Nós vamos chamá-lo, ele está fazendo algumas coisas estranhas. Tudo bem, eu quero CSS menu suspenso, bom. Eu conectei esses dois, arrastei a aba para o lado para que eu possa vê-los lado a lado. Em nosso HTML, vamos primeiro colocar em nossos retornos loucos e é colocado em um Nav. Só o contêiner de navegação para colocar tudo dentro. Não vamos fazer isso em super isolamento, apenas um pouco de isolamento. Agora, no último vídeo, o que fizemos foi colocar uma etiqueta e então demos um nome de classe chamado mybutton e começamos a parecer um botão. Vamos fazer algo parecido aqui. Nós vamos, em vez de fazer uma etiqueta e fingir uma caixa em torno dela, nós vamos realmente fazer uma tag div, colocar colorido e colocar a etiqueta a dentro dela. Vou te mostrar o que quero dizer. Ele só vai fazer fora menu drop-down, robusto mais fácil. Vamos fazer uma tag div e vamos chamar este botão de navegação. Dentro dessa tag div, vamos criar uma tag. Não vai para lugar nenhum haxixe, e este vai ser chamado de casa. Estamos colocando a tag a, foi o que fizemos da última maneira que fizemos nossa navegação, fizemos tag e depois colocamos um pouco de preenchimento em torno dela e uma cor de fundo. Neste caso, vamos fazer um pequeno retângulo, uma pequena tag div, e vamos preenchê-lo com uma cor de fundo, princípio muito semelhante. Vamos estilizar isso. Na verdade, vamos ver o que temos até agora. Eu vou salvá-lo, eu vou para o vivo. Para onde foi? Na minha outra tela e temos essa coisa bonita. Vamos fazer com que pareça um botão primeiro. Aqui nós vamos dizer, eu vou mirar na classe primeiro. Nós vamos dizer navbutton, ele vai fazer uma cor de fundo e nós vamos escolher qualquer coisa, rolar para baixo, escolher sua cor favorita, gramado verde, parece bom para mim, ponto-e-vírgula no final. Quem vai construí-la lentamente? Vamos dar um pouco de estofamento, então fazemos o preenchimento todo o caminho e faremos o que fizemos antes. Onze pixels e 25 na parte superior e inferior. Bem, esquerda e direita, aqui vamos nós isso é chamado de preenchimento, vamos dar-lhe uma largura. Eu vou fazer o meu uma largura de, eu acho que esta é uma das grandes diferenças entre fazer com a etiqueta a. A etiqueta a tinha a largura do que quer que fosse. Neste caso, nós realmente tivemos que dar takeaway para dar um tamanho. Porque ele realmente quer ser 100 por cento todo o caminho. Também quero ter certeza de que o alinhamento de texto está no centro. Vamos estilizar a cor mais tarde, vamos deixá-la só para eu parar de construir essa coisa. Vamos criar todos os três botões. Temos um pequeno grupo aqui, um botão de casa, eu vou fazer outro, e então eu vou fazer um terceiro. O que eu tenho Lar, este vai ser chamado de Produtos. Este ele vai ser Entre em contato conosco. Espaçados uniformemente, agora devemos ter três pequenos botões Go. Porque pode ser um tags são inline, havia técnicas para o outro que estes são opostos, este é um nível de bloco, estes são tags div, eles empilham um em cima do outro. Quero empilhá-los um ao lado do outro. Eu quero dizer que você é meu amigo, nós gostaríamos de exibir bloco inline. É um pouco acima. Empilhar um ao outro, incrível, mas empurra um ao outro para fora. A próxima coisa que quero fazer é construir a pequena lista suspensa. O que vamos fazer é, vamos colocá-lo aqui para que possamos vê-lo o tempo todo, e vamos desligá-lo por padrão até obter uma pseudo-classe de pairar sobre este botão de produtos, que vai ativar volta a ligar novamente. Vamos dar uma olhada nos fundamentos reais do que estamos fazendo. Primeiro de tudo, precisamos colocar algumas coisas dentro dos produtos. Depois da tag a, mas antes do fechamento da div, isso significa que ele vai estar dentro desta caixa, e nós vamos entrar em caiu fora dessa caixa após a palavra Produtos. Eu só vou colocar um par de músicas para tornar isso um pouco mais fácil. O que vai entrar aqui? Vamos colocar um novo contêiner, uma nova etiqueta div, e vamos dar-lhe um nome, eu vou chamar este, vamos chamar este? A lista suspensa. É chamado de caixa só para tentar ser claro sobre o que estamos fazendo. Dentro desta caixa, como fizemos antes, quero um monte desses botões. Você pode ver como estamos entrando na inscrição [inaudível], estamos indo para níveis diferentes. Navegação, há um botão, segundo botão, este do meio tem o link, mas tem outro contêiner logo após esse link. Estamos chamando de caixa suspensa, vamos estilizá-lo, e vamos escolher uma cor diferente para ele, e nós vamos ter, quantos menus suspensos aqui? Três. Dentro de nosso botão, nosso botão de produto, temos o pequeno link que termina, e então antes que o botão inteiro feche, temos este outro pequeno grupo aninhado dentro. Chamamos de caixa suspensa, e temos um, dois, três botões dentro. Você está comigo até agora? Sim, talvez? Tentando fazer com que pareça limpo para ter uma pequena olhada em como ele está aparecendo. Ha, você pode ver o que ele está fazendo, ele está colocando esses botões dentro deste botão de produto, e ele está preso lá dentro. O que faremos a seguir é desativá-lo por padrão. Temos essa coisa chamada caixa suspensa. Vamos alvejar ele, era uma caixa suspensa. O que queremos fazer com ele? Queremos exibir, e vamos mostrar nenhum. Você vai para o bar mais tarde. Fizemos exibição, fizemos outra exibição, temos display flex, display bloco, display inline-block. Ainda não fizemos nada. O que é que ele faz? Ele só desliga, ele se foi. Este é o truque, vamos reativá-lo usando uma pseudo-classe pairante. Por que passamos tanto tempo aprendendo pseudo-aulas, vai ser útil e útil enquanto a aula continua. Se a palavra produto se foi, você gosta, ha, ele se foi. É provavelmente porque você acidentalmente teve aquela visão do ar, ele vai, ele precisa estar fora da caixa suspensa que você desliga, logo acima ou logo abaixo dele, realmente não vai importar. O que podemos fazer é adicionar alguns comentários, porque seria apenas para explicar a nós mesmos, o que esta coisa faz? Lembre-se de toda a minha marca, sua barra de comando me dá meu asterisco barra para a frente, e depois termina com um asterisco barra para a frente. Em um PC é o mesmo ou semelhante, é barra de controle e minha barra é para baixo pelo meu ponto de interrogação. Aqui, vou ser muito pouco para o meu futuro eu. Isso aqui desativa-o quando o menu suspenso não é usado. Esse é o trabalho dele. Agora, o que queremos voltar a ativá-lo, vou adicionar um pouco de CSS para dizer que isso o ativa novamente. O que eu quero fazer é a caixa suspensa agora, o que eu gostaria de fazer é ligá-lo novamente, exibir e o bloco. Você pode aparecer, por favor. Bloco e nenhum tem uma sensação muito semelhante à forma como esse nome, mas nós entendemos bloco agora, por causa das classes anteriores, inline-block, é apenas um pedaço de coisas. No momento em que esses caras estão lutando, o que podemos fazer é dizer, esse cara só fica ligado quando eu passar por cima do meu botão de navegação. Meu botão de navegação, e lá está, eles adotam o botão de navegação com a pseudo-classe de pairar. Quando esta coisa fica pairada, eu gostaria de então ativar este k que é bloco de exibição, e tem que ser desta forma em torno deste não pode estar abaixo deste k porque lembre-se que corre a partir do topo, é em primeiro lugar, recebe desligado. Então, se esta condição for atendida, é o estado do host, ele vai acionar esta classe para fazer outra coisa, substituir que um para dizer agora bloco de exibição. Isso faz sentido? Só dê uma olhadinha. Eu vou ser bonita. Bem, não teríamos? Já tenho o dele. Deixei-o ali apenas desaparecido. Aqui vamos nós. Ele não está, Rosie. Esqueci-me de guardá-lo. Isso é o que eu tenho que fazer. Vamos lá então. Tudo bem, agora teste-o, nós pairamos. Aparece no lugar errado, mas aparece. Está fazendo coisas estranhas. O que está fazendo é, por padrão, todas essas caixas aqui têm uma posição de algo chamado relativo, todas elas são relativas umas às outras. Quando esses caras aparecem, todos eles se desdobram e eles dizem, “Bem, eu sou parente de você e você está no topo, então eu vou chegar ao fundo e então eu vou empurrar todo o resto ao redor.” Isso pode não explicar muito bem, mas é relativo ao amigo dele. Para desligar isso, você pode dizer, “Faça uma caixa suspensa, eu não quero que você seja um parente posicional”, que é essa. “ Quero que sejas diferente, algo chamado absoluto.” Isso é o oposto, é o nêmesis para parente. Diz: “Não me interessa onde estão os meus amigos, só vou para onde me mandam.” Vamos dar uma olhadinha, aí está. Está funcionando. Pelo menos não está mexendo com meu menu superior, eu preciso empilhá-los, mas tudo bem. Dissemos ao menu suspenso, a classe suspensa. Na verdade caixa suspensa ser a posição de absoluto. Mas o que eu gostaria de fazer é, eu gostaria de dizer ao botão de navegação, “Eu gostaria de definir você como parente.” Posição para relativo. Eu quero que esses caras sejam relativos um ao outro e isso significa que esses caras pequenos vão se embebedar um ao outro e se empilhar um sobre o outro. Assim, o menu suspenso em si, o contêiner, é definido como absoluto, mas os próprios navbuttons reais, nobble uns aos outros e eles empilham um após o outro. Que meus amigos é um menu suspenso muito bruto, em pairar. Vamos inventar um pouco, mas esses são os mecânicos para isso. Basicamente desligue, a menos que tenha uma pseudo-classe que diga “pairar “, ative-me e então há um monte de brincadeiras para fazer tudo alinhar. Se você é como eu, basicamente olhando para isso acontecendo, o que isso tudo faz? Você pode copiar e colar isso, mantê-lo separado, então quando você começar a construir um site, realmente pegar o navegador inteiro e pegar este CSS, e começar a partir daí. Para ser honesto, algumas vezes é o que faço. Uma das coisas que você pode ter que fazer é, porque há um isolamento, este menu está aparecendo acima deste fundo branco porque não há nada aqui em baixo. Às vezes, o que pode acontecer é, isso aparece e o Início, o Início, o Início acaba por estar debaixo do conteúdo, então você tem uma grande imagem aqui, o menu suspenso aparece por baixo, uma correção fácil para isso é algo chamado de índice z. O índice z pensa que você tem X e Y em sua página, já falamos sobre isso. Z está vindo em sua direção, então você pode dizer, na verdade eu quero que ele seja z index de, desde que seja um ou acima, se ele ainda não está funcionando, você pode ir até cem, ele só tem que ser alto. Basicamente, tudo está definido para zero, e desde que você o faça acima de um, ele deve funcionar. Ocasionalmente, há momentos em que você só precisava ter 99 ou algo maior. Desde que seja maior que zero. Não vai mudar o meu no momento, mas eu vou jogar fora [inaudível] porque eu sempre tenho problemas com menus suspensos, mergulhando atrás das coisas. A próxima coisa que eu quero fazer é, eles estão se sobrepondo lá, então esses botões estão se sobrepondo. Vamos trocar a palavra Início porque isso é confuso e posicionaremos um pouco o menu suspenso. Aqui, em vez da palavra Lar, Lar, Lar, vamos colocar no Item 1. Command + D, pegue os dois, Item 2 e eu resolvo este último, três. Tudo bem, a mesma coisa, só com um pouco de números lá e vamos fazer o posicionamento. A caixa suspensa, depende, eu quero que ela fique um pouco para baixo, então se eu usar margin-top, e eu digo, “Basta descer como 10px.” Nós provavelmente vamos ter um problema na verdade, vamos dar uma olhada. Dez pixels fizeram isso. Está alinhado lá em baixo, é difícil porque são todos da mesma cor. Eu não vou, mas o que você poderia fazer é que todos eles usam navbutton, então eles estão todos sendo que gramado verde. Você pode criar um segundo navbutton, talvez chamá-lo de botão suspenso e apenas dar-lhe uma cor diferente, modo que talvez seja um pouco mais claro e aplicá-lo aqui. Ainda precisa de tudo isso, mas você pode ter duas cores diferentes. Ou você poderia ser chique, oh caramba, não seja chique. Ser um pouco chique? Tudo bem, vamos ser um pouco extravagantes. Se houver um botão de navegação que aparece dentro de uma caixa suspensa, mas somente se estiver dentro de uma caixa suspensa, altere a cor do plano de fundo. Este vai ser um cadetblue. Parece ideal para mim. Tudo bem, comece a colocar personagens aleatórios, vamos dar uma olhada. Legal? Consertei isso. Agora, colocamos 10px, digamos que colocamos 20, vamos ver o que acontece. Isto é um pouco estranho, se eu pairar sobre ele, e eu for rápido, eu posso chegar a ele. Mas se eu for devagar há uma lacuna vazia que vai ah, o que é um pouco irritante. Para contornar que podemos usar margem sobre isso, porque a caixa está em torno do lado de fora, a caixa suspensa não está dando essa cor. Esta cor verde vem do botão em si, não da caixa de repetição, a caixa não tem nenhuma cor. Eu posso usar estofamento e ninguém vai notar, que é como uma coisa interna porque ele não tem nenhuma cor. O que eu poderia fazer é, em vez de fazer margin-top, eu vou fazer padding-top. Essa é uma das coisas com o estofamento, é o infiltrado. margem é o lado de fora, o preenchimento é o interior, então espero que pareça o mesmo, mas veja esta área aqui, na verdade é parte dessa tag div. Tudo bem, então espero que tenha feito sentido. Se estivéssemos usando o menu suspenso para adicionar a cor de fundo, não vai funcionar porque seria um empurrão estranho para fora disso, então usamos preenchimento em vez de margem. Agora, eu quero empurrá-lo para ali um pouco, para a esquerda. Você pode usar margens negativas ou preenchimento negativo. Você pode fazer preenchimento negativo? Eu não acho que você possa realmente. Vamos tentar remar à esquerda e vamos fazer um 30 negativo só para fazer um ponto. Não. Mas você pode fazer margem negativa. Margem esquerda, negativo 30, guarde isso, vamos fazer um teste. Lá vai você, movê-lo para o outro lado. Ainda não consegui um lá, mas dependendo de onde você quer que ele fique. Tudo o que podemos fazer é fazer um pequeno rollover, já fizemos isso antes quando aprendemos pseudo-aulas. Os botões de navegação que estão dentro desta caixa suspensa, nós mudamos a cor de fundo, mas na verdade, vamos mudar, estamos lá. Eu quero tudo isso, mas eu quero adicionar um pairar. Dentro de uma caixa suspensa, quando há um botão de navegação que foi pairado, eu gostaria que ele fizesse outra coisa. Vou escolher uma cor aleatória diferente aqui. Vou escolher minha própria cor aleatória, magenta. Salve isso. Vamos dar uma chance. Será que ele funciona? Vamos fazê-lo desaparecer também. Na verdade, a duração é o que queremos, não é? Duração da transição e colocá-lo por um segundo. Um segundo é longo. É uma bela mistura de cores. Você pode usar milissegundos. Sim, milissegundos. Um milissegundo é provavelmente muito curto, o que é, milhares? Acho que são milhares, então 500 é meio segundo, mil é um segundo. Acho que é como funcionam os milissegundos. Você pode dizer duas vezes mais rápido que um segundo, e se você conseguir, algo pequeno como um milissegundo, é 0,1 de segundo. Sim, super rápido, você nem vai ver. Eu só queria mostrar milissegundos porque, não há uma boa razão. Tudo bem, vai ser isso, nós temos as fundações dentro Para este funcionar, usamos uma tag div como uma caixa com uma etiqueta dentro. Mais cedo, eu recebo a etiqueta “A “e nós apenas denominamos isso para manter as coisas mais fáceis. Parece um pouco mais complicado aqui, certo? Quem me dera poder fazer com todos os “A”. Mas as classes div são necessárias e você coloca a tag a dentro dela. Depois, há esse grupo aninhado que demos seu próprio nome, e desativamos isso, dissemos, “Não exibir nenhum”, ou está lá. Então, mais tarde, dissemos: “Na verdade, se esse menu suspenso tiver um botão de navegação dentro dele que passa o mouse sobre, altere-o de display none para display block”, então ele o liga. Então tivemos que brincar com um pouco do posicionamento, tão absoluto para fazê-los empurrar para baixo a partir de baixo, e então usamos esse posicionamento relativo para fazê-los empilhar em relação um ao outro. Mas você sabe disso, você acabou de terminar o vídeo. Tudo bem. É uma recapitulação, foi o que foi. Tudo bem, nós vamos salvar isso, então arquivo, salve tudo e vamos fechar tudo. Vou fechá-lo depois que o vídeo começar. Vamos fazer outro basicamente, mas vamos dobrá-lo para o site existente porque há alguns pequenos truques para garantir que isso funcione. Vamos fazer isso no próximo vídeo. 68. Adicionando nosso menu suspenso CSS ao site da Roar Bikes: Olá, Web Designer de boa aparência. Vamos basicamente pegar as técnicas do último vídeo, em vez de fazê-lo isoladamente, vamos fazê-lo em nosso próprio site. Vamos para o menu suspenso e integração em um site existente, e isso vai ajudar a reforçar o que aprendemos, mas também pegar algumas peculiaridades que acontecem quando você está trabalhando em um exemplo maior. Vamos entrar e descobrir como fazê-lo ir. Fechamos nosso último projeto, vamos abrir o índice, e vamos redefinir tudo porque às vezes é bom lembrar como tudo vai. Abra o índice, você pode clicar duas vezes para abrir um segundo arquivo. Clique duas vezes em ambos, eles se abrem separadamente , em styles.css esta aba , arraste-o para aqui , o html, eu gosto de ligar meu wrapping novamente, então ele se envolve, e eu vou arrastar você para lá. Estamos prontos. Vamos fazer isso de novo, mas vamos mostrar alguns atalhos também porque o que fazemos é, criamos um <nav> e depois criamos apenas <a> tags com essas classes. Mas lembre-se, no último vídeo, não podemos usar as <a> etiquetas. Precisamos embrulhá-los em uma <div> etiqueta. As coisas de embrulho, você pode começar a digitar aqui e você pode dizer que na verdade eu quero colocar aqui, vamos chamá-lo de botão de navegação, que funcionaria. Mas então o <div's> lá e eu posso cortá-lo e eu posso colocá-lo depois do meu lá, e você pode ver o processo lento lá. Está pronto para o atalho? O que fazemos é destacar esta cor. Vamos encerrar a seleção. Vou te mostrar o caminho mais longo. Vá para “Ver” e vá para “Paleta de Comandos”. Já o usamos antes uma vez. Esse cara faz tudo, é como fazer tudo. O que estamos procurando é que deveria haver isso. É maior que símbolo, lá? Os colchetes de fechamento, e aqui está um monte de coisas. O meu acabou de ser usado recentemente. É o que quero embrulhar com abreviatura. Isso é o que eu quero, mas você não vai ter que lá você começa a digitar wrap, e isso reduz para as coisas que você pode fazer que têm a palavra wrap nele, e nós queremos isso com abreviação. Vou te mostrar o caminho mais longo. Agora, esta é a abreviatura. Agora, pense em Abreviatura como, como eu quero nomear esta etiqueta? Gostaria de embrulhá-lo em uma <div> etiqueta chamada “Botão de navegação”. Vais ver o que está a fazer lá em baixo. Olha, como isso é bonito. Digite para confirmar. Feito. É só uma coisa muito útil. Vamos olhar para fazê-lo mais uma vez com um pouco com um pouco de atalhos extras. Realce e, em seguida, no meu Mac, eu vou “Command Shift P.” Presumo que em um PC seja “Control Shift P.” Se não tiver a certeza, aceda a “Ver”, é qualquer atalho existente no PC. Vamos voltar. Vamos tentar baixar o fluxo. Eu embrulhei isso, me sentindo bem, Comando Shift P e porque já está lá, eu não tenho que fazer nada. Você poderia digitar “Rep.” Estou a tornar isto lento. Mas eu posso apenas apertar Return no meu teclado e depois ir, eu quero embrulhar isso em “botão de navegação”. Suave, então. Ele destruiu isso. Eu não estava assistindo. Pronto para o fluxo. Fluindo, destacando-o, Command Shift P, envolva com abreviatura, coloque “botão de navegação”, pressione “Return”. Olhe para isso. Isso foi melhor. Destaque esse cara, “Command Shift P”, “Return” e vamos colocar um ponto, vamos colocar o “botão de navegação”, e estamos fazendo um embrulho legal. Você pode vê-lo entrar nisso. Veja quando eu falo devagar. Isso ajuda para alguém? Talvez não. Estou separando só para esclarecer o que estamos fazendo. Temos três botões. Nós embrulhamo-los todos em uma <div> etiqueta. Vamos dar uma olhadela ao que acabamos. Eu vou abrir em meus portos porque eu estou trabalhando em outra coisa, eu vou basicamente fechá-lo e, em seguida, abri-lo novamente. Vai abrir neste vídeo aqui, e eu quebrei tudo. Nós totalmente quebramos em muitas coisas com nosso código, então nós vamos passar por isso. Eu acho que é por isso que eu queria fazer isso em sua própria janela separada. Se você está fazendo no início, pode ser mais fácil, mas quando você está adicionando coisas mais tarde, há esse hacking acontecendo para tentar redefinir ou redefinir. Na verdade, já usamos “botão de navegação”. Vamos nos livrar disso aqui. Estas <a> etiquetas, porque se aplicam duas vezes. Tentando fazer duas vezes. Nós não precisamos <a> mais dele nessas tags porque estamos usando no nosso <div class>. Vou me livrar de tudo isso, vou apertar “Comando D” para me livrar disso. Nós não, quase. Vou para o meu multi cursor. Estou a segurá-la na tecla “Opção” num Mac ou na tecla “Alt” num PC. Agora só tenho classes Plano embrulhadas nessas <div> tags com o mesmo estilo nele. Vamos dar uma olhada agora. -Melhor. A próxima coisa é, vamos entrar na estaca lado a lado. Nós vamos dizer, vocês meus amigos, quem é esse? “Botão de navegação”? Temos uma classe de “botão de navegação”? “ Botão de navegação”, vai ser, como vamos chamá-lo? Nós vamos dizer que ele é Display, e ele está bloqueando no momento, então ele está empilhando à nossa beira. O outro está no bloco de linha, aqui está ali. Eles devem se alinhar um ao lado do outro. Legal. Agora vamos fazer o menu suspenso. Vai estar dentro deste livro online. Vamos pairar sobre ele e vai cair. Vamos ver o código. Isso é bom. Reserve online, está dentro desta <div> etiqueta chamada “botão de navegação”. O começo, a abertura. Logo depois <a tag> é onde eu vou colocar tudo. Vou colocá-lo em alguns retornos para que pareça agradável. Agora podemos fazer isso, pegar aquele, copiar e colocar três botões. Isso realmente funciona. Não há nada de errado com isso. As etiquetas abrem e fecham, mas a tabulação é estranha. Eu poderia clicar com o botão direito do mouse e dizer, vamos formatar a seleção, mas eu quero tentar ser chique e aprimorar nossas habilidades. Eu só faço essas coisas quando as pessoas passam atrás de você e você está tentando impressioná-las, é isso que eu faço. Porque levo um pouco para me exercitar. Eu gostaria de uma <div> etiqueta chamada “botão de navegação”. Dentro disso, eu gostaria de algumas <a> etiquetas. Quantos você quer? Você quer três. Eu sei que isso não vai funcionar, mas vamos apenas dizer, vamos fazê-lo. Fez o que eu disse. Faça “botão de navegação” e, em seguida, apenas vezes o A por três. O que você pode fazer é que você vai acabar com tudo isso. Você pode dizer, abrir colchetes, fechar colchetes. Faça tudo isso e, em seguida, cronometrá-los todos por três. Não só os “A “, todos eles. Às vezes, quando você excluir o último bit três, digite-o novamente para que a abreviatura apareça novamente, pressione “Return”. Ei, estamos fazendo coisas. Multi cursores, vamos colocar haxixe. Vamos colocar os três pedacinhos. Vou pegá-lo do texto que tenho nos seus arquivos de exercícios. Dentro da tag A, eu vou colar isso, Entrega de peças, e o último será Solicitações Callback. Eu os revisto principalmente no lugar certo. Vamos dar uma olhada onde eles acabam acontecendo. Então você está lá dentro e funcionou bem. Mas eu sei que isso precisava entrar na etiqueta A. Agora, a coisa legal sobre isso é que este Div tem uma etiqueta dentro dele e é exatamente o mesmo que fazê-lo desta maneira. Onde temos uma Div com uma etiqueta dentro dela exatamente a mesma parece um pouco diferente aqui. Especialmente, quando eu quebrei. Eu não quebrei, eu apenas dobrei em duas linhas. Vamos tornar isto um pouco mais largo para que se encaixe. Certo, então temos esses caras, o que queremos fazer com eles? Queremos desligá-los porque no momento eles estão aparecendo. Eu quebrei alguma coisa? Um Div. Este código me ajudou a colocar um Div de fechamento ali, o que não era o que eu queria. Aqui vamos nós. Então tudo parece bom agora, vamos desligar esses caras. Esses caras precisam estar dentro de algo que eu possa desligar porque não é. Lembre-se do caminho longo, vista, paleta de comando, mas vamos usar um atalho. Estou a tentar impressionar-te. Comando, turno, P. Olhe para isso, apenas saindo. A última coisa usada recentemente foi [inaudível]. Ótimo, vou datilografar. Vou chamar este menu suspenso. Olhe para isso, aperte voltar novamente. Casual como? Olhe para nós embrulhando etiquetas, parecendo bem, recuando e vamos desligá-lo. Vamos dizer “cair para baixo “, é como eu chamei? É isso? Vamos dizer não mostrar nenhum, vá embora amigo. Então, agora, se eu salvar tudo, ele se foi. Agora, quero voltar a ligá-lo. Então eu gostaria de suspender, ligue novamente, por favor. Vou exibir bloco, ele se transforma em um bloco que podemos ver, mas só se este navbutton está sendo pairado sobre, este navbutton. Então, se o navbutton tem uma espécie de classe de hover, em seguida, fazer esta coisa, e ele irá substituir a exibição de nenhum para se tornar um bloco. Não funciona. Bem, funciona, mas o formato é um pouco estranho. Vamos tentar consertar isso. Você acha que foi assim que isso foi feito. Isso foi uma coisa difícil, eu só me lembro porque eu sou um professor disso. O que eu acabo fazendo é acabar fazendo isso uma vez, trabalhando através de um tutorial e, em seguida, copiá-lo e colá-lo uma e outra vez em muitos dos meus projetos. Entendo como funciona, mas digitando sempre, é muito longo. Ainda nem sei quanto tempo estamos neste vídeo. Provavelmente é o quê? Acho que 10 minutos, talvez. Talvez não tanto tempo. Então, para colocá-lo em posição, vamos dizer a posição, em vez de ser relativos um ao outro e a todos os seus amigos vamos fazer posição como absoluta. Espero que agora ele se distanciou, ele não é parente de seus amigos e isso está funcionando. Esses caras que saem, para consertá-los, precisamos achar nosso botão de navegação. Está ali. Lembro que fizemos isso antes de dizer, agora sua posição, parente, você vai trabalhar para baixo. Precisamos ser um pouco mais largos. Precisamos fazer alguma centralização, mas isso é o básico. Meu índice Z não precisa ser ajustado porque o material está aparecendo depois, então ele está no topo. Mas talvez tenhamos que ir e dizer, apenas para o caso, seu menu suspenso tem um índice Z de um, apenas para obtê-los, ou 99 um pouco acima de zero. O que nós queremos fazer agora é que nós queremos que ele empurre um pouco para baixo. Nós não vamos usar a margem, lembre-se porque a margem deixou uma lacuna que essa coisa fechou, então vamos usar o preenchimento. Nós fazemos estofamento top e vamos adicionar um pouco, quanto? 20 pixels e veja como vai. Entrando lá e queremos centralizar todos esses botões de navegação. Posso fazer isso apenas na caixa suspensa? Porque estes tipos estão todos bem porque cabem dentro das suas caixinhas. Mas esse cara aqui talvez tenhamos que dizer, tentem juntos. Então leva uma linha, pode ser o centro. Isso vai caber em todos os caras internos também. Então, isso é bom. Podemos tornar essas caixas mais largas. Podemos ir ao menu suspenso? Duvido que possamos. Se dissermos mesclar largura de, digamos, 200 pixels só para ver se podemos fazê-lo. Começou a funcionar, mas não está a forçá-los a ter um tamanho, está a dar àquela caixa agradável e grande e está a permitir-lhes ter o tamanho que quiserem. Isso pode funcionar se for apenas texto, mas está deixando as caixas estranhamente dimensionadas. Então sim e não, funcionou. Então vamos precisar de um seletor composto. Eu quero estilizar esses botões de navegação, mas não todos eles, apenas os que estão dentro do menu suspenso. Então aqui está um espaço para dizer esta coisa dentro desta coisa. Você está pegando o jeito. Gostaria de dizer que, como uma largura de 100 pixels, se for grande o suficiente para caber todos esses caras. Não é grande o suficiente. A 200 pixels, provavelmente muito grande. Eu levanto os dois. Indo muito rápido. Aqui vamos nós. Eu fiz o caminho errado. Portanto, não são os drop-down que estão dentro dos navbuttons, são os navbuttons que estão dentro dos drop-down. Acontece com o melhor de nós. Aqui vamos nós. Agora os 200 pixels são muito grandes. Então talvez 90. Não é grande o suficiente. Cento e vinte, tudo bem, isso é perfeito. Talvez um pouco maior, vou deixar isso em duas linhas. Se quiséssemos, porque aquelas linhas adjacentes, eu poderia usar margem, mas isso vai abrir algumas lacunas. Eu poderia apenas dizer que a cor de fundo desses caras vai ser cor de fundo. Vai ser um pouco diferente. Vamos usar branco. Então eles são todos brancos. Cor do texto. Lembre-se de mudar a cor do texto Eu vou usar isso. Não está funcionando. Então tem que ser, não você. Eu deveria ter deixado lá. Mas vamos limitar. Então, se houver uma lista suspensa dentro, vou colocar a cor aqui embaixo. Eu vou dizer que eu gostaria disso, mas eu quero que haja uma etiqueta de A dentro de um botão de navegação, que está dentro de um menu suspenso Eu quero que você faça uma cor de magenta. Aqui está, estamos chegando lá. Entende o que quero dizer. Agora só estou brincando tentando fazer com que pareça legal. Você pode adicionar sua transição com o cursor do mouse. Você pode jogar com a sua margem movendo-a para a esquerda, se quiser. Eu vou parar por aí porque este vídeo está ficando longo e eu só estou brincando. Faltam 10 minutos para 23h da noite e provavelmente começarei a “waffling”. Então vamos terminar lá e te vejo de manhã. 69. Dicas de atalhos úteis para acelerar o fluxo de trabalho no VS Code: Bom dia a todos. Este vídeo vai ser como um vídeo de dicas e truques. Vamos olhar para atalhos legais que não cobrimos antes, além disso, no final deste vídeo, vou lançar os que cobrimos. Só para que haja um vídeo com todas as coisas em um pequeno lugar. O nosso primeiro atalho vai ser a forma de cortar as etiquetas dos pais. Vou clicar no menu suspenso, cliquei na palavra no local. Em um Mac, é Command, Ctrl e Shift. É um atalho estranho, mas vale a pena aprender. Command, Ctrl, Shift em um Mac, se você estiver em um PC, é Ctrl e Alt. Segure os dois. Mantenha-os pressionados e você usa a seta para a direita, e você pode vê-lo expandido. Se estivessem na minha seleção estava piscando aqui dentro, ele se expande para agarrar a palavra. Aperte a seta para a direita novamente. Este é o seu como setas de teclado que estão no seu teclado, fazê-lo novamente agarra tudo dentro dessa tag, agarra mais um, ele agarra o pai de toda essa tag que é a minha, direita novamente, agarra a div, agarra a linha inteira, agarra todo o caminho até aqui, pega a lista suspensa. É só uma boa expansão. Você pode usar a seta para a esquerda para voltar. Muitas vezes, se você quiser pegar toda a lista suspensa, basta clicar lá e esmagar até pegar a coisa toda. Em seguida, você pode excluí-lo ou envolvê-lo com outra tag. Command, Ctrl, Shift em um Mac e em um PC é apenas Shift e Alt, e então use essa pequena tecla de seta para a direita, e depois para a esquerda se você precisar voltar. Dica útil número 1. Dica útil número 2 são linhas dobráveis. Se você pairar ali, você pode ver essas coisas aqui em cima? Significa que posso, vamos fechar a cabeça, pairar por cima. você vê esta pequena linha aqui. Você pode ver que abre lá e fecha na cabeça. Se eu clicar no pouco menos, apenas colapsa. Você pode fechar o corpo, e eu só recebo uma página HTML simples. Muito útil, se quiser. Não estou trabalhando na cabeça, vou fechá-la. Não estou trabalhando no principal, só estou trabalhando nesses cartões. Não os depoimentos, apenas mantenha tudo arrumado. Estão todos lá. Verá que o código não desaparece. Vai de 58-68, apenas desmorona. Você pode fazer o mesmo por isso se você tem algumas coisas muito longas. Eu nunca faço isso no meu CSS. Mas sim, código desmoronando. Útil. A dica número 3 está atualizando todas as ocorrências de algo. Digamos que eu vou enrolar tudo isso. Digamos que botão de navegação. Escrevi errado ou quero mudá-lo. Aqui no botão de navegação, vou fazer um achado. Comando F em um Mac, Ctrl F em um PC e botão nav. Esse não é realmente o atalho. O Comando F estava na edição. Encontrar, eu encontrei o meu botão de navegação, e vamos dizer que eu soletrou errado. maiúsculas e minúsculas é muito importante. Você não pode usar o superior aqui e, em seguida, mais baixo em novo HTML, eles não vão coincidir. Às vezes as pessoas gostam de usar essa coisa chamada camel-case, onde começa baixo e depois fica grande no meio. Adoro camel-case, grande palavra. Mas como eu mudei aqui, ele precisa ser atualizado aqui. O que eu posso fazer é encontrar um deles, e eu sei que está nesta página, então eu vou clicar com o botão direito do mouse nele e dizer, vamos apenas mudar todas as ocorrências. Então eu vou excluí-lo, e então eu vou digitar a versão correta. Legal. Uma maneira rápida de atualizá-los todos. Vou desfazer isso porque não quero destruí-lo. A outra coisa que podemos fazer é, está vinculado a isso que aprendemos antes, é clicar 1 e clicar em Command D ou Ctrl D em um PC. Ele apenas salta para baixo lembrar, e agarra a próxima ocorrência disso. Porque às vezes você não quer mudar todo o documento de uma vez, você quer ir, eu só vou mudar essa hashtag, mas para esses três, não para todos eles. Não é uma hashtag, só o sinal da libra. Mas o Comando D D não é a maneira rápida e fácil de pegar todos eles e dizer, agora ele vai para a página de contato conosco. É uma maneira rápida e fácil. Mas já fizemos isso antes. Essa é a dica número 3, vamos para a quarta. Este próximo truque é uma maneira de salvar todo o incômodo. Nós esquecemos, eu esqueço o tempo todo para realmente salvar esses dois documentos. Arquivo, Salvar tudo, e você vai em seus testes, você é como ele não está funcionando, então você esquece que você não salvou. Digamos que queremos atualizar este link nav aqui. O que podemos fazer é ligar arquivos e ligar. Ele deve estar em VS Code, e ir para salvar automaticamente. Agora, se eu mudar isso, veja isso, eu vou fazer tudo em maiúsculas. Faça com que seja maiúscula. Reserve online. Você pode ver que é apenas lenta, mas certamente sempre salvando automaticamente. Da mesma maneira que eu mudo o H1 dele aqui. Onde está o meu h1? Vou torná-lo negro. Ponha meu ponto e vírgula. Ele está salvando e atualizando automaticamente. Salvando automaticamente, vou continuar para o resto deste curso. Vou desligar as mudanças que fiz, alguma ruína. Desfazer é Editar, Desfazer. Já está salvo. Eu não tenho que fazer nada. Vamos fazer esta tela cheia novamente e passar para a próxima etapa. O próximo chama-se Modo Zen. Você está programando, não precisa de todo esse lixo e tudo mais. O que você pode fazer é ir para Ver, e você pode ir para Aparência, e você pode ir para o Modo Zen. Então lembre-se desse atalho. Vale a pena escrever. Em um Mac é Command, K, depois Z. Em um PC, é Ctrl, K, Z. Você se sente um zen. Tela cheia obter muito mais espaço para o meu código, e eu removi todos os painéis do lado. Para sair dessa você tem que apertar a tecla Esc. No canto superior esquerdo do teclado duas vezes, estranhamente. Toque duas vezes nisso e você volta para fora. Agora, o atalho Comando, K, Z, é estranho. Não vemos muitos programas que usam atalhos dessa forma. A maneira como funciona é que não é Comando, K, e então continue segurando o Comando, Z. Você tem que soltar os comandos, veja isso. É o mesmo para um PC. Mantenha pressionado o comando, a partir do Mac, Ctrl em um PC, dica K e, em seguida, inicia todos os atalhos. Está à espera da segunda coisa. Há alguns diferentes. Comando, K é para muitos atalhos. Então você tem que soltar a tecla Command e apertar Z. Você não pode esperar por tanto tempo enquanto você está conversando. Command K e, em seguida, pressione Z. Você não pode segurar a tecla Command e tocar em ambas as teclas. mesmo com a tecla Ctrl em um PC. Entendeu o que quero dizer? Como saímos? Esc, Esc, chega de zen. O próximo será migalhas de pão. Vamos clicar dentro do menu suspenso do meu botão de navegação. Eu vou para ver e eu quero ligar pão ralado. Onde você está? Lá em baixo. migalhas de pão são paralelas no topo e é muito útil quando você está tentando construir como seletores compostos para saber onde você está no mundo. Vou fechar isto para poder ver as minhas migalhas de pão. Meu texto é tão ampliado quanto. Então, Comando, menos, meu teclado, provavelmente é assim que o seu está. É Ctrl, menos, em um PC, Ctrl, mais, para ampliar, para tornar seu código maior ou menor dependendo do que você precisa. Vou deixar o meu desse tamanho. Ele me diz que eu estou dentro de uma tag que está dentro de um botão de navegação de código div, que está dentro de um menu suspenso de código div. Deixamos isso bem claro aqui. Você não é tão engraçado sobre fazer tudo espaçado bem, então não é tão fácil de ver. Se eu quisesse uma coisa stylus aqui, eu poderia dizer que eu quero um seletor composto que está iniciando o div drop-down e o botão div que está dentro da tag a. Isso são migalhas de pão. Vamos deixá-lo ligado ou desligado para o resto, não tenho certeza. Eu uso às vezes, depende. Se é meu próprio site, muitas vezes não. Ou um site em que eu não trabalho há muito tempo e eu sou tipo, eu nem sei como eu construí essa coisa. Bem, como é construído. Onde é realmente bagunçado aqui em baixo. Então há migalhas de pão. Outro legal para documentos mais longos está em exibição e este é um chamado minimapa. Vou dividir minha tela de novo. Então eu vou colocar os estilos aqui e eu tenho meu HTML aqui. Você tem um minimapa para ambos os painéis. Isso é tudo, é o minimapa. É muito claro o que ele faz. Você pode ver para o CSS, é uma página bastante longa. Significa que posso saltar para o fundo. O nosso não é muito grande, sério, nosso é muito pequeno. Você entrará em sites enormes com montes de código. Você pode usar o minimapa para percorrer. O mesmo com aqui, eu quero ir até o rodapé. Eu não preciso dele por enquanto porque meu site não é grande o suficiente. Então eu vou desligar o minimapa. Isso é tudo para aqueles que você nunca viu antes. Eu vou cobrir os que você tem, só que eles estão todos em um só lugar. Embrulhando tags, fizemos isso com vários sucessos ao longo do curso. Esta lista suspensa aqui, quero embrulhar esta etiqueta inteira. Vou começar com todos os meus atalhos, Ctrl, Command, Shift e a seta para a direita para pegar todo o menu suspenso. Já aprendemos essa. Lembre-se que é Ctrl, Alt, seta para a direita em um PC. Pegue a coisa toda e então eu digo, eu quero embrulhar tudo. No Mac, é Comando, Shift, P, e você recebe nossa linha de comando. Na verdade, é chamado de paleta de comando aqui. Esse é o atalho. Em um PC, paleta Command, presumo que seja Ctrl, Shift, P em um PC. Mas dê uma olhadela à vista, paleta de comandos. Queremos embrulhar. Clique nele. Então posso embrulhá-lo em alguma coisa. Vou colocá-lo em uma nova tag div. Você pode usar seu código de emissão aqui, para que você não tenha que escrever classes div iguais. Quero embrulhá-lo nos meus novos blocos. Você pode vê-lo aqui em baixo, está tudo sentado e é adorável. Agora, há outras coisas que você pode obter essa paleta de comando para fazer, eu apenas uso a tag rep muitas vezes. Vamos dar uma olhada. Abra a paleta de comandos e você pode dar uma olhada aqui. Há muitas coisas aqui que você pode decidir que é mais fácil. Em vez de tentar descobrir qual é o atalho deste menu, você pode realmente ir, o que eu quero aqui? Digamos que eu quero salvar tudo porque não consigo pensar em um bom fora da minha cabeça. Você deseja salvar tudo e não deseja usar os atalhos. O que você pode fazer é dizer, Comando, Shift, P, e, em seguida, salvar tudo. Ele está executando o mesmo comando que clicar nisso. Muitos desenvolvedores gostariam de fazer esse método. O legal sobre isso é que se eu voltar para ele, você pode ver que é o último material menos usado recentemente. Significa que não tenho que entrar e digitar e encontrá-lo de novo. Posso ir ao Comando, P, e depois apertar “Salvar tudo” e isso está funcionando. Multicursors, nós cobrimos, e meu Mac no momento, você pode alternar isso. Mas sob seleção, será ou clique Command em um Mac ou meu caso é Option, clique para multicursor. Em um PC, é a tecla Alt. Opção em um Mac, Alt em um PC, e isso significa que eu posso colocar em lotes de diferentes. Vou adicionar uma aula aqui. Quero o cursor piscando lá. Eu também quero adicioná-lo a este sem nenhuma boa razão. Então vou adicioná-lo para este. Eu vou digitar na aula, e você pode ver que está aplicando isso a todas essas coisas. Tão multicursor, útil. Outra muito útil, em vez de fazer multi-cursor onde você tem que manter pressionada a tecla Option, e clicar, você tem que ser muito específico com o mouse, e você realmente tem que estar usando o mouse. Todo o tempo quando estou programando, eu não quero tocar no mouse, eu só quero usar meus atalhos de teclado. Vamos dizer que eu quero adicionar uma mudança esta hashtag, então eu vou clicar sobre ele e eu vou, em um Mac, Eu vou manter pressionado Command and Option e bater minha seta para baixo duas vezes. Agora posso entrar em contato conosco. Já fizemos isso algumas vezes, mas há momentos em que você precisa disso. Talvez o Comando, D ou Ctrl, D, em um PC. Em um PC, é uma coisa muito semelhante. Clique onde deseja começar. Mantenha pressionada a tecla Alt e a tecla Ctrl e pressione a seta para baixo. Eu fiz isso duas vezes, e você tem multicursores. Os dois últimos, limpando tudo. Se você tem pedaços por todo o lugar e recuo não está funcionando e você é como, eu gostaria de ter tudo limpo, você pode facilmente pegar tudo e ir para o botão direito e você pode formatar o documento inteiro, mas provavelmente é mais comum apenas formatar a seleção. Só arruma tudo. Faz tudo parecer recuado. Não combina com tudo, você pode ver que foi empurrado para a borda aqui. Quando você está fazendo a coisa toda, você pode selecionar o bloco inteiro e fazer essa seleção de formato. Isso muda um pouco do que você poderia naturalmente querer que fosse. Você pode ver que está tudo bem recuado. Eu acho que quando estou abrindo um documento que alguém está trabalhando ou é um modelo, e é uma grande bagunça. A primeira coisa que faço é selecionar tudo, formatá-lo, para que eu possa pelo menos ver alguma estrutura. O último é o Word Wrap. Desliga todas as vezes. Ligue de volta apenas para que as linhas se quebrem na borda aqui, não no final da linha. Mas você acaba com essas lacunas engraçadas aqui. Cabe a você. Isso é tudo para o nosso acelerar as coisas folha de truques e dicas. Coloquei as palavras-chave nesse título. Mas espero que tenha encontrado algumas coisas úteis. Como todos os bons atalhos, eles só funcionam se você praticá-los por um tempo. Talvez escolher um ou dois desses por dia e ir, hoje eu vou fazer o dia multicursor e, apenas fazê-lo. No final de alguns dias, se você for tipo, cara, ainda é doloroso, então nunca foi para ser. É um atalho que nunca se deve lembrar. Basta escolher outro e ir tudo bem, eu vou fazer isso hoje porque ele vai me poupar um pouco de tempo cada dia quando eu estou programando, e eu posso usar esse tempo extra para fazer outro no Dan cursos, isso é o que você vai fazer. Vejo você no próximo vídeo. 70. Como adicionar uma imagem de fundo grande a um design de site: Oi, aí. Este vídeo, vamos colocar o leão gigante no fundo, então nada de leão, leão grande. Por que você agüentaria? Porque fizemos imagens de fundo. Nós vamos fazer algo um pouco diferente, vamos fazer posicionamento e nenhuma repetição e se você estiver interessado, vamos fazer as coisas do site de codificação VS por cerca de três primeiros minutos. Você vai notar que há muito mais tempo neste vídeo. Nos últimos minutos, mostraremos como criá-lo no Photoshop com essa transparência e sombra. Não é realmente tão essencial, então assista os primeiros três minutos e pule se você não se importa com o Photoshop, mas se você se importar, nós vamos fazer uma pequena viagem de campo, então você vai precisar de uma nota de seus pais. O ônibus chega em três minutos para este vídeo. Esteja pronto. Te vejo lá. Tenho minha página de índice aberta e meu style.css aberto. Quero adicionar minha imagem de fundo. Agora [inaudível] mas eu não posso adicionar duas imagens de fundo e você está tipo, “Nós não temos uma imagem de fundo”, mas lembre-se, estranhamente, nós temos que usar gradiente como uma imagem de fundo. Não podemos fazer dois na etiqueta do corpo. O que vamos fazer é pegar essa imagem de fundo, que é meu gradiente. Vamos adicioná-lo à tag HTML. Nós não vamos usar isso atualmente porque, eu acho que nós estávamos fazendo um 100 por cento, então se você não tem, você tem que adicionar a tag HTML e ele funciona muito bem. Dê uma olhada, ainda funciona, tenho meu gradiente de fundo, legal. Aqui, eu posso fazer meu outro gradiente de fundo, fundo, não gradiente, imagem de fundo. Lembre-se de sua URL e eu preciso ir e adicionar a imagem à minha pasta local. Em seus Arquivos de Exercício no Projeto 2, há um lá chamado fundo do leão da imagem. É um pouco difícil de ver. Consegue ver no vídeo? Eu fiz isto. Eu vou te mostrar como fazer isso no final do vídeo, mas é apenas coisa de fundo transparente. Vou copiá-lo, colocá-lo na minha área de trabalho, Projeto 2, dentro de Imagens. Vamos colar aqui e vamos por aqui. Vamos para imagens barra ou é imagem de fundo leão. Vamos nos certificar que o ponto e vírgula entra e vamos ver como fica. Do jeito que você quer. Você pode decidir que isso é incrível e é assim que você quer fazer. Só quero um no meio. Você pode fazer a imagem de fundo ou posição de fundo. Em vez disso, você pode fazer uma posição para trás superior. Eu só vou fazer isso no topo e no centro. Está no topo, está centrado, quero que não se repita. Na verdade, desative isso, porque vai fazer mais sentido com isso desligado. Vamos repetir os antecedentes. Eu vou para nenhum, oh não, não é repetição. Bondade para a sugestão. Sem repetição, ele acaba onde quer que seu site esteja, apenas acaba no lado esquerdo. Agora, quero voltar a ligar isto. Oh, atalho, eu não adicionei a última folha de atalho ou o vídeo de atalho foi o nosso comando barra invertida. Você selecioná-lo, mantenha o controle em um PC, comando em um Mac e pressione a barra. Minha barra de frente está abaixo do ponto de interrogação. Legal. Agora, é onde eu quero que esteja. Legal. Na verdade, o que eu quero fazer é dar a volta. Faremos isso agora quando mostrarmos como fazê-lo porque você pode ver, é legal com a sombra ao redor da parte de trás, mas você pode ver através do gradiente de fundo. Agora, se você não tem habilidades no Photoshop, não se preocupe. Eu já tenho a imagem obviamente pronta para você e você pode pular para o próximo vídeo, mas se você quiser verificar como ele é feito no Photoshop, é onde olhar. Vou te mostrar em um segundo. Volto logo. Tenho o Photoshop aberto. Estou usando CC 2019. Vai funcionar em praticamente todas as versões do Photoshop. Por que estamos no Photoshop? Sinto que precisávamos de uma viagem escolar. Fique longe do VS Code apenas para metade do vídeo. Pelo menos, eu precisava, de qualquer maneira. Eu sei que eu faço vídeos como este e se eu usar coisas como linha metade invisível, as pessoas vão perguntar, “Como você fez isso?” então eu também estou apenas responder a sua pergunta aqui. Se você for como, “Eu não me importo com o Photoshop. Eu quero voltar para o meu projeto web”, você poderia pular agora. Não vamos fazer nada de código ou baseado na web, estamos apenas fazendo uma imagem. Se você quer fazer isso, vamos fazê-lo. Vamos para File, New. Aqui, mude para Pixels e escolha um tamanho. Estou fazendo minha linha bem grande. Lembre-se que meu site tem cerca de 1024 de diâmetro, então eu estou fazendo este 1000, grande quadrado. Resolução realmente não importa, o que realmente importa é RGB. Clique nisso. Vamos clicar em “Criar”. Temos uma grande caixa branca. Vamos para o File. Vamos para a Place Embedded. Nós vamos trazer algo de seus arquivos de exercícios no Projeto 2, e é chamado, ícone leão preto. Clique em “Colocar”. O legal é que é um SVG, o que significa Scalable Vector Graphic. Significa que posso fazer isso. Não importa o quão grande é, posso torná-lo maior. Se você estiver usando 2019 e acima, você provavelmente já saberá que você apenas agarra os cantos e arraste, você não precisa manter nenhuma tecla pressionada. Você pode manter pressionada a tecla de opção em um Mac, tecla alt em um PC, para obtê-lo do centro. Se você estiver usando CS6 ou uma versão realmente antiga, você precisa manter a tecla shift pressionada para garantir que ele seja dimensionado sem fazer essa distorção. O meu vai preenchê-lo lá. Eu vou fazer o meu um pouco menor porque eu preciso da sombra para ir ao redor do lado de fora. Eu apertei Return. O que eu poderia fazer antes de ir mais longe, é que eu vou para Editar e eu vou para, desculpe, Editar mesmo e nós vamos para Transformar e vamos virar horizontalmente, porque no meu atual, eu Sinto que ele está virado para o lado errado. Ele está de frente para o mesmo que o logotipo, mas está escondido atrás de todas essas coisas. Eu virei-os. Vamos adicionar uma sombra a ele. Com isso selecionado no seu painel Camadas, vá para fx, vamos para Sombra. Sim, Drop Shadows, vamos girar para cima, todos possamos ver a opacidade e, em seguida , a principal ferramenta que você vai jogar é Distância e quão longe essa sombra parece que está longe do assunto e, em seguida, o Tamanho é o quão embaçado ele é. Se eu acertar o “tamanho” em zero, você pode ver, é muito forte, crocante, borda um. No meu caso, eu já mexi com ele. Quero que as duas sejam bem baixas. A Distância é bastante baixa, o Tamanho bastante baixo, e é esta pequena sombra de gota e talvez um pouco maior em termos de tamanho, mas fofo. Eu vou ter a opacidade bastante baixa, o que vai torná-lo muito difícil de seguir neste tutorial, porque ele vai ser super baixo. Você mal pode vê-lo lá agora, mas definitivamente está lá. Vamos clicar em “Ok”. Agora, o truque principal é, de alguma forma , ligar, porque permitimos a opacidade desta camada. Tudo desliga. É aí que este vem. Todos no Photoshop dizem : “Qual é a diferença entre esses dois?” e você diz: “Eles fazem a mesma coisa, exceto quando você tem uma camada que você gostaria de baixar a opacidade, mas não o Efeito.” Confira isso. Coloque em Preencher até zero. Você pode ver a camada real em si virada para baixo, mas o Efeito ainda está lá, você pode vê-los agora. A próxima coisa que eu quero fazer antes de exportar, é que eu não quero este fundo branco, então com ele selecionado, eu vou bater na minha lata de lixo e isso está pronto para ir. Tudo o que preciso fazer é ter certeza de que escolho o formato de arquivo certo. Nós vamos para Arquivo, eu vou para Exportar, Exportar Como, mas JPGs, sem transparência, ruim. Coloca o branco de volta, e você fica tipo, “Vá embora.” O que eu quero é PNG. Por que não estou usando SVG? Porque SVG é bom para gráficos vetoriais, todas essas coisas de ponta dura. Quando eu começar a entrar nessa coisa de fundo borrada, não vai funcionar. Certo, então PNG. Agora, também, o que eu poderia fazer por este PNG é que este PNG tem muito pouca informação nele. Tem alguns cinzentos, é isso, e alguns blocos transparentes. Eu posso usar o arquivo menor que é apenas 8 bits PNG. Ele vai fazer os tamanhos dos arquivos, dar uma olhada, então ele vai de 83 para 46, e não há diferença visual. Se você estiver lidando com uma imagem de super alta qualidade real, você deseja desativá-la e o padrão é, o que é, 16 bits. Sinto muito sobre isso. Basta ligar 8-bit, você vai ficar bem. PNG, onde vou enfiar? Vou colocá-lo na minha área de trabalho em meus arquivos do Project 2 em minhas Imagens. Vou renomeá-lo, fundo do leão da imagem, é o que tivemos antes. Esse cara é o mesmo, mas está virado para o outro lado. Vamos clicar em “Salvar” e substituí-lo. Dê-lhe um segundo. Vamos dar uma olhada na nossa versão. Olha só, ali está o nosso tipo. Ele está no fundo e está virado para o caminho certo ou para o nosso caminho. É assim que se faz esse tipo de coisa. A coisa legal sobre isso é que ele mostra através do gradiente em segundo plano. Claro, se você não tivesse um gradiente, apenas uma cor sólida, você poderia simplesmente colocar essa cor sólida no Photoshop. Fiz uma nova camada, coloque-a por baixo. Você pode ir para Imagem, desculpe, Editar, Preencher, e com essa camada selecionada, você pode escolher uma cor e, no meu caso, eu escolho “Cor” e você pode passar e talvez digitar o número hexadecimal que você está usando. Nem me lembro o que é, mas é o que você pode fazer. Eu poderia arrastá-lo por aí. Clique em “Ok”. Você poderia colocar isso lá, então ele poderia ir como um JPG porque não há transparência. Muito bem, a nossa viagem de campo na parte de trás do autocarro. Vamos para o próximo vídeo. 71. Como conectar links a páginas em site HTML: Está na hora da nossa página Fale Conosco e vamos vinculá-la à página inicial. Eles vão saltar através da nossa navegação. Eu acho que eu apaguei uma das letras do botão de contato, mas basicamente, nós vamos duplicar a página inicial e eu vou mostrar-lhe o que você precisa olhar para fora para fora quando você está duplicando páginas e então eu vou mostrar-lhe como vincular eles juntos neste pequeno vídeo. Vamos saltar para dentro. Vamos criar nossa página Fale Conosco. Agora, eu não iria para Arquivo novo e começar a fazer uma nova página HTML porque não há nenhum ponto de digitar tudo isso novamente. Porque nossa página Fale Conosco usa o mesmo logotipo e o mesmo nav ao longo da parte superior e tem um menu suspenso doce. Há muitos pedaços que eu quero reutilizar. Basicamente, eu só vou trocar esse pedaço no meio. Aqui está. Página de índice, certifique-se de que está selecionada. Arquivo, Salvar como, dar-lhe um novo nome. Vou ligar para o meu Contato ou Contacte-nos. Certifique-se de que não há espaços, hífens ou sublinhados. A única página que você tem que chamar explicitamente algo como índice tem que ser chamado índice. Tudo o resto depende de você. Legal. A primeira coisa que você precisa fazer sempre que duplicar uma página é alterar o título. Você não quer duas páginas com o mesmo título. É muito difícil saber o que colocar na página Fale Conosco, vamos colocar um endereço, detalhes, número de telefone, esse tipo de coisa. Se as pessoas estão procurando o número de telefone do Roar Cycle, eles podem chegar à página certa sem ter que ir para a página inicial e voltar para fora novamente. Devíamos adicionar a nossa meta descrição. Nós não fizemos isso em todo este site. Esse é o nosso grande descuido para mim. É uma daquelas coisas que você precisa, onde é muito bom ter, mas não essencial. Meta descrição não tem um atalho muito bom. Não é como se eu estivesse indo apenas para digitar meta e pressione tab no momento, pelo menos, ou eu não posso descobrir uma maneira. A meta descrição, você só rouba de um site antigo. Isso é o que eu faço. Mas tem a mesma estrutura que viewport, como esta aqui no topo. Isso muitas vezes é uma boa maneira de eu trapacear. Meta nome, este é chamado de descrição. Tem a mesma coisa, diz conteúdo, e é aí que vai a meta descrição. Deve ter cerca de 150 caracteres, então começamos a falar sobre os detalhes de contato de, eu não sei como você escreveria 150 caracteres. O que posso fazer é acelerar isto e mostrar-vos o que coloquei. Estou de volta. Certifique-se de que no final da sua meta descrição há colchetes angulares de fechamento. Vou ligar o embrulho. Eu adicionei esse material para que se houvesse um resultado de pesquisa, lembre-se, nossos resultados de pesquisa, a meta descrição é essa coisa, é essa coisa cinza aqui. Você sabe que quando você está trabalhando em um site, muitas vezes, você não precisa entrar em um site como, ok. Você pode descobrir todas as informações da descrição. O que fizemos pelo nosso povo. Eu preciso voltar e editar a página de índice, o que eu não vou fazer, eu deveria. Agora, uma coisa interessante é quem é responsável por isso? Digamos que você é o dono da Roar Cycles. Você é responsável por escrever todas as descrições meta. Acho que é fácil fazê-lo em tempo real. Não vá, farei isso mais tarde. Você nunca vai fazer isso. Essa foi a minha experiência. Se você está trabalhando com um cliente, pergunte ou diga a eles que eles têm que dizer que é crítico, eu preciso do título de cada página e diga a eles que ele precisa ser curto, ele precisa ser tantos personagens, ele precisa ter este bom nele, e você precisa de uma descrição correspondente para cada página. Pode ser um pouco difícil obter meta descrições de clientes, mas sua página pode viver sem uma descrição, mas não pode viver sem um título, ou pelo menos, se você quiser realmente classificar em qualquer mecanismo de busca. Vamos realmente conectar as páginas. Vamos precisar de dois deles abertos. Vou fechar meu CSS e vou ter a índice e a página Fale Conosco. Vou separá-los aqui. Eu tenho um e o outro. Vamos conectar a página inicial. Vamos conectá-lo quando alguém usa este menu suspenso, bem, na verdade usa isso, a página Fale Conosco porque o momento não vai a lugar nenhum, ele vai para hash. Nós só usamos esse símbolo de libra porque significa alguns navegadores, se você clicar em um botão e não há nada aqui, ele vai aparecer com um erro, e isso não é realmente o que você quer. Você quer estar testando apenas sem erros. Vamos encontrar o nosso contacto. Está ali. Em vez de hash, vamos dizer excluí-lo, vamos começar a digitar em contato e espero que ele vá, você quer dizer esta página? Sim, eu faço. Vamos salvar. Vamos pré-visualizar isso no navegador. Vamos clicar nele e olhar para aquilo. Nós fomos para a página Fale Conosco. Nada mudou. Você vê no topo aqui, isso mudou. Vamos fazer alguma diferença óbvia. Vamos falar conosco, e aqui, essas duas caixas de heróis, eu não quero mais. Há um, então eu vou me livrar de tudo no principal. Adeus. Vamos salvá-lo. Isso é uma grande diferença, vamos dar uma olhada agora. Vamos voltar. Com a minha página de índice, podemos clicar em Contato e ele salta para a página Fale Conosco. Agora, queremos voltar para a página inicial. Algumas páginas têm casa e tudo bem. Você pode ter um botão de Início. A maioria dos sites, porém, basta clicar no logotipo. Você pode ter experimentado isso. Para adicionar um link ao nosso logotipo, vamos envolver esta imagem em uma tag A. Vamos embrulhá-lo. Vamos usar o nosso novo atalho. Vou ligar o embrulho, embrulho de palavras. Vou selecionar tudo isso. Vou usar o comando Shift P ou Control Shift P em um PC e, em seguida, vou quebrar com abreviatura. Você pode ter que digitar Wrap e vamos embrulhá-lo em uma etiqueta A, e eu não vou dar mais nada. Vou chamá-lo de “tag “, aperte Enter no meu teclado. Você pode ver agora, esta cor se separou, então torna mais fácil para você ver. Esta imagem agora é embrulhada em uma tag A. Onde é que ele vai? Vai para o índice. Vamos guardá-lo e vamos ter uma pequena verificação rápida. Na verdade, vamos voltar para a página inicial. Não está funcionando. Ele deve ter salvo automaticamente. Hofu. A imagem tem uma tag A enrolada em torno dela. Clique nele, ele funciona. Queremos que seja de ambos os lados. No momento, você clica no logotipo, na página de índice, ele volta para o logotipo, o que não é bem o que queremos. Vamos pegar aquela coisa toda. Onde está o logótipo? Logo começa lá, termina ali. Vou copiar e colar em ambas as páginas. Onde está o logotipo? Está lá, vai substituir essa coisa toda. É sobre os dois. Agora, vamos dar uma chance. Vamos para os testes. Se eu clicar em Contato, ele não se conectou. Eu nem sabia como eu iria quebrar isso. Vamos voltar para a página inicial. Contato, Homepage. Há um pouco de um drama de como você fazê-lo em um e você tem que copiar e colá-lo em ambos com a navegação. É fácil o suficiente. Você pode selecionar toda a navegação ou este bloco inteiro ou o cabeçalho inteiro. Pegue esse cabeçalho inteiro e copie e cole-o em ambos. Não vai ser grande Java para o nosso site porque é apenas seis botões. Potencialmente, só temos seis, sete ou oito páginas. A próxima coisa que eu quero fazer é realmente adicionar algum conteúdo ao nosso site. Vamos colocá-lo no principal. Agora, isso vai ter um problema. Fiz isso de propósito, prometo. Temos um problema onde o Main faz algumas coisas. Nós dissemos principal ser uma altura, o que é perfeitamente bom para o que eu quero, uma altura mínima. Mas dissemos fazer algumas coisas como caixa flexível e itens centrais porque queríamos fazer algumas coisas divertidas em nossa página inicial onde queríamos que esses caras sentassem lado a lado. Fizemos algumas coisas específicas para o principal. O problema é que eu não quero fazer isso para principal agora, mas eu quero continuar usando main, então nós podemos chamar esta seção agora e seção estilo aqui, ou nós fazemos o que todo bom web designer que se perde, qualquer tipo de pessoa em qualquer lugar em um computador faz. Acabamos fazendo coisas como vamos chamar de Principal 2, e temos outro chamado Principal 2 aqui. Você fez isso, você chamou sua coisa de final. Você seria como, é meu documento final e você chama de final, e é como a maldição da morte. Você ri porque fez isso. Você chama de Final 2, até mesmo, você tem Final Final em seu computador em algum lugar, eu aposto. Sim. Às vezes você acaba com a Principal 2. Agora, a coisa é que não podemos chamar este Main 2 porque main é uma tag HTML real como cabeçalho, é predefinido, então precisamos chamá-lo. Você precisa fazer isso. Você precisa dizer que este é chamado de Principal 2, então ele precisa ser uma classe div chamada Principal 2. Há outras maneiras de fazer isso, é o que vamos fazer por enquanto. É como realismo, também conhecido como mau código. Principal 2. O que queremos fazer para a Main 2? Aqui, vamos estilizá-lo. A outra coisa que eu realmente quero para Main 2 é dar-lhe uma altura mínima para que ele não se esmague. Isso vai fazer bem. Acho que precisamos de um contacto connosco. Nós provavelmente precisamos de algum enchimento no topo, mas vamos ver como ele vai ser. Vamos adicionar aqui, um H1 e por baixo disso, uma etiqueta P. Vamos copiar algum texto do nosso projeto para o arquivo de texto. O H1 é chamado Fale Conosco. Novamente, vou digitar isso aí. Entre em contato conosco, lembre-se, não consigo ver meus dedos quando estou digitando. Está bonito e arrumado. Vamos verificar no navegador, muito perto do topo. Eu poderia apenas adicionar Main 2, um pouco de enchimento no topo, por favor, amigo. Padding-top, 150. Provavelmente demais. Demasiado. 50. Lá vamos nós. Na verdade, antes de irmos, vamos apenas supor, dar-te o exemplo. Vamos ignorar isto. Vamos fingir que o Main 2 não existe, e estamos usando a tag principal novamente. Principal, este aqui precisa terminar com principal, mas pré-definido, pré-fabricado. Funcionou na página 1, a página inicial, mas vamos ver o que ele faz nesta página. Você vê, é flexão, então significa que fica lado a lado e você diz, não é o que eu quero. É por isso que temos esta caixa separada. Eu só expliquei por que sem realmente mostrar que os maus resultados. Principal 2. Vamos para o próximo vídeo. Vamos começar a procurar formulários. Vai ser uma boa, uma longa e boa. É uma boa parte da turma. Nem precisamos salvá-lo. O que está guardando para nós? Vamos para o próximo vídeo. 72. Como fazer um formulário php simples funcionar em seu site HTML: Para começar, há duas partes para criar um formulário que envia a você, o proprietário do site, um e-mail. O lado HTML das coisas, que é razoavelmente fácil, vamos aprender isso muito rápido. A parte mais difícil é o que fazer com essa informação. Alguém vem ao seu site, preenche o formulário e aperta enviar o que acontece? Nós temos um pouco de solução e vamos enviar os dados do formulário que clicamos para um PHP melhor que está hospedado em nosso servidor e que vai nos enviar, o proprietário do site, um e-mail com todos os dados. Mas é um pouco de um hack, principalmente porque é bastante difícil de configurar um adequado serviços de e-mail. Você precisa de um banco de dados, você precisa clicar nos dados e você precisa ter certeza de que você não quebra nenhuma das regras de envio de e-mail, mas está fora do escopo deste curso. Mas eu não queria chegar ao final só não fazer formulários, você gosta de assobiar aqui e espero que eles não perguntem sobre formulários e se eles fazem os formulários, nós simplesmente não fazemos nada com eles, isso não é divertido. Basta saber que é um pouco de um hack e no início, o que vai acabar acontecendo é, coisas como Gmail e Hotmail vão receber um e-mail de você e eles vão dizer, hey, isso é um pouco suspeito e eu vou colocá-lo em spam. Você como proprietário de um site, para o primeiro par de e-mails que você recebe de seu site, você vai ter que ir para a sua pasta de spam, dizer não spam, e então, eventualmente, ele aprende. Tudo bem, então vamos começar. Na verdade, antes de começarmos, a outra coisa que extrai no início deste, é que ele tem que ser feito em um host. Você não pode testar isso localmente porque o PHP precisa viver em seu host como Bluehost, para que ele realmente envie esse e-mail. Podemos começar tudo aqui e se você não tem configuração de hospedagem, você não pode testá-lo ainda. Todos os extractos está tudo feito, vamos começar. Primeiras coisas primeiro, onde vamos colocá-la? Nós vamos colocá-lo aqui, logo abaixo aqui, então vamos encontrar isso no seu código. Onde é que ele está? Aí está o meu H1, tem a minha etiqueta P, logo depois de fechar. Nós vamos ficar em um formulário e vamos usar o formulário postado. Falaremos sobre ação um pouco mais tarde, é aí que colocamos nosso PHP, mas faremos esse segundo. Tudo dentro do formulário é o que será enviado no e-mail. Se você tiver campos de entrada como nome e e-mail fora do formulário, ele não será enviado. As coisas que entram nele, são chamadas de campos de entrada, bem, a maioria deles. Você pode ver que há um monte deles, vamos cobrir alguns deles neste vídeo e no próximo, mas não vamos cobrir cada um deles. Faça uma pequena pesquisa para entradas de formulários HTML e você pode dar uma olhada em cada um deles. Os principais são, vamos começar com, texto, vamos usar este para reunir o nome das pessoas. Você tem nome e identidade, nome, o que quer que você colocar entre essas aspas será o que virá até você em um e-mail. Se eu pedisse seu endereço e a pessoa preenchê-lo, eu vou receber um e-mail como o proprietário do site para dizer que o endereço é igual ao que eles preencheram. Você poderia escrever A, você poderia escrever isso, você só vai receber um e-mail do seu site dizendo, esses dados vieram através e são iguais ao que eles digitaram. Agora o primeiro vai ser, um nome, então eu quero um nome. Nós vamos usar nome e e-mail e enviar botão, forma simples real para começar. Agora a identificação é um pouco mais especial. Pode ser o que quiser, certifique-se de não usar sublinhados ou hífens. O ID é um identificador exclusivo que você o usa para ouvir um CSS. Se eu quiser estilizar este formulário ou vamos ter uma pequena pré-visualização. Isso é o que é, esse é o campo. A identificação está aqui, eu estilizaria essa coisa chamada nome, nós usamos um hash quando nós o estilizamos. Dizemos o nome que eu gostaria de torná-lo uma caixa maior e torná-lo ter uma cor de fundo de rosa. IDs são usados para identificar este campo de entrada específico. Você pode se acostumar mais tarde, bem como se você estiver indo para usar a validação para JavaScript, o ID é bastante importante. Esta é a coisa que vem até você, esta é a coisa de fundo nitty. A próxima coisa que faremos é fazer o e-mail, entrada de e-mail onde quer que você escreva, não é? Lá está ele. Mesmo com o nome, então você vai receber um e-mail a partir deste formulário dizendo, o e-mail é dan@sample.com. e o ID muitas vezes eles são os mesmos, torná-los a mesma coisa. Vamos dar uma olhada em como formar seu lado a lado, está no nosso botão e corrigi-lo. Vamos fazer com que vá muito grosseiramente, para começar. A próxima entrada que queremos é o botão enviar, então entrada enviar, lá vamos nós, incrível. Agora o valor neste caso é o que vai aparecer no botão, então se eu colocar, fogo maneira, que é o tick então não é tão importante. É estruturalmente diferente desses campos de entrada, então eu vou deixar o caminho do fogo e nós precisamos dobrar para trás também. Vamos dar uma olhada rápida, então o que temos? Temos nome, e-mail e isto. Vamos falar sobre rótulos e coisas em um segundo, eu clico no botão e não sei o que fazer com o botão. Basicamente, o que o botão envia é, vamos postar essa coisa e fazer essa ação. Não temos nada lá dentro. Agora vamos falar sobre o PHP necessário. O que vamos fazer é criar um arquivo PHP. Nós não vamos passar pela sintaxe de como escrever PHP, como nós temos HTML e CSS porque nós vamos apenas copiar e colar este, porque esse é um outro curso inteiro aprendendo PHP. É apenas uma linguagem diferente, é uma linguagem muito diferente, é uma linguagem de programação onde isso é mais do que é chamado linguagem mark-up e cada um existe e ele não faz nada, apenas senta lá e faz coisas e mostra o , o mesmo que o CSS. Ele realmente não faz nada, não há cálculos dinâmicos acontecendo, é apenas muito descritivo, então PHP, vamos fazer um. Vamos arquivar novo e salvá-lo, você pode chamá-lo de qualquer coisa, desde que ele não tenha espaços ou hífens, mas nós vamos chamar este um PHP. Aperte “Salvar”, ele irá para o documento PHP. Você vê pequenas mudanças de ícone lá em cima para o ícone do PHP, o pequeno elefante. Tudo bem, e nós vamos trapacear. Eu já tenho um código para você. Em seus arquivos de exercícios no projeto 2, há um chamado formulário 1 simples. Temos esse cara, vamos copiá-lo e colá-lo e eu vou ver o básico. Basicamente ele está procurando no meu documento por um ID de nome e, em seguida, ele vai me enviar o nome, qualquer que seja o resultado de entrada. Ele também está procurando um ID de um e-mail e, em seguida, ele vai me enviar o e-mail para continuar adicionando estes. Farei outro em seu endereço. Vou colar este aqui e digitar o endereço, desde que o nome do ID corresponda. Não quebre ainda. Ele vai pegar a partir deste nome aqui, ele vai para o destinatário. Este vai me mandar, é aqui que você colocaria seu endereço de e-mail. Eu coloquei Dan em exemplos para que ninguém me envie zilhões de e-mail de teste. Se você tem seu endereço, então o seu pode ser bob@gmail.com. Quem tem o endereço de e-mail? Eu gostaria, mas colocar seu endereço de e-mail como o proprietário do site, e é isso. Agora precisamos conectá-lo, então vamos salvá-lo. Feche-o e é aí que ele entra aqui em ação e diga, eu gostaria que ele fosse para mail.php, por favor aperte “Salvar” e não vai funcionar. Por quê? Como eu disse no início, ele precisa estar no seu servidor. Eu vou te mostrar como eu vou fazer isso. Se você tem Bluehost configurado, você está pronto para ir. A única coisa que você precisa verificar isso, digamos que se você hospeda e não está funcionando, basta certificar-se que o PHP está configurado no servidor. É bastante comum. É muito incomum não o fazer. Eu digo isso porque eu tinha alguma hospedagem barata que não tinha configuração PHP ou pelo menos veio por inativado. De qualquer forma, se não funcionar, contato com o seu host e diga que o PHP está habilitado no meu servidor. Eles dirão, claro que é, e provavelmente é mais um problema sintático. Vamos enviá-lo para o nosso anfitrião. Para se conectar ao seu host, e nós o conectamos ao nosso último membro do projeto, projeto 1, nós o enviamos para Bluehost, foi muito emocionante. Este aqui, você percebe que os ícones não estão mais lá. É porque não o configuramos para esta nova pasta local. Está na nossa área de trabalho chamado Projeto 2. Você pode simplesmente ir e usar o caminho homem das cavernas e entrar em sua conta de hospedagem Bluehost no site, encontrar o gerenciador de arquivos e apenas carregar os arquivos. Você quer fazer upload entre em contato conosco e e-mail mais provavelmente todas as imagens e tudo o resto. Mas eu vou chutar meu backup, vamos fazê-lo juntos porque você vai precisar saber. O que vamos fazer é fechar tudo isso. Vamos mudar do projeto 2 para o outro projeto anterior. Vamos conseguir um arquivo, abri-lo e no nosso desktop. Este é o outro projeto em que estamos trabalhando, projeto 1 pisca e abre. O que estamos procurando é essa coisa chamada sftp.json, que tinha todos os detalhes que estabelecemos para conectar ao nosso FTP ou nosso host. Eu vou clicar sobre isso e a edição vai desfocar meus detalhes, selecionar tudo o que está aqui, copiá-lo. Se você já está aqui e você está tipo, “Ei, eu não fiz aquele vídeo,” pule de volta mais cedo no curso. Nós trabalhamos, havia um vídeo sobre como fazer upload para um host, copiá-lo, fechá-lo. Vamos voltar para o outro fora do projeto 2. Então, abra o Projeto Recente 2 está lá dentro. Volte para nossos arquivos regulares e o que queremos fazer é ir para nossas extensões. Vamos encontrar SFTP e ele diz que está habilitado, mas eu não posso ver esse pequeno ícone. Vamos apenas desativá-lo, vamos ativá-lo. Então, como fizemos antes, temos que passar por isso. Comando Shift P, temos usado. Lembre-se, nós usamos isso antes para embrulhar uma etiqueta. É a mesma coisa que gostaríamos de configurar o nosso SFTP. Basicamente, estás a fazer a mesma coisa outra vez. Vamos percorrer o caminho mais longo. Command Palette e aqui, você pode ter que começar a digitar SFTP. Mas o meu já está lá. Vou pegar tudo isso, deletar e colar no outro, pronto para coisas embaçadas. Embaçada. Você vai salvá-lo, você vai fechá-lo e clique novamente no meu servidor aqui. Eu queria um pequeno ícone para pagar de volta. Desativar. Recarregar necessário. Eu quero encontrar isso novamente, voltar SFTP e vamos ativá-lo. Mudou-se para cá. Não está aparecendo aqui. Está tudo bem. Às vezes, essas extinções me enlouquecem. Parece que está funcionando agora, exceto para os ícones que não estão lá. Aqui, e explorador, vou ver se consigo carregá-lo. Vamos tentar a página entre em contato conosco. Vamos clicar com o botão direito e desaparecer no fundo. Se isso não aparecer, você terá que desativá-lo e ativá-lo novamente, talvez seja necessário reiniciar o código VS. Eu vou fazer o upload. Vai haver aquele só um teste. Está checando o fundo, está se conectando. Foi-se, feito. Incrível. O que mais precisamos? Precisamos disto. Isso é muito importante. Eu também vou colocar as imagens para cima. O que mais eu preciso? Vou manter pressionada a tecla Command no meu Mac Control em um PCs você. Se tivermos isso, eu vou rir as imagens. O que mais precisa subir? E também para a página de índice, o style.css. Tudo o resto era apenas pequenas coisas que fazíamos. Todo o estilo reset que precisamos. Eu já fiz em um, clique com o botão direito do mouse em qualquer um deles. Upload. Off, vai para a nossa Silva. Voltarei em um segundo. Estou de volta, está carregado, a imagem é levar uma eternidade, FTPS é super lento. Mas está feito. Vamos ver o site. Lembre-se que temos testado localmente. Você pode nos dizer seu endereço IP local virtual, ok, mas queremos encontrar adarerestaurant.com. Eu meio que carreguei-o enquanto estava no meio do carregamento, caso você faça o mesmo que você gosta. Difícil o lado velho metade novo site. Vou clicar em “Atualizar” e ver se encaixa tudo carregado. Agora não é, ele realmente é carregado. O problema é, é que ele está armazenado em cache, um monte de coisas que falamos sobre armazenar em cache um pouco mais cedo, mas é realmente bom cobri-lo novamente. É como se o navegador chega aqui e diz, hey, eu já estive em adarerestaurant antes. Eu não vou olhar para a imagem de fundo novamente, porque eu já tenho isso. Com que frequência isso vai mudar? Nós, como web designers, mudamos o tempo todo enquanto aprendemos, mas regularmente, o site permanece o mesmo. O que precisamos fazer é fazer uma daquelas atualizações difíceis. Fazemo-lo pela vista. Nós vamos desenvolver, nós vamos inspecionar elementos e nós clicar com o botão direito do mouse nisso e nós dizemos recarga dura. Estamos fazendo cache vazio recarga rígida. Vai passar e largar tudo o que sabia antes. Está de volta. Vou fechar esta pequena cruz na parte inferior direita para voltar ao meu site. Vá, vamos para a página de contato. Será que vai se conectar? Estes são realmente forma básica. Vamos testá-lo. A única coisa que eu vou fazer antes de ir e verificar se funciona é que aqui, lembre-se, isso pode ser usado porque é para lá que o e-mail vai chegar. Aqui é onde eu coloco em dan@, meu endereço de e-mail. Você colocou seu endereço de e-mail. Verei você em um segundo assim que eu digitar meus detalhes secretos. Lá eu fiz isso. Atualizei o mail.php e, em seguida, cliquei com o botão direito do mouse e carreguei-o. Agora ela vem ter comigo. Vamos fazer um teste. Estou olhando para o site real agora. Este PHP é quase servidor. Vou colocar Daniel Scott, o nome. Vou colocar meu endereço de e-mail, mas se eu clicar aqui, eu já testei. Ele lista todos os endereços de e-mail diferentes que eu tenho. Eu não sou que eu não confie em você como eu não confio em você. De qualquer forma, a mídia social é a melhor maneira de entrar em contato comigo porque recebo muitos e-mails. Vou colocar o meu endereço de e-mail. Editor, você pode desfocar um pouco? Eu clico muito longe e ele vem até e-mail enviado. Esse é o carregamento do formulário PHP. Agora vamos esperar. Vou ver meu e-mail em um segundo. O que você pode descobrir é que ele está em sua pasta de spam. Isso pode acontecer pelas primeiras vezes. Então algo como o Gmail ou o Outlook entrando em dizer que isso não é spam. Depois de um pouco, começará a lembrar-se e a ir. O material que vem de um querido servidor restaurant.com não é spam. Recebi este endereço de e-mail de mim mesmo, do meu site. Veio do adarerestaurant. Esse era o endereço de e-mail que eu digitei. É falso e sim, veio de mim. Nenhum assunto. Eu vou manter esse código no PHP, agradável e limpo. Vamos passar e adicionar um pouco mais de detalhes a ele assim que trabalharmos mais alguns desses e colocar campos. Mas sim, é assim que se envia um e-mail. O meu não foi para spam. Às vezes faz. Não no meu caso, só veio direto pelo Gmail, disse que ele foi. Nosso e-mail acabou de ter do nome que digitei, que é o meu nome. Mas você pode ter muitos e muitos campos de texto diferentes, desde que todos tenham seu próprio nome e ID, você pode ter muitos dados passando. Sucesso. Mas lembre-se dessas advertências. Você precisa estar testando ao vivo em seu servidor real para avaliar realmente o servidor online PHP. Se você tiver problemas, muitas vezes as pessoas esquecem de realmente carregar mail.php do VS Code. Certifique-se de que você realmente os carrega. A outra coisa que as pessoas esquecem está na página de contato aqui no formulário, onde mais ele faz? Isto aqui, como nós formamos o método de ação post e a ação tem que ser não apenas montado em PHP, ele tem que ser o que você chamou ok. Se você o chamou de meu mail.php, então coloque meu mail.php. Também garante que o nome seja separado. Se tem dois nomes ou dois e-mails, em duas entradas separadas, vai ter problemas e tem que haver um botão porque ninguém pode enviar a forma de um botão. É isso, por enquanto. Uma última coisa, porém, às vezes, pode levar uma eternidade, a minha pode [inaudível] de distância. Mas eu tive isso dependendo do servidor e dependendo do meu filtro de spam, eu tive que ele não aparecer por uma hora. Eu não estaria pulando agora indo, não está funcionando. Eu daria um pouco de tempo dependendo, você vai hospedar seus e-mails, se você usar o Outlook ou usando talvez 365 da Microsoft. Dê-lhe um pouco de tempo para passar. Mas se depois de algumas horas que não chegou, provavelmente está quebrado. O que você pode fazer é baixar os arquivos completos para este particular e ele deve ter tudo aqui como está indo agora. Se ele ainda não funcionar, talvez você precise entrar em contato com o seu anfitrião. Bluehost parece funcionar perfeitamente. Se você estiver usando um host diferente, talvez entre em contato com eles e diga: “Ei, isso é o que estou tentando fazer. Não está funcionando. Você pode me ajudar?” Está um pouco fora do alcance da ajuda normal deles. Mas você pode obter alguma pessoa de suporte útil que pode apontá-lo na direção certa porque pode ser algo a ver com o servidor. É por isso que esta é uma solução nojenta. Funciona, mas não é para ser assim, mas eu uso o tempo todo. É adorável. Vamos entrar no próximo vídeo onde começamos a falar sobre muito mais desses campos de entrada. 73. Adição de texto do espaço reservado e rótulos a campos de texto de formulário de site em HTML: Tudo bem. Vamos começar com espaço reservado e vamos fazer rótulos em segundo lugar, porque espaço reservado, é super fácil. Então, se eu quiser que este campo aqui para ter texto de espaço reservado, você apenas escrever espaço reservado igual a e você colocá-lo entre aspas, e então você apenas colocar no que você quiser. Agora, isso pode ser qualquer coisa aqui. Vou apertar “Salvar”. Como estamos abrindo e fechando arquivos, apenas certifique-se de fechar e reabrir sua página de teste. Certifique-se de que não está a trabalhar na versão dinâmica, porque isso não vai ser ajustado ou alterado, a menos que clique com o botão direito do rato no Explorador. Estou vendo isso online, vou apenas fechá-lo para deixar claro, que eu não fique confuso. Você pode ver o texto do espaço reservado, quando você clica nele, ele vai para cima. Mas sim. Só preenche lá. Então você pode fazer isso em qualquer um desses. Então, espaço reservado. Espaço reservado. Vamos colocar em talvez dan@sample.com. Salve e você pode vê-lo lá. Comprimento legal. Agora um rótulo é diferente. É o texto que vai acima dele. O que vamos fazer é, vamos fazer pelo nome aqui. Então, vamos remover espaço reservado. Você pode ter os dois, vamos ter os dois. Colocando alguns espaços entre ele, só para deixar claro para mim, principalmente. O rótulo pode ir a qualquer lugar na página, pode estar apenas na frente dele, às vezes logo depois de ser mais apropriado. Tudo o que é é rótulo. Etiqueta uniforme e para. Este é o caminho, porque estas são coisas totalmente separadas. O fato de que eles estão por cima um do outro, porque nós poderíamos apenas escrever uma tag p e dizer que na verdade esta é uma tag p do seu nome. Isso funcionaria, está lá e descreve essa coisa. Mas queremos este rótulo, porque este rótulo faz outras coisas. Portanto, rotule e certifique-se de usar o ID. Então o rótulo para o nome, porque ele está associado a isso agora vinculado. Aqui é onde você coloca os carrapatos para ele, então este é o primeiro nome. Vamos fazer styling um pouco mais tarde, mas digamos que o Nome é para isso, por que isso é diferente? É porque principalmente para leitores de tela e acessibilidade. Porque eu posso clicar em Nome agora e que realmente pode ver eles destacaram a caixa Nome. Na verdade, está ligado a ele, eu poderia tê-lo em qualquer lugar que eu quiser. Eu vou cortá-lo e colocá-lo fora para o meu botão Enviar. Ainda está lá, mas veja quando eu clico, acende. Nunca o tinha de volta aqui, mas só queria mostrar-lhe a ligação, desde que a identificação corresponda, então isso está associado a ela. Queremos algumas boas práticas para formulários porque essas podem ser provavelmente uma das coisas mais difíceis para alguém com deficiência visual, que está usando um leitor de tela, precisa de ajuda. Mais uma vez, poderíamos fazer um por isso. Você aí. Mas este só precisa ter certeza, duas coisas, o For está indo para a idéia de e-mail e este vai ser e-mail. Bom. Legal Então isso é espaços reservados e rótulos. Antes de irmos, estão todos numa linha, tenho ignorado. No momento, por padrão, essas entradas de formulário são um tipo de exibição. Que tipo de exibição são eles? Eles não estão bloqueados, porque estão na mesma linha. Você sabe o que eles são? Eles são elementos inline. Queremos mudar isso. Basicamente o que vamos fazer, em vez de dizer rótulo ou rótulo e entrada ou todo tipo de coisas separadas, o que vamos fazer é criar uma tag div rápida, tags div por padrão são nível de bloco. O que vamos fazer é, o que devemos fazer? Vou embrulhá-lo em torno de ambos. Eu vou usar o meu Command Shift P ou Control Shift P. Eu vou usar o envoltório e eu vou embrulhá-lo ao redor. Eu vou criar uma nova classe chamada inputwrapper, porque é um nível de bloco e que está dentro dele, assistir, salvá-lo, ele acaba em sua própria linha. Nós não temos que fazer nada e eu vou fazer isso porque eu quero estilizá-lo em linha, aplicando os stylers mais tarde para estilizar as coisas dentro dele. Eu poderia dizer fazer todo o texto dentro daqui menor ou maior. Só vou reutilizar isso algumas vezes. Esses dois caras vão juntos no seu próprio pequeno. Comando Shift P, Control Shift P, embrulhe. Nós vamos, bem, este era um código. Cara, se eles são muito longos então copiamos e colamos. mesmo acontece com o botão Enviar. Na verdade, porque ele está no final aqui, ele não precisa estar em sua própria div, porque esta div aqui o afasta. Tudo bem. Vai torná-lo um pouco mais agradável. Na verdade, vamos separá-los só porque eles estão muito próximos. Nós vamos fazer o estilo corretamente um pouco mais tarde. Mas só por enquanto, só por minha sanidade como designer, vou abrir meu CSS, não redefinir. Eu vou procurar styles.CSS. Mova-o para cá. Vou estilizar o inputwrapper. Eu vou dizer, vamos apenas ter alguma margem. Coloque sua margem no topo, margin-top. Comecei a fazer isso, fico muito preguiçoso. Você pode ver que eu acabei de colocar uma martop e eu consegui. Não sei como, é mágica. Eu vou colocar em talvez 20 pixels apenas. Eu quero meu traseiro também, não meu top, margin-bottom. A sintaxe está errada. Acho que está certo, está tudo bem. Não, tem linha rabiscada. Lá vai você, fundo, tão ruim. Tudo bem. Lá vamos nós, então eu tenho algumas margens abaixo deles, apenas para tornar um pouco mais fácil para o resto dos próximos vídeos, vamos olhar para alguns dos outros vídeos de entrada. Temos ticks um está feito, ou o botão de enviar está feito. Vamos olhar para os outros comuns. Mas faremos em outro vídeo, te vejo lá em um segundo. 74. Como adicionar uma caixa de texto grande de várias linhas em um formulário HTML: Oi lá. Este vídeo vai mostrar como colocar em uma grande caixa de ticks com várias linhas e texto de espaço reservado. Se pela sua vida, você não consegue encontrá-lo, é porque não é uma entrada como essas outras. Chama-se apenas área de texto simples e velha. Mas vamos descobrir como fazê-lo juntos agora no vídeo. Primeiro, vamos colocá-lo dentro de sua própria div como temos aqui, o rapper de entrada, e apenas mantê-lo em sua própria linha. Como é que o encontramos? O estranho é que não é um tipo de entrada. Então, há muitas entradas. Mas estranhamente não é um desses. Chama-se apenas área de texto. Estranho porque um monte da mesma funcionalidade, apenas nome estranho. Agora o nome e a identificação são os mesmos. Esta vai ser a nossa mensagem e para a mesma mensagem. Colunas e linhas é interessante. Vou voltar a ligar o embrulho. Colunas e linhas. Linhas são fáceis, é apenas o quão alto é e colunas não são colunas como temos falado nesta classe é apenas quantos caracteres de largura. Tem 30 letras de largura. Vamos dar uma olhada por padrão e vamos dar uma olhada. Eu não lancei hoje. Vamos ao vivo. Aí está, essa é a minha área de texto. Vamos ajustar as linhas, para baixo para cerca de cinco só para que possamos ver e vamos para colunas. Tempos loucos, aí vai você. Você pode fazer outras coisas para ele tão bem como antes. Isto é que nós somos realmente nada entra nisto porque é onde as pessoas de verdade digitam, mas pouco antes de fechar lá. Depois das filas cinco, eu vou colocar no espaço, e eu vou colocar em espaço reservado. Este é apenas o texto de espaço reservado como antes. Lá está ele ali. Legal, nada mais. Eu realmente posso te contar sobre isso. Isso é o que vamos estilizar e os carrapatos dentro dele mais tarde, depois de termos passado por alguns deles. Vou manter tudo separado para que você possa achá-los facilmente. Essa é a caixa grande na qual você pode digitar várias linhas, também conhecida como área de texto. Próximo vídeo. 75. Como adicionar uma caixa de seleção a um formulário HTML: É hora de fazer uma caixa de seleção, caixa seleção, caixa de seleção, o que você quiser chamá-lo, é essa coisa e um spoiler é a caixa de seleção de entrada. Mas há algumas coisas extras que você precisa fazer para este, como um valor. Vou te mostrar como fazer isso agora neste vídeo. Tudo bem. Vamos colocá-lo embaixo disso aqui, que é nossa área de texto, então vamos colocar em nossa caixa de seleção. Agora estamos embrulhando tudo neste só para que eles quebrem em sua própria linha. Se você gosta de jogar de volta para este vídeo no futuro, não durante todo o curso, este rápido realmente não faz nada além de sair em sua própria linha. O que você realmente está procurando é uma entrada chamada checkbox. Está lá. Vamos dar-lhe um nome. Este vai ser, você gostaria de se inscrever para minha assinatura de e-mail? O nome nesse id, como todos os outros fizeram, muitas vezes são exatamente o mesmo. Aquele que isso precisa que não está pré-preenchido lá como um valor porque nós vamos dizer, no momento esse nome é a questão, mas você precisa saber se ele está sendo verificado ou não, e esse é o valor. O valor neste caso vai ser, sim, inscreva-me. Quando eu receber meu e-mail para o meu PHP, ele vai dizer que há um nome chamado e-mail inscrição e ele vai ter este valor. Ele me inscreveu. Legal. Vamos verificar. Olha, aqui está a minha marca de verificação. Lá vai ele. Legal. Marca de verificação, é uma daquelas coisas que realmente precisa de um rótulo. Alguns desses outros nós podemos colocar no lugar titulares para ajudar a explicar isso, então não precisamos rotular potencialmente, este aqui faz. Agora, o rótulo pode ir antes ou depois porque é estranho ter o rótulo antes dele neste caso. A grande coisa com o rótulo lembrar, o para eo id precisa coincidir. No meu caso, o nome e o ID são os mesmos, eu copiei o errado. Mas enquanto estes dois combinarem, eles corresponderão. O rótulo para este é inscrever-se para o boletim informativo por e-mail. Legal. Dê uma olhadinha. Agora lembre-se que este rótulo não tem que estar no início, pode ser logo depois, desde que isso para, este é o mesmo que o id para a coisa real. Legal. Pegar o carrapato. A última coisa que pode fazer é pré-ingresso. Então sim, você já está inscrito para o meu boletim informativo por e-mail. É em VS Code e sim, inscrever-me caixa de seleção tipo de entrada, não o rótulo. Separe isso, faça parecer legal. Após este fim, basta escrever verificado. Por padrão, ele será verificado. Tudo bem. Vamos salvá-lo. Dê uma olhadinha. Vou atualizar a página. Olhe para isso, já está verificado. Você desliga. Lá vai você. Tudo bem. Isso é tudo para marcas de verificação. Há algumas coisas de design que eu quero fazer como alinhar coisas e tamanhos de fonte, mas não se preocupe, vamos fazer isso em um vídeo futuro chegando muito em breve. Por enquanto, nos botões de rádio. Vejo você no próximo vídeo. 76. Como adicionar um botão de opção redondo com ponto no meio ao formulário do site em HTML: Oi lá. Vamos fazer um botão de rádio. Isso é como uma coisa estranha e escura que você pode clicar em um, mas você não pode clicar em ambos ao mesmo tempo. É tudo, um ou outro. É uma entrada de rádio. Você entende? É só um pouco de peculiaridades para fazê-lo funcionar. Vamos entrar agora e aprender como fazê-lo em VS Code. Certo, vamos colocar nosso botão de rádio. Como o resto deles, vamos colocá-lo dentro de apenas nossos episódios em sua linha. Dentro disso, vamos fazer uma entrada de rádio, é muito simples, rádio. entanto, o rádio não tem peculiaridades. O nome, este vai ser, digamos “contato”. Você viu no início sua preferência de contato. Este é um genérico para ambas as opções. O id é específico para este pequeno botão em particular. Vamos ligar para este telefone. Vamos guardá-lo e dar uma olhadela. Faltam pedaços, mas vamos dar uma olhada. Eu tenho o nosso botão de rádio, eu clico nele. O problema com isso é que se você tiver apenas um botão de opção, ele não pode ser desclicado. É o que é chamado de botão Todos. Uma marca de verificação é um fim. Se você tiver mais de uma caixa de seleção, vamos fazer isso rapidamente. Onde está minha caixa de seleção? Teremos dois desses. Espaço. Caixas de seleção é legal. Você pode ter eu quero isso e aquilo e então um pouco daquilo, você pode ter todos eles e, A-N-D. Enquanto um botão de rádio precisa ser ou eu sou isso, ou outra coisa. Precisa de pelo menos mais um botão aí. Pego este, e eu copio, colo. A grande coisa que você precisa, essas precisam ser as mesmas. O nome precisa ser o mesmo, mas a idéia precisa ser diferente para torná-los únicos. Eles também precisam de valores, modo que quando você receber seus e-mails, ele vai dizer, vamos colocar em valor, ele vai dizer e-mail. Vou receber um e-mail dizendo que a preferência de contato é igual a e-mail, ou dependendo do que o usuário escolher, preferência de contato é igual a telefone. Isso vem deste valor aqui. Ambos precisam disso. Este precisa de um valor de multa para este. Estamos quase lá. Agora a grande coisa é, eles precisam ser os mesmos? Nome e nome, porque eles alternam, eles são todos. Este ou este. Você não pode tê-los. É como um botão de rádio como você pode não ser muito velho para se lembrar desses altos. Rádios, você só gosta talvez um pouco antes do meu tempo. Nasce em 1980, então estes estavam em alguns carros, mas na saída, mas basicamente você escolheu uma estação. Se você escolher outro, se você empurrar aquele para dentro, este botão saiu, já era mecânico. É por isso que o botão de rádio e a linguagem continuam. Coloque este aqui. Este tem que sair. Ou é isto ou aquilo. Você pode ter muito mais deles, desde que eles usem o mesmo nome. Você precisa dar identidades diferentes, caso contrário, você não vai saber o quê. Como está o sinal de contato e fumaça. Colocando hífens aqui, eu deveria usar minúsculas também. Mas essa é uma estupidez, então comum. Uma coisa que vamos fazer para arrumá-lo é que precisa de rótulos, porque são como botões misteriosos. Etiquetas, vamos colocá-las logo depois, como fizemos nossa caixa de seleção. Nós vamos colocar em rótulo, rótulo para e precisa ser o mesmo que o id. Esta é a etiqueta para o telefone. O que é que vai dizer? Vai dizer um telefone. Eu deveria usar minúsculas, só que você não precisa, mas mais tarde, se eu estou tentando controlar isso com algum outro código, você tem que ser consistente com as coisas porque senão você diria, “Ei, por que não está funcionando?” É porque você usou maiúsculas aleatoriamente quando você não tem o resto do curso, porque as pessoas não vêem o que tem nessas coisas. Eles veem entre o rótulo aqui. Você pode usar-se como no mais baixo. O rótulo novamente para o botão faz logo acima ele vai ser para e-mail, corresponde. O que vai ser e-mail. Telefone ou e-mail. Agora, em termos de um rótulo mais grandioso, não há como rótulo mestre. O que nós vamos ter que fazer é logo acima dele colocar em um p tag que diz, “Como você gostaria de ser contatado?” É apenas uma etiqueta p sentada em cima dela para ajudar a explicar isso. Meus botões emperraram lá. Não vá a lugar nenhum no momento. Isso são botões de rádio. Um pouco de tudo, você ou você. Grande coisa a lembrar, a grande vantagem para selar em mente é que estes precisam ser os mesmos. Isso é realmente verificar e se você não se chamar, então você chama isso de outra coisa. Dois, o que acaba acontecendo é que você tem duas coisas que podem ser ligadas e não podem ser desligadas nunca. Porque não há alternância. Mais uma coisa antes de irmos, terminei o vídeo. Eu tive que voltar porque cerca de meia hora depois eu percebi que isso aconteceu. Um pouco de linha verde rabiscada e isso vem de um plug-in que temos rodando chamado dica HTML. Basicamente, se eu clicar sobre ele e passar o mouse sobre ele, o e-mail deve ser único. As identidades precisam ser únicas. Este e-mail de identificação é único para este pequeno grupo que fizemos porque o outro é chamado de telefone. Mas lembre-se mais cedo, realmente usamos o e-mail id já. Porque isso precisa ser único. Vês este pequeno aviso aqui em baixo. Está me dizendo que deve ser único. Me dizendo que está online 95 e seu personagem 60. Noventa e cinco e uma pequena linha de rabugento. Isso pode ser chamado de e-mail 2, desde que seja exclusivo e seu rótulo precise corresponder a ele, bem como, o valor não precisa corresponder. Poupe-o, agora terminamos com botões de rádio. Vamos para o próximo. 77. Como criar um menu de formulário suspenso para um site em HTML: Ei, todo mundo. Este vídeo vai ser sobre menus suspensos. Temos que escolher um, começar com um. É muito empolgante. A versão curta é, basicamente, é uma tag chamada Select e você tem esses valores de opção, e é isso que constrói seu menu suspenso. No final disso, vamos lançar um par de tipos de entrada porque não vamos passar por cada um deles já criado, porque seria um vídeo muito longo, mas vamos olhar rapidamente para o seletor de datas e seletor de cores porque isso é excitante. Faça-o funcionar. Você tem que escolher uma cor bonita. Vamos trabalhar como fazer o menu suspenso. Não é difícil, vamos entrar agora e descobrir como fazê-lo. Vou colocá-lo dentro do meu invólucro div, invólucro de entrada. Escreva isso muito tempo para digitar sempre. Portanto, ele é chamado Select. É estranho. Não é uma lista suspensa. Não é um valor de entrada como a maioria dos outros, é chamado Select. Dê um nome e identidade. Isto é como um nome genérico para a coisa toda. O meu será o condado em que você está. Diferentes condados na Irlanda. Até o condado. Vou usar o mesmo nome para a identificação. Legal. Agora, dentro deste estão os valores para o menu suspenso. Estes são chamados de opções. Então, as opções dão um valor. Isto é o que vai chegar até você no e-mail. Então o valor para este vai ser numérico. É para lá que me vou mudar. Naquele pequeno espaço aqui, é o que o usuário vai ver. Nós vamos ter um par deles. Ir para lá porque eu estava tentando usar meu atalho, peguei o errado. Então, estou duplicando a linha na qual tenho meu cursor selecionado mantendo pressionadas as teclas Shift e Option em um Mac e usando a seta para baixo em um PC. É Shift e Alt e usar a seta para baixo. Então eu tenho esses dois, Comando D para pegar os dois, porque eu vou usar o mesmo nome. Vou colocar em Galway. Estou escolhendo aleatoriamente em lugares onde nossas motos podem ir. Provavelmente alguém para Dublin também. Condado de Dublin. Esses são todos “drop-downs”. Vamos dar uma olhadinha. Lá vamos nós. Muitas vezes, estes são os únicos. Isso é fixe. Muitas vezes, embora você não tenha o primeiro pré-preenchido, você terá uma opção aqui. Você também pode duplicar. Estamos usando os mesmos dois atalhos usando a seta para cima. Isso é Shift Option em um Mac, Control Shift Alt em um PC. Vou dar a este um valor de não escolhido, escolhido, escolhido, escolhido. Por aqui, vou usar este como condado escolhido. A razão pela qual eu não fui escolhido é porque ele é o primeiro, ele vai ser o padrão, e se eles não escolherem nada, ele vai fechá-lo em vez de salvar. Vamos abrir de volta. Tendo um bom dia. Sua pré-visualização do navegador. Talvez eu tenha que fechar isso. Abrindo de novo. Então vamos dar uma olhadela. Então você pode ver que este é o primeiro, ele diz escolhido, escolha County. Se eles deixarem isso aqui, eu não quero um valor de volta da escolha County, eu quero um valor para voltar, eles não escolheram nada. Então nada é selecionado ou algo assim, se eu puder encontrá-lo. Onde você está? Legal. Você pode pré-preencher coisas, dizer que você queria começar com Galway, você não quer usar esta opção aqui, você só tem uma padrão. Você pode, aqui, depois das aspas, apenas dizer selecionado. Esse pode ser o que é escolhido primeiro e eles podem mudar isso. Verifica isso. Reiniciá-lo. Foi escolhido, vá embora. Deixar ir embora. Menus suspensos. Agora podemos passar para sempre por todas as diferentes opções. Então, o que você pode fazer é, há muito mais, eu vou apenas desviá-los rapidamente. Então, aqueles que eu uso, quaisquer dados rapidamente, eu não vou preencher todos os dados porque alguns deles não precisam de muito. Usa-os sem fazer nada, mas acho que quero dar-te uma ideia rápida dos que provavelmente encontrarás. Encontro acessível, enquanto data hora. Vamos salvá-lo. Vamos dar uma olhadinha. Então, data-hora. Eles podem escolher uma data e hora. Eles podem escolher uma cor. Não sei quando escolherão uma cor e não faço ideia de onde é. Que campo é esse? Data-hora. Eu usei um encontro. Não sei o que é esse. Deve ser mais valores. Mas há muito mais. O melhor lugar para ir e dar uma olhada é o lugar da escola W3. Forma da escola W3. Então, navegando neste site em termos de formulários, eu começo clicando neste botão aqui, digamos que eu vim, eu quero coisas sobre HTML. Então, tendo um olhar para o lado aqui, há um monte de diferentes subgrupos neste caso formas. Você pode começar no topo e dá-lhe estrutura de forma geral. Em seguida, ele dá-lhe os diferentes elementos que vão dentro dele, tipos de entrada. Você pode ver lá e eu vou explicá-los e como sua sintaxe funciona. Não com o meu sotaque de Qui, apenas escrito em texto simples, mas não podemos passar por cada um deles, mas você tem a idéia da maior parte disso. Coisas como nomes, valores, identidades, são importantes. Trabalhamos em rótulos. Eu acho que você tem o suficiente agora para sair e ser capaz implementar todos esses outros tipos de entrada. Isso é tudo para formulários. Nós vamos começar a estilizar as formas, porque há forma é horrível. Olhe para a nossa forma. Onde é que está? Pegue-os. São todos iguais. Não é bonito. Precisamos estilizar estes e fazer a parte do formulário parecer um pouco mais agradável. Vejo você no próximo vídeo. Nós vamos fazer isso. 78. Como estilizar caixas de texto e caixas de seleção de um formulário em um site em HTML: Olá, lá. Fato divertido, web design deixa você mais bonito. Totalmente faz. Não está realmente funcionando para mim pessoalmente, mas definitivamente está funcionando para este formulário. Forma feia, forma bonita. Exatamente o mesmo formulário apenas mudará o CSS. Há um direcionamento divertido que precisamos fazer para nos anexar a esses caras e estilizá-los. Vamos colocar algum espaçamento entre as coisas, rótulos com lacunas nelas. Faremos nosso botão parecer um pouco mais bonito. Atualizaremos o texto de amostra aqui. Vamos ficar mais bem parecidos. Começaremos com as caixas de texto aqui, o texto de entrada. Como é chamado? É o começo do meu formulário, então vamos começar todas as coisas dentro disso até. Está ficando muito grande. Aqui está o formulário. Este é o meu primeiro, não o rótulo, vamos falar sobre o texto de entrada. Para fazer isso em nosso CSS, precisamos adicionar alguma sintaxe especial. É entrada, mas então você tem que colocá-lo em colchetes, não colchetes encaracolados, colchetes. Você decide qual tipo de tipo é e, no nosso caso, é o tipo de texto. Você pode vê-lo aqui. Basicamente, estamos apenas digitando isso na entrada desses dois, o tipo é igual a texto. Apenas um formato diferente aqui em CSS, depois adicionamos nossas chaves, e é assim que o estilizamos. Primeiro de tudo, vou adicionar um pouco de preenchimento ao redor do lado de fora apenas para tornar a caixa de texto um pouco maior. Quero que seja 12 na parte superior e inferior e terei 20 e [RISOS] superior e inferior, esquerda e direita. Salve isso. Vamos dar uma olhada, e lá vai você, é aquele. Agora você diz: “Eu tenho que fazer isso também porque este tem um nome um pouco diferente.” Isso tem entrada do tipo e-mail. Podemos fazer é apenas copiar isso e colocar uma vírgula. Farei os dois. Só tenho que ter certeza de que este é um e-mail. Além disso, faça textarea enquanto estamos aqui. Agora não é exatamente a mesma coisa. Está estruturado de forma diferente. Lembre-se, esses tipos de entrada eram diferentes dessa largura do que fizemos textarea que é apenas sua própria tag. A mesma coisa acontece aqui. Nós apenas fazemos textarea e ela está lá. O que precisamos fazer? Quero estilizar a área de texto. Para dar uma pequena olhada. Parece bom, peguei meu estofamento. Vai ser melhor. Você pode dar larguras a essas caixas. Todos esses caras poderiam ter uma largura de, você poderia usar porcentagens ou pixels, digamos 40%. Lá vamos nós. Eles são todos 40% do espaço disponível. Os textos dentro dele. É bem pequeno e é a fonte errada. Podemos fazer isso também. Nós os visamos. Vamos dizer família de fontes, e usaremos a que já usamos. O que estamos usando? Estamos usando o Roboto, não o preenche previamente, vou roubá-lo. O corpo é Roboto. Muito obrigado. Vamos verificar. Agora é o Roboto só precisa ser um pouco maior, tamanho da fonte. Vamos dar uma olhada no 1rem, ver como ele se parece. É o mesmo que o resto deles. Na verdade, eu poderia fazer isso. Eu faço isso um pouco menor? Sinto que se eu fizer isso, é bom como um designer ter isso como um pouco de hierarquia para, texto grande é o mais importante. Esta é a próxima coisa e, em seguida, esses caras diminuem outro tamanho de fonte. Mas as formas são notoriamente problemáticas para pessoas com deficiência visual. Estou diminuindo e é bastante cinza claro, estamos contornando alguns problemas de acessibilidade. Nós temos isso. Uma das coisas que pode estar te deixando louco é que isso está na mesma linha que isso. Isso depende de você. Existem algumas maneiras de corrigi-lo. Usamos esse invólucro, eu poderia dizer que, na verdade, o rótulo pode estar em seu próprio invólucro. Vamos fazer isso juntos. Só para mostrar as diferentes maneiras porque há momentos diferentes em que você precisa de ambos. Este rótulo pode sair desse invólucro. Há lá e tem o seu próprio. Você sobe aqui. Vou envolvê-los no meu, como chamamos isso? É chamado invólucro de entrada. Copie lá. Temos que embrulhar com abreviação primeiro e depois colocá-lo. Agora ele está em sua própria linha. Isso é no segundo. De repente, ficamos bagunçados em termos de HTML. esse é o nosso caminho. Vou mostrar-lhe uma maneira diferente. O que poderíamos fazer, mas provavelmente não vai funcionar, é que poderíamos atacar esses rótulos. Poderíamos dizer: “Etiqueta Eu gostaria que você estivesse em sua própria linha.” Isso é como eu pop quiz. Pause depois que eu fizer a pergunta e ver se você consegue resolver isso. Eu quero estar em sua própria linha, no momento em que está alinhado com esse cara. Como eu faria com que eles seguissem sua própria linha? Dê uma chance. Se você não tem ideia. Lembre-se de que vou exibir. Por padrão, ele está em linha, poderíamos dizer bloco de exibição. Todos os rótulos são exibidos em bloco. Isso vai funcionar, mas você chega aqui e você está, “Na verdade, eu queria esses caras ao lado”, não exatamente o que eu queria. O que posso fazer é dizer, vou deixar isso lá, mas em vez de usar o rótulo, vou criar meu próprio. Vamos dizer nova linha. Vou usar isso e apenas aplicá-lo como classe aos rótulos especificamente. Este em particular pouco antes da pequena marcação, vou dizer classe de nova linha. Um pequeno olhar. Esse cara tem sua própria linha. O que eu poderia dizer é que ele é nova linha com alguma margem na parte inferior de 20 pixels. Demasiado. Digamos que 10 pixels. Sim, isso funciona para mim. Certifique-se de fechá-lo. A outra coisa que eu poderia fazer é apenas parecer melhor, eu acho que com mais espaçamento entre eles, e provavelmente precisa de algum espaço depois desta tag p. Veremos isso em um segundo, mas vamos fazer isso. Eu posso reutilizar este e porque o mantive razoavelmente genérico. Eu poderia usar nova linha em todo o meu site, não precisa ser para este formulário específico. Posso dizer que quero isso por e-mail também. Antes que esse pequeno rótulo feche, você terá uma classe de nova linha. O que vem depois? Poderia centralizar mais laboratório, há alguns outros estilos que eu quero fazer. Quarenta por cento é grande o suficiente? Você pode fazer isso 100%. Onde está? Código VS? Nós nos estabelecemos para uma largura, todos esses campos para ter uma largura de, lá vai você. Eles atravessam e é 100% mais o preenchimento. Lembre-se de que adicionamos 20 de lado ou 30. Adicionamos isso mais os 100 por cento. Acaba indo longe demais. Outro teste pop. Como conseguimos isso? Poderíamos parar de minusá-la. Poderíamos menos. Posso decolar, podemos fazer com que seja 97% ou fingir. Lembre-se, havia uma propriedade que magicamente fez isso por nós. Ele tira o tamanho geral e desvantagens das margens e do preenchimento. Tinha um nome estranho, vou apresentá-lo novamente. Você se lembra? Pause, pense, faça um teste mesmo. É muito difícil de lembrar. Eu sempre esqueço, é chamado de tamanho de caixa, ir border-box. Espero que ele faça o trabalho para nós e lá vai você. Cortado o preenchimento. Isso é um bom, eu preciso adicionar um rótulo a este aqui, o que eu ainda não fiz, está tudo bem. Uma das coisas que eu quero fazer. Tudo isso parece bem. Faremos algumas coisas de fonte em um segundo, mas o espaçamento entre esses dois, fico feliz que eles estejam em sua própria linha. Vamos separá-los um pouco. Poderíamos trapacear. Meu cérebro preguiçoso instantâneo diz trapaça. Neste curso, somos como se não devêssemos mostrar a você como trapacear, mas vou mostrar a você a trapaça porque você vai se deparar com isso. Alguma outra pessoa preguiçosa o fará e você os ensinará. Você dirá: “Não acredito que eles fizeram isso.” Você coloca um comercial e coloca um espaço sem ruptura, ponto e vírgula. Sabemos que se colocarmos em espaços, eu excluirei isso. Se eu colocá-lo em um espaço como este , ele será ignorado pelo código. Ele não lhe dá espaços que retorna. Ainda é o mesmo, vamos desfazer isso, desfazer isso mesmo. Eu poderia ir ao espaço que não quebra e posso colar alguns deles, e isso vai empurrar. O único problema com isso é que você está fazendo isso no HTML e estilos é desagradável, mas funciona. [RISOS] Eu coloquei lá porque meu cérebro disse : “Isso parece melhor.” Então eu pensei, vou mostrar para você porque você vai encontrar nossos sites que as pessoas fizeram isso. Pessoas preguiçosas como eu, fazem isso por espaçamento. Devemos fazer isso em código. Nesse caso, vamos criar uma nova classe. Tenho algumas aulas auxiliares que uso. Vou chamar isso de muito genérico. Isso vai ser chamado de margem. Quero margem à direita ou à esquerda? Nem tenho certeza. Quero margem, vou aplicá-la ao rótulo. Margem à direita para empurrar para o outro lado. Vai ser chamado de margin-right. Vou chamar isso de um porque farei alguns deles. Este aqui vai ser, como você pode imaginar, margin-right. Vou colocar 20 pixels, basta conferir o que é esse. Vou usá-lo porque não confio minha ortografia ou na digitação pelo menos. Copie isso e vou passar aqui e aplicá-lo a este rótulo. Pouco antes de fechar, vou dizer que você tem uma classe deste. Quando você estiver copiando e colando, certifique-se de não pegar a parada completa porque a parada completa não é necessária aqui. Você deixa isso para dar uma olhada, não apareceu, não está funcionando. Às vezes, ele pode aparecer no HTML. De qualquer forma, há minha pequena aula lá, eu adicionei direcionado a ela. Se você quiser segmentar, digamos que já eventos, você tem muitos botões de opção. Você quer dizer empurre o espaçamento para longe daqui. Lembre-se de entrada e, em seguida , são colchetes. Então você calcula o tipo que você está tentando segmentar. Nós vamos fazer os rádios no momento como rádio tipo. É assim que você tem como alvo esses companheiros. Então vou dizer que quero um pouco de margem para a direita também, minha direita. Você pode ver que você pode ficar muito preguiçoso com os ajudantes. Você só digita mar para chegar perto e então eu comecei a digitar r e então isso é tudo o que eu precisava. Chegamos perto o suficiente disso. Quero apenas 10 pixels à direita deles. Só para abri-los um pouco porque nós simplesmente não tínhamos uma forma simples. Você pode ter uma grande forma gigante. A última coisa que vamos fazer é estilizar este botão de disparar. Nosso botão Enviar. Isso deve ser email, não mail2. Eu não tenho um e-mail. Botão Enviar. Agora você pode começar a estilizar o tipo de entrada enviar aqui, isso funcionaria. Não vamos ser preguiçosos. Vamos ser engenhosos. Vamos adicionar uma classe de é chamada mybutton? Já faz pouco tempo, não me lembro. Lá vai você. Agora, você notará que não é exatamente como o botão que tínhamos em nossa página inicial. É muito parecido. Chegamos perto, mas há alguns estilos que teremos que desligar o inn em particular para este botão. Para mim, está perto o suficiente. Mas você pode criar outro estilo e começar a aplicá-lo. Mas o botão Enviar tem esse contorno estranho, você terá que desligar e os cantos arredondados que você terá que desligar. Você pode criar outra classe. Comece com mybutton e adicione alguns estilos de borda de nenhum, cantos arredondados de zero. Só vou deixar o meu. Preciso de algum espaço embaixo dele. O que eu poderia fazer o formulário em geral, preciso de algumas coisas na parte superior e inferior. Eu poderia apenas estilizar o formulário. Eu poderia dizer formulário, por favor, você pode ter alguma margem? Usaremos resolução máxima, digitaremos margem e usaremos uma abreviação. superior e inferior serão 40 pixels e a esquerda e a direita serão zero. Vê como isso vai? Um pouco do topo, um pouco da parte inferior. Estou feliz o suficiente com isso. Você está feliz? Estou feliz. Temos um formulário. Estou perdendo um rótulo? Tudo bem, nós o estilizamos. Temos um doce menu suspenso. Você também pode estilizar isso. Mais uma vez, basta inserir. Na verdade, é diferente, é chamado select, não de entrada. Isso vai ser tudo sobre formulários. Acabamos de arranhar o serviço em termos de formulários. Fizemos um pequeno hack para algum PHP nos enviar um e-mail. Mas há muito mais como um coelho warren todas as formas. Mas espero uma boa visão geral. Vamos deixar os formulários lá por enquanto e te verei no próximo vídeo. 79. O que significa design de site responsivo: Ei aí, amigão. Este vídeo é o início do nosso próximo projeto. Este é o Projeto 3. Nós vamos construir um site de portfólio muito rápido, muito simples e a grande coisa abrangente para este aqui vai ser sobre essa coisa chamada design responsivo, e vamos falar sobre isso em um segundo. O tema geral para o nosso primeiro foi, isso estava apenas nos fazendo começar. Foi muito simples. Eu fiz isso muito simples para que pudéssemos apenas obter o básico. Então aprendemos uma tonelada neste segundo projeto. Aprendemos muito e o tema principal para este primeiro foi a introdução. O segundo foi, na verdade, o grande pedaço dele era Flexbox, então se acostumar com isso e nós jogamos em tantas partes diferentes, esse tipo de nitty grisalho de fundação, HTML e CSS. Este próximo projeto, pelo menos, vai ser tudo sobre responsivo. O que significa ser um design responsivo? Muito literalmente, isso significa que seu site vai responder a diferentes tamanhos de dispositivos. Em uma tela de desktop, ele vai ficar assim, mas quando ele é carregado em um tablet, ele vai fazer melhor uso do espaço real da tela. Sim, é assim que usamos. Uma imobiliária de tela. Isto é provavelmente melhor para um tablet, retrato e as mudanças são nós vamos ir de três para baixo e três para este aqui, que é dois para cima e quatro para baixo. Você vai notar que estamos faltando um porque nós tínhamos números irregulares lá. Vamos desligar um para fazer o melhor uso da tela. Imobiliário também vai fazer isso. Isso é sobre você esperando. Você é como, “Como é que nós não fizemos o grande menu, ainda?” próxima imagem está chegando neste pedaço de vídeo, Projeto 3, um pouco mais tarde. Quando estamos indo para projetar este para o meu [inaudível] e ele vai apenas para um fluxo de um vai transformar aquele cara que nós desligamos novamente, nós temos nove deles. Novamente ele vai marcá-lo na tela. Isso é um design responsivo. Deixe-me mostrar-lhe um que estou treinando. Vamos dar uma olhada no meu site. Trazer yourownlaptop ponto com, isso é o que parece em uma tela gigante. Eu tenho muito espaço para brincar, então eu posso ter um monte dessas miniaturas, eu chamo-as de cartas. Em seguida, o fundo aqui muitos depoimentos. Mas quando chegar a um tamanho menor, vamos descer. Veja o que acontece, então houve uma pausa para verificar esses cartões. Pode caber seis em uma tela grande. Mas quando você chegar até a tela mais pequena, apenas quatro. Não melhorou, três, dois. Eventualmente, se você for para o celular, eu não posso arrastá-lo para o celular. Eu preciso de um clique com o botão direito, tenho que inspecionar o topo aqui e ele vai, você vê, lá está a nossa palavra pode ir pegar o iPhone 6. Veja, eu reduzi-a a uma das cartas que você pode percorrer e um dos pequenos testemunhos aqui. Nós mudamos muito do tamanho da fonte apenas para fazer o melhor uso de nossa tela real. Feche isso. Isso é design responsivo apenas mudanças. Agora, para fazer isso acontecer, as duas coisas principais que vamos aprender nesta pequena seção é algo chamado uma consulta de mídia e vamos usar Flexbox novamente e um pouco mais adicionar ao nosso conhecimento de Flexbox e em menor grau, imagens responsivas que ajustam tamanhos, mas realmente as grandes são consultas de mídia e, em seguida, Flexbox. Ajustar a estrutura realmente, para que saibamos o que é Flexbox e media query é apenas com o site, pede ao navegador para dizer o quão grande você é? Porque ele precisa perguntar toda vez que você precisa dizer, “E você?” Ele diz, eu sou digamos, 700 pixels de diâmetro e, em seguida, lança algum CSS baseado em quão grande ele é e isso é chamado de media query. Se isso não foi uma grande explicação, é um pouco mais fácil apenas fazê-lo, e é isso que vamos fazer salto no início deste tutorial, eu preciso fazer um pouco de imagem. Está cortada neste. [ inaudível], grande web design. Tudo bem, então nós vamos construir este aqui. Este site bonito portfólio para designer de logotipo. Quais são algumas outras coisas legais que você pode ver repetições de fundo? Realmente, trata-se de ajustar para diferentes tamanhos de dispositivos. Sinto que estou divagando agora. Espero que estejas entusiasmado. Estou entusiasmada. É bom entrar em um novo site. Estou farto do cor-de-rosa. Vamos entrar e construir um website de portfólio de logótipos. 80. Como alterar a cor e o tamanho do layout de um site com tamanhos diferentes usando consultas de mídia: Vamos arrumar as coisas primeiro. Precisamos arrumar nosso último projeto. Já não estamos a fazer o Projecto 2, estamos a fazer o Projecto 3. Vou abrir um arquivo, vou criar uma pasta na minha área de trabalho, Projeto 3. Clique em 'Abrir, perfeito. É uma maneira de começar. Nós vamos criar, eu vou fechar o Welcome, e eu vou fechar o Outline. Eu vou fazer dois arquivos, arquivo novo, salvar este. Você está se acostumando com isso. Você é tipo, eu sei como fazer isso. Vamos para Arquivo, Salvar, vamos criar outro, arquivo Novo, salve-o. Vamos chamá-lo de style.css. Conecte os dois para melhorar, colocar ponto de exclamação, retornar, abaixo do título, vamos escrever um link. estilo CSS corresponde ao mesmo nome e arraste isto para aqui, pronto para ir. Exceto que não mudamos o título, sei que precisamos. Vamos fazer isso bem rápido. Tudo bem. Aí está o meu título, está tudo pronto para rolar. Excepto Ver, Word Wrap. Isso parece mais agradável. A primeira coisa é que precisamos adicionar algo ao estilo. No seu body tag aqui, eu vou adicionar apenas um h1 simples, e dentro desse h1 basta adicionar um pouco de texto. Aqui vamos estilizá-lo. Nós vamos estilizar o nosso h1 e nós vamos dizer que você é uma cor muito simples de, encontrar cor louca, obras verde-limão, ponto-e-vírgula. Fizemos este teste de cargas de lates no navegador. O que acaba acontecendo normalmente é que isso não aparece se você começar um novo projeto, você pode simplesmente começar isso acontecendo novamente clicando com o botão direito do mouse em qualquer lugar em seu HTML, e ir aberto com servidor live, faz a mesma coisa exceto, onde está o meu? Onde ele foi, lá está ele. Legal. Eu tenho um grande pedaço de h1 que é verde limão. O que eu gostaria de fazer agora é configurar um gatilho que diz que se o navegador é deste tamanho, mude a cor. Para fazer isso, adicione algo chamado de consulta de mídia. Então, uma consulta de mídia, pelo menos, vai para o seu CSS e se parece com isso. É que media query, agora a coisa estranha sobre VS Code é normalmente que é realmente útil com a sugestão de lotes de código. Eu confio tanto nisso agora. Ele não faz para consultas de mídia para algo que não esteja na lista de recursos no momento. Espero que no momento em que você chegar aqui, ele já foi atualizado e tem muitas coisas úteis. Porque a sintaxe é um pouco estranha, mas não é algo como fizemos antes. Essa coisa aciona, a mídia, e então está procurando uma largura máxima. O que vamos usar cólon e, em seguida, um tamanho. Ele está procurando uma largura máxima de nós vamos usar 768 pixels. É apenas um tamanho de tablet muito comum, tablet em retrato. Em seguida, coloque chaves encaracoladas e coloque sobre sintonizar, é isso. Ele vai dizer, tudo bem eu estou olhando para fora e verificando o tamanho do navegador de zero até uma largura máxima deste. Agora escolhemos 768, você pode usar qualquer tamanho que quiser. Seja qual for o seu alvo, se estiver a ver isto daqui a 10 anos, provavelmente não há hipótese de um tablet ainda ser deste tamanho. Provavelmente nem são tablets, carros voadores esperançosamente. De qualquer forma. O que vamos dizer é uma vez que isso é acionado, então basicamente isso é quando tudo está sendo combinado, é de 0-768 acionar todo o CSS aqui. O CSS que vamos escrever é um h1, eu vou colorir, nós vamos escolher uma cor, laranja escuro. Olhe para isso. Vamos fazer um teste primeiro. Vamos verificar o nosso navegador. Tem isso, ele é verde, mas se ele ficar abaixo do 768, você está pronto? Legal. Há todas as consultas de mídia. Essa é a estrutura real que vamos construir o resto do nosso site responsivo. Vamos ligar e desligar as coisas, cavar os tamanhos ao redor, desativar a navegação, tudo baseado nessas consultas de mídia. Se o seu está funcionando, tenha muito orgulho de si mesmo. Quando eu resolvi isso pela primeira vez, eu era como uma fumaça sagrada, olhe para mim. Vamos entrar em algumas coisas. Uma é, vamos adicionar alguns comentários para que saibamos o que estamos fazendo, e nos livremos de todos os seus retornos e coisas assim. Eu ia usar larguras de banda, não vamos usar larguras de banda. Tudo bem acima desta consulta de mídia, vou adicionar alguns comentários. Lembre-se que é barra de comando em um Mac, barra de controle em um PC dá-lhe o comentário, e esta vai ser a minha visualização tablet. Agora, uma coisa que você não tem ou certifique-se de ter se você estava tipo, ainda não está trabalhando, por que não está funcionando? Você tem que ter certeza que a sintaxe está bem, às vezes meus alunos, eles escrevem com em vez de largura. Ele precisa ter um cólon lá, o tamanho, você precisa de colchetes duplos, bem, você pode ver chaves lá, que terminam lá. Este pequeno h1 tem suas próprias chaves encaracoladas. Você pode fazer isso. Bem, meus retornos podem ser apenas, eliminando você. Parece um pouco mais agradável assim. Ainda funciona. Legal. Vamos fazer isso, vamos fazer a visão móvel a seguir. Se isso é móvel e isso é tablet, o que faz isso? Esta é considerada a visão global. O desejo vai conseguir que eu bata, como aquele. De qualquer forma, isso é chamado de visão global. No nosso caso, também conhecido como a visualização da área de trabalho. Vamos falar sobre dispositivos móveis primeiro versus desktop primeiro em pouco tempo, mas tudo aqui é como o material genérico. A menos que seja, isto era menor. Sete sessenta e oito ou menos, faça isso. A mesma coisa para um celular, vamos trapacear, e vamos chamá-lo de eficiência. Eu vou dizer isso, mas em vez de dizer 768, vamos usar um celular muito comum em tamanho retrato. Quatrocentos é o que eu uso, muitas pessoas usam 360, 320, 380, é alto porque os telefones celulares são todos tamanhos muito diferentes. Eu uso 400, neste vídeo, porém, não podemos usar 400 por causa deste problema. Eu posso arrastar meu navegador mais curto, magro o suficiente para ser 400 pixels. Só não me deixava mais. Costumava, costumava andar por aqui, mas a nova corrente não vai. O seu pode, você pode estar bem, mas no momento em que temos que ir, eu ia fingir que são 500, para que possamos testar aqui localmente. A outra coisa é que eu vou mostrar-lhe em um vídeo chegando em um segundo, como testar em todos os dispositivos móveis, mas por enquanto, apenas fazê-lo 500. Mas você pode colorir? Algo contrastando tudo o resto. O que temos? Vamos colocar em preto, lá vai você. Isso é muito contrastante. Você está pronto para fazer nossa grandiosidade responsiva? Já é muito pequeno. Finja que não viu isso. É verde, laranja e preto. Esta é uma configuração muito simples dele, nós vamos ligar e desligar tags div, vamos jogar com o tamanho, mas eu espero que você esteja orgulhoso de sua pequena configuração legal. Realmente simples, não terrivelmente complicado do lado, e estamos fazendo três consultas de mídia, é com você. Quando eu sou preguiçoso e eu estou apenas fazendo um site bem rápido, eu vou apenas fazer esses dois. Eu vou dizer, eu não me importo com tablet, eu vou apenas fazer global e móvel. Isso é ruim, mal praticado. Boa prática se você estiver trabalhando em uma empresa realmente grande e maior como desenvolvedor ou designer, e você pode esperar que faça cinco ou sete tamanhos diferentes para tirar o máximo proveito de cada visualização. Mas se você está fazendo um site rápido para um amigo que está pagando em cinco, ele está apenas recebendo um celular e um global e eu não estou fazendo mais nada. Uma última coisa antes de eu ir é isto, vai realmente precisar disto. Essa coisa é meta nome, viewport. Isso vem para nós por padrão quando estamos usando esse ponto de exclamação extravagante, e depois retornar. Há outras formas de fazer atalhos de imagem. Você pode fazer html5 e clicar em Tab. Isso funciona nisso? Não, html:5, isso vai fazer a mesma coisa e ele obtém a viewport um pouco diferente. Não que eu possa ver o quê. Mas às vezes este viewport não é colocado em por padrão onde você pode estar fazendo no tutorial de outra pessoa, eu estou desfazendo então ele volta, aqui estamos nós. Certifica-te de que isto está aí dentro. Precisamos apenas dizer ao navegador qual é a visão inicial, que toda essa capacidade de resposta funcione. Tudo bem, é isso. Eu quero explicar isso apenas mais uma vez, então o fluxo CSS vai. Tudo bem, todo mundo está na H1. Na verdade, vamos fazer um último pouquinho só para realmente levá-lo para casa. Digamos que h1 vai ter uma fonte da família de fontes de Courier New. O que acaba acontecendo é, começa aqui, pessoal, h1 sua cor de verde limão, sua fonte de Courier chega aqui e diz, Ei, então vamos dizer que movemos o navegador para HTML5. Isso é puxá-lo para cima daqui. Vou deixar isso na aula porque você gosta, Ei, isso é um HTML5? Desligue-o, ligue-o novamente. Ei, isso funciona. Estamos dizendo, ser verde e Courier a menos que os navegadores mudem. O que acontece é, ele chega aqui e diz, o navegador é menor que 768, então ele diz, eu contradizerei você, então eu vou substituí-la porque eu sou mais específico e estou mais abaixo do CSS. Mas chega ao H1 e diz: “Tudo bem, uma família de fontes, não há nada contradizendo-a aqui, então flutua através dela. Não foi tocado porque não há mais nada aqui que diga font-family, ele chega até aqui e diz: “ Ei, eu deveria ser uma fonte diferente aqui? Diz: “Não, eu não vou te dizer nada. Se ele vai para o topo, ele vai flutuar todo o caminho através. Se eu tiver a família das fontes aqui em baixo, vai fazer algo muito diferente. Preciso colocar meu suporte para baixo, apertá-los lá dentro. Então, fazer isso aqui é muito diferente. Vai começar, e isso só vai ser acionado quando é desse tamanho? Vamos dar uma olhadinha. Chega até aqui e ainda não foi ativado, porque esse gatilho, essa consulta de mídia não foi ativada, o mesmo com aqui, mas aqui embaixo você pode fazer algumas mudanças realmente grandes. Se você quer que seja global em tudo, a menos que seja dito o contrário, faça-o nesta parte superior aqui. Ele não precisa de uma consulta de mídia, eu só adicionei esse bit para torná-lo um pouco mais fácil explicado. Tudo bem, como estamos indo? Consultas de mídia? Eu estou feliz, você está feliz. Se sua sintaxe não estiver funcionando, verifique os arquivos concluídos, eles estarão nos arquivos de exercícios e verifique o nome desse vídeo. Haverá um pedaço correspondente de código lá dentro, que se parece exatamente com este. Tudo bem, para o próximo vídeo. 81. Como testar o site em um tablet ou celular com o Visual Studio Code: Tudo bem. Precisamos testar essa coisa. Enquanto estamos trabalhando, muitas vezes, é apenas mais fácil de testar em um navegador, onde está, como temos feito, mas precisamos de um falso que um pouco mais. Vamos emular um iPhone, em tablet e desktop através do Chrome, faremos isso em um segundo. Agora outra maneira que você pode fazê-lo é realmente apenas ter como um nome de domínio descartável e conta de hospedagem. Vá para o Blue Host, use a mesma conta que você se sente ao um novo nome de domínio chamado site de teste do Dan, algo em vez disso. Algo profissional se você vai mostrar isso a potenciais clientes. host azul irá dividir sua conta de hospedagem em duas partes para que você possa usá-lo. Você obterá diferentes detalhes de FTP de login, fale com eles sobre isso. Diga a eles o que você quer fazer, dois nomes de domínio, mesma hospedagem, e então você basta fazer o upload como nós fizemos anteriormente neste curso. Acabamos de fazer o upload usando o pequeno FTP deles. Você terá detalhes diferentes para isso, então você pode apenas testá-lo em qualquer coisa. Você pode simplesmente carregar esse site em seu telefone ou iPad, seu novo iPad, e apenas conferir dessa maneira. Outra maneira, a maneira mais oficial é usar um serviço de teste local. Não vamos passar por como configurá-lo neste curso, está um pouco fora do escopo. Se você estiver no Mac, é muito comum usar MAMP. É Microsoft Apache-MYSQL e PHP. Eu li isso lá de baixo. MAMP, já é palavra. Há XAMPP, há WAMP. Em um Mac MAMP seria o mais comum em um PC. É o WAMP ou XAMPP, provavelmente XAMPP. Basicamente é um software que é instalado em seu computador e permite que você falsifique um servidor em sua máquina como se fosse dizer, host azul, mas ninguém mais no mundo pode vê-lo para que você possa mantê-lo agradável e perto. Mas houve um pouco de aborrecimento para prepará-lo. Mas em termos de testes, maioria das pessoas apenas testará localmente no navegador e emula enquanto [inaudível] e só fará testes oficiais um pouco mais tarde. No momento em que estávamos apenas fazendo isso, estamos fazendo a opção de arrastar antiga e isso funciona. Estou fingindo que sou um desktop, estou vagamente fingindo no meu tablet e agora sou quase um celular. Para contornar isso ou emular corretamente é clicar com o botão direito do mouse em qualquer lugar ou se envolver para inspecionar ou ir para Exibir desenvolvedor e ir para Ferramentas do desenvolvedor ou inspecionar elementos, ou esses dois, o que estamos procurando é algo , esta pequena barra de slides provavelmente todo o caminho até aqui para você. Eu não tenho certeza, mas você pode ter que fazer é eu não posso como voltar a zero absoluto. Tentei redefini-la para este curso, mas não sei exatamente qual é o padrão. Aqui no topo, defina um responsivo se ainda não estiver e você pode arrastar esta pequena linha dupla até aqui e você pode ver que eu posso arrastar um passado, eu posso arrastar um pequenino para que eu não tenha que usar mais esses 500. Eu posso realmente obtê-lo para algo um pouco melhor para testar como total 400. O legal é que você pode ligar que pode ser útil está aqui em cima, veja esses pequenos pontos, estes são todos úteis. vamos ativar “Mostre-me as consultas”. Está me mostrando minhas perguntas de mídia, essas são as que eu adicionei. Você pode ver se eu [inaudível] acima deles, é o 768, é 400. Você pode arrastá-lo pelo menos, você sabe exatamente quando essa coisa é acionada. Eu acho isso muito útil quando eu abri alguém site e você gosta de quantas consultas de mídia lá fora e você pode vê-los todos. Você pode clicar sobre eles também, para saltar para fora, para ter um pouco de olhar através das diferentes opções. Como é que as coisas úteis são estas? Dê uma olhada nisso, parece um iPad Pro. Ele amplia isso um pouco porque quer mostrar a coisa toda, mas é a largura certa em relação ao exterior, 400, 600. Portanto, o iPad Pro tem cerca de 1000 pixels em 1024. O que mais temos, vamos ver, eles não têm todos aqui. Você pode editá-los e adicionar o seu próprio. Eu sei que isso é razoavelmente velho, ele tem todo o novo iPhone, mas não os novos pixels e não a nova galáxia, então vamos encontrar X. Aqui está a idéia. Porque ele está tentando encaixar tudo em sua escala ele para baixo um pouco então você pode apenas mantê-lo em 100 por cento. Então você não é do tipo, isso é o que nosso [inaudível] parece estranho , diminuiu 41%, você pode dizer que na verdade só quer vê-lo no tamanho real no meu iPad Pro. Estrangulamento, você pode entrar nisso. Se você colocá-lo em baixo no celular e redefinir agora o que ele vai fazer é tentar e imitar quanto tempo ele levaria em uma conexão de internet realmente ruim e isso sou eu. Ou podemos virar o iPad Pro. O que mais podemos fazer? Outras coisas úteis, quadro do dispositivo. Aqui nós estamos realmente vai olhar como, eles realmente eles têm, não sei mesmo se eles têm um quadro de dispositivo, onde é mostrado, quadro de dispositivo, não tem para o iPad Pro, é ir para o iPhone 4. Parece que tenho essa. Talvez eu tenha que ligá-lo novamente e esconder o quadro do dispositivo. Certeza do quadro do dispositivo. Isso funciona todas as vezes que eu faço isso. Ele terá a imagem em um iPhone ou no exterior. zoom, talvez precisem diminuir um pouco. Vai funcionar para você, eu prometo. Funciona, talvez, outra hora. O que mais? Não é tão importante, porém, Ele só vai se parecer com um iPhone. Você pode fazer capturas de tela. Ratio de pixel, falaremos sobre mais tarde. Um tipo de dispositivo, eu não preciso disso, é isso. Só estou lendo, você sabe como fazer isso. Essa é a maneira super fácil de imitar o que vai parecer e é isso que vamos usar cada vez mais, especialmente quando começamos a fazer coisas como celular. Agora a outra coisa é que isso pode não parecer exatamente o mesmo quando você está fazendo isso. Você pode estar fazendo isso no futuro com os carros voadores. Isso pode não estar nos lugares certos, mas provavelmente será ativado em um lugar semelhante, na exibição e alguns desses botões podem ter mudado e ser atualizado, mas o núcleo dele estará lá você pode decidir Google onde Está tudo mudado para. O Google gosta de mover as coisas. Isso é tudo para este vídeo. Vamos para o próximo. 82. Como alterar o layout de um site responsivo para dispositivo móvel vs. desktop: Ei, neste vídeo vamos levar nossas novas habilidades de consulta de mídia junto com algumas de nossas habilidades de flexbox passadas. Para fazer isso, vá da vista de desktop onde é três curso, você está pronto para tablet dois e celular um. Agora esta é a capacidade de resposta adequada, mas começamos a mudar a estrutura de um site para fazer melhor uso deste estado intermediário da tela disponível. Vamos entrar no código VS e descobrir como fazê-lo. Primeiro passo, vamos nos livrar dessas coisas. Não precisa do h1, não precisa do estilo. Em seguida, vai deixar as consultas de mídia. Quando você estiver excluindo o h1 na consulta de mídia, não exclua os segundos colchetes. Porque ele vai ter onde o navegador é muito inteligente e diz, “Uau, estou perdendo isso, mas eu ainda vou trabalhar. Certifica-te de que não os deixamos. Vamos adicionar um contêiner. Lembre-se contêineres, nós aprenderíamos onde ele se sente como não deve haver como uma tag HTML5 especificamente nomeada como uma div e cabeçalho não é, temos que chamar uma classe chamada contêiner. É para aqui que tudo vai dar. Vamos estilizar este recipiente. Vamos fazer tudo isso no Global. Vamos dizer “contentor”. Eu gostaria que você fosse. Colocamos uma cor de fundo e primeiro certifique-se de que está realmente aparecendo cor de fundo. Estou farto destas cores. Vou escolher o meu próprio clicando nele e, em seguida, lidar com o seletor de cores. Cor de fundo, vamos pré-visualizar e verificar se está funcionando. Nada está funcionando. Por que não? Porque não tem altura. Eu sabia disso. Nós precisamos de uma altura e nós não vamos usar como altura regular e que nós vamos usar min-height, em altura mesmo nós vamos jogar em 500 pixels apenas para que haja alguns chegar a ele. Lá está ele ali. Isso não é, pode ser de qualquer tamanho. Na verdade, eu provavelmente iria parar de construir sabendo que ele vai aparecer em algum momento, mas é largura para as aulas. Vamos adicionar uma largura como fizemos antes. Vamos dizer uma largura de 1.024 pixels de largura. Agora, o problema de fazer isso, uma largura por si só como essa é um tamanho absoluto. Vai ser sempre 124. Eu não me importo se você é um celular ou tablet. O que vamos fazer é dizer que você pode ser um máximo de até isso porque isso é decidido do meu jeito. Oh, essa é a largura. Lá vamos nós. Tendo problemas com o computador. Uma largura máxima só vai dizer, vá até isso, mas não mais, mas você pode ficar menor porque esta é a largura máxima. A última coisa que faremos é colocá-la no centro. Você pode se lembrar o que era isso e que era margin-esquerda e direita ajustado para auto? Vamos usar o nosso atalho. Nós vamos para a margem para o topo e o fundo vai ser zero, mas a esquerda e a direita, pode ser auto. Este é o espaço entre eles. Isso deve funcionar bem. É o meu contentor. Eu agora dentro deste recipiente, vou adicionar um monte de blocos que você viu lá dentro. Até agora nós os chamávamos de cartões e alguns casos, caixas. Neste caso, vamos começar a chamá-los de cols, abreviação de coluna. Por nenhuma boa razão, é não gostar de uma tag predefinida aqui. É muito comum usá-lo. Quando começamos a olhar para as coisas mais tarde, algo chamado bootstrap, eles usam a palavra col como uma caixa em vez de caixa ou título do cartão. Também temos o hábito de fazer isso. Eu quero 10 deles e eu quero dentro daquelas caixas que eu quero h1. Vou tentar impressionar-te com alguma imagem. O que é que nós queremos? Queremos um coronel. Dentro desse col, o maior que o suporte e dentro dele vai ter um h1. Vou te mostrar outra coisa chique. Se você colocar em chaves aqui e dizer caixa de célula lá, as chaves vai colocar dentro de que h1 vai colocar algum texto como texto simples velho chamado caixa. Isso é metade do que eu quero. As chaves e 10. Isso é o que eu quero. Mas se eu fizer vezes 10, não vai funcionar porque vai me dar um col e depois 10 h1s. Lembra-te, já fizemos isto antes. Coloque-o entre parênteses. Codificação ajudou a colocar dois neles. Tudo isso para estar funcionando e você é que não valeu a pena e totalmente não valeu. Acho que te estou a habituar a esta sintaxe, mostrando-te coisas fixes e úteis, como pôr chaves. A outra coisa estranha sobre isso é que uma delas, está me dando uma boa estrutura, mas na verdade parece um pouco melhor se eu fizer isso pelo caminho mais longo. Vou fazer o Col e vamos usar o caso certo. Vou apenas duplicar. Parece mais fácil, neste caso. O Col aqui dentro é um H1 e isto vai ser uma caixa. Isso é o que eu queria. Legal. Para duplicá-lo, mantenha pressionada a tecla de opção no Mac e na tecla Shift e pressione a seta para baixo. Essa é a opção Shift seta para baixo. Isso foi para um Mac. Se você estiver em um PC, é Alt, Shift seta para baixo e você deve contar. Eu não contava entre eles. Vou adicionar numeração a eles. Isso vai ajudar a mim e a maneira chique que que eu conheço para fazer isso, exceto que eu vou olhar para que isso não terminou bem. Deixe-me pegar o número certo também. Havia apenas seta para baixo e começar a digitar. Demos uma olhada no que temos. Um monte de caixas. Agora vamos estilizar essas caixas. O chamado col, aqui meu global, eu vou dizer ponto col. Você vai ser uma cor. Não, você precisa ser uma cor de fundo. Cor de fundo. Eu vou escolher qualquer cor para que eu possa clicar sobre ela e escolher uma cor que eu gosto. Não faz nenhum propósito real deles. Lá vamos nós. Escolha um cores agradáveis em. Nós armazenamos o col vários olhares, vamos dar-lhe uma largura e uma altura. Desculpe, vou primeiro. É só fazer isso porque eu não lhe dei nenhuma dimensão. Vamos dar-lhe uma altura mínima de, sei lá, 200 pixels. Legal. Vamos dar uma largura. Porque eles estão ocupando a coisa toda, vamos ver se a largura vai corrigi-lo. Em vez de fazer uma largura máxima ou uma largura mínima, poderíamos fazer tamanhos absolutos e parar de jogar com a largura máxima. Mas vamos usar porcentagens, que é basicamente a mesma coisa, porque não é um tamanho fixo. O que eu quero neste caso é, vamos olhar para a nossa margem. Esta é a área de trabalho. Eu quero que seja sobre isso, então três de frente, e dois de frente e um de frente. Tem 100 por cento de largura. Este vai ter 50% de largura, isto ia ser 33,3. Vou deixar um pouco de espaçamento entre eles, pode fazer isso com 50% de diâmetro. Olha, não vai funcionar. A razão pela qual não vai funcionar é, por que eles estão empilhando um em cima do outro e não a lado ou em linha. Você tem isso. Poderíamos dizer colunas são display inline, e você estaria totalmente certo, bloco inline. Isso funcionaria, mas o que vamos usar é voltar ao nosso Flexbox. Lembras-te do que podíamos fazer com o Flexbox? Sobre exibição, e vamos usar o Flex. Vai energizar as coisas para nós. Oh, eu fui para o errado. Tem que ser o pai. Você se lembra disso, então? Não posso testar para você. Vamos fingir que foi um teste. Você o aplica na contenção, então, se aplica a todas as crianças, quais desses cols. Então, como agora, esse tipo de coisa funciona. Por padrão, ele apertou todos os 10 deles na mesma linha, e tornou 100% do pai. O que eu gostaria de fazer é realmente fazer envoltório flexível, e que tipo de envoltório? Apenas o velho embrulho normal. Guarde isso, incrível. Os 30%, eles estão embrulhando. Ok, então, 30, 30, 30, chegamos a 90, deixando aqui uma lacuna. Então, algumas coisas, na verdade, antes de irmos, embrulhe a ré. Então caixa 10 está no topo, eu nunca uso isso, botão que parecia. Senti que queria compartilhar isso lá. Agora o que eu quero fazer é colocar o espaçamento dentro Podíamos brincar com margens, mas lembras-te da coisa extravagante que aprendemos mais cedo? Podemos justificar o conteúdo, e vamos usar “Espaço entre”. Aqui está. Você vai vê-lo aqui. Eu tinha que apontar para você antes, mas nós tínhamos um fundo branco, então o espaço ao redor é uniformemente de ambos os lados. Eu nem quero isso. Eu sempre quero espaço entre eles. Vamos adicionar um pouco de preenchimento ao fundo deles. Então as chamadas, vamos ter um pouco de preenchimento, margem inferior de 40 pixels. Tudo bem, parece bom. A coisa boa sobre eles, por causa dos 30%, eles são responsivos por si mesmos. Eles vão para uma largura máxima, mas eles podem ficar menores. O conteúdo fica menor, mas eles não podem ultrapassar isso. Vai funcionar para nós no momento. Você poderia projetar para um tamanho um pouco maior, e isso depende do seu público, mas você pode estar projetando um grande site para pessoas que simplesmente nunca vão vê-lo. Eles podem não ser muitas pessoas que têm essa exibição de área de trabalho gigantesca. Tudo bem, isso é tudo. Agora estou pronto para ajustá-los para as diferentes consultas de mídia. Por isso, aqui em baixo, vou usar a mesma coisa. Então, Col, em nossas chaves. Eu vou dizer, Col, o que você vai fazer a largura. Então a largura aqui em baixo vai ser uma porcentagem diferente. Portanto, lembre-se de 50% para a visualização do nosso tablet, mas um pouco menos para isso. Então talvez 45%. Você não precisa reiterar coisas, como justify, ou Flex wrap, porque já está globalmente aplicado a tudo. Então vamos dar uma olhadela. Muito bem, então, vamos usar a nossa fantasia adequada, clique com o botão direito, inspecionar. Vamos mostrar nossas consultas de mídia e, em seguida, ativado por padrão, mostrar, mostrar. Estamos lá de azul. Vamos para este tamanho maior. Não está se ajustando. É por causa disto. Eu o levanto para o iPhone 4, e isso não mudará. Clique nele para responsivo, e ele mudará. Então vamos. Visão grande, três caixas, vá para a pequena. Isso é apenas 45. A lacuna é grande no meio lá. Talvez 47 seja uma porcentagem melhor, mas você entendeu. Fizemos isso com velhos H1s antes. Agora estamos fazendo isso com a estrutura do site, que é equipes para ser mais o que você faz, e nós fizemos isso para tablet. Tablet, desktop, tablet. Mobile, vamos fazer isso a seguir. Então vamos olhar para a nossa consulta de mídia aqui. Ainda és tu. Vamos colocar 100%. Então nós não temos nenhuma lacuna, e ele vai tipo de preenchê-lo provavelmente. Aqui está. Fique um pouco menor, maior. Três, dois, um. Como somos bons. Certo, e esse é o tipo de grande vantagem para este vídeo, é que estamos usando exatamente a mesma coisa. Tivemos que fazer um estilo para que parecesse um site. Fizemos algumas caixas, mas para fazer isso com estrutura, tudo o que realmente precisamos fazer é adicionar esses dois bits, realmente, nós só precisamos desses dois para colocá-los na linha, e depois embrulhar para a próxima linha. Então dissemos, com um tamanho diferente, eu quero mudar isso. Eu não quero ser largura mais de 30%, vai ser 45. Então nós realmente não dizemos duas linhas, ou duas em uma fileira, nós apenas fazemos isso para que isso aconteça dando-lhe um tamanho que só permite que duas cabam. Certo, algumas coisinhas. Um que eu ignorei é feito aqui no Mobile. Você vai notar que ainda é uma linha branca ao redor do lado de fora. É uma das primeiras coisas que faço. Então, por padrão, agora você tem um padrão. O H1 é preto, e é Times New Roman, e é bom, grande e ousado. O mesmo com o corpo. O corpo tem uma margem global. Eu nem sei o que é, mas eu sempre passo, e digo margem 2-0. Para que não haja nenhum do lado de fora em qualquer vista. Eu não queria isso para nenhum deles, e ele chega lá de cima, dos lados, e para o celular, ele fica bem ao redor do lado de fora. É legal, e meio que se juntou, porque no celular cada pixel conta, então, você quer obter o máximo de detalhes que puder nessa largura. Fizemo-lo aqui, e estamos a lutar com os padrões. Então essa é uma oportunidade realmente boa para dizer, na verdade, eu estou fazendo isso, eu estou prestes a construir alguns resets CSS. Que tal eu usar o CSS reset que já temos? Já temos um, lembras-te? Nós temos um, então, eu vou deletar isso. Então ele vai voltar. Eu tenho um, lembre-se do [inaudível] Então eu vou apenas copiar, e colar isso, e usar isso. Então eu vou mostrar a vocês, o que eu faço agora, é procurar em meus arquivos uma pasta antiga. Eu vou entrar aqui, e dizer lembrar Projeto 2 na minha área de trabalho, houve que CSS reset. Vou copiá-lo do meu Projeto 3. O meu está na minha área de trabalho, preciso de alguns atalhos para acelerar as coisas. Vou colá-lo aqui, e adicioná-lo ao meu CSS. É um link, e CSS um. Se você excluir o texto aqui, esperançosamente deve sugeri-lo, CSS reset. Eu fiz tudo errado, e você está tipo, ele fez errado. Se não, discutiremos o que eu fiz, porque ele realmente fez o que queríamos, livrou-se da margem ao redor do lado de fora para todas as visualizações, ele também se livrou do texto gigante. Agora é apenas um tamanho velho normal, mas o que ele não fez, o que vai ter problemas mais tarde, é digamos que eu quero parar o H1. Então eu vou, tudo bem, H1 agora, você vai ser um tamanho de fonte de 100 pixels. Incrível. Verifica isso. Verifique, verifique, não está funcionando. Por que não está funcionando? Pausa isso. Tenho que pensar nisso, despausar. Você não está pausado agora. Você não parou, eu sei que não fez. É esta coisa. Eles estão na ordem errada. Então meu estilo está sendo aplicado. Lembre-se do fluxo, ele continua, e ele diz, tudo bem, ser um H1 de font-size 100, então este carrega, e se nós dermos uma olhada nisso, levá-lo aqui, ele diz, H1 é um tamanho de fonte de 100%, E as outras coisas que estão dizendo a eles o que fazer, não, essa coisa está nos fazendo apenas ir para 100% do one-in. Então vamos ter certeza que o pedido é o caminho certo? Então, isso está lá. Agora, esse atalho, você deve cortá-lo, e colá-lo acima dele, mas se você clicar nele em qualquer lugar, e mantenha pressionada a tecla “Opção” no Mac, a tecla “OP” no PC. Não, realce toda a linha e mantenha premida a tecla “Opção” no Mac, tecla “OP” no PC. Você pode ver, eu posso tipo de apenas tocar minha tecla de erro, contanto que eu mantenha pressionada minha opção, ou PC final, eu posso apenas tipo de mover essa coisa junto. Portanto, certifique-se de que o CSS seja reiniciado primeiro e, em seguida, faça isso. Agora o tamanho da minha fonte é bom e grande. Eu não quero isso. Apanha a ideia. Salve isso. Certo, então esse é o tipo de base real para o nosso site responsivo. Há muito mais a fazer, mas esse é o cerne disso. Nós estamos usando Flexbox, que nós meio que sabemos ou um pouco sobre já, e estamos usando media queries para tipo de ajuste, mas é um CSS ligado e desligado. Tudo bem, espero que você esteja se sentindo bem sobre web design responsivo. Vejo você no próximo vídeo. 83. Como ativar e desativar as opções de sites responsivos para dispositivos móveis, tablets e desktops: Oi lá. Posso dizer pelo seu rosto que você gostaria este fosse um vídeo sobre ligar e desligar as coisas, dependendo se fosse celular ou tablet, você está com sorte meu amigo. Na mesa de visão, temos as caixas 1, 2, todo o caminho até 10, todos eles. Mas na área de trabalho, porque temos três colunas ao longo Eu quero nove, Eu quero 10 off, e ele se foi, olha. Em seguida, no celular, queremos que ele para a caixa 1, 2, 3, 4 e, em seguida, assistir um pedaço deles fora e apenas ligar 10 para trás apenas para chutes. Este vídeo vai mostrar como ativar e desativar as coisas usando CSS e consultas de mídia, dependendo se você estiver no celular ou tablet, a versão curta é basicamente apenas aplicar uma classe especial com display, nenhum aplicado para as coisas que você deseja desativar e ele será desativado. Mas para a versão longa e todas as coisas boas, esperem, vamos entrar e descobrir como fazê-lo. Para editar, precisamos criar uma classe em nosso CSS que desative e, em seguida, aplicar essa classe para a coisa que você deseja desativar. O estilo no nosso caso é lembrar na visualização da área de trabalho, vamos diminuir o zoom. É que eu quero nove deles aparecendo, então é legal e nem eu quero aquele extra saindo, que atualmente faz, é esse cara e eu quero você lá. Estes e então quando chegarmos a esta vista, podemos sintonizar 10 de volta, mesmo que eu tenho apenas oito aqui 10 vai enchê-lo ainda bem. Mas em um celular quer ligar tudo de volta, porque realmente não importa quantos eu tenho. Vamos dar uma olhada em fazer isso. Vamos criar uma aula, está bem? Vamos chamar isso de ocultar apenas a área de trabalho. É um pouco longo e eu não chamaria isso, eu provavelmente chamaria de H ou esconder D. Só para torná-lo menor, mas vamos tentar torná-lo realmente explícito para que seja muito fácil trabalhar nesta aula, ok? O que vamos fazer é dizer exibição, fizemos bloco, fizemos bloco inline-block, fizemos flex, não podemos fazer nada. Adeus. Está nas minhas coisas globais, que significa que estou a segmentar a área de trabalho, está bem? Se você quiser desligá-lo para o tablet, você provavelmente mudar o nome dele, tê-lo aqui, na verdade nós poderíamos fazer isso neste vídeo apenas para realmente tipo de explicar o que estamos fazendo. Agora, eu preciso porque é bem longo, eu vou apenas copiá-lo, aplicá-lo a algo. Caixa 10 aqui, queremos adicionar duas classes. Portanto, certifique-se de que há um espaço entre as duas classes separadas, certifique-se de que está dentro de suas aspas. Esperemos que agora, nesta vista aqui, ele vai desligar. Ele se foi, bem só de você, mas foi para esta vista também. Tablet e celular. É por causa desse tipo de fluxo. Ele flui por aqui e não há mais nada dizendo para voltar. Nós temos que fazer é pegar todos nós, incluindo a chave encaracolada e ter certeza que quando você está colando este deixe aquele cara lá, ele precisa estar lá com o tipo de fechamento desta consulta de mídia e eu vou colar isso. Eu quero transformá-lo display para bloquear, para mostrá-lo novamente. Eu não preciso dizer isso para isso porque ele vai fluir através do celular, espero. Na área de trabalho, eu tenho nove e eu não posso rolar mais para baixo. No tablet embora aqui vamos nós, caixa 10 apareceu e, em seguida, no celular, ele deve estar lá também. Vamos apenas dizer que no celular, precisamos desligar um monte deles porque é apenas talvez ele está rolando muito tempo. Talvez você tenha como 50 e no tablet você tem 40, mas um uso móvel 10. Vamos fingir que é isso que queremos fazer. No código VS, precisamos criar outra classe, e eu não quero ativá-la no celular. Para a última cinta encaracolada lá, vou dizer que quero um chamado, esconder apenas móvel. Mas deve esconder apenas móvel, apenas chamado, que parece mais simples. Mesma coisa, exibição, nenhuma. Porque ele está ligado a este CSS, é apenas para o que você aplica, que ele vai ter efeito, tipo de fazer sentido. O que eu vou fazer? Vou fazer alguns cursores múltiplos, que é Command Option e meu Mac, ou opção de controle em um PC. Você está cansado de eu dizer [inaudível]? Espaço e eu vou ligar para nós enquanto eu vou chamá-lo, eu vou pegar esconderijo móvel. Esperemos que todos eles vão desligar, 10 não vai estar lá porque eu deixei isso fora deste pequeno grupo. Vamos dar uma olhada. Esta vista toda, ok, tem nove, vista de mesa Eu tenho todos os 10 e, em seguida, um celular eu tenho, nós temos 1, 2, 3, 4 em 10. Estamos fazendo coisas responsivas. Não é muito bonito, mas sabemos como adicionar tomadas em imagens. Temos que fazer isso para o site porque imagens responsivas são muito importantes. Vamos chegar a isso em seguida. Mas eu espero que você se acostumar com o uso de consultas de mídia tanto para fazer mudanças de ticks, mas também para fazer coisas como mudanças estruturais e ligar e desligar as coisas. Acabamos de fazer coisas simples, como ligar e desligar caixas. Você pode mudar completamente o seu site para dispositivos móveis. Pode ser importante que quando as pessoas estão procurando por seus sites como eu fiz para o meu negócio na Nova Zelândia. É mais como um negócio de sala de aula, certo? As pessoas vêm fazer cursos da Adobe ou cursos de web design. Mas, na verdade, fisicamente, chegar ao que fazemos é quando o visualizá-lo na área de trabalho, mostramos a eles informações porque sabemos que capuz provável está lá e eles estão olhando para comprar um curso, nós damos a eles informações sobre isso. Mas quando eles estão no celular, nós mudamos a página inicial para ser bem clara, nosso endereço e número de telefone, porque isso é mais útil para alguém em seu celular quando eles normalmente estão correndo para tentar e eles estão atrasados para a classe ou eles não conseguem encontrar o edifício. Você poderia ligar um enorme, você pode virar divs completamente ligado e desligado que tem um mapa legal agradável nele. Ou direções ou deixar o número de telefone realmente claro na página inicial. Não é muito útil na visualização da área de trabalho, mas seja muito legal tê-lo em dispositivos móveis. Você começa a idéia, mas ligar e desligar as coisas usando display. Nenhum, aquele. Vejo você no próximo vídeo. 84. O que são imagens responsivas: densidade de pixels, razão de pixel, dppx em web design: Oi lá. Este vídeo, é tudo sobre imagens responsivas. A razão pela qual é tão longa é porque existem alguns métodos diferentes. Este vídeo vai ser apenas uma visão geral mostrando os prós e contras de cada um deles. É um mundo um pouco obscuro. Se você está achando difícil até agora, não se preocupe, não é você, é a Internet. Imagens responsivas são um pouco difíceis. Vamos falar sobre SVGs. Vamos encontrar pequenos truques como definir a imagem em 100%. Estamos usando o método de cobertura CSS. Nós também olharemos para o método do conjunto de fontes, onde mudamos nossas imagens dependendo do tamanho do navegador e para entender tudo, precisamos falar sobre algo chamado densidade de pixels, ou a proporção de pixels, ou os pontos por pixels, DPPX. Há muitas palavras para isso. Basicamente, é como uma boa qualidade o dispositivo que seu público está visualizando suas imagens em. Vamos falar de tudo isso agora no vídeo. Tudo bem. Então, primeiro, vamos descrever por que precisamos de imagens responsivas e, em seguida, vamos cobrir as diferentes maneiras de fazer isso. Basicamente, queremos, quando o nosso público chega ao nosso site, queremos dar-lhes a melhor qualidade de imagem que pudermos para o tamanho do seu dispositivo. Se você está em um celular realmente antigo, eles só precisam desta pequena versão itty-bitty porque a tela não pode exibir qualquer igualdade melhor do que isso, então você apenas dar-lhe exatamente o que ele precisa. Por que você se incomoda em fazer isso? Porque os tamanhos dos arquivos. Essa coisa aqui é, você pode ver, é enorme. Não vale a pena forçar essa pessoa que está um celular que está usando talvez internet lenta para baixar esse arquivo gigante quando só vai ser capaz de ver a qualidade de algo desse tamanho. Precisamos descobrir uma maneira de dizer dispositivos de orçamento pequeno, telas ruins, você tem esse, mas super sexy dispositivos de alta densidade de pixels, você tem esse grande e legal. Parece bonito na tela que você gastou quantidades incríveis de dinheiro em. Responsive apenas significa que ele muda para as imagens. Nós temos isso. Isso é fácil o suficiente, certo? Agora, como decidimos? É aqui que fica um pouco obscuro. O tamanho físico é uma coisa. Todos sabemos que o tamanho físico não significa qualidade incrível. Todos temos nosso telefone sentado naquela segunda gaveta do nosso quarto que tem tipo nele e é velho e tem orçamento e você liga e fica surpreso com o quão ruim parece. Quando você comprou pela primeira vez, há muitos meses, parecia ótimo como, “Cara, este iPhone 3. Olhe para a qualidade.” Mas agora você o compara com modelos mais novos e você diz : “Uau, você pode contar os pixels.” Portanto, não se trata apenas do tamanho físico porque o seu telemóvel antigo e o seu telemóvel novo estão fisicamente, na sua mão, têm aproximadamente o mesmo tamanho. Depende de quantos anos você tem. Se você tinha um único toque [inaudível] ou um Nokia antigo, isso é diferente. Mas apenas qualquer smartphone antigo versus smartphone novo. São do mesmo tamanho. O que é diferente então? É sobre densidade de pixels. Vamos falar sobre isso. É uma mistura de densidade de pixels e tamanho físico e é uma combinação de ambos para decidir qual imagem é carregada. O tamanho físico é fácil. Não precisamos discutir isso. Se você tem um iPad Pro realmente grande, ele precisa de uma imagem maior porque é apenas maior. Considerando que o tamanho físico de um celular é muito menor. Você pode usar uma imagem menor. densidade de pixels é o estranho. Vamos discutir isso. Certo, então vou discutir a densidade de pixels. Ele também é referido como a taxa de pixel. Algumas pessoas chamam de pontos por pixels ou DPPX. Essa é a versão abreviada de pontos por pixel. Estamos todos a falar da mesma coisa. Estamos falando de como essa coisa é boa em telas diferentes. Agora vou dar-lhe a minha boa visão geral. Bem, o melhor que posso fazer. Se você quiser ir para este buraco de coelho um pouco mais, este é provavelmente um artigo muito bom de Peter Nowell, eu deixei um link para ele em suas anotações, em seus arquivos de exercícios sob o Projeto 3. Ali está ele. Média e você pode ver o que ele está fazendo, certo? Este é um exemplo razoavelmente bom. Esta é uma polegada, digamos e é um grande bloco colorido. Mas se eu dividir esse bloco colorido em quatro partes, eu recebo um pouco mais de detalhes. Posso fazer algumas coisas. Posso colorir este, não este, este. Eu recebo um pouco mais de detalhes com essa densidade de pixels. Isto é duas vezes mais do que isto. Então eu posso fazer três vezes mais cortando em três pixels. Você pode imaginar se eu cortar isso em mil pequenas linhas e cubos, eu posso realmente começar a desenhar desenhos. Isso me dá muito mais quadrados, então eu posso realmente obter alguns detalhes lá. Essa não é uma boa foto. Este eu gosto mais. Se eu rolar para baixo, isso mostra. Este é o seu telemóvel antigo, este é o seu novo telemóvel e isto está apenas a mostrar o ecrã para um e depois dois. Vai até três, alguns telefones vão quatro. Você pode imaginar que eles continuam cortando esses pequenos quadrados para cima, você pode apenas obter detalhes realmente, realmente incrível. Falamos sobre a relação de pixel. Às vezes chama-se retina. Mac, acho que é dono da palavra retina. Ninguém mais parece usá-la. O Google parece usar algo chamado DPI alto. Estamos todos falando da mesma coisa novamente, proporção de pixels, densidade de pixels e retina é a maneira como o Mac lida com isso. Pré-retina e eles são como o meu MacBook Pro que eu tenho aqui na minha frente, tem uma tela de retina. Levou o velho Mac para este novo e bonito. Estes pequenos quadrados são grandes, obviamente, para exemplos. Agora, por que é importante? Aqui está o meu pequeno exemplo. Esta pequena imagem aqui de que falamos mais cedo. Podemos ter algo que é fisicamente desse tamanho, digamos um celular, eu vou ampliar, mas ele realmente precisa de uma imagem muito maior duas vezes o tamanho que eu possa encolher. Porque se eu ampliar essa imagem, se eu aproximar o suficiente, você começa a ver que ela é feita de cubos pequenos, como vimos aqui. Pequenos cubos. Mas de longe o suficiente, nosso cérebro humano não sabe a diferença entre a vida real e um monte de pontos. O que precisamos fazer é, se eu quiser uma imagem então este é o meu telefone realmente ruim, digamos, agora é o meu lindo telefone, eu preciso dar uma imagem diferente. Não posso dar isso, desculpe. Eu preciso dar a ele esta imagem que é esmagada para baixo para cerca desse tamanho porque eu preciso de todos esses pixels extras e às vezes isso não funciona. Vou tentar a minha explicação aqui. Digamos, este é o meu melhor telefone e eu preciso de uma imagem para ele que é alto DPI ou retina ou tem uma proporção de pixels de dois em vez de um, eu vou copiá-lo e colá-lo e alinhá-lo. Preciso de pixels duplos. O que eu faço é que eu tenho que esmagar e então eu preciso copiar e colar para que eu tenha isso. Você pode ver a proporção. A imagem ainda tem o mesmo tamanho, mas tenho muito mais pontos com os quais posso brincar. Isso ajuda com a densidade de pixels? Embora esta imagem aqui seja do mesmo tamanho que o original, Onde está? Mas digamos que temos duas imagens, a pequena e a maior que eu espremi. Este é fisicamente do mesmo tamanho, mas tem uma densidade de pixels maior. O tamanho do arquivo é muito mais huger. Quando eu carrego meu celular ruim, eu dou esta imagem que tem uma densidade de pixel de um. Mas meu celular tem algo que é fisicamente do mesmo tamanho, mas tem uma densidade de pixels de dois, três ou quatro. Você pode imaginar que continuamos pegando esses e nós copiamos e colamos e fazemos uma versão menor e continuamos fazendo menor até que o telefone obtenha a imagem que deseja. Significa que posso fazer melhor detalhe. Espero que você tenha o que quero dizer, o mesmo tamanho físico, mas a densidade de pixels é muito mais apertada, modo que o tamanho do arquivo seja muito maior. Duas coisas que consideram o tamanho físico do dispositivo só pode ser maior, mas também o mesmo dispositivo pode ter densidade de pixels de dois ou três ou quatro e a parte louca é, você pode ter 1,5, 1,75. Fica confuso em termos que a imagem é perfeita para qual dispositivo, porque é tantos dispositivos. Vamos seguir em frente e realmente apenas mostrar-lhe como implementá-los em vez de apenas falar sobre o que é. Precisávamos cobrir esta questão para que pudéssemos decidir qual é o melhor método neste momento. Vamos falar sobre o método número 1 para exportar um realmente bom imagens responsivas. O melhor é um SVG, isso é o que esses pequenos ícones aqui problema SVG ele precisa ser um olhar realmente sentado você pode dizer que estes são realmente ícones, estilo clip art, logotipos com muito bom para SVG e eles escalam, você não tem que fazer tamanhos diferentes como nós vamos ter que ver com imagens embora, para escalar para o infinito. Eles vão ficar maiores e maiores, em seguida, indo para o tamanho de uma montanha, se você quiser, e o tamanho do arquivo ainda será pequeno, principalmente porque estes são mais uma equação matemática do que eles são reais, um grupo de pixels coloridos estes ajusta pontos de ancoragem em coordenadas x_y e eles fazem muito bem como um SVG como um JPEG ou um PNG, é apenas uma maneira de exportar esses caras. Eu fiz isso em um vídeo anterior neste curso, como explorá-los de todos os diferentes programas. Vamos deixar o SVG então esse próximo método e o que eu mais uso é o método de 100 por cento de largura, esticando-o para caber no dispositivo. Não é o melhor método a única razão pela qual eu uso isso tantas vezes é que não havia realmente uma boa maneira de fazê-lo no momento. Haverá. Ninguém descobriu a regra incrível ainda. Quando eu sinto que isso vai resolver todos os problemas. Ou não tem bom suporte para o navegador ou é realmente difícil de implementar com toda a honestidade, eu cair para trás neste método muito. Tem alguns bichinhos porque é super fácil de fazer. Tem algumas grandes desvantagens. O principal é este é o meu site, ver este homem bonito no fundo aqui. Se eu estiver em uma tela grande, ele me mostra uma versão razoavelmente boa qualidade dele, mas se eu chegar a uma tela pequena, agora clique com o botão direito do mouse poderia inspecionar, se o seu não tiver ativado nesta pequena visualização do dispositivo para ir de não vê-lo para vê-lo como meu telefone. Vou fazer um iPhone 4. Veja esta imagem aqui é exatamente a mesma que aquela grande imagem que estava lá. Isto é aquilo aqui. Coloquei em outra janela. Este genoma é imagem, infelizmente carrega em uma tela muito pequena. Se esta pessoa estiver numa ligação à Internet lenta e tiver de a transferir. Isso é feito na versão gigante, mesmo que eles não possam exibi-la no dispositivo. Essa é apenas a imagem definida para 100 por cento. Seja qual for o recipiente em que ele está, enche até 100 por cento. A outra coisa que fizemos neste curso é muito semelhante, então 100 por cento é muito semelhante à capa talvez quando o CSS vemos nesta imagem aqui dizemos, tudo bem, esta imagem, queremos que você cubra como uma propriedade CSS para que Quando eu ajusto o tamanho, você pode ver que ele se ajusta, ele fica menor e maior. A capa faz um 100 por cento, mas faz algumas coisas extravagantes quando ele pode movê-lo no meio e centralizá-lo e outras coisas. Esse é o método número 2 fácil, mas você pode dizer que ele tem algumas desvantagens, principalmente a ver com apenas carregar uma imagem para todos. Não é muito bom para a velocidade de carregamento da página. O Google não vai gostar da sua página tanto quanto seria se ela ficasse tão pequena quanto os tamanhos de arquivo possível. O próximo método é semelhante ao que eu acabei de falar, uma largura de 100 por cento você pode apenas forçar um tamanho. Este é o projeto em que estamos trabalhando. Eu só vou jogar em uma imagem sensível a maiúsculas e minúsculas, nós vamos adicionar uma imagem, eu tenho algumas imagens na minha pasta. Eu tenho o pug está de volta. O que você pode fazer é vamos ter um pouco de olhar para ele como um pendurar fundo e alcançar isso desligado realmente desligado meu dispositivo de visualização. Este é o meu pug. Eu gosto de Pug e ele está exibindo em seu eu gigante o maior que ele pode. Infelizmente, ele está com uma densidade de pixels de um e é um pouco difícil de ver na tela, mas provavelmente em seu vídeo, eu posso dizer que ele não é uma imagem de boa qualidade. O que você pode fazer é esmagá-los como fizemos aqui e ilustrador. Lembre-se que pegamos isso e dissemos, vamos fazer isso menor e nós os esmagamos para obter densidade de pixels de lance, mas a troca é que o tamanho físico fica menor. Isso é algo a considerar quando você está explorando a imagem, você provavelmente vai ter que explorar maior do que você precisa, duas vezes o tamanho se você planeja esmagá-la pela metade. Vamos dar uma olhada. Você pode em seu HTML fazer algo interessante. Você pode dizer que eu posso adicionar um estilo e eu posso adicionar uma largura, normalmente fazer isso e CSS, mas isso é hack para começar isso acontecendo e ele diz, Eu quero torná-lo de que tamanho é? Acho que tem 500 pixels de diâmetro. Eu já verifiquei. Se você não tem certeza de como verificar em um Mac sob o meu Projeto 3 de competiu em cruz imagem, clique com o botão direito do mouse nele, obter informações sobre um PC, é algo semelhante. Deve haver boas propriedades. Você pode dizer a ele que ele tem 500 pixels. O que eu vou dizer é na verdade um 250 agora. Vou forçá-lo a ter metade do tamanho que era e espero que agora. Ele é metade do tamanho, mas o dobro da qualidade e minha tela que eu estou olhando fisicamente no mundo real tem uma densidade de pixels de dois, é uma alta DPI ou tela escrita. Isso parece mágico se eu esmagar eles para baixo novamente que é um quarto, mas a qualidade não é melhor, não é extra como profundidade para o pug. Não há necessidade de eu ir tão baixo nesta tela, isso é um bom, fácil de corrigir livre alguém foi o último. Vou dar uma largura ao meu e o navegador adivinhou a altura. O próximo método é este aqui chamado de fonte ele. Fizemos a fonte das imagens. Vamos olhar para essa coisa chamada fonte ele e isso é na minha opinião, a melhor maneira de implementar imagens que mudam tamanho dependendo da largura do navegador. Ele tem um bom suporte para o navegador e em termos de ser um designer, não é extremamente impactante em termos da quantidade de trabalho que você precisa fazer. Existem outros métodos que não vamos cobrir neste curso, e eu os deixei de fora principalmente por causa de navegadores ruins suportam tudo super complicado requer codificação que está fora do escopo deste curso. O que vamos fazer em vez de este pequeno vídeo ficar epicamente longo, vou cobrir a fonte no próximo vídeo com melhor detalhe. O cerne disso é que essas imagens diferentes serão carregadas em uma largura diferente do tamanho do navegador 500, 1000, 1500. Se esta fonte não puder ser usada pelo navegador porque é um navegador antigo, ele usará apenas a imagem antiga normal que temos. Nós vamos dar-lhe a versão pequena porque se você tem uma navegação real, você provavelmente tem um realmente na tela, mas é esculpir isso em seu próprio vídeo e tomou sobre tão definido. 85. Como exportar imagens responsivas para o site do XD Photoshop Illustrator: Tudo bem, eu queria voltar neste vídeo para imagens. Fizemos imagens em um vídeo anterior, mas eu realmente quero destacar imagens responsivas. Agora que entendemos o que é responsivo, vamos precisar de algumas imagens diferentes. Agora, para o nosso método de alongamento 100% que faremos a seguir. Só precisamos de uma imagem muito grande e vamos reduzi-la. Isso é fácil o suficiente. O método depois disso chamado o método SRC sit, isso é tudo definido, ele vai exigir diferentes imagens físicas diferentes em tamanhos diferentes. Vamos ativá-los e desativá-los dependendo da largura física e da densidade de pixels. Então primeiro passo vamos trabalhar com o Photoshop. Verifique se a imagem que deseja redimensionar está aberta dentro dela. Photoshop não é o melhor programa de imagem web design absoluto, mas ele é usado tão comumente para fazer web design. Vamos cobrir isso primeiro. Vá para Arquivo. Vá para Exportar e vamos usar explorar como. Você pode ter que redefinir o seu. Sua qualidade está provavelmente em 100. Vai remover a última coisa que fez. Você pode ajustar sua escala de volta para 100. Você poderia ter ido a alguns desses se você tem. O que eu quero fazer é que eu quero que ele seja um JPG porque é uma imagem que parece que ele precisa ser um JPG. Eu vou ter a qualidade talvez para baixo em 60, parece bom. Agora o menor tamanho, vamos começar com o menor. Digamos que eu quero que seja uma largura. Você precisa de suas dimensões gerais. O meu é por padrão 300 pixels de largura, contanto que seja maior do que o que você precisa, porque eu quero ser o tamanho pequeno para ser 400, muito pequeno. A relação funciona fora de [inaudível]. Você tem que se certificar de que seu trabalho se ele ficar um pouco fora. Vamos tentar colocar nosso celular naquela tela, e esse será o nosso tempo um. Então o que eu faço é adicionar mais um. Este vai ser o vezes dois ou alto DPI. Você pode ver que você pode fazer vezes três. Eu vou dizer que é isso que eu vou fazer e bater exportação e na minha área de trabalho, eu vou colocá-los, agrupá-los lá. Não lhes dei um nome muito bom. Com sorte, você vai. Há a primeira imagem e a segunda. Agora, vou abri-los novamente no Photoshop só para mostrar a diferença de tamanho. Esse é o pequeno lá e aquele é o grande, com o dobro do tamanho. É assim que se obtém duas versões do Photoshop. XD é muito semelhante. Digamos que eu tenho esta imagem do meu Mac aqui em cima. Eu seleciono, faço duplo clique nele. Eu tenho a parte da imagem dele e eu vou arquivo, exportação. Vou exportar o selecionado e aqui em baixo, esta é a mudança. Aqui em baixo, em vez de apenas design, vamos para a web e ele vai me dar, você pode ver aquela minúscula escrita. O editor aumentará o zoom. Você nunca veria isso bem, mas você pode ver que você recebe um 2_x e um 1_x se você estiver fazendo coisas para iOS. Isso é iPhones ou iPads, eles exigirão uma vez três. Android requer tantos. Mas vamos fazer apenas uma e duas vezes. Vou exportar isso para a minha área de trabalho também. Dê um nome a ele. É um nome ruim. Vai passar por isto porque já o fizemos. Só queria te mostrar isso. É por isso que você acaba com este com o 2_x até o fim. É apenas o dobro do tamanho do original. Eu os abro no Photoshop só para mostrar uma versão grande, um pequeno verson. Para um método de 100 por cento, vamos usar este e reduzi-lo. Quando fazemos método sit, vamos alternar entre essas duas imagens, dependendo do tamanho do navegador e da densidade de pixels. O último é o Illustrator que é usado comumente. Este aqui, ele não tinha um gradiente e não era, bem esta sombra, Eu provavelmente só uso SVG. O que precisamos fazer é janela. Você precisa abrir seus ativos, exportar, selecionar o que deseja exportar, arrastá-lo para este painel, dar um nome melhor do que eu tenho. Então aqui em baixo é onde você decide. SVG não vai funcionar neste caso. Vou ter que escolher um JPG. Estou escolhendo um JPG de 50%, não me dá 60, então vou levar 50. Disse que precisa de um sufixo. Eu não preciso disso. Você pode tê-lo, é como adicionar ao nome do arquivo. Eu vou ter uma versão um, eu vou ter uma versão que você pode ver. Você pode ficar muito chapado. Vou ter apenas uma versão dois. Ele vai adicionar esse sufixo ao final para corresponder ao resto deles. Também faça isso. Está atingindo o menos. Diz menos 50, só diz que estou com 50% de qualidade JPG. Vamos fazer aqueles dois. Eu estou indo. O que vamos fazer. Vou clicar nele para que fique azul. Depois vou clicar em exportar e acabamos no mesmo lugar. Desktop, exportação. Eu deveria ter dois antecedentes legais. Até colocou em pequenos grupos. Obrigado, Illustrator. Não tenho certeza se isso é obrigado. Mas de qualquer maneira, eu tenho dois deles um, dois Eu vou abrir os dois no Photoshop para que eu possa ver a diferença de tamanho. Não sei porquê. Não acredito que confie em mim. De qualquer forma, versão pequena, versão gigantesca e, na verdade, isso é um Zoomed out. Essa é a versão pequena em 100% e essa é a outra versão. O dobro do tamanho enorme. Temos as nossas imagens. Vamos trabalhar no resto desta seção de imagem responsiva e começaremos a implementá-los. Te vejo em um segundo. 86. Como adicionar imagens responsivas ao site usando 100% de largura em HTML e CSS: Ei, esse vídeo é sobre imagens responsivas. Este em particular está trabalhando com uma largura de 100 por cento. Nós fizemos isso no curso e eu pensei, nós não precisamos de uma capa novamente, mas eu sinto que devemos apenas para realmente um obtê-lo em um bom lugar para que você possa encontrá-lo mais tarde neste curso, e também apenas para confirmar o que sabemos estamos tomando isso de um método ligeiramente diferente aqui. Agora, eu tenho essas imagens e você pode ver que eles mudam os tamanhos diferentes em diferentes navegadores por causa do que eu estou fazendo com minhas colunas e você pode realmente ver agora como 100% funciona. Desde que a coluna mude, a imagem apenas se ajustará para caber nela. Precisamos colocar em uma boa imagem grande, dimensioná-la para caber na coluna e é uma maneira muito rápida e fácil de fazer imagens responsivas. Vamos entrar no VS Code e resolver isso. Para começar, vamos excluir o BOX1 e é h1 tag, então a coisa toda. Porque eu não quero mais bater, eu vou colocá-lo em uma imagem. Agora não temos as imagens em nossos arquivos de exercícios. Vamos ir para arquivos de exercícios, encontrar seu arquivo Project 3. Vamos usar as imagens grandes. Porque nós vamos colocá-los em grande escala e apenas reduzi-los. Eu vou pegar todos esses, copiá-los, e vamos para a nossa área de trabalho, vamos para o Projeto 3 e colocar na pasta de imagens. Dentro dessa pasta de imagens, vamos colar todas as nossas imagens. Vamos carregar pelo menos o primeiro, então IMG e SRC são a fonte. Esta vai ser uma pasta de imagens. Vou chamar todos esses images1.png. Você deve sempre adicionar todo o seu texto. Eu não sou porque eu simplesmente não sou. Você deveria. Vamos salvá-lo e vamos dar uma olhada no navegador. Desligá-lo. ligar-te outra vez. Legal, esta é uma imagem gigante. É muito grande. É até o dobro do tamanho que precisa ser. Para reduzi-lo, vamos usar um pouco de CSS. Nós temos nossa visão global, e antes que a visualização da área de trabalho comece, eu vou colocar isso lá para que eu possa editar aqui. O que eu quero fazer é fazer todas as imagens com metade do tamanho. Eu sei que eu quero fazer aqueles dentro do col metade do tamanho, não o comunicador, o col. Imagens só se estiverem dentro desta div chamada col, eu gostaria que você estivesse. Uma largura de 100 por cento. vírgula, agora, isso vai funcionar principalmente. Você precisa colocar em uma altura também. Você precisa de uma altura e eu não quero a altura. Quero que a altura seja automática. Um 100 por cento vai tentar esticá-lo, enquanto eu vou apenas deixá-lo como auto e isso não está funcionando. Por que está trabalhando? Reiniciar. Está funcionando. É uma bela imagem grande. Ele foi feito para a vida como uma densidade de pixel, mas por causa da escala para baixo, agora ele escolhe uma densidade de dois ou é o dobro da resolução ou alto DPI, como você quiser chamá-lo. O problema é que você pode ver aquele rosa pegando o fundo lá e quando eu redimensioná-lo, você pode ver que não está bem fazendo o que eu queria. É como encolher lá dentro e a caixa não está ficando menor porque eu digo uma altura física para esta caixa. Vamos nos livrar do fundo rosa e da altura, fora dessa coluna. Fizemos isso mais cedo. Cor de fundo, altura mínima. Adeus. Salve isso. Olhe agora, está funcionando e as caixas entraram em colapso, e não há cor nelas. Incrível. Essa é a maneira fácil de implementar imagens responsivas. É maior do que precisa ser e está esmagado. Em diferentes dispositivos, ele vai carregar o tamanho físico certo, mas há mais escala para que ele se torne uma imagem DPI alta ou imagem PPI, como eles chamam isso? Pontos por pixel. A proporção de pixels pode ser maior. Todas essas palavras significam a mesma coisa. Estamos apenas tentando obter a qualidade de imagem certa para a tela diferente do dispositivo. Agora você pode pular em frente porque eu vou apenas adicionar todas as imagens aqui, até você. Podes aguentar, se quiseres. Vai ser muito chato. Eles mostram que erraram o tempo todo. É opção de comando em um Mac ou controle O em um PC e vamos excluir tudo isso, incluindo o H1 e eu vou pegar essa imagem. Faça a mesma coisa, meu atalho, colá-lo, e eu vou apenas trocar as imagens, imagem 1, imagem 2 perfeita. É um que vai ser 2. O próximo será 3. Este vai ser 4. É doloroso assistir, é doloroso fazê-lo. Vamos fazer algumas imagens, que é cortar ou colocá-lo em todos eles. É um pouco mais amplo para que possamos fazer isso de forma agradável e fácil e vamos nos livrar de todos os números e parar de digitar um de cada vez. O que você está aprontando? Um, dois, três, quatro, cinco, seis, sete, oito, nove. Esqueci-me deste tipo aqui em baixo. É só para quem somos. Pegue tudo isso, entendido. Podemos usar nossa seleção ou nossas tags tu. Talvez isso esteja em exibição e diz que quando ele expande seleções um monte de atalhos. Comando Shift+Control no meu Mac, eu vou colar aquele cara e este vai ser 10. Todas as minhas imagens, o que tinha sido muito mais fácil de fazer antes de eu começar a editar estes, mas hey, não é fluir o curso. Vamos verificar se estão todos lá dentro. A coisa legal sobre eles é olhar para eles responderem. Eu tenho que mudar para um dispositivo móvel, inspecionar, eu tenho que atender o dispositivo. Ativar novamente e é isso que parece em um telefone celular. Não são muitos, mas pelo menos são 100 por cento. Vou para a responsiva e vou embora. Vá em frente. Aqui estamos nós. Isso é uma escala de 100 por cento. No próximo, vamos olhar para o outro método, o outro método principal é usar o sit fonte. Te vejo em um segundo. 87. Como usar srcset para alterar imagens em HTML para site responsivo: Oi lá. Este vídeo vai cobrir srcset. É uma forma de lidar com imagens responsivas como este pequenino aqui. Veja o que acontece quando eu chegar a um dispositivo maior, hey ele se torna uma visão de tamanho médio. O que está acontecendo é que estamos trocando a imagem em vez de apenas redimensioná-la porque ele tinha um chapéu rosa, agora ele tem um chapéu verde. Pronto para o chapéu laranja? Chapéu laranja gigante. Na verdade, a imagem está sendo trocada dependendo da largura do navegador. É muito fácil implementar em HTML um pouco mais difícil de testar no Chrome, mas vamos descobrir os dois agora no vídeo. Para começar com isso, vamos fechar todos os outros documentos e vamos criar um arquivo descartável apenas para manter isso agradável e isolado. Vamos salvá-lo, dar-lhe um nome, chamá-lo image-srcset. Não importa o que é chamado, vai ser um arquivo HTML. Talvez não precisemos de SCSS para isso funcionar, para essa parte particular do srcset, precisamos de todos os dados de sucesso. Doctype, o idioma Inglês vai deixar, o principal é este. Você não pode viver sem que a viewport esteja configurada, portanto, certifique-se de que ela esteja no documento. A próxima coisa que vamos fazer é colocar em uma tag de imagem simples, e eu tenho uma cópia de algumas imagens através, então em seus arquivos de exercícios e projeto três sob seu pug. Pug está aqui, fiz três deles que vamos usar. Aqui está o original, este é de Charles, de Unsplash, Se você precisar de um me pegar. Vá até aqui, Unsplash e procure o trabalho de Charles com seu pug. O que eu quero é pequeno, médio e grande. Vou copiá-los, colocar na minha pasta local na pasta Imagens. Vamos ver essas imagens que você sabe o que está por vir. Isso é visão pequena, esta é uma visão média e uma visão grande. Vou mandar um texto e mudar a cor do chapéu. Você normalmente não faria isso, você apenas deixa a mesma imagem, mas eu queria deixar bem claro quando essas coisas mudam. VScode o que fazemos? Vamos primeiro colocar na imagem, pasta de imagens e eu vou começar com pug pequeno. Você colocou todo o seu texto. Vamos dar uma prévia e dar uma olhada no navegador. Vou deixar o arquivo ir e desligá-lo, ligá-lo novamente. Há ali. Legal, então estamos começando com isso, isso é o que fizemos até agora, então não fizemos nada chique ainda. Agora vem para o nicksport”. Depois do nosso texto. Vamos colocar em srcset e aqui é onde colocamos em todos os tamanhos diferentes. Realmente não faz texto preditivo muito útil aqui, então eu vou trapacear e ir, pegar essa cópia e colocá-lo dentro daqui. Agora precisamos dar uma largura. Nós vamos dizer, você ativa com uma largura de 500 pixels de largura. Há muitas medidas diferentes. Fizemos EMS e rems, pixels e porcentagens. Há outro, W4 largura vai funcionar para este caso. Agora tudo o que preciso fazer é colocar os tamanhos diferentes. Ele não faz bem as coisas preditivas novamente, nós vamos copiá-lo e você separá-los por vírgulas. Cole em uma vírgula, cole-o. Eu tenho três visões, minhas três imagens, isso vai mudar duas coisas. Temos o meio, e este vai ser 1.000 pixels, não 10.000. Este aqui é chamado de grande cheque jpg, e este vai ser 1.500. Olhamos como eu os chamei. Grande, médio, pequeno, ótimo. Vamos fazer um teste, vai funcionar. Verificando o navegador, ele está tecnicamente funcionando, mas é difícil visualizar em um navegador porque o que acaba acontecendo é o navegador baixar o HTML e dizer, ótimo, entendi. Não faz sentido ir e verificar a tela com ele, ele faz isso na carga. A página de cache precisa ser carregada e, em seguida, ela irá verificá-la, se eu baixá-la muito pequena e eu pressionar “Recarregar”, ela ainda não funciona porque está em cache. Cache significa apenas que uma vez que o navegador tenha baixado uma imagem, ele não faz o download novamente, ele vai. Já tenho essa imagem. Chama-se o mesmo nome. Não vou me incomodar em fazer isso. Vamos forçá-lo a fazê-lo. Há algumas maneiras de analisá-lo antes, se você clicar com o botão direito do mouse, vá para Inspecionar. Dependendo, a pré-visualização do dispositivo pode não estar ativada; este pequeno botão aqui em baixo. Você não pode continuar clicando com o botão direito do mouse nisso e indo vazio cation tinha recarga, para dizer que algum dia, tem uma rede e ligar isso, desativar cache. Vamos redefini-lo agora, clique com o botão direito do mouse nele, redefinir o cache para que ele não vá salvá-lo. Toda vez que recarregarmos ou redimensionarmos a página, ela tentará procurar a imagem novamente. O que vamos fazer é ligar a pré-visualização do dispositivo. Nós vamos para responsivo no topo aqui, e vamos começar a arrastá-lo. Se você começar grande , não vai ficar menor amplamente. Sim, aquele pequeno, algo mais ou menos móvel. Estou olhando aqui em cima, é cerca de 300 metros. Vou atualizar a página e funciona muito bem. A página é carregada, ela ainda não tem uma imagem. Ele vai e olha, ele verifica, faz alguns cálculos e diz, esta é a largura que eu preciso, então eu vou usar esta imagem em particular. Começando pequeno, eu posso arrastar um maior, assistir. Veja, eu passo um certo ponto e ficou maior. Eu fui um pouco mais longe e, eventualmente, ele vai para a grande imagem. É assim que os trocam. Uma coisa que você deve ter notado aqui em termos de pixels, se eu descer novamente para algo pequeno, aperte “Atualizar” de volta para o pequeno. Lembre-se, nós vemos ao vivo em 500, nós vemos ir ao vivo para 500. Olha para isto quando estou a arrastar-me. Veja quando ele muda lá, é metade onde nós o tínhamos. Imagino o que está acontecendo? É como densidade de pixels, ou uma proporção de pixels ou os pontos por pixel, DPPX, alta DPI, telas retina, há muitas palavras para o mesmo. Tenho a certeza que não são idênticos, mas referem-se a fazer o mesmo com as nossas imagens. É porque a tela que estou olhando tem uma densidade de pixels de dois. Você pode fingir aqui, dizer que você quer colocá-lo de volta em um, esse é o básico. Você pode entrar nesses três pontinhos, não aquele, este. Quero mostrar a relação de pixel do dispositivo. Aqui, o padrão é dois, vou configurá-lo para um e fazer exatamente a mesma coisa. Comece pequeno, aperte “Atualizar”. Você pode ver que agora é tão pequeno até eu chegar a 500. Agora, nunca é perfeito porque está fazendo um cálculo e olhando para o que deveria ser, mas lá vai você, trocou para 100. Eu saio para 1.000 e vejo isso mudar, você tem o grande, pug gigante. Às vezes isso ajuda. Eu acho que na aula às vezes o ditado neste caso, podemos ver os pixels versus a proporção de pixels e você pode imitar. Eu tinha um telefone LG lá por um tempo e era uma densidade de pixels de quatro. Foi muito louco de olhar também, então era ultra vida, então três seria muito comum para dizer, seu iPhone se você tem um iPhone 10. Vou clicar neste. Vá para baixo pequeno e o que você vai notar é que se eu apertar “Refresh”, é médio já neste minúsculo tamanho. Olha, quando eu chegar a apenas um regular rolou. Veja se ele vai. Você vê aí, o seu iPhone X o que ele vai até? Eu não sei a largura dele, mas já é um grande neste tamanho de arquivo realmente pequeno porque ele está bloqueando e tantos pequenos pixels porque a relação de pixel do dispositivo. Pessoas que têm muitos nomes para essas coisas, é realmente alto e pode ficar maior. É por isso que se você estiver visualizando e um MacBook Pro, o DPI é dois, mas se você pré-visualizar em um iPhone X, são três, e você diz: “Como esse MacBook Pro pode ser menor que três?” Eu também pensei isso, mas acontece que é porque seu telefone você segura bem perto do seu rosto, então você realmente percebe a qualidade extra. Enquanto o iPad foi projetado para se sentar no colo ou pelo menos no comprimento do braço, para que ele possa sair com uma aparência incrível com uma proporção menor de pixels. Além disso, tenho certeza de que há considerações sobre a duração e o custo da bateria, todos os tipos de coisas. Isto foi útil? Um pouco de um buraco de coelho. Agora, há mais neste srcset, isso é 90 por cento? Quero dizer que lhe dei 90% das regras para isso. Há outras coisas que você pode fazer. Você pode ignorar o tudo bem e trabalho, eu não gostei de levantar você com algo que não funciona. Você pode apenas encontrar instâncias em que você precisa aprender um pouco mais. Este artigo aqui foi provavelmente o melhor que eu li sobre isso. É outro de Chris Coyier em truques CSS, definitivamente um homem para seguir. Isso passa pela imagem definida com um pouco mais das porcas e parafusos. A outra coisa legal que você pode fazer com ele é porque em imagens responsivas eles continuam mudando. Toda vez que eu refaço um curso e eu digo: “Ok, agora estamos fazendo às vezes também, agora estamos fazendo essa outra coisa, agora estamos fazendo essa coisa nova.” Em vez de voltar a este artigo, você pode ir a essa coisa chamada imagens responsivas e isso é um pedaço dele. Ele marca artigos com base em imagens responsivas. Quando você estiver assistindo a este curso, este é 2019, será 2020 quando você estiver assistindo isso, provavelmente. Vá e leia isso, veja quais são as últimas coisas. Não sei o que é isso. Eu vou procurar o que é FUIF e apenas passar e ver porque eles podem dizer, você pode encontrar um artigo chamado Sources Dead, por que você nunca deve usá-lo. Esta coisa evolui, continua a mudar, mas dei-te uma boa compreensão do Jim dessa fonte. É muito útil, requer que você crie várias imagens e isso nos faz olhar para coisas como densidade de pixels em um pouco mais de detalhes e espero lançar alguma luz sobre ele talvez. É difícil de atravessar. Isso vai ser tudo para imagens. Vamos deixar o nosso site. Não vamos salvar este. Estará em seus arquivos completos. Vou deixar este método. Nós apenas escalamos isso para cima e para baixo e novamente eu continuo um. Verei no próximo vídeo. 88. Como adicionar um estilo css à primeira linha de uma tag p em um site: Ei, neste vídeo vamos olhar para adicionar uma classe CSS para tornar as coisas em negrito apenas para a primeira linha. Não importa o que está na linha, tudo se tornará ousado. Você pode fazê-lo para a primeira letra ou a primeira linha, é um pouco engraçado de CSS. Vamos trabalhar como fazê-lo agora em VS Code. Olhando para a minha marca, é isso que eu quero fazer. Eu quero fazer a primeira linha em negrito e, em seguida, a segunda ou o resto das linhas não negrito. Vamos olhar para o que fizemos, nossa pequena classe CSS para Visual Studio Code. A primeira coisa que precisamos fazer é adicionar um pouco de texto, caso nós vamos adicioná-lo a todas as caixas pequenas no momento, nós não temos nada. Para limpar tudo, vamos nos livrar da cor de fundo. Vou usá-lo para a mão no fundo. Eu vou para VS Code, meu contêiner tem uma cor que eu quero roubar e depois voltar para as colunas. Antes eu queria me livrar dele, agora eu quero editar. Isso está pegando na parte inferior, mas está tudo bem, eu vou adicionar texto e torná-lo realmente grande. O que vamos fazer, na verdade, vamos fazê-lo. A coluna aqui vai ter algum texto dentro dela. No momento em que tem uma imagem após a imagem, então minha tag de imagem termina lá, eu vou colocar em uma tag p, e eu vou colocar em algum Lorem Ipsum um sobre algumas palavras e eu quero o começo aqui. Estou colocando a palavra “branding”. Isso é o que eu quero estrelar, eu quero mirar isso. Vamos dar uma olhada aqui. Você pode ver o que eu fiz aqui, eu fiz a coluna. Ele não tem uma altura, então ele se expande para que as coisas se encaixem. É uma imagem nele porque eles não podem se encaixar, eles esmagar e a coluna fica um pouco maior. Eu poderia fazê-lo afundar debaixo dele, chamar o nome, instalar o verde e fundos, mas desta forma é um pouco mais simples. Eu quero ir e estilizá-lo, tudo olhando muito bem, mas vamos colocar em negrito primeiro porque é isso que você veio para. A maneira de atacá-lo é que vamos colocá-lo em nossos estilos globais. Não é uma sintaxe diferente, exceto que usamos dois pontos para juntá-los. Eu quero estilizar a primeira linha, você pode fazer a primeira letra, a linha, eu realmente quero a primeira palavra, mas isso não é uma opção. Vou fazer a primeira linha, vou fazer o peso da fonte. Vou torná-lo ousado. Eu deveria colocar 700, é um tamanho muito normal em negrito, mas eu não escolhi uma fonte ainda. Estamos usando o Times New Roman. Você pode colocar em qualquer estilo que você gosta, desde que seja estilo de texto e ele vai funcionar, vamos dar uma olhada, olhar perfeito. A razão de eu dizer meio que é que eu estou atacando todas as tags p primeiras linhas e em nossa maquete aqui, nós vamos ter mais de um pouco de caixa de texto. Haverá texto aqui, aqui, aqui, eu sou obrigado a ter outra página, eu só tenho realmente uma tag p neste site, mas se eu for para a página de contato dush e eu construir isso e nós usamos muitas tags p. Não quero que todos sejam ousados. Vamos ser muito específicos, então vamos dizer apenas a primeira linha de tags P que estão dentro das colunas. Espaço entre essas duas colunas para unir essas duas. É assim que se faz. Vamos passar e instalar uma fonte, vamos fazer com que pareça com isso. Vamos cobrir algo novo? - Não. Nós só vamos colocar um pouco de preenchimento, torná-lo largo, torná-lo a fonte certa, você pode pular junto se isso soa fácil para você, mas se ele não continuar, vai fazê-lo juntos. Primeiro uma fonte, vou para o Google Fonts, google.com/fonts. A fonte que eu decidi é algo chamado ASP. Apenas um bom all-rounder livre, entra, condensado também, o que é muito legal. Só vou usar o normal. Ele vai ter mais, nós já fizemos isso antes, mas é bom para recuperar essas coisas, pouco menos, você pode baixá-los agora apenas não usando em seu computador, mas para usá-los em seu site, você usa a incorporação. Personalizá-lo porque eu decidi usar regular e ousado e nenhum dos outros. Eu vou incorporá-lo, eu vou pegar você, copiar isso porque até eu bater tag. Enquanto é antes do fechamento da cabeça e você vai, você vai notar neste site quantos, eu acho que é um site simples. Mas eu decidi em vez de usar como uma exibição para Honduras Serif fonte, Eu estou apenas usando a versão negrito e luz para fugir com a tentativa de organizar a hierarquia de informações. Eu tenho as fontes, vamos aplicá-las. O que vou fazer é aplicar-me a tudo. Você se lembra de como fazer isso. Tudo neste documento eu quero ser ASP. Você faz isso com o corpo. A etiqueta do corpo aqui vai ser a família da fonte, e eu vou pegar isso da família, salvá-lo. Vamos dar uma olhada, e eu vou pré-visualizar, lá vai você está a fonte certa, pelo menos. Vamos escolher um tamanho, uma cor e um pouco de paddind. Vou checar minha marcação, você está com tamanho de letra de 14. Agora eu vou criar meu próprio, porque eu não quero que ele para tags p antigas, isso, eu quero que as tags p que estão dentro das colunas para fazer essa coisa. Na verdade, você poderia fazer isso com a coluna, tudo dentro deles, mas faremos assim. Vamos colorir. Vai ser branco e é o tamanho da fonte. Lembre-se, calculadora vai ser 14 vezes 0,0625 aleatório, e vai ser isso, e vai ser anéis, vamos fazer algum preenchimento, e vamos fazer nossa fantasia todo o caminho, então topo vai ser nenhuma idéia e lado a lado vai ser nenhuma idéia. Só boas suposições, vamos dar uma olhada. Está tudo bem, não está tão definido como isso então vamos adicionar um pouco mais. Acho que te mostro isto porque podia passar e antes da aula e acho que escrever isto para mim para parecer mais suave, mas isto é o que acabo a fazer e estou tipo, não, aqui atrás. Testando testes, talvez 25 para a altura. Isso serve para mim. Você vai notar que um ousado foi embora. Você já deve ter notado. Basta notar que k é y porque estamos tentando aplicar um peso de fonte que não existe. Este usa 700, não a onda ousada. Algumas fontes usam negrito. Eu suponho que foi isso, só garante que eu vou atualizar, clique com o botão direito do mouse. Por que não está carregando agora? P chamada de primeira linha, isso ainda é verdade. Na hora da confissão, eu estava fora para uma grande contagem rápida de cinco minutos, o que aconteceu? Você já deve ter notado. É um problema de sintaxe. O problema é que esse cara estava perdendo seu pequeno, eu sou uma classe parada na frente dele. Mas demorei um pouco, e acho que quero deixar o mesmo porque acontece com todo mundo. Eu vou me dar a versão magro do que eu tentei defeitos, como eu eventualmente fiz isso. Basicamente, o que de trás para frente e você sai, qual foi a última coisa que eu fiz? Era como se fosse a última coisa que fiz. Vamos desligar isso. Lembre-se barra fonte Command no Mac, controle barra de fonte de p e adiciona-lo para comentários, isso significa que ele desligá-lo para que ele não é lido pelo navegador mais. É tão bom quanto apagá-lo, só que ainda está lá. Vocês vão ser ótimos. Na verdade, vamos adicionar esse problema corrigido. Esse era o problema. Vamos ignorar isso. Eu desliguei-o e ainda não estava a fazê-lo. Eu estava bem. Então, com ele ligado, não funciona, com ele desligado não funciona. Não é você. Diz: “Talvez eu precise ir e eu continuo desligando as coisas, e então eu estou aqui em cima, talvez eu precise sentar os pesos da fonte aqui para ser 400 punhos. Quatrocentos e depois vire para 700. Isso também não funcionou. Eu estava perdendo um salto, eventualmente eu chegar ao ponto em que eu não sou como nenhuma idéia, nada visualmente então eu apenas comecei a digitar para fora. Ligar e desligar isso, não funcionou e então eu sou como, “Ok, vamos redigitar.” Eu só passei e comecei a digitar, e instantaneamente você pode começar a ver, é um personagem já fora e eu estava como [inaudível]. Foi isso. Não perca sua parada completa, então seus períodos. Estamos de volta? Estamos de volta. Eu vou virar isso de volta em seus exercícios bem. Basta ligar e desligar essas coisas, estamos parecendo bem. Outra coisa que vamos fazer é que ele está preso juntos, porque estamos usando um CSS reset, então esta coluna p vai ter uma alturas de linha também. É quase, está acima de uma linha de altura. É um bom lugar para começar, 1,5 rem para grande 1,25, incrível. Na verdade, neste caso, enquanto estiver acima disso, não um. Desde que esteja acima de qualquer que seja o tamanho da fonte que está sendo semente. Contanto que esteja acima de 0,8, vai ficar maior. Qualquer coisa menos que isso, e vai ficar menor. Altura de linha negativa. Não é algo que eu tenha feito. Agora eu vou passar e apenas continuar adicionando a essas caixas para que você possa pular junto. Só vou copiar e colar, mas podemos ficar por aqui se quiser. Você nunca sabe o que vai desenterrar em termos de atalhos ou se perder e corrigi-lo. Vou ter uma vista, na verdade, posso fechar isto agora, ter uma visão completa, torná-lo um pouco mais fácil. Vou usar essa tag p repetitivamente. Vou copiá-lo. Deixe-me usar meu multi cursor para manter a tecla Option pressionada em um Mac ou manter pressionada a tecla no PC. Pegando todos esses caras, aquele cara lá e colando eles. Espero que vocês ainda trabalhem se eu colar no lugar certo. - Legal. O benefício da primeira classe de linha, em vez de embrulhar esta primeira tag p e talvez ter que p tags aqui e apenas colocar uma estaca na primeira é que se os ticks ficam mais longos ou mudam, então um é marca. Vamos realmente fazer isso. Se você colocar mais de um Lorem ipsum, então Lorem, faremos um teste juntos. Se eu colocar oito palavras de novo você fica diferente, Lorem ipsum? Não, sempre o mesmo. minha aula de datilografia, você abraçou. Está tudo bem e é difícil, não consigo ver os meus dedos. Mas nós temos este terceiro e aqui vamos nós porque está fazendo a primeira linha, não importa o que você digita lá. Vai ser em massa, o que é útil. Seja doce. Se você pudesse fazer um estilo de aderência. Estilo onde você pode obter a primeira palavra. Era tudo o que queríamos fazer. Um pequeno vídeo de produção, embora nós começamos aprendendo alguns CSS legal e então nós fomos em um pouco de um júri. Mas nós aqui, nós conseguimos. Entra no próximo vídeo. 89. Como fazer o rodapé do cabeçalho com largura total, mas o interior centralizado: Oi lá. Este vídeo nós vamos fazer uma navegação ao longo do topo aqui, que parte dele se estende todo o caminho para o exterior, mas parte dele está alinhado. O logótipo e a navegação aqui alinham-se com a estrutura do resto deste website. Codificar não é particularmente difícil. Acabamos de receber um recipiente que vai 100%, aninhado dentro é seu filho, e é apenas consertado com caixa. Parece simples, mas sou má quando tentei fazê-lo. É um tipo estranho de inscrição, onde, quem vai para onde? Onde está o quê? Dentro do quê? Aqui? Toda essa loucura é explicada neste vídeo simples. Te vejo em um segundo. Você pode ver o meu dilema. Tenho duas coisas. Quero que isso vá até as bordas, mas as partes internas fiquem aqui. Basicamente são apenas duas divs aninhadas, nada a ver com esse cara aqui embaixo, esse cara não poderia existir e ainda funcionaria. Vamos esquecer o contêiner, e vamos movê-lo para baixo, e vamos pegar um pouco e fazer com que pareça bonito. Só vai, para a minha seleção, lá vamos nós. Agora está bem recuado. Este é o início da página. Eu vou adicionar outro recipiente chamado recipiente cabeçalho. Aquele cara, tudo o que ele vai fazer é esticar 100% de largura, que é exatamente o que ele faz de qualquer maneira. Eu só vou colocá-lo muito acima do início do eixo. Esse cara é o contêiner do cabeçalho. Consistentemente soletrou isso errado. Não temos que fazer uma largura, porque por padrão deve chegar à esquerda e à direita. Vamos colocar uma cor de fundo. Eu ia escolher cinza, escolher preto e arrastar isso por aí. Sim, isso vai fazer. Temos um cinza lá dentro e precisamos de um pouco de altura, então vamos colocá-lo em uma altura mínima para o momento, só para que possamos vê-lo, colocá-lo em 100 pixels. Vamos dar uma olhada no navegador. Lá vamos nós. Por padrão, ele vai esticar todo o caminho. É um elemento de nível de bloco porque é uma div para que o empurra para baixo, e tem uma cor de fundo. Vamos colocar um pouco de margem nisso enquanto estamos aqui. Vamos à margem, no fundo. Eu vou colocar, eu nem tenho certeza, 40 pixels, vamos dar uma olhada. Eu mantenho [inaudível] o errado, sim 40 pixels está bem. Agora precisamos colocar este recipiente interno, então só precisamos dentro do nosso contêiner. Na verdade, não vamos usar o cabeçalho, então podemos usar a tag pré-fabricada. Você pode entrar aqui e nós vamos estilizá-lo. O que precisamos fazer por esse cara? Vamos pegar uma cor de fundo para ele primeiro. Um cabeçalho, não precisa do estoque completo, lembre-se, porque é uma etiqueta HTML5 antiga regular, e eu vou fazer duas coisas. Vou dar-lhe uma largura, por isso vamos combinar com o que temos no contentor, por isso vamos roubá-lo. Vamos fazer largura, vamos dar uma cor de fundo. Não por nenhuma boa razão. Só porque quero mostrar onde termina. Vamos usar violeta azul, vai ser excitante. Vamos dar uma olhadinha. Com certeza, mesmo que não aconteça. Precisa de uma altura mínima. Eu vou me livrar dessas alturas mínimas, ambas em um segundo porque eu não preciso delas e está quase lá, então é a largura certa. Está dentro disso, mas precisa ser sintetizado. Lembra como se faz isso? Estes cabeçalhos precisam ser margem, a esquerda precisa ser auto e a direita precisa ser auto, mas a parte superior e inferior tem que ser zero, então zero, auto deve fazê-lo. Aqui vamos nós, agora colocamos coisas aqui e será no centro. Mas se nos livrarmos da cor de fundo, não será visualmente visível. Não é uma palavra, eu sei, mas o que vamos fazer agora para o resto do vídeo é você fazer o mesmo para o rodapé, só precisa estar fora do contêiner. Nós não queremos isso dentro de lá porque o recipiente está forçando ele a ser uma largura, então apenas certifique-se que está fora deste cara e colocá-lo em um rodapé em vez de cabeçalho, fazer exatamente a mesma coisa. Precisamos de um contêiner de rodapé e, em seguida, seu rodapé dentro dele. O que eu quero fazer agora, porém, é adicionar alguns elementos básicos para que eu possa definir algumas tarefas para você fazer por conta própria no próximo vídeo, então vamos colocar em algumas partes legais. No momento, temos um cabeçalho com um grande fundo roxo, que não precisamos mais. Adeus. Na verdade, vou deixar isso no final comentado, para que no caso de o seu não estar funcionando, você pode verificar o meu. Dentro do cabeçalho, eu quero duas tags, mas lembre-se que não há tal coisa como um logotipo, como um predefinido como cabeçalho, então você tem que adicionar nossa própria classe. Dentro disto vai haver algum texto. Bem, é apenas o meu nome, colado lá e também lá logo depois vai ser outra tag div chamada nav, mas lembre-se que há um nome específico para esse código de navegação. E se você não tiver. Não importaria. Isso funcionaria tão bem, mas devemos tentar usar a marcação semântica correta. Há algum texto sobre o contato de preços. Você pode apenas digitar isso. O que parece agora? O suficiente para sempre, mas é o suficiente para irmos para o próximo projeto, prepararmos o dever de casa no próximo vídeo, nos vemos em um segundo. 90. Projeto do curso 05 - Design do cabeçalho: Certo, é hora do projeto de classe de novo. Vamos levar a nossa batida feia para, oh, olhe para isso, a cor de fundo muda, temos uma batida diferente aqui, nós apenas estilizamos. Os requisitos são como sempre em nossos arquivos de exercícios em uma pasta chamada Projetos de Classe e abrir, que encaixaria, e estes são os requisitos. Isto é o que estamos a fazer. O texto deve estar branco no momento em que estiver preto. Essa coisa aqui é um projeto de pesquisa. Nós não cobrimos tags span ou classes span antes, mas eu quero que você dê uma olhada on-line, veja o que você pode descobrir sobre isso e veja se você pode implementar isso. Basicamente, o topo aqui, e você pode ver que parte dele é negrito e parte dele não é negrito. Vai ser muito útil aprender tags para fazer coisas como esta. Um termo tag span & span class são os mesmos, olhe para ambos. A grande coisa é que eles estão na mesma linha. Considerando que, eu poderia fazer CSS, duas tags diferentes e eles estarão em linhas separadas e então eu poderia fudge eles para fazê-los se alinhar juntos, mas tags span ou classes span são realmente úteis para isso. Essa é toda a ajuda que você está recebendo. Quero que veja se consegue descobrir e implementá-lo. As próximas coisas que você vai fazer são coisas que já fizemos antes. O logotipo deve ser deixado e a navegação aqui no lado direito, então esquerda e direita. O que mais vamos fazer? Quero que centralize isto, no centro do batedor, não no topo, verticalmente, bem centrado no caso. Faça isso por ambos. Instale os botões como fizemos. Já fizemos isso algumas vezes. Você pode ver que estes são oito tags que são viáveis, eu tenho um pairar sobre eles, eu posso clicar sobre eles, e eles têm um forro do lado de fora. Eu quero que você faça isso. O último é sentar todo o fundo para esta cor aqui. Você vê a diferença antes da luz, este vai apenas cinza claro para separar essas coisas. Quando você tiver feito isso, me envie uma captura de tela, sua prova de que eu fiz isso e está tudo bem. Antes de passar para o próximo vídeo, lembre-se de que você pode colocá-los na seção de atribuição deste site, dependendo se ele tem ou não. Todos os comentários nesta página semelhantes a uma captura de tela, polegares para cima, rosto sorridente ou rosto irritado se não estiver funcionando. Também ver essa mesma imagem, me marcar no Instagram, me marcar no twitter, usar essas hashtags, hashtag B-Y-O-L, é o que eu uso para separar os diferentes grupos de cursos que estou fazendo, e participar do Grupo no Facebook. É apenas um convite, por isso solicite para ser aceito e você será aceito, e depois publique sua captura de tela. Vá e faça isso. Se você não quiser, faremos tudo no próximo vídeo, como fazemos. Mas eu conheço as pessoas, eles se preocupam em tomar este tempo extra e mexer com ele e se perder e encontrar o caminho, são outras pessoas que realmente vão encontrar web design, ele vai ficar muito melhor quando você tem que realmente ir e implementá-lo em vez de me seguir passo a passo. Estou tentando te culpar para fazer isso desta vez, eu tentei ameaçar, decepções, eu tenho na minha cara decepcionante, eu ensinei algumas vezes, esta eu estou indo para uma culpa direta. Tudo bem. Off, faça seu trabalho e te vejo no próximo vídeo. 91. Projeto do curso 05 - Design do cabeçalho COMPLETO: Como foi? Eu me pergunto onde você ficou preso, quais pedaços foram fáceis, como você foi com seu pequeno projeto de pesquisa? Vou fazer isso com você agora, e você pode comparar notas. A minha maneira não vai ser a melhor maneira de o fazer, vai ser uma maneira de o fazer. Vamos ver. Vamos começar com o mais fácil, deixar o texto branco. Esse texto é branco, mas esse é branco, o que eu poderia fazer é ser inteligente e dizer, na verdade, em vez de tentar dizer a todos para serem brancos, eu vou encontrar esse cara, me livrar dele, e todos eles ficam negros. Vou dizer aqui em cima a minha etiqueta corporal, na verdade, vocês podem ser todos brancos, por favor. Boa, fácil. Agora precisamos separar esses caras porque eles são etiquetas roladas regulares, eles se sentam em cima do outro, nós queremos dividi-los. Qual o caminho que você usou? Qual o caminho que eu vou fazer? Usaremos Flexbox. Ele precisa ir sobre o pai, eo pai, neste caso, é recipiente cabeçalho. Nós vamos dizer, exibir, e vamos usar flex. Vamos ver como funciona. O que ele está fazendo? Isso não funcionou. Você pode ter começado da mesma maneira, vamos dar uma olhada. É por isso. Coloquei como pai, adicionei Flexbox a esse cara, contêiner de cabeçalho. Na verdade, isso afetará tudo dentro dela ou as crianças diretas, e neste caso é o cabeçalho. Quero estes tipos atacados, não este tipo, por isso temos de o pôr no cabeçalho, não no invólucro exterior. Desculpe amigo, você está errado. Precisa ser cabeçalho, precisa ser flexível. Vamos ver como funciona. Melhor, lado a lado, agora queremos que o espaçamento funcione e vamos usar o mesmo que aqui, justificar o conteúdo. Você deve dividir tudo, justificar o conteúdo, espaço entre. Vamos dar uma olhada nisso, esquerda e direita. Agora vamos levá-los para o centro no meio. Então vamos fazer alinhar itens, e vamos fazer o centro. Vamos ver como é, bom. Nós vamos deixar a tag span para o fim, principalmente porque eu quero separá-la em seu próprio vídeo, bem no final para que possamos completar psiquiatria memorável. Quando você estiver voltando para este curso de vídeo sobre como fazê-los, eles serão seus próprios vídeos separados. O que vamos fazer agora é estilizar estes. Já fizemos isso antes. Se você trapaceou e foi para sua antiga missão e pegá-los, estou orgulhoso de você. Isso é eficiência. Mas vamos fazer isso juntos. Antes que possamos realmente empatá-los, precisamos separá-los porque o momento e a tag de navegação aqui são apenas pedaços de texto. O que faremos é colocar alguns retornos e depois limpá-los. Eu quero três tags A, e eu vou usar meus pequenos atalhos, Command Option, Seta para baixo em um Mac, e é Alt, Ctrl, Seta para baixo em um PC. Eu vou colocar em minhas hashtags, e eu vou realmente apenas para trabalhar sobre estes um de cada vez, eu apenas copiar e colá-los aqui, aqui e aqui. Minha etiqueta de navegação de novo, venha aqui, amigo. Alinhando finalmente. Isso está bonito. Agora, eu posso atacá-los no fundo aqui antes da minha visualização do tablet, eu vou estilizá-los agora. Eu não vou parar todas as etiquetas A no meu caso. Você poderia fazer navegação A, então você poderia dizer que eu quero todas as etiquetas A que estão dentro do navegador, e nós poderíamos fazer isso. Então você pode ter ido por ali, está perfeitamente bem. Você poderia ir até aqui e dizer, eu vou criar uma aula porque talvez você vai reutilizar este botão. Então você chama este de “meu botão”. Na verdade, fazemos isso para todos os três ao mesmo tempo. Então a aula vai ser o meu botão, e nós vamos empatar isso aqui. De qualquer forma, não importa. Isso realmente depende se você planeja usar esses botões em qualquer outro lugar, então este método particular pode ser um pouco melhor. Vamos olhar para eles primeiro. Eles estão aqui, roxos. Eu vou primeiro fazer a cor branca. O que eu poderia fazer é fazer todos os links ativos cor de branco e desligar o subjacente. Você pode não ter feito dessa maneira, você pode fazê-lo na classe em que estamos trabalhando. Só tens de o fazer uma vez, porque aposto que tenho de fazer isto algumas vezes. Todas as etiquetas A terão uma cor de branco e a decoração do texto não tem nenhuma, que se livra do sublinhado. Aqui está. Você poderia ter feito isso aqui em baixo, teria funcionado. Preenchendo neste caso, não importa o que você adivinhou. Acho que fiz 10 de cima e de baixo e 25 de esquerda e direita. Vamos dar uma olhada. Não funciona até que você adicione a borda. Neste caso, o estilo de borda será sólido, e teremos um tamanho de borda. Isso me dá largura de borda cada vez, e nós vamos ter apenas um pixel. Vamos dar uma olhadinha. Isso é praticamente o que eu quero. Como vai ficar na minha maquete? Tinha um pouco mais de espaçamento, então eu vou colocar um pouco de margem à esquerda de todos eles. Vamos colocar uma margem para a esquerda. Quanto eu tenho? Talvez uns 20 pixels. Vamos dar uma olhada. Guarde, está bom aspecto. Clickable, você pode ir a qualquer lugar no momento. Mais alguma coisa na nossa lista? Span tag, vamos fazer em um segundo. logotipo deve ser alinhado à esquerda, eles devem ser centrados verticalmente no cabeçalho. Botão de navegação deve estar funcionando. Todo o fundo, vamos fazer isso. Essa é a cor que eu quero que seja, e tudo o que precisamos fazer é dizer, “Amigo, você é uma cor de fundo disso.” Não se esqueça dos ponto-e-vírgula no final, e espero que seja essa cor cinza claro. Por que isso não está funcionando? Porque esqueci meu haxixe. Lá vai você. É isso? Agora é hora da nossa tag span. Vejo você em um segundo no próximo vídeo onde explicamos tags span em seu próprio pequeno e saboroso vídeo. Te vejo em um segundo. 92. Como usar uma tag span ou uma classe span em HTML para alterar o texto: Oi lá. Neste vídeo, vamos tornar esta parte da linha única em negrito, deixando isso em negrito, usando algo chamado tag span. Ok, parece que estamos usando uma classe span neste caso, ele apenas envolve apenas as palavras que queremos mudar. Ele não quebra em duas linhas, e você estilizá-lo em seu CSS. Vamos entrar no treino. Como fazer, e então por que queríamos fazer isso? Além disso, se você já fez uma tag span, você não precisa desta. Virar para o final deste vídeo, eu tenho como um pouco extra secreto que vamos fazer em termos de mudar nossas preferências. Um pouco saboroso no final. Vamos começar. Ok, então vamos falar sobre quebra de palavras, eu quero enrolar apenas em torno desta linha aqui com apenas estas palavras aqui. Vamos descobrir como fazê-lo. Há duas maneiras, dependendo do seu projeto de pesquisa, depende de quem você tem. Vou mostrar-vos os dois caminhos, por isso primeiro, encontrem o texto. Ok aqui, e nós precisamos embrulhá-lo em uma tag span. Ok, então eu vou usar o meu doce turno de comando P, ou turno de controle P. Ok, e eu vou digitar em envoltório. Vamos embrulhar sem abreviatura, e vamos digitar em span. Cada lado precisa de espaço, S-P-A-N, é a minha subida. Você não tem que embrulhá-lo, você pode apenas digitá-lo em ambos os lados. Agora você tem duas maneiras de implementá-lo. Você tem CSS em linha reta, ou você pode fazer o que é chamado de classe span, então vamos fazer o CSS direto aqui. O que você faz é estilizá-lo, e você começa a fazer, o que é? É chamado de CSS em linha, vamos para o nosso ousado, e espero que deve fazê-lo. Vamos dar uma olhada, atualizar, ou se não estiver funcionando, vá ao vivo. Agora está funcionando, incrível. Tudo bem, então todas as versões, não sei por que isso morreu, mas de qualquer maneira estamos de volta, e isso tornou ousado, e isso é perfeitamente bom trabalho feito. Se fez assim, estamos no negócio. O único problema com isso é, digamos, nós também queremos colorir, então vamos mudar a cor, então você tem que colocar um ponto-e-vírgula, você digita cor como, normalmente fazemos, dois pontos, e eu vou escolher um aleatório cor da tela distante, salve-o. Vamos dar uma olhada, e é para a tela. Digamos que também queremos fazer outra coisa, e você pode ver como. Feia é a palavra. Fica longo, e tem tanta coisa acontecendo aqui. Isto deve estar aqui no nosso CSS. O outro problema é que não é reutilizável. Digamos que eu quero fazer isso de novo, ok, eu quero embrulhar outra coisa, então eu vou ter que pegar essa parte. Ok, e digamos, eu queria fazer isso até esta última palavra na nossa primeira conta aqui. Vou embrulhar o começo lá, e ele me deu automaticamente meu espaço, e o fechamento final dos vãos. Se abre, diz “permitir coisas”. Estes para fora, fecha com uma barra, e funciona, mas agora eu tenho duas vezes, e está começando a ficar grande, e pesado. Essencialmente, nada de errado com isso, mas vamos mostrar-lhe uma maneira mais elegante de fazê-lo, e isso é uma boa palavra para classe, porque sua classe, ver o que eu fiz lá. Muito bem, vamos dar um nome a esta turma. Vamos chamar isso de ousado, e aqui vamos estilizá-lo, talvez um e aqui vamos estilizá-lo, pouco antes das tábuas começarem. Ok, então o fim do meu global, então este vai ser chamado de negrito, e tipo de ver a gentileza disso, então o que é, o peso das fontes, e nós vamos escolher 700, e isso é apenas uma maneira mais elegante. Você não pode usar o jarro duas vezes, vamos lá. Apenas uma maneira mais agradável de aplicá-lo, em vez de in-line é isso, e a coisa legal sobre isso, é reutilizável, porque poderíamos chamar isso de ousado, e então podemos chamar isso como um destaque. Então podemos adicionar um monte de coisas a ele. Destaque, e poderíamos dizer, tudo bem, vai ser uma cor aleatória. O que tem hoje? Médio roxo, e podemos fazer o tamanho da fonte. Você entende o que quero dizer, certo, 20 pixels só para risos, então isso é muito bom. É um pouco mais pesado aqui. Vamos dar uma olhada em como está indo. Ok, mas eu posso reutilizar isso também, então eu posso dizer aqui, você também vai ser uma tag span de atalhos aleatórios. Lá vamos nós, você vai ter meu comando Shift P, Control Shift P. Você vai ter uma tag span, e você vai ter um span plus de destaque. Vamos dar uma olhadinha. Lá vamos nós. Tudo bem, eu vou mudar de volta para negrito, e uma coisa que vamos fazer antes de ir um pouco saboroso no final deste vídeo, eu vou mostrar a vocês algo legal, então deixe-me apenas pegar isso de volta também. Vou deixar como destaque. Certo, e livre-se disso. Como está agora? Perfeito, mas os últimos são ousados. Estou bem com isso, mas era isso que eu queria fazer. Uma coisa antes de irmos é, explicar por que não estamos fazendo isso em, digamos, duas classes separadas , ou tags P, vamos apenas dar uma olhada, e eu vou fechar o estilo para o momento apenas para mostrar como ele Parece que sim. Vou duplicá-lo. Eu estou clicando em qualquer lugar na div, e eu estou usando sua opção shift seta para baixo em um mac, e isso será ALT shift seta para baixo em um PC, e eu vou olhar para fazer isso desta maneira, e vamos imprimi-los para que você possa ver. Digamos que nos livremos da nossa aula, e vamos fazer uma maneira um pouco diferente, e eu vou fingir que eu só gosto da palavra Daniel, e torná-lo ousado de apenas Daniel. O que eu poderia fazer, é criar uma tag div para o logotipo. Posso fazer duas etiquetas P. Vou embrulhar isso numa etiqueta P. Não, errado. Vamos [inaudível] P, embrulhe com a abreviatura P tag. Ótimo. Isso é meio legal. Ok, eu vou embrulhar isso. O primeiro grande problema é, mesmo que esteja na mesma linha, porque uma tag P é uma tag de nível de bloco, mesmo que esteja em sua própria linha. Ok, vamos embrulhar isso em uma etiqueta P diferente, e vamos embrulhar, e marcar o anterior. Vamos arrumar isso. Agora, quando eu estou me movendo nesses pedaços grandes, alguns em um Mac, eu não sei se isso é verdade em um PC, eu provavelmente é. Eu tinha isso na tecla de opção, e usar minha seta esquerda e direita, é assim que saltar através dessas linhas. Em um PC dar-lhe uma tentativa. Pode ser ALT, seta para a esquerda ou para a direita, e se eu manter pressionada a tecla Shift ao mesmo tempo, então meu Mac é opção Shift, ele seleciona esse grande salto, para eu possa segurar a opção e o Shift e clicar no meu esquerdo seta, você pode vê-lo apenas destaca tudo isso. Não era isso que eu estava falando, mas essas são duas tags P separadas, e agora eu posso estilizar isso com uma classe de destaque. Vai funcionar, só que agora aqui dentro, tem o meu segundo lá. Está em duas linhas separadas. Então eu queria estar em uma linha, e uma tag span faz isso é em linha, não em bloco. Eu poderia agora ir, e encontrar a minha tag P, e dizer se é tag p dentro da exibição do logotipo, bloco inline ou inline, modo que ele não cair em suas próprias linhas, e isso iria funcionar. Meu problema com isso, porém, é que o Google, seu mecanismo de busca verá isso como um pouco separado de conteúdo deste, então vamos dizer que fizemos isso para o logotipo, então logo foi ousado, mas isso não foi. Isso acabam em duas linhas separadas, e o Google não conectaria os dois facilmente. Não sabe que você é todo sobre design de logotipo. Ele sabe que você é todo sobre design de logotipo. Então, os dois tipos separados de partes para a página, então eu gosto de ter certeza, como, especialmente para coisas como H e aquecedores, muitas vezes todos eles em duas linhas, e eu quero fazer um estilo diferente para esses dois linhas apenas, porque eu sou um designer, e infelizmente separando com tags P, ou 2H1s vai quebrar o conteúdo, modo que ele pode não string juntos para o motor de busca, e isso é apenas um pouco mais agradável. Adeus, vamos sair do seu colo. Oh, eu prometi um pequeno deleite no final. Vou abrir meus estilos, clicar duas vezes nele, arrastá-lo até aqui. Toda vez que fechava o VS Code para ir almoçar ou dormir, acordo de novo e tenho que fazer isso. Você percebe isso antes de termos que ir para ver. Estamos tipo, isso é um atalho, mas imagine se nós apenas ligá-lo para sempre, então eu vou mostrar algumas partes de passar e editar essa coisa, e mudar as preferências. É estranho em comparação com outros programas, então o que você faz é ver o comando pellet. Estamos usando um atalho, turno de comando P em um Mac. É a mudança de controle P em um PC, e você acaba nisso, e temos usado isso para fazer emits. O que queremos fazer é ir a sessões. Ok, e fora de tudo isso, queremos ir para este que diz, configurações de usuário, então abra isso, e aqui, vale a pena tirar algum tempo para ir dar uma olhada. Coisas como você era, eu gostaria de mudar isso. O que eu quero é uma palavra, então esta pequena caixa de busca aqui está procurando as sessões, e eu posso dizer, um embrulho. Esses controles e quebra de palavra está desativado por padrão, vamos ativá-lo por padrão, e podemos desativá-lo se não for necessário. Há também outras coisas divertidas lá, mas essa é a que eu queria no momento. É fechar configurações, e agora toda vez que eu abro para o resto deste curso, é quebra de palavras, espero. É isso. Span tags, nós fizemos span in-line CSS. Então, apenas uma tag span, e agora fizemos uma classe span. Se você fez algo um pouco diferente, outra forma você poderia ter feito. Se você fez algo diferente, e funciona, me envie uma captura de tela do código que você fez funcionar. Coloque-o nos comentários, ou marque-me nas redes sociais, eu estaria interessado em ver quais são as maneiras criativas que você fez funcionar. Isso é tudo para tags span. 93. Como fixar a navegação no topo de uma barra de nav fixa do site: Oi lá. Vamos fazer a nossa navegação fixa no topo. Nós vamos começar com isso onde ele rola para cima e desaparece, e então nós vamos fazer isso, onde ele fica fixo e as coisas deslizam para cima por baixo dele. É super fácil de fazer. Vamos entrar e fazê-lo agora em CSS. Primeiro de tudo, precisamos identificar a nossa coisa que vamos fixar. Não queremos prender só este pequeno pedaço aqui. Queremos toda a caixa cinzenta. Vamos dar uma olhada em como fazê-lo. A grande caixa cinza é que chamamos de contêiner de cabeçalho, esse é esse cara. Recipiente de cabeçalho, tem algum estilo aqui já. Tudo o que vamos fazer é adicionar dois bits, bit principal é posição e fixo. Super simples. Vamos dar uma prévia, e funciona. Você é tipo, uau, isso não funcionou em tudo. Ele precisa de uma largura também. Porque por padrão era uma largura de 100 por cento, mas obviamente posição faz algumas coisas estranhas para ele, não viúvas, precisamos de largura. Vamos fazer largura e vamos dizer 100 por cento. Agora deve funcionar. Quando eu rolar, não há muita coisa acontecendo. Você precisa fingir a rolagem para subir e descer. Você é como, sim, funciona. Está ignorando que está tudo escorregado por baixo. Ao colocá-lo fixo, significa que ele saiu do fluxo e não está mais bloqueando. Não está bloqueando o resto dos caras e empurrando-os para baixo. Então vamos ter que falsificar a lacuna lá dentro. Eu quero que você pare o vídeo agora e apenas pense um pouco, talvez teste algumas idéias de como você pode resolver isso. Porque o que eu mais amo sobre web design é que ele é um grande quebra-cabeça velho e há uma solução para tudo isso. Se você o viu no site de outra pessoa, isso significa que ele existe. Todos sabemos que pode acontecer que você possa ter um cabeçalho no topo e coisas que não deslizem por baixo. Você só vai pensar e tentar descobrir como fazê-lo. De qualquer forma, isso é o que eu amo no web design. É um cubo de Rubik solúvel. Faça uma pausa, pense, e eu farei com você em um segundo. Você fez uma pausa? Você teve um pensamento? Fizeste com que funcionasse? Ou discutiu algumas boas suposições? Vamos dar uma olhadinha. O jeito que pensei em fazer é que o contêiner está embaixo. Só precisa ser empurrado um pouco para baixo. Se eu encontrar o recipiente e adicionar algumas coisas para o topo, preenchimento ou margem, eu acho que ambos vão funcionar. Tentaremos os dois só por precaução, mas um pouco de estofamento para o topo. Na minha cabeça, os dois devem funcionar. Vamos colocar uns 150 pixels. Dê uma olhada. Aqui vamos nós. Funcionou muito bem. Isso é o suficiente? - Sim. Cento e cinquenta pixels. Ótima. Desliza por baixo, mas começa com um pouco de espaço. Basicamente, estamos colocando no máximo que foi. Bem, quão alto era o contêiner de cabeçalho? Tinha uma altura média de 100 mais algum preenchimento na parte inferior. Então, digamos que 140 devem corresponder exatamente ao que costumávamos ter. Então, aqueles dois juntos. Agora, de quanto precisamos para a margin-bottom? Não precisamos mais disso. Será que nós? - Não. Sempre quando você está consertando uma coisa, tente apagar as outras coisas, porque mais tarde você seria como, há uma razão para eu colocar em margin-bottom? Isso é essencial? Enquanto você está no meio disso, você está tipo, na verdade, eu não preciso disso. É assim que fazemos uma navegação fixa até o topo. Bastante fácil. Não se esqueça da largura. Para o próximo vídeo. 94. Como fazer um menu responsivo e simples para dispositivos móveis usando apenas CSS: Tudo bem. Vamos fazer um menu responsivo. Não vai ser o grande menu suspenso, vamos fazer isso no próximo vídeo, vamos olhar para um CSS simples, simples, simples, sem habilidades extras baseadas no que aprendemos até agora, apenas reorganizando as coisas. Porque no momento em que ele faz isso, ele vai para baixo e vai, Oh sim, legal, e ele começa a ouvir vai, Ah também ruim. Nós vamos mudá-lo neste vídeo, para que ele mude de formato a partir deste quando ele chegar a um certo nível, boom. É bom no celular. Nós vamos mudar isso, então não está fixo no topo. Os botões são fáceis de clicar, e é apenas uma simples remodelação de CSS com base em uma consulta de mídia. Vamos entrar agora e descobrir como fazê-lo. Nosso menu que você viu, estamos fazendo isso por causa disso. Ele se resume a um tamanho de tablet ou tamanho de celular e simplesmente desmorona. Precisamos decidir quando isso desmorona. Vamos pré-visualizar em um iPad e no telefone. Vamos clicar com o botão direito do mouse, ir para Inspect, vamos ligar aqui para baixo, uma pequena visualização do dispositivo, e no topo vamos olhar para o iPad. No iPad, está olhando para 50 por cento, vamos para 100. Na verdade, está tudo bem em um iPad. Posso empurrar o logotipo um pouco, mas é totalmente utilizável. Vamos dar uma olhada no meu iPhone lata e não é totalmente utilizável. Está tudo desmoronando e caindo em pedaços. Isso é o que vamos mirar, nosso celular, que é cerca de 375. Vamos dar uma olhada em nossa consulta de mídia. Onde é que está? Nossa consulta de mídia tablet vai ser este, na visão móvel. Vamos trabalhar dentro destas chaves encaracoladas. Logo depois do nosso celular, vamos começar a lascar com ele. A primeira coisa que vamos fazer é que precisamos anular. Mais cedo, dissemos display flex cauteloso. Nosso cabeçalho, não, não esse, este aqui. Nós dissemos como cabeçalho, que tem o nosso logotipo e nossa navegação nele, Eu quero que ele exiba flex e que fez alinhar-se ao lado do outro. O que podemos fazer para este vídeo é, eu não vou tocar no HTML, então eu vou desligá-lo, e eu vou arrastar isso para dentro, e eu mover isso para o outro lado, o luxo de trabalhar na minha parte significa que podemos vê-lo Por aqui. Eu vou movê-lo para um 100 por cento e eu poderia torná-lo mais perto para uso para que o editor não tenha que zoom para fora muito longe. Vamos tentar isso. A primeira coisa que queremos é não queremos lado a lado. Há muitas coisas para fazer, não tem que ser esta primeira. Este companheiro cabeçalho está exibindo flex, vamos substituir isso no meu celular. Aqui em baixo, eu vou dizer, cabeçalho, não, não é uma classe, é uma tag HTML predefinida, então cabeçalho vai exibir, em vez de flex, vamos voltar para o bom bloco velho, então eles empilham em cima de uns aos outros. O logotipo está lá agora o navegador está embaixo. Agora esses pequenos caras nav não estão exibindo bloco também, mesmo que o cabeçalho disse itens nav ver esses pequenos a-tags que usamos, eles parecem estar fazendo suas próprias coisas. Vamos dizer, e o que queremos? Os a-tags que estão dentro do nav você pode exibir bloco também? Bloco de exibição. Agora estão todos em cima um do outro. Perfeito. Isso é o primeiro a fazer tudo centrado. Eu poderia fazê-lo para o nav e o cabeçalho, mas nós também devemos fazê-lo para cada coisa, bem o logotipo, então nós fazê-lo para o cabeçalho porque isso vai fazer tanto o texto do logotipo e espero que todo o texto dentro dos botões. Vamos alinhar texto e vamos tentar mantê-lo no centro. Lá vamos nós, legal. O logotipo, vamos dizer.logo, lembre-se que não é uma tag HTML predefinida, mesmo que pareça que deveria ser. Vamos dar-lhe uma altura média de 50 pixels. Queremos um pouco de estofamento no topo também. Na verdade, poderíamos fazer estofamento superior e inferior em vez de uma altura mínima, vamos fazer isso. Fazemos preenchimento e vamos fazer, superior e inferior, vamos fazer 40 pixels, e esquerda e direita vai ser zero. Você realmente não tem que colocar px, você apenas colocar em zero e zero é qualquer medida que você está indo para usar, ponto-e-vírgula. 40 de cima e de baixo e zero à esquerda e à direita. Isso nos deu algum espaço. A única outra coisa real é que isso precisa mudar para o nosso verbage. Há alguma margem de largura nesses caras. Imaginei que seria margem para este tipo. Margem esquerda eu vou definir para zero. Isso não funcionou, então eu tentei porque eu tinha olhado para o HTML já lá, ambos é um a-tag dentro de um nav, mas nós também temos esta classe aplicada. É o que vou tentar a seguir. Em vez de estar nessa, eu vou dizer, e nossa classe chamada botão de navegação, vamos tentar a mesma coisa aqui. Diremos que a margem esquerda é zero. Será que ele funciona? Não funciona. Chamei-lhe a coisa certa, mas Nav, chama-se meu botão, e estendi-o. Que meus amigos é uma maneira simples e agradável de redefini-lo apenas no celular. Não é grande, quero dizer que você vai fazer isso no próximo vídeo, mas é muito fácil de implementar. Vamos dar uma olhada. Ipad, eu estou digitando eu posso clicar em todas essas coisas, vamos torná-lo 100 por cento. Eu posso tocar em todos eles, mas quando eu chegar ao meu telefone, ele apenas muda o layout, ainda parece bom, uma coisa que não parece bom, é esconder um monte de pedaços então precisamos empurrá-lo para baixo, ou neste caso, Eu provavelmente quero desligar o menu de correção porque ele está ocupando uma quantidade tão grande de imóveis no meu telefone. Vamos dar uma olhada em fazer isso. O que o controla aqui no topo? Foi chamado de correção de posição, lá está ele. Meu contêiner principal tinha posição fixa aqui no meu contêiner de cabeçalho. Eu tenho um contêiner de cabeçalho? Eu não sei. Vamos fazer este. Recipiente de cabeçalho, não quero reiterar tudo isso. Quero me livrar disso. Em vez de posição fixa, vamos torná-los relativos. Relativo significa que sou parente de todas as outras pessoas na página, então estou ciente do que elas estão fazendo. No momento, você pode ver essa grande lacuna? Isso está vindo de mais cedo, lembre-se que disse recipiente, coloque um enorme estofamento grande no topo. Agora eu preciso dizer estofamento do recipiente no topo, por favor, vá embora. Aqui em baixo, eu não estou colocando nenhuma ordem real, apenas tentando colocar alguma hierarquia nele. Vamos fazer estofamento. Acho que pode ser zero. Vamos definir para zero. Vamos dar uma olhada. Ele rola para cima o que é legal, mas eu quero um pouco de preenchimento, talvez apenas 40 pixels para coincidir com a lacuna por baixo, e isso é muito simples. Vamos dar uma olhada em responsivo. Mobile, há uma lacuna estranha acontecendo aqui. O que eu poderia ter que fazer é realmente implementar tudo isso muito mais cedo do que eu pensava. Ipad, mas não há terra de nenhum homem de provavelmente telefone horizontal. Vamos consertar isso. Tudo o que eu preciso fazer é que eu quero que você venha mais cedo e isso é o que nós fizemos. Eu vou dizer que você sai, você está realmente melhor antes de fechar as chaves desta aqui, provavelmente vai ser melhor fazê-lo lá. Desce Poof, e entra em um belo botão gigante. Parece bem em terra minúscula. Incrível. Apenas CSS simples agradável, mudando o layout do CSS, mas não é para isso que você veio aqui. Você quer fazer aquele pequeno menu maior, nós clicamos nele e faz uma coisa drop-down pouco legal em nosso telefone celular. Lembre-se que você não tem que ter isso, mas é muito legal. Para fazer isso, vamos aprender um pouco de jQuery e vamos fazê-lo no próximo vídeo. 95. O que é Javascript vs. Jquery para sites em web design: Olá você, não me vejo por um tempo cara a cara, estamos presos atrás da tela por muito tempo. Este vídeo vai falar sobre algumas coisas. Vamos falar sobre o que o JavaScript faz, a diferença entre JavaScript e jQuery. Vamos ver por que não podemos usar CSS, como temos feito até agora, e então vamos olhar para alternativas para jQuery. Existem diferentes bibliotecas concorrentes. Então vamos entrar e falar sobre isso. Primeiro passo, o que é JavaScript? É fácil de entender quando comparamos com o que já sabemos. Temos HTML, CSS, estamos bem com eles. HTML são as coisas. Eles são os títulos que estão na página, as tags div, as caixas, os itens de navegação, o rodapé, eles são as coisas que estão na página e eles não fazem muito, eles são muito estáticos. CSS é o empatamento dessas coisas. Nós os tornamos azuis ou 100 de largura. Então nós armazenamos esses blocos HTML. Agora, onde JavaScript se encaixa é a interação entre o site e eu como um ser humano, porque no momento nosso site realmente não faz muito. Você pode clicar em links e saltar ao redor, mas é tudo muito emocionante. Começar coisas é o quê? JavaScript faz. Neste caso em particular, vamos estar olhando para a criação do Menu Móvel e clicando sobre isso, e obtendo-o para baixo. É uma interacção indirecta. Nós fizemos isso no CSS embora, e eu vou discutir por que não podemos fazê-lo neste caso, mas isso é um pouco de interação humana. Pode ser um controle deslizante de imagem. Então, clique à esquerda e à direita, você percorre as imagens. Faremos isso mais tarde no curso também. Vamos ter JavaScript fazendo esses cliques, puxando imagens e deslizando-as para fora, parte da interação humana. Menus com abas. O que mais? Modais pop-up [inaudível] em telas. Isso é tudo JavaScript. Isso é o que o JavaScript é. Agora, o que faz jQuery em relação a ele? Você vê isso online lotes, que eles podem ficar dobrados juntos. JavaScript é o hard-core nos bastidores, visão big boy desta linguagem de programação. Isso é o que as pessoas usam por um longo tempo, para fazer todas essas coisas interativas, os controles deslizantes de imagem e os modelos pop-up. Alguns design inteligente é desenvolvedores web decidiu realmente escrever um Menu móvel, drop-down aqui. Para ligar e desligar isso, tivemos que escrever, talvez, 5-6 linhas de código para conseguir esse trabalho. O que eles viram foi como se estivéssemos fazendo isso todas as vezes. Por que temos que tirar tudo isso? Então o que eles decidiram é, vamos fazer essa outra coisa, vai acontecer com o código jQuery, e é uma biblioteca de, vamos pegar as seis linhas, vamos esmagar todas elas e vamos colocá-las em uma pequena função ou pequena classe. Esta classe aqui é chamada de alternância. Para mim como um web designer, eu só tenho que dizer o pequeno ícone para o menu, eu quero que você alterne. O que o navegador vê, ele vê alterna e, em seguida, descompacta todo o código que está sendo amontoado em alternância, e ele lê as seis linhas de código. Então é apenas uma abreviação da linguagem de programação maior, que é JavaScript. Espero que isso explique. Terminei o vídeo e achei que era uma explicação média. Vamos mostrar rapidamente como é o código. Eu também quero mostrar que o site jquery.com. Este é o pé base inicial e você pode ir para a documentação da API, e eu vou rolar. Estas são todas as coisas diferentes que ele pode fazer. Vou rolar para baixo para alternar. Vamos encontrar o velho botão normal. Dentro de uma alternância, que vamos usar para o nosso menu, vai ser, onde está a versão longa? Então essa é a versão longa do mesmo. O que eu digo é, eu quero esta tag div chamada “foo” para alternar a exibição. Isso é fácil de escrever. Isto é o que realmente está acontecendo no JavaScript. Você pode ver que a sintaxe é mais fácil, faz mais sentido, não é tantos iguais, e a linguagem é apenas mais fácil de entender. Então jQuery é apenas empacotar isso e amarrá-lo em sintaxe ligeiramente menor, mais fácil de entender. Entendeu agora, certo? De volta ao cara sem barba nas aulas de leitura. Uma das outras coisas que quero que discutamos é por que não podemos usar CSS? Porque fizemos um menu suspenso mais cedo. Lembre-se, e usamos para a nossa bicicleta, uma oficina de reparação de bicicletas. Nós apenas pairamos sobre ele e o menu suspenso veio. O que posso fazer isso pelo voleibol? Agora uma das razões é que eu posso pairar como deixe-me pegar meu telefone bem ali. Eu posso pairar com o mouse, eu posso colocar o mouse e pairar, mas eu não posso passar o mouse com o meu telefone. Não sabe que seus dedos pairando, então não podemos usar essa função simples. Temos que clicar nele. CSS não gosta de fazer isso. É um código de estilo. Podemos pedir CSS em pedaços para tentar fazê-lo fazer as coisas que queremos, mas é para isso que o JavaScript é criado. Esse tipo de interação humana, então vamos usar isso. Mas ainda usando JavaScript vamos trapacear um pouco e usar uma das bibliotecas. Nós vamos usar jQuery neste caso. É por isso que não podemos usar o mouse ou roll-over CSS. Certo, próximo ponto. A última coisa que eu quero cobrir é jQuery é apenas uma opção. Então JavaScript está sempre lá na parte inferior, e em cima disso está sendo construído jQuery. Tem sido por aí há muito tempo, faz exatamente o que eu precisava fazer como um web designer. Mas outras pessoas inteligentes eu gosto jQuery, mas eu quero fazer algo um pouco diferente. Então algo como React é mais recente e faz coisas diferentes para jQuery. É apenas uma comparação não é o caminho certo, mas é apenas uma maneira diferente de interagir com o JavaScript. Existem estruturas como Angular e View também. Todos eles estão usando JavaScript e facilitando a construção de outras coisas como, é incrível o que você pode fazer com JavaScript em termos de produtos SAS ou em software de navegador. Isso é o que jQuery é, uma opção que você pode usar para interagir com JavaScript. É isso. Eu preciso me barbear aqui é onde eu atiro enquanto estou treinando. O que sobre isso? Vamos voltar atrás da tela e construir o menu real. 96. Como fazer uma barra de navegação de 3 linhas de menu Hambúrguer para um site para dispositivos móveis: Oi lá. Neste vídeo vamos criar um Mobile Nav Sandwich que quando você clica nele, um celular aparece. Ele clica de volta para trás quando você clica nele novamente. Estamos gongo para usar jQuery para fazer tudo em VS Code. Vamos entrar agora e descobrir como fazê-lo. Para este, vamos fechar nosso site atual e vamos colocá-lo em suas próprias páginas apenas para que você tenha uma versão disso, como uma versão de baunilha. Porque se começares a implementá-lo agora no nosso site, está bem? Há muitos desses resets que podemos ter que lidar com e muitas coisas que você pode não, então ele vai fazer uma boa versão pura dele. Em seguida, no próximo vídeo, vamos integrá-lo novamente em nosso site. Vamos fazer um novo documento, está bem? Arquivo, Novo. Este vai salvá-lo. Vou chamar este, como vamos chamá-lo? Vamos chamar este Jquery-nav.html. Certo, vamos salvá-lo. Nós vamos colocar em nossa etiqueta normal e nós vamos ligar dois arquivos a ele. Vamos ter alguma CSS. Vamos para Novo Arquivo. Eu vou salvar isso e vamos chamá-lo de jquery.nav.css. Legal, e teremos mais um arquivo, ok? Que não tivemos antes é um arquivo JavaScript. Vou chamá-lo de this.js. Provavelmente é mais comum chamá-lo talvez script ou scripts plural k.js. Não importa o que você chama. Ok, são cerca de três arquivos. Vamos vinculá-los todos juntos ao HTML. No topo aqui antes do fechamento do HID, vamos vincular CSS, então um link CSS. Como não é estilo frio, é chamado j. deixe-me ir, jquery.css. Agora queremos vincular nosso JavaScript, certo? Neste caso, não é link, é chamado de script. Queremos esta chamada fonte do script, está bem? A fonte vai ser, então agora pasta raiz e é chamado jquery.js. Legal, então conectamos essas três páginas. Vamos separá-los um pouco. Esta é uma pequena opção legal. Agora que temos três ficheiros, está bem? Posso arrastar este e dizer que o quero aqui e depois agarrar o JS e tê-lo aqui. Vou subir para três. Olhe para isso, então a primeira coisa que precisamos fazer é colocar no pequeno ícone de navegação. Você pode ter qualquer coisa. Pode ser um botão, pode ser texto. Vamos ter em nosso corpo aqui, teremos uma imagem. Ok, então nós vamos usar uma imagem e ele vai, eu tenho esta para você em seus arquivos de exercícios, ok? Tem um aqui. Projeto 3 é um ícone aqui chamado Icon Burger Menu. Parece que sim, está bem? Agora eu consegui isso da fonte incrível. Acabei de baixar o SVG e você pode decidir usar a versão do ícone. Lembre-se, aprendemos a fazer ícones em uma página onde colocamos na tag de cabeça e vinculamos a ela usando a tag i. Não se preocupe. Só estou usando uma imagem, você pode usar o que quiser. Vou copiá-lo, encontrar a minha pasta local, e vamos colá-la nas minhas imagens. Errado, desktop, projeto 3, colocar em imagens e colá-lo e lá está ele. Certo, então vamos encontrar essa. Está nas imagens. Imagens/Icon-Burger-menu, ok? Este vai ser o ícone do meu menu móvel. Ter o hábito de escrever textos antigos. Agora vamos visualizar em um navegador. Desligue-o, ligue-o novamente. Ícone gigante. Ok, porque este é um SVG pode ser dimensionado para os limites do documento e agora o documento passa a ser tão largo, ok? Vai todo o caminho. O que vamos fazer é dizer, na verdade, antes que isso feche a etiqueta de imagem, vamos adicionar um estilo de largura, ok? Vamos dizer a sua largura de 20 pixels. Guarde, vamos dar uma olhada, 20 pixels. Eu vou fazer o meu um pouco maior porque nós estamos fazendo um tutorial que pode ser um pouco mais fácil de ver em vez do adjacente o editor ter que ampliar e voltar para fora novamente. Provavelmente não vai ajudar nada. Mas de qualquer forma, temos o nosso ícone, está bem? Pode ser apenas um texto com uma etiqueta por aí. Isso não importa. Agora precisamos separadamente disso, ok? Precisamos dos itens do menu. Vou colocá-los numa etiqueta de navegação, está bem? Esse tem que entrar em uma etiqueta de navegação, mas é uma boa prática em HTML5, certo? Eu quero quantas etiquetas? Eu vou ter talvez três etiquetas a nós vamos combinar com o que estamos fazendo no próximo. Atalhos aí? Ele vai para hash e dentro disso vamos combinar o que estávamos fazendo antes no último projeto. Indo sobre preços e entre em contato conosco, legal. Vamos dar uma olhada no que temos. Nós não vamos estilizá-lo, vai ser coisas azuis feias, mas nós sabemos como estilizá-los em botões bonitos. Homens, eu tenho névoa no meu meio não consigo me livrar dele então eu vou parecer um pouco rouca neste vídeo. O que vamos fazer? Queremos desligar isso porque não quero que apareçam. Eu só quero que eles apareçam quando clicamos no botão e isso é o que JavaScript vai fazer. Ele diz: “Quando este botão é alternado, isso vai aparecer e fechar novamente.” O que vamos fazer é desligá-lo com algum CSS. Preciso controlá-lo. Isto vai ter uma aula de navegação de, vou chamar isto de equipamento móvel. Bom. O que eu gostaria é, eu gostaria de estilizar aquele equipamento móvel. Navegação móvel só para desligarmos, está bem? Já fizemos isso antes. Nós não mostramos nenhum para desativar as coisas e ativamos com consultas de mídia. Agora vamos ativá-lo e desativá-lo usando JavaScript. Não deve aparecer agora. Impressionante, nada está funcionando agora, como se nada estivesse conectado, certo? É o JavaScript que vai conectar o para então no momento em que temos apenas ícone sentado por si só, temos um nav por baixo dele que é desligado por padrão, não conectado. A próxima parte, precisamos chamar nossa biblioteca JavaScript ou biblioteca jQuery. Porque JavaScript é entendido por padrão no navegador, mas jQuery precisa de um pouco de edição de biblioteca no topo aqui, assim como nós carregamos lembrar fontes do Google na parte superior, porque o navegador não sabe o que Google fontes para começar. Tem que ser carregado aqui em cima. Mesmo com CSS recebido, nós carregá-lo no topo. Precisamos ir e encontrá-lo e code.jquery.com é um bom lugar. Existem outros CDNs para que uma rede de entrega de conteúdo, mas jQuery é um grande. Isso é o que a maioria das pessoas usa e precisamos carregá-lo na página. No momento, estamos no jQuery 3, ok? Com 3.4.1 no futuro será 3.5.1 ou seja lá o que for, está bem? Atualize a versão mais recente, mas você não precisa continuar atualizando, ok? As coisas que vamos fazer agora são coisas que estão nele há muito tempo. Podemos usar basicamente qualquer um desses. Vamos usar a versão descompactada e aqui diz: “Este é o script para colocar em seu site.” Vamos clicar nesta pequena área de transferência de cópia. Agora, se você não tem tudo isso, eu tentei tornar as coisas mais fáceis. Em seus arquivos de exercícios, projeto 3 eu tenho, como ele chamou? jQuery Mobile Nav. Abra isso e ali está o CDN. Essa é a ligação em que estamos, certo? Isto é o que acabei de copiar. Pode ir pegar isso, se quiser. Cole isso no código, nós vamos escrever se você quiser trapacear. Na verdade, são as duas vezes. O seu ficará mais bonito, está bem? Precisamos colar isso na cabeça do nosso documento. Talvez eu faça isso um pouco maior. O que vamos fazer é por baixo daqui, vamos colá-lo. Agora não estamos, pegou a coisa errada. Copiar para área de transferência. Copiado, vamos colocá-lo em código VS. Não é copiar, você mente. Vou pegar essa versão, e ela vai na tag de script. Assim como o guião está a esfriar, o guião fica frio a seguir. Agora, isso é um grande problema porque isso está ficando frio depois. Esta é a biblioteca, isso está dizendo ao navegador tudo o que ele precisa saber sobre jQuery para que ele possa executá-lo, mas ele está carregando da maneira errada. Ele precisa aprender tudo antes que possa executar o seu. Isso precisa estar acima, e então isso vai por baixo. Eu vou fechar o painel CSS aqui porque nós não precisamos mais dele, e vamos olhar para o JavaScript que é necessário. Primeiro, vou começar a escrever esse JavaScript, e queremos dizer-lhe antes de tudo que estamos lidando com jQuery. Para que isso funcione corretamente, precisamos ter certeza de que antes de começar a fazer qualquer uma das coisas que eu quero que ele faça, como a alternância, eu preciso ter certeza de que a página está carregada. Então precisamos dizer que o documento precisa estar pronto antes de você executar, uma função, ou a função que eu vou escrever. Uma função é apenas um espaço reservado para o que eu quero fazer. Você dá alguns parâmetros colocando em um par de colchetes, e dentro daqui você pode executar parâmetros, vamos deixá-lo em branco logo depois disso, mas antes que o último colchete é onde colocamos nossas chaves, e dentro dessas chaves é onde toda a magia precisa ir. No final, você coloca um ponto-e-vírgula como CSS para dizer que eu terminei. No momento, tudo o que está fazendo é dizer, sim, estou usando jQuery. O que eu gostaria que você fizesse é não usar todas as coisas neste colchetes até que a página esteja carregada. Como CSS, vamos colocar em um retorno apenas para separá-los, você não pode ter tudo junto. O que eu gostaria de fazer é, novamente, eu quero ter certeza que ele sabe que estamos executando jQuery, mas a abreviação para jQuery é apenas um sinal de $. Então ninguém escreve jQuery, eles apenas escrevem $ sinal. O que gostaríamos de fazer é dentro de colchetes, gostaríamos que ele, colchetes e, em seguida, dentro de parênteses, você quer dizer que aspas com pequenos pontos simples. Eu quero agora me anexar ao ícone. No momento em que temos uma imagem, há um ícone e SVG, temos uma maneira de nos conectar a ela, então vamos dar-lhe um nome de classe. Nós vamos dizer que você tem uma classe de, vamos chamá-lo de menu de hambúrguer. Quando o documento estiver pronto, eu quero que você procure o menu de hambúrguer e quando ele estiver no clique, eu gostaria que você executasse esta função. mesmo mais uma vez, colocamos os colchetes, logo depois e entre os dois últimos, colocamos em um colchetes, mas mantemos em. Estamos dizendo, aguarde o documento carregar, em seguida, execute esta função. Esta é a função porque está apenas dentro das chaves, então quando estiver pronto, faça isso. O que ele está fazendo? Está dizendo, procure o menu de hambúrguer e espere por um clique, e então faça essa outra função. Esta função, mesma sintaxe, $ sinal, digamos que este é jQuery dentro de nossas vírgulas invertidas, eu preciso descobrir qual é o nome do que é. O que eu gostaria que você fizesse é encontrar na minha página, meu navegador móvel e ligá-lo. Vamos nos certificar de que é celular, eu gostaria que você alternasse. Alterne os colchetes e termine isso. Não quero fazer mais nada. Agora, toggle realmente não faz nada além de ele vai olhar para o CSS que temos, e sintonizá-lo para o seu oposto. No momento em que ele vê exibir nenhum, ele vai alternar isso e tornar-se bloco de exibição. Impressionante, isso deve funcionar. Poupe-o, vamos dar uma olhadinha. Você alternar, e que meus amigos é uma navegação móvel super simples, super eficaz usando JavaScript, realmente apenas jQuery. Agora, algumas outras coisas, coisas importantes a saber sobre o uso do JavaScript está no código do Visual Studio aqui, e é muito comum ter as tags de script, é qualquer coisa que seja JavaScript, então temos duas partes, e é muito comum ter as tags de script, é qualquer coisa que seja JavaScript, então temos duas partes, Tenho o meu que fizemos e, em seguida, temos este que é o CDN que está sendo entregue por Code.jquery.com. Isso é tudo JavaScript, é melhor tê-lo na parte inferior da página antes do fechamento do corpo. É estranho, acha que vai ver na página? Vamos dar uma olhada. Nada muda, ele ainda funciona e não pode ser visto porque está dentro dessas tags de script. É uma prática muito comum que você não pode tê-lo no topo, e é apenas prática comum tê-lo na parte inferior. O principal motivo é a velocidade de carregamento da página. Esta é realmente uma grande biblioteca para baixar, então o que pode acontecer é que o navegador pode carregar todas as coisas na página super-rápido para que o usuário possa vê-los, e depois, quando ele chegar a ele finalmente para carregar as páginas, ele pode carregar os scripts e pode levar o tempo para fazer isso, mas estamos falando como segundos aqui, milissegundos, então é bom tê-lo no topo. Mas se você tem pessoas que estão correndo através de seu site como clique, clique, clique, o que pode acontecer é que eu vou chegar a uma página, tentar e clicar em algo e nada vai aparecer porque ele ainda está tentando trabalhar seu caminho através disso. A outra coisa importante é ter certeza que a ordem está certa. Então você precisa carregar a biblioteca primeiro, depois seu script. Nós temos o básico e um par de pequenas coisas que você pode fazer para ajustar o jQuery, esta alternância e valor aqui podemos realmente adicionar alguns atributos a ele. Podemos dizer entre aspas, podemos dizer vá devagar, salve. Vamos pré-visualizar. Vamos clicar nele, vai muito devagar. Você pode imaginar se você pudesse digitar rápido. É verdade, você pode fazê-lo ir rápido. Clique nesse, agradável e rápido. Se você é realmente particular, você pode digitar em milissegundos. Você se livra das citações e apenas digite diretamente. Isso é um segundo, 1.000 milissegundos, então eu poderia colocá-lo em três segundos. Vamos dar uma olhada. Extremamente lento. Aqui vamos nós, o que mais? Vou voltar a deixá-la. Padrão, parece bom. Nós acabamos de usar simples alternância antiga. Existem algumas outras formas semelhantes de ligá-lo e desligá-lo, alternando. Eu estou apenas no W3schools.com, é muito bom e claramente descrito e colocado como os tutoriais. Vamos olhar para JavaScript, jQuery, e estamos olhando para esses efeitos aqui. Eu acho que como ele mostra apenas o nosso velho controle regular, e está aqui. Você pode fazer um fade jQuery. Vamos dar uma olhada. Você pode ver que é um jQuery FadeToggle. Precisa ser esse caso de camelo, o que é estranho. Nós ainda não fizemos isso porque você pode entender por que sua camelizada, tem uma grande corcunda no meio ou tem parte superior lá, então tem que ser exatamente escrito dessa maneira. Eu posso dizer fade, T maiúsculo para alternar e vamos dar uma olhada. Volte para o meu menu lá está, FadeToggle. Há uma alternância deslizante, e deslize alternar capital T. Excitante. Nós não vamos passar e começar a estilizar esses menus porque temos essa estrutura funcionando, mas agora precisamos implementá-la em nosso grande site, porque no momento só temos um celular nav. Queremos fazer toda a mudança de desktop para mobile, vamos fazê-lo no próximo vídeo, mas basicamente todo este grupo, vamos desativá-lo e só ligar tudo para celular e vamos ter um menu completamente separado para área de trabalho. Fácil de dizer, vamos e realmente implementá-lo no próximo vídeo. 97. Como alternar um menu de navegação do desktop para o celular: Oi, aí. Este vídeo, vamos implementar nosso MobileNaV realmente simples que construímos no último vídeo em nosso site completo, onde ele vai deste para desktop para celular com um pequeno menu suspenso doce. Agora, nós mantivemos este separado para que pudéssemos realmente nos concentrar na implementação jQuery, mas agora, vamos dobrá-lo em nosso site maior e como este site aqui, isso é o que temos atualmente. Nós temos botões e o que fazemos é ajustar o espaçamento no tablet e celular e eu gosto disso porque ele vai realmente nos mostrar o que acaba acontecendo no mundo real quando você está tentando implementar coisas e é Nunca tão simples onde você só tem isso limpo, claro. Você tem que lutar com pedaços de código existentes como o nosso caso, nós temos essa coisinha estranha aqui. Nós vamos ter que desescolher isso para tentar fazer isso funcionar. É mais um exemplo prático do mundo real das coisas que você pode encontrar quando você está tentando implementá-lo. É uma introdução muito longa, vamos começar. Vamos abrir nosso site existente e abrir index.html, clicar duas vezes nele, abrir style.css, arrastar estilo para aqui e vamos começar. A primeira coisa que quero fazer é desligar o navegador quando ele chegar na tela do tablet. Minha maquete decidiu ir a este menu móvel mesmo no tablet. Vai estar ligado para os dois. Vamos desligar o que temos atualmente e, na verdade, vamos apenas pré-visualizar, o que temos? Ele aparece na página errada e chega até aqui e muda, foi o que fizemos anteriormente. Que é definitivamente uma maneira fácil de fazê-lo. Vamos fazer isso sem JavaScript agora. O que eu quero fazer é em vez de girar por aí, eu quero apenas desligar todos esses botões e nós vamos ligar a nossa versão móvel. No código VS vamos encontrar o nosso nav. Este nav aqui vai desligar quando chegar ao tablet. Chego à vista do tablet, vou verificar novamente se não tenho mais nada tentando controlar Nav isso aqui. Eu vou dizer, logo acima, eu vou dizer, “Nav”, e você começa no modo tablet, “não exibir nenhum”. Agora você está tipo, “Ei, que tal este?” Nós fizemos tudo isso surpreendente nos últimos vídeos para fazê-lo fazer todas essas mudanças estranhas de exibição para celular. Esta coisa aqui é redundante. Há muitas coisas que são redundantes e eu meio deixando isso no curso porque não é tão fácil, nunca é tão fácil como apenas fazer o que eu fiz no primeiro vídeo e apenas adicioná-lo, há sempre como, “oh, este bit controla tudo, este bits faltando com ele. Este vai ser um pouco confuso”, mas por uma boa razão, para que possamos aprender a corrigi-lo. Vamos ignorar tudo isso. Vamos nos certificar que ele realmente desliga para, pronto? Aqui está. Quando ele desce para o modo tablet e para o celular, ele desliga. O que queremos fazer agora é ter algo mais a acrescentar em uma pequena linha listrada. Vamos voltar ao código VS. Debaixo de navegação, o que vamos fazer é criar outra tag, e vamos chamar isso ume.mob-wrapper. Vamos colocar tudo dentro disto. Dentro do meu mob-wrapper, vamos adicionar o nosso ícone das três linhas listradas do meu navegador móvel mais um conjunto destes. Vamos trapacear, vamos pegar nossa imagem, abrir jQuery nav, e este é o pedaço que queremos. Esse é o ícone que trouxemos na imagem, SVG, nós adicionamos um pequeno texto. Nós adicionamos uma largura e nós demos uma classe de burgermenu. Nós só vamos trapacear porque nós estamos tipo, “já fiz isso.” Temos um domínio, acontece que é errado, aqui vamos nós. Vamos verificar se ele realmente aparece, limpar tudo. Aqui está ele. Ele está na página, mas quero desligá-los porque ele aparece o tempo todo. Só quero que ele apareça quando chegarmos ao celular. O que fazemos é que temos três potes, lembras-te da Global? Que é, no nosso caso, este top. Depois chegamos à visualização do tablet, depois temos a visualização móvel e, como o desligamos, vamos transformá-lo em um tablet. Vamos encontrar o fundo aqui, no entanto, evitamos a última chave encaracolada. Toda a classe média está toda embrulhada e abrindo cinta encaracolada e fecha todo o caminho até aqui. Então você sempre terá dois no final, se você não fizer, as coisas vão dar errado. Vamos dizer, quem queremos em.mob-wrapper? Eu gostaria que você, meu amigo e tudo dentro de você se transformasse. Na verdade, não queremos fazer nada por ele ainda. Eu quero cortá-los para fora e eu quero que ele na vista de desktop para desligar. Pouco antes do fechamento ou abertura do tablet, eu vou dizer, “Mob-wrapper você é uma exibição de nenhum, por favor.” Ele está desligado na área de trabalho, o que é perfeito, mas ele nunca mais liga. Agora precisamos dizer, “então ele está desligado na área de trabalho e, em seguida, ele vai dizer, “Tudo bem, no tablet, no entanto, eu gostaria de ligá-los.” Aqui em baixo antes que eu me encaixe, você vai dizer, “bloco de exibição” e ele está de volta. É desligado no desktop e depois no celular, ou pelo menos no tablet neste caso e como não dizemos desligar novamente, ele só flui para o celular, então não precisamos dizer isso novamente no celular. próxima coisa é eu quero todos os bits fora do lado que nós vamos desligar em todos os botões que vão saltar fora, que nós queremos ativados por este pequeno clique. O que precisamos é que podemos ir e roubar tudo isso. Todos esses botões aqui, na verdade, vamos pegar esses botões. Há a minha imagem debaixo da minha imagem antes que o nosso invólucro feche. Aí está meu invólucro, termina ali, logo após a imagem que vou colocar nesses caras, esses caras precisam estar em sua própria <div> etiqueta. Por quê? porque eles estão apenas flutuando um pouco no momento em que eles não têm sulcos. Esse cara está sozinho. Esses caras, esses três, esses caras precisam ser amarrados juntos. Command Shift P, Control Shift P. Comece a digitar wrap e olhar para esta abreviatura de wrap. Eu vou embrulhá-los em algo chamado, algo que eu vou inventar agora chamado, mob-nav, nav vamos lá Dan não pode ver as chaves, mob-nav e tem que ter um período na frente dele. REF abreviação.mob-nav. Esses caras aqui vamos dar uma olhada, eles devem estar desligados na área de trabalho porque eles estão todos envolvidos nessa coisa chamada mob-wrap que eles estavam ligando e desligando, se você ainda vê-los, eles devem estar desligados na área de trabalho porque eles estão todos envolvidos nessa coisa chamada mob-wrap que eles estavam ligando e desligando, se você ainda vê-los, Significa que você provavelmente tem esses caras depois do fechamento <div>, ele precisa estar lá dentro. Abra a área de trabalho, tablet que ambos ligam. A estrutura é toda estranha. Vamos consertar isso para a última coisa que queremos fazer é apenas fazer essa coisa clicar no punho e fora. Vamos desativá-lo por padrão. Vamos abrir a máfia, é por isso que tem um invólucro porque não os tiramos todos de uma só vez. Eu vou dizer na visualização do tablet,” .mob-nav. Eu gostaria que você apenas estivesse fora de exibição, exibição, nenhum.” Não consigo vê-los. Eu gostaria de ativá-los com JavaScript quando essa coisa é clicada. Para implementar nosso JavaScript ou nosso jQuery, neste caso, precisamos fazer duas coisas, lembre-se que precisamos carregar a biblioteca, que é todas as regras em torno JavaScript ou jQuery e, em seguida, precisamos realmente colocar em torno de codificação personalizada. Assim como fizemos antes, vamos aos nossos arquivos de exercícios. Em seus arquivos de exercícios, há um projeto três há um aqui chamado jQuery Mobile Nav. Abra isso e esse é o CDN, que está ligando a biblioteca para dizer ao nosso navegador como tudo isso funciona e lembre-se onde colocamos, não podemos colocá-lo aqui na cabeça, mas é mais comum colocá-lo aqui em o corpo. Falamos sobre as razões pelas quais antes e uma das coisas que acontece é quando eu colá-lo, você pode ver meu arquivo fica verde aqui em cima e um monte de erros aparecem na parte inferior aqui. É porque estamos usando um auxiliar, uma pequena extensão para nos dar verificação de erros para HTML e ele simplesmente não reconhece isso. É totalmente bom e legítimo. Ele está procurando um colchete ângulo de fechamento após o script, mas nós implementamos um pouco diferente e ele funciona bem, mas então nós vamos ter que ignorar isso. As extensões são ótimas, elas são construídas por outras pessoas. É um inseto neste particular. Será que essa pessoa que dirige esta extensão vai consertá-la, Mike? Eu não tenho certeza. Talvez seja algo que não pode ser consertado porque ele só precisa verificar essas coisas diferentes. Acho que são só algumas coisas. Um deles é, você vai vê-lo ficar verde aqui, e ele tem três erros que você deve verificar e, no nosso caso, no meu caso, isso está funcionando muito bem. Nós carregamos a biblioteca. Agora queremos carregar o JavaScript personalizado. Nós vamos criar nosso próprio arquivo, Novo arquivo, eu vou salvá-lo e eu chamo este scripts.js e eu vou colar no meu texto. Isto é o que escrevemos no último, não vamos fazer de novo. As coisas que você vai ter que trabalhar fora é que eu não gosto de deslizar alternar e nós temos que alternar. Você notará que a alternância por si só não é maiúscula, é caso Camel. A primeira é sempre minúscula e média maiúscula. A outra coisa que eu quero fazer é ter certeza de que estes combinam. Lembre-se quando o documento estiver carregado, eu gostaria que você olhar para um clique sobre esta coisa. Este clássico burgermenu, que no nosso caso vai ser aquele pequeno ícone listrado. Quando ele não vê que clique no ícone listrado, alterne o NAV móvel. Você precisa ter certeza que isso e isso combinam. Vamos editar primeiro e, em seguida, certificar-se de que eles correspondem. Em index.html, vamos carregar nosso script. Nós vamos para o roteiro. Você vai obter um monte mais erros e nós vamos dizer que ele está sentado em, é apenas chamado script.js, lá está ele. Temos de o fazer, está carregado. A próxima coisa que eu quero fazer é ter certeza que este menu de hambúrguer combina com o invólucro que eu tenho. A classe que eu tenho aplicar ao meu ícone este é meu ícone e aplicar aquele clássico burgermenu perfeito. Isso combina com isso. O próximo chama-se Mobile-Nav. Quero ligar e desligar isto. Eu não chamei isso de mob-nav, eu chamei de MobileNAV. Eu misturei o nome, só tenho que ter certeza que o equipamento de navegação da máfia está aqui. Só vou alternar isso para assumir e desligar. Vamos ver se funciona. Tenho grandes esperanças. Vamos lá. Onde estamos? Aqui estamos nós, alternar. Ele liga e desliga, as camadas todas quebradas, mas tudo bem, a mecânica funciona e isso é o mais importante por enquanto. Agora, a razão pela qual isso está acontecendo, e se você está me acompanhando exatamente neste curso, você provavelmente vai ter o mesmo problema. Você pode não. Porque eu quero esse cara perto dele, e é nesta implementação você pode ver que esses caras estão presos um ao lado do outro, mas quando eles estão caídos, eles desmoronam. A única razão pela qual eles estão fazendo isso é porque eu descobri e vou te mostrar meu processo. Algo está fazendo-os não ficar e deve porque mais cedo eu disse, lembre-se que batedor, Eu disse display flex e se há dois objetos nele, e neste caso envoltório mob e um logotipo. Eles devem, por padrão, sentar-se ao lado do outro. Mas mais cedo, quando estamos brincando tentando fazer, lembre-se desse cara. Quando fizemos uma implementação ligeiramente diferente onde acabamos de mudá-lo por pedra tablet. Aqui está o meu tablet e acabei de ler qualquer coisa que possa estar a mexer com ele. Ok, então no meu caso, qualquer coisa dentro do recipiente de cabeçalho. Então, no tablet eu estou indo bem e bater um recipiente ou abaixo para chamar nada a ver com isso. Somente alta área de trabalho parece não ter nada aqui com o mesmo nome. Pode ser, e é aqui que está o problema. Dissemos anteriormente em que queremos que o cabeçalho e tudo dentro do cabeçalho para exibir bloco, e isso significa que eles empilham em cima uns dos outros. Poderíamos nos livrar dessa coisa toda. Usamos isso apenas para construir esse outro estilo de menu e é aí que os problemas entram. Parece estranho eu ter incluído isso na aula, eu acho. Eu sei muito bem quando estou trabalhando em um site que há tantas coisas que se relacionam com outras coisas. Você faz uma coisa para consertar um problema e ele destrói outra coisa. Então, se eu tenho uma aula que sempre funciona perfeitamente, eu sinto que é falsa. Aqui está a nossa coisa, agora se resume a isto, desligá-lo, ligá-lo. Então, a exibição ao lado do outro, o que é legal. Então este que está fazendo o que eu quero. Agora eu quero fazer é quando isso clica, não é saltar para fora vamos fazer um pouco mais de estilo, mas o básico está lá. Quem se lembra do que fizemos por isso? Fizemos isso em um menu anterior, nosso menu suspenso. Lembrem-se que era apenas empurrando um ao outro. Vamos, primeiro de tudo empilhar esses botões e realmente não vamos usar o meu botão porque bem, Eu queria mudar o estilo destes e eu quero deixá-los olhando assim na área de trabalho. Não quero mudar o meu botão. Então vamos chamar este e navbutton. Comando D, controle D no PC, coloque todos eles. Vamos dar uma olhada neles agora. Então eles apenas parecendo um texto simples e velho. Então vamos empilhá-los uns sobre os outros porque no momento eles estão em bloco de linha, então precisamos levá-los a empilhar em cima dos outros. Esses caras na vista do tablet, antes do fechamento do colchete encaracolado final, Eu vou dizer navbutton móvel. Eu gostaria que você mostrasse o bloco. Muito obrigado. Espero que, hey cara outro top um do outro. A outra coisa estranha é que fazer está lá quando eles estão empilhando eles estão apertando o botão móvel, queremos deixar isso como estava. Então o que queremos fazer é que queremos tornar a posição absoluta. Então esse cara aqui, em vez de ser parente de todos os seus amigos. Quando ele aparece diz: “Ei pessoal. Somos parentes, sou parente de você, então vou te empurrar para que eu me encaixe.” Então, o que dizemos aqui é que você diz mafioso na verdade, eu quero ser um posicionamento, não um parente. Absoluto significa que eu ignoro todo mundo. Todos os meus amigos, todos os meus parentes, e eu só reconheci os meus pais, que neste caso é quem é um pai? Invólucro da máfia. Ele ignora todo o resto das coisas e no nosso caso só há uma outra coisa, é essa imagem, então ela o ignora e volta para a estaca zero, que é este invólucro. Tudo bem. Veja, você pode ver que ele ignora, mas ele reconhece o invólucro, o pai em torno dele, mas ele ignora todos os seus amigos lá dentro. Legal, está funcionando. Precisamos empurrá-lo de volta e de novo. Uma das outras coisas é que nav está preso no lado lá, o que é irritante. Vamos achar aquele cara. Então mob wrapper inclui o ícone, então devemos empurrá-los por todo o lado. É um invólucro da máfia e vamos dizer, vamos ter um pouco de estofamento. Um pouco de estofamento no, Eu digitei em pa-, que não é nada perto dele, mas me levou muito perto de preenchimento direito. Vamos para o preenchimento à direita, vou dizer 30 pixels. - Sim. Dê uma olhada. Já empurrou o suficiente. Vamos realmente começar a visualizá-lo, clique com o botão direito do mouse e inspecionar e vamos olhar para ele. No meu caso, eu vou para o iPhone X ou talvez se ele não conseguir ver isso, clique neste pequeno ícone aqui embaixo, e nós vamos usar este aqui. O que mais queremos fazer? Então é do outro lado, o que é legal e talvez mais um pouco longe. Mas vamos começar os botões. Então, meu botão de navegação, vamos fazer algumas coisas. Vamos dar uma cor de fundo que sirva. Escolha uma cor. Você escolhe coral funciona com o que eu estou fazendo. Vamos dar uma olhada. Vamos colocar um pouco de preenchimento em torno dele e como este é móvel, você quer ter certeza de que eles são realmente fáceis de clicar. Estofamento, eu vou para cima e para baixo, um pouco mais alto do que o que fizemos para o resto deles. Então 15 pixels superior e inferior e vai fazer talvez 30 esquerda e direita. Quando digo que talvez pratique isto, fiz isto antes da aula e fiquei, sim, é grande o suficiente. Agora, está funcionando, mas eu quero movê-lo. Estamos editando todo o nosso preenchimento primeiro, que saibamos até onde movê-lo. Vamos adicionar alguma margem negativa. Faça margem esquerda e nós vamos fazer margem direita não funciona só porque nós definimos a posição para absoluto. Vamos usar esquerda negativa em vez de positiva, direita. Neste caso, eu vou dizer nove 60 pixels negativos trazendo-o através de seu fechamento. Talvez ir um pouco mais longe. Assumindo. Parece bom, alterna bem e o texto, vamos torná-lo no centro. Então alinhe o texto, vamos torná-lo no centro. Tudo bem, centro e perto. - Legal. Eu quero empurrá-lo talvez para baixo deste cara um pouco. Então, o invólucro inteiro, eu poderia adicionar um pouco de estofamento no topo. Então todo o invólucro e o meu caso chama-se Nav. navegação da máfia vai ter, adicione um pouco de estofamento. Topo de 10 pixels. Demasiado agora parece bem. Está funcionando bem. O iPad funciona. Agora o iPad está visualizando 50% porque isso parece um pouco estranho. Botões são talvez um pouco grande no iPad e dizendo com isso podemos mudar o tamanho deste. Obviamente aqui em baixo. Para colocar algo menor e os botões talvez não precise de tanto preenchimento como eu pensei que eles fizeram. Uma coisa que me incomoda é que é uma linha preta listrada. Você tem algumas opções, você pode abri-las. Usamos mais cedo, lembre-se que tínhamos nossos arquivos de exercícios, tínhamos o projeto três. Tínhamos esse SVG falando de você e é uma linha listrada preta. Eu poderia apenas abrir isso em, dizer Illustrator seria o mais fácil, ou XD e apenas mudá-lo para branco e salvá-lo. Essa é uma maneira. Vou te mostrar uma coisa estranha, será a última coisa antes neste vídeo. É SVGs são uma coisa estranha, mas não um arquivo de imagem como nós o conhecemos. O código é realmente habilitado para a web e você pode realmente ver como um SVG é construído. Vamos dar uma olhada, ele tem um arquivo e é ir para abrir. Vamos encontrar em nossa pasta de imagens, é uma pasta de três imagens do projeto. Estou na minha pasta local, não no arquivo de exercícios. Aqui está o SVG com o qual estou trabalhando. Quando eu clico em abrir, ele se abre como um script real. Ali está ele aqui. Vamos fechar esses caras só para que você possa ver e eu vou ficar confuso. Na verdade, mostra todos os estilos embrulhados nisto. É um pouco diferente de um JPEG porque você pode começar a ver o que, como ele é construído e é construído sobre a sintaxe da web para que você possa realmente compreendê-lo. O que queremos, então este é o POS, se você é do mundo vencedor, estas são na verdade as coordenadas XY de tudo. Está bem. Ele tem alguns, isso pode ver que estes são todos estes caras aqui. Adicionou aulas a ele, o que é estranho dentro de um arquivo. Esta é uma fonte incrível. Lembre-se dessas classes, fontes barras fa, eo que queremos é que estamos procurando a cor, não posso vê-lo lá, preenchido com a cor atual. Vamos mudar isto para apenas branco. Aperte salvar. Dê uma olhada, agora é branco. Você poderia usar hashes regulares. Então branco é f, f, f, f, f, f ou escolher qualquer cor aleatória que você queira coral, talvez um empate com o navegador, e aqui está, legal. Temos nosso nav mob trabalhando onde desligamos a área de trabalho e depois ajustamos o menu móvel e essa é a parte fácil. Basta ligar e desligar e fazer o JavaScript funcionar, então há um monte de problemas em tentar descobrir quais estilos podem empilhá-los, como nós empurrá-los através e isso é o real sob as partes inquietas de configurar um navegação móvel e é por isso que o teste é realmente importante. Porque o que eu vou fazer é fazer isso logo no início e então ótimo, ir começar a trabalhar com coisas e, em seguida, começar a ajustar coisas como as tags de cabeça para fazer coisas diferentes por diferentes razões. Então, mais tarde, um dia depois, eu estou verificando o navegador móvel não está funcionando você tem que voltar e descobrir o que aconteceu e resolver problemas dessa maneira. Se te encontrares nisto e ficares tipo, meu, sou um péssimo web designer. Não, você é apenas um web designer normal. Há muito perseguindo seu rabo, especialmente quando você é novo e você não pode prever problemas. Acho que meu maior problema é quando eu tento reutilizar coisas, em vez de criar uma classe separada ou uma classe composta, eu vou tentar colocar coisas juntas para tentar ser inteligente e arruinar as coisas. Tudo bem, será isso. Vejo-te no próximo vídeo. 98. Visão geral do que é o Bootstrap 4 em design de sites: Ei, amigos. É hora do Projeto 4. Este é nixed bloco é dedicado a entender bootstrap. Este vídeo vai explicar o que bootstrap é esperançosamente. Bootstrap é, pense nisso, a palavra grande é quadro e eu vou te contar uma história. Imagine, porque passamos muito tempo construindo aquele último site, nosso site de portfólio. Mas havia muitas coisas que você fez repetitivamente. Começamos os botões, a navegação, lembre-se disso. Havia muito tipo, “bloco de exibição, desligando consultas de mídia, fazendo consultas de mídia indo, carregando JavaScript”. Agora, se você construiu outro site, você provavelmente vai encontrar todas essas coisas novamente. Se você construiu 100 sites ou 1.000 sites. Você vai correr para praticamente todos eles. Todos eles vão ter botões. Eles vão ter imagens. Todos eles vão precisar fazer uma coisa muito parecida. Em vez de começar cada vez a partir de como você vai CSS re-set. Onde tudo está em branco e adicionando tudo a ele. Você pode ficar bom nisso, mas você fica entediado com isso. Ou pelo menos você tem dificuldades com a repetitividade de [inaudível]. Já só precisa ser feito para cada site. É aí que entra o Bootstrap. Pessoas inteligentes no Twitter decidiram : “Estamos criando todos esses sites e o que faremos é adicionar alguma consistência em todos eles, mas também torná-lo realmente fácil de usar”. Eu meio que quebro em três partes: há a estrutura, há os componentes, e depois há os estilos. Basicamente, as estruturas dizem : “Nós sempre teremos consultas de mídia. Nós estamos sempre indo para tê-los quebrar de maneiras diferentes em dispositivos móveis, tablets e desktop e vamos fazer isso em folha CSS que já existe. É só começar com essa. Há dispositivos móveis, há tablets todos cuidados e eles estão todos nisto. Assim como a estrutura do núcleo” e então eles disseram, “vamos ter alguns componentes que são reutilizáveis. Nós construímos o menu suspenso jQuery a partir do celular”. Eles disseram: “Vamos fazer isso. Tudo o que você tem que fazer como o designer é colocar trecho de HTML em seu site e que Nav vai funcionar. Será “Dropdown”. Será bom em todos os navegadores. Você não terá que fazer todas as consultas de mídia. Onde bloqueamos e exibimos nenhum e todo esse tipo de coisas divertidas.” Eles apenas dizem, “nós vamos fazer isso” e isso é um componente. Também gosto de um controle deslizante de imagem. Se você quiser adicionar um controle deslizante de imagem, você pode definitivamente fazê-lo em jQuery. Não é muito difícil, mas houve muita brincadeira. O que tínhamos que fazer. O que eles fizeram para dizer, “aqui você vai, pronto para ir, Adicione a palavra carrossel ao seu HTML e vamos fazer todo o CSS e todo o jQuery pronto para ir.” É por isso que é um quadro. É como algo para começar. Você pode mudar todo o estilo, mas eles vão fazer o trabalho pesado em termos de HTML, CSS e JavaScript. Componentes de grade como controles deslizantes Navegação e Imagem. O próximo é o estilo. fizemos as cargas onde gostamos, “Eu quero que os links não pareçam tão terríveis, azuis e sublinhados”. Eles já fizeram esses estilos para você. Você pode substituí-lo facilmente, mas eles fizeram muito do estilo para que as coisas não pareçam ruim para começar. Eles parecem ser muito bons. Bootstrap tem um olhar muito específico para ele. Posso ir ao site e dizer “Bootstrap”. Porque o designer ou desenvolvedor tem sido muito preguiçoso e apenas usou todos os estilos do final. A coisa boa sobre isso é que você pode ser preguiçoso e você pode ter muito pouco conhecimento de design e ter um site de boa aparência. Mas eles têm um certo olhar para eles, mas você pode substituí-los. Bootstrap nos ajuda com a grade, bem a estrutura do site, em seguida, eles nos ajudam com componentes e, em seguida, eles fazem todo estilo. Tudo isso pode ser substituído, mas está lá para ir e é um bom lugar para parar para um site. Sua próxima pergunta pode ser : “Por que não fizemos isso no início e pulamos um pouco de coisas?” Um par de razões. Um é que para realmente usar Bootstrap, você precisa de fundação em HTML e CSS e entender que antes de você pode realmente fazer quaisquer alterações no Bootstrap. Você não pode simplesmente saltar para Bootstrap realmente, e começar a tentar mexer com ele. É para as pessoas que já têm essas habilidades serem rápidas. Você precisa ter essas habilidades para poder usar o Bootstrap. A outra pergunta pode ser : “Temos que usar o Bootstrap?” A resposta é, não. Bootstrap é apenas uma opção para as pessoas que, você pode chegar a este ponto ir, “Eu realmente, eu gosto de todas essas coisas e eu vou praticar essas coisas por muito mais tempo antes de eu começar a usar Bootstrap e eu posso voltar a esta parte do curso denso”. Eu uso isso às vezes e às vezes não. As vezes que eu não iria usá-lo é que eu estou olhando para um dos meus desenhos e eu sou realmente tipo de, eu gosto de personalizar isso bastante. Quero mudar tudo. Eu olho para ele e eu sou como, “Na verdade, eu só vou acabar mudando cada coisa que eu colocá-lo em através de Bootstrap. Não vai me salvar a qualquer momento. Eu só vou ignorar Bootstrap nesta compilação web particular construído.” Mas então eu poderia olhar para ele. Na verdade, eu digo : “Preciso fazer isso rápido. Precisa parecer muito bom. Vou confiar no Bootstrap apenas para construir um front-end muito rápido”. Pode ser um protótipo ou pode ser algo onde eu estou fazendo isso por amor ou chocos. Onde não tenho tempo ou dinheiro para gastar com isso. Eu só preciso ser feito rápido e parece muito bom. É aí que o Bootstrap pode entrar. Você tem que usá-lo? Não. Por que não começamos já? É porque precisamos desse conhecimento básico em HTML e CSS antes de começar a usar o Bootstrap. Agora, outra boa razão para usar Bootstrap é, ou pelo menos aprender Bootstrap é que vai haver muitas outras coisas que usá-lo. Estamos construindo nosso próprio site de clientes usando o Bootstrap. Mas digamos que você comece a usar o Wordpress mais tarde ou Shopify ou Drupal ou Joomla ou tentando pensar nos CMS. Eles farão todo o trabalho pesado em termos de criação de sites. Eles vão tirar isso de você. Mas o que eles vão fazer é dizer, “Estou usando um tema Bootstrap”. A coisa legal sobre isso é que porque você entenderia Bootstrap você pode passar e ajustar o Wordpress e movê-lo e mudá-lo e torná-lo seu próprio. Há muitas outras coisas como CMS que usam Bootstrap. Estamos usando neste caso ou o resto deste curso para estilizar nossos próprios sites. Mas é usado para estilizar muitos outros sites CMS também. Outra coisa a mencionar é que Bootstrap é apenas uma opção. Existem alternativas de Bootstrap, algo como fundação seria uma boa alternativa para ele. Bootstrap seria, na minha opinião, a opção mais comum. Há outros jogos no quarteirão. Não é esse o ditado, pois não? Há outras coisas, concorrentes para Bootstrap. Não é o único. O que mais vamos fazer? O que vamos fazer é lembrar que Bootstrap é três grandes panelas. É o sistema de grade, que é a estrutura. Há componentes, que são coisas como o Nav e os controles deslizantes de imagem e rodapé; faz aqueles para você. Depois, há a parte de estilo. Aqueles três. O que vamos fazer nos próximos vídeos, vamos instalar o Bootstrap para começar. Então eu não vou fazer uma breve visão geral desses três aspectos antes de mergulharmos na construção de um site completo. Porque sinto que tento explicar tudo neste primeiro vídeo. Mas eu sei que é um pouco difícil e abstrato algum tempo. Vamos cobrir esses três, haverá três vídeos de visão geral desses três componentes. Vamos entrar, começar a fazê-las agora, e te vejo no próximo vídeo. 99. Como instalar o Bootstrap 4 em um site usando o Visual Studio Code: Oi lá. Neste vídeo, vamos instalar o Bootstrap 4 em nosso site usando VS Code. É super simples. Vamos entrar agora e resolver isso. Primeiro passo, vamos criar nossa própria nova pasta local. Terminamos com o Projeto 3. Muito obrigado. Agora é hora do Bootstrap. Vamos obter um arquivo, vamos abrir e vamos em nossa área de trabalho criar uma nova pasta local. Neste caso, vamos chamá-lo de Projeto 4 sem surpresa. Vamos clicar em Abrir e fechar a guia de boas-vindas que se abre e vamos amarrar isso. Vamos nos livrar dessa linha e vamos criar um arquivo alphas. Vamos criar índice. Estamos indo Arquivo Novo, e isso funciona bem. Vou mostrar-lhe apenas clicando com o botão direito nesta área, você pode ir para um novo arquivo e esta é uma maneira diferente, eu gostaria que fosse mais agradável. Criei meu índice, ele está aberto aqui eu vou girá-lo aberto, eu não gosto dele aberto ou esta coisa aberta, apenas o que estamos aprendendo, pelo menos. HTML precisa de todas as coisas básicas. Precisamos de ponto de exclamação, aperte Return e isso nos dará a maior parte do tipo doc e todos os bits que precisamos. Agora vou apresentá-los ao site do Bootstrap. Chama-se getbootstrap.com. Esta é a página oficial e documentação e qual foi a bondade que nos ajudará com Bootstrap. Agora estamos usando o Bootstrap 4, no momento, se você estiver assistindo isso no futuro da distância e é até o Bootstrap 5, ele vai parecer completamente diferente, mas o essencial provavelmente será o mesmo. O que queremos é começar. Você pode baixá-lo localmente em seu computador. Vamos fazer isso de uma maneira diferente. Nós vamos começar, e basicamente ele vai dizer, você precisa de dois grupos de coisas. Você precisa, o CSS e o JavaScript. Se você apenas planeja usar, digamos, a estrutura como a grade, talvez tenhamos falado com a grade, a estrutura, tudo o que você precisa é o CSS. Se você não planeja fazer nenhum dos menus suspensos de carvão ou controles deslizantes de imagem, você não precisa disso para baixo ou para baixo. Mas, vamos instalá-lo completamente apenas no caso de usarmos isso mais tarde. Se você não planeja usá-lo, não colocá-lo, porque ele só vai adicionar ao tempo de carregamento. Nós vamos copiar o CSS e ele diz onde colocá-lo. Coloque em um link na sua cabeça, mas eles estão te dando o código pronto para ir. Eu copiei. Aqui diz, “coloque na cabeça”, e aí está. Fizemos isso algumas vezes com diferentes CSSs. Fizemos isso com o Google Fonts. Da última vez que lidamos. É tudo o que me lembro. A outra coisa a lembrar é que se você criar sua própria folha de estilo, que faremos em um segundo, ela precisa estar acima disso. Este está no topo, Bootstrap, sempre no topo e seu estilo logo abaixo. Ainda não temos isso. Próximo pedaço é este JavaScript aqui. Há três partes nele. Vamos copiar todos os três e vamos colá-lo. Se você ler a documentação, ela diz, “há um bom exemplo de modelo inicial. Você pode simplesmente copiar tudo isso e colá-lo em VS Code também. Mas diz para ter certeza que vai para baixo. Como JavaScript, como discutimos anteriormente. Eu ia colá-lo no fundo antes do fechamento do corpo. Vou colocar o meu aqui. Lá vamos nós. Aqui, vou colocar alguns comentários. Lembre-se de barra completa Command ou Control Full Slash em um PC e basta adicionar algumas notas. Apenas para verificar se o CSS está realmente funcionando, vamos pré-visualizar a página e começar a trabalhar lá em baixo, então ele vai replicar e dizer abrir o servidor live. Vai abrir na tela direita hoje. Não há nada lá. Não está funcionando, vamos ver a maneira de verificar se está funcionando é apenas jogar em um h1, e digite Olá mundo novamente, e apenas verificar. Você sabe que o CSS está funcionando porque não se parece nada com o nosso h1 antigo regular. Havia o velho H1 parece que vou comentar isso. Dentro, parece assim, bonito. Agora a única coisa que VS Code não colocá-lo, e agora lembre-se que usamos ponto de exclamação para colocar na maioria das informações para a página. Há uma coisa que sugere aqui que não faz parte do Código VS inicial. Talvez haja diferente. Analisamos os diferentes editores de código e como eles implementaram. Vamos apenas etiqueta de cabeça. Este é um aqui. O psiquiatra para caber, não, está desaparecido. Temos tudo isso, mas precisamos de uma vírgula e psiquiatra para não caber. O que é que ele faz? Coloque-o em primeiro lugar, então ele vai aqui antes do fechamento das aspas e eu acho que ele desativado algo é uma sessão estranha no Safari que perde com Bootstrap para que você possa desligá-lo. Isso só significa que você terá consistência em diferentes navegadores. Legal, e é isso instalado. Agora a coisa mais louca é que se olharmos em nossa área de trabalho, é que no Projeto 4, temos apenas a página de índice. Lembre-se que estes estão sendo carregados como para a minha rede de entrega de conteúdo. Bootstrap está controlando isso. Eles têm isso nesses servidores, o mesmo com todos esses. Que apenas ficando carregado como a página carrega, você pode baixá-los de getbootstrap. O único problema é que o navegador terá que carregá-los do seu site quando provavelmente a pessoa que visita o seu site provavelmente já baixou a versão CDN de outro site, então é preciso novamente, e fará com que o carregamento da página seja agradável e rápido. O que são estes? jquery, nós conversamos para ter isso. Isto está carregando a partir de jquery. Já fizemos isso antes. É uma versão minimizada ligeiramente diferente. Mesma coisa, este aqui, popper, é um pouco muito útil de JavaScript que é usado para posicionamento, coisas como dicas de ferramentas e modais pop-up e todas as notificações que aparecem dentro de sites. Este aqui é JavaScript específico de Bootstraps. É um pouco se acostumando e você meus amigos instalaram Bootstrap. Agora vamos continuar com o curso, algumas notas são que certificam que o CSS para Bootstrap está acima do seu. Você colocaria agora link, CSS, então você coloca o seu por baixo. Se você parar de fazer, ainda não temos isso, então eu vou me livrar dele. Você vai fazer o seu próprio JavaScript. Você precisa se certificar de que a tag de script acabe por baixo deles. Estes vão primeiro e depois o seu depois. Caso contrário, o seu sempre pode começar a entrar em conflito com estes e agora uma grande bagunça. Vamos salvá-lo e passar para o próximo vídeo. 100. Visão geral rápida de como o layout de grades do Bootstrap funciona no VS Code: Olá aí. Bem-vindo à visão geral do sistema de layout Bootstrap, ok, também conhecido como o sistema de grade ou talvez a estrutura. São as caixas que compõem o nosso site. A coisa legal sobre isso é que nós vamos escrever apenas um pequeno pedaço de código, um recipiente com algumas tags div nele, basicamente nenhum CSS em tudo, apenas uma cor de fundo. Olha o que somos capazes de fazer. Temos caixas que ajustam os tamanhos que são sinterizados. Nós não fizemos nada disso. As consultas de mídia já estão lá. Vou tentar surpreender você com Bootstrap e é um sistema de layout incrível. Vamos começar. Muito bem, primeiro vamos fechar a nossa página de índice. Vamos guardá-lo para o nosso site principal que construiremos no final desta seção. Vamos criar um par de arquivos descartáveis. Vamos clicar com o botão direito do mouse em “Novo arquivo” e vamos dizer que este é uma visão geral. Este vai ser, agora grade é uma palavra clara Greeley do que estamos fazendo. Estrutura é outra boa palavra, bootstrap refere-se a ele como o layout. Vamos chamá-lo assim. Layout.html. Vamos adicionar nossas coisas. exclamação. Certifique-se de que aqui adicionamos nosso psiquiatra em coma para caber. Não, há algumas outras partes que queremos. Onde é que a queremos? Queremos isto. O CSS pop logo abaixo do título. Não precisamos do JavaScript para o momento porque não o estamos usando. Você pode usar todas essas consultas de mídia incríveis no sistema de grade sem tocar em qualquer um dos JavaScript. É só se você quiser que as miniaturas extravagantes apareçam. Primeiro de tudo, aqui em nosso corpo, colocar em um recipiente. Agora, vamos colocar no contêiner. É uma boa aula. Vamos adicionar um pouco de estilo a ele. Agora, porque estamos fazendo um documento bem descartável, eu não vou me preocupar em colocar o estilo em sua própria folha. Vou pô-lo aqui na cabeça. É a mesma coisa, mas reparem que digo por folha. Vou dizer, vamos dar ao recipiente o canhoto completo. O que vamos fazer? Apenas uma cor de fundo. A cor de fundo vai ser aleatória. Hoje é um cardo, que não é bom o suficiente para ver na tela. Preciso de algo mais escuro, por favor. Girar aleatório, desativado novamente, voltar para começar a digitar em cores e deve preenchê-lo previamente. Você tem magenta, linda cor rosa. Vamos dar uma olhada no navegador, há lá. Não é isso, porque é a minha página de índice. Vamos desligá-lo, ligá-lo novamente. Nada acontece eu preciso colocar algo no recipiente, então aqui vamos colocar em nosso h1. H1, coloque algo aí. Você está espantado? O que você está espantado? Você gosta, diz o recipiente. Mas também é uma largura. Tem uma largura nele. Não lhe demos uma largura. Ele também tem sinterizado. sinterizado. O H1 está sendo estilizado. Já resolvemos isso. Esse é um grande benefício de usar o Bootstrap você. Mesmo se você apenas usá-lo para este sistema de layout de grade, isso é simplesmente brilhante. A outra coisa fixe é o que acontece quando o encolho. Vamos para inspecionar com o botão direito do mouse. Vamos alterná-lo para ter certeza de que isso está ativado. O dispositivo era um dispositivo enrolado, barra de ferramentas de alternância. Ligue isso e certifique-se de que ele fica responsivo no topo, porque queremos ir assim. Assista. Eu dei isso, mas veja, ele já se ajusta para muitas consultas de mídia. Você pode vê-los ao longo do topo lá, eles já estão prontos para ir e até mesmo móveis. Você pode ver que já há algum preenchimento no lado do contêiner. Isso é Bootstrap dizendo ninguém nunca, uma vez que leva preso contra o lado e você é como isso é verdade. Obrigado Bootstrap. A outra coisa que diz é, vamos colocar recipiente nas bordas dos dispositivos móveis. Mas aqui fora vai lhe dar um pouco de um rumor lá fora. Você pode fazer algum design adequado em vez de tentar esticar tudo. Há apenas algumas coisas boas que Bootstrap faz. Agora, para usar o Bootstrap, você realmente precisa ter certeza de que você está usando o idioma certo. Isso o que vamos fazer nesta seção é acostumar a usar o idioma certo. Tentei prepará-lo para o resto do curso. É por isso que chamamos de contêiner mais cedo ou wrapper, como algumas pessoas o chamam. Porque aqui, vamos para o nosso layout. Vamos usar a documentação cada vez mais. Mas sob o layout diz, você pode ver que um recipiente é a palavra que eles usam para essa coisa. Contêineres fluidos que veremos mais tarde. Nós vamos para trás e para frente através das documentações, só para que você se acostume com isso. A próxima coisa que quero mostrar é o que você pode fazer dentro daqui. Vamos nos livrar desse h1. Dentro do recipiente vamos colocar uma fileira. Linhas são o que eles usam como os recipientes de invólucro que circulam em torno de qualquer coisa que contém um recipiente tem um uso realmente específico que fica santo cada vez. Enquanto isso é como um recipiente, mas usado dentro do recipiente principal, muitos estão soletrando que errado. Vamos simplesmente não entendê-lo. Você precisa ter uma linha por si só. Tem sempre coisas dentro dela. Essas coisas dentro dela normalmente são sempre chamadas de cols para colunas, linhas e colunas. Quantos queremos? Teremos três. Lembre-se que é opção de deslocamento seta para baixo no meu Mac, e é alt-shift seta para baixo em um PC. São três gols. Vamos digitar algumas coisas dentro dela. Este vai ser um, este vai ser dois, e você adivinhou três. Agora, o que é chique? Tenho que ter certeza que as linhas do outro Rapa e essas colunas são as coisas que vão dentro dela. Vamos salvá-lo. Vamos dar uma olhadinha. Em nosso documento aqui, você pode ver, eu me livrei do h1. Há um contêiner que ainda tem minha guia de imagens. Mas você vê o que ele fez, separou estes e os colocou em um pequeno grupo agradável. O que está fazendo aqui, lembre-se antes de cada pai Rapa, tivemos que adicionar display flex. Bootstrap por si só sem perguntar, assume que se você usar linha e dentro de uma linha, todas as crianças vão flexionar. Isso é algo útil. É só mais uma coisa que é cortada. Você notará que nossa folha de estilo no momento só tem contêiner e nem precisa desse fundo do contêiner. Você pode ver o quão longe nós temos sem ter tocado CSS como fundo aqui é apenas para que você possa vê-lo no meio. Isso foi fixe. Separando-os em três grupos pares, eles têm outras coisas que o tornam muito legal. Digamos que queremos que a primeira caixa seja de oito. Temos a mesma grade de 12 colunas. Você pode dividir seu site em 12 pequenos grupos ou 12 colunas. Eu posso dizer -8 sob este col, então col -8. Vamos dar uma olhada. Você vê isso atualizado, que são oito, e esses caras, porque eles não têm um número, eles assumem que eles se encaixam no resto dele. Então 8-19, então estas são duas linhas e 11,12 aqui. Não tínhamos que fazer nada. Lembre-se antes de termos as porcentagens e coisas assim. Foi difícil ir. Isto é incrível. Pode ficar melhor? Ele faz, [inaudível] não usar apenas o velho oito. Podemos usar um pouco mais de consulta de mídia específica. O que eu quero dizer com isso? Quero dizer que em vamos olhar em nossa prévia aqui. Nós olhamos para a mania da mídia antes. Estes estão todos aqui por padrão. O que podemos fazer é dizer facilmente, daqui para fora é chamado Excel. Isto aqui chama-se grande. Este pequeno espaço aqui é chamado de médio. Este chama-se Small. Em qualquer lugar abaixo eu acho que era 5, 7, 6 é considerado extra pequeno. Podemos usar essa linguagem para identificá-los. Porque no momento em que eles fazem a mesma coisa em todos eles. Nada realmente muda. Digamos que eu quero colocar no meu teste múltiplo eu vou fazer isso. Este primeiro aqui eu vou fazer lg. Vamos dizer, vamos fazer 10. Essa primeira coluna vai tentar ocupar 10 colunas. É agradável e simples, mas você tem que usar essa sintaxe. Lg é para grande e estes outros dois companheiros comando e mantenha pressionada a tecla de opção e usá-lo seta para baixo para fazer vários cursores. Em um PC, é controle e alt e seta para baixo. Neste caso, vou dizer grande. Vou encher os outros dois. Não, tem que preencher um. Bem como o igual 12. Vamos verificá-lo no navegador, e você pode ver aqui. Eu sou pequeno no momento e tem este aqui, não há médio e grande. Vai 11, não 10, depois 11, 12. Posso mirar mais de um. Em geral está fazendo isso, mas eu gostaria de dizer, colocando em várias suposições. No meu Mac, estou mantendo pressionada a tecla de opção e clicando em PC, é alt. Eu vou dizer sobre este, então há apenas um espaço. Você tem que usar minúsculas. Vamos dizer que a chamada para, digamos que a pequena, vai ser seis, então estes dois vão ser três e três todos iguais a 12. Dê uma olhadinha. Aqui em cima ele ainda está fazendo meu 10, 11. Agora aqui em baixo, você pode vê-lo lá. Vai seis e depois três e três. Você pode ver por padrão, apenas Bootstrap realmente quer que ele empilhe em cima do outro quando ele está para baixo em extra pequeno. Você vai notar que algo que tentamos fazer muito quando estamos construindo nosso site, tudo foi empilhado horizontalmente até chegar aqui e nós empilhá-los em cima um do outro. Você pode sobrescrever isso. A coisa estranha sobre isso, e eu acho que uma coisa boa a mencionar é que não há XS, [inaudível] XS aqui. XS mesmo. Ele assume que se você não escrever nada que você quer dizer então se eu fiz col e este vai ser quatro, ele assume XS. É o que se chama punho móvel. Nós construímos nosso último site dizendo que assumimos que tudo é desktop, a menos que dito o contrário, Bootstrap é construído o contrário. Ele assume que tudo é móvel. Se eu apenas colocar chamada sem qualquer indicação, ele assume o telefone celular. Aqui vamos nós lá, 3, 4, 4, 4. Legal. Como foi isso? Foi uma breve introdução. Há muito mais nisso. Mas eu espero que você possa ver o poder dele como, especialmente porque nosso estilo é assim. O legal sobre isso é que todos têm o mesmo estilo. Se você assumir o tema de outra pessoa ou o CMS de outra pessoa ou o site de outra pessoa e é construído no Bootstrap, você seria como sim, porque você sabe o que essas coisas fazem e elas são escritas da mesma maneira. Além disso, muitas coisas inquietas são feitas como este recipiente. As consultas de mídia já estão lá. Eles fazem coisas boas por padrão. Você pode substituí-los todos, mas na maioria das vezes eles fazem exatamente o que você quer que ele faça. Certo, então essa é a visão geral rápida da grade. Vamos fazer mais, mas acho que devemos passar por todas as três partes antes de entrarmos nas porcas e parafusos da construção do nosso site. Vejo você no próximo vídeo. 101. Visão geral rápida de como os componentes do Bootstrap funcionam no VS Code: Oi lá. Neste vídeo, vamos ver uma visão geral dos componentes do Bootstrap. As partes mais emocionantes de Bootstrap relógio slide é movimento, Eu vou dar a este. Temos um menu suspenso jumbotron muito fácil. O menu muda para celular quando é menor, temos esses cartões funcionando, e literalmente, fazemos isso neste vídeo. Olhe o comprimento dele, está ao redor, o quê? 12 minutos, suponho. Fizemos tudo isso muito rápido. Componentes são incríveis. Vamos entrar e começar a trabalhar. Estamos terminados com a nossa visão geral do layout. Vamos fechá-lo. Vamos voltar para a página de índice. O que nós vamos fazer é, nós vamos jogar em tudo, nós vamos nos livrar de h1, e nós vamos jogar em todos os componentes que vamos usar para construir nosso Projeto 4. A primeira coisa que eu quero fazer no entanto, é adicionar o nosso recipiente. Então vamos para o contêiner. Membro tem que ser soletrado exatamente certo, modo que ele corresponde Bootstraps uso de um recipiente, e dentro deste, nós vamos jogar em nossos componentes. Agora, estamos falando de componentes brevemente. São coisas como controles deslizantes de imagem e navegações. Vamos dar uma olhada de onde tirá-los. No Bootstrap, vamos para a documentação, vamos gastar muito desta seção do curso. Nós olhamos para o layout, nós olhamos para os componentes a seguir. Então, clique nisso. Tem muita coisa aqui, excitante e legal. Não vamos passar por cada um deles. Agora estamos apenas jogando as coisas que vamos usar. Vamos começar com um Navbar. Não Nevs, Navbar. Então aqui, basicamente você pode rolar para baixo e apenas olhar para o que você quer. Aquele tem, eu acho que é a versão pia da cozinha, ele tem cada coisa. Muitas opções diferentes, apenas com ticks, apenas com navegação. Vamos pegar a versão da pia da cozinha, bem aqui em cima. Então, é o primeiro. Aqui embaixo, vamos pegar isso, clique em “Copiar”. Há um pouco de código que vai, no HTML. Mas veja isso, vamos ao código VS, dentro de um contêiner. Vamos colá-lo, vamos salvá-lo, vamos visualizá-lo em um navegador. Vou desligá-lo, ligá-lo novamente. Vamos dar uma olhadinha. Olhe para isso, temos uma navegação e um menu suspenso. Talvez estejamos aqui para fazer uma navegação. Há uma barra de pesquisa que não funciona, botão com pairar, todas essas coisas que estão prontas para ir. Agora, no seu HTML, não vamos fazer exatamente tudo agora, mas você pode dizer: “Em vez da palavra casa, podemos chamar este botão Dan.” Você pode ver que você tem um botão Dan. Nós vamos ter alguma falta com o layout, ou mover e adicionar coisas mais tarde, mas, eu acho que eu quero animar você com o que Bootstrap pode fazer muito rapidamente. Agora, a próxima coisa que queremos acrescentar, é que queremos adicionar algo que, o menu suspenso funciona neste? Ele faz. Como nós não adicionamos em nossa página de índice, nós fizemos, é por isso que ele está funcionando. Lembramos que adicionamos este código JS aqui, ou isso diz, “código JavaScript”. Em nosso pequeno layout de visão geral descartável, nós apenas adicionamos o CSS e não colocamos no JavaScript. Esta página de índice, se você estava apenas seguindo junto com um arquivo descartável, você tem que ter certeza que o CSS está no esconderijo, e todo o JavaScript está na parte inferior aqui, é onde todos esses componentes estão funcionando. Então lá está o meu contentor, que vai ser o meu Nav. Vou adicionar um pequeno comentário, esta é a Navegação. Legal. A próxima coisa que quero acrescentar, será o meu carrossel. Carrossel, está perto? Enfim, vamos encontrar o carrossel. Então, se quisermos um carrossel, vamos procurar componentes, e encontramos carrossel. Ok,? Mesma coisa. Dê uma olhada em alguns dos exemplos. Esse é apenas um simples slide velho, este tem algumas setas, podemos clicar nele. Decida qual você quer. Sempre tem botões pequenos aqui. Este tem carrapatos em tudo. Então decida qual você quer. Eu vou para este primeiro, porque combina com o meu design. Clique em “Copiar” do código abaixo e, em seguida, basta colá-lo neste código. Você gostaria de uma cópia dessa facilidade novamente. Sim, são amigos. Está à procura de imagens, um monte de imagens que não estão lá. Então vamos pegar algumas imagens de nossos arquivos de exercícios e jogá-las. Então vamos para os arquivos de exercícios, vamos olhar para o Projeto 4 agora, nosso pequeno projeto de iogurte. As imagens, em vez de copiá-las uma por uma, estão [inaudíveis] funcionando? Você é como, “Por que você simplesmente não copiou tudo para ir sozinho?” É o que vou fazer agora. Vou pegar a pasta de imagens e copiar isso. Vá para a minha área de trabalho, no meu Project 4, eu vou colá-lo aqui, a coisa toda. Todas as imagens para o projeto. Agora, o que podemos dizer, em vez de carregar esta imagem chamada ponto, ponto, ponto, vamos dizer imagens e Produto 1. Não me lembro qual precisamos usar. Não, Iogurte 1. Então Yogurts 1 perfeito. Vamos fazer isto. Eu deveria fazer os dois ao mesmo tempo, segurando “Opção” em um Mac. Lá vamos nós, segurando “Opção” no Mac e clicando duas vezes em um PC, é “Alt” para obter o cursor múltiplo. Vamos digitar imagens. Vou colocar iogurte duas vezes, que é apenas [inaudível] três. Agora definitivamente passar e mudar seu todo o texto para descrever a imagem. Vamos dar uma olhadela agora. Agora, é assim tão fácil. Espere por isso, ele tem rolagem automática? Espere por ele. Estamos aguardando Dan. Lá está ele. Há pequenos erros lá, mas eles são brancos. Você não pode vê-los. Teremos que mudar a cor deles. Consegues vê-los a piscar lá dentro? Mas [inaudível] Veja como isso é legal, foi fácil de implementar. Há como um temporizador automático indo, porque bondade JQuerry sem nós fazer qualquer jQuerry. Então, basicamente, é um trecho de código que colamos, e podemos adicioná-lo mais tarde sem habilidades loucas de CSS e HTML, nos fazendo parecer super bons, super rapidamente. Certo, próximo. Acima do carrossel, esqueci que eu quero o jumbotron. Então logo acima, eu vou colocá-lo no meu CSS, você é como, “O quê?” O jumbotron. Não sendo da América, tive que pesquisar o que era o Jumbotron, e faz todo o sentido agora. É um grande outdoor gigante que vai no meio. Então vamos dar uma olhada em um jumbotron. É a sua imagem de herói. É você: “Bem-vindo ao mundo. Aqui está o que fazemos, compramos nossas coisas.” Encontre o que funciona para você, este botão superior é. Ok, eu vou copiá-lo, e colá-lo. Jumbotron está dentro Você pode ver h1, eu não sei como fazer isso. Existem algumas aulas que são especiais para Bootstrap, que aprenderemos à medida que avançamos. Mas a coisa legal sobre eles é que, quando eles forem implementados, vamos dar uma olhada. Você pode ver, é bom botões são agradáveis, há um pouco agradável pairar lá. Quando eu quebrá-lo para ficar menor, ele quebra muito bem. E a parte mais excitante que quase perdi, a navegação estava pronta? Você é como, “Oh, isso é muito mais fácil do que o vídeo do curso jQuery de Dan que ele fez. É como 25 minutos de duração, mas precisamos saber para que possamos fazer ajustes e consertá-lo se estiver quebrado. Para as pessoas, há muitas pessoas que não usam Bootstrap, e você diz, “Por que você não faria isso?” É porque eu quero personalizar tudo, mas eu fico animado no palco quando é agradável e fácil, e começamos a vomitar coisas, e eu digo, “Sim, eu deveria usar mais Bootstrap.” Certo, próximo projeto, definitivamente Bootstrap. Vamos voltar para o VS Code. Vamos adicionar mais uma coisa, para esta introdução. Temos a construção de lado, então vou adicionar algo chamado Cartão. Cartões plurais neste caso. Vamos dar uma olhada. Bootstrap, eu vou torná-lo maior, para que possamos ver todos os bits, e eu quero adicionar um desses cartões. Pode pensar neles como azulejo, apenas agradável e fácil, coisa reutilizável e uma copiá-los. Vou jogar três deles, voltar entre todos eles. Estamos fazendo algo estranho, dos meus retornos. Vou me certificar de que todos se alinham selecionando-os. Vá para a seleção de formatação. - Legal. Então vamos dar uma olhada nas cartas. Documento no fundo aqui, eles estão empilhando um em cima do outro, as imagens estão um pouco quebradas. Vamos trocá-los agora mesmo. Então aqui, enquanto estamos aqui, vou usar meu cursor múltiplo [inaudível] me dando o atalho agora. É “Opção” no Mac, “Alt” em um PC, eu gosto, faça um sonho dos atalhos. Tudo bem. Depois mudamos este para dois, três. Tudo bem, vamos dar uma olhada, e você pode começar a ver que nossa maquete está aqui. Então navegação e alguns drop-down, vamos torná-lo simples, é fácil remover as coisas, começando com o menu da pia da cozinha, e indo peering de volta. Este vai ser o meu jumbotron. Então eu vou ter que estilizar isso bastante pesado. Isto, eu vou fazer costume. Esta coisa aqui é a minha coisa deslizante, vai para a esquerda e para a direita. Mas você pode ver a rapidez com que implementamos isso. Estas cartas no fundo, nós as temos muito perto para começar. Então Bootstrap é uma maneira agradável e rápida de organizar um site. Então, todo o tipo de funcionalidade é incorporado, pronto para uso, e você pode simplesmente alterá-lo. Tudo bem, componentes é provavelmente a parte mais emocionante do Bootstrap, e nós não vamos passar por todos eles agora, mas você pode começar a ter uma pequena olhada todas as diferentes coisas que você pode implementar. A coisa legal sobre isso, é porque eles fazem o trabalho duro vendê-lo para o seu cliente como um recurso, sabendo que você pode usar o Bootstrap para fazer um monte de trabalho duro. Certo, então essa é a breve visão geral dos componentes do Bootstrap. Vejamos a última parte. Então fizemos uma visão geral do layout, então analisamos essa visão geral dos componentes. Tenho mais um para levar. Bem, olhe para os estilos. 102. Visão geral rápida de como os estilos CSS do Bootstrap funcionam no VS Code: Oi lá. Neste vídeo, vamos ver uma visão geral dos estilos do Bootstrap. Nós olhamos para o seu layout, nós olhamos para os seus componentes, agora vamos olhar para esta terceira opção, para os seus estilos. Tudo o que é, são estilos pré-fabricados que Bootstrap fizeram para nós que podemos aplicar com classes simples que vai fazer coisas tediosas para nós rapidamente. Como um botão gigante que tem cantos arredondados em uma linha ao redor do exterior e um pairar, podemos aplicá-lo rapidamente. Há muitas opções e estilos diferentes para escolher, Bootstrap fez todo o trabalho duro, nós só temos que descobrir qual classe para Ed. Deixe-me mostrar como tudo funciona agora em VS Code. Para este vídeo, vamos fechar tudo e trabalhar em uma queda descartável. O que podemos fazer é ir para o índice e realmente apenas pegar tudo isso, copiá-lo para que ele seria não tem que fazer o encolhimento para caber não e adicionar o JavaScript de volta. Nós vamos roubá-lo vai fazer um novo arquivo aqui. Vamos chamar esta visão geral e vamos chamar esta styles.html. Cole e vamos apagar tudo o que está dentro deste contentor. Espero que venham comigo, estão bem aqui. Tudo o que temos é um contêiner aqui. Vamos apenas jogar em algumas tags html básicas para que comece com um h1, abaixo ou vamos colocar algumas coisas dentro dele, uma tag P. Vamos colocar um pouco de Loren ipsum, talvez apenas 10 palavras. Vamos colocar um botão e enviar até mesmo vamos colocar uma tag A. Isso não vai a lugar nenhum. Mas vamos colocar algum texto nele. Ele vai ser contacte-nos página apenas algumas coisas genéricas e vamos apenas ver o que Bootstrap faz por padrão. Depois de fechar isso, abra-o novamente. Você pode ver que tem um olhar para ele para um olhar bootstrap. A coisa boa sobre isso é, especialmente se você é novo para projetar ou isso não é realmente o que você ama fazer. Você gosta da compilação, mas não tanto que escolher fontes ou pelo menos você não é bom nisso. Bootstrap pode realmente ajudar em apenas instantaneamente torná-lo bonito. A outra coisa legal é que não é apenas deixado assim. O que você pode fazer é entrar em seu getbootstrap.com e começar a olhar através da documentação. Demora um pouco para se acostumar com tudo. Mas há coisas super úteis aqui. Vamos dar uma olhada nisso. Estilos que pegamos sobre layout. Ele tem sua própria parte, componentes, tem sua própria parte. Mas quando se trata dos estilos que o Bootstrap usa, ele é manchado em muitos deles. Muitos deles estão dentro de utilitários. Mas alguns deles são componentes. Vou te mostrar o que quero dizer enquanto passamos. Agora, se você falar com outras pessoas, eles serão capazes de dizer exatamente quando você disser, “Ei, me fale sobre o layout do Bootstrap.” Eles saberão exatamente do que você está falando. O mesmo com os componentes. Quando se trata de estilos, é algo que eu inventei para englobar todas as outras coisas que ele faz. Todos os utilitários e bits extras, todos os estilos que adicionam liberdade para você. Isso significa que você está no conhecimento. Utilitários começa com bordas. Você pode ver que você pode adicionar bordas rapidamente adicionando apenas essas classes. Não vamos passar por todos eles, mas vamos dar uma olhada no texto. Boa, fácil. Alinhamento de texto, super fácil. Você pode fazê-lo para consultas de mídia também usando, se eu quiser que ele aplique, texto em pequenos dispositivos à esquerda, mas novamente à direita. Para dispositivos maiores, você pode simplesmente adicionar essa classe em vez de tentar editar duas consultas de mídia diferentes. Vamos, na verdade, fazer alguma coisa. Vamos dar uma olhada e dizer que queremos todas em maiúsculas. Você pode ver aqui minha classe P pode ser uma classe de maiúsculas e isso é tudo que eu preciso fazer. Vamos acabar com isso. Em código VS, eu vou dizer que minha tag p tem uma classe mesmo de texto até um caso. Vamos dar uma olhada no navegador e você pode ver, espero que não faz em todas as maiúsculas e nunca fazer nada. Digamos que eu quero que seja outra coisa. Vamos dar uma olhada. Temos carrapatos para o peso. Digamos que olhamos para a classe P. Não precisamos criar uma classe em negrito e depois aplicá-la a ela. Já está pronto para entrar lá. Você pode ver negrito, itálico. Copie isso e vá para aqui. Eu vou dizer que eu também quero que seja maiúscula e digamos que eu vou colocar um espaço nele. Quero que seja um peso de fonte de negrito também. Isso vai ser maiúsculo e ousado. Você pode ver ticks declaração por padrão está desativado ou o subjacente. Apenas se senta lá bem. Botões têm algumas coisas boas. Vamos olhar aqui, é aqui que fica confuso, mas meu Deus, ótimo, bem, isso é tipo de estilização pessoal está em utilitários, mas então botões está sob componentes, botões. Você pode ver se eu adicionar uma classe de btn-primary, ele vai ficar assim, pré-feito com cores e tudo mais. Vamos dar um botão de olhar e primário. Onde está o meu botão? Ele vai ter uma classe de botão e primário. Vamos dar uma olhada. Ele está pronto para ir. Ele tem curvas arredondadas, ele tem que Hava Rico. Não tão excitante quanto a grade, definitivamente não tão excitante quanto os componentes. Mas a coisa boa sobre isso é que muitas coisas estão prontas para ir. É muito claro o que ele faz. Muitas vezes, eles estão prontos para usar em termos de certificar-se de que estão prontos para diferentes consultas de mídia e dispositivos diferentes como este. Há um contorno primário de botão também. Há um botão grande, então vamos olhar. Há apenas adicionar um pouco mais. Estou a tentar torná-lo mais excitante. Como talvez não, mas você pode ver que é só que você não tem que trabalhar fora o estilo de borda de erva daninha sólido e, em seguida, um pixel e, em seguida, apenas adicionar isso a ele. Tem alguns padrões. Quando começarmos a construir nosso site, mostrarei como substituí-lo. Mas você pode ver lá eu posso fazer um botão grande ou botão pequeno apenas adicionando outro. Disse este último. Você vai ser como, nós pegamos no último. Vou fazer com que seja o botão grande. Eu não tenho que ir escolher tamanho é apenas um botão gigante com uma cor primária com forro do lado de fora. O terceiro, mas não tão emocionante parte do Bootstrap. O que é o material? Pré-fabricado, pronto para ir. Eu rapidamente termino antes de irmos. A visão geral da grade era a estrutura real do site. As caixas em que colocamos coisas e incluía todas as coisas como consultas de mídia. Depois fizemos o Super 61 onde tínhamos componentes. Tivemos um controle deslizante de carrossel que cortou a tela em uma navegação que quebrou para celular e de volta em uma navegação principal para desktop. Então esse cara, onde é apenas um monte e um monte de aulas pré-fabricadas para ajudá-lo a construir um site rapidamente. O problema se foi tentando lembrar da toupeira. A coisa legal sobre o site Bootstraps, getbootstrap.com, a coisa de pesquisa funciona razoavelmente bem. Se precisar de encontrar o meu carrossel, porque não o encontras em lado nenhum, está bem? Você pode ver se eu digitar, eu preciso de dois exemplos de carrosséis e eu posso pular lá e ir lá. Às vezes você tem que tentar adivinhar a palavra que você gosta. Como está a coisa que tem a parte com o tipo ousado, ok? Você pode apenas digitá-lo e apenas ver onde você pode obter e este caso, falhou. Fronteiras em qualquer um é seus pesos de fonte, ousadia. O que muitas vezes vamos fazer e pode ser um pouco confuso quando você começar a usar o site, é que ele veio até ele. Há uma página inteira sobre pesos de fonte. Na verdade, chegou a esta página sobre ticks que estávamos antes e deslizou para baixo a página para este marcador, pesos de fonte completos na verdade naquela página onde estávamos antes. Às vezes você clica nele e ele leva você para uma página geral e, em seguida, deslizá-lo para baixo e você fica um pouco perdido, às vezes. A outra coisa a fazer é ir. Na verdade, como faço o Bootstrap e certifique-se de usar o Bootstrap para a versão mais recente e como faço para levantar a linha? Bootstraps motor de busca dentro de seu site é ok, mas muitas vezes é fácil apenas para ir aqui e Google vai encontrá-lo no site Bootstrap para você, ou bom velho Stack Overflow. Tudo bem, isso é tudo para as visões gerais, vamos para aquele prédio fora do local. 103. Como personalizar os estilos CSS padrão do Bootstrap 4: Bom dia a todos. Hoje vamos olhar para como substituir estilos Bootstrap. Parece muito bootstrappy para começar. Vamos personalizá-lo um pouco para mudá-lo para ficar assim. Lá vamos nós, muito menos bootstrappy. Vamos fazer algumas coisas. Vamos mostrar-lhe como completar substituir os estilos, mas também como apenas trabalhar dentro dos estilos que o Bootstrap criou. Muitas vezes, há estilos que foram aplicados que queremos mudar, e Bootstrap é bastante útil e realmente criou alternativas para eles, então vamos fazer uma mistura de sobressair e apenas encontrar alternativas, ou no vídeo onde eu tenho a voz mais croakest que eu posso me livrar porque é muito cedo. Vejo você no vídeo. Para substituir nossos estilos, vamos fechar e eu vou descartar HTML que estávamos usando. Vamos abrir a nossa página de índice ao duplicar. Legal. Vamos dar uma olhada no CSS. Você pode realmente clicar neste link aqui se você passar o mouse acima dele. No meu Mac é Command e clique. Tenho certeza de que em um PC é Controle e clique. Você vai clicar nele, abri-lo, e que meus amigos é o CSS Bootstrap. Isso nos dá fumaça sagrada. A versão ampliada, que parece mais complicada do que é, mas está tudo aí. Vamos cortar para o menor tamanho possível. Se eu for “encontrar”, então eu só estou usando meu “encontrar”, e vamos procurar o nosso h1. Você pode ver que há cinco ocorrências, uma, duas, três, quatro, cinco, e este primeiro é mais de zero código pelo que parece. Muitas coisas ficam suas margens sentadas um pouco. Margem superior zero, margem inferior é substituída. Aqui a fonte um, o tamanho h1 leva a 2,5. Há algumas coisas acontecendo que eu posso descobrir e então começar a substituir. Agora o que você não quer fazer é realmente começar a ajustar este arquivo, porque você pode baixar bootstrap.min.css e realmente começar a editá-lo. Get Bootstrap realmente tem uma versão não minificada que você pode começar a ajustar, mas é melhor deixar o bootstrap fazer sua própria coisa e substituí-lo. Fica muito complicado começar a ajustar o arquivo específico, então o que fazemos é no Visual Studio Code é criar sua própria folha CSS. Então vamos criá-lo primeiro aqui, clique com o botão direito, Novo arquivo, vamos chamá-lo de Estilos. Basta chamá-lo style.css, eu vou arrastá-lo para aqui, e em HTML, eu vou abaixo do meu Bootstrap CSS, eu vou adicionar meu próprio link. Então link: CSS, e por acaso chamou-o style.css. Não por padrão, só por sorte. Então a grande coisa é que ele precisa estar embaixo do Bootstrap para que ele funcione corretamente. Vamos mudar alguma coisa. Então, no momento, vamos dar uma olhada, eu vou iniciar o navegador. Ele está definido para uma fonte específica. Vamos mudar a fonte da cópia do corpo. Então aqui podemos dizer corpo, vamos escolher um estilo de fonte no momento. Eu só vou escolher um dos, não estilo de fonte, família de fontes. Vamos escolher um dos padrões, e este vai ser algo estranho. Vamos usar o Impact. Vou pré-visualizar no navegador, e você verá que tudo se foi e mudou. Então nós vamos deixar o CSS todo o caminho sozinho e apenas trabalhar no topo dele. Nós vamos ter que fazer é às vezes descobrir o que Bootstrap chamou as coisas para substituí-lo corretamente, e eu vou mostrar-lhe como fazer isso um pouco mais tarde. Deixe-me mostrar-lhe o que acontecerá e com o que você terá que lutar se você conseguir isso abaixo do seu style.css. Você pode ver, de volta ao que era, e você está, “Mas eu disse para ser corpo, ser impacto” ou essa palavra. Então você só tem que ter certeza de que isso é por aí. Então isso é sobrescrever um estilo. Muitas vezes, porém, você não vai realmente ter que substituir um estilo, você só vai encontrar outro estilo Bootstrap apropriado porque eles estão lhe dando cargas. Então o que você acaba fazendo é, eu só vou pegá-lo aqui. Aquela coisa deslizante no fundo está me irritando. Mas digamos que esse é o h1. Esta coisa aqui, vamos descobrir o que é isso antes de tudo. Há um pequeno truque que você pode fazer no Chrome. Você pode clicar com o botão direito do mouse e ir para Inspecionar, e qualquer coisa que você tenha destacado, ele mostrará no HTML o que realmente é. Você pode ver que é um “p” com uma classe de chumbo nele, então vamos dar uma olhada no nosso HTML. Onde é que está? Então, Navegação, é por baixo de Navegação, jumbotron. Então classe “P” com chumbo nisso. Na verdade, eu só quero que seja uma classe normal “P”, então em vez de tentar estilizar a classe principal, e você quer fazer com que pareça assim, apenas a etiqueta “p” normal, basta entrar e remover isso ou descobrir o que ele faz e ver se há uma alternativa que você gostaria. Então pegue, copie, e vamos dar uma olhada no site Get Bootstrap. Documentação, e vamos ver se podemos procurar por sua pista. Um pouco mais rápido, está lá. Então está em sua Tipografia, então está em Conteúdo, Tipografia, e há um monte de opções diferentes em termos de estilo. Então estes são os h1s por padrão, e esta é realmente uma classe “p” com um estilo de h1 aplicado. Então você não precisa realmente ter o título 1 para ser um bom pedaço grande do tipo. Outras coisas, há uma classe aqui para um texto silencioso, você pode ver aqui ele fez tudo desbotado. É aqui que você começa a explorar o Bootstrap e encontrar coisas que você gosta. Uma opção de exibição, então um h1 com uma exibição de um fica enorme. Chumbo, faz um par de se destacar por chumbo. Você pode ajustá-lo, você pode ir agora e estilo esta classe porque você quer que todos os leads e todas as páginas sejam ligeiramente diferentes. Ele fica em itálico ou algo assim, ou você pode passar por isso e dizer, “Eu quero removê-lo.” Então vamos, e no nosso caso, remova a aula, então tudo exceto os colchetes. Agora deve ser apenas um texto antigo normal como o de cima, ou podemos dizer, vamos usar um dos outros que encontramos. O que encontramos? Vamos usar o Display 1. Não sei o que acontece quando você coloca o Display 1 em uma tag “p”. É empolgante, vamos fazê-lo. Aqui, a minha etiqueta “P”, vai ter uma aula. Classe de? Não chumbo, como se chamava? Exibir-1. Vamos verificar no navegador. Esse é um grande primeiro parágrafo, e então aquela fonte que escolhemos, não se preocupe, não vamos ficar com essa fonte, foi apenas um, por exemplo, Impact. Tem que haver um pouco de tempo no início em que você está, “Quanto tempo eu quero passar indo e aprendendo essas coisas versus apenas substituí-lo?” Não há nada de errado em substituir e apenas dizer que vou adicionar minha própria classe e fazê-lo, mas é útil começar a entender o que essas coisas fazem, descobrir se algum do trabalho duro está sendo feito por você. Mas no nosso caso, chumbo não é super excitante. Você pode simplesmente substituí-lo ou fazer o seu próprio. Mas dê uma olhada no resto disso. Tipografia um, você pode ver que há muitas coisas legais aqui, ousadas, itálicas. Você pode ver todos os atalhos para tudo isso, você pode ver que há um destaque. Você poderia adicionar isso como uma pequena tag span, envolve o exterior, e ele vai destacá-lo, chique. Não vamos passar por todos eles. O que eu realmente queria apontar é que às vezes você substitui por realmente apenas ir e fazê-lo acima do topo, e então, às vezes você realmente apenas descobrir qual a classe que ele é aplicado atualmente, e, em seguida, ir e mudá-lo. Há muitas coisas que vamos cobrir mais tarde no curso. Este é um estranho e legal, realmente gosto. Isso é adicionar uma margem de quatro anéis ao eixo y, então para cima e para baixo. Então, há uma régua horizontal, que é esse cara aqui. Onde está o meu governante? Para onde foi a régua? Lá está ele ali. Veja esta linha correndo pelo centro lá, você tem que ampliar lá porque é bem pequeno e fino, mas há um preenchimento de quatro anéis, superior e inferior. Não esquerda e direita, superior e inferior, porque ele usa o eixo y. Então, há algumas convenções de nomenclatura que vamos nos acostumar à medida que avançamos. Então, para o resto deste vídeo, vou fazer coisas que já fizemos antes. Só para arrumar essa coisa. Primeiro de tudo, vou me livrar da minha aula de exibição e adicionar de volta a minha pista. Vou trazer algumas fontes. Já fizemos isso antes, mas se quiser praticar, me acompanhe. Então google.com/fonts, e você acaba em fonts.google.com. Estou procurando duas fontes para este site em particular. Então, os que eu quero é este aqui chamado Abril Fatface e o resto do texto vai ser Open Sans Light. Provavelmente Open Sans Light plus com um pouco de Open Sans Bold. Acho que foram os únicos dois que usei. Tudo bem, então vamos fazer isso. Vamos fazer Abril Fatface, vou adicioná-lo, e vou fazer Open Sans. Vamos dar uma olhada aqui em baixo e vamos dizer Open Sans, vamos personalizá-lo. Eu não acho que eu usava normal, eu só usei isso em negrito, e quando eu chego a Abril Fatface, eu me perdi. Então isso é Open Sans, e por baixo é Abril. Só há um tamanho para essa fonte, então vamos usar o normal. O que vamos fazer é incorporá-lo. Nós vamos pegar isso no topo, copiá-lo, certifique-se de que ele vai acima da nossa folha CSS.. Você se lembra, ele vai acima do Bootstrap ou abaixo do Bootstrap? Funciona de qualquer maneira. Vamos salvá-lo e o que mais precisamos? Precisamos aplicar isso aos nossos estilos, então vamos pegar os dois porque vamos usar os dois. Então aqui, eu só vou despejá-los aqui, por favor, nilly, porque eu quero que toda a minha família de fontes seja um padrão de Open Sans, e eu vou torná-lo um padrão. Eu preciso mudá-lo para branco, mas provavelmente um pouco mais tarde uma vez que eu começar a colorir meu site. Como se parece com o momento? Se eu fizer branco muito cedo, eu não vou ser capaz de ver todo esse texto. Vamos mudá-lo um pouco mais tarde, mas eu quero que seja uma fonte branca da Luz que eu estava usando, e aqui é descrito como 300. Essa é a luz para aquele, legal. Outra fonte que eu quero fazer, eu quero que ele faça um h1, e é para isso que eu quero usar o meu Abril. Na verdade, apaguei o errado, volte lá. Lembre-se, nossa fonte apenas diz, “Eu quero que você seja Abril, e se você não conseguir encontrá-lo, vá e encontre a fonte cursiva padrão.” É o que vai ser o mais chique da sua máquina. Este diz, “Open Sans, se você não consegue encontrá-lo, seja qual for o padrão Sans Serif” que provavelmente será Aéreo ou Helvetica. Mas ele deve carregar porque nós dissemos isso aqui em cima, “Carregar do Google”, e o Google é bastante consistente. Então nós substituímos alguns bits, vamos dar uma olhada com o documento. Lá está ele ali. Então tudo o que não é nosso h1 agora é Open Sans Light, e nosso rumo aqui é Abril. Tudo bem, uma última coisa que eu quero fazer é adicionar um gradiente de fundo. Nós vamos pular aqui e eu vou dizer, você pausar agora, e contar, e ver se você pode fazer isso. Lembra-se do nosso gradiente de fundo? Tenho as cores dos seus arquivos de exercícios no Projeto 4. Há um documento lá chamado Projeto 4 Texto. Abra isso, e essas são as duas cores que eu quero que você escolha. Veja se você pode fazer isso sem verificar e apenas ver como você vai se você pode se lembrar disso. Então vá e faça uma pausa agora. Tudo bem, como foi? Você se lembrou onde colocá-lo quando estava no corpo? Você se lembra como se chamava, porque é estranho. É imagem de fundo. Então você decide para onde vai. Nós vamos usar gradiente linear, e dentro desses colchetes aqui, nós decidimos a direção. Eu amo isso. É tudo abreviado coisas curtas. Para a parte inferior direita, isso significa que vai de cima esquerda para baixo direito, vírgula, e então nós vamos colocá-lo em nossas duas cores, então essas duas. Não pode usar o hífen, vou editar isso aí. Eu deveria tirá-lo do texto, na verdade, é confuso, e apenas uma vírgula entre eles. Então eu não preciso daquele hífen ali. Essas são as duas cores. Só vou me certificar de que eu fecharei, não consigo ver o lado. É todo o caminho até aqui. Corre a borda lá. Agora que um está fazendo isso por padrão, por que não está embrulhando deste lado? É apenas na borda de onde deve ser embrulhado. Lá vamos nós, ligue-o novamente. Tudo bem, vamos salvá-lo. Vamos dar uma olhadinha, e lá vamos nós. Olhe para isso, linda. Tudo bem, então nós personalizamos nossa folha de estilo, um pouco substituindo as coisas, e também, você vai passar muito mais tempo provavelmente descobrindo o que são essas classes. O que é esse “bg-light” e o que ele faz? Existe um “bg-dark”? Aposto que há, e ter um olhar para a documentação e ou encontrar algo que já existe, ou pelo menos perto do que você quer e, em seguida, fazer um ligeiro ajuste sobre o topo. Que meus amigos, é a vida Bootstrap. Muito bem, vamos para o próximo vídeo. 104. Como usar o experimento de grade de layout do Bootstrap 1: Oi, aí. Neste vídeo, vamos olhar um pouco mais para o layout Bootstraps. Vamos zombar desta aqui. Vai se transformar nisso por aqui. Haverá algumas coisas importantes que precisamos aprender antes de começarmos a construir um site maior. Vamos entrar e aprender a fazer isso. Para começar com nosso primeiro experimento de layout Bootstrap, vamos fechar nosso site principal e criar um pouco de um arquivo descartável. Vamos chamar este layout-a.html. Vamos adicionar nosso material html no topo, e lembre-se, precisamos atualizar este aqui. Você sempre pode voltar para as coisas anteriores que fizemos em seus arquivos de exercícios embora no Projeto 4, em seu documento ticks que fizeram. Aqui está um monte de coisas para nos ajudar. Então esta é a viewport atualizada. Aqui em cima, e nós adicionamos aquele extra de encolhimento igual a não para Safari. O que mais eu coloquei aqui? O CSS, e eu deveria pegar isso do Bootstrap caso as coisas mudem, mas eu tenho um aqui para você. Lembre-se, indo para o topo não vamos colocar em todo o JavaScript no momento, porque não precisamos dele para a grade. São todos aqueles sliders extravagantes, e essas coisas. Nós vamos colocar em nosso próprio CSS, e na verdade nós podemos apenas ser preguiçosos neste caso, e apenas estilizá-lo neste documento em vez de uma forma externa. Ele ainda precisa estar por baixo deste CSS, então, ainda podemos fazê-lo, mas precisa estar por baixo dele. Muito bem, vamos pôr o nosso contentor. Aqui vamos colocar.container, e dentro dele vamos colocar coisas, porque eu quero ter uma pequena prévia rápida. Certifique-se de que está tudo funcionando, Bootstrap está conectado, então, eu vou desligá-lo, ligá-lo novamente. Ele vai carregar em um documento diferente em tela diferente. Você pode ver que está funcionando, porque eu sei que é sinterizado. É sinterizado em telas grandes, tem uma lacuna aqui. Esse é um dos peitorais de usar Bootstrap, mas nós já vinculamos esse. Então vamos excluir o texto para nomear, provamos que funciona. Vamos colocar na nossa parte de cima. Então eu vou fazer um maquete aqui. Você teria visto que o início, ele está no seu Projeto 4, ele é chamado wireframe. É o que vamos construir neste caso. Este é o layout A Bootstrap, vamos colocar uma divisão 50-50 do logotipo, e NAV. Vai haver uma caixa a 100%, e vai haver três caixas aqui em baixo. Então vamos colocar nos dois primeiros o logotipo, e o NAV. A maneira como funciona são linhas e contêineres. Você nunca pode pular a fila. Então ponto linha, e dentro de que você colocar suas duas colunas. Lembre-se que o nome da linha é a coisa que dá às colunas o poder do flexbox, e é um bom wrapper para eles para que eles não quebrar em outras partes, ou outras linhas, ou se conectar. Então eu quero uma coluna, mas eu quero duas vezes. Incrível. Então agora colocamos nosso texto. Este vai ser o logótipo, e este vai ser o NAV. Incrível. Vamos dar uma olhada, e dividi-los bem. Agora vamos dizer que eu quero adicionar um pouco de cor a essas caixas. Isso vai trazer à tona um ponto muito bom, e uma explicação muito boa de como usar Bootstrap, é que não devemos apenas confiar no “col”. O “col” usa um invólucro, e você não deve começar a estilizá-lo. Se eu começar a adicionar preenchimento para o “col”, e fazer cores de fundo provavelmente não vai machucá-lo, mas também há coisas que vão. Esta coisinha aqui não tente, e substitua, apenas deixe Bootstrap controlar essa, e dentro desses companheiros, adicione sua própria classe. Então você vai ter uma coisa tripla aninhada. Ok, então, dentro de “col” aqui nós vamos colocar em nossa própria classe. Vou dar-lhe um nome de “minha caixa”. Na verdade, vou colocar isso em sua própria linha. Faremos isso por dois deles seguidos. Command, opção seta para baixo ou Control Alt seta para baixo para obter dois deles. Eu vou realmente colocá-lo em rotina, e então eu vou colocar em “mybox”. Chamo as coisas de minha caixa, ou qualquer coisa quando estou lidando com Bootstrap, se eu quisesse fazer uma coluna, eu chamaria de minha coluna, só por precaução, porque Bootstrap tem um monte de coisas que já estão nomeadas. monte de aulas, e você é como, se você começar a ser inteligente, como chamar algo ousado, você é capaz de substituir, ou começar a perder com uma das aulas do Bootstrap. Então eu sempre coloco o meu na frente dele, então eu sei quais são os meus, e quais são esses? Eles não têm aula que comece com a minha em Bootstrap. Então isso significa que estou seguro, porque eu estaria instalando coisas, e não está funcionando, e então você descobre que Bootstrap tem algo chamado exatamente o mesmo, tentando fazer uma coisa diferente. Dentro destes, é aqui que posso começar a fazer as minhas coisas. Então, vários casos, eu estou usando a “tecla Alt”, ou “Tecla Opção” no Mac, “Tecla OP” no PC para clicar duas vezes, vamos dar uma olhada agora. Vai parecer o mesmo, mas agora posso sair e começar a estilizar a minha caixa. Então aqui em cima no meu pequeno estilo aqui, eu vou dizer ponto na minha caixa. Ele vai, vamos apenas adicionar algumas coisas básicas a ele. Vamos adicionar uma cor de fundo para que possamos ver. Ok, SV, minúscula, cor de fundo. Você pode esmagar [inaudível] e isso é muito bom. Vamos usar rosa quente para combinar com a nossa pequena maquete lá. Vamos adicionar um pouco de estofamento a ele. Bem, isso é uma altura mínima também. Alturas mínimas que são 200 pixels. Ainda tenho a minha voz rangedora. Começou muito cedo esta manhã, e o café nem está ajudando. Então vamos fazer o topo e o fundo de cerca de 20 pixels, apenas para afastá-los, então há um pouco de espaço branco entre eles, e vamos fazer o topo e o fundo de 10 pixels. Vamos dar uma olhadinha, e entramos. Parece bom, talvez algum estofamento no interior desses caras. Então, um pouco de preenchimento todo o caminho redondo de cerca de 20 pixels. Tudo bem, qualquer edição dessas coisas aqui, não precisa estar lá. Só quero te mostrar o que fazer. Se você quiser estilizar as colunas, na verdade não estilize as colunas. Você poderia colocar dot col aqui em cima, e começar a mexer com ele, e ele vai desmoronar. Estamos adicionando isso para que possamos realmente vê-lo, em vez de apenas eu, dizer, “Não se preocupe, está lá, confie em mim.” Muito bem, a próxima coisa que quero fazer é com a minha maquete. Quero esta grande caixa de heróis no meio. Isso traz outra boa estranheza Bootstrap. O que eu vou fazer é colocar alguns retornos aqui para que eu seja realmente claro sobre o invólucro externo, e todos esses internos. Então eu quero uma linha, eu não posso simplesmente colocá-lo em um col, e começar a estilizar isso. Ele precisa ir dentro de uma linha, mesmo se você só precisa de um deles, porque lembre-se que o invólucro de linha dá ao col é uma casa soberba, com sua bondade flexboxy, além disso, esses caras, se eu colocar outro col Por baixo, eles vão começar a rolar juntos, e vamos tentar espremer nas mesmas linhas. Então nossa linha é como uma quebra de linha também. Neste caso, vai ser a minha Caixa de Herói. Vamos dar uma olhadinha. Não vai funcionar. Bem, vai funcionar. Quero colocar esse “div” no interior. Então aqui, vou ter uma chamada “minha caixa”, e aqui vou chamar essa caixa de herói. - Legal. Tudo bem, a última parte da nossa maquete, é, vamos dar uma olhada neles. É um, dois, três todos cruzados uniformemente espaçados. Ok, este é um bom, fácil de começar no Bootstrap. Tudo bem, então, novamente para fazer uma fileira, mas vamos fazer um pouco de fantasia. Vamos fazer uma fileira, dentro dela um pouco menos, maior do que. Dentro disso, quero um filho do coronel. Quantos eu quero? Quero três deles. Uma linha, três colunas, e este será o recurso 1, 2 e 3. Vamos dar uma olhada no que temos. Certo, vamos deletar. Vamos nos livrar dessas coisas. Digamos que eu quero colocar em meus pontos, minha caixa, e então eu quero vezes isso por três. Não é o que eu quero fazer. Só não estou pensando, é cedo. Digamos que eu quero fazer tudo de uma só vez que você gosta, me mostre como você faz tudo de uma só vez. Então vamos nos livrar disso também. Queremos uma briga. Dentro dessa fila, queremos colocar o Col. Dentro daquele col, queremos colocar “mybox”, mas eu quero três deles. Se eu fizer isso assim, vai me dar o que eu quero. Então o que eu quero fazer é embrulhar esta parte entre parênteses. Isso é preditivo, e tenta colocar o colchete de fechamento também. Então eu quero tudo isso embrulhado juntos, e depois vezes por três. Às vezes você tem que começar de novo. Tudo bem, eu vou colocar meu cursor piscando aqui, e eu vou fazer o recurso 1, 2 e 3. Vamos dar uma olhadinha, acertado. Esta é a nossa maquete. É isso em Bootstrap. Super fácil, mas os takeaways para este é certificar-se, você usa linhas mesmo se você quiser usar apenas linhas por si só. Apenas uma coluna inteira, ou esticando todo o caminho. O outro takeaway é certificar-se de que você não estiliza a linha, ou a coluna, ou o contêiner. É melhor adicionar suas próprias classes a ele, e deixá-lo fazer a sua coisa. Eu poderia estilizar o recipiente aqui, mas poderia ser bom adicionar uma segunda classe chamada meu recipiente, ou qualquer outra coisa, como você quiser chamá-lo. Então essas duas coisas se aplicam, e você não está tentando se misturar com essa, que é uma boa regra geral para Bootstrap. Por que nós gostamos? , ele fez as coisas flexbox para nós, e é editar consultas de mídia para nós, e ele se divide bem em dispositivos menores. Vamos clicar com o botão direito do mouse, inspecionar, ver se ele se move tudo por padrão. Certifique-se de que a pré-visualização do dispositivo, pequeno interruptor de alternância está ativado. Eu vou para o iPhone X, e ele quebra muito bem. Certo, esse é o nosso primeiro experimento feito. Vamos passar para o próximo. 105. Como fazer 100% de cabeçalho e larguras irregulares no Bootstrap 4: Olá aí. Vamos construir este outro grupo aleatório de caixas. Por quê? Para que possamos aprender várias partes do layout do Bootstrap. A primeira parte do tópico deste vídeo será, você pode ver que essa borda cinza vai até a borda do navegador, mas então essas caixas internas são aninhadas e estão todas no centro. Este é o resultado final, vai todo o caminho para o exterior, e quando eles ficam menores, as pequenas caixas agradáveis reagem às consultas de mídia, mas eles estão todos presos dentro deste contêiner interno. O atalho para este, se você está voltando para este vídeo, é basicamente o invólucro externo precisa fluído contêiner e, em seguida, um recipiente no interior. Vamos falar sobre isso um pouco mais no vídeo. Vamos começar. Primeiro, feche tudo o que tiver aberto. Nós estávamos trabalhando no layout-a antes, vamos fazer uma segunda versão, outro arquivo descartável apenas para aprender coisas, e mantê-lo agradável e arrumado para que você possa encontrá-lo mais tarde. Este vai ser chamado de “layout-b”. Vamos adicionar todo o texto. Vamos roubá-lo do layout-A. Selecione tudo, copie-o, feche-o, vá para o layout-b, cole-o e vamos excluir o que não precisamos. Primeiro de tudo, nós vamos começar na cabeça, eu provavelmente vou usar um monte do mesmo material, as coisas principais. Vamos nos livrar de tudo no corpo por enquanto. Para saber que você tem tudo, clique no topo. Você pode ver lá que é feito lá, fica parcialmente destacado. Então temos tudo no corpo. Vou criar um par de estilos. Este vai ter mais de um estilo. Então vamos ter mybox1 e 2. Usaremos tudo de antes, a mesma altura mínima, as margens, o estofamento. Vamos apenas escolher cores diferentes para combinar, onde está o nosso Wireframe Layout B. Então, “Exercício Arquivos”, “Projeto 4" [inaudível] e este chamado “Layout B”. Então é isso que estamos fazendo. Vamos precisar de um par de cores. Vamos precisar deste vermelho, precisamos de um verde e um cinza. Este primeiro, eu usei “tomate”. Faremos um segundo. Copiar, colar. Este vai ser mybox2, e este vai ser “Spring Green”. Eu gosto de verde primavera. Então, duas caixas, e eu só preciso disso só porque eu vou colocar uma cor de fundo sobre isso, ver esta cor de fundo aqui, no cinza, eu vou adicionar uma cor de fundo de cinza a este grande cabeçalho de largura total. Em vez de chamá-lo de “título”, vou chamá-lo de “ponto bg1" ou “mybg1". Isso vai ser apenas o meu passado. Porque eu poderia usá-lo em outros lugares. Estou relutante em chamá-lo de “fundo cinza do cabeçalho” porque ele pode ser usado para algo diferente do cabeçalho e pode não ser cinza. Então mybg1, no caso de eu precisar de um fundo de dois, e isso vai ter uma cor de fundo, eu vou usar cinza ardósia, há um cinza ardósia escuro? Há cinza ardósia escura. Vamos usá-los para fazer o nosso estilo. Primeiro, fizemos o contêiner, e nosso contêiner fica no meio. Vamos dar uma olhada nas documentações do Bootstrap. Clique na guia “Documentação” e clique em “Layout”. Ele lhe dará uma breve introdução. É para isso que estou aqui. Usamos “contêiner de pontos” e ele centraliza-o no site. Este “fluido de contêiner” é o que faz com que ele vá até as bordas. Então, vamos dar uma olhada, vejamos rapidamente a estrutura. Nós vamos ter inicialmente este recipiente de fluido, e dentro vamos colocar o recipiente. Fizemos algo semelhante antes, aninhando dentro das coisas. Mas em vez de usar nossa margem automática em ambos os lados para colocar as coisas no centro, vamos usar nosso contêiner e nosso contêiner de fluido. Vamos criar uma div aqui chamada “contentor-fluido”. Vamos aplicar mais de uma classe. Então, logo depois deste “contentor-fluido”, vamos adicionar “mybg1". Vamos colocar “algum texto” apenas para que possamos vê-lo, apenas ter certeza de que ele está realmente funcionando. Nós vamos olhar, ir ao vivo. Então, temos um recipiente de fluidos, que vai até o fim. Há “algum texto” lá dentro, apenas mantendo-o aberto por enquanto. Eu não vou adicionar uma altura a ele. Vou deixar a cabeça dentro dela fazer isso. Então, dentro desta, vamos colocar outra tag div, mas esta vai ser chamada de “container”. Esperemos que possamos colocar algum texto aqui, “algum texto”. Na verdade, eu queria dar uma olhada, ter certeza que está centrado. Pré-visualização no navegador, o texto é um pouco difícil de ver, você meio que vê-lo lá. É aparado até o exterior. Então, há um contêiner de fluido externo indo para a borda, e dentro dele está um que opera nessas consultas de mídia que o Bootstrap tem. Em seguida, dentro deste recipiente, nós vamos nos livrar de “algum texto”, e nós vamos colocar em uma “linha”. Dentro dessa fila, vamos dar uma olhada na nossa maquete, temos duas colunas, colocá-las em primeiro lugar. Eu vou ter um “col” vezes por duas, e eu ia colocar uma mensagem. Na verdade, não vamos colocar um texto direto neste, vamos colocar outro estilo dentro dele. Porque lembre-se, eu quero torná-los desta cor, eu quero torná-los vermelhos. Eu não quero adicioná-lo a esta coluna de wrapper externa porque acaba bagunçando as coisas. Então vamos colocá-lo como outra coisa aninhada. Nós vamos colocar em um div, vamos usar “mybox1" neste caso. Precisamos de dois deles. Precisamos de um contentor. No nosso caso, precisávamos de dois, porque queríamos fazer duas coisas muito diferentes. Queríamos que ele se estendesse até as bordas, mas também um recipiente que está aninhado dentro. Isso é o que temos. Temos este contentor, antigo normal, que tem uma largura dentro deste elástico, que é o fluido. Dentro disso, eu queria minhas duas caixas. Estas duas colunas aqui não podem existir sem uma linha. Então essas duas colunas têm que estar dentro desta linha, porque lembre-se que a linha dá todo o seu poder. Então eu quero fazer um estilo chique, mexer com as margens e o estofamento. Se eu não precisasse, eu poderia estilizar meu logotipo dentro deste “col” aqui. Mas porque eu quero fazer algo com as margens, os estofos, e as alturas, é melhor não mexer muito com o “col”. Então eu vou fazer isso dentro deste aqui. É aqui que parece que tem muita coisa acontecendo lá dentro, mas espero que você entenda. Vamos dar uma olhada no navegador. Como é que está a fazer? Ótima. Por causa da magia do Bootstrap, devemos ser capazes de clicar com o botão direito do mouse em “Inspect”. Se você não o tiver ativado, ative o ícone “Visualização do dispositivo”, então você vai para Responsive e ele deve saltar para cima e para baixo em termos de tamanhos, o meu está definido para 100 por cento. Você pode ver as consultas de mídia quebrando. Bom trabalho, Bootstrap. Vamos para o próximo vídeo. 106. Como criar larguras de coluna irregulares no Bootstrap 4: Oi caras. O objetivo desta classe é preencher esta navegação superior ou terminá-la pelo menos. No momento, eles estão uniformemente espaçados. Quero que o LOGO seja menor que o NAV. Meu desenho não é bom lá, mas este aqui é, a largura é apenas mais curta que este. Vou mostrar-lhe como ter caixas de tamanhos diferentes. Então eu vou mostrar-lhe apenas um exemplo de onde essas coisas aninhadas dentro de coisas que estão aninhadas, dentro são coisas que estão aninhadas. Só que eles têm uma boa compreensão disso antes de seguirmos em frente. Espero que esteja pronta. Eu estou pronto. Vamos lá. O que vamos fazer é construir essa parte do meio também e estamos fazendo caixas irregulares aqui. O meu desenho aqui quer dizer que isto é mais pequeno que esta caixa. Não sei se exagerei o suficiente. Nós vamos fazer larguras de caixa irregulares e nós também vamos fazer aninhamento dentro de nidificação apenas para mostrar o que tudo faz e parece. Primeiro toque no código VS. As caixas irregulares. Temos dois deles aqui, certo? Temos a minha primeira linha, que vai ser o meu LOGO, e vamos colocar algum texto nele para sabermos qual, quem é esse quem. Vai ser LOGO e este vai ser a navegação. Meu desenho aqui mostra cerca de quatro, então o resto será seis. Aqui em cima, nós olhamos um pouco mais cedo, mas eu quero colocar isso em seu próprio quartinho e um pouco de vídeo e mostrar um par de maneiras diferentes. Se eu disser que este primeiro é um “col-4">, ele tem que ser escrito exatamente assim. Ele vai fazer coisas incríveis flexbox e ser 4 e isso vai apenas adivinhar e preencher o resto dele, porque ele está na mesma linha que está dentro do recipiente, que dentro do fluido recipiente. Todo esse aninhamento é útil, embora pareça um pouco confuso no HTML. Você não precisa escrever explicitamente que esta é a largura de 6, você só precisa dizer que este é 4. Outra coisa que você pode fazer é você não precisa usar as colunas só para que você saiba, você vai encontrar sites que fazem isso, ok? Em vez de “col-4">, você pode dizer que é uma largura de, digamos 25 por cento. W para largura-25. Vamos salvar, e obterá um tipo semelhante de resultado. Largura 75, tiras que estão do outro lado. Não importa se você deseja usar porcentagens ou essas colunas, eu uso colunas. Algumas pessoas usam porcentagens, o único problema com as porcentagens é, eles só têm alguns padrões básicos reais. Na documentação em utilitários, sob espaçamento, você pode fazer largura de 25 por cento, 50, 75, 100, não há como no meio. Se você tentar digitar 52, vai pirar. Há uma opção para a altura também, então você pode fazer H 25 por cento, uma altura de 50 por cento, 75, é o pai. Se você fez isso dentro do nosso cabeçalho ou dentro de qual parte? Dentro disso, demos uma altura de 200. Ele vai usar isso como é como 25 por cento deste recipiente de sala em que ele está. Eu coloquei de volta para “col-4">, e eu quero mostrar-lhe algumas outras coisas. Vamos colocar esse grande herói div, e vamos colocar esses dois caras lá dentro para mostrar como esse tipo de nidificação funciona. Não é muito complicado, mas às vezes é bom apenas vê-lo. Temos nosso contêiner de fluidos e ele abre lá, e lembre-se se você clicar dentro dele, destaca aqui em baixo. Que é onde eu quero que eles terminem. Não quero parar de colocar o meu ninho dentro do fluido contido, caso contrário, vai ficar cinzento aqui em baixo e quero deixar aquela caixa cinzenta acabada ali. Vamos começar um novo contêiner depois. Não preciso que isto seja fluído. Eu não preciso de uma cor indo para o lado de fora esticando, e mesmo que eu fizesse, eu provavelmente iria apenas colorir a etiqueta do corpo, que está por baixo de tudo. Só deve colorir isso se você quiser fazer isso. Tenho que ir ao contentor e só tem uma caixa. Vamos fazer isso em um segundo. Nós temos uma linha, talvez você tenha que ter uma linha, e dentro dela vamos ter uma coluna. Você sempre tem uma linha, mesmo que você queira apenas uma coluna. Dentro disso, vamos colocar um pouco de Lorem ipsum e colocaremos em 100 palavras. Eles precisam entrar na etiqueta P, então o que eu posso fazer é a primeira tag P e depois fazer o alarme 100. Vamos dar uma olhada no navegador, perfeito. Pelo menos combina com o meu design. Além disso, o que eu quero fazer é que eu quero torná-lo vermelho. Vou embrulhar tudo na minha caixa 1. Todos vocês vão entrar nisso e comando+Shift+P, em um controle [inaudível] +Shift+P em um PC e, em seguida, um representante com abreviação. Este vai ser um ponto, a minha caixa 1. Vamos dar uma olhadela agora. Lá vamos nós. Há um monte de nidificação acontecendo, mas não é tão ruim. Onde fica ainda mais complicado é onde queremos dividir minha caixa em algumas partes extras. Queremos levar esses dois caras verdes para dentro. Eles vão ser igualmente divididos mesmo que meu desenho ruim pareça que este é maior que o outro. Você pode fazer o que quiser. Aninhando de novo. Onde é que isto vai parar? Precisa entrar na minha caixa, porque aquele cara está fazendo um pouco de vermelho. Minha caixa diz ser esta cor de tomate. Eu quero dentro disso. Vou clicar no div. Me diz que é aí que termina. Tem de estar dentro disso. Eu vou colocar um reter e eu vou colocar em outra linha e duas colunas. Mas temos linha, cada coluna precisa ser o descendente direto de uma linha para isso funcionar, como fizemos no flexbox. É por isso que passamos um pouco de tempo você aprendendo flexbox. Precisamos de uma fileira, vamos tentar fazer fantasia aqui, e dentro dessa fila, preciso de dois cols. Mas teremos dois deles, bom. Eu vou realmente aplicar uma classe para esta opção Command seta para baixo para obter o seu tipo de cursor dobrando para cima ou Control+Alt+seta para baixo. Você está ficando cansado dos atalhos, certo? Mas você vai sonhar com os atalhos, mas você não vai esquecê-los. Este vai usar a outra classe verde. Este vai ser chamado de minha caixa 2. Dentro deles, vou digitar o recurso. Não, o que faz essa? Um aninhado, é chamado ninho 1. Estou a olhar para o meu pequeno desenho que desenhei à mão para vocês. Ninho 1, ninho 2 vamos dar uma olhada no navegador. Aqui vamos nós, isso é meio estranho, certo? Aninhamento dentro de outras colunas existentes. Você precisa da segunda fila, isso é o que esses caras precisam. Que eles obtêm o seu poder, e para que você possa mais tarde, talvez na pilha móvel esses caras em cima um do outro e é realmente fácil de fazer quando essas colunas estão dentro de uma fileira. As grandes vantagens para este vídeo são de tamanhos irregulares, ok? Porque se você deixá-lo por padrão, eles se sentarão lado a lado. Cinquenta por cento ocupando o espaço, menos que você coloque três, então eles ocuparão apenas três espaços, ou sendo cerca de 33% cada um. Eles só serão divididos entre eles. Se você quer forçá-los, você só precisa forçar o primeiro. No nosso caso, fizemos o “col-4">, mas você poderia fazer W-25 para obter algo semelhante. Amigos, verei vocês no próximo vídeo. 107. Como adicionar preenchimento e margens usando o Bootstrap 4 no VS Code: Oi lá. Este vídeo nós vamos falar sobre espaçamento em Bootstrap. É semelhante ao que fizemos antes quando fizemos margem superior é igual a 16 pixels, margem inferior igual a 16 pixels, esse tipo de coisa, exceto que a sintaxe é muito simplificada, m para margem, p para preenchimento, t para topo, b para no fundo. É muito bom. Vejamos como aplicá-lo agora no Bootstrap. Neste vídeo, eu quero que nós começamos a trabalhar com preenchimento e margem na maneira Bootstrap que ele faz. Digamos que eu queira adicionar um grande espaço branco entre o recipiente de fluido cinzento e esta caixa vermelha por baixo. A maneira antiga, todo o caminho que fizemos anteriormente é em seus estilos CSS, você poderia dizer, eu quero pegar o fluido do recipiente e eu quero dar-lhe uma margem na parte inferior, margem inferior de x, y, z, talvez 20 pixels. Esse é o caminho. Ainda funciona, funciona totalmente. O que vamos fazer é usar a maneira Bootstrap, e deixe-me mostrar a documentação. Em getbootstrap.com sob documentação, em utilitários, isso é chamado espaçamento. espaçamento funciona assim, eu acabei de fazer alguma abreviação então eu disse, em vez de escrever margem, você apenas digitar m e para preenchimento é p. Então, para os diferentes lados, você tem top, bottom, esquerda e direita mostrar em t, b , l, r. Se você quiser fazer x, que é esquerda e direita ao mesmo tempo, ou superior e inferior é y ao mesmo tempo. Agora, em termos de tamanhos você tem seis opções, 0, 1, 2, 3, 4, 5. Vamos dar uma olhada em como eles são aplicados. A sintaxe é importante. O que eu quero fazer é, digamos que este recipiente de fluido, eu quero adicionar alguma margem ao fundo. O que eu faço é outra aula. É um pré-definido. Margem, vamos fazer baixo, b, hífen e depois o tamanho. Vamos fazer o máximo de cinco. Vamos ter uma pré-visualização no navegador. Com sorte, você pode ver que a margem inferior foi estendida por cinco, e você está tipo, o que são cinco? Basicamente, eles usam o espaçamento de ms. Sabemos que, por padrão, o m é de cerca de 16 pixels. Se você usar três, isso é usar um m. Lembre-se, o tamanho padrão da fonte é 16 pixels. Se alguém entrar no Chrome e em seu navegador e ajustá-lo, esses tamanhos também serão ajustados. Cinco é o maior e alguns destes menores fica a zero, obviamente, mas você vai encontrar alguns dos componentes. Lembre-se de nossos carrosséis e cartões que fizemos anteriormente, eles terão alguns por padrão. O padrão será sempre três no Bootstrap. Se você encontrar um componente que tem margens ou preenchimento já adicionado, é três. Se eu colocar em um em cima de algo que já existe no Bootstrap, ele vai realmente reduzi-lo em 25 por cento. Ou para 25% desse espaçador padrão, que é os 16 pixels. Faz sentido? Se você adicioná-lo sozinho, qualquer coisa acima de zero será maior. Mas se você encontrar algo que já tem margem aplicada, você adiciona três na verdade nada vai acontecer. Vai ser a mesma coisa. Se eu for dois, vai ser um pouco menor. Quatro vai ser um pouco maior. Um dos problemas, porém, problemas para mim, eu acho, não acontece muitas vezes, mas, não há seis, como 6, 7, 8, 9, 10. Você pode ajustar os espaçamentos para adicionar mais medições, mas você precisa entrar no arquivo Sass que é usado no Bootstrap. É uma maneira de sair do âmbito desta classe. Se você fizer isso como, se isso é imperativo e você realmente quer ir para ele, você pode olhar para este estilo Sass. É o que é chamado de pré-processador CSS, e é uma maneira de tomar, em vez de apenas um simples e velho CSS, as coisas aqui, apenas marcação básica real em CSS programável real. Fica um pouco mais nerd, mas se quiser descer aquele buraco do coelho, pode ir dar uma olhada. Tenho um curso ou não um curso, um vídeo que fiz para a Adobe. Eles me contrataram para fazer um, e se você for ao helpx.adobe.com e procurar meu nome no pré-processador, isso aparecerá. Eu passo algum tempo passando por isso aqui, se você quiser conversar. Coloquei um link para ele em seus arquivos de exercícios, bem como em texto do Projeto 4. Mas, novamente, fora do escopo deste curso, você não precisa deles. Eles são úteis quando você está lidando com slides realmente grandes, principalmente. Tudo bem, vamos agora adicionar nossas três caixas de recursos e adicionar alguns preenchimento e margens a elas. Eu queria estar dentro do contêiner. O meu contentor de fluidos termina ali. Este contêiner, eu queria estar dentro dele porque eu queria que ele fosse centralizado. Eu vou ter uma fileira e dentro dessa fila, eu vou ter uma coluna. Dentro dessa coluna, vou ter a minha caixa, e preciso de três deles. Na verdade, preciso colocar isso entre parênteses. Obrigado. Código ajudando, e eu quero três deles. Dentro dessas pessoas, eu vou dizer, eu gostaria de caracterizar 1, 2 e 3. Tudo bem, vamos dar uma olhada em como isso foi. Tenho-os aqui. Não se chama mybox, é mybox1. Tudo bem, então estes vão combinar. Digamos que eu queira um pouco de preenchimento para a parte inferior deste recurso, todas essas caixas de recurso, eu poderia fazê-lo para um deles. Eu também estou fazendo isso na linha em que ele está. A linha, eu vou dizer, Eu quero um preenchimento ou margem. Não vai importar neste caso porque não há cor na fila. Eu poderia usar padding-bottom ou margin-bottom, e eu vou usar os bons cinco grandes. Olha, eu tenho um grande pedaço no fundo, o que eu poderia fazer por este aqui também é que eu quero que os lados fiquem um pouco pequenos, um pouco maiores, porque eles são apenas um pouco pequenos de ambos os lados. Estas caixas Nest são chamadas mybox2. O que vamos fazer é colocar uma margem de x, que vai fazer a esquerda e a direita de talvez três. Farei isso por ambos, mx_3. Surpreendentemente difícil de digitar quando você não consegue ver o teclado. Deve mostrar que meu microfone está no caminho. Dê uma olhada, aí está. Três não é suficiente. É o mesmo que o padrão vem, depois cinco, lá vai você. Demasiado grande. Quatro? Uma das outras coisas que quero mostrar é dizer que você quer acrescentar. Este aqui vamos trabalhar porque há uma margem negativa. Não tenho certeza quando preciso de margem negativa. Mas nós mostramos para você mesmo assim. Digamos que queremos ter uma margem negativa nesta caixa Nest aqui. Neste, eu vou me livrar do mx_5, eu vou dizer, eu gostaria de uma margem, digamos que é uma margem de cinco, que vai torná-lo muito menor. Você vê que há uma margem do lado de fora empurrando-o para dentro. Uma margem negativa vai agarrar a mesma caixa verde, em vez de empurrá-la para dentro, vai empurrá-la para fora. O que é estranho. Tudo que você precisa fazer é colocar um n na frente dos cinco, que significa que é negativo. Essa é a base da sintaxe para espaçamento. Vamos dar uma olhada, m, n, p, k, t, b, l, r, x , y, para os diferentes tamanhos , tamanhos, e há algumas outras coisas para ler aqui. Mas é isso por enquanto. Tudo bem, eu menti, há mais duas coisas que quero cobrir. Uma delas são as consultas de mídia. No momento, estaremos fazendo a propriedade, que é o, ou o preenchimento marginal, então você adiciona os lados, que é superior, inferior, esquerda ou direita, e então o ponto de ruptura, em seguida, o tamanho. Vamos adicionar este ponto de interrupção que não fizemos antes. Apenas significa que nossas consultas de mídia, lembre-se de trabalhar com nosso documento aqui. Vou inspecionar e ativar a visualização do dispositivo. Lembrem-se que estes são os pontos de interrupção. Isso é extra grande, grande, médio, pequeno, e não há nenhuma consulta de mídia para extra pequeno, ele apenas assume. É algo chamado mobile-first, ele apenas assume tudo o que não é especificado, assume que é este excesso ou este extra pequeno, mas quando você realmente escreve. Vamos fazer isso acontecer. Vamos brincar com um estofamento para este P-tag. Só por risos. Vamos dar uma olhada. Meu P-tag aqui, eu vou adicionar uma classe de, digamos para, mas uma coisa que eu não cobriu é se eu colocar um m_5 sem topo ou inferior ou x e y, ele assume todos os quatro cantos. Essa é a outra coisa que eu queria cobrir. Digamos que eu queira uma margem de cinco em torno dele. Vamos dar uma olhadinha. Há uma margem de cinco em todos os pontos de interrupção. Ele assume que você está usando o pequeno e porque nada contradiz ele flui para todos eles. Mas vamos colocar um espaço e vamos dizer que eu quero uma margem de, digamos zero, mas eu não quero colocar o zero e eu quero dizer que quando ele tem um meio, eu quero chegar a zero. Basta adicionar este extra interno. Eu estou indo para [inaudível] as margens para baixo aqui. Digamos que cinco. Mas quando eu chegar ao médio, não aquele, aquele, ele volta ao seu tamanho padronizado. Eles podem querer fazer é quando ele fica grande, talvez lá, é fazer algo louco. Margens em grande. Quero fazer cinco negativos. Dan louco, vivendo de um limite, aí está. Pequeno ou extra pequeno. Pequeno é o mesmo, e ele chega a médio, e médio muda de volta para zero. Quando chega a grande, boom, e porque eu não especifiquei extra grande, ele flui através do extra grande. Começa a partir do centro, mobile-first out. Isso faz sentido? Espero que reitera todo extra pequeno é que um e, em seguida, porque eu não mudei pequeno, ele flui para este. Não há diferença entre essas duas consultas de mídia. Só mudei quando cheguei ao médium, que é aquele cara ali. Vai para zero. Tudo bem, então dois é um pouco é, se você não colocar a propriedade, seja ela colocar os lados, ele assume todos os quatro cantos. Em seguida, você pode segmentar para diferentes consultas de mídia. Agora a última coisa que eu quero fazer antes de seguir em frente é que eu tenho usado linha e coluna e termina nessas classes div. No início do curso, temos trabalhado fora talvez um cabeçalho seja realmente útil, nav é realmente útil, artigo da seção principal, não tão útil, mas essas são as tags HTML5 específicas que devemos estar usando para marcar nossos documentos. Para torná-los bons para leitores de tela e deficientes visuais como Google sabe o que. Vamos dizer que eu quero fazer este meu cabeçalho porque estas todas as coisas cabeçalho vai neste. Tem o meu logótipo, tem a minha navegação. Normalmente é o que colocamos no cabeçalho. Chamamos de fluido de contêiner. O que podemos fazer é chamá-lo de div, fluido de contêiner. Não vamos chamá-lo de div. Vamos chamá-lo de cabeçalho. Aqui em baixo, você mudou a barra de div para cabeçalhos assim sobre a abertura e o fechamento para cabeçalho. Nada realmente vai mudar em nosso site. Vamos dar uma olhada, parece exatamente o mesmo que antes. Deixe-me voltar a 100 por cento. Mas agora está marcado corretamente. mesmo com nossa navegação, as navegações aqui, em vez de chamá-lo de div, vou chamá-lo de navegação. Tenho que ter certeza que mudei o navegador de fechamento. Foi assim que eu o mantive separado para esta aula só para torná-lo agradável e fácil. Mas agora que estamos nos acostumando, vamos colocar em nosso contêiner certo, tudo é específico para HTML5. Preciso de uma etiqueta principal. Na verdade, vou deixar a etiqueta principal. O cabeçalho, a navegação, o rodapé, realmente claro e útil. Tem o principal aqui. É útil. Mas você entendeu bem a idéia. Você pode apenas ter certeza de que você está usando classes de navegação. Acerte uma classe com um fluido de recipiente ou classe div. Realmente não importa, mas devemos usar uma marcação HTML5 específica. Tudo bem, é isso para este vídeo, eu vou te ver no próximo. 108. Como alterar o layout do Bootstrap para dispositivos móveis ou desktop: Ei aí. Neste vídeo, vamos olhar para ajustar o layout Bootstrap ou a grade dependendo do tamanho do dispositivo diferente. Então, no momento, estamos em uma tela muito boa, grande e grande. Temos quatro caixas de recursos na parte inferior e duas, o logotipo e navegação lado a lado. Quer descer um pouco mais baixo, você pode ver que ele se quebra em três caixas de recurso? Esses caras ainda estão lado a lado. Mas quando chega à tela muito pequena, todos eles vão de largura total. Então logo, nav, e todos os recursos empilham um em cima do outro. Esse é o objetivo deste vídeo. Vamos entrar e descobrir como fazer caixas de recursos. Tudo bem, se você está acompanhando, vamos fechar nosso último projeto e fazer um novo. Isso vai ser chamado layout-c.html. Neste caso, vamos fazer um arquivo CSS de layout C , bem como porque nós estamos indo para obter um pouco mais em coisas como consultas de mídia. Então vamos fazer layout-c.css. Vamos ligar os dois em um segundo. Então eu vou separá-los para que eles fiquem lado a lado. Vamos trabalhar no HTML. Na verdade, vamos trapacear e pegar a maioria das coisas do layout B. Copiá-lo tudo, movê-lo através, colá-lo. Vamos apagar os estilos. Na verdade, podemos ficar com a caixa 1, vamos reutilizá-lo. Mas tudo o resto na tag estilo que vamos excluir. Tudo na etiqueta do corpo também vai correr. Você é muito apenas para baixo para uma página simples agradável que inclui um link para o CSS Bootstrap. Agora queremos vincular ao nosso próprio CSS. Então vamos nos conectar ao que acabamos de fazer lá. Preditivo pode ser útil e às vezes doloroso. Ele estava tentando adicionar a citação, abertura e o fechamento, que é legal, mas não realmente o que eu queria na época. Layout-c.css. Apenas verifique se é antes de sair. Vamos chamar este H1 com mybox aplicado. Então H1 com uma classe de mybox1. Vou colocar uma mensagem aqui. É melhor fazer isso, especialmente quando você está aprendendo porque você pode chegar muito longe e você diz, “Ei, eu sou muito bom nisso”, e então algo está quebrado e você diz, “Onde eu quebrei isso, em que fase?” Você vai começar a desempacotá-lo. Ok. Então aqui vamos nós. Sei que está funcionando porque estamos em H1 com um grande fundo de tomate. Então está funcionando. Era para isso que eu o queria. Vamos ver a nossa maquete. Está no seu projeto quatro arquivos de exercícios. Este é o último aqui. Você vai ser como, “Você não desenhou.” Comecei a desenhá-lo e pensei : “Na verdade, é fácil mostrar-te assim, principalmente por causa dos espaçamentos estranhos e outras coisas aqui e mostrá-los em comparação uns com os outros.” Minha página é muito pequena. Então vamos ter uma versão grande, média e móvel. Isso é muito importante quando se trata de, fica mais fácil, eu sei disso. Então eu fiz meu design no XD ou digamos Photoshop ou Adobe Illustrator, seja lá o que for que você fez, você vai ter que considerar o que acontece neste dispositivo móvel especialmente. Você pode ver o que fizemos neste logotipo superior, logotipo lado a lado. No tablet, decidimos realmente efeito ainda está bem, mas no celular vamos dividi-lo para que o logotipo esteja em cima da navegação. Isso é muito importante, porque eu quero que eles sejam seguidos aqui, mas não em uma fileira aqui. Vou te mostrar como dividir isso. Sim, essa é a razão pela qual este, este e este terceiro não estão seguidos. Eles precisam ser separados porque em nenhum estágio através de todos esses projetos diferentes, a caixa do herói se junta com esses três. Então é aí que você tem que pensar, “Posso colocar um elástico em torno de todos estes três em qualquer fase, em uma linha?” Nenhum deles. Estão todos separados. Considerando que as caixas de recurso, todos esses caras, mesmo estando separados aqui, eles estão todos juntos nessa. Então eles precisam estar em uma fileira e nós vamos apenas fazê-los com 12 colunas de largura. Então eles enchem a coisa toda no celular. Não se preocupe se você não acertar na primeira vez, mas você pode começar a olhar para ele e dizer, “Ok, então se eles vão estar todos deste lado, então eu vou colocá-los em uma fileira e enfiar as pequenas colunas e separe-os mais tarde.” Tudo bem, então vamos fazer este primeiro pedaço primeiro. Está reiterando o que fizemos. Faremos alguns atalhos à medida que avançarmos. Então vamos começar com um contêiner de pontos porque não precisamos que ele seja fluido. Dentro daqui vamos colocar nossa linha e dentro dessa linha vai ter duas vezes duas colunas e dentro disso vamos adicionar a mybox. Então vamos fazer outro contêiner chamado mybox1 então “Enter”. Se essa sintaxe e você disser : “Cara, eu nunca conseguirei isso. Demora uma eternidade.” Ele faz. Eu nem sou tão bom nisso. Eu sei que isso me economiza muito, então vale a pena se acostumar com isso. Como funciona, tenho um contentor com uma fileira. Há duas chamadas dentro dela com a minha caixa div dentro delas. Vamos dar uma olhada no navegador. Desligue-o, ligue-o novamente. Lá está ele. Vamos de tomate para uma outra cor aleatória. Na verdade, basta clicar no tomate. Eu vou escolher. Ainda não usamos amarelo. Vamos usar um sol quente, vamos chamar essa cor. Temos a primeira parte. O que mais precisamos fazer? Precisamos fazer a caixa do herói para que isso possa estar em sua própria linha, em sua própria coluna. Então vamos dizer por baixo, então recipiente antes que feche, eu vou colocar em alguns espaços só para que eu saiba onde tudo está, o mesmo com você. Bom. Vou mostrar-lhe um pouco de sintaxe de codificação. Então nós fizemos isso. Row, eu quero apenas uma coluna dentro dela, mas eu quero algum texto dentro dela, em vez de ter que escrever. Puseste-o nas chaves. Já cobrimos isso antes? Eu não sei. Não me lembro se o fiz. Chaves no final disso significa que ele vai colocar em algum texto de espaço reservado. Vamos dizer, “Caixa de Herói”. No final disto, vamos bater no “Return “, não. Vamos colocar uma cinta encaracolada de novo. Você precisa disso para ativar todas as vezes, o que é um pouco irritante. Então eu apaguei e comecei de novo e ele disse, “Oh, você quer dizer os atalhos de imagem.” Você é tipo, “Sim”. Você pode ver que é colocado em texto exibe texto automático se você tiver colchetes no final. Vamos dar uma olhada no nosso navegador. Temos outra caixa. Na verdade, eu esqueci. Você é tipo, “Isso não funcionou na época.” Eu sei. Tudo bem, agora vamos colocar a minha caixa 1 com as chaves dentro chamada caixa de herói. Não é um atalho agora, mas entendes o que quero dizer. Tudo bem, tenho um teste para você. Eu quero que você pare e eu quero que você veja se você pode fazer estes quatro, todos na mesma linha. Vai ser uma fileira, quatro colunas. Dentro deste quatro colunas vai ser a nossa div mybox e dentro da div mybox quero texto todos dizendo recurso. Não coloque um, dois e três. Vai colocar a mesma coisa em todos. Basta escrever o recurso de palavra e você pode adicionar um, dois e três depois. Então, faça uma pausa agora e fique frustrado e tente ver se você pode fazê-lo funcionar com a sintaxe da suíte. Você pode apenas digitar. Vou te mostrar em um segundo. Você vai fazer isso. Você fez isso? Se não for, vou tentar fazer isso com você. Este é o lugar onde é um pouco de um dobrador mental. Então eu quero uma briga. Dentro dessa fila, quero uma coluna, quero quatro colunas. É aí que a maioria das pessoas se enganam. Eles adicionam as vezes quatro mais adiante, depois da mybox. Então eu quero quatro deles. Às vezes, até quatro. Ok, dentro disso, embora eu queira um.mybox e dentro daqueles mybox, eu quero a palavra “recurso”. Vou apertar Return no teclado porque é bonito. Você pode ver o pequeno ponto para chegar à tela. Você não pode me ver apontando, mas você pode ver o pouco preditivo. Vou mover o meu rato. Ali está, ali. Está pronto para ir. Isso funcionou? Meio que... Vou deixá-la. Eu não sei, sua característica de som exótico. Vamos dar uma olhadinha. Não funcionou em tudo. Chamei-lhe “mybox” e não “mybox1”. Isso está tudo bem. Está mangueira lá fora, não tenho certeza se você pode realmente ouvir isso, é muito legal. Um pouco de chuva. O que queremos fazer é, na verdade, adicionar o texto ao nosso logotipo. Vou adicioná-lo ao nosso Nav e olhar, e queremos fazer algumas coisas. Queremos, vamos olhar para o nosso exemplo, na área de trabalho, é dividido em dois, mas aqui não é. É cem por cento de largura, eles se dividem em cima há as linhas. Você sempre começa a trabalhar com dispositivos móveis primeiro em mente, quando está trabalhando com bootstrap. Digamos que quero que essas duas ligações sejam 12. Não preciso dizer a este para ter 12 anos, mas faremos mesmo assim, só para ser consistente. Por que não estou colocando, digamos, xs? Porque eu queria ser um bem pequeno, lembre-se, eles assumem que se você não der uma medida, eles assumem que você quer dizer o menor tamanho possível, que é xs, ou a visualização móvel, vamos dar uma olhada e vamos clicar com o botão direito do mouse, ir para Inspecionar, verifique se as visualizações do dispositivo estão ativadas, e vamos para responsivo, vamos para a menor, e é verdade. Fez doze, porque todo o caminho atravessou. Mas porque poderíamos ter feito 12 na parte inferior e flui para cima, eles são todos 12. O que precisamos fazer em algum momento, precisamos decidir que realmente precisa ser maior. O que vamos fazer é deixá-lo como cem por cento lá, mas uma vez que chegamos a essa visão, que é o xs, sm, md para médio, é onde eu queria mudar, um tamanho de tablet. Eu vou dizer, você vai ter 12 anos até chegar a ligar para o MD, e eu quero que você tenha seis anos, que é metade dos 12. A outra coisa estranha é que você não precisa fazer, e eu não preciso de nada nisso. Posso deixar isto como uma chamada, porque vamos dar uma olhada primeiro. Vamos olhar para a versão pequena, é 12 de diâmetro, então eu chegar a este meio, e ele se divide em dois. A razão pela qual eu não tenho que fazer nada com o Nav, é que o Nav vai, eu vou fazer o que me mandarem baseado no cara na minha frente. Esse cara ou garota diz, “Eu sou caras sexy bem, eu vou preencher o resto da fila, se este diz, “Eu tenho 12 anos”, ele diz, “Bem, eu vou até a próxima fila porque não há espaço”, muito obediente. Segundo filho, não é verdade na minha família, mas hey hoo. A próxima coisa que eu quero fazer é eu quero mexer com essas caixas de recursos, e aqui caixa não precisa de nada fazer, é 12, 12, 12, são esses caras de recursos, então, por padrão, eu quero que eles sejam 12 de diâmetro, então eles encher no meu dispositivo móvel, mas mais tarde eu quero que eles sejam três em uma fileira, e depois quatro em uma fileira. Falta uma, que desligará um pouco mais tarde. Precisamos entrar e dizer, “caixas de recurso”. Precisamos dizer, “Oh, eu gosto de você”, vamos ver o que ele faz por padrão e às vezes, vamos dar uma olhada, vamos descer. Você pode ver, quando chega a um tamanho muito pequeno, ele realmente diz, “Eu não posso hackear” suas caixas de recursos precisam ir cem por cento porque não há espaço suficiente para o texto caber. O texto diz, ele é apenas quando o texto vai, se você tivesse um grande pedaço de texto aqui ao longo da estrada, ele iria quebrar mais cedo, e você é como, oh, eu posso deixá-lo assim, e você é como, não, vamos ser realmente específico com ele. Vamos contar quando estiver no XS. Eu não precisava escrever xs, eu queria que fosse 12, e na verdade são 12 para eles. Multi curser, mantendo pressionada a tecla Option no Mac, tecla Alt PC, e nós vamos dizer, eu gostaria que a chamada fosse 12. Todos esses caras serão doze por padrão. Verificando o navegador todo o caminho até, e não é verdade o que ele está fazendo, eu fiz algo errado. Minha caixa, essa ligação eu fiz na coisa errada. Eu fiz isso aqui dentro da minha pequena caixa interna, você precisa fazer isso esse cara. Vamos passar para o Comando D só para lançar mais atalhos. Comando D em um Mac, Controle D no PC porque eu tenho, col, col, col, e eu vou dizer que na verdade é chamada hífen 12. Vamos dar uma olhada na visualização e você pode ver lá é recurso é todo o caminho através, 12 em todos eles. Agora, o que eu quero dizer, eu tenho uma flub streaming e então, na verdade, quando eu chegar MD, eu gostaria de fazer o que estamos fazendo com essa? Precisamos dividir 12 por 3, é 4, eu acho, vamos dar uma olhada, aqui vamos nós. Então, é pequeno, tem 12 de diâmetro, mas quando eu chegar a este meio lá, eles se dividem em três unidades, porque eu dividi as 12 linhas por 3, que é igual a 4, e nós vamos desligar essa e em um segundo, vamos fazer o último quando ele chegar a grande, que é este aqui, eu quero mudar para fora para quatro linhas através, ele vai chamar lg, e ele precisa ser 3, 3, 3, 3, 3 igual a 12, que deve funcionar. Doze de diâmetro, quatro de cruzamento, três de cruz. Estou falando de colunas aqui, ficando confuso, mas você entende o que quero dizer certo e tudo o que precisamos fazer é ter certeza que usamos essa sintaxe. Algumas coisas que você quer fazer, vamos desligar primeiro e desligar esse cara, na verdade, e vamos fazer isso no próximo vídeo, fazer isso no próximo vídeo, eu quero recapitular antes de deixarmos isso, é que, hey Dan, você só está projetando para estes três. Por que você não fez um para XL, ou SM, porque há cinco consultas de mídia. Há extra pequeno, pequeno, médio, grande, extra grande. Por que você não zombou deles na sua maquete aqui? Eu acho que eu não posso realmente boas decisões de design sem realmente vê-lo ser responsivo, então eu faço grandes paradas, eu vou fazer pequenas, médias, grandes, e então apenas uma vez eu vou vender o cliente isso e, em seguida, eu vou ajustar para os outros apenas se eu precisar. Eu não vou tomar um realmente grandes decisões conscientes porque há tantos tamanhos diferentes, então eu zombo disso para isso, e então só agora ou quando eu começar a obter algumas das imagens e alguns do texto em, eu vou começar a fazer, na verdade, ele está fazendo coisas estranhas entre este e este, e eu estou indo apenas na mosca, em vez de voltar para as minhas ferramentas de maquete como XT, ou um esboço, eu só vou realmente apenas fazê-lo no código voador e ir ok, que a imagem parece que teria alimentado, mas não faz ou leva de volta estranho, então eu vou adicionar para esta caixa de recurso particular, eu vou dizer que eu vou fazer o, talvez o xl porque eu posso caber cinco deles através. É por isso que eu estou ignorando as outras consultas de mídia, você pode ignorá-los e apenas usar chamadas, ok, e apenas assumir móvel o vai ser para o seu site, mas você provavelmente precisa de um mínimo de lidar com o extra pequeno, o tamanho minúsculo, e o grande. Esses são os dois como mínimos fazer versões grandes, versão pequena, e, em seguida, qualquer coisa no meio, cabe a você se você quer gostar de quanto tempo você quer gastar e os diferentes in-between. Mas provavelmente, eles são realmente comum um é pequeno ou extra pequeno e médio para tablets e , em seguida, grande para coisas de desktop e, em seguida, não se preocupe com as telas gigantes, ou o telefone celular paisagem estranho, que é sm, o pequeno. Agora, estes são apenas os papéis do Dan. Não acho que eu poderia estar olhando para uma empresa maior. Eles dirão, usar todas as consultas de mídia e eles podem realmente adicionar algumas de suas próprias consultas. Eles podem adicionar sete deles, dez deles. Só para ter certeza de que seu navegador funciona melhor. A Amazon vai se preocupar com isso. Eles querem tela cheia, melhores usos da tela, para mim e meus clientes, eu estou indo pequenos empregos para empresas menores, então eu acabo fazendo o suficiente e não fazendo uso exato baseado de todos os tamanhos de tela diferentes, só porque eu não tenho isso também, a capacidade ou o orçamento para fazê-lo. Esse é o meu aluguel. Alugar mais, para o próximo vídeo. 109. Como ativar e desativar as opções no seu site usando o Bootstrap 4: Oi lá. Neste vídeo, vamos mostrar-lhe como ativar e desativar caixas usando o Bootstrap 4. Você tem quatro caixas de recurso no fundo aqui. Vamos torná-lo menor. Ainda são quatro. Um tablet é apenas três porque isso é o que se encaixa com base. Mas vamos para o celular. O quarto está de volta. Vamos mostrar-lhe como ligar e desligar o ecrã para diferentes caixas utilizando o Bootstrap. Queremos desativar uma dessas caixas de recursos na visualização do tablet, em nosso MD. Porque no momento, você pode vê-lo aqui no MD. Tenho um quarto cara que precisa desaparecer. É super simples. A documentação é utilitários de documentação getbootstrap.com e está em exibição. Rolando para baixo, você acaba com este chamado de elementos escondidos. É simples e em flexão cerebral ao mesmo tempo. O que eles fizeram alegremente é que eles lhe deram como todos esses casos de uso. Pergunte a si mesmo, o que você quer fazer? Leia através deles, escolha qual, aplique estes. Basicamente é em d, é curto para exibição. Fizemos isso em cursos anteriores, quero dizer, não exibimos nenhum e exibir bloco. Vamos mudar entre estes dois. Se eu não escrever extinção imediata de consultas como pequenas, eu apenas escrevo d-none. Vai assumir que todos eles não são nenhum. Então d-none é basicamente a versão do celular. Como ele flui para dispositivos móveis primeiro, ele fluirá através do pequeno, médio, grande e excelente. Isso se você desligar todos eles. Você pode ver aqui escondido apenas no extra pequeno. Está desligado para todos eles, incluindo extra pequeno. Mas então o próximo código de mídia você ativou novamente dizendo no pequeno bloco e porque é MD e maior depois, todos eles se tornam bloqueados e todos são visíveis. Isso fica um pouco confuso. Vamos apenas fazê-lo para o nosso exemplo em código VS. É este quarto. Vou adicionar números a eles. Vamos torná-lo um pouco mais fácil, 2, 3, 4. Nós acabamos de adicionar outra classe a isso para dizer sobre, o que vamos fazer? D para exibição. Qual deles vamos fazer para médio? Não vamos fazer nada. Guarde para dar uma olhadela. No meu exemplo aqui, ele se foi. No pequeno, ele está lá. Nosso extra pequeno está lá. Em seguida, um pequeno, que é esta consulta de mídia aqui. Está ali. Mas, depois, um médium, desapareceu. Mas à solta, também se foi. Porque flui a jusante e porque começa no celular primeiro, você começa a idéia. Vamos ligá-lo de volta depois do meio porque nós cuidamos de um meio, vamos ligá-lo novamente em geral. Digamos que na exibição, na LG está de volta ao bloqueio. Com sorte, boom. Está aqui em baixo, desliga esse meio e incorpora em geral. Então novamente em extra grande, ele ainda está lá por causa desse bom fluxo. Uma última coisa que eu quero mencionar apenas enquanto estamos aqui é que alguns dos links que eu tive, ou algumas das pesquisas que você faz no Google, você pode acabar no getbootstrap.com e nos documentos. Na verdade, tem o número da versão aqui. Esta é a primeira versão de quando foi para 4.0, levou uma eternidade para chegar lá, mas passou de 3-4. Na verdade, estamos à altura, se tiveres uma casa. Bem, quando fiz este vídeo, estávamos em, onde estávamos? 4.3.1, você provavelmente vai ser muito mais alto. Provavelmente você ainda está acordada às 4. Isso é 2019. Se estiver assistindo nos próximos anos, não faço ideia. Mas vais verificar isto e aposto que ainda está às 4, mas isto vai mudar. O documento, quando o alteram, eles realmente têm que atualizar a documentação. Você pode acabar em uma documentação antiga melhor como essa. Esse link que eu encontrei me envia para 4. Se eu for em vez de usar uma pesquisa do Google para encontrá-lo, vou para o Bootstrap e vou para a documentação. Eu vou pelo caminho mais longo. Em vez de usar o Google para encontrá-lo, eu entro em Utilitários, Display. Então, mais adiante aqui, está escondendo elementos. Parece exatamente o mesmo, mas você pode ver que estamos em 0.3 porque uma dessas mudanças de talvez 4.2-3 pode ser, nós vamos mudar essa coisa de exibição porque ele não está funcionando. Esse índice pode ser completamente diferente ou você pode estar trabalhando em um site mais antigo. Você está trabalhando no site de outra pessoa, e eles construíram este site em uma versão antiga do Bootstrap. Você pode ver aqui nossa visão do Bootstrap é que estamos fazendo referência ao CSS de seu site chamado 4.3.1. Se eu estou lidando com apenas 0, algumas das coisas novas que foram atualizadas desde então podem não funcionar, terão problemas. Basicamente, a regra é, eu acho que é apenas algo para estar ciente. Não vai te pegar, provavelmente. Porque o que você faz é quando você está construindo o site, você vai construí-lo em qualquer versão e você escreveu aqui explicitamente. O que acontece é que ele vai para Bootstrap procurando essa versão e usa seu site com base em todas as regras que se aplicaram quando isso foi feito. Isso pode ser daqui a 10 anos, já que quase os sites do Bootstrap ainda estão em andamento, eles terão o 4.3.1 lá em cima que vai fazer referência para usar este site, então ele vai continuar funcionando. Mesmo que eles possam estar atrás da visão 20 por eles. Isso faz sentido? Tudo o que eu quero é apenas ter certeza, percorrer o caminho mais longo, apenas para ter certeza de clicar na documentação, descobrir onde ela está, ou pelo menos apenas ficar de olho aqui para ver com qual versão você está realmente interagindo . Tudo bem, isso é o suficiente para este vídeo. Vamos saltar para o próximo. 110. Como recriar as consultas de mídia do Bootstrap em seu próprio CSS: Olá aí. Neste vídeo vamos recriar todas as consultas de mídia que Bootstrap usa em nosso próprio CSS que podemos fazer nossos próprios pequenos ajustes. Como o Bootstrap tem alguns predefinidos, olha nas consultas de mídia na parte superior aqui, queremos recriá-los porque queremos fazer este texto aqui alterado de rosa para azul para vermelho. Vamos recriar as consultas da mídia e colocar uma música na nossa cabeça pelo resto do dia. Para este vídeo queremos recriar as consultas de mídia para que possamos substituí-las. Queremos combinar o bootstrap uma vez, você não precisa, você pode fazer suas próprias consultas de mídia, mas seria estranho e difícil porque você teria Bootstrap lutando contra você. Então, se você simplesmente não quer fazer isso, então você pode considerar como Bootstrap a coisa certa a usar, ou eu deveria apenas fazer minha própria coisa? Eles dizem que nós amamos o MD, e nós amamos o SM e o ILG e havia boas, mas há apenas coisas que Bootstrap não pode fazer ou não quer fazer que não podemos descobrir como fazer. Precisamos recriar as consultas de mídia CSS aqui. É muito fácil de fazer. Eu vou para getbootstrap.com. e a documentação. Está sob não me lembro. Conteúdo? Não, está sob disposição. Basta rolar um pouco para baixo. Aqui eu vou os pontos de ruptura. Você pode simplesmente pegar tudo isso, copiá-lo, colá-lo em código VS. Nós vamos colá-lo em algumas coisas estranhas que precisamos fazer é ele está usando um comentário que é, esta barra barra, é um comentário de linha única e não funciona para o que estamos fazendo. Nós vamos pegar tudo e simplesmente embrulhá-lo em l, como um comentário CSS apropriado. Estou usando a barra de comando de atalho, e você só precisa ter certeza de que a barra de hash vai para ambos os lados dela. Vai ser o mesmo para você, meu amigo. Eu acho que isso é para o arquivo CSS. Eu nunca usei esse comentário de qualquer maneira. A outra coisa que precisa acontecer é que isso realmente precisa estar no topo, porque este é o global. Não, fizemos Global antes. Extra pequena, considerada global. Fizemos desktop mais cedo sobre Bootstrap gosta de fazer escritório móvel. Legal as outras coisas são esses pontos apenas espaços reservados. Vou comandar D eles. Eu tenho todos eles vão controlar D em um PC e excluí-los, colocar seus dez em para que eu tenha todos os meus dispositivos de mídia separados prontos para ir. Para provar o seu trabalho, vamos para a nossa caixa de herói logotipo. A caixa de herói colocada está em um H1 dentro dessa caixa um rebatedor clássico. Eu vou dizer que o padrão para ele vai ser algum H1 vai ser, digamos cor de vermelho. Nós só vamos trabalhar nosso caminho através de consultas de mídia. Você sabe como isso funciona, então isso é padrão. Se eu não mudá-lo em nenhum outro lugar, ele vai fluir através do documento e isso vai ser não importa o tamanho do dispositivo que ele está em, ele vai ser vermelho a menos que eu diga em pequeno. Eu vou fazer você loop. Vamos fazer isso em alguns deles. Vamos pular a média. Vamos fazer este. Vamos escolher uma cor mais exótica. Você fica rosa e extra-grande vai ignorar também. Deve funcionar. Ter um pouco de olhar sobre deve começar em vermelho, em seguida, ficar substituído para azul, em seguida, vai para rosa no meu grande. Você pode ter isso aqui, ele combina bootstrap perfeitamente, então ele vai mudar com o, digamos, como neste caso L eu tentaria as mudanças de estrutura. Como tal, você pode ter que tornar o H1 um tamanho menor ou uma cor diferente , existem alguns tamanhos padrão que você pode usar para texto. Podemos olhar para isso um pouco mais tarde, mas haverá tempo para comer como eu gosto. Apenas faça o que eu digo, por favor. Algumas coisas para arrumar antes de irmos, deveríamos chamar isso de contêiner. Devíamos chamar isto em vez de um div, devíamos chamar-lhe um batedor. Este aqui deve ser Slash Hitter. Com o meu nav esta caixa dentro do batedor deve ser isto e deve ser aquilo. Minha caixa de herói aqui eu deveria chamar isso é um principal. O fechamento da principal. Eu não tenho uma foto no momento. Eu quero me acostumar com isso porque nós fizemos linhas e colunas mantendo-o separado, mas você vai encontrar esta classe aplicada a todos os tipos de tags diferentes em HTML. Vai ser isso. Obrigado por assistir. Obrigado, mordeu medula. Vejo você no próximo vídeo. 111. Como usar o Google Chrome Inspect - Removendo estilos de substituição do Bootstrap: Ei aí. Este vídeo é tudo sobre como as mãos fazer Eu sei o que está fazendo este fundo cinza e este botão azul e tamanho dos textos e Bootstrap quando eu não criá-lo. Vou mostrar a você como usar a inspeção do Chrome para descobrir qual CSS é e, em seguida, decidir se substitui ou não. Essa é a questão. A parte principal é usar a extensão do Chrome ou as ferramentas de desenvolvedor do Chrome. Mas nós vamos realmente remover o fundo e mudar o tamanho e a cor do H1 enquanto estamos aqui. Tudo bem. Vamos ficar presos. Tudo bem. Antes de começarmos, vamos falar sobre a batalha à nossa frente. Este vai ser o nosso maior teste aqui, e vai ser a última coisa para este curso é o projeto 4 nossa bondade de iogurte medi. Agora, isso vai colocar embora desconhecido para o teste, ok, porque nós não estamos fazendo apenas construir em nós mesmos, com coisas que sabemos, nós vamos realmente começar a interagir com Bootstrap. Começamos construindo apenas jogando e todos os pedaços e pedaços, talvez um Jumbotron e caiu lá, e então jogamos tudo lá, foi super rápido. Agora, vamos lutar com o Bootstrap usando todo o conhecimento que aprendemos no início do curso, e talvez você não pense nisso como uma batalha, pense nisso como um quebra-cabeça. Tudo pode ser resolvido, e eu vou dar-lhe truques nesta seção mista do curso para descobri-los, e vamos trabalhar fora um pouco mais Bootstrapiness. Tudo bem. Vamos ficar ocupados. Vamos voltar para o código VS. Fechei o que estávamos trabalhando antes e reabri nosso índice e style.css. Parece com isso no momento, e só por precaução, porque saltamos para dentro e para fora deste arquivo um pouco ficando amigo indo e mexendo com ele. Se você encontrar um pouco através deste curso ou pelo menos através deste vídeo, você é como o meu não está fazendo o mesmo. Talvez queiras ir aos ficheiros completos e abrir os meus. Eu fiz um especial, em vez de salvá-lo no final do vídeo, eu fiz este que diz começar. Os arquivos completos estarão em uma pasta em seus arquivos de exercícios, procure o que diz começar se você quiser apenas como, vamos começar com a versão do Dan para que quando eu estiver seguindo, nada dê errado. Tudo bem. A primeira coisa que quero fazer é pular o navegador porque é um pouco mais complicado, e se aprendermos algumas das partes mais fáceis como este Jumbotron e esses cartões, então podemos voltar para a barra de navegação e será muito mais fácil. Vamos começar com um Jumbotron, que é uma grande coisa aqui. Vamos para o código VS. O que eu quero fazer é me livrar do fundo cinza primeiro. Porque eu olhei para ele, não é o que eu quero no meu design, então eu estou verificando. Você tem uma maquete em seus arquivos de exercícios para ver o que estamos fazendo. Arquivos de exercícios, projeto para iogurte e há uma maquete. Há um PDF lá com a versão móvel e a versão desktop. Vou abrir o arquivo real no XD. Não há cor de fundo, vou ver através do fundo. Nós já adicionamos o gradiente anteriormente, então agora precisamos remover a cor do plano de fundo. Isso traz à tona um ponto realmente bom como como eu sei o que controla a cor de fundo de um jumbotron? Vamos usar o Google Chrome. Vamos usar esta inspeção. Essa coisa aqui vai me enlouquecer. Vai continuar passando, todo o caminho, não é? - É. Tudo bem. Viveremos com isso. Aqui em cima, vamos clicar com o botão direito do mouse em qualquer lugar no fundo cinza. Nós vamos para este aqui diz inspecionar. O que eu vou fazer é desligar a pré-visualização do meu dispositivo, então ele só me mostra a coisa toda. Vou ter que mover meu aplicativo um pouco. Vou esconder isso um pouco, porque isso me irrita. Vamos clicar neste botão aqui. Esta coisa aqui é como um botão de movimento interativo que vai começar a destacar as coisas. Você pode ver o HTML, fique de olho aqui embaixo. Ele apenas salta e abre dependendo do que eu tenho pairado acima. Vou clicar onde sinto que tenho o fundo do jumbotron. Ele diz que classes são aplicadas ao div, então algo chamado jumbotron. Aqui, diz que a classe jumbotron e usar esses tamanhos pequenos está dando um pouco de carinho. Além disso, Jumbotron em geral, sem uma consulta de mídia está dizendo a ele para ter uma margem na parte inferior de duas resmas, e uma cor de fundo deste cinza. Isso é o que eu quero enfrentar. Quero enfrentar o jumbotron, a cor de fundo e mudar isso. Essa é a maneira de investigar o Bootstrap e descobrir o que você precisa mudar. Você poderia passar pela documentação e tentar descobrir isso, mas muitas vezes mais fácil é apenas um clique com o botão direito do mouse e inspecionar e, em seguida, ligar este, e, em seguida, clicar nele. Vamos descobrir isso, vamos fazer uma classe chamada jumbotron, então agora CSS. Eu vou dizer ponto jumbotron vai ter uma cor de fundo. Cor de fundo de. Eu só vou escolher qualquer cor antiga, e então colocar o meu ponto e vírgula de fechamento, em seguida, um pairar sobre ele e obter essa coisa aleatória que aparece, então eu vou direto para baixo para ver completamente através. Não importa qual cor é, desde que seja completamente transparente. Este último precisa ser zero. Vamos verificar no navegador, e lá vamos nós. Removemos o fundo, aquele carinha ainda deslizando, mas removemos a cor de fundo. Tudo bem. A próxima coisa é este H1, vamos mexer com o tamanho. O tamanho e a cor, e não combinam com a minha maquete. Minha maquete, eu quero que ele seja cerca de 70 pixels, e aqui, o que eu posso fazer de novo, eu posso clicar neste pequeno elemento inspecionar e então clicar nele. Na verdade, eu posso apenas pairar sobre ele. Diz a sua fonte, consegue ver logo acima? Não consigo clicar nele. Mas diz que a fonte tem 56 pixels, o que é estranho. Você está tipo, hey, eu pensei que estava sendo, você pode vê-lo aqui, eu cliquei nele. Diz ser exibido cheio, o que faz com que seja 1,5 resmas. Como por que estão 50 aqui, ou 54? É porque na verdade isso é como dizer ao navegador que deve ser 3,5 vezes o tamanho padrão. O navegador faz o cálculo e acaba sendo 54. Isso é o que o CSS está dizendo, o navegador vê o resultado final. Quero que seja exatamente 70. Este seria um bom caso de passar por cima e dizer que na verdade eu vou apenas substituir o H1 e eu digo que seu H1 é um tamanho de fonte específico de 70. Tamanho da fonte 70 pixels é o que é igual. É 70 vezes foi um 0,0625. Você está se lembrando disso ainda, você escreveu em algum lugar? É um 4.3, então vai um pouco mais alto. Eu poderia dizer que agora, eu quero que seja quatro pontos. Eu poderia dizer 4,3 resmas. Eles funcionariam? Provavelmente não. Porque o que está dentro, vamos dar uma olhada. Posso clicar com o botão direito, inspecionar. Você pode ver aqui que ainda é 3.5, e está me dizendo aqui, olha, seu H1 está tentando dizer para ser 4.3, mas foi riscado e substituído por este aqui. Por quê? De volta a essa coisa chamada especificidade. Aqui, H1 é muito vago, você pode ver que H1 é o que está se aplicando a isso. Mas então há uma classe em cima dela que é muito mais específica para dizer, fazer essa outra coisa. Está anulando isso. Se quisermos que isso entre em vigor, precisamos excluir essa classe e funcionará, então dê uma olhada. Agora, você pode ver que é 4.3 resmas ou jantes, e clicar com o botão direito do mouse aqui em cima, inspecionar realmente usa essa opção, e você pode ver que é caixa de 68,8 pixels porque eu deixei de fora alguns que deveria ter colocado em 3,75 para obtê-lo Exato. Isso pode ser um caso, nós somos como, na verdade, é uma boa idéia. Vou me livrar de tudo isso. Mas para substituir ou não para substituir, isso funciona totalmente. Digamos que não quero fazer isso. Quero mantê-la limpa e limpa. Porque trabalhamos aqui e desfazemos isso. Aquele cheio foi perto, se eu pudesse subir para cinco? O que mostra cinco vai verificar em um segundo, mas vamos apenas tentar. É muito menor. É do outro jeito que queremos ir três fica um pouco maior. Você pode ver lá, na verdade está em 72 pixels agora, que é como se fosse bom como 68 era em termos de estar fora um pouco, então há muitas classes para controlar coisas como tamanhos de fonte. Vamos dar uma olhadinha. Nossa documentação de bootstrap, sabendo onde está, é um problema na documentação. Você pode começar com a pesquisa, talvez fazer uma pesquisa no Google, mas você vai acabar sob conteúdo e tipografia. Aqui está o nosso H1, 2 e 3, que é o que eles parecem por padrão. Então, por baixo dele um pouco mais abaixo, estão as telas, nós tocamos sobre isso mais cedo. Você pode ver 1, 2, 3, 4. Não há cinco, há talvez apenas inadimplente de volta a nenhum quando eu coloquei em cinco. Você pode trabalhar com isso. Se estes funcionam, perfeito, seu jeito, eles não funcionam, então você vai ter que parar de substituí-lo com seus próprios estilos personalizados. Dizendo com a cor da fonte, vamos dizer que eu quero passar, eu poderia estilizar isso e dar-lhe uma cor, então eu poderia ir cor da fonte branca, mas há uma classe? Então, aqui na tipografia, acho que mencionei que no fundo, cor, cor, cor, em algum lugar aqui. Onde é que está? Acho que está na verdade sob Utilitários. Cores que está lá. Cores primárias, você pode ver que há um monte deles há sucesso primário e secundário. Estamos procurando por branco, então carrapatos brancos, vai funcionar. Vamos pegar isso. Em vez de criar uma classe aqui, torná-la branca, podemos dizer realmente você com isso, e você marca o que ela diz? Texto de ponto branco. Dê uma olhada no nosso navegador e é branco. Este é um ponto muito bom. Você é como, por que eu fiz, não é, qual deles? Isso importa. Você vai para metade acostumado a isso se você estiver indo para abraçar bootstrap, porque você vai trabalhar em outros sites potencialmente que tem Bootstrap. Enquanto fazer os carrapatos brancos não é tão importante, o que tende a acontecer é que estes são cozidos com outras coisas, eles não apenas torná-lo branco ou, neste caso, ele faz. Mas vamos olhar para lembrar que usamos a cor, para as colunas. Sabemos que há muitas outras coisas acontecendo onde ele se decompõe em diferentes consultas de mídia, e também outras coisas legais. Como regra geral, eu tentaria fazê-lo em seu HTML usando classes pré-fabricadas, você vai ter menos problemas, até porque se você começar a tentar substituir muitas coisas, isso pode causar como efeitos knock-on . Tudo bem. Nós removemos a cor de fundo do jumbotron, nós mudamos o H1 aqui, usando material Bootstrap. Acho que a grande razão pela qual fizemos este vídeo é mostrar como usar a inspeção do Google Chrome. Vamos mostrar-lhe uma outra coisinha legal que você pode fazer é, digamos que isso seguir em frente, o que é isso, o que controla isso? Vamos clicar com o botão direito do mouse neles, ir para Inspecionar, e ele vai destacá-lo e dizer que é. O que dizia aqui em baixo? É destacado em azul, e diz que é a classe chamada carrossel control-next-icon. Isso é o que isso faz. Você é como eu faço? Agora, você pode sair e encontrar essa classe e fazer ou substituir amines ou encontrar outras opções usando a documentação do Bootstrap. O que faríamos se escrevêssemos, acontece que eu sei que é anterior não anterior, e eu clico em outro lugar. Você pode ver aqui, é movido para ser o contrário. É apenas um bom exemplo de que eu posso realmente editar o código aqui e aqui enquanto eu estou no Chrome apenas para provar as coisas em vez de voltar para aqui, fazendo isso aqui na minha cópia de trabalho, e, em seguida, testá-lo, em seguida, desfazê-lo. Você pode realmente fazê-lo no navegador usando o Inspect do Google Chrome. Digamos que queremos mudar a cor disso, ou a cor dessa coisa azul. Vou clicar com o botão direito e inspecioná-lo. Em vez de voltar e descobrir o que é o botão primário, posso entrar aqui e dizer, tudo bem, há uma cor chamada isto. Vou desligá-lo para ter certeza de que estou tomando a coisa certa. Não parece mudar nada, cor da borda desligada. Considerando que, ele está recebendo sua cor a partir de agora, porque esse era o pairar. Veja aqui embaixo. Lá está ele. Eu não quero mexer com o pairar, eu quero mexer com este, porque é de onde ele está recebendo sua cor inicial, e eu posso mudá-lo aqui. Eu posso dizer, na verdade, o seu , se branco, branco assume um fundo branco, bom trabalho, então. Mas acho que vou continuar, quero mostrar como você pode mexer com as coisas aqui e testá-las usando a inspeção do Google antes de trabalhar no seu próprio documento. Tudo bem. Isso é tudo para este vídeo. Google Chrome Inspect, as Ferramentas do desenvolvedor, super úteis. Vamos para o próximo vídeo. 112. Como adicionar sombras a textos e caixas no Bootstrap 4: Oi lá. Neste vídeo vamos adicionar texto à borda um ao longo do topo aqui. Uma pequena e sutil. Nós também vamos mudar este texto principal para ser maior e branco. Vamos mover o botão para cima, apagar um pedaço de coisas que não precisamos do nosso site atual. Mas realmente o que queremos fazer neste vídeo é mostrar-lhe como se exercitar. Está em Bootstrap? Preciso fazer meu próprio estilo personalizado? Os processos disso, pelo menos aqueles que eu uso. Vamos indo. Este vídeo é um bom exemplo do que acontece quando Bootstrap não faz tudo e você tem que fazer suas próprias coisas. Estes são os lugares onde eu passo onde ele começa bootstrap.com. Você é como, quando eu soltar sombras, eu vou pegar uma documentação, e eu vou digitar, cair esperando que ele agora derrube sombras. Vou tentar derrubar a sombra. Lá vamos nós, temos sombras, exemplos, utilitários. Vamos tentar um destes. Incrível. Algumas sombras pré-fabricadas. Você é como, “Excelente.” Neste caso, há exemplos e você pode vê-los aqui. Sombra, pequena. sombra deve ser a normal e, em seguida, a sombra grande. Vamos colocar o grande foi só para ver. Vamos agarrá-lo e é colocado em ouvir. Você é tipo, “Calma, cara.” Bom trabalho. Bootstrap. Você sabe que é uma piada. Apague isso. Ele quebra em duas linhas. Legal. Vamos dar uma olhadinha e bum. Não é o que eu quero, eu quero executar um texto não executar o bloco, o bloco H1. Não consigo encontrar uma visão de texto. Fiz uma pesquisa no Google e ninguém tinha uma resposta. Então você chega ao ponto : “Parece algo que deveria ter”, mas não tem no momento, pelo menos 4,3 ou pelo menos que eu possa seguir ou encontrar. Isso é quando é bom caso como, “Tudo bem. Vamos fazer a nossa própria coisa.” Vamos criar uma classe [inaudível]. Vamos criar algo chamado sombra. Ela não existe no momento, então vamos criá-la aqui. Vamos chamá-lo de sombra, conspiração e sombras antes. Agora podemos usar o Bootstrap para ir rápido, mas podemos usar nossas próprias escolas de web design para estender o bootstrap. Tem ideia de como se chamava? Você faz o que eu faço. Você deve voltar para o documento antigo que você tinha sombra sobre ele e ir e encontrar a classe que faz isso funcionar. Fazemos pesquisa no Google. Lembro-me que tomo sombra por causa do ensino e porque usamos muitas sombras. Lembre-se, é o quão embaçado é primeiro, lembre-se que é x, y, depois embaçado e depois cor. Para o X, não quero que vá a lado nenhum. Significa zero. Para o y eu quero ir para baixo apenas um par de pixels. Quão borrada você quer o tipo de sombra. Eu vou ter como dois pixels embaçados. Eu já pratiquei isso. Eu vou digitar a cor para preto só porque eu quero voltar direto e clicar sobre ele e ir para aqui em algum lugar. Eu usei 15%, então 0,153, isso funciona para mim. Então vamos ver se isso tudo funcionou e olhar para que Bootstrap e você trabalhando juntos para fazer um pouco de site. Algumas outras coisas que quero fazer antes de partirmos é, lembras-te disto? Isso se chamava, eu acho Lead. Eu fiz um pouco maior. Eu quero mudá-lo, eu quero torná-lo branco e talvez um pouco maior porque eu quero que ele combine minha marca aqui com pedaços de carne reais. Não reconheci o iogurte de carne. Não achei que fosse uma boa ideia. Achei que era uma ideia engraçada. Agora você está preso a ele como um projeto de curso. Eu passo muito tempo projetando logotipos e produtos. Eu sou totalmente vegetariano, mas parecia engraçado na época. Queremos fazer isto branco e maior. O que você faz é que eu vou te mostrar o processo porque nós vimos isso, o que podemos fazer com ele? Lembre-se que clicamos nele. Vou à Inspecção. Vou checar e está usando essa coisa chamada chumbo. Vamos ao Bootstrap e entramos aqui e dizemos LED, conte-me mais sobre um bootstrap. Dizemos que soa bem. Tipografia, chumbo. Diz que o chumbo faz tudo isto. Então não há mais nada. Você diz: “Não há anúncios como chumbo 1, chumbo 2. Eu sei que vou ter que fazer uma coisa personalizada. Então eu vou entrar no meu aqui. Eu vou dizer. Liderar. Vou usar-te principalmente, mas gostava que fosses uma cor branca, não de trigo. Até branco. Quero mudar o tamanho. Eu trabalhei para fora o tamanho da fonte usando meu cálculo louco é de cerca de 2,2 rems. Precisamos mudar o estilo do texto, vamos fazer isso, e vamos nos livrar de algumas das linhas aqui embaixo. No seu documento de texto que eu lhe dei, você pode digitar isso. Grosso e cremoso, vai entrar em vez de “Olá mundo”. Grosso e cremoso e com pedaços de carne reais. Vamos nos livrar de todos esses pré-textos. Certifique-se de que não perderemos nenhum dos registros. Aqui vamos nós. Salve isso. Agora vamos dar uma olhadinha. Está chegando perto da nossa marcação. Onde está a nossa marcação, aí está. Estamos chegando lá. Outra coisa que eu quero fazer é eu quero o botão porque isso está na minha marcação lá, é o botão que nós vamos mudá-lo, mas não há linha e nenhum texto, então eu queria me livrar deles. Primeiro, quiz pop. O que é isto? Pausa, dá uma olhadela. O que é o RH e há o meu [inaudível]? Estou esperando. Pausou? Você voltou? Você volta. Então, o hr lembre-se é uma régua horizontal. Ele vai embora através, mesmo que eu disse em um tutorial anterior que ele não se usa muito como um hr mais como uma régua, no Bootstrap, eles ignoram esse papel e usá-lo novamente. O que significa o meu? Você se lembra? Você conseguiu. É margem e é o para cima e para baixo, o eixo y e quatro é apenas o tamanho dele. Então, se o tornarmos maior, ele vai ter mais espaço. Se fizermos um menor , terá espaço menor. Mas não queremos nada disso. Não queremos vocês todos vocês. Adeus. Vamos deixar o botão lá, mas em vez de dizer para aprender mais, ele diz, o que ele diz? Diz “preços”. Isso vai ser isso para este vídeo e é menos mostrando a você tudo que Bootstrap faz e mais sobre como você se exercita, o que Bootstrap faz, o que você pode ter que fazer sozinho como nossa sombra e nossa liderança e você pode começar a ver como [inaudível] habilidades pré-bootstrap um realmente útil agora. Nas aulas não é nada agora criar nossas próprias aulas personalizadas e um monte de drama, estamos ficando bons nisso, eu e você. Ficaremos ainda melhores no próximo vídeo. Te vejo em um segundo. 113. Como alterar o tamanho e a cor dos botões padrão do Bootstrap 4: Olá aí. Vamos atacar este botão aqui. Vamos de azul e sólido para branco e delineado e maior e melhor. Vai ter um pairinho legal também. Vamos fazer tudo isso agora usando uma mistura de nosso próprio CSS e bondade do Bootstrap. Ok. O que queremos fazer com este botão? Primeiro de tudo, eu quero empurrá-lo para baixo um pouco porque na minha margem aqui, é para baixo um pouco mais. Eu quero ir e fazer isso. Boa, fácil. Certo, então o botão aqui, onde está? Jumbotron está dentro dele, ali está o botão. Vamos adicionar uma classe de. Lembre-se que foi marginalizado e eu quero adicioná-lo ao topo. Eu quero que seja. Não tenho certeza. Vou tentar quatro. É bom ir. Diferentemente, uma lacuna maior e agradável. Isso servirá para mim. Tudo bem. A próxima coisa que quero fazer é descrevê-lo. Porque é uma cor azul sólida, eu quero torná-lo um esboço branco como a minha maquete aqui. Instantaneamente eu fiquei tipo, jeito nenhum Bootstrap faz isso. Que bom botão de contorno. Ok, então eu comecei a fazer minha própria aula apenas para descobrir mais tarde sobre como fazer este tutorial como eles fazem. Boa. Ok, então às vezes você pode ser como se eles não fizessem isso. Às vezes você só precisa verificar. Ok, então aqui eu digitei botões. Ok. O que vamos conseguir? Botões, etiquetas de botão. Olha, há um botão de contorno. Vamos clicar no botão, botões. Certo e vá para a página certa. Há muitos deles. Ok. Há botões delineados. Então eu só preciso usar a classe de contorno de. Eu quero este. Ok, então eu quero o contorno do botão provavelmente branco. Temos luz um. Eles têm branco lá? Eles não parecem tê-lo lá? Vamos testá-lo. Talvez eles não pudessem tê-lo porque você não podia vê-lo. Vamos dar um rolo. Então nós vamos dizer BTN, na verdade não lá e eu quero separar a classe. Eu já tenho um há já algo aplicado a ele chamado BTN primário, BTN esboço. Vamos adivinhar para os brancos para ver se eles fazem isso. Deixe-nos verificar. Isso não é fazer branco porque ele está apavorado. Ok. Ele faz uma versão leve e agora você tem que decidir quanto. Porque é leve, quanto eu realmente quero que seja branco? Por que não tinham um branco? Ok, então vamos dar uma olhada agora. Luz. Sim. Como agora tem que ser branco. Tudo bem. Como vamos mudá-lo? Agora nós vamos passar e dizer realmente este tipo de como pensar sobre isso. Portanto, há algumas coisas que se aplicam a este botão é algo chamado como uma tag A, há algo chamado BTN, há algo chamado um esboço BTN. Ok, então há um botão Lodge pelo que parece. Ok, então eu meço e eu posso colocar um SEM para obter um pequeno e nós adicionamos a margem para o topo de quatro. Então aqui nós poderíamos dizer, Tudo bem, vamos apenas fazer todos os botões é fazer BTN. Ok, bem ponto BTN. Vamos Daniel, BTN. Digamos que eu queira a cor. Ou eu quero a cor ou fazer um plano de fundo? Então vamos dar uma olhadela. Cor de fundo. Eu sei o que é, mas estou tentando contar uma história aqui. Cor de fundo branco. É isso mesmo? Como se não fosse o que eu quero. Quero que o contorno seja branco. O outro problema é que o fundo BTN branco. Vamos mudar para vermelho só para mostrar a você. Eu acho que é muito genérico porque como ele está se acostumando lá e aqui. Certo, então precisamos ter certeza que talvez atacar o botão não seja bem o que queremos fazer. Então, em vez de apenas o botão, vamos fazer isso um pouco mais específico. Certo, luz de contorno BTN. Então esse cara vai ser isso e não vai ser a cor de fundo. Então vamos excluir isso, vai ser a cor da borda do branco. Muito obrigado. Legal. Então é meio incrível. Eles têm isso. Então você é tipo, não a cor certa. Então, um pouco dos dois. Para mim, um bootstrap de cinco, estamos fazendo coisas. Uma das outras coisas que podemos incluir aqui é o pairar. Ok e isso é eu acho que uma das vantagens de usar Bootstrap é que você pode ter decidido. Você vai ouvir como por que você está incomodando usando esta classe quando ele não faz nada ou realmente o que você quer, ele fez a linha. Ok. Mas a outra coisa que este tipo de invoca é que ele puxa através como a classe hover porque lembre-se quando eu comecei a usá-lo, ele era azul com um fundo azul escuro. Então, quando eu esfriei sobre este aqui, a versão light , ok, ele meio que mudou as classes hover, embora pseudo-classes também. Então Bootstrap está fazendo muitas coisas. Ok. O que mais queremos fazer? Queremos fazer uma pseudo-classe. Então vamos pegar tudo isso e você emite uma pseudo-aula, não é? Certo, então você esmaga dois pontos no final sem espaço e digita o mouse. Ok, então eu quero que esta classe em particular seja atacada. Então eu quero que esta classe em particular seja analisada e eu quero que a pseudo-classe pairar para trabalhar com ela. Então eu não quero isso. O que eu quero fazer é talvez essa cor de fundo agora, sua cor de fundo. Quero que seja branco, mas quero que seja. Eu clico sobre ele e digo branco, mas bastante transparente. Certo, tão temporário assim, 20%. Então ele vai olhar, agora um pairar. Você vê você só meio que insinuando lá, boa dica Dan. Vejamos algumas das outras coisas do Buttony. Ok, então tamanhos. Eu já era um botão grande. Parece ser apenas botão grande e pequeno. Quero que o meu seja extra grande. Não há nenhum extra grande aqui. Ok, então nós vamos ter que tipo de estilo isso um pouco mais. Então há salto de volta e você é como, Ok, eu só vou adicioná-lo a este aqui, adicionar algum preenchimento nós somos como nenhuma maneira nós temos aulas para isso, para Bootstrap. De jeito nenhum. Certo, temos margem superior. Ok, talvez possamos adicionar um pouco de preenchimento e a esquerda e a direita ok então há x e eu quero que seja cinco. Eu gostaria que o para cima e para baixo para ser algo que é um pouco menor de y. Ok, então preenchimento, esquerda e direita, cinco, superior e inferior, três. Podemos fazer um botão gigante. Mais uma vez, trabalho em equipe, eu e Bootstrap fazendo coisas juntos, sendo rápido, fazendo todos os jardas difíceis. Mas então Dan, o designer, gasta tentando lutar com Bootstrap para fazê-lo fazer o que ele quer. Mas com todas as verificações e balanços para o que eu tenho sido capaz de jogá-lo muito rápido, especialmente com a navegação e todas as consultas de mídia eu acho que estamos slung para um vencedor com Bootstrap. Obrigado Bootstrap. 114. Como tornar as imagens responsivas elásticas no Bootstrap 4: Olá, aí. Vamos trabalhar com imagens responsivas. Já fizemos isso antes, mais cedo, então vamos usar essas novas habilidades para trabalhar com o Bootstrap. Vamos editar esta imagem aqui, vamos obtê-la para que seja elástica. Você pode ver que ele muda de tamanho e uma consulta de mídia diferente assistir, ele fica para baixo por baixo. Nós vamos trabalhar através de todas as diferentes opções com Bootstrap 4 em VS Code agora mesmo. Estamos olhando para a maquete agora. Nós temos o nosso texto e eu quero realmente colocar esta imagem no lado. Há algumas maneiras de fazer isso, e vamos cobri-las neste vídeo e isso realmente depende da implementação. O que eu realmente quero fazer é esta imagem para quebrar em sua própria linha depois que ele vai para a minha bola. Você pode ver aqui que foi por baixo. A mesma coisa com a mensagem do fundador, começa lá em cima, move-se para baixo. Mas esses caras deslizantes, eu só vou desligar. Há muitas implementações diferentes dependendo do que você deseja fazer. Vamos adicionar a imagem ao código VS. Eu quero estar dentro do meu Jumbotron, que termina lá, que não está completamente alinhado. Lá vamos nós. Eu quero logo depois, e vou datilografar aqui. Eu vou dizer, vamos alinhar com tudo o resto lá dentro. Fonte de imagem, este vai para imagens/ e este é chamado hero1.png porque ele precisa de um fundo transparente. Vou me certificar de colocar minha velha mensagem lá. iogurtes de carne do Dan. Você pode soletrar um par de maneiras, eu estou destinado a falhar com essa palavra. Mas aqui está o meu texto antigo, eu tenho uma imagem. Vamos ver como se parece naturalmente. É enorme. Por padrão, nas imagens do Bootstrap tente esticar todo o caminho. Você é tipo, não é o que eu quero. Quero um pequeno aqui. Há algumas coisas que podemos fazer. Vejamos a documentação do Bootstrap. Vamos ver o conteúdo. Sei que está sob conteúdo e imagens. Você vai ter que clicar ao redor por um longo tempo ou fazer uma pesquisa. Está bem. Nas imagens, ele diz o que você precisa fazer. No nosso caso, se quisermos fazer uma imagem responsiva, precisamos adicionar essa tag chamada imagem ou img-fluido para que ela se mova. Há outras maneiras. Podemos girá-lo em miniaturas, chamando-o. Dê uma olhada nisso só porque é interessante. Nós adicionamos a miniatura de classe img a essa coisa. Nós temos você, antes do fechamento da tag de imagem, nós colocamos na classe img-miniatura. Vamos olhar para eles agora. Aqui está. Está em uma grande caixa branca, fundo branco, com cantos arredondados, ainda muito grande. Mas só para você saber, há algumas aulas mais estranhas, mas apenas outros casos de uso. Não temos mais para isso. Isto pode ser interessante. Está bem. Eu quero que ele seja na classe de talvez virado para a direita. Posso empurrá-lo para o lado direito. Vamos ver como isso funciona. Vamos fazer isso e ver o que acontece. Está bem. Ainda não está funcionando porque é muito grande. O que muita gente faz com o Bootstrap é dar uma largura aqui. Digamos que é uma largura de, digamos 500 pixels. Ele se encaixa no lado, e eu vou dar-lhe uma altura automática para resolver isso, sim, a largura que você definir e será apenas qualquer proporção equivalente para a altura. É uma maneira de fazer isso. Você está tipo, ok, estamos chegando lá. Agora eu sei que neste caso eu queria me conectar. Vamos ter que adicionar margens negativas e tentar puxá-lo para cima desta forma, talvez algum posicionamento absoluto. Vou mostrar-te uma maneira diferente, porque podes ser exactamente o que precisas de ser. Você tem uma imagem, ela responde a tamanhos diferentes. Dê uma olhada. Vamos descê-lo. Está bem. Não fica pequeno o suficiente para caber. Eu realmente não adicionei a imagem responsiva. Está bem. Vamos entrar lá e fazer isso. Eu dobrei para a direita, mas eu também quero, então o img-fluido. Na verdade, muda de tamanho. Está bem. Você pode ver que eles estão ficando cada vez maiores. Vamos ligar a inspeção. Vamos ver a pré-visualização do dispositivo. Agora vamos deslizá-lo para dentro e para fora e você pode ver a imagem. Deixe-me mover isso um pouco para baixo. Está bem. Ele fica maior e menor porque eu adicionei essa imagem responsiva. Isso está funcionando para nós, certo? Chega até aqui e eu só quero que apareça assim. Você poderia perseguir a margem negativa para puxá-lo para cima, talvez absolutamente posicioná-lo. Ele esquece isso e se move até o topo. Mas eu sei que isso vai me causar problemas quando eu quiser no celular, lembre-se, dividi-lo em sua própria linha para separá-lo aqui. O que eu quero fazer é colocá-lo em uma linha como se tivéssemos feito muitas coisas. Colocá-lo em uma linha e, em seguida, ter duas colunas que eu posso quebrar nessas duas partes. Como se este parecesse um pouco mais largo do que este. Isso pode ser, pode ser em um sete e este pode ser cinco colunas. Então eu posso apenas em dispositivos móveis torná-lo 12 e 12. Vamos dar uma chance a isso. Vamos dar uma olhada. Muitas vezes você só chega a este ponto, nós gostamos realmente fazer melhor em duas colunas depois que você teve uma briga com margens invertidas direita e negativa e você gosta, eu desisto. Você é tipo, na verdade. Vamos nos livrar da altura, largura, tudo bem, essas coisas. Vamos manter a imagem fluida e vamos nos livrar do branco flutuante. Estamos de volta a tê-lo sentado ali. Sem altura, sem largura. Vamos deixar a largura da coluna decidir o quão grande ela é. Em primeiro lugar, vamos precisar disto. Vou cortá-la na minha prancheta. Eu fui editar, cortar. Eu tenho isso em algum lugar. Você pode colar outro documento se estiver preocupado em perdê-lo. Eu sempre faço. Não se preocupe com isso, pelo menos. Aqui dentro, eu quero uma fileira com, dentro disso eu quero duas colunas, por favor. Esta primeira coluna vai ter todas as coisas que eu colei. Vai ter o meu H1 e a minha etiqueta P e minha etiqueta E e todas essas coisas, excepto a imagem. E vai entrar nesta outra coluna aqui. Agora uma pergunta que você pode ter é como, hey, você não colocou a div interna? Fizemos a chamada e, em seguida, normalmente, colocamos em membro a minha caixa. Só entramos na minha caixa se precisarmos mudar a coluna de alguma forma. Temos obtido muita cor para o fundo e mudá-lo muito. Não vamos fazer nada disso. Estamos apenas a usá-lo como um simples recipiente tudo e estamos a fazer coisas com isto dentro dele. Não preciso mexer com a coluna. Isso faz sentido? Se eu quisesse adicionar margens para a coluna, para o topo ou para baixo, eu realmente colocaria uma div interna aqui chamado minha caixa para fazer isso. Porque lembre-se, não gostamos de mexer com a ligação. A chamada sabe onde você mora e nós o encontraremos. Tudo bem, então isso vai funcionar. Bem, espero que funcione. Vamos dar uma olhadinha. Está ali. Está bem. Está fazendo meio e meio. Esse tipo de 50-50. Não é bem o que eu preciso. Eu preciso que seja na verdade, eu quero que não seja 50-50, cerca de sete e cinco. Chegamos a 12 colunas, o que é legal. Isso vai funcionar. Bem, vai funcionar perfeitamente. Só que agora queremos trabalhar no celular. Isso foi ótimo para esta vista. Mas quando eu chegar a este tamanho, ele me escolhe esta consulta de mídia aqui. Isto é o que isto era. Isso me dá uma dica, qual media query é essa. É o LG? Não, não é. O SM, tão pequeno. Você sabe disso. Você tem isso. Tudo bem. Eu quero tanto este e este, eu provavelmente quero que eles sejam empilhados em cima porque a imagem fica pequena. Está quebrando isso. Tem espaço suficiente aqui. Parece bom. Vamos atacar isso. O que eu quero fazer é em vez de dizer que este aqui vai ser o meu meio e acima. Provavelmente você ouviu o trovão no fundo. Está muito empolgante aqui hoje. Não tão bom porque sou uma atenção [inaudível] excitante o suficiente. Estou distraído com o trovão e a percepção de que estou em uma grande sombra do meio. De qualquer forma. O que estamos fazendo? Está bem. Decidimos que, em geral, vai fazer isso. Mas aqui em baixo, não está fazendo nada. Vamos forçá-lo a ser 12. Tão agitado. Nós vamos dizer uma chamada 12, que presume que você quer dizer extra pequeno. Porque eu não digo pequeno, ele vai assumir que é 12 um é pequeno também. Então, finalmente, quando chegar ao médium, ele vai dizer que na verdade eu vou substituir você, eu vou pegar um cinco. Bem, primeiro, você tem. Dê uma olhada. Eu sei que ele faz isso por padrão, mas às vezes é apenas porque o conteúdo o obriga a, você não está realmente fazendo isso. Está bem. Parece bom. Está tudo empilhado um em cima do outro. Em seguida, boom, e ele chega lá, ele move isso. É por isso que eu fui para a abordagem de duas colunas porque isso torna isso agradável e fácil. Há outras coisas que eu quero fazer, talvez diminuir o tamanho da fonte quando eu chegar a este porque ele está quebrando em lugares estranhos. Precisamos brincar com o estofamento e precisamos centralizá-lo, porque minha maquete aqui tem o carrapato centrado no celular. Faremos isso no próximo vídeo. Isso é claro, se eu estiver aqui no próximo vídeo e não for atingido por um raio. 115. Como centralizar texto e tags div em um site no Bootstrap 4: Olá, você. Neste vídeo, vamos mostrar-lhe como ir da esquerda alinhada por padrão, até um dispositivo móvel onde é agradável e centrado. Nós vamos adicionar um pouco de preenchimento ao botão porque no momento ele está preso bem perto, porque é isso que vamos fazer. Vamos começar. Ele está olhando bem para nossos tamanhos de desktops maiores, ele parece bem no médio também. Queremos chegar aos tamanhos menores, onde tento enfiá-lo em cima do outro e precisamos de algum espaçamento aqui. Queremos que o texto seja centrado, porque foi isso que eu fiz na minha pequena maquete aqui. É agradável e centrado. Vamos fazer essas coisas neste vídeo. Vai para VS Code. Vou mostrar-te o meu processo. Eu passei e tinha olhado através do Bootstrap, a documentação. Eu encontrei utilitários e o mesmo bom espaçamento e eu estava, “Ok, legal, isso é bom.” Aqui em baixo, há um chamado MX. Margens esquerda e direita ou auto. Já fizemos isso antes. Margina-esquerda, margin-direita auto visto como coisas. Ok? Tentei isso na div dos pais. Ok? Então eu vejo você. Incrível, trabalho feito. Certo, isso não vai funcionar. Cavado ao redor e eu encontrei outra coisa, é um pouco disso em Bootstrap. Ok? Estamos tentando descobrir o que vai funcionar. Este caso no texto, se você rolar para baixo, esse parece muito bom para mim. Estou tentando encontrar aqui o que faz funcionar. Centro de texto. Eu vou para o centro de texto e adicionar isso a ele e ver se isso funciona. Para ter um pouco de olhar e é feito o texto centrado. Esse cara vai ser estranho. O que está fazendo aí? Oh, não. Está bem. Ele está trabalhando perfeitamente. Podemos descobrir neste que está funcionando muito bem nisso. Mas quando eu começo a estudar lado a lado, ainda leva centros. Lembre-se, se não adicionarmos qualquer reconhecimento de mídia, ele assume a versão suave. Em seguida, eu quero fazer é, digamos que o texto para médio e acima vai ser deixado. Eu vi centro até então ele vai para o pequeno em através do centro para o extra pequeno por padrão, em seguida, através para o pequeno que eu quero. Então eu estou trocando quando ele realmente chega a md, para médio. Sm e, em seguida, médio, bom. Isso vai funcionar para mim. Agora, essa imagem parece estar bem centrada também. Ok, eu poderia estar inclinado a colocá-lo no Jumbotron só para que tudo dentro ele considerasse, mas na verdade parece bem. Tudo parece estar bem centrado. Uma coisa que eu quero fazer é, eu quero adicionar alguma margem inferior para o botão. Onde está o meu botão? Lá está ele ali. Vamos dizer, “Você é meu amigo” A margem inferior vai ser, vamos apenas verificar cinco. Margem de trabalho inferior cinco no botão. A margem superior já que estamos trabalhando, margem inferior enquanto você está trabalhando. Diga que, olhe, mágica, o que eu salvo normalmente funciona. Não foi aquele palco, eu quero, eu não fiz nada. Apenas se consertou. Isso foi perfeito. Agora eu provavelmente deveria desligá-lo. Está bem. Quando eu chegar a este estágio, mas está adicionando um estofamento aqui que ninguém pode ver, mas vamos ser oficiais sobre isso. Digamos que quando eu chegar até, então margin-bottom, quando eu chegar ao tamanho médio, ajustá-lo de volta para zero. Está bem. Mude a estrutura deste, não dá para ver. É ligado para extra pequeno e pequeno e, em seguida, desliga-se para estes outros que não podemos ver. Tudo bem. Isso vai ser isso para centrar texto em um dispositivo móvel, mesmo dispositivo. Espero que você esteja se sentindo um pouco mais confortável com Bootstrap e apenas HTML e CSS em geral. Você está se sentindo bem legal quando você olha para essas coisas. Na verdade eu sei o que isso faz e tenho certeza que sei o que isso faz. Faz coisas incrivelmente boas sem tenhamos que fazer muito trabalho duro como fizemos no início. Mas esse trabalho duro que você pode ver está compensando quando começamos a consertar as coisas, ajustar as coisas e olhar para a linguagem certa. Eu estaria achando útil Bootstrap. Vamos para o próximo vídeo. 116. Como personalizar a barra de navegação do site no Bootstrap 4: Olá você. Este vídeo, vamos pegar nossa navegação, que atualmente tem tudo nele. Muita coisa, vamos reduzi-lo para simplesmente assim. Nós estamos indo para o Nav para o lado direito, bem como, e quando tudo desmoronar, ele vai ter ainda um pouco agradável movimento todo menu. Vamos trabalhar como fazê-lo agora em código VS e forma Bootstrap. É tempo de personalização Navbar. Temos um monte de habilidades Bootstrap e vamos usá-lo para fazer isso funcionar. Primeiro de tudo, vamos dar uma olhada na documentação e eu quero ir para Utilitários. Eu não quero utilitários, eu quero componentes e eu quero ir para baixo, perto do fundo. Há dois, Navs e Navbar. Vamos falar sobre a diferença entre os dois. Navbar é o que você está procurando, só para que você saiba, e Navs é como uma versão reduzida. É uma navegação, mas não é a navegação superior. Parece que sim. É uma navegação, mas também tem versões com guias para navegação, você pode ter deixado cair Nav vertical. Não é como a navegação escondida que você está falando, ou pelo menos eles fazem parte dela. Você pode ver que há uma navegação com guias vinculada diferente. O que mais? Você tem caixas pequenas. Há todas as coisas aqui, e o que procuramos. Você pode usá-los, mas eles são como internos, você chega a uma página e a nova lista suspensa para categorias e redefiniremos suas pesquisas. O que você está procurando é Navbar. Inclui parte do Nav, mas o Navbar é como todo o pedaço desenvolvido. Nós olhamos para ele mais cedo. Este é o “tudo”. Tem uma caixa de pesquisa , tem uma lista suspensa , tem muitas maneiras diferentes. Agora o que você quer fazer é encontrar o mais próximo do que você quer. Você vê aqui, só a marca. Não é muito excitante, você acabou de pegar Navbar. Você pode sugerir que para uma imagem, você pode ter imagem em texto, e ela mostra todas as coisas que são necessárias. Você não quer, eu acho, ou trabalhar em cada classe que foi aplicada aqui, você quer encontrar uma que pareça mais próxima e descobrir o que você precisa ajustar. Isto é perto do que queremos. Exceto um que eu quero aquele com o menu suspenso. Eu não quero ter que gostar de tentar incorporar um menu suspenso. Eu vou encontrar um. Isso se encaixa em um bom ponto de partida. Eu tenho essa coisa chamada marca, que vamos olhar em um pouco mais de detalhes, e eu tenho um monte de links. Por algum motivo, por padrão, eles inundaram para a esquerda. Ninguém quer que inundem para a esquerda. Mas isso já está no código, então é melhor parar com este. Porque nós temos um bastante complexo, eu gostaria de deixar o que temos porque eu quero mostrar como modificá-lo e trabalhar fora. Excluindo os bits que você deseja, removendo os bits que você não faz. É a mesma coisa, diga duas vezes boa rasgando. O que temos? Temos todas essas coisas. Ali está a marca. O que mais tem aí? Vamos dar uma olhada. Do que eu quero me livrar primeiro? Vamos dar uma olhada e usar o Inspect. Vou clicar com o botão direito do mouse nisso, inspecionar e acertar minha flecha aqui embaixo. Apenas dê uma volta e descubra o que é isso. Há alguns, fazer isso maior. Há controle de formulário de classe de entrada. Está dentro de uma coisa chamada classe de formulário. Isso parece o que eu quero. O que mais está fora dele. Você vê se eu for para o mais alto, eu entro nessas coisas aqui que eu quero. Essa coisa chamada Navbar, Nav , as coisas parecem acabar. É difícil apontar para aqui e também apontar para aqui. Entende o que quero dizer. Espero que se eu puder apagar tudo nesta classe de formulário, eu possa me livrar desse grande pedaço. Vamos dar uma olhada nesse código. Isso é bom. Minha forma, onde você está? Oh, está ali. Envolve-o e ative e desative para ver onde ele fecha. Quando ele alternar você pode realmente pegar tudo e excluí-lo. Você pode ver os números vão de 48 e ele pula alguns para 51 porque eu tenho algumas coisas selecionadas lá dentro. É uma boa maneira de apagar grandes pedaços de uma só vez. Simplesmente como um Nav. Podemos pegar esse Nav aqui, e desligá-lo. Se precisarmos excluí-lo, ou pelo menos apenas minimizar o Jumbotron, apenas tudo é como um talvez um pouco mais fácil de trabalhar com. Eu escolho isso. Vamos verificar e ver como nos saímos. Incrível, ele se foi, vai e nós não escapamos. Vamos verificar, parece ainda disparar. Isso é uma grande coisa em trabalhar com um Navs é como tentar corrigi-lo. Oh, tente corrigi-lo, mas tente sempre verificar para ver se isso ainda funciona porque você pode acabar quebrando facilmente. A próxima coisa que queremos fazer é que isto vá para a direita, que é surpreendentemente difícil. Vamos dar uma olhadinha aqui. Vou pegar meu botão Inspecionar aqui, e vou pairar. Estou tentando descobrir onde está, porque você vê, eu não quero apenas essa maldita coisa. Quero a parte inteira e parece que sim. Isso é chamado de colapso Navbar. O que eu quero, mover o meu rato, parece estar à direita. Navbar-colapso, dentro do que parece ser, que parece funcionar. Vamos verificar isso. Navbar-colapso lá está lá. Corre para, para onde vai? Todo o caminho até a linha 48. Todas essas coisas, o que eu quero fazer. É dar uma olhadela. Uma ordem margin-direita, parece uma solução fácil. Fácil demais, de jeito nenhum. Não, não funcionou. Oh, fez isso? Ele fez. Olhe para isso. Meu primeiro indício seria gostar de não olhar para aqueles porque eu sou eu não uso Bootstrap para cada compilação. Eu sou como “Ok”, então eu vou encontrar. Talvez eu esteja querendo adicionar texto. Depois olhamos para este texto. Eu sei que isso não funciona porque eu tentei que já quando eu estava me preparando para este curso, eu poderia começar a usar flexbox. Talvez usemos flex in, e eu brinquei no início e foi apenas tropeçado como, hey, que tal você? Você parece bem. Dê uma olhada no que está lá antes de começar a tentar reorganizar as coisas. O bom e velho Bootstrap tornaram isso super fácil. Eu tenho que sair do hábito de forçá-lo a fazer coisas com meu CSS personalizado. Isso é tudo para este vídeo. Passamos pela navegação escolhida. Pelo menos um Navbar que trabalha para nós. O Navbar inclui peças Nav, pequenos pedaços Nav dentro dele. Que em sua documentação, se você está olhando aqui e indo, isso parece muito confuso, porque há muita coisa para ele. Assista um monte de coisas. Ele pode ler através dele, é claro, você deve, mas, eu acho que estamos usando Bootstrap para pular tentar ler e fazer muito disso nós mesmos. Jogue um destes perto e fazer algum ajuste, bem, as coisas de cor e alguns outros pouco. Mas, sim, navegações, não muito difíceis e realmente super fáceis quando você considera quanto tempo demoramos para fazer aquele pequeno magnata Nav aqui. Olhe para o menu suspenso apenas funciona e tem uma pequena caixa agradável em torno dele e tem uma lista suspensa dentro daqui. Obrigado Bootstrap. Oh, mais uma coisa antes de irmos, certifique-se de mudá-lo de volta para margin-direita, ou margin-esquerda mesmo. É ordem esquerda, então está empurrando todo o caminho para lá. Todo o caminho para a direita. E-mail é o que precisamos neste caso. Próximo vídeo. 117. Adicione seu próprio logotipo ao menu de navegação do site no Bootstrap 4, parte 1: Oi lá. Neste vídeo vamos sair de mim que se parece com isso para mim assim. Vai combinar com a nossa marca muito bem, vamos passar por nossa lição de casa onde removemos a cor de fundo também. Você está pronto? Estou pronto, vamos fazer isso. Antes de começarmos, vamos descobrir o que aconteceu com o fundo. Como nos livramos dele? Como você fez isso? Enquanto isso acabar, isso é tudo o que realmente importa, vou te mostrar como eu fiz isso. Vou clicar com o botão direito do mouse e ir inspecionar e dar uma olhada aqui. Lembre-se de usar o meu pequeno elemento de seleção, eu posso clicar no que eu acho que é todo o nervo, ele se sente como esta coisa. Você pode ver que há algo aqui chamado luz de fundo, dando-lhe sua cor de fundo e eu posso ligar e desligar. Isso é só um truque. Depois de se acostumar a usar as ferramentas do Google Chrome, isso pode ser muito útil apenas para descobrir as coisas. O que é que isto diz? Não é muito bom em me dizer onde ele está, é referenciar o SSS, sua referência ao arquivo CSS, que não é o que estamos usando, estamos apenas usando CSS padrão. Mas eu deveria ser capaz de apenas procurar por isso. BG-light, dê uma olhada. Clicando aqui, posso ir para editar, encontrar e digitar bg-light. Há duas ocasiões lá e ali, não sei qual é. Agora você pode ir para a documentação e descobrir se há uma versão alfa zero dela, que não é, ou talvez criar uma classe, pegar bg-light, copiá-la aqui. Em uma classe, diz que o alfa é zero para bg-light, mas isso também não funciona. A maneira mais fácil, é bastante simples. Vou apagar o bg-light deste top. Preciso excluir o segundo? Vamos verificar isso. Não, lá vai você. Eu faço porque há um fundo branco atrás deste logotipo aqui. Ambas as luzes BG precisam ir porque estava um pouco escuro. Só para que eu possa te mostrar. Há um primário e todas as outras cores que você pode usar, mas não transparente, você apenas se livrar dele. Bom trabalho. Se você tem alguma outra maneira de fazer isso, eu adoraria que você compartilhasse os comentários apenas para descobrir, isso é como, “Ei, eu fiz isso de outra maneira e funcionou.” Para mostrar a essas outras pessoas, se elas encontrarem dessa maneira, uma maneira diferente, você pode comparar notas, além de que eu possa ver. Você pode encontrar um lugar melhor do que fazer isso do que eu. A próxima coisa que eu quero fazer é personalizar esses botões. Eu quero manter alguns deles como a minha margem aqui, já que eu tenho um menu suspenso. Vamos dar uma olhadinha. Você está certo, mas muito longe. Desde aqui eu tenho um menu drop-down e apenas um botão simples. Vou me livrar de tudo, exceto o menu suspenso e talvez este aqui. Não vamos manter desativado, vamos manter o link regular e este menu suspenso, talvez esses dois porque eles combinam com cores. Vamos encontrá-los no código. Vamos dizer, onde estamos? O primeiro que eu não quero. Vamos separar tudo. É a minha marca, é a minha primeira. Este é o botão de alternância. Este é o menu suspenso, quando chega ao celular, então não nos livramos dele, e tudo o resto é a navegação. Este aqui nós estamos procurando para esta lista. Estes itens e todas essas LIs são os botões. Isso é um botão LI, que é um botão, que é um botão realmente grande. O LI começa lá e você pode ver que termina todo o caminho aqui, e é o nosso menu suspenso. Você quer manter ele e o único na frente dele. Vamos nos livrar deste primeiro. Aquele LI que temos, que LI vai manter, e que LI nós nos livramos. É apenas mostrar-lhe para instâncias e nós só queremos aqueles que são apenas botões brutos regulares. Não ativados ou ocultos ou desativados. Esperemos que agora, ele ainda esteja funcionando, drop downs trabalhar para melhorar suas próprias cores. Navegação está fazendo coisas estranhas aqui, vamos consertar isso. 118. Adicione seu próprio logotipo ao menu de navegação do site no Bootstrap 4: Olá aí. Vamos pegar nosso texto chato da barra de navegação, e transformar isso em um logotipo um pouco nojento. Vamos em frente e fazer isso agora no Bootstrap 4 usando nosso nav e fazer algo chamado marca nav. Tudo bem. Então, o momento é apenas alguns textos simples que copiamos quando entendemos este site pela primeira vez. Então nós queremos ir e encontrar algo chamado a marca. Então, sob a documentação, sob os componentes, barra de navegação, queremos tentar rolar para baixo até encontrarmos a marca. Existem diferentes maneiras de implementá-lo. Cabe a você. Você pode merecer texto, e tudo que você precisa fazer agora é entrar e entrar em código VS, ir e mudar a palavra navbar para iogurte do Dan. Verá que vai mudar. Ok? Eles podem ser ótimos para você. Você pode escolher uma fonte diferente. Veja, eu vou estilizar o nome da marca. Você provavelmente vai estilizar este aqui, marca navbar, e escolher uma nova fonte. Você provavelmente usaria o rosto de sobrancelha que temos usado, e você pode estar feliz o suficiente com isso, pois eles são especialmente úteis se o cliente ainda não tiver um logotipo. Então é um novo construído e eles simplesmente não têm uma marca ainda. Você pode dar-lhes algum texto estilizado de fontes do Google. O que queremos fazer é uma imagem, e você pode obter uma imagem com algum texto, com esta imagem simples e antiga. Vamos pegar tudo isso, copiá-lo, e vamos substituir o que temos. Nós temos uma barra de navegação, apenas uma marca de navbar muito simples, e parece acabar aí. O Toggler está desligando uma coisa de [inaudível] Eu só vou colocar lá dentro. - Legal. O que precisamos mudar? Vamos dar uma olhadela. Ele vai carregar provavelmente o logotipo Bootstrap, eventualmente. Ele não quer. Não temos isso no nosso sistema. Vamos olhar para o disco rígido de ou pelo menos o site de bootstrap. O que queremos fazer é desligá-lo para o nosso próprio SVG. Eu vou apagar tudo isso, e eu vou salvar dentro de imagens. Então, não é o seu logotipo está dentro dan's_meat_yorgurt_svg bruto. Vamos dar uma olhadinha. Está lá dentro. Está sendo forçado a ser de tamanho do que copiamos e colamos. Agora você vai obter alguns gráficos, alguns SVGs que não têm informações de tamanho neles. Você terá que dar-lhes uma largura e uma altura. O meu está fazendo porque veio do XD, Illustrator ou do Photoshop. No código eles dão o tamanho dentro deles. Não há [inaudível] dizer como um ícone. [ inaudível] impressionantes. Eles não têm e precisamos dar um tamanho físico. Para este, não temos de o fazer. Então vamos olhar para o tamanho que eu queria que fosse. É provavelmente um grande aspecto agora, mas é o tamanho que eu fiz e eu estou aderindo a ele. Outras coisas que você precisa fazer especialmente para o nosso logotipo, é que você precisa realmente colocar em algumas tomadas antigas que realmente descrevem o que isso é. Este é o logotipo da Companhia de Iogurtes de Carne. Bom. SEO, material do motor de busca, e temos uma imagem, temos um tamanho. No momento e ele está indo para Href. Assim que começarmos isso, ele será indexado para HTML, então ele volta para casa. estamos executando uma página inicial no momento, e é isso. Bem, é isso. Quero falar um pouco sobre o dever de casa. Este estofamento no topo parece funcionar bem como está. O que eu queria fazer é que eu gostaria de passar e remover o fundo. Eu vou defini-lo como um pequeno projeto para você, mas não um projeto completo de classe soprado com um documento do Word tanto quanto você pode se livrar do fundo. No próximo vídeo, antes de começarmos, mostrarei como se faz. Mas enquanto isso, depois desse vídeo, veja se você pode dar a ela o passado. Eu só queria ver através. Então eu posso ver através do fundo. Dá uma chance, e te vejo no próximo vídeo. 119. Como alterar os estilos padrão para a barra de navegação no Bootstrap 4: Oi lá. Neste vídeo vamos partir do menu que se parece com isso, para ser assim. Vai combinar bem com a nossa maquete. Vamos passar por nossa lição de casa, onde removemos a cor de fundo também. Você está pronto? Eu estou pronto. Vamos fazer isso. Antes de começarmos, vamos descobrir o que aconteceu com o fundo? Como nos livramos dele? Como você fez isso? Desde que se vá, isso é tudo o que realmente importa. Eu vou te mostrar como eu fiz isso. Agora, vou clicar com o botão direito do mouse, ir inspecionar e dar uma olhada aqui. Lembre-se de usar meu pequeno elemento seletor. Eu posso clicar no que eu acho que é todo o nervo que se sente como esta coisa. Você pode ver que há algo aqui chamado luz de fundo, dando-lhe sua cor de fundo, e eu posso ligar e desligar. Isso é só um truque. Depois de se acostumar a usar as ferramentas do Google Chrome, pode ser muito útil apenas descobrir as coisas. O que é que ele diz? Não é muito bom em me dizer onde está. É referenciar o arquivo CSS, que não é o que estamos usando, estamos apenas usando CSS padrão, mas eu deveria ser capaz de apenas procurar por isso. BG-light, vamos dar uma olhada. Clicando aqui, posso ir para editar, encontrar e digitar bg-light. Há duas ocasiões ali e ali. Não sei qual deles é. Agora você pode ir para a documentação e descobrir se há uma versão zero do Alpha, que não é, ou talvez criar uma classe, pegar bg-light, copiá-lo aqui. Fora da aula, diz que o Alpha é zero para bg-light, mas isso também não funciona. A maneira mais fácil é bastante simples. Pendure e apague bg-light deste top. Preciso excluir o segundo? Vamos verificar isso. - Não. Então, lá vai você. O que eu faço porque é um fundo branco por trás deste logotipo aqui. Então ambas as luzes BG precisam ir. Há um bg-dark e só para que você possa mostrar-lhe. Há um primário e todos os tipos de outras cores que você pode usar, mas não transparente, você apenas se livrar dele. Bom trabalho. Agora, se você tem alguma outra maneira de fazer isso, eu adoraria que você compartilhasse os comentários apenas para descobrir apenas para dizer como, hey, eu fiz isso de outra maneira e funcionou. Assim como há outras pessoas, se eles encontrarem o seu caminho, de uma maneira diferente, você pode comparar notas mais, então eu posso ver que você pode encontrar uma maneira melhor do que fazer isso do que eu. Agora, a próxima coisa que eu quero fazer é personalizar esses botões. Quero manter alguns deles, como a minha simulação aqui diz que tenho um menu suspenso. Vamos dar uma olhadinha. Zoom direito no que você encontra? Você pode ver que eu tenho um menu suspenso e apenas um botão simples. Vou me livrar de tudo, exceto o menu suspenso e talvez este aqui. Nós não vamos manter desativado, vamos manter o link normal e é suspenso um, talvez esses dois porque eles combinam com cores. Vamos encontrá-los no código. Vou fazer isso um pouco maior agora. Vamos dizer, onde estamos? O primeiro que eu não quero, então vamos separar tudo. Essa é a minha marca. Esse é o meu primeiro. Este é o botão de alternância, este é o menu suspenso, quando ele chega ao celular, então nós não queremos nos livrar deles, e todo o resto disso é a navegação. Este aqui. Estamos procurando por esta lista, itens, e todos esses outros botões. Isso é um botão, Li, isso é um botão. É um botão muito grande. O li começa lá e você pode ver que termina todo o caminho até aqui. Esse é o nosso menu suspenso. Quero mantê-los e o único na frente dele. Vamos nos livrar do primeiro. Aquele li que temos que vamos manter, e que vamos nos livrar dele. Ele está apenas mostrando para instâncias, e nós só queremos aqueles que são apenas botões regulares, não ativados ou ocultos ou desativados. Acho que agora ainda está funcionando. Dropdowns tipo de trabalho aqui em baixo é suas próprias cores. Navegação está fazendo coisas estranhas aqui, vamos consertar isso, mas está funcionando bem. Próxima parte. Vou fechar minha busca e eu quero, você vê, eu notei que eu usei o mesmo estilo que neste aqui, como neste. Vou roubá-lo estilo e aplicá-lo a ele. Eu fiz uma aula mais cedo em chamado, como se chamava? Luz de contorno de botão, que era a coisa que usamos para o torná-lo mais amplo no exterior. Vamos encontrar isso e reutilizá-lo. Estava no jumbotron. Era um botão de classe aqui e nós adicionamos essa coisa. Eu sei que se eu pegar apenas esta parte do estilo, muitas vezes ele não funciona, ele precisa ser chamado botão eo estilo que ele vai ao redor. Eu vou copiá-lo e vamos dar uma olhada, porque a parte do botão dessa classe lhe dá sua plenitude e é clickability, e esta é apenas a linha ao redor do lado de fora. Vamos agarrá-lo. Vamos encontrar o botão suspenso l. Agora, para onde vai? Há um ul que é toda a navegação. Há esses itens da lista, como pequenas partes dele, e para onde ele vai? Ou vai para o li ou o A tag, um ou outro. Coloque-o aqui e veja como isso vai lá. Verifica isso. Trabalho perfeito. É aquele e vamos fazer com o outro li, este aqui, luz de botão, bom. Eu vou mudar o texto nestes, eles são realmente o caminho errado, então eu quero o li para o menu suspenso, tudo isso, eu quero isso acima disso. Posso separá-los só porque fica um pouco confuso. Pode ser só eu. Preciso dessas lacunas visuais. Desça primeiro e, em seguida, este outro e as duas palavras são sabores e contato. Aqui vamos mudá-lo de dropdown, essa é a palavra para sabores, e, onde está este? Contacto. No menu suspenso, estas são as opções para o menu suspenso, então vamos ter que colocar em diferentes sabores. Há um sabor de presunto, nojento. Há sabor de carne. Entendeu a ideia, certo? Oh, isso é interessante. Esta classe divisória, vamos dar uma olhada no menu suspenso. Precisamos da divisória? Você vê essa coisa aqui, você pode obviamente ver o uso do divisor, como cigarros, esses caras para talvez este aqui seja, eu não sei, outro. Eu vou me livrar disso, divisor dropdowns cooler, e apenas ter estes, nós vamos ter frango. Indo de novo, tome mais uma carne. Eu estava tentando pensar em um lá, frango, e sobre os outros grupos de carne. Oh, faria peixe. Acho que esta pode ser a pior. Sabor de peixe velho. Vamos dar uma olhada no menu. Olhando bem. Algumas coisas que eu quero fazer é deixar o carrapato branco e colocar algumas lacunas entre eles. Fazendo os carrapatos brancos. Estranhamente antes, era bom ser branco. Lembra por aqui, bem, por que eles não ficaram brancos? É porque a navegação está tentando fazer muitas outras coisas ao mesmo tempo. Vamos clicar nisto. Na verdade, vamos clicar no elemento inspecionar na extrema esquerda aqui. Vamos pairar acima disso. Vamos tentar obter o, você pode ver que eu quero que você clique sobre os carrapatos por dentro, porque eu quero descobrir o que talvez está controlando ele. O que está controlando ele? Acho que aqui no C é tão importante, a luz da barra de navegação. Eu só estou à procura de palavras-chave, porque nome navbar provavelmente não vai fazê-lo luz navbar parece muito bom. Legal. Vamos tentar desligar a luz da barra de navegação. Navbar, onde está? A parte de cima. Luz Navbar. Vamos tentar escurecer. Isso funciona. Posso viver com isso. A outra coisa legal sobre navbar escuro é que ele muda, não o suficiente, é muito leve ainda. Não há, navbar branco, o que seria muito útil. Só me dê navbar preto e branco, não essa metade no meio. Você pode ver quando fica azul, diz que não consigo encontrar essa aula maluca que você está fazendo. Então vamos usar navbar, vamos colocar no escuro e vamos ajustá-lo um pouco. Queremos ajustar o texto no interior. O lado de fora parece bom. Isso está funcionando agora? Navbar escuro, aí está. Vamos deixar esse texto branco. Como é que fazemos isso? Precisamos acrescentar, fizemos isso mais cedo, talvez encontremos uma opção de texto branco. Não me lembro do que usamos antes. Mas vamos passar e aplicá-lo. Aqui está a minha li para o menu suspenso. Vamos tentar enfiá-lo aqui como fizemos antes. Vamos para o texto dentro deste li vai ser branco. É bom ir. Veja, não funcionou. Então, exatamente a mesma classe. Às vezes, você é tipo, que não faz sentido. Você experimenta em uma classe diferente, você está bem. Coloque-o na etiqueta A, neste caso, é exatamente o que ele queria. Fazemos a mesma coisa para este outro item da lista, este aqui. Na etiqueta A, vou dizer que há uma aula aplicada. Então é bom, é preciso branco. - Legal. A próxima coisa é provavelmente adicionar algumas carícias entre estes dois, e bem fundir-se entre eles e talvez torná-los do mesmo tamanho. Imagine fácil o suficiente. Vamos ver o nosso código. Você está ficando o mesmo que eu como um homem que está olhando, a barra de navegação é tão grande, e porque eu não construí, torna-se como, ele fica invisível. Talvez esta possa ser uma boa chance de ir realmente isso, porque eu resolvo isso eventualmente, mas eu vou adicionar alguns comentários. Lembre-se de comando para a frente barra ou controle barra para a frente em um PC, e vamos colocar no botão. Vou colocar no menu suspenso de botões. Aqui eu vou colocar no botão normal deste. Isso é útil? É útil para mim. O que queremos fazer é acrescentar, onde é que o adicionamos? Talvez para este item da lista. Vamos tentar isso. Vamos à margem direita RM e vamos fazer quatro. Vamos dar uma olhada. Não funcionou. Margem direita 4, eu sinto que deveria, fez. Uau, refresque. Normalmente você não precisa atualizar porque esse VS Code, mas não tenha medo de clicar no botão de atualização. Trabalhe para mim, Just in. Temos o nosso menu suspenso. Você vai notar que eu tive isso assim, porque aquela coisa lá está me deixando louco. Eu não sei por que quando estou ensinando e isso continua, muito distraindo. Eu quero fazê-los da mesma largura, então nós vamos forçar em uma largura, vamos experimentá-lo aqui para o li nós vamos dizer, ulira, não nesta classe, nós vamos usar um estilo. O estilo vai ser uma largura. Você está tipo, por que está fazendo isso aqui, Dan, e você é tipo, isso é totalmente verdade. Eu deveria criar um estilo aqui que tenha uma largura. Mas eu acho que eu quero que você acostumado a adicionar aqui também porque Bootstrap parece gostar colocar um monte de estilos em linha são realmente no próprio gráfico real. Isso realmente não importa. Esta largura de talvez 200 pixels, vamos dar uma olhada. Talvez um pouco demais. Cento e cinquenta, isso funciona bem para mim. Não, ainda é muito grande. Vamos 110, 120, coisas que eu deveria organizar antes de começar a gravar, certo? Vamos lá, Dan. Eu faria a mesma coisa por este botão aqui em baixo. Agarre tudo. Onde está o nosso segundo botão? Oh, olhe, comentário útil. Nós somos bons. Agora têm a mesma largura. Está com bom aspecto, desce para Mobile. Tenho um menu suspenso. Está aparecendo do lado errado. Vamos resolver isso no próximo vídeo, e também vamos sair batendo para ser pegajoso. É isso, por enquanto. Vamos para o próximo vídeo. 120. Como adicionar uma barra de navegação fixa no Bootstrap 4 ao design do seu site: Oi lá. Neste vídeo vamos fazer com que a nossa navegação seja pegajosa. Quando rolamos, ele ainda fica no topo. Também vamos resolver esse pequeno problema em que estamos no celular, e é sobre este lado esquerdo aqui. Vamos movê-lo para que se alinhe bem à direita. Lembre-se mais cedo no curso fomos e fixamos nosso cabeçalho para o topo. Fizemos uma aula que disse posição fixa no nav e que vai funcionar, mas há algumas coisas extravagantes que bootstrap tem. Encontrá-la é sempre a parte divertida e você fica tipo, “Onde está o seu rumo fixo?” Posição fixa parece bom. Este aqui, navbar consertado. Olhe para isso, é bom neste. Você acaba nesta página de exemplos e você é como se não fosse bem o que eu queria, voltar para a documentação. Vamos olhar para cima fixo novamente. Acho que quero ter certeza de que quando você está fazendo você começa a sentir como se eu estivesse fazendo isso certo? Você é como sim. Ele está apenas trabalhando fora o que bootstrap fez. Top fixo ser perfeito. Basta adicionar isso ao div. Qual div? Provavelmente o primeiro. Isso encerra tudo. Minha navegação, vamos editá-la aqui. Cole e você fica como bingo. Trabalho feito, funciona. Está fixo no topo, mas quebrou minha navegação. Provavelmente bootstrap sendo ótimo, eles têm outra coisa. O pegajoso é a palavra. Vamos dar uma olhada. Posições pegajosas, pegajoso, na verdade é apenas debaixo de onde estávamos. Há top fixo e apenas um pouco abaixo, é pegajoso. Aqui vamos nós. Copie e vamos tentar sticky-top em vez de fixed-top. Vamos dar um jeito, e lá vamos nós. Você decide se gosta do nosso top fixo, especialmente porque ele está vendo e cobrindo as coisas para você. Mas é assim que você corrige na parte superior, navegação em forma de bootstrap. A última coisa que quero fazer antes de irmos é, isso tem me incomodado. Tem um menu suspenso e parece todo o caminho até aqui à esquerda e você fica tipo, “Por que é isso? Eu quebrei?” Quando eu estava olhando, eu pensei: “Posso quebrar isso?” Então eu tive que olhar para trás para o nosso antigo quando nós apenas o instalamos pela primeira vez e começamos. Vamos inspecionar este e, na verdade, é um padrão do bootstrap. Isto é como ele saiu da caixa e você pode ver que ele apenas empurra para aqui com alguma cor de fundo que nós removemos. Esse é o padrão, como corrigi-lo. Passei um bom pedaço tentando consertar isso. Eu tentei trabalhar para fora, então eu tentei usar margem porque nós fizemos Margin-esquerda auto talvez nós substituímos isso para fazê-lo ir todo o caminho ao longo do lado. Mas acontece que ele só funciona para e lembre-se que fizemos isso aqui, dissemos no menu drop-down ul, dissemos que estava na direita, e significa que ele se parece com isso. Talvez tenha sido saltar contra o lado. Nós ajustamos isso e você assumiria que teria consertado os botões também, mas não. Eles ainda estão aqui quando está no celular todo o caminho até aqui. Tentei algumas coisas. Tentei o texto à esquerda, tentei aplicar o ml-auto a alguns itens diferentes aqui, ainda não consegui resolver isso. Eventualmente encontrei isto. Existe uma opção para flutuar itens. Pois isso não é como uma velha escola, mas uma maneira diferente de alinhar a esquerda e a direita. Eu vou fazer float e eu vou ter um olhar utilitários sob float. Você pode ver float-left, float-right, float-none, e movê-los para a esquerda ou para a direita. Você pode fazer isso para diferentes consultas de mídia. Quero que flutue para o lugar certo. Vamos dar uma chance, e vamos colocá-lo em nosso código. Para onde ele vai? Muito bom ponto. Vamos dar uma olhada em inspecionar dentro do Chrome. Vamos derrubar isso. Vamos usar esta pequena opção para inspecionar o elemento e estamos procurando o recipiente. Não queremos os botões de verdade. Só movemos o rato até encontrarmos algo que pareça o contentor. Eu vou clicar nele, então aqui embaixo, eu só vou fazer isso e ver o que acontece. O mesmo ul. Onde é que está? A classe ul, vamos adicionar isso também e ver como isso vai correr. Drop, hey, legal. Está sendo empurrado para baixo um pouco longe demais. Meu logotipo é muito grande. Eu preciso fazer isso menor para que este navegador tenha uma grande lacuna entre aqui, mas isso é algo que eu posso deixar você consertar, fazer o logotipo menor. Trabalho suspenso, tudo funciona. É adorável. Para o próximo vídeo. 121. Como adicionar uma imagem de coluna completa no Bootstrap 4 e colorir o fundo da coluna: Oi lá. Neste vídeo vamos fazer esta mensagem de fundador. No lado esquerdo aqui temos uma imagem que vai nos ajudar a recapturar nosso conhecimento de imagens responsivas, o que fizemos há muito tempo. Indo para recapitular isso, vamos construir este layout de uma linha, duas colunas aqui. Vai quebrar nosso celular em duas linhas. Eu gigante, mensagem do fundador, vamos adicionar estofamento. O que mais vamos fazer? Nós estamos indo para colocá-lo no centro dentro da caixa e é outra recapitulação de todos os Flexbox recebendo os itens para o centro no meio como nós fizemos maneira, maneira, caminho de volta no curso. Tudo bem, vamos lá e colocar esta mensagem muito enigmática do nosso bem-parecido fundador aqui. Vamos fazer isso. Esta é a parte que eu quero adicionar esta mensagem fundadores e as partes únicas dela é que eu tenho cantos arredondados para nenhuma boa razão exceto eu quero mostrar a você como fazer isso. Vamos fazer duas colunas separadas porque eu quero que ele se decompense no celular para estar em cima um do outro. Tudo bem, então vamos olhar para fazer isso. Em código VS, vai passar por baixo do meu Jumbotron, mas antes do carrossel e eu colocarmos isso, esta será a mensagem dos meus fundadores. O que eu quero? Eu quero pelo menos uma fileira, e dentro dela eu quero uma coluna, mas eu quero duas delas. Quero a primeira coluna. Porque ele é móvel primeiro, precisamos dizer, eu quero que ele se rompa em suas próprias linhas, então eu quero que ele seja um total de 12 colunas de largura para celular. Mas mais tarde, quando chegar ao meio, quero que seja, não tenho certeza, o que é? Sobre isso, digamos quatro e oito, então digamos quatro. Este aqui vai ser um coronel de MD. Vai subir para oito. Agora vamos colocar um texto básico aqui, só para que possamos ver o que está acontecendo. Para continuar testando enquanto estamos trabalhando. Onde é que está? Aí está, teste. Caminho para o celular com amostra. Refresque. Estranho. Vou deixá-lo no curso, mas normalmente ele se refresca bem. Não precisei clicar em atualizar. Talvez porque eu tenho os testes abertos. Talvez ter o Developer Tools e o Inspection acontecendo congela o código. Parece que está funcionando. É no quatro e eu desço para o celular e ele deve saltar para estar em cima um do outro, com 12 colunas de largura. Tudo bem, a próxima coisa que eu quero fazer é adicionar um pouco deste texto e então nós vamos adicionar a imagem, realmente fazer a imagem primeiro. Neste aqui, vamos fazer nossas doces imagens responsivas. Vou me livrar disso. Esta aqui, esta é a primeira caixa. Vamos colocar um IMG. E vai estar na nossa pasta de imagens, e é a foto do Dan. Queremos adicionar algumas classes a ele. Lembre-se que um que diz img-responsisive foi chamado img-fluid, alt-text. Este vai ser Daniel Walter Scott, fundador de iogurte de carne. Recheio de palavra-chave agora, mas espero. Vamos dar uma olhadela. Vamos verificar isso. Ele está preenchendo a coluna muito bem e preenche a coluna aqui muito bem. Eu quero ir para o celular. Ele se resume a um tamanho móvel responsivo. É um pouco grande, mas vamos fazer com que seja de largura total. Vamos adicionar o texto a esta parte. Vai ser um H2 e algum texto P, An H2, porque eu já tenho um H1, isso só vai dizer, “Mensagem do nosso fundador.” Texto estranho acontecendo lá. Legal, e eu quero algum texto p e o P, Eu gostaria de ter algum lorem de apenas cerca de 60. Legal. Vamos dar uma olhadinha. Ele está lá dentro, móvel e está lá na nossa visualização de desktop. O que eu quero fazer é que eu não quero que ele tenha este fundo claro, eu quero colocar em uma cor de fundo porque eu quero que ele seja branco e também eu queria mostrar a você como adicionar uma cor de fundo. Não colocamos nossa própria classe aqui. Na verdade, acabamos de ficar com a nossa aula. Onde é que está? Aqui está a nossa linha e ele é a nossa coluna, e é esta coluna aqui que eu quero fazer um fundo branco. Se eu fosse adicionar um pouco de estilo ao col 12 neste caso, eu iria até aqui, fazer um estilo para ele. Agora o problema é, lembre-se, eu não gosto de estilizar as coisas Bootstrap existentes, então o que eu provavelmente faria é fazer seu próprio wrap uma tag e inseri-la aqui. Eu terminaria com abreviatura, que é a primeira lá para mim e eu diria, vamos fazer, uma aula de fundadores. Então eu iria e estilo aquela classe fundadora para ter um fundo de branco. Mas, eu sei que Bootstrap provavelmente tem uma classe de fundo e neste caso vai ser BG de branco e isso deve ser tudo o que eu preciso fazer. Eles têm um BG, um fundo de branco, preto, escuro claro, primário, perigo. São algumas outras cores que você pode usar. Vamos adicionar um pouco de estofamento todo o caminho ao redor também. Vamos entrar aqui e digamos que esta coisa aqui tem um fundo de branco, mas também tem um estofamento. Lembre-se se eu não colocar de cima, de baixo, esquerda para a direita, assumiu todos os lados, eu vou colocá-lo no máximo e lá vamos nós. Tem um bom estofamento em torno dele. Na verdade, o que podemos fazer é tentar fazer com que ele se alinhe no centro da coluna real. Como é que fazemos isso? Fizemos com flex, lembre-se da última vez. Se eu fizer um centro, como procurar alinhar. Diferentes tipos de alinhamentos, vertical é o que queremos. Vamos dar uma olhada nisso. Isto não vai funcionar. Align-middle funciona perfeito para objetos em linha. Diz aqui em cima, diz, funciona muito bem para inline, inline-block. Mas não os nossos elementos de bloco, que é o nosso H2 e a nossa etiqueta P. Nós temos que ir para a opção flexível de fazer isso e aqui, há um monte deles. Eu só desço até o pequeno ícone. Bem, o pequeno exemplo menciona o que eu quero, esse é o que eu quero. Presumo que seja o “D-flex”. alinhar o centro do item. Legal. Nós não temos que fazer o display flex porque isso é embrulhado nesta classe aqui chamada d-flex. Lembramos que alinhar itens centro a partir de mais cedo e ele vai funcionar parcialmente. Vamos dar uma olhada. Eles estão todos centrados, mas esses caras são esmagados porque flex, lembre-se, tenta alinhá-los lado a lado. A maneira de se locomover é colocá-los em seu próprio invólucro pequeno. Esses caras aqui, fabulosos. lembre-se Flexbox quer colocá-los lado a lado. Se os colocarmos em uma div, nós os embrulhamos em uma única div. Está protegido dos pais, porque terá dois estágios de profundidade. Envolvendo tudo isso em sua própria etiqueta P. “ Command Shift P” em um Mac, “control shift P” em um PC. Nós vamos digitar wrap e encontrar wrap com abreviatura e nós vamos colocar, nós poderíamos fazer uma classe, mas nós vamos apenas usar a tag de seção porque, eu não preciso estilizá-lo em tudo. Só vou usar a seção. É um bom descartável. Whoop. Você tem que realmente apertar Enter sobre isso. Caso contrário, não funciona. Vamos tentar mais uma vez. Vou pedir ao editor para acelerar isto. Tudo bem, na verdade eu apertei Return. Agora, porque há em um belo invólucro protegido, isso deve funcionar. Vamos para o próximo vídeo. 122. Como adicionar uma borda e cantos arredondados a uma caixa no Bootstrap: Oi lá. Neste vídeo, vamos olhar para adicionar fronteiras. Vamos colocar uma borda negra em torno dela, mas não há fronteira nisso. Vamos adicionar cantos arredondados de um lado, cantos quadrados do outro. É extravagância de borda e canto arredondado. Queremos fazer algumas coisas. Eu adicionei uma borda preta em torno do lado de fora deste apenas para que eu pudesse fazer isso no tutorial porque você precisa trabalhar fora as fronteiras. Eu também adicionei cantos arredondados que eu realmente não queria apenas adicioná-los ao tutorial. Nós fizemos isso. A coisa legal sobre as bordas é que ela é arredondada de um lado, mas não sobre essas lacunas internas. Vamos descobrir como fazer isso agora, confira a documentação. Documentação, é chamado de fronteiras e é legal que temos. Isso parece bom para mim. Está sob utilitários, fronteiras, há um monte de coisas. Você pode dizer, “Border, apenas o topo ou colocar uma borda em torno de tudo.” Há também uma borda cores. Então eu quero colocar uma fronteira e, em seguida, é um bom médico de fronteira. Ambos vão para a minha caixa de ticks. Vamos ao VS Code. Vamos adicioná-lo a esta classe aqui. Bem, este div tem muitas coisas acontecendo aqui agora. Vamos ver se funciona. Sucesso. Temos um forro preto lá fora. Vamos olhar para as partes arredondadas, deve ser no mesmo bit. Nós rolamos para baixo, lá vamos nós na fronteira do raio. Você tem duas opções. Você tem apenas um pouco de círculo arredondado ou completo para que você possa decidir se você quer arredondado, que é apenas nossos cantos arredondados, ou você pode fazer círculo arredondado. Na verdade, isso o transforma em um círculo completo. Há outro chamado pílula, que faz isso começa, mas deixa a extremidade longa e zero arredondado, você não usa se digamos que um dos componentes tem uma rodada padrão, você pode desligá-lo tornando-o arredondado para zero. Você tem dois tamanhos para estes cantos arredondados. Eles parecem exatamente iguais. Grandes e pequenas diferenças, não muito grandes. A outra coisa é, lembre-se como fizemos a minha direita arredondada e esquerda, então vamos começar com a primeira caixa, que seria arredondado à esquerda. Agora, nós jogamos o outro para toda a coluna para a segunda aqui. Não funciona neste caso porque temos essa imagem, queremos aplicá-la em torno da imagem, não na classe real. Vou te mostrar o que quero dizer. Precisamos primeiro dizer que é uma fronteira, não se esqueça dessa parte, e precisamos dizer, “Uma direita arredondada ou arredondada à esquerda” Isso só vai funcionar parcialmente. Vamos dar uma olhada. Porque ele coloca uma volta na borda da coluna, isso não é o que eu quero. Quero colocá-lo em torno desta imagem para que as mesmas coisas possam ir sobre a própria imagem. Fonte de imagem, temos classe de fluido, coloque os dois lá e lá vamos nós. Temos arredondado à esquerda, quadrado à direita. Vamos usar a borda branca. Mas vamos tornar a fronteira grande também, o que não faz uma mudança significativa, mas aí está. Por último, é dado um forro branco do lado de fora. Não é o que eu quero, então vamos nos livrar do padrão. Aqui, vamos dar uma olhada, uma cor de borda para que nenhuma cor de borda porque eu não quero adicionar uma cor que eu quero tentar e você pode ver lá podemos adicionar uma placa de zero. Legal. Bons exemplos lá em cima. Na minha imagem aqui, borda grande, vamos torná-lo fronteira zero e lá vai você. Tem um pouco de cantos arredondados nas bordas e não há nenhum golpe em torno dele. Vamos fazer as fronteiras aqui à direita. Então, em vez de esquerda, vamos fazer isso nesta coluna aqui. Muita coisa acontecendo, para a fronteira doc. Vai ser arredondado à esquerda, que não funcionou, o que precisa ser arredondado para a direita. Lindos cantos arredondados. A outra coisa que eu quero fazer é ter certeza de que é na fronteira grande, lá vai você. Isso é tudo para o nosso excitante vídeo de fronteira. Fizemos alguns cantos arredondados, adicionamos algumas linhas ao redor do exterior. Vamos para o próximo vídeo. 123. Como editar o carrossel do Bootstrap para o fade de tempo móvel: Olá aí. Neste vídeo, vamos mexer com nosso carrossel. Obviamente, estamos mexendo com o tempo porque ele está voando. Também estamos brincando com a transição, para que você possa vê-la desvanecendo em vez de deslizar. Vamos entrar e descobrir o que estamos fazendo. Carrossel, eu, você. Você tem me irritado todo esse curso. Adoro carrosséis, mas não quando leciono. Eles estão distraindo. Mas queremos fazer algumas coisas. O primeiro vai ser, é desligá-lo quando chegar ao celular. Apenas muito pequeno e não é o que eu quero em dispositivos móveis, então vamos lá e desativá-lo. Fizemos isso antes, é uma boa recapitulação. Como faço para desativar? Sabemos que é como mostrar nenhum. Lembra-se dos nossos primeiros dias? Aqui sob utilitários, há um chamado display. Você pode dar uma olhada. Acho esta pequena lista muito útil. Dá-lhe uma explicação e depois o que fazer. Escondido apenas em xs, que é o que eu quero, eu vou desligá-lo para todos eles e ligá-lo de volta para pequeno. No meu caso, só vou ligá-lo de volta para o meio. Então eu vou pegar tudo isso. Na verdade, eu não quero todo o full stop, nós vamos colá-lo dentro Onde está o meu carrossel? Aí está você, amigo. O que eu gostaria de fazer é que eu tenho algumas aulas, eu tenho um slide carrossel no momento. Vou colocar isso sem as paradas completas ou períodos. Tu, tu e eu queremos que este ligue quando chegar ao dispositivo maior, como um iPad. Vamos dar uma olhadinha. Está ali. Há o controle deslizante grande e, em seguida, ele desliga em algum estágio. Ainda lá, ainda lá, desapareceu. Desligámo-lo e ligá-lo novamente neste tamanho um pouco maior. A próxima coisa que quero fazer é fazer o desvanecimento. Vamos dar uma olhada nas diferentes opções que estão disponíveis. Está nos componentes. Onde está o nosso carrossel? É interessante dar uma olhada em tudo isso, explicando o que ele faz, os diferentes controles. O que queremos fazer é encontrar aquele com legendas, crossfade. carrossel é o que eu quero fazer. O que é que isso parece? Sim, isso funciona para mim. Vem cá, amigo. Nós vamos adicioná-lo e apenas editá-lo depois disso. Lá vamos nós. Com sorte, teremos um bom desvanecimento. Veja como é. Vamos levar para um tamanho maior. Espere por ele. O meu não é perfeito. Porque eu tenho transparência no fundo do meu, eu usei PNGs como essas pequenas imagens para que eu pudesse ver através do fundo radiante. Se você tem uma imagem completa, fade parece muito mais bonito. Um pouco nervoso porque eu tenho fundo transparente, mas, bom trabalho. Acho que estamos em um ponto em que realmente sabemos como entrar, trabalhar com a documentação, descobrir as coisas por conta própria agora e acho que esse é o objetivo disso. Podemos ver todos os recursos do carrossel e cartões finais e todos eles. Eu só estou nos levando a um ponto onde nossa maquete parece bom e espero batendo em você as diferentes técnicas para encontrar o que você precisa no Bootstrap e aplicar-lhe seu site em VS Code. Estou chegando perto do fim deste curso. É bem excitante. Espero que esteja se acostumando com isso e com um pouco de solução de problemas. Digamos que eu queira trabalhar com o timing. Gosto deste aqui. Intervalo parece muito bom. Intervalo de dados parece muito bom. Lembrem-se que são milissegundos, então são 10 segundos, dois segundos. Parece que tem que ir em algo chamado carrossel ativo. Vamos pegar essa parte e ver se podemos editar porque por padrão eu não tenho idéia do que é. Vamos ver o que é aqui. Talvez não tenha um padrão. Há o meu item de carrossel ativo, não há padrão. Digamos que eu coloquei este aqui, e vamos dizer que nós colocamos para baixo para algo bem rápido. Faremos isso com todos eles só para provar um ponto. Meio segundo. Coloquei no lugar errado, então coloque-o dentro da aula. Vamos apenas dar uma olhada na documentação. É fora da aula. Na verdade, é só mais uma propriedade. Eu vou fazer o mesmo neste aqui também e neste aqui. Cole esses caras e vamos ver como funciona. Vejamos o nosso exemplo. Lá vamos nós. Demorou um pouco para ir. É tipo, por que você não está trabalhando? Você pode ver que ele está passando por eles muito rápido agora. Obviamente, você pode mudar e ser individual. Você pode ter depoimentos. Alguns deles são mais longos do que outros, então um pode ser como um minuto e meio, enquanto os outros caras podem ser bons e rápidos. Não precisas de ver isto, pois não? Entende o que quero dizer. Mais uma vez, estamos chegando perto do final do curso e estamos cobrindo cada parte do Bootstrap ou web design em geral. Espero que você esteja tendo um bom senso de como encontrar e enfrentar e onde as coisas precisam ir, o que você precisa fazer sozinho e o que você pode confiar para coisas como Bootstrap. Vamos para uma das últimas partes onde começamos a olhar para as cartas e terminá-los fora. Vejo você no próximo vídeo. 124. Como colocar cartões do Bootstrap em uma linha usando baralhos e colunas de grupos de cartões: Olá aí. Vamos pegar nossas cartas que estão empilhadas umas sobre as outras e torná-las lado a lado usando grupos de cartas, decks de cartas e colunas de cartas. Tudo bem. Vamos fazer isso. Ok, então nossa maquete aqui tem nossas cartas lado a lado. Mas na nossa versão atual, quando os despejamos mais cedo, olha, eles estão todos em cima um do outro. Então poderíamos passar algum tempo brincando sobre tentar jogá-los, ou provavelmente poderíamos fazer D-flex. Lembre-se, display flex, usamos apenas o último vídeo. Mas vamos dar uma olhada na documentação para ver o que podemos fazer. Cartões sob componentes, cartões têm um monte de, como este é provavelmente o mais longo aqui no Bootstrap. Rolagem, rolagem, rolagem, rolagem, rolagem. Então eu posso entender quando você diz : “Cara, isso é muito para ler.” Ele tem uma leitura através, há também navegação que vem junto. No meu caso, o que procuro é mostrar estes layouts de cartões. Então vamos olhar para os grupos de cartas primeiro. Basicamente, se você adicionar um grupo de cartões, é apenas aplicar o display flex, mas de uma maneira particular. O que é agrupá-los todos juntos, todos na mesma linha. Vamos dar uma chance a isso. Então diz embrulhar todos eles, estes são cartões individuais. Envolva-os todos nesta coisa chamada grupo de cartas. Então vamos fazer isso neste código. Aqui estão as minhas cartas. Vou agarrá-los a todos. Lá vamos nós. Eu vou para o Comando Shift P, começar a digitar um invólucro. Enrole com abreviatura, e eu vou colocá-lo em um ponto, e eu vou colocar no grupo de cartas. Você vê, isso envolve tudo neste grupo de cartas. Vamos verificar para ver o que ele faz, e jackpot. Bem, meio que. Eles estão todos no mesmo alinhamento, pelo menos. Então o grupo de cartas parecia funcionar. Mas esqueça tudo sobre mais, há diferentes grupos de cartas. Olha para isto. É um baralho de cartas. Agora, já foi apontado no passado que o baralho de palavras para um kiwi é provavelmente incompreendido. Então, convés é o que estou a tentar dizer. Mas se te estás a rir, provavelmente não és o primeiro. Só porque é engraçado, Google ou ir para o YouTube e confira Nova Zelândia anúncio, deck, soletrado dessa maneira. É PG. Se for adulto, vai achar engraçado. Não é bruto, não muito bruto. De qualquer forma. Vá verificar isso, pausar, voltar. Tudo bem. Então, se você tem, adicione seu sistema. Tudo bem. Então vamos usar o baralho, e vamos dizer baralho de cartas. Eu sei. Vamos dar uma olhada. Olha para isto. O baralho é o que queremos. Tem espaços e ligações para ele. Essa é uma boa. Vamos dar uma olhada no que mais você pode fazer. Então vamos dar uma olhada em algumas outras coisas. Há colunas de cartas. Nós não vamos fazer colunas, mas você pode ver que isso é legal, certo? Embora esteja empilhado um em cima do outro, tamanhos diferentes. Isso teria sido bom para, lembra deste que fizemos antes? No momento, são todos do mesmo tamanho. Mas digamos que meu projeto era todo irregular, para cima e para baixo. Eu posso ver como isso seria super legal usando as colunas de cartas. Tudo bem. Então isso é grupos de cartas, cartão D-E-C-K, e colunas de cartas. Vamos entrar no próximo vídeo. 125. Como adicionar uma sombra projetada a uma caixa ou cartão no Bootstrap 4: Olá lá.Neste vídeo vamos adicionar sombras para nossos cartões. Você pode vê-lo apontando para lá atrás. Vamos adicionar um pouco de estofamento no topo e no fundo. Vamos tentar ignorar este carrossel, que está indo muito rápido no topo. Então aqui na minha marcação, adicionei algumas sombras às cartas. Quero ver se consigo fazer isso no Bootstrap. Nós nos deparamos com isso antes, lembre-se, então estávamos procurando adicionar uma sombra ao texto. Escrevemos sombras. Eu peguei o errado, mas é o que queremos agora. Ok, então não são as Utilidades, e as sombras, e lá vai você, alguns bons exemplos. Então você pode ver sombra pequena como esta, sombra regular é, eu acho, apenas sem nada, e este é o grande. Vamos apenas usar sombra, e vamos para o Visual Studio Code. Então onde eu coloco? Vamos dar uma chance. Vamos colocá-lo sob este aqui, o baralho de cartas. Vamos colá-lo. Estou ignorando isso agora. Isso é uma sombra. Vamos ver como vai. Vá, e está funcionando. Está adicionando uma sombra ao lado de fora de tudo. Não é o que eu quero. Preciso de espaçamento no fundo, então vamos fazer as duas coisas. Vamos nos livrar disso, e talvez aqui, nós podemos adicionar a margem ao x e y. Eu estou desenhando aqui. Alguém mais faz isso? Eu nunca me lembro de x e y. então eu tenho que ir horizontal, vertical, x e y. Eu desenhei aqui. Isso é para cima e para baixo. Então a margem para cima e para baixo deste vai ser cinco. Vamos tentar, só para adicionar algum espaçamento entre lá e o fundo, e vamos ver se podemos colocar a sombra em algum lugar. Agora ele não funcionou em nosso baralho de cartas, ele vai ser provavelmente um cartão aqui. Então vamos adicionar sombra, na verdade vamos fazer tudo uma só vez porque estou razoavelmente confiante que isso vai funcionar. Eu já fiz isso. Vamos salvá-lo. Vamos dar uma olhada. Ei, você tem sombras por todo o caminho. Bom trabalho. Alto cinco, todo mundo. Estamos chegando perto do fim. Estou meio nervoso, meio excitado, também. É um curso longo, ansioso para terminar e levá-lo lá para fora para você. Você sabia quem provavelmente está mais animado do que qualquer um? É o editor. Jason provavelmente está mais animado do que qualquer um por isso estar chegando ao fim. Vamos fazer um dos últimos vídeos. Está pulando agora. 126. Como tornar uma tag div um link clicável gigante no Bootstrap 4: Você pode ter pedido os últimos 30 vídeos. “ Já estamos lá?” Nós estamos lá. Finalmente, tenho mais uma coisinha a fazer. Vamos estilizar esses botões primários azuis na parte inferior. Nós vamos torná-los esta cor verde agradável. Vamos entrar e descobrir como fazê-lo agora em Bootstrap e VS Code. No momento meu cartão aqui, a única coisa que você pode clicar é o botão e isso é totalmente bom, mas eu quero fazer o cartão inteiro clicável. Bootstrap tem uma classe especial para isso, sob utilitários há um chamado link esticado. Basicamente, tudo o que precisamos fazer é adicionar isto a esta pequena classe agradável para a etiqueta A. Isso fará com que o aparente ok tudo clicável, aparentemente. Vamos dar uma chance. Vamos pegar isso. Vamos entrar no nosso Visual Studio Code. Vamos encontrar a etiqueta. Aí está, dentro do meu cartão e vamos adicioná-lo a isto. Vamos mudar o link para ir a algum lugar. Eu não sei, não ir a nenhum lugar parece um [inaudível]. Vamos a qualquer site antigo e guardá-lo. Vamos dar uma chance. Primeiro para cima. Temos a mão do Mickey Mouse, esta não, a mão do Mickey Mouse só aparece ali. Se você não tiver a mão do Mickey Mouse, diferentes sistemas operacionais têm causas diferentes. Mas lá vamos nós e se eu clicar nele, hey, pronto. Ei, sou eu. Está bem. Realmente fácil, eu amo que parece que foi uma coisa tão agradável, fácil de fazer. Tudo bem, vamos fazer isso pelos outros links. Vamos estilizar o botão e depois seremos nós. Vamos adicioná-lo a este link aqui. Vamos fazer as primárias. Vamos fazer as duas coisas. Vamos garantir que funcionem primeiro lugar. Vamos voltar um. Esse funciona, este não. Por que não? Refresque. Oh, refrescar aquele funcionou. Às vezes você precisa atualizar, nós aprendemos isso através do curso. É tudo clicável vamos mudar este botão porque este botão no momento tem um pairar que não gostamos e a cor está errada. Criamos nossos próprios estilos para o esboço primário. Nós vamos fazer a mesma coisa para este aqui, apenas botão primário, nós não queremos a versão do esboço. Vamos fazer uma aula aqui para dar uma aula final, vamos chamá-la. Na verdade, vamos fazer a cor de fundo, e vamos usar, é uma cor que eu usei antes em algum lugar, O-B-B-C-9, que vai nos dar o verde. Verifica isso. Perfeito. Vai precisar mudar o pairar porque ainda está azul. Vamos fazer uma pseudo-classe, na verdade vamos fazer um composto e pseudo-classe. Vamos sair em uma chama de glória CSS, vírgula, eu quero fazer isso de novo, mas eu quero que este seja o cólon, pairar. Lembre-se, vírgula se separa, então estamos fazendo duas coisas separadas e as coisas separadas aconteceram para ser o mais regular ou principal, a pseudo versão dele, onde nós pairamos acima. Vamos verificar e agora passar o mouse é da mesma cor, estou esperando que ele mude. Eu não escolhi uma cor diferente. Só quero que seja a mesma coisa. Vamos também trabalhar na cor da borda aqui. Cor da borda. Vamos torná-lo da mesma cor que, você pode definir para nenhum? Vamos dar uma olhadinha. Não, você tem que definir para uma cor. Poderíamos abaixar o tamanho. Mas, na verdade, vamos defini-la com as mesmas cores que tudo o resto. Lá vamos nós. Olhe para nós. Isso vai ser tudo para a nossa codificação juntos, ficar por perto para o próximo vídeo onde vamos discutir seus próximos passos. Claro, eu vou pegar seus detalhes de pagamento do iogurte que você quer pedir. Te vejo em um segundo. 127. O que vem a seguir em nosso curso de fundamentos de web design: Olá e bem-vindo ao fim. Santa fumaça. Tem sido um curso grande e longo. Parabéns. Enquanto seus amigos estão sentados em casa assistindo a Netflix, você tem se esforçado, conhecendo o web design e espero que tenha gostado do curso, mas o que fazer a seguir? Há duas opções que você pode ir, você pode fazer as duas. Nós criamos este site aqui, mas o design foi feito para nós, já o fez para nós. Você pode ir por esse caminho e aprender a fazer mais o lado do design, antes de começar a construir um site. Falaremos sobre o Adobe XD por isso. Ou você pode ir onde estamos agora, como faço para empurrar este web design ainda mais e começar a olhar para o desenvolvimento web? Isso seria algo como olhar para PHP ou MySQL, onde você realmente começa a interagir com o usuário em seu site pegando nomes e endereços de e-mail, e se inscrevendo, todos esses tipos de coisas. Falaremos sobre os dois. O próximo passo lógico provavelmente vai ser como você chegar mais adiante neste caminho do web design? Construímos um site muito estático. É visualmente atraente, como um interativo. Ele faz menus e esses carrosséis, e parece interativo, mas não há interação real do usuário em termos de extrair dados, e fazer coisas com isso. Podem ser coisas como, estamos falando, inscrever-se no site, registrar-se para coisas, receber e-mails para boletim informativo de e-mail, e cortes de pagamentos, esse tipo de coisa. Para entrar nisso, você precisa olhar para mais desenvolvimento web. Eu sou definitivamente um web designer e desenvolvimento web é onde minhas habilidades não começam. O que eu fiz é que me juntei a outro instrutor chamado Malcolm Knott, e ele assume a partir daqui. A coisa legal sobre seu curso é leva o site Meet Yoga que já construímos, e na verdade adiciona um banco de dados simples. Ele só leva nomes e endereços de e-mail para um e-mailer, mas ele irá levá-lo através dos conceitos básicos de como configurar um banco de dados usando MySQL. Ele vai levá-lo através da linguagem básica que você vai usar, PHP. Isso fará com que você comece a adicionar partes um pouco mais dinâmicas e orientadas a bancos de dados ao seu site. Confira isso. O nome dele é Malcolm Knott. Eu coloquei um pequeno link lá, seus sites ou seu curso é chamado, Criando um boletim informativo de e-mail simples usando MySQL e PHP, algo assim. Está escrito lá. Eu li errado, não é? Confira isso. Em seguida, vamos falar sobre XD. Bancos de dados é o que você pode fazer seguindo neste curso. O que você pode fazer e/ou fazer é realmente voltar para a parte inicial, onde para este curso, eu realmente coloquei em muitos trabalhos de design já e acabamos de construí-lo. Lembre-se, eu projetei todos eles e nós apenas codificamos eles neste site. Você pode estar olhando para esse conjunto de coisas, como eu posso entender como realmente tomar um breve resumo? Veja o que acontece neste breve resumo, e como obter a aprovação do cliente, como obter ideias de design, e realmente protótipo, antes que eu realmente comece a construí-lo. Para você, isso seria Adobe XD. Tenho um curso chamado Experiência do usuário, design essencial usando o Adobe XD. Confira isso. Essa é a maneira de começar, como o precursor para codificar o site. Pode ser útil para você. A próxima coisa a discutir é como você pratica. Depende de onde você vai. Se eu estou trabalhando em meus próprios projetos, muito duro, porque o escopo, você realmente não decidiu sobre o que você quer de qualquer maneira, e você acaba gastando dias escolhendo fontes e cores. Então, indo para o seu círculo muito próximo de pessoas, e perguntando se as pessoas querem um site. Você tem um tio, você tem uma equipe esportiva, pais, alguém que poderia usar um site potencialmente, e se envolver com eles em um projeto. Tente fazê-lo de graça. Livre sempre tende a levar a sangue ruim. Se eu disser ao tio John, você deveria comprar um site, porque este é terrível, e ele diz, claro, e isso é tipo, há um negócio livre acontecendo. Ele colocou zero compromisso nisso. Você cometeu muito tempo. Você vai gastar muito do seu esforço tentando fazer isso, mas como não há valor real dele, bem, compromisso para ele, ele não vai responder a e-mails. Ele nem vai terminar o trabalho, e depois acaba numa reunião familiar estranha onde o tio John nunca me ligou. Ele nunca terminou este projeto. Então eu acho uma pequena taxa. Você pode descontar muito. Diga coisas como: “Ei, tio John, eu estou olhando para este site. Preciso de um projeto. Normalmente é $2.000. Importa-se de cobrir algumas das minhas horas? Farei por 500 ou por 100. Só para cobrir alguns dos pequenos pedaços de despesas que você vai cobrir para fazê-lo. Se ele disser não, então isso nunca seria um bom trabalho. É apenas ordenado para acabar com isso lá e ir encontrar alguém que tem aquele pequeno pouco de compromisso, que vai te dar um pouco de dinheiro, porque então, compromisso deles, nós trocamos, onde as pessoas dizem, mesmo que seja $5, há um compromisso e as pessoas mudam de idéia sobre como eles vêem o trabalho. Eles responderão a e-mails muito mais e é mais provável que você consiga o trabalho. Faça coisas como, hey, normalmente são 2.000, mas para você, eu só quero um par de horas cobertas, se estiver tudo bem. Talvez 500 ou 100, só para que você possa começar um projeto. Acho que essa é a maneira mais fácil, só de encontrar pessoas em seu círculo próximo. Comece a construir um projeto, e essa é uma boa maneira de começar. Por último, siga-me nas redes sociais. Todos aparecerão aqui em um segundo. O Facebook é provavelmente o melhor. Mais interativo. Poste perguntas que tens sobre o curso. Publique seus projetos. Traga seu próprio laptop ponto com, barra fb irá levá-lo para o grupo. Também no Instagram, Eu sou Bring your próprio laptop, e no Twitter Eu sou Dan ama Adobe, então inscreva-se para aqueles e isso vai ser o fim. Eu vou acenar por um tempo e eu vou fazer o editor colocar em um desvanecimento para preto, mas na verdade, vamos tentar desvanecer-se para tomate. Lembra-se dessas cores? Deve ser, na verdade, um pouco de assassinato. Vamos tentar desvanecer-se para verde primavera. Essa foi boa. Tchau agora.