Como escrever código mais rápido com o Emmet

1. Escrevendo código mais rápido com o Emmet: Olá a todos. Estou muito animado para falar com você sobre Emmet hoje. Meu nome é Sandra. Sou um Designer Digital e trabalho tanto em projetos impressos quanto na web. Meu objetivo é compartilhar com vocês a melhor prática que aprendi ao longo do caminho, Emmet é uma das minhas principais dicas quando se trata de aprender a codificar. Nesta aula, vou mostrar-lhe como usar Emmet para que você possa usá-lo para si mesmo e se tornar codificadores muito mais eficientes. Emmet é muito útil. Tão útil, que é a maioria dos editores web modernos vai permitir que você usá-lo? Para esta classe, eu usei a plataforma que eu uso quase diariamente, e é chamada de caneta de código. Mas sinta-se livre para usar qualquer editor web com o qual você se sinta mais confortável. Esta aula é destinada a pessoas que já têm algum conhecimento básico sobre HTML e é para pessoas que gostariam de aprender mais sobre como otimizar a codificação. Se isso é para você, coloque a chaleira no fogo e vamos começar. 2. O que é Emmet: Então vamos começar com o princípio do Emmet. Por exemplo, se você quisesse criar um parágrafo em HTML, o que você faria é criar uma tag de abertura para o parágrafo e, em seguida, uma tag de fechamento para o parágrafo. Então é isso que você vai digitar. Então você teria criado um parágrafo. Com Emmets, você pode fazer isso muito mais simples. A única coisa que você precisa dizer para Emmet é, você quer um parágrafo e, em seguida, ele irá gerar automaticamente a abertura ea tag de fechamento, apenas pressionando tab. Então vamos tentar. Escrevo P e, em seguida, clico na guia. Então temos a abertura e a etiqueta de fechamento para o parágrafo. Você pode fazer isso com qualquer tag disponível em HTML. Você pode fazer isso para a extensão, você pode fazer isso com cabeçalho. Você pode fazer isso com um div, ou você pode fazer isso com uma tabela ou qualquer coisa. Vai funcionar exatamente da mesma forma. Então você vê que é muito simples, mas tem muito potencial para ajudá-lo a acelerar sua codificação. 3. irmãos: Quando eu digo irmãos, isso significa tags que estão no mesmo nível. É uma tag seguida por outra tag seguida por outra tag. Digamos que se você tem um título um H1 seguido de um parágrafo, em seguida, seguido por uma tabela eles estão todos no mesmo nível e eles são irmãos. Digamos, por exemplo, se você tem um cabeçalho H1 e, em seguida, você quer um parágrafo, há diferentes maneiras que você pode fazê-lo. Você poderia fazer H1 e, em seguida, você pressionar tabulação e você criou o seu H1. Em seguida, vá para o final da linha, pressione B, e, em seguida, pressione Tab e, em seguida, você tem seu título um e seu parágrafo. Não havia muita digitação lá porque eu tinha que ir no final da minha tag de fechamento de H1, a fim de criar minha próxima tag. Você só precisa fazer H1 mais P e, em seguida, você pressionar tab, e então ele criou para você o H1 seguido pela tag P. Estes são os irmãos. 4. Nesting: Quando eu digo aninhamento, quero dizer um elemento que está fechado dentro de um elemento. Diga que se você tem um parágrafo e dentro do parágrafo você tem um span. Em seguida, a extensão é aninhada dentro do parágrafo. O parágrafo é o pai, portanto, o span é o filho. Por exemplo, se você tiver um parágrafo e dentro do parágrafo você terá uma extensão. Isto é um ninho. Para isso com Emmet você usa o sinal de maior que. Vamos dar uma olhada. Você tem o seu parágrafo e, em seguida, você quer dentro de um parágrafo uma extensão. Fazemos p maior que e, em seguida, você digita span. Você pressiona “Enter” e aí está. Você tem o seu espaço que está fechado dentro do seu parágrafo. 5. Agrupamento: Agora sabemos como fazer os irmãos, sabemos como fazer o ninho. Então vamos tentar agrupar estes juntos. Se eu tivesse um título e então eu queria que ele fosse seguido por um parágrafo que tem um espaço dentro dele. O que você faria é h1, e então o parágrafo é um irmão p. Dentro do parágrafo, então você faz o maior que, você faz o span. Você pressiona Tab. Agora você tem o seu título com o parágrafo. Dentro do parágrafo você tem a extensão. Agora imagine que você queria se estender dentro do h1, e então você queria o parágrafo depois disso, então você faz h1 e dentro do h1, você quer seu span. Você quer seu parágrafo como um irmão, então você faz mais p. Agora você pode ver que o seu parágrafo foi colocado dentro do seu título um. Isso é por causa do agrupamento. O que ML faz é que diz que o span e o p estão no mesmo nível e ambos são filhos do título um. O que você precisa fazer é agrupar. Neste caso, eu quero colocar colchetes entre meu h1 e o span e eu quero que o h1 e o parágrafo estejam no mesmo nível, então eles são irmãos. Agora que eu coloquei meus colchetes em eu pressione tabulação, e agora você pode ver que meu span está dentro do meu cabeçalho um, e então ele é seguido pelo parágrafo. 6. Multiplicação: Vejamos a situação em que queremos criar dez parágrafos. Então o que você poderia fazer é que nós sabemos como criar irmãos. Então criamos povos. Dez é muito e dizer que se você quiser fazer 100, isso seria demais. Então, o que você precisa usar é os diâmetros da função de multiplicação. E é como em uma calculadora, você só precisa pressionar estrela em sua tela. Então, se eu quisesse 10 parágrafos, eu colocaria p e depois a estrela, e depois 10. Pressione Tab, e agora eu tenho 10 parágrafos que foram criados. Ele também funciona com os agrupamentos. Então, digamos que se eu tiver um parágrafo e, em seguida, dentro do parágrafo que eu quero abranger, e eu agrupá-los e dizer que se eu queria três desses, eu apenas colocar estrela três, e então eu pressionar Tab. Então você pode ver que eu tenho três vezes um parágrafo, e dentro de cada um desses parágrafos, eu tenho um intervalo. Então agora se eu fiz isso sem o agrupamento e eu fiz o p, e então com o tempo de tempo de tentativa três, o que ele faria seria criar três vãos dentro do parágrafo. Então é por isso que é importante entender o agrupamento ao usar um [inaudível]. 7. Desafio 01: Então agora é hora do desafio. Baixe o desafio número um. Como olhamos para o arame que estou propondo e tentamos encontrar uma maneira rápida de criar este diagrama usando MS. Então temos um cabeçalho, e dentro do cabeçalho Você tem um div e um nav, dentro do div você tem um span, e dentro de um nav você tem uma lista desordenada e dentro desta lista não ordenada, você tem cinco LI's. Então nós temos o cabeçalho, um cabeçalho insider você tem todos os seus filhos. Eu só vou para o grupo. Só para facilitar. Você tem uma div e no mesmo nível, assim como um irmão. Você fez navegação. Agora, dentro da div, você tem a extensão. Então você tem dentro da div, que é uma criança é usado o sinal maior que se isso é span. Então vamos agrupar isso e, dentro do nav, você tem um ul e dentro do ul você tem cinco LI's. Vamos agrupar isso também, pressione tab e você tê-lo, você tem o seu cabeçalho e dentro você tem o seu div e, em seguida o span e, em seguida, o nav dentro e, em seguida, dentro nav você tem ul com todos os seus cinco LI's. Então, agora vou te deixar em segredo. Você não precisa criar um código completo e, em seguida, pressionar Tab para ter tudo escrito. Você pode fazer isso passo a passo se achar mais fácil e, em seguida, é mais fácil de solucionar se houver algum problema em algum lugar. Primeiro crie um cabeçalho e, em seguida, dentro do cabeçalho, você tem seu div e seu nav. Então div e nav. Dentro da div você tem uma extensão. Dentro do nav, você tem um ul, e dentro do ul, você tem cinco LI's. É muito importante entender o agrupamento e o nidificação, etc. Mas você não precisa criar uma frase longa para em seguida, pressionar tab e ver tudo e porque se houver algum problema, então você tem que voltar para ele e tentar descobrir, você sabe, onde foi o problema com o agrupamento em algum lugar ou em vez de um irmão sobre eles de nidificação ou coisas assim. Então, é apenas mais rápido fazê-lo passo a passo. É só uma coisa boa de saber. Todas as diferentes funções que emite podem mostrar e, em seguida, é apenas uma questão para você jogar com ele e estar confortável com ele e saber com que maneira você prefere trabalhar. 8. Cursos e ID: Agora que entendemos o princípio de Emmet e sabemos como criar irmãos, aninhando, multiplicando. Vamos dar uma olhada em outras funções que podem ser muito úteis quando você está escrevendo seu código. Então, uma coisa útil a saber é como adicionar uma classe e como adicionar um ID a uma tag. Então é muito simples com Emmet, ele funciona como CSS. Então, se você tem um parágrafo e você quer que este parágrafo tenha uma classe chamada myClass. Você só precisa dizer p e, em seguida, ponto para a classe, como em CSS e elogios myClass, e então eu pressionar “Tab”. Agora eu tenho um parágrafo que tem uma classe chamada myClass. Da mesma forma, se você quiser criar um ID, você também usa o mesmo que CSS e usando o hash. Se você tem p e então você tem hash e MyID, e então você pressiona “Tab”. Agora você tem um parágrafo, que tem uma identificação, MyID. Então agora você pode combiná-lo. Então você tem seu parágrafo que tem uma classe chamada myClass, e então você quer que ele tenha um ID. Então você coloca um hash e, em seguida, MyID, e você pressionar “Tab”. Em seguida, você tem um parágrafo que tem uma classe e que tem um ID. 9. Numeração de itens: Você também pode ter várias classes, e para isso você só precisa adicionar o ponto e o nome da segunda classe, et cetera até que você tenha todos os nomes de suas classes. Você tem p ponto classe um, ponto classe dois, ponto classe três, e você pressionar tabulação. E você pode ver agora que você tem um parágrafo que tem várias classes. Ele também funciona com o multiplicador. Se você tiver três parágrafos que tem uma classe chamada “myclass”, você só precisa fazer p dot myclass e, em seguida, multiplicá-lo por três, e então você pressionar tab, e então você pode ver que você tem três parágrafos que tem um classe chamada “myclass”, o que é muito bom. Mas e se você quisesse fazer isso com a identificação? Obviamente você teria p e, em seguida, hash MyID, e então vezes três, e você pressiona tabulação, e então você teria três parágrafos, mas o problema é que todos eles têm o mesmo ID, e obviamente um ID é suposto para ser exclusivo, que você não possa ter três elementos que tenham o mesmo ID. Para isso, você precisa da numeração do item. Se você tem p, e então você tem o hash, e então eu vou criar MyID, e então eu usei o sinal $, e o sinal $ é o quê? É a numeração do item. E então eu multiplico por três, e quando eu pressiono tabulação, você vê que você tem p ID, MyID um, MyID dois, MyID três. Então o que você fez foi, você disse, eu quero que todos os meus parágrafos tenham uma ID que começa com MyID três vezes, e você contará de um a três. O primeiro será MyID um, o segundo será MyID dois, e o terceiro será MyID três. Isso é muito útil quando você quer conteúdo exclusivo para cada vez. 10. Atributos: Agora sabemos como adicionar uma classe, sabemos como adicionar um ID, se quiséssemos adicionar outros atributos a uma tag, a um elemento? Isso é muito simples com o MX. O que você precisa usar é o Bracket Quadrado. Digamos, por exemplo, que você tem um parágrafo e dentro do parágrafo, você gostaria de colocar um estilo. Então você faz P, e então você coloca os colchetes e você faz Estilo, Igual. E então você abre as aspas. E então você pode dizer, “Cor: azul”, por exemplo. E então você vai no final, e você aperta Tab. E agora você tem seu parágrafo que tem um estilo, um estilo embutido. A cor da fonte será azul. Existem alguns elementos que a imagem dará atributos automaticamente também. Então, se você começou com apenas uma imagem, se você pressionar Tab, você verá que a imagem colocará automaticamente a fonte e a tag alt nos elementos da imagem. Semelhante com o anker [inaudível]. Se você tem A e, em seguida, você pressiona Tab, você vê que o Href estaria automaticamente lá. Mas você pode escrever na fonte imediatamente. Por exemplo, para a imagem. Então, se você tem a imagem e, em seguida, você usar colchetes para adicionar os atributos. E então você coloca fonte igual, então você coloca “myimage.jpg”. Você também pode adicionar vários atributos lá. Você só precisa pressionar Espaço na próxima. Então, por exemplo, você poderia colocar a largura igual a 100. E então você vai no final e você pressiona Tab. E você verá que a imagem criará a imagem com a fonte e com a largura. Mas você verá isso na tag alt, porque é importante adicionar a tag alt e você pode digitar imediatamente nela. Meu texto alternativo que descreveria a imagem. 11. Desafio 02: Agora é outro momento de desafio. Convido você a baixar o Desafio Número 2. Dê uma olhada na armação do fio, tente descobrir como fazê-lo usando seu Emmet e depois volte e veja como eu iria lidar com isso. Você tem um DIV que tem duas classes e um ID. Dentro do DIV você tem três imagens que são chamadas imagem um, imagem dois e imagem três, e eles têm atributos de largura e altura. Então vamos começar criando seu DIV. Você tem seu DIV e tem duas classes, ponto classe um, então ponto classe dois. Tem uma identificação chamada minha identidade. Se eu pressionar Tab, criei meu DIV. Uma coisa que é interessante notar é que se você criar uma classe vazia, Emmet vai assumir que é um DIV. Se eu colocar ponto classe um, ponto classe dois e, em seguida, hash, meu ID e eu pressionar tabulação, ele irá automaticamente criar um DIV. Então isso é uma coisa legal de se saber. Agora temos três imagens. Temos a tag de imagem e, em seguida, temos atributos dentro dela. Eu coloquei os colchetes e então eu tenho que fonte. E é chamada imagem 123 JPEG. Vou usar um multiplicador. A numeração do item seria o $ sinal de ponto JPEG. Então, ele tem uma largura que é 100 e uma altura que é 100. Quero três deles. Eu multiplico por três e pressiona tabulação. Agora, eu tenho minhas três imagens que eu vou chamar image1.jpeg, dois, três pontos JPEG. 12. Texto de numeração: Agora vamos aprender como adicionar texto quando você cria código usando emmet. Digamos que você queira criar um link que apenas diz “Clique em mim”. O que você precisa fazer com emmet é usar os colchetes. Você tem sua âncora, você digita um, e então você tem seu HREF que você pode usar com os atributos, que são os colchetes. Nós temos HREF igual a, eu só vou colocá-lo vazio por enquanto. Você quer alguns textos, então você teria os colchetes, e então você pode digitar o texto que você quer lá, “Clique em mim” Eu pressionar tabulação. Agora você tem sua âncora que tem um link para ele e tem um texto dentro, “Clique em mim”. O texto também funciona com multiplicadores. Por exemplo, se você tinha lista não ordenada, sua UL e, em seguida, dentro da lista, você tem cinco itens de lista. Será LI vezes cinco e, em seguida, cada um desses itens, você quer que eles tenham um texto para ele. Vou colocar no item da lista. Eu vou no final e eu pressionar Tab. Vamos tentar de novo. A questão é que eu coloquei plus então o plus significa que seus irmãos, que significa que a UL e LI são o mesmo nível, mas realmente eu quero que a tag LI esteja dentro da UL. O que queremos é a próxima coisa. Em vez do sinal de mais, temos o sinal de maior que. Vamos tentar de novo. Pressione Tab. Agora você tem sua lista, e dentro da lista, cada item da lista tem o item da lista de texto. Agora, se você queria que o texto fosse diferente e tivesse o item da lista um, o item da lista dois, o item da lista três, é muito simples. Já aprendemos a fazer isso antes. É com a numeração do item. Vamos voltar a isso. Você tem item da lista, e então podemos colocar o sinal $ no final e, em seguida, quando você pressiona guia, você pode ver que você tem o item da lista um, item da lista dois, três, quatro e cinco. 13. Lorem Ipsum: E agora se você quiser gerar texto aleatório? O famoso Lorem Ipsum. Emmet tem essa função onde você pode realmente usar isso. Se você tem o seu parágrafo e, em seguida, dentro do parágrafo você quer o seu texto Lorem. Você pressiona “Tab” e, em seguida, você tem o seu parágrafo, e você gerou um pequeno parágrafo com algum texto aleatório nele. Agora você pode controlar também o número de palavras que você pode colocar. Então, diga se você tem o título e você só quer algumas palavras nele. Tudo que você precisa fazer é “H1", e então você quer o seu “Lorem”. E você quer três palavras. Então, você faz “Lorem3", você pressiona “Tab”, e agora você tem seu H1 que tem três palavras usando o gerador de texto aleatório Lorem Ipsum. 14. Desafio 03: Este é o desafio final. Faça o download do Desafio número 3, dê uma olhada na forma como você enquadra. Tente usar Emmet para criar isso para o seu quadro o mais rápido possível e depois volte e eu mostrarei como eu enfrentaria esse desafio. Neste último desafio, você tem um cabeçalho que tem uma classe. Dentro do cabeçalho você tem um div. Dentro de uma div você tem uma imagem, e então no mesmo nível que a div, você tem um nav e dentro que você tem uma URL que tem cinco itens de lista, LI's que têm idéias diferentes e cinco palavras diferentes dentro dela. Vamos começar com o recipiente principal que é o seu cabeçalho, em seguida, classe um, e você pressionar tabulação e você tem isso. Agora eu vou criar minha div em que você tem uma imagem que tem uma fonte. Isso é chamado imagem um o jpeg, e ele tem uma pilha antiga que é chamada minha imagem. Agora você tem um div com a imagem dentro, e então você tem o seu nav. E dentro do navegador você tem sua lista desordenada. E então você tem sua lista de itens vezes cinco. Você quer que cada um desses LI's tenha um id, então você coloca hash e, em seguida, você chamá-lo id-1, id-2, etc Seria id e, em seguida, o sinal de dólar, e então você quer dentro de cada um desses LI's ter um texto lorem que é cinco palavra longa. Agora você pressiona tabulação e agora você tem sua navegação com suas listas dentro de lá. Isso tem um ID diferente de um, dois, três, quatro e, em seguida, ele tem cinco estava dentro de cada um desses itens da lista. 15. Obrigado!: Obrigado por se juntar a esta aula hoje. Espero que tenha gostado. Eu realmente encorajo você a ir para o site de documentação Emmet para descobrir mais uma vez que você se familiarizar mais com este processo. Se você tiver alguma dúvida ou se você tiver algum comentário, hesite em entrar em contato comigo para me informar e vê-lo em breve.