Comece a criar sites hoje! Sem nenhuma experiência.

1. 1.1 - Introdução ao curso: Saudações e bem-vindos. Meu nome é Aaron Craig e eu vou ser seu instrutor para este curso para iniciantes absolutos em HTML e CSS. Este curso é destinado a pessoas que sempre quiseram criar um site, mas não sabiam por onde começar. Ou estavam muito intimidados pelo processo de aprender a codificar ou pela tecnologia por trás disso. Vou te dizer que você pode ser um desenvolvedor web e eu estou aqui para ajudá-lo nesse caminho. Vamos cobrir as noções básicas de HTML e CSS passo a passo, como ele funciona, como montá-lo e como projetar seu primeiro site. Se você sabe codificar, você pode fazer este curso, mas ele vai ser muito lento e vai ser apenas uma atualização para você, mas se você não sabe como codificar ou você acha conhece alguém que soa como este curso seria bom para, Eu encorajo você a compartilhá-lo com eles, obtê-lo lá fora porque todos podem ser um desenvolvedor web se eles quiserem e eu acredito que este vai ser um ótimo curso para eles e para você. Com isso dito, vamos falar sobre por que HTML e CSS ainda são relevantes hoje no próximo vídeo. 2. 1.2 - por que aprender HTML e CSS: Então, nos dias de hoje, pode não parecer necessário aprender HTML e CSS. Você provavelmente já viu anúncios do Squarespace, Wix e WordPress, arrastar e soltar, construí-lo você mesmo. Nenhuma experiência de codificação é necessária, e alguns deles podem funcionar. Você pode fazer alguns sites muito agradáveis com eles, mas a coisa é que cada site na Internet usa HTML e CSS como sua espinha dorsal. A maneira como ele é entregue pode parecer muito diferente dependendo da tecnologia que está sendo usada, mas ainda é HTML e CSS, é por isso que eu acredito firmemente que é essencial para cada desenvolvedor web ter um conhecimento sobre ele e que é o que este curso vai fazer por você. Nós vamos cobrir o básico e eu vou dar-lhe os recursos para continuar aprendendo após este curso para se tornar o melhor desenvolvedor web que você puder. Agora, no próximo vídeo, vamos falar sobre como este curso é estruturado e a melhor maneira de você tirar o máximo proveito dele. 3. 1.3 - estrutura de curso: Este curso é projetado para ser um acompanhamento ao longo do curso de codificação. Isso significa que vou escrever o que estou a dizer e explicá-lo à medida que avançamos. Mas você deveria me colocar no lado de um segundo monitor ou no seu monitor principal e estar codificando comigo. Se não estiver, não conseguirá o que precisa para sair deste curso. Você pode assistir a 1000 tutoriais sobre como lançar um dardo. Mas até que você esteja em campo tentando, é tudo conhecimento, não prático. A mesma coisa vem para aprender línguas e codificação em geral. Você tem que estar fazendo você mesmo. Seja fazendo o site como nós fazemos isso também e você vai ser muito melhor fora. Enquanto estiver assistindo, se tiver alguma pergunta, fique à vontade para perguntar. Lembre-se, este curso é destinado a iniciantes. Se você encontrar um problema ou uma falha, ou você não tem certeza de algo, você não vai ser o único, então pergunte e nós faremos o nosso melhor para respondê-lo. Enquanto estamos indo junto, se você está se perguntando, hmm, eu me pergunto se isso poderia fazer isso, pausar o vídeo e experimentá-lo. Essa é outra ótima maneira de aprender e você ficará muito melhor com isso. No final dessa trilha de coelho, você saberá novos conhecimentos sobre se algo funciona ou não, e isso é ótimo. Agora vou usar o Visual Studio Code, um software que é gratuito e de código aberto para todos em qualquer plataforma. Você pode usar isso ou outra coisa. Realmente não importa. Vou mostrar-lhe como fazer um arquivo HTML carregado e ver as alterações que você fez à medida que avança. Tudo o que fizermos neste curso será independente de software e plataforma , portanto, use o que você estiver confortável e você estará pronto para ir. Agora, com tudo isso fora do caminho, estamos prontos para analisar o que é HTML e como ele funciona. Estou super entusiasmada. Espero que também estejas, e vemo-nos na próxima secção. 4. 2.1 - que é HTML e não é: A primeira coisa que eu quero abordar é o que HTML é e como ele difere das linguagens de programação tradicionais, que você pode ter ouvido falar e você pode não ter. HTML significa Hypertext Markup Language. É uma linguagem de design em torno tags que você, em seguida, colocar informações entre essas tags ou atributos atribuídos, que vamos chegar a. Hypertext Markup Language é a base de cada site, e é por isso que é realmente importante, porque é o que você realmente vai ver. Agora, é uma linguagem baseada em tags, que significa que se quisermos inserir, digamos, um parágrafo ou um título, então nós realmente dar-lhe uma tag que, uma tag seria parecido com este h1, e então nós colocamos informações entre ele, e isso é o que ele diria. Isto é apenas HTML, tudo bem aqui, todos os diferentes tipos de HTML que vamos cobrir sobre os próximos dois vídeos, e parece assim. Este é o título que você tem aqui, aqui está um parágrafo que é apenas um texto e imagem de vídeo, uma lista, tabelas, um formulário. Tudo isso é uma página HTML pura, não há mais nada dentro daqui. Você pode dizer que ele não parece muito bom, e isso é porque nós não temos nenhum estilo, que é o CSS, que nós vamos cobrir mais tarde. O que fazemos agora não vai ficar muito bonito porque o estilo que desenha como tudo parece e sente e se move e o layout dele, que tudo virá mais tarde. Agora, apenas se acostume a ter este aspecto. É meio que tudo vai direto para baixo, não há muito para ele, não há muita cor, é assim que é, e está tudo bem. Isso é basicamente o que HTML é. Agora, o que HTML não é é uma linguagem de programação. Então aqui está um projeto que eu tenho. Este é um projeto C-sharp, também construindo um site, mas este é mais do código back-end do lado do servidor, que não se preocupe com isso. Mas basicamente o que isso significa é tudo isso aqui, variáveis, funções, declarações se else, listas, estruturas de dados; todo esse tipo de coisa, se você já ouviu falar de alguma coisa, não se aplica ao HTML. Tudo o que você vê aqui, não vamos fazer com HTML porque não é uma linguagem de programação. Não estamos criando um programa para criar um site. O site é definido por tags e estilos que vamos aprender a configurar. Então é isso que HTML é, e isso é o que HTML não é. Então não é uma linguagem de programação, é uma linguagem de design que é muito legal porque se você está apenas entrando em codificação, HTML e CSS são uma linguagem fantástica para começar porque eles são bastante simples, mas você pode criar as coisas certas e você pode fazer com que as coisas comecem a parecer bem rapidamente uma vez que você aprende o que você está fazendo. Então, é ótimo para iniciantes, na minha opinião, apenas em geral porque muitos iniciantes gostam de ver resultados; eu costumava ser um deles quando comecei. Eu queria fazer as coisas, eu queria ver as coisas imediatamente acontecerem. Linguagens de programação muito mais difícil, mas HTML, CSS, e você começa a estar construindo um site o tempo todo e é muito legal. Então isso é o que HTML é e o HTML não é. No próximo vídeo, vamos começar a abordar parte dessa sintaxe e eu vou explicá-la, e vamos fazer apenas um site HTML básico à medida que avançamos. 5. 2.2 - HTML básico: A primeira coisa que você vai precisar para começar a fazer seu site é o arquivo para o site. Seja qual for o software que você está usando, você provavelmente será capaz de fazer isso dentro de lá se você quiser apenas fazendo New File e escolhendo HTML. Mas se você está fazendo isso de uma maneira antiga com como bloco de notas ou algo assim. Você pode em qualquer lugar no seu navegador clicar com o botão direito do mouse e dizer, Novo e ele precisa ser apenas um documento de texto. Não pode ser um documento de palavras. Pode ser como um bloco de notas, mas não pode ser nada mais do que um simples documento antigo. Você dá a ele um nome chamado índice e, em seguida, você alterar a extensão from.txt ou o que quer que fosse, to.HTML. Eu poderia dizer que isso vai ficar instável, tudo bem. Clique em “Ok” e, em seguida, você terá sua primeira página da web pronta para uso. Vai ficar em branco agora. Podemos abrir, ver que não há nada lá, tudo bem. Mas é um arquivo de site que será aberto por navegadores e saberá que é um site pronto para ser lido. O que vamos fazer é preenchê-lo com informações. Para fazer isso, usarei o Visual Studio Code, mas você pode usar qualquer coisa que quiser se estiver confortável com outra coisa ou não quiser usar o que estou usando por algum motivo, tudo bem. Você pode até ir à velha escola e abri-lo no Bloco de Notas ou Editor de Texto e fazer tudo à mão. Eu não encorajaria isso, mas você definitivamente pode. A maneira de visualizar o arquivo enquanto você está editando é simplesmente navegar para onde quer que o arquivo esteja, clique duas vezes nele. Agora está vazio porque não temos nada dentro dele. Mas cada vez que você fizer uma alteração, você pode apenas salvar seu código e, em seguida, entrar e pressionar “F5" e ele irá automaticamente recarregar isso no navegador de sua escolha. Eu estou usando o Firefox, mas você pode acompanhar e qualquer navegador que você está usando e ele vai fazer exatamente o mesmo. Vamos começar com alguma sintaxe básica. Agora, há uma estrutura que todos os arquivos HTML seguem e é necessária para publicação on-line. Mas por agora, vamos pular e vamos cobrir isso no final. Isso é porque a estrutura necessária é realmente preenchida com alguns tokens bastante avançados e tags e sintaxe e eu não quero atolá-lo com isso sem sequer saber o básico. Vamos começar super simples. A primeira coisa que vamos cobrir é a etiqueta de cabeçalho. Nós vamos começar isso pressionando Shift e Left na tecla vírgula para abrir um colchete e se você estiver usando código, você pode ver aqui que ele lhe dá todas as opções e nós vamos cobrir algumas dessas, mas não todos eles porque não precisamos de todos eles para tudo o que fazemos. Vou cobrir o básico. Vamos começar com uma direção e temos h1 calha h6, que significa a direção um até o sexto. Eu vou ir em frente e digitar h1 e depois fechar esse suporte com turno e período. Você pode ver aqui que o meu auto completa isso, mas se isso não acontecer, o que você precisa fazer é então colocar outro colchete que se abre e, em seguida, seguido por uma barra invertida e, em seguida, essa mesma tag e que irá fechar a tag para fora. Cada tag HTML, bem, quase todas as tags HTML vai seguir essa estrutura exatamente da mesma forma. Existem alguns que diferem, mas na maior parte, isso é o que você precisa fazer. Você abre com colchetes, coloca a etiqueta que você quer dentro dela e a etiqueta é o que estamos chamando de qualquer coisa que digitamos dentro de lá. Há tags predefinidas como título, imagem e vídeo e, em seguida, há tags que você pode, se você quiser realmente criar a si mesmo e, em seguida definir como eles se parecem e sentir e o que eles devem fazer. Por enquanto, vamos apenas usar aqueles que são predefinidos em todos os navegadores, em todos os lugares. Dirigir é ótimo para começar. Um título, como o nome indica, é algo que você coloca no topo de um artigo, uma imagem, um vídeo, algo que você está introduzindo. Eles têm tamanhos de texto predefinidos e olham em todo o seu site, para o qual eles são realmente úteis. Cabeçalho 1 é algo que você usaria para o cabeçalho da página. Você não usaria o título um o tempo todo. Você usa, bem, eu acho que o menor número aqui, um e que lhe dará o maior tamanho de fonte. Se eu disser, bem-vindo à minha página e eu salvar isso, eu vou ir em frente e clique, ir ao vivo aqui em baixo. Isso vai abrir minha página web e será automaticamente atualizado. Você pode ver que este é o primeiro e que é um título bastante grande. Você pode aumentar o tamanho com CSS mais tarde, sobre o qual falaremos. Mas isso é padrão e isso é o que você usaria para introduzir basicamente sua página inteira. Então, a partir daí, se você tivesse artigos, talvez você use um título menor, h2. Então chame este título de artigo, eu vou salvá-lo, voltar a isso, atualizar e então você pode ver que título do meu artigo é um pouco menor e assim por diante e assim por diante. Cada um desses títulos vai parecer um pouco diferente. Se entrarmos, podemos digitar cada um e você pode ter um sentimento de como eles são e o tamanho que eles têm. Agora, com CSS mais tarde, você será capaz de personalizar tudo isso completamente ao seu gosto, o que é ótimo. Alguns desses títulos ficam muito pequenos, como o título 6, eu pessoalmente nunca usei o título 6 ou 5. Eu costumo ficar com um e depois dois e três dependendo do que estou fazendo. Mas você pode ver que você tem um monte de opções aqui, lembre-se disso. Essa é a estrutura básica das tags HTML. Você abre, coloca algo no meio, geralmente texto e depois fecha. Só porque quero mostrar-vos como quebrar essa regra imediatamente, vou mostrar-vos uma que não segue essa e que é a tag de imagem. Se abrirmos isso, você vai notar que HTML e realmente programação e codificadores em geral são muito, muito preguiçosos. Eles não digitam nomes completos para praticamente qualquer coisa. Quando você está procurando por algo na maioria das vezes ele vai ser ou abreviado como imagem, IMG ou ele vai ter um nome diferente que diz o que ele faz, que é realmente chamado de âncora, que é um link para outra página da web. Se você digitou como link aqui, isso é algo aqui, mas não é assim que você vincula a outra página web, é algo totalmente diferente. Há algumas coisas que você precisa saber e é isso que vamos cobrir. Mas primeiro vamos voltar à imagem, IMG. Se fecharmos isso, você pode ver que não há colchetes de fechamento que automaticamente é preenchido aqui e isso é porque uma imagem é uma tag fechada auto-suficiente. Você não tem que ter nada aí. Em seguida, a imagem realmente usa algo chamado atributos. Atributos são coisas que você define sobre essa tag. Uma imagem, um link e um vídeo e várias outras tags precisarão ter informações que você definiu para que ele saiba o que fazer. Porque agora temos uma tag de imagem, mas não temos imagem para usar. Vamos abrir isto e procurar uma imagem. Uma das coisas que eu gosto são jogos. Vamos procurar videogames, ver imagens, e podemos pegar um. Vou em frente e pegar algo, esse parece legal. Agora, aviso de direitos autorais muito rapidamente, você não pode simplesmente ir on-line pegando imagens e jogá-las em um site que você faz, que seria violação de direitos autorais, muito grande coisa, não faça isso. Se você está procurando imagens para o seu site, há muitos lugares ótimos para obtê-las. Vou incluir algumas fontes de recursos no final deste curso, verificar lá fora. Mas não roube imagens. Pelo que estamos fazendo agora, tudo bem, porque eu não vou colocar isso online, não vou ganhar dinheiro com isso e nada disso, está tudo bem. Quando você encontrar uma imagem que você gosta, você pode baixá-la, você pode baixá-la diretamente ou você pode copiar localização da imagem e, em seguida, a partir daí podemos usá-lo em nosso site. Vamos voltar e vamos digitar, dentro dos colchetes aqui, SRC que significa fonte, então vamos digitar iguais e, em seguida, dentro de aspas, vamos colar essa coisa inteira que acabamos de copiar. Alguns deles vão ser muito longos, alguns deles seriam curtos, só depende da URL. Se tivéssemos uma imagem local, que eu mostrarei a vocês como fazer isso mais tarde para um vídeo, então você iria apenas vincular a isso aqui. Mas agora, isso é tudo o que precisamos para uma imagem aparecer em nosso site. Eu vou guardar isso, voltar aqui, atualizar nossa página e você pode ver que isso está lá agora. Temos cabeçalhos, temos uma imagem e estamos começando a chegar a algum lugar, o que é incrível. Agora, vamos cobrir algumas das outras tags que você provavelmente estará usando o tempo todo. Um deles vai ser uma tag de parágrafo e que vai ser apenas p. Uma tag de parágrafo é onde você coloca a maior parte do seu texto. Se você tivesse um artigo, seu texto estaria dentro daqui, se você tivesse uma legenda para uma imagem, então, se fosse longo, você provavelmente iria querer colocá-lo dentro de sua própria tag de parágrafo, coisas assim. Aqui dentro, você acabou de colocar texto. Este é um texto que estou digitando, vou salvá-lo, voltar, atualizar. Você pode ver aqui que não é ousado, não é itálico, não há nada de especial nisso. É apenas fonte básica padrão e isso é o que é parágrafo, então isso é ótimo. Vamos olhar para a tag âncora, algo que começar é realmente intuitivo, mas essencial para fazer sites. A etiqueta âncora, você pode pensar nela como ela está ancorando em outro lugar na Internet e ela está segurando lá e você começa a dizer para onde ele está se ligando. Quando você faz isso com um atributo chamado href e isso significa referência de hipertexto.This vai estar apontando para outro site. Vamos abrir cotações e você pode escolher qualquer site que quiser aqui. Eu vou escolher o Google e a coisa a lembrar é que você quer colocar no prefixo para todo o site, bem como, que significa que você vai querer ter o HTTP ou HTTPS. Nem todo site precisa dele, mas alguns fazem isso para ser seguro, sempre incluí-lo. Vamos dizer HTTPS://e em seguida, www.google.com e fechar a tag âncora. Você verá aqui que ele tem uma tag de fechamento como de costume e, em seguida precisamos realmente colocar no link que eles podem clicar. Como boa prática, você deseja informar seus usuários para onde você os está direcionando. Eu iria digitar no Google, salvar isso e atualizar minha página. Você pode ver que há algum estilo padrão para links. Ele muda seu ícone para uma mão e ele aparece como sublinhado e púrpura. Se eu clicar sobre isso, eu vou para o Google. Eu vou voltar e isso é uma boa prática, ele diz ao seu usuário exatamente para onde você está indo. Agora, você poderia facilmente digitar algo chamado Facebook e se recarregarmos, agora parece que este é um link para o Facebook, mas não é. Portanto, não quebre a confiança de seus usuários usando links ruins para levá-los para outro lugar. Isso é realmente má prática e todo mundo vai ficar muito chateado com isso e as pessoas não vão ficar por perto em seu site, basta ter isso em mente, que é sintaxe HTML básica. Há um pouco mais que vamos abordar no próximo vídeo com HTML avançado porque existem algumas tags que exigem mais atributos. Há algumas etiquetas que são um pouco estranhas que vamos cobrir e vamos fazer isso a seguir. Mas este é o básico, se você tem isso, você pode brincar e fazer um site básico. Você tem títulos, imagens, parágrafos e links, coisas que você precisa para começar em qualquer site que você deseja construir. O que vamos abordar a seguir é uma sintaxe HTML mais avançada, onde tags e atributos são um pouco mais confusos e definitivamente requer alguma explicação se você está apenas começando. 6. 2.3 - um pouco de novo: A primeira nova tag que eu quero apresentar a você é a tag lista, mas a tag lista não pode ir por si só e não é chamada lista. Em vez disso, há duas listas que você pode ter. Há uma lista ordenada que significa OL, estas são coisas onde eles precisam estar em ordem, e o estilo correspondente vai mostrar que eles são ordenados, vamos dar uma olhada no que isso significa. Primeiro, fechamos a tag e pressionamos “Enter”, agora o meu faz recuo automático, que é realmente fabuloso, se não, eu recomendaria recuar cerca de 3-5 espaços cada linha para que você saiba que esta é uma nova linha que é dentro desta etiqueta. Dentro desta tag, precisamos colocar itens da lista, coisas que precisam ir em ordem. Uma lista ordenada, como eu disse, para fazer isso, precisamos colocar em LI, que significa item de lista, e ele precisa estar dentro de um OL, UL ou um elemento de menu, agora, vamos apenas cobrir OL e UL. UL significa listas não ordenadas, que vamos fazer em seguida, item de lista, nós fechá-lo e agora precisamos colocar algum texto dentro dele. O que queremos colocar dentro de uma lista ordenada? Bem, você pode fazer o que quiser, eu vou subir aqui e eu vou adicionar um título que diz os melhores jogos de sempre, agora minha lista tem um título e é uma lista ordenada porque eu estou colocando-os em um ranking, eu vou dizer Zelda, Eu vou pressionar “Enter” e abrir outro LI, e então eu vou dizer Mario, eu vou adicionar mais um LI e depois Final Fantasy então salvá-lo. Vamos voltar ao nosso site, pressionar “F5" para recarregá-lo, rolar para baixo, agora você pode ver que eu tenho meu título, sabemos como usá-los, e temos nossa lista que realmente tem números ao lado de ele. Esse é o estilo padrão para listas ordenadas, e é por isso que é realmente importante certificar-se de que você usa OL e UL corretamente. UL vai ser apenas um ponto ao lado dele, o que nós vamos fazer agora. Vamos fazer outro título e vamos chamar isso de comida que eu gosto. Não precisa estar em ordem alguma, é apenas uma lista. Vamos dizer UL e, em seguida, abri-lo e precisamos colocar na lista itens, eu gosto de melancia, item da lista, eu gosto de pizza e outro item da lista, eu gosto de refrigerante. Vamos guardar isso, abrir. Você pode ver aqui que agora não importa a ordem em que eles estão, eu vou explodir isso para que possamos olhar para ele. Temos uma lista ordenada primeiro e depois temos uma lista não ordenada. Você vai querer usá-los como quiser, e claro, quando chegarmos ao CSS, você será capaz de mudar tudo isso com apenas algumas linhas de código. Agora estamos começando a entrar em tags mais avançadas, você pode ver que algumas tags você precisa ser aninhadas assim. Um item de lista sozinho fora de uma tag não vai fazer muito. Se colocarmos LI dentro daqui e dissermos: “Olá.” Bem, ele vai estar lá, mas vai aparecer como um item de lista não ordenado padrão, e parece muito estranho, e eu recomendaria que você nunca faça isso. Algumas tags precisam ser aninhadas, é assim que funcionam, e ao longo dessas linhas, vamos dar uma olhada em uma tag bastante importante que tem alguns atributos estranhos que não são intuitivos, eu vou mostrar a vocês como eles funcionam, mas são realmente essenciais para praticamente todos os sites se você quiser que as pessoas sejam capazes de interagir com você, e essa é a tag de formulário. Este tem um nome que faz sentido, é uma forma, abrimos isso, entramos em uma nova linha. Agora dentro daqui, nós podemos apenas digitar texto e ele vai aparecer assim; primeiro nome, salvar isso, nós vamos voltar. Bem, agora, o primeiro nome aparece no fundo. Agora, parece que não há nada de especial aqui, mas algo está acontecendo dentro desta seção. HTML, o site sabe que é um formulário, mais tarde, não neste curso, mas quando você quer aceitar a entrada do usuário usando PHP, C-sharp, JavaScript, outra coisa mais tarde para habilitar esse tipo de funcionalidade, seu site vai saber que este é o lugar onde eles vão aceitá-lo. A maneira que você pode fazer isso visualmente é usando outra tag chamada input. A entrada é como você obtém a entrada do usuário, isso vai criar uma caixa que eles podem digitar. Agora existem alguns atributos que são muito importantes para a entrada, vamos dizer que um deles é o tipo. O tipo que queremos vai ser texto, eu vou clicar nisso e ele digita texto para mim, o que é ótimo. Agora, precisamos dar um nome também, esta caixa de formulário que eles podem digitar, vamos dar um nome e vamos chamá-lo Primeiro Nome. Eu vou colocar em outra tag chamada tag break, que é BR, que não tem uma tag de fechamento porque tudo o que ele faz é Inserir uma quebra, basicamente uma nova linha, basicamente algum espaço entre os seus elementos aqui então que há espaço entre um elemento e outro. Se entrarmos aqui, abrimos isto, agora podemos ver que há um lugar para escrevermos, posso escrever o meu nome. Se você começar a digitar algo que você digitou em quatro, preenchimento automático do seu navegador pode aparecer e ser muito útil, e essa é uma caixa de formulário. Vamos em frente e adicionar um pouco mais e realmente fazer como um formulário bonito, digamos que este era um formulário que em seu site as pessoas poderiam preencher para se juntar a uma lista de e-mail. Uma das coisas que você vai querer seria um e-mail, vamos colocar em e-mail e então nós precisamos digitar a entrada, fazer outra tag. Desta vez vai ser uma tag de e-mail e o nome vai ser e-mail, colocar outra quebra lá, caso contrário, todos esses elementos vão ser muito próximos e nós não queremos isso. Mais um que podemos ter dentro daqui é um botão de rádio. Um botão de opção são aqueles pequenos círculos em que você pode clicar para ter diferentes opções. Deixe-me mostrar-lhe o que é para que você possa entender. Vamos fazer uma nova tag de entrada, desta vez vamos dar-lhe um tipo de rádio. Aqui o nome vai ser, digamos que em vez de uma lista de e-mail, eles estavam pedindo uma camisa ou algum tipo de item wearable que tem um tamanho, vamos dizer nome é igual ao tamanho. Precisamos dar um valor, porque esse valor vai aparecer ao lado do botão. O valor aqui será pequeno. Uma propriedade que podemos definir que não requer colocar em nosso próprio texto é chamado Verificado, podemos dizer que este botão vai começar verificado, vamos colocar pequeno apenas como um texto ao lado deste. No final da nossa tag de entrada, adicione pequeno, não dentro dela, então podemos voltar e podemos olhar e ver que o botão de entrada, o botão de rádio, está bem ali e diz pequeno bem ao lado dele. Podemos adicionar mais alguns, se eu copiar isso, eu poderia colá-lo. Agora podemos alterar o valor para dizer médio, livrar-se deste ícone marcado e alterar o texto para médio, salvá-lo, recarregar e agora temos duas opções. Botões de opção são coisas que só podem ser clicadas, apenas um deles pode ser selecionado, que pode ser muito útil quando eles só podem escolher um, você também tem coisas como caixas de seleção e menus suspensos, que nós estamos não vai cobrir todos eles porque há apenas muito, mas no final deste curso, eu vou encaminhá-lo para alguns realmente grandes recursos que vão agir como um índice ou galeria que você pode apenas pesquisar se você sempre quis para fazer uma caixa de seleção em vez de um botão de opção. Ele terá documentação, exemplos, código, tudo porque eu não quero tentar cobrir cada tag que você poderia fazer. Levaria muito tempo e, na minha opinião, seria inútil porque apesar de eu ter desenhado sites há anos, eu ainda uso esses recursos para procurar como fazer as coisas, eu não tenho tudo memorizado e eu não espero que você memorize qualquer coisa também. Bem, não nada, mas não tudo. Há algumas coisas que você definitivamente vai querer ter em mente porque nós as usamos com tanta frequência, mas outras coisas, você pode não precisar delas o tempo todo, e isso é totalmente bom. Essas são algumas das etiquetas mais complicadas, como eu disse, há muito mais, mas para o que eu quero cobrir, isso é suficiente. Este é um HTML básico que permite que você cubra seu site com informações, imagens, coisas assim, tudo isso é realmente útil. Está em sites, por toda a internet, provavelmente em todos os sites, exceto talvez nas listas, porque são um pouco mais de item de nicho, mas estão por todo o lado. Isso é o que você precisa para começar, e isso é tudo que eu queria cobrir. A última coisa para HTML, porém, vai ser a estrutura necessária, que eu mencionei quando começamos a seção HTML. Agora eu quero cobrir no próximo vídeo porque você precisa dele se você realmente vai colocar seu site on-line, se você não tem ele, você vai estar em um monte de problemas. Sim, acho que é uma boa razão para ter certeza que você colocou lá. No próximo vídeo, vamos cobrir a estrutura necessária que você tem que ter dentro de seu documento HTML. 7. 2.4: Agora precisamos abordar a estrutura necessária para que seu site tenha para que seu navegador ou qualquer navegador interprete corretamente como um site. A informação que vamos abordar realmente não vai alterar a aparência ou a sensação do seu site. Nós vamos incluir um título para sua página que irá, e isso é realmente importante, mas muitas dessas informações não são para o design. Em vez disso, é para o navegador, é para o mecanismo de busca, é para a meta informação que as coisas precisam saber sobre sua página, mas a página em si não vai mudar. Dito isso, ainda é muito importante. Se você não tiver isso, seu site não funcionará corretamente. Pode nem funcionar porque seu navegador não vai saber que tipo de arquivo é esse. Na parte superior, vamos pressionar Enter algumas vezes e nos dar algum espaço para trabalhar. A primeira coisa que você tem que colocar lá é o tipo de documento que ele é, e é claro que isso é feito dentro de tags. Abra um novo e um colchete esquerdo fazer ponto de exclamação, DOCTYPE todas as maiúsculas. Então precisamos dizer que ele vai ser um tipo de documento HTML e, em seguida, fechar a tag. Isso precisa ser a primeira coisa em cada página que você tem. Isso é essencial. Se você não tiver isso, seu navegador não saberá que é um site e não saberá o que fazer. Bem, talvez não saiba. Alguns podem ser capazes de descobrir, mas se você não tem, você vai ter problemas, então certifique-se de que ele está lá. A próxima coisa vai ser a raiz do seu site. Essa é, na verdade, a tag HTML em si. HTML, feche isso. Agora, isso precisa ir no fundo, porque tudo dentro de nosso site precisa ser incluído dentro do HTML. Vou cortar isso, rolar até o fundo, e colá-lo aqui. Agora, tudo o que fizemos está entre essas tags HTML, o que é essencial porque todo o código agora dentro dessas tags é HTML. A próxima coisa é cabeça. Então vamos abrir isso e digitar cabeça. Isso não tem tag aberta e de fechamento. Vamos pressionar Enter porque vamos colocar um pouco de informação dentro daqui. A primeira coisa que queremos colocar como o título, então o título que queremos usar vai ser o título da nossa página web. Digitaremos o título e colocaremos o que quiser aqui dentro. Vou salvar meu primeiro site. Salve isso, entre em nossa página web. Então você pode ver que a guia agora tem o título que queremos. É assim que você altera o título, e você pode ter um título diferente para cada página que seu site tem, embora você provavelmente queira mantê-lo consistente. Se você tem um site chamado Facebook, então você pode querer manter o Facebook como o título principal para tudo. Mas, em seguida, se eles são como no Messenger, você poderia fazer como uma barra ou um traço e dizer Messenger, então seria Facebook traço messenger enquanto você está no Messenger. Você começa a idéia, mas mantenha o título consistente e fácil de ler porque isso é realmente importante para a usabilidade. Há mais informações que podemos colocar aqui dentro. Existem meta tags, podemos realmente digitar meta. Isto é coisas como palavras-chave e informações do navegador. Nós não vamos cobrir isso agora porque não é essencial e eu quero mantê-lo nu ossos. Mas isso é algo que eu encorajo você a olhar para cima, e certifique-se de que você entende para quando você publicar seu site. Coisas como otimização do mecanismo de busca, eles vão usar palavras-chave e frases-chave, e você coloca essa informação dentro da meta tag, dentro da tag principal. Incrível. A última coisa é, na verdade, o corpo. Vamos abrir esta etiqueta, digitar o corpo, fechá-la. Então precisamos pegar essa etiqueta de fechamento, cortá-la, e colocá-lo todo o caminho abaixo antes de HTML, e então nosso site é para todos os fins intensivos, completo. Agora temos toda a estrutura necessária para tornar nosso site legível para navegadores da web e exibível em todos os dispositivos. Agora, se abrirmos isto, refresque-o. Nada vai ter mudado. Nada vai parecer diferente. Mas agora seu navegador será capaz de lê-lo corretamente e você não terá problemas em mostrá-lo em todo o lugar. Isso é muito importante. Isso é HTML em poucas palavras. Agora você sabe como usá-lo, o que fazer com ele. A próxima coisa que vamos abordar é como projetá-lo, que vai ser o nosso CSS. Você vai se tornar um mestre em fazer seu site parecer do jeito que você quer, exatamente do jeito que você quer. Vai estar em conformidade com todas as suas vitórias. Vamos cobrir isso a seguir. 8. 3.1 - que é CSS?: Agora, é hora de entrar em CSS. CSS significa folhas de estilo em cascata. cascata é uma maneira de descrever como eles funcionam e como eles se parecem. Porque como a sintaxe básica é que você dá a ele um tipo, ou uma tag, ou um ID, ou uma classe ou algo para segmentar e, em seguida você diz a ele para mudar muitos atributos sobre ele. Vamos aprofundar estes mais tarde. Mas eu quero apenas tirar um momento para falar sobre o que é CSS e como ele é diferente do HTML. A diferença provavelmente se destaca imediatamente. Não há marcas aqui dentro. Você está segmentando tags, mas você não vê nenhum colchetes angulares aqui. Você não está dando uma etiqueta P e preenchendo com texto. CSS é apenas para styling. Agora, CSS pode percorrer um longo caminho nesse estilo. Há realmente um sistema de grade que você pode implementar, que está muito além do escopo desta classe, para como seu conteúdo deve ser colocado para fora tanto em dispositivos grandes quanto em dispositivos móveis. Há animações que você pode fazer, que no final desta seção, eu vou mostrar algumas animações CSS realmente legais que estão lá fora na natureza, apenas para despertar sua imaginação. CSS pode fazer muito, mas sua principal função é pegar o HTML que você codificou em layout e projetá-lo de uma maneira específica. Você pode mudar coisas como cores, rotação, backgrounds, animação. Realmente qualquer coisa que você possa pensar, CSS pode direcioná-lo, alterá-lo, e torná-lo exatamente do jeito que você quiser. Agora, não é fácil quando eu digo que você pode torná-lo do jeito que quiser, é verdade, mas pode ser complicado às vezes porque há configurações padrão que tags HTML têm. Como se algumas etiquetas fossem supostamente ocupar uma linha inteira, outras não. Quando você muda essa propriedade, coisas estranhas podem acontecer e requer muita confusão, mas você pode fazer isso. Eu garanto que você pode fazer seu site olhar exatamente como você deseja. Só vai precisar de prática e paciência. Mas essa é a diferença entre CSS e HTML. Para um, eles têm nomes diferentes. Para dois, um deles é uma linguagem baseada em tags e um deles é mais uma linguagem de design em cascata. Então eles vão em conjunto. Você os usa juntos porque CSS sem HTML, bem, não há muito que você possa fazer isso um pouco, mas você realmente não pode fazer muito. HTML sem CSS. Sim, claro, está lá. É informativo, eu acho, mas ninguém quer olhar para ele por muito tempo. Eles precisam ir juntos e quando o fazem, eles são perfeitos. O que vamos fazer primeiro no próximo vídeo é começar a segmentar tags como você pode ver aqui e eu vou mostrar a vocês como podemos alterar alguns atributos de tags específicas para fazê-los olhar e fazer o que quisermos. 9. 3.2 - Styling tags de HTML: Como eu disse, CSS sem HTML não é tão útil. Isso significa que vamos precisar de HTML e em vez de codificar outro site, vou pegar o que fizemos da última vez. Se você quiser ir em frente e escrever um pouco mais de HTML, eu encorajo-o a praticar isso o máximo que puder e depois voltar quando estiver pronto com isso. Dito isso, eu não vou, eu só vou pegar exatamente o que fizemos. Vou copiar isso, colar dentro daqui. Então, em Mina, vou abrir essa pasta porque é assim que funciona. Aí está o meu código HTML. Agora, um arquivo CSS tem uma extensão of.css. Se você tem um TextPad, você cria um arquivo lá. Se você estiver usando algum software, faça-o do jeito que quiser. Aqui, vou clicar em Novo arquivo. O nome tradicional é site.css. Agora, os nomes CSS podem variar muito. Você pode chamá-lo de estilo, estilos, você pode ter uma página CSS para cada página do seu site, que se for grande, eu não recomendaria, menor seria bom. Mas tradicionalmente é chamado site.css. Agora, a primeira coisa que temos que fazer é realmente vincular nosso CSS ao nosso HTML. Onde fazemos isso é dentro da cabeça. Agora isto vai ser um elo. Agora analisamos isso muito brevemente. Nós realmente não conversamos sobre isso, mas agora vamos usar esta etiqueta. Vamos criar um link para a nossa página CSS. Felizmente, nossa página CSS é realmente apenas aqui, então vincular a ela vai ser bastante fácil. Se você tê-lo em uma pasta ou um par de pastas para fora, então você precisa usar alguns pontos, pontos e uma barra. O que parece é algo assim e dentro do que vou mostrar em um segundo, isso significa uma pasta para cima. Se você precisa subir em uma pasta, é assim que você faz. Caso contrário, você deve ser capaz de fazê-lo assim. Há um par de atributos para link. O primeiro é rel. Isso significa a relação. A relação para este link vai ser stylesheet, porque há muitas coisas que você pode vincular. O tipo vai ser especificamente text/css, porque esse é o arquivo que vamos usar aqui. Então usamos href. Novamente, vimos isso na tag âncora e damos o nome do nosso arquivo CSS, então o nosso é chamado site.css, então nós fechamos isso e salvamos. Então estamos prontos para ir. Vou abrir isso e garantir que temos o mesmo site, tudo parece o mesmo. Incrível. Agora, o que vamos fazer é em nossa página CSS, vamos direcionar primeiro as tags incorporadas que temos. Isso porque esses são os mais fáceis de entender e mostrar. Se olharmos para a estrutura, uma das etiquetas que temos é na verdade a tag body. Este body tag encapsula tudo. Se você quiser alterar o plano de fundo do seu site, a maneira como você faz isso é direcionando o corpo. Tudo o que temos que fazer é digitar o nome do corpo da etiqueta e então precisamos fazer o que eu chamo de chaves. Isso vai ser turno, e isso vai ser à direita da letra P, vai ser uma chave aberta e às vezes vai completar. Se ele não for concluído, então faça o deslocamento e o próximo sobre e ele fará um aberto e fechado colchetes. Estes você vê o tempo todo na programação. Para CSS, todo o estilo que vamos mudar para o corpo está agora entre esses dois colchetes. Para usar CSS, abrimos assim e então é assim que a sintaxe se parece. Você coloca no estilo, o atributo que você quer estilizar. Neste caso, vamos mudar a cor. Vamos dizer cor de fundo, então usamos para fazer dois pontos, que é deslocar para a direita do L, dois pontos e, em seguida, dar-lhe uma cor. Eu vou dizer apenas leia. Agora você também pode ver aqui que ele tem o valor x dessa cor e código VS e muitos outros editores. Você também pode escolher entre cores RGB. Se eu segurar isso, posso mudá-lo. Agora eu posso ir também, mas você pode. No final de um atributo de uma propriedade, você coloca um ponto-e-vírgula. A mesma coisa, mas sem turno. É assim que se estiliza. Esse é o estilo padrão. Vou guardar isto e abrimos o nosso website. Meu CSS foi aplicado automaticamente e um vermelho muito brilhante foi aplicado a toda esta página. Agora, os elementos formados não são vermelhos porque eles já têm um estilo específico ligado a eles. Mas todo o resto agora está vermelho. Agora que vermelho é muito brilhante. No código VS, eu posso passar o mouse sobre a cor e então eu posso alterá-la. Eu vou trazê-lo para baixo para um vermelho muito mais escuro, salve-o. Lá vamos nós. Isso é um pouco mais fácil para os olhos, eu acho. É assim que se escolhe uma etiqueta. Agora, nós olhamos para um monte de etiquetas dentro daqui. Qualquer uma dessas etiquetas está disponível. Mas a coisa a lembrar é que todos eles serão alterados, então h_3, temos algumas dessas tags dentro daqui. Vamos entrar e mudar uma dessas tags h_3; h_3, abra e feche os colchetes. Nós não queremos mudar a cor de fundo, porque ela tem uma cor de fundo, mas em vez disso, vamos mudar a cor da fonte. Para fazer isso, não é cor da fonte, é realmente apenas cor, então cor e vamos mudar isso para branco. Eu vou salvá-lo. Agora cada título é branco, cada título três. É muito importante lembrar. Porque se você alterar uma tag, quando você usar essa tag em qualquer um de seus sites que esteja usando essa página CSS, todos eles serão alterados. Às vezes isso é bom. Você pode querer que todos os seus títulos tenham branco como cor primária. Se for esse o caso, pode fazer algo com vírgulas. Aqui dentro, podemos adicionar uma vírgula e então podemos aplicar este estilo a outra coisa. Se eu disse h_1, h_2, h_4, h_5 e h_6, salve isso. Agora você pode ver que todos os meus títulos têm branco, o que é ótimo. Mas se por algum motivo não quisermos que um desses títulos tenha branco, não há como mudar isso porque aplicamos isso a cada título em cada página em todo o nosso site. Isso é muito importante lembrar. Por enquanto, vamos manter a mesma coisa. Mostrarei como mudar isso nos próximos vídeos quando segmentarmos tags e elementos mais específicos. Temos etiquetas aqui. Mudamos a cor de fundo e a cor, coisas que você provavelmente vai fazer o tempo todo para se ajustar ao tema de cores que você escolher para o seu site. Mas CSS pode mudar muito mais do que apenas, eu acho, o estilo de um elemento. Ele pode mudar a forma como um elemento realmente se comporta na página também. Se formos e olharmos para isso, você pode ver que cada um desses títulos, e mesmo assim como este parágrafo, há toneladas de espaço aqui à direita. Não há razão para eles não estarem aqui, exceto que o estilo embutido diz o parágrafo, o link, todas essas coisas que estão em sua própria linha. Eles ocupam uma seção inteira. Podemos ver isso se entrarmos e mudarmos algo sobre nossas rubricas. Podemos mudar o que é chamado text-align e fazer dois pontos e depois dizemos centro, colocar um ponto-e-vírgula no final. Essa pontuação é muito importante. Se entrarmos, você pode ver agora que eles estão centrados ao longo de toda a página. Isso é porque eles estão, em essência, indo da esquerda para a direita e ocupando toda a seção. Isto parece mais uma ferramenta de cabeçalho. Acho que faz muito mais sentido tê-las centradas. Isso é legal. Mas e se não quiséssemos que eles ocupassem toda a página e quiséssemos que estivessem mais alinhados? Bem, isso vem em jogo com algo chamado display. A primeira coisa que vamos fazer é digitar display e, em seguida, dois pontos. Agora, há muitas opções. Essas opções são confusas quando você está começando. Se você quiser apenas estilo e não mudar a funcionalidade real das tags, então eu não iria mexer com a tela, mas eventualmente você vai precisar, então mantenha isso na parte de trás da sua mente. A exibição é como os elementos são alinhados na página. Existem elementos que são elementos de bloco. Elementos de bloco são, bem, eles são blocos. Eles ocupam uma seção inteira, geralmente uma linha inteira da página. É assim que funcionam. Existem elementos que são bloco inline. Esses elementos ocupam um bloco, mas não ocupam a página inteira. Agora você pode ver que todos os nossos títulos, bem, eles ocupam uma certa quantidade de espaço e então eles não ocupam mais do que o que eles precisam. Isso faz sentido. Você tem isso. Isso significa que nossa imagem pode estar lá também, o que é legal. Agora, há algumas outras opções também. Alguns deles gostam de inline-flex. Eu não me preocuparia por enquanto. Tabelas Flexbox, coisas assim. Isso tem a ver com a grade CSS, que é realmente poderosa. Mas novamente, eu não quero falar sobre isso agora porque essa é uma estrutura inteira que CSS vem construindo nos últimos dois anos, que uma vez que você se torna mais avançado, definitivamente olhar para que uma vez que você se torna mais avançado, , mas por enquanto, nós podemos fazer bloco, nós podemos fazer inline-block, nós também poderíamos fazer nenhum, então basicamente desaparece completamente. Agora ele se foi. Você também pode fazer herdar, que é confuso se é o único que você está herdando, você pode pensar que há uma hierarquia aqui e é aí que a parte em cascata entra. Porque se eu dissesse que a Rubrica 2 herda da Rubrica 1 , tudo o que faço à Rubrica 1 herdaria da Rubrica 2. Mas essa herança está um pouco mais além do que eu quero cobrir agora, mas eu queria mostrá-la para você porque eu acho que isso é realmente importante. A última tag exibida que eu quero mostrar a vocês é apenas chamada inline. Aqui inline vai fazer exatamente a mesma coisa que fizemos antes, mas agora nem vai ser um elemento de bloco. Olhando para ele, ele não pode parecer o mesmo, mas ele tem propriedades de exibição diferentes. Estas propriedades de exibição, são como você está realmente indo para alinhar elementos aqui, então se quiséssemos dividir nossa página como em duas linhas, então nós precisaríamos mudar nossos títulos de nível de bloco para qualquer bloco inline ou inline block, Caso contrário, não seríamos capazes de ter nada lado a lado. Display é realmente poderoso e pode ficar confuso muito rápido, então tenha isso em mente e brinque com ele. Mas não fique frustrado porque pode ser difícil executar exatamente do jeito que você quer. Mas também há tons e tons de outras propriedades. Vou tentar cobrir alguns aqui, fogo rápido, mas saiba que há tantas propriedades CSS e maneiras de usá-lo que não posso cobri-los todos. Mas novamente, vou mostrar-lhe alguns recursos no final deste curso que são realmente fantásticos, especialmente para CSS, porque existem realmente ótimos sites dedicados a usar CSS e é realmente fantástico e muito útil. Encorajo-o a verificar. Vamos fazer um pouco de fogo rápido. Vamos falar sobre estofamento. Vamos fazer h1 e vamos fazer uma cor de fundo sobre isso e vamos mudar isso para azul. Vamos abrir isso. Agora temos uma cor de fundo azul brilhante para o nosso cabeçalho. Você pode ver o que eu estou falando, o que aquele display todo o caminho da esquerda para a direita. Agora, duas propriedades importantes são preenchimento e margem. preenchimento é o espaço dentro desta cor de fundo. Se entrarmos e mudarmos o preenchimento, podemos mudar o preenchimento com pixels, então vamos dar 50 pixels, então dizemos 50px. Vou guardar isso, e depois tenho de mudar este azul. Até está machucando meus olhos. Vamos trazê-lo para baixo. Você pode ver que agora todo o espaço dentro desse cabeçalho, que é o preenchimento que está associado com esse elemento. Cada elemento tem uma quantidade de espaço em torno dele, margem e preenchimento. O preenchimento está dentro desse elemento, então há quatro elementos para preenchimento. Você pode fazer preenchimento, esquerda, superior, direita e inferior, e cada um que você pode controlar individualmente ou você pode simplesmente configurá-los todos como fizemos antes. Se quiséssemos que o fundo do preenchimento fosse de 50 pixels, poderíamos fazer isso e isso é exatamente o que ficaria bem ali. Agora vamos nos livrar do preenchimento e ir para a margem. Assim como o preenchimento, há parte superior esquerda, direita e inferior ao redor dos elementos, mas a margem é o espaço em torno do elemento real em relação aos outros. Se eu entrar e disse margem, 50 pixels, você pode ver que a cor de fundo não se expandiu, mas o espaço em torno desses elementos e sua relação o topo da página é agora muito espaço em torno dele. A margem é que o espaço que não fica ocupado pela cor de fundo lá e mesmo nessas bordas você pode ver que não está perto, tão perto como era antes. Margem, estofamento, duas coisas muito importantes para se falar. Agora, outro, vamos descer e ir para a imagem. Coisas que você pode ajustar são a largura e altura, e isso não é apenas com imagens, mas isso vai ser o mais fácil de ver aqui. Se eu disse largura 25 por cento, nossa imagem agora está ocupando cerca de 25% da nossa tela. Você pode ver isso se eu entrar no índice e eu copiar esta imagem, e eu colá-la mais três vezes. Você pode ver agora que ele ocupa cerca de 25 por cento. Há alguma exibição e algum preenchimento no próprio corpo. Você pode ver que mesmo com os elementos de fundo de nossa direção, há algum espaço à esquerda e à direita, então não podemos fazer 25% até o fim. Mas você tem a idéia de que agora esta imagem ocupa 25% de nossa página. Você pode alterar isso com a porcentagem ou se você tiver uma altura específica que você deseja que ela seja, você pode fazer isso em pixels. Se quiséssemos que nossa imagem tivesse 250 pixels de largura, poderíamos fazer isso aqui mesmo. Se quiséssemos que fosse 1000 pixels de altura, poderíamos fazer isso também. Obviamente distorce a imagem, não é muito bonito, mas você pode fazer isso, então você tem controle total sobre como isso parece. Vamos entrar e eu vou adicionar uma largura de 50%, então isso torna muito grande e uma coisa muito legal que você pode adicionar aqui dentro, CSS pode fazer, como eu disse, sobre qualquer coisa que você quiser. Um deles quando se trata de imagens é o raio da borda, então você pode adicionar, eu tenho um efeito de arredondamento para ele, que eu acho que parece muito bom. Parece muito bom em um monte de diferentes sites de recurso moderno de apenas arredondar todas as suas imagens. Pode fazer isso se quiser. Isso é legal de se ter. De lá, eu poderia continuar indo e indo, como eu disse. Mas este é o básico disso. Se você estiver usando um IDE, o que eu espero que você esteja ao aprender CSS porque ele realmente ajuda. Tudo o que você tem a fazer é digitar uma letra, então se eu digitei em um, eu poderia ver todos os CSS que começam com a. Todas essas propriedades que eu posso olhar bem ali. Se eu quisesse olhar para ele, a mesma coisa. Coisas como o tamanho da fonte, você pode mudar isso, é claro, possamos mudar esse tamanho de fonte de cada cabeçalho para 50 pixels, então eles não parecem muito diferentes, mas eles ainda são, então há isso. Eu encorajo você a brincar, ver o que você pode encontrar quando se trata de CSS, e ver o que você pode descobrir, há toneladas de coisas que você pode fazer. A próxima coisa que vamos cobrir, e então eles estão falando mais sobre estilos porque podemos fazer isso para sempre. Vamos falar sobre como segmentar elementos específicos, um de cada vez e em grupos. 10. 3.3 IDs e cursos: Agora que você sabe como segmentar tags, você pode fazer muito. Há muita coisa que você pode mudar, mas às vezes você não quer mudar muito. Às vezes você só quer mudar um pouco. É aí que as identidades e as aulas entram em jogo. Ambos são atributos que você pode aplicar a qualquer tag HTML. Vamos entrar neste parágrafo aqui, e dentro da tag de parágrafo, abri-lo com um espaço, e vamos colocar ID, e vamos pressionar “Enter”. Aqui podemos digitar um nome. Este nome pode ser qualquer coisa que você quiser, mas eu encorajo-o a fazer sentido. Se é apenas uma série de letras e números, sim, vai funcionar mas para ter boas práticas de codificação, você quer torná-lo um nome significativo. Isso seria como o parágrafo de introdução. Eu também encorajo você a usar a convenção de nomenclatura CSS, que é separação por um traço e realmente nenhuma capitalização. Vou guardar isso. Agora temos uma tag ID associada a este parágrafo. Isso não faz nada por si só. Aqui está o texto, mas ele nos permite entrar e alterar manualmente esta tag em relação a tudo o resto. Para mostrar que isso é verdade, vamos adicionar uma segunda tag muito rápido. Eu vou colocar, eu sou mais texto. Agora temos dois textos, dois parágrafos, e só vamos atingir um deles. Eu vou entrar no site, para o CSS, e eu vou dizer símbolo libra ou hashtag, que é como você alvo IDs. Então símbolo libra e, em seguida, colocar no nome que você colocou lá. Parágrafo de introdução, abra e feche como normalmente fazemos, e então vamos dar outra cor. Digamos que a cor é igual ao roxo. Vamos abrir isso. Agora essa cor é roxa. Só estamos mirando essa cor. Agora, você mal pode ler isso então, em vez disso, eu acho que o que vamos fazer é mudar a cor de fundo para roxo. Ou vamos mudar para aqua, que é uma cor melhor. Você pode dizer que este é um elemento de nível de bloco, e agora tem um fundo de aqua, e este não. Isso é uma identificação. IDs que você usa somente em um elemento. Então, se eu quisesse entrar e mudar este parágrafo para algo, eu não entraria e diria, parágrafo de introdução. Agora, vai funcionar, mas é muito, muito mau treino. IDs em si mesmos devem ser para apenas um elemento e é isso, nada mais. Mas se você quiser mais de um elemento, o que você vai na maior parte do tempo, você vai querer usar uma classe. Isso é o que vamos fazer agora. Vamos entrar e digamos que esta lista ordenada tinha uma aula. Vamos dizer classe, abri-la e dar-lhe um nome. Vamos dar-lhe um nome da lista. Nós vamos descer aqui para a UL e vamos dizer, classe igual lista também. Porque as classes podem estar em quantos elementos quiser. Na verdade, você pode combinar estes e ter muitos, muitos que você quer. Vamos adicionar um segundo aqui só para mostrar que podemos ter várias classes. Eu vou dizer, fundo legal. Esta lista ordenada tem uma classe de lista e fundo legal. Este aqui em baixo só tem uma lista. Agora, para acessar a lista, você faz um ponto. Eu vou dizer, lista. Então esse é o primeiro. Então eu vou fazer período.cool-background, ele vai mudar cada um destes por sua vez. A primeira é a nossa lista. Vamos avançar e aumentar o tamanho da fonte para 25 pixels. Então podemos dar uma olhada nas listas, e elas são muito maiores em tamanho de fonte. Isso é ótimo. Agora, e o fundo legal? Bem, esta é uma lista para que possa ser aplicada a vários elementos, e podemos ter algo específico. Então vamos mudar a cor de fundo para água-marinha. É um nome legal. vírgula no final disso. Agora que um tem o fundo, e você também pode ver que ele é um elemento de nível de bloco. Quando você começa a construir sites maiores, o que você vai querer fazer é compartimentar suas aulas e os efeitos que elas têm. Isso é avançado, mas eu quero falar sobre isso porque se você começar a fazer seu CSS assim, então você estará muito melhor do que tentar mudá-lo mais tarde. Dentro do nosso site, se tivéssemos vários elementos que queríamos ser de um elemento de fundo legal, mas eles também têm outras coisas como, eles eram fontes grandes, mas nós não queríamos que todos eles fossem assim. Então o que queremos fazer é fazer uma classe como fundo legal, e ele ajusta apenas a cor de fundo. Então nós temos essa classe de fundo que podemos ir e nós podemos realmente aplicar a tudo. Se esse elemento, a tag âncora, queríamos que fosse um fundo legal, então poderíamos fazer isso. Você pode ver que não é uma tag em nível de bloco, mas agora tem esse fundo legal. Se quisermos que seja uma fonte maior, em vez de mudar a classe de fundo legal para ter uma fonte grande, poderíamos apenas adicionar essa classe de lista porque agora ele está apenas aumentando o tamanho da fonte, e então ele tem uma fonte grande. Você não precisa fazer uma classe para cada estilo único que você está aplicando, mas pode ser muito útil colocar certos estilos em uma classe e, em seguida, aplicar várias classes aos seus elementos. Isso é apenas algo para ter em mente. Se você pode aprender a fazer seu CSS assim, eu acho que você vai ficar muito melhor na estrada porque é mais fácil de gerenciar, mais fácil de editar, e é muito mais fácil de ler também se você tem nomes descritivos em suas aulas. Mas é assim que você pode segmentar elementos específicos com IDs e elementos gerais, mas não toda a tag com classes. Classes e etiquetas, vais encontrar-te a usar o tempo todo em todos os lugares. Certifique-se de lembrar como acessá-los com a hashtag e o período, e então você estará pronto para ir. A última coisa que eu quero mostrar é apenas algumas animações de toda a web que usam CSS e algumas das coisas realmente legais que você pode fazer para inspirá-lo a sair e aprendê-las. Porque uma vez que você sabe o básico do CSS, como você faz, você pode ir lá fora e copiar o CSS de alguém, e dissecá-lo, e lê-lo, e descobrir exatamente como ele funciona, e depois jogá-lo em seu site. Essa é uma das coisas realmente legais sobre a Internet é que há tantas coisas legais lá fora que as pessoas estão prontas para apenas compartilhar e dar a você, e tudo que você precisa fazer é aprender como elas funcionam para ser capaz de colocá-las em seu próprio site. Vamos ver alguns deles a seguir. 11. 3.4 - Alguns artigos de CS!: Tudo bem, essas são algumas coisas que foram feitas com CSS puro. A maioria deles está dentro daqui, o Codepen.io, que se você começar a procurar perguntas e exemplos, você provavelmente acabaria aqui. É uma coisa muito, muito legal que permite que as pessoas simplesmente coloquem seu código para fora e você pode ver em exemplos e você pode copiá-lo. Agora todos os exemplos que vou mostrar estão com HTML e CSS, não há JavaScript, não há mais nada. Alguns dos CSS são extensos, como este tem mais de 1.000 linhas, mas você pode copiá-lo e colá-lo e tê-lo funcionando em seu site apenas fazendo isso. Este é o CSS Vingadores, muito legal, o Hulk rosna e a tela treme. É muito, muito legal. Então você tem um muito legal animações assinatura. Se eu clicar neste botão Replay, ele desenha essa assinatura, o que é muito legal. Você tem o dinossauro Chrome sendo animado correndo por aí. Isso é muito legal. Você tem um robô ambulante que está se movendo em torno do eixo z. Isso é muito legal, tudo feito com CSS. Você tem um personagem animado completamente feito com CSS. Aqui está uma animação de carregamento que parece muito legal. Então aqui está um aplicativo de terceiros para o Google agora. Tudo isso é feito com CSS, apenas animações, quadro-chave, coisas assim. Coisas que você pode aprender agora que você sabe o básico de CSS, você pode definitivamente fazer isso. Fazer do zero, isso é muito mais difícil. Mesmo eu tenho um tempo realmente difícil fazer animações porque eu não sou um especialista neles. Mas o que eu posso fazer é Controle A, Controle C, colocá-lo no meu projeto se eu amá-lo e você também pode. Você só tem que copiar o HTML e então você pode dissecá-lo e descobrir exatamente como ele funciona. Isso é um CSS muito legal. Espero que isso inspire você e mostre o poder do que CSS pode fazer. É uma linguagem de estilo, mas também faz mais do que isso. Há tanta coisa que o CSS pode fazer, é vasto, é amplo. Não se intimide, seja desafiado e encorajado, porque você pode aprender isso, você pode fazê-lo e você pode colocá-lo em seu próprio site sem ter que fazê-lo do zero, porque há tanta coisa lá fora que você pode simplesmente encontrar. O que eu quero fazer na próxima seção é dar-lhe alguns recursos para aprender CSS e HTML além do que eu mostrei e desafiá-lo para o projeto para este curso de fazer o seu primeiro site. 12. 4.1 - Grandes recursos online: Vamos falar sobre alguns dos recursos que você vai querer usar ao criar seus sites e apenas em geral para pesquisa. O principal que eu vou recomendar a vocês é W3schools.com. Este é um site que eu usei inúmeras vezes como uma referência e como um go-to para aprender a fazer certas coisas. W3schools.com ensina toneladas de coisas diferentes, mas eles também têm amplo conhecimento sobre HTML e CSS. O mais legal sobre isso é que tudo o que eles falam tem um botão “Experimente”. Você pode clicar nele, abri-lo, e você pode realmente mudar o código aqui para ver exatamente o que mudaria por aqui. É muito legal, é interativo, é minucioso, e é completamente gratuito. Você pode ir e aprender HTML, CSS, e então você pode passar e aprender muito mais se você quiser. Definitivamente confira. A próxima é a Academia de Código. Eles têm muitas aulas para você fazer. Se você quer algo mais aprofundado em CSS, que eu recomendo porque isso só deveria lhe dar um pequeno gostinho do que você pode fazer, então você pode entrar e você pode fazer seu curso livre aqui. Agora você vai aprender CSS, as mesmas coisas que estávamos aprendendo muito mais em profundidade e é realmente útil. É realmente ótimo. Outro CSS que é um pouco mais avançado é CSS-truques. Aqui eles têm um lugar onde publicam artigos. Você pode se juntar à comunidade deles, você pode olhar para as perguntas que as pessoas fizeram, e é muito útil se você está procurando como fazer algo que talvez muitas outras pessoas tenham feito. Lá você vai ter exemplos que você pode ver, brincar com o código, todas essas coisas. É realmente ótimo, muito útil. Este é definitivamente mais avançado. Se você gostaria de ler ou você pode ler muito, CSS-truques é realmente grande e tem algumas coisas realmente impressionantes. Há toneladas e toneladas de mais coisas que você pode usar também para aprender. Mas isto é o que eu recomendaria. O último que eu recomendo é quando você procura por algo, o que você vai fazer é formular sua pergunta o mais específica possível. Se estivéssemos tentando alinhar nossa imagem e soubéssemos que queríamos que ela fosse alinhada de uma certa maneira, gostaríamos de dizer a linguagem que estamos usando, então “CSS alinha imagem à direita”. O que você vai estar procurando, bem, aqui está um bom site CSS-truques. Mas outro que você vai encontrar o tempo todo é “Stack Overflow”. Este é um lugar onde você pode ir e fazer perguntas e obter respostas de profissionais, pessoas que têm trabalhado nessas coisas por um longo tempo. Na maioria das vezes você vai descobrir que essas perguntas têm realmente boas respostas completas com código que você pode ir e jogar com. Eles têm pilhas, que é o que eles chamam de comunidade para tudo. Eles têm HTML, CSS e, em seguida, eles têm muito mais do que apenas tecnologia, bem, bem, realmente qualquer coisa que você pode pensar, há uma pilha onde você pode fazer perguntas e as pessoas podem responder. Esse é um ótimo também, “Stack Overflow”. Eu recomendo que você o use quando você está procurando por ele. Basta fazer perguntas o mais específico possível para obter a melhor resposta possível. Esses são alguns dos recursos que eu encorajo você a usar e você vai precisar deles para o próximo vídeo, porque eu vou desafiá-lo a construir seu primeiro site sem qualquer ajuda minha. 13. 4.2 - seu primeiro site!: O que fizemos até agora é aprender os conceitos básicos de HTML, CSS e, em seguida, eu lhe dei vários recursos realmente bons que eu novamente encorajá-lo a usar. Agora, o que eu quero que você faça é fazer o seu primeiro site. Fizemos um pouco aqui. Eu não chamaria isso de um site digno de publicação. Nunca era suposto ser, é suposto ensinar-te. Eu quero que você pegue essas habilidades, o HTML e o CSS que você aprendeu e vá e faça um site sobre algo que você ama. A coisa legal sobre isso é que pode ser qualquer coisa que você quiser e você pode fazê-lo como quiser. Se você quiser apenas preencher seu site com imagens e ter legendas embaixo, ótimo, vá em frente. Vai ser como uma galeria de fotos. Se você quiser encontrar muitos vídeos e colocá-los de lado a lado e tê-los todos auto reproduzir assim que a página carrega, grande sobrecarga de informações, mas ainda muito legal. Vá para ele. Se você quer ter um site realmente minimalista com apenas um título, três parágrafos e uma foto, faça. Alinhe, pinte, tema, faça parecer incrível. Pegue o que aprendemos. Você pode baixar todo esse código-fonte que eu fiz, embora realmente não há muito. Você pode pegá-lo se quiser, mas eu o encorajo a usar esses recursos repetidamente porque eu os uso também. Vá e faça um site. Quando terminar, carregue e compartilhe com a comunidade aqui. Mostre-nos o que fez. Mostre-nos como conseguiu. Eu quero vê-lo. Outros querem vê-lo e ser encorajados também. Agora, não tenha grandes expectativas para o seu primeiro site. Não vai ser, bem, poderia ser, mas provavelmente não vai ser algo impressionante e incrível e revolucionar a internet. Vai ser um pouco viciado, pode ter algumas cores estranhas. As coisas podem não funcionar perfeitamente, e está tudo bem. Não precisa. O que está fazendo agora é colocar em prática o que acabou de aprender. Porque se você não fizer isso, você não se tornará um desenvolvedor web. Eu posso dizer como fato, assim como com qualquer coisa que você está aprendendo, se você não ir e colocá-lo em prática novamente e novamente, ele não vai ficar. Você realmente não vai aprender. Você pode assistir a 1000 tutoriais e ter um monte de conhecimento de cabeça e conhecer cada tag. Mas se você não colocá-lo em prática, você não vai ser um desenvolvedor web. Este é o meu desafio para você. Faça um site sobre algo que você ama. Publique e compartilhe conosco aqui. Quando fizer isso, estará feito. Você terá seu primeiro site e você pode se chamar de desenvolvedor web. Estou ansioso para ver o que você tem. Estou muito entusiasmada. Quando você terminar com isso, pule para a próxima seção onde eu só tenho um vídeo para parabenizá-lo e para onde apontar você para ir no futuro. 14. 5.1 - que próximo?: Parabéns e caminho a percorrer. Você fez o seu site. Espero que você tenha compartilhado, e eu só quero dizer que você agora é um desenvolvedor web. Agora, este é o primeiro passo de uma longa jornada. Ainda há muito o que fazer. Mas, como você chegou até aqui, eu sei que você pode fazer o resto do caminho. Aqui estão alguns sites que são realmente bons e fazem muito para mostrar o poder da internet e o que você pode fazer à medida que cresce e aprende. Há um monte de coisas realmente legais que você pode fazer quando se trata de interatividade, temas, cores, toneladas e toneladas de coisas realmente legais. Esses sites mostram isso. Se você apenas faz uma busca por sites incríveis on-line, então você vai encontrar algo como isso, e tudo isso não está sendo feito apenas com HTML e CSS. O que isso significa é que quando você se sentir confortável com isso, é hora de dar o próximo passo, e o próximo grande passo é JavaScript. Se pesquisarmos W3Schools JavaScript, isso aparecerá. JavaScript vai ser como você torna seu site realmente interativo. Este é um ótimo lugar para aprender se você quiser apenas ir em frente e começar, e, em seguida, a partir do JavaScript, você vai querer aprender algo para o back-end se você quiser fazer um projeto de pilha completa. O que isso significa é maioria dos sites tem algo que armazena informações no back-end chamado servidor. Isso seria como linguagens de programação reais como C-sharp, Ruby, PHP, algo assim. Esse é o código que pega as informações de um site, como uma lista de e-mail ou um formulário de contato ou algo assim, e depois as processa, salva em um banco de dados, envia um e-mail, envia um mensagem de texto, algo assim. Se você quiser entrar nisso, então eu o encorajo a ir e aprender um PHP, C-sharp, pegar um desses idiomas e começar a trabalhar com ele. É muito diferente do que você fez aqui, mas é muito poderoso. JavaScript é como uma dessas linguagens, exceto que ele é projetado para o front-end ou, eu acho que front-end é como nós chamá-lo. Ele leva as informações que você deseja trabalhar com nessa página e faz algo certo então e ali. Aqui está um exemplo mostrando a data e a hora. Este é um botão que tem funcionalidade que obtém a data e hora e, em seguida, posta-lo dentro daqui. JavaScript, muito disso é realmente apenas modificar HTML ou CSS que você já colocou em seu site. JavaScript pode alterar o CSS de um elemento, ele pode encontrar um ID ou classe específica e escondê-lo ou adicionar a ele, coisas assim. É realmente poderoso, você pode fazer jogos completos com ele se você quiser que ele vá assim, ou você pode integrá-lo em seu site para adicionar um monte de funcionalidade. Coisas como efeito pairar, coisas como animações em cliques ou rastreamento do mouse, coisas assim, que você não pode fazer apenas com HTML e CSS. Depois de ter feito isso, depois de ter feito seu site, continue praticando, continue codificando, continue criando sites. Faça-os para seus amigos, faça-os para mais assuntos sobre o que você ama, faça-os para sua empresa, faça-os para sua escola, seja o que for. Continue criando sites, e enquanto está fazendo isso, continue aprendendo. Aprenda JavaScript, aprenda C-sharp, aprenda Python, aprenda PHP, escolha algo e aprenda. Há muito mais para aprender, muito mais para criar, mas você pode fazê-lo porque você chegou até aqui, você pode continuar. Isso é o que eu tenho para você, esse é o curso. Parabéns, caminho a percorrer. Mais uma vez, espero que tenha gostado. Eu me diverti muito ensinando isso, e eu me diverti muito interagindo com você. Muito obrigado por se juntar a mim, e como eu gosto de dizer, divirta-se fazendo ótimos sites, e eu falo com você novamente mais tarde.