Codifique seu primeiro site: HTML + noções de CSS

1. Introdução: Ei, meu nome é Rich Armstrong do Tap Tap Kaboom. E eu venho projetando e construindo sites desde 2007. E neste curso, mostrarei como codificar manualmente seu primeiro site do zero usando HTML e CSS. Para mim, ser capaz de escrever meu próprio HTML e CSS é mais do que apenas codificar É uma forma moderna de criar e me expressar de forma digital Um site é algo real que centenas de pessoas podem visitar, usar e interagir. Ser capaz de codificá-lo sozinho oferece uma vantagem incrível. Você não precisa depender de outras pessoas, hackear modelos, esperar que a IA dê certo ou tentar usar aplicativos complexos para dar vida às suas ideias Saber programar é muito divertido e gratificante. E quando você usa modelos, sistemas de gerenciamento de conteúdo e sistemas de gerenciamento de conteúdo e IA para ajudá-lo a criar seu site, saber programar tornará tudo mais fácil de entender. É como uma superpotência. Durante o curso, vou guiá-lo passo a passo criação de um site simples para seu personagem de desenho animado, herói ou filme favorito personagem de desenho animado, herói ou filme Eu explico tudo de uma forma acessível e omito as coisas que você não precisa saber Ao final do curso, você terá criado seu primeiro site que poderá compartilhar com o mundo. Você conhecerá os conceitos básicos de HTML e CSS. Seus amigos ficarão com ciúmes. Sua mãe ficará super orgulhosa e você terá uma base sólida para construir sobre ela. Então, se você é um novato absoluto ou já se interessou por design e desenvolvimento web antes, venha fazer Tudo que você precisa é de um computador e uma conexão com a Internet. Ok. Te vejo no próximo vídeo. 2. 1. Boas-vindas: Olá. Meu nome é Rich do Tap Tap Kaboom Durante este curso, vou guiá-lo passo a passo na criação de um site simples para seu herói de desenho animado favorito, filme ou personagem de série Eu explico tudo de uma forma acessível e omito as coisas que você não precisa saber Ao final do curso, você terá criado seu primeiro site que poderá compartilhar com o mundo. Você conhecerá os conceitos básicos de HTML e CSS. Seus amigos ficarão com muita inveja. Sua mãe ficará super orgulhosa. E você estará pronto para aprender muito mais coisas porque terá uma base sólida sobre a qual construir. Começaremos fornecendo a você todos os aplicativos certos para começar a programar. Em seguida, começaremos a programar, simplesmente pulando direto para ela E então adicionarei teoria e mais prática. Finalmente, saberemos o suficiente para criar um site para nosso herói de desenho animado ou personagem de filme favorito herói de desenho animado ou personagem de filme Então, vamos entrar nisso. 3. 2. O que baixar: Para facilitar a codificação, você precisará baixar e instalar algumas coisas Um editor de código, um navegador de desenvolvimento e uma forma de fazer backup do seu código e publicar seu site. A primeira coisa que você precisará é de um editor de código. Eles fazem sugestões, completam seu código e tornam partes do código em cores diferentes para facilitar a leitura. Basicamente, eles ajudam você a codificar mais rápido e com menos erros, o que é simplesmente incrível Um dos editores de código mais populares é chamado de Visual Studio Code, ou simplesmente VS code. É feito pela Microsoft e é gratuito, o que é perfeito. Você pode baixá-lo a partir deste URL. A segunda coisa que você precisa é de um bom navegador de desenvolvimento. Cada navegador tem várias ferramentas que ajudarão você a criar sites. Mas o Google Chrome é o melhor, na minha opinião. Com ele, podemos detectar erros, entender por que certas coisas estão acontecendo ou não e podemos ajustar nosso código para atualizações instantâneas no navegador Você pode baixá-lo a partir deste URL. Se você já tem o Google Chrome, pode simplesmente pular a etapa A terceira coisa que você precisa é uma forma de fazer backup do seu código para que, se seu gato andar pelo teclado, você possa restaurar facilmente uma versão anterior. É aqui que entra algo chamado Git. O Git acompanha todas as alterações que você faz nos seus arquivos. É poderoso. E com o Git Hub, podemos fazer backup de todas essas alterações on-line para que, se seu gato decidir empurrar computador para fora da janela, nem tudo esteja perdido Além disso, o GitHub permite que você publique sites simples usando o código que você envia, o que será muito útil mais tarde. Gosto de usar um aplicativo chamado Git Hub Desktop para trabalhar com o Git e o GitHub em vez do Isso torna todo o processo de backup muito mais fácil e visual Então, crie uma conta no github.com e baixe o GitHub para desktop a partir desta URL Depois de baixar, instalar e fazer login no VS Code, Google Chrome, Gitub e Github para desktop, você terá o que precisa para se desenvolver como E então você pode simplesmente pular para a próxima lição e começar a criar seu primeiro site Se você precisar de mais instruções passo a passo, passarei o resto desta lição mostrando como baixar, instalar e fazer login no VS Code, Google Chrome, GetSub e Gitub desktop Ok, então a primeira coisa que eu preciso é o código do Visual Studio. Então, eu vou abrir um Safari. Você pode abrir o navegador de sua preferência e pesquisar o VS code ou o Visual Studio Code. A Siri está sugerindo esse, o Visual Studio Code. Então vamos lá code.visualstudio.com. Faça o download para o seu sistema operacional, Tada. E lá vamos nós. Ele está baixando, então vou voltar ao Finder e pronto Vou arrastar isso para minha pasta de aplicativos. Então, Baa Agora vou para minha pasta de aplicativos e basta tocar em VS no meu teclado e chego bem perto, chego ao clima. Talvez eu tenha feito isso errado. Código do Visual Studio. Vou tocar duas vezes nele e abri-lo. Precisa verificar. É um aplicativo que eu baixo da Internet. Tenho certeza de que quero abri-lo? Sim, aberto. OK. Lá vamos nós. Está feito. É aberto, fantástico. Você pode escolher seu tema aqui. Eu prefiro esse tipo de tema sombrio e moderno, tipo de tema sombrio e moderno, o tipo de padrão que vem com ele, mas você pode escolher o que quiser. Há várias maneiras de personalizar isso, mas não vou abordar isso neste curso. Ok, a próxima coisa que precisamos fazer é baixar o Google Chrome. Se você já o usa, vá para a próxima etapa. Ok, vamos para o Google Chrome. Aqui vamos nós. Google Chrome. Sério, sugira este. E tudo bem. O navegador criado para ser rápido e seguro. E o seu. Ótimo. Ok, baixe o Chrome. Obrigado por fazer o download. Ok, vamos ao Finder. Vamos voltar para Downloads. O Google Chrome precisa estar instalado. Consciente como uma gota de dragão. Então, vamos arrastar isso para a nossa pasta Aplicativos. Processo de instalação bastante rápido. Tudo bem. Depois, podemos voltar aos aplicativos, e eu vou para GO para Google Chrome e, em seguida, toco duas vezes nele. Mergulhe, mergulhe, mergulhe. OK. Sim, ele também é baixado da Internet Abra isso. O Google Chrome está pronto para concluir sua instalação. Você quer definir o Google Chrome como seu navegador padrão? Eu tenho. Vou verificar isso. Ajude a melhorar o Google Chrome enviando automaticamente estatísticas de uso e relatórios de falhas. Eu gosto de fazer isso. Gosto que o Google Chrome e outros aplicativos sejam melhores. Então, se eu puder ajudá-los a serem melhores, ótimo. OK. Inicie o Google Chrome e, em seguida, as notificações podem incluir alertas, sons e emblemas de ícones Eu vou permitir isso. OK. Então, agora, neste momento, você pode entrar. Se você tem uma conta do Google, talvez tenha uma com sua empresa, talvez tenha uma conta pessoal , você pode fazer login. Eu não vou me inscrever por enquanto. Não preciso, então vou tocar em Não fazer login. Ok, mecanismo de pesquisa padrão. Eu vou usar o Google. Fantástico. Defina como padrão. Toque em adicionar recurso de privacidade. Não, obrigado. Ufa. coisas pelas quais precisamos passar. Outros adicionam recursos de privacidade agora disponíveis. Eu entendi. Obrigado. Ok, então temos o Chrome. Temos o código VS. Agora, no Google Chrome, podemos pesquisar por github.com Mas vou clicar com o botão direito do mouse no Safari e sair dele. Não preciso mais disso. Ok, vamos pesquisar GitHub C. Ta da, da, da OK. Isso pode parecer diferente de tempos em tempos, tipo, isso parece muito legal, na minha opinião, inscreva-se no Github. Ok, em seu e-mail. Eu já tenho uma conta. Então, basta passar por esse processo com sua conta. Vou me inscrever com uma conta de teste agora mesmo. Então, vou fazer o teste ou o teste Rich plus no Tap Tap kaboom.com Inscreva-se no Github. Bem-vindo ao Github. Vamos começar a aventura. Digite seu e-mail, sim, continue. Crie uma senha. Eu uso uma senha para muitas das minhas coisas, mas agora, vou usar algo muito simples. Uau. Acho que consigo me lembrar disso. Tudo bem. Continuar. Insira um nome de usuário. Só vou dizer Rich. Tudo bem, vá para Dutch, Rich, toque, toque, boom. Teste. Tudo bem, e continue Ok, verifique minha conta. Ok, vamos resolver esse quebra-cabeça. Use as setas para girar o objeto na direção da mão Sim, eu acho que isso é bom. Tudo bem. Ok, salve minha senha. Sim, vamos guardar isso. Então eu não preciso me lembrar disso. Novamente, eu uso uma senha para lembrar e criar minhas senhas sofisticadas, mas no momento eu não a estou usando, então vamos salvá-la OK. Você está quase pronto. Enviamos um código de lançamento para Rich no teste em taptapkaboom.com Eu só vou verificar isso no meu telefone. Rápido, rápido, rápido. Vamos abrir o aplicativo do Gmail. Portanto, você deve receber um e-mail enviado para o endereço de e-mail que você acabou de fornecer. E vamos para Rich taptapkaboom. Ok, meu código de lançamento do Github é 058, dois, cinco, dois, um, dois Lá vamos nós. Ok, nome de usuário ou endereço de e-mail, Rich. Acho que foi como testar o Rich plus em taptapkaboom.com, minha senha, ela a lembrou para mim. Faça login. Senha segura. Sim, seguro. Entendi. Como você se descreveria? Você provavelmente pode tocar no aluno. Quantos membros da equipe trabalharão com você? Você pode preencher isso com mais precisão se quiser, mas por enquanto, só eu. E, ok, continue. Você também pode pular essa parte de personalização, se quiser. As duas principais coisas que você quer fazer com o Github são começar um novo projeto OK. Continuar. Ok, aprenda a enviar software como um profissional. Basta ir de graça. Mas um bar, continue de graça. Ufa. Muitas etapas a serem seguidas. OK. Configurar. Temos o Github. Temos o Chrome. Então, vamos mover o Chrome ao lado do Safari. Vamos abandonar o Safari. Saúde, tenho o código VS aqui. E depois o GitHub. Temos github.com. Agora precisamos do desktop do GitHub. Então, vamos pesquisar o Git Hub. Área de trabalho. Ok, eu aceito tudo isso. Ok, desktop.github.com. Faça o download para macOS, você baixa para o seu sistema operacional. Patta. OK. Vamos ao Finder. Vamos para Downloads. Vamos abrir esse. Ok, arraste-o para os aplicativos. Acesse os aplicativos. Digite no GIF da área de trabalho do GitHub e, em seguida, toque duas vezes nele e abra-o Sim, é da Internet. Eu quero abri-lo. Fantástico. Ok, bem-vindo ao desktop do GitHub Faça login no github.com. Triste como “Sim”. Conectado como teste Rich Tap Tap Kaboom. Continuar. O que você está fazendo aqui é dar permissão ao GitHub Desktop para acessar sua conta do GitHub. Desktop autorizado. Ok, abra o aplicativo de desktop GitHub. Vou verificar. Sempre permita essa área de trabalho aberta do GitHub. Sim. OK. Configure o Git. Isso é para usar. Isso é usado para identificar os commits que você cria Qualquer pessoa poderá ver essas informações se você publicar commits Use o nome e o endereço de e-mail da minha conta do GitHub. Sim. Nome, e-mail, acabamento. Uau. OK. Você tem o que precisa para fazer rock and roll ou se desenvolver como um ninja Na próxima lição, você criará seu primeiro site. Te vejo lá. 4. 3. Crie seu primeiro site: Antes de entrarmos na teoria, vamos sujar as mãos e criar nosso primeiro site. E isso para mim é a melhor maneira de aprender fazendo primeiro. Não vou explicar muita teoria durante a aula, que virá depois desta aula. Ok, vamos codificar nosso primeiro site. O que eu quero que você faça é abrir o desktop Github, tada. E se você ainda não estiver conectado, vamos acessar as configurações aqui, entrar no github.com e continuar com o E se você estiver conectado aqui no seu navegador, você pode tocar em Continuar. Se você não estiver, então você precisa fazer login. Talvez seja necessário se autenticar novamente. Talvez seja necessário preencher uma senha, uma chave ou algo parecido Em seguida, pressione Continuar. Ok, desktop autorizado do GitHub. Sim. OK. Lá vamos nós. Estamos dentro. Se você quiser verificar se está conectado, vá novamente para as configurações e, em seguida, você deverá ver seu nome de usuário aqui e uma opção para sair do github.com Tudo bem, salve. Agora, o que eu quero fazer é criar um novo repositório. Então, eu posso criar um novo repositório em sua unidade local aqui, ou posso arquivar um novo repositório ou pressionar Command N ou Control N. Então, vamos procurar um novo E como este é nosso primeiro site, vou dizer meus primeiros sites e identificá-los corretamente, ele dirá que serão criados como meu site dash first dash Isso porque ele não gosta de espaços. Então, o que eu recomendaria também não é usar espaços, mas usar traços em vez de espaços E deixe-me verificar uma coisa aqui. Tudo bem. Se você quiser usar maiúsculas, você pode, mas eu prefiro não Eu prefiro não usar maiúsculas, todas minúsculas e traços Isso é chamado de estojo Kebab, e mostrarei algumas outras opções posteriormente no curso Ok, então meu primeiro site, a descrição é este é meu primeiro site, o caminho local, vou escolher Downloads. Eu já tenho uma pasta de repositórios, que contém vários sites Portanto, os downloads são muito fáceis de usar para mim neste curso, mas você pode escolher o que fizer sentido para você. Não quero inicializar este repositório com um arquivo read me, é ignorado, nenhuma licença, nenhuma Vamos criar esse repositório. OK. E agora você vai ficar tipo, Ok, o que aconteceu? Bem, veja isso. Dentro do Finder, agora temos meu primeiro site. É uma pasta sem nada nela. Ah, hein. Mas há um arquivo secreto escondido nele. Então, vamos arrastar isso para o código VS ou o código do Visual Studio. Esta é a primeira vez que você o abre , você verá um pequeno bar. Você então terá que dizer sim, abri-lo. Vá lá. Sim, legal. E então, você confia nos autores dos arquivos nesta pasta? Sim, eu tenho. Mas talvez também verifique isso. Confie nos autores de todos os arquivos nos downloads da pasta principal. Sim, eu confio nos autores. Ok, temas, não vamos nos preocupar com isso aqui. Obtenha atributos. Esse é o seu arquivo oculto, que tem a ver com o Git e gerenciamento de todos os seus commits, todas as mudanças, tudo Você não precisa se preocupar com isso. Está escondido por um motivo. O que eu quero que você faça aqui é tocar neste pequeno botão, que é um novo arquivo, ou vá aqui e diga arquivo novo arquivo de texto. Então, vamos escolher este. Bam, e vou chamar essa de minha primeira página da web de ponto HTO E veja, à medida que mudamos isso, esse pequeno ícone à esquerda mudou para essas chaves laranja. OK. Minha primeira página da web, nós a abrimos. Vou tocar duas vezes aqui, para nos dar mais espaço, e vou pressionar Command plus. Então agora vocês podem ver o que eu realmente estou escrevendo aqui. Então, o que vou fazer aqui é escolher um símbolo menor que. Haverá um monte de opções que aparecerão, mas eu vou escolher H um, que é um título, o título maior e mais legal e, em seguida, um símbolo maior que Lá vamos nós. E o que ele deve fazer é criar a tag de fechamento desse elemento. Então você tem sua etiqueta de abertura e sua etiqueta de fechamento. Fantástico. E por dentro, você pode dizer, meu primeiro site. OK. Então, no final, vamos pressionar Return ou Enter, fazer a mesma coisa. Então, menos que P maior que. E esta é uma tag de parágrafo, um elemento de parágrafo, e vamos dizer: Ei, quão legal é esse meu primeiro site. E então Command ou File Save. Ok, você verá que há algo acontecendo aqui. Isso é controle de origem, basicamente Github, dizendo: Ei, as coisas mudaram, então vamos dar uma olhada aqui Quem, tem um monte de coisas muito legais acontecendo aqui. Ótimo, mas eu ainda quero usar o GitHub Desktop por um motivo , porque é muito mais fácil de ver visualmente E quando começamos a usar o github.com para hospedar nossas páginas da web, tudo funciona muito Ok, vamos voltar para o Explorer e descer para o Finder E agora veremos que o HTML de pontos da minha primeira página da web está lá. Toque duas vezes nisso. Uau. Meu primeiro site. Ei, quão legal é isso? Meu primeiro site. Pode fechar essa guia. Lá vamos nós. Você acabou de criar seu primeiro site, sua primeira página da web Não parece muito. Claro, e somente você pode vê-lo no seu computador local. Claro. Mesmo assim, esse é um primeiro passo épico. O que eu quero que você faça agora é acessar o desktop do Github, e você verá aqui as mudanças Um arquivo de alteração, minha primeira página da web, você o adicionou. OK. Aqui, ele quer que você dê um título a essa mudança. Então, podemos dizer que criou o repositório e criou o primeiro arquivo. Você precisará fazer isso se estiver criando mais de um arquivo. Mas se eu cortar tudo isso, você pode simplesmente criar minha primeira página da web em HTML com pontos É tipo, Sim, isso é legal. Então, vou colar isso de volta. Descrição. Honestamente, você não precisa descrever tudo o que você faz Mas ei, esse será nosso primeiro compromisso. Então, vamos quatro. Hm. Primeiro compromisso. Sim. E depois se comprometa com o Maine. Só temos Maine e Maine é uma filial. E vamos, Bam. Comprometa-se com o Maine. O que é legal, certo? Sim, é legal. Agora, isso está apenas no seu computador local. Vamos enviá-lo para a versão on-line e visualizá-lo on-line posteriormente neste curso. Você acabou de criar seu primeiro site. Claro. Ele tem apenas uma página da web e somente você pode acessá-la, mas isso não a desconsidera como um site Parabéns. Você deveria estar orgulhoso de si mesmo, sério. Na próxima lição, vou te dizer o que realmente é um site. 5. 4 O que é um site: Então, o que é um site? É basicamente uma pasta que contém uma ou mais páginas da Web que geralmente estão relacionadas entre si Ao inserir um nome de domínio como taptapkaboom.com em seu navegador, você será direcionado para E nessa pasta, haverá uma ou mais páginas da web que você poderá acessar. Na maioria das vezes, você verá a página padrão se não especificar qual página deseja visualizar Agora, o que é uma página da web? Uma página da Web é um documento de texto escrito de uma forma que os navegadores possam entender Essa forma é chamada de HTML. E com base no HTML dentro de uma página da web, navegador sabe o que exibir, como fazer sua página parecer, como responder às interações do usuário, quais informações mostrar aos mecanismos de pesquisa e muitas outras coisas Na próxima lição, abordaremos mais sobre o que é HTML. Te vejo lá. 6. 5. O que é HTML: O que é HTML? Significa linguagem de marcação de hipertexto, mas isso não ajuda, não é Por isso, gosto de pensar no HTML como a linguagem principal que usamos para dizer ao navegador o que fazer. Os blocos de construção dessa linguagem são elementos HTML. Uma página da Web é composta por elementos HTML. Para cada tipo de elemento, o navegador faz algo diferente. Este é um título, um elemento. Os navegadores gostam de: Ah, o título mais importante da página. Esse é o texto do cabeçalho. Vou fazer com que seja grande. Eu entendi. Não se preocupe Esse é um elemento ousado. Os navegadores gostam de exibir isso em um estilo de fonte mais gordo Vou fazer com que se destaque. Não se preocupe. E isso é um elemento de ligação ou um elemento âncora. Os navegadores dizem: É um link. Vou torná-lo azul e vou sublinhá-lo. E quando alguém clica nele, eu o direciono para a URL encontrada aqui Incrível. E isso é um elemento de imagem. E o navegador diz: vou mostrar isso como uma imagem, e a imagem que vou usar está localizada aqui. Elementos HTML específicos instruem o navegador a fazer coisas específicas. Na maioria das vezes, esses elementos HTML instruem o navegador a exibir informações de maneiras diferentes, como listas ou cabeçalhos, parágrafos e imagens Mas também há outros usos, como dizer ao navegador como estilizar a página com CSS ou dizer ao navegador como responder às interações do usuário com JavaScript ou dizer ao navegador qual é o título da página para os mecanismos de pesquisa ou qual imagem usar quando alguém adiciona sua página aos favoritos Existem muitos elementos HTML diferentes e, não se preocupe, não abordaremos todos eles neste curso. Se você quiser descobri-los, vá ao Google ou pergunte ao Chat GPT Na próxima lição, explicarei a teoria das caixas HTML, que é uma maneira fácil de entender como os elementos HTML funcionam. 7. Teoria de caixas em HTML: Gosto de visualizar elementos HTML como caixas. Na maioria das páginas da web, há caixas dentro de caixas dentro de caixas, e a caixa que contém as outras caixas é a janela do nosso navegador Isso é o que eu chamo de teoria das caixas HTML. Dentro de cada caixa, pode haver uma ou mais caixas, texto, uma combinação de texto e caixas ou nada. Por padrão, a maioria das caixas é tão alta quanto seu conteúdo e tão larga quanto a caixa em que estão dentro. Outras caixas são tão altas e largas quanto seu conteúdo, e a maioria das caixas fica o mais à esquerda da página e o mais longe possível do topo da página. E, claro, existem caixas que se comportam de maneira completamente diferente, como algumas caixas são invisíveis para os humanos. E então, é claro, você pode mudar tudo isso ao estilizar suas caixas com CSS Mas vou abordar isso mais tarde. Na próxima lição, mostrarei como escrever HTML. 8. 7 Como escrever HTML: Então, como escrevemos ou codificamos um elemento HTML? Bem, a maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento. Uma etiqueta de abertura é composta por um símbolo menor que, o nome da tag e um símbolo maior que Uma tag de fechamento é composta por um símbolo menor que, uma barra invertida, o nome da tag e um símbolo maior que Entre essas duas tags, você pode colocar um ou mais elementos HTML, texto, uma combinação de elementos e texto ou deixá-lo em branco. Todo o elemento HTML então é composto pela tag de abertura, pelo conteúdo e pela tag de fechamento. E, por padrão, um navegador exibirá elementos HTML da parte superior do documento para a parte inferior, exatamente como estão no arquivo HTML. Mas a forma como seu navegador exibe um elemento e os elementos dentro dele depende do tipo de elemento. Isso é tudo que você pode estar perguntando? Bem, não é bem assim. Há mais uma coisa: atributos HTML. Os atributos HTML são detalhes adicionais importantes adicionados aos elementos HTML que informam ao navegador como exibi-los e quais funcionalidades adicionar Usamos atributos para estilizar elementos para dizer ao navegador aonde ir quando você clica em um link, qual arquivo e elemento de imagem deve ser exibido e muito mais. Um atributo é composto por um nome, um símbolo igual e um valor, que está entre aspas simples ou duplas. Você os usará o tempo todo ao escrever HTML. Ok, agora você entende HTML em teoria. Na próxima lição, você começará a escrevê-lo com um pouco mais de conhecimento do que antes. Te vejo lá. Hum 9. 8. Escrevendo HTML: Ok, vamos começar a escrever um pouco de HTML. Desta vez, com uma melhor compreensão do que realmente está acontecendo, criaremos um novo repositório para que você se familiarize com o processo e também começaremos a fazer coisas divertidas no Chrome Tudo bem, vamos entrar na área de trabalho do Github. E você tem seu repositório atual. Mas agora queremos criar um novo repositório. Confira as novas configurações de acessibilidade. Ok, obrigado. Vamos para Arquivo, Novo repositório. E vamos criar um novo porque queremos aprender a realmente fazer isso. Vamos chamar isso de um experimento. Lá vamos nós. Não precisamos de uma descrição. Downloads de caminhos locais. O resto é ótimo. Crie um repositório. Fantástico. Vamos voltar ao Finder arrastar experimentos para o código do Visual Studio Ok, está tudo grande de novo. Vou criar um novo arquivo e vou chamá-lo de test HTL, Return Ok, agora sabemos um pouco mais, você sabe, sobre o que está acontecendo. Então, menos de H, um maior que, e dizemos cabeçalho um. OK. Vou pressionar Menos concluído, P, pressionar Enter aqui e, em seguida, pressionar o botão maior para baixo e, em seguida, parágrafo. OK. Então, no título, um parágrafo. O que eu quero fazer a seguir é um link vinculado a outro lugar. Então, em vez de parágrafo, deixe-me dizer: Ei, esse é um item legal. E item legal, eu quero vincular isso em algum lugar. Então, maior ou menor que. E eu vou escolher A como âncora. Portanto, não é um link. É uma âncora, e depois maior que, e vou selecionar isso e cortá-lo Então, comande X e coloque depois dessa paródia. Mas antes dessa tag de fechamento do meu elemento P, isso realmente não faz muita coisa. É apenas um elemento âncora até que tenhamos um atributo que seja HRF, que é para onde queremos que esse link vá Então, ele começa a preencher algumas opções aqui. Eu vou para a HRF. Em seguida, deve ser igual com duas pequenas aspas e hRF. Vamos usar HTTP, dois pontos e barra google.com Ok, esse é um item legal. Podemos atualizar isso em breve. E então Command S. Vamos ao nosso Finder. Experimentos internos. Clique duas vezes no teste. Título um. Ei, esse é um item legal. OK. E se você tocar nesse, você será direcionado para google.com Ooh. Então, o que está acontecendo aqui é que há um elemento dentro desse elemento P. E dentro desse elemento P, também há algum texto. Muito legal, certo? Sim, eu acho que é muito legal. Em seguida, o que eu quero fazer é colocar uma tag de imagem ou um elemento de imagem. Então eu sou G, vou pressionar Return. E então aqui, SRC para fonte e então precisamos de uma imagem. E então isso é realmente especial. Não precisa de outra etiqueta, então eu vou escolher essa ou vou usar a barra e esse sinal maior É uma etiqueta única. Você não pode colocar nada dentro de uma tag de imagem ou de um elemento de imagem. Ok, então fonte, precisamos de uma espécie de imagem. Então, vamos ao Chrome. E, ei, já estamos no Google, então vou pesquisar gatos que são ótimos. Vamos usar imagens. OK. Gato da National Geographic. Hmm. Esse está bocejando E essa gracinha? Tudo bem. Então, agora, vou clicar com o botão direito e ver se consigo salvar isso. É um link. Salvar imagem como. Lá vamos nós. Então, salve a imagem como. Vamos fazer os downloads. Ok, vamos chamá-lo desse nome estranho. Vamos aos downloads. Coloque-o em experimentos. Ok, e chame isso de cat dot JPEG. Você pode clicar com o botão direito do mouse e tocar em Renomear ou simplesmente pressionar Return no Mac de qualquer maneira Então, temos CAT JPEG. Isso significa que, no código-fonte, podemos usar cat dot JPEG ou usar dot slash, que significa, ei, olhe nesta pasta, essa pasta muito atual em que esse arquivo está para cat dot Ok, Command S, vamos voltar ao Chrome. E olá. Vamos embora. B, B, B, B. Atualizar. Não é necessário porque nosso Catimage está lá. Uau. Tudo bem. Isso parece legal. Então, essa é uma forma de atribuir ao seu elemento de imagem um atributo de origem. Outra é, vamos fazer isso de novo. Gato. Vamos procurar imagens. Vamos escolher, esse, esse verde, sim. Vou tocar nisso. Clique com o botão direito do mouse no endereço Copiar imagem. Tudo bem, vou pegar uma nova guia e depois vou colá-la aqui E pressione Enter. E você vê que isso me leva a uma imagem. Agora, poderíamos fazer o download novamente ou usar essa mesma URL que ela nos deu e criar um novo elemento de imagem, fonte, e colocar tudo lá. Tudo bem. Comando S. Então, temos essa imagem de gato local e, em seguida, temos essa imagem CAT que existe online. Agora, os benefícios de ter algo localmente é que, bem, temos o controle sobre isso, então não simplesmente o removemos. A vantagem dessa versão on-line é que não precisamos armazenar essa imagem em nosso servidor ou sistema de arquivos. Mas se eles quiserem removê-lo, ele desapareceu. Então guarde isso. Se ainda não o fizemos, vamos ao Chrome. Vamos abrir nosso ponto de teste HTM novamente. Tudo bem. , temos duas imagens, No entanto, temos duas imagens, ótimas de gatos Agora, se algo der errado, talvez em vez de gato, procuremos por Doug. Eu vou guardar isso. Vamos voltar ao Chrome, atualizar. Você verá que obtém esse pequeno ícone de imagem quebrada. É porque não consegue encontrar o que está procurando. Então você pode querer dizer: “Ok, gato, ótimo. Se você optar por um JPEG, por exemplo, e aqui eu vou pressionar Command R. Novamente, isso não funcionará Então, o que você precisa fazer aqui é ter certeza de que está digitando corretamente. Comando S. Ok. Comande R aqui, um gatinho fofo está de volta. A mesma coisa aqui. Se eu remover o traço do Felv e do CAT, Command S, vamos para a atualização do Chrome Você receberá esse ícone de imagem quebrada novamente. Ok, então cuidado com isso. Ok, Comando Z. Vamos voltar em segurança Vamos ver se tudo está funcionando. É fantástico. Agora, vamos criar outro parágrafo, faça isso aqui. P, e eu vou dizer, Uau, esses gatos são tão fofos E então eu quero ser ousado ou talvez gatos. Eu quero ser ousado. Então, eu posso usar o elemento B que está em negrito. E eu vou cortar isso. Oh, para onde vão os gatos? Esses gatos são tão fofos. Ou o que posso fazer é mudar isso para strong e garantir que você altere a tag de fechamento também. Forte é mais sofisticado, mas ousado também funciona Então, embora esses gatos sejam super fofos, quero colocar isso em itálico ou enfatizá-lo Então, vamos usar o EM para dar ênfase. Cat isso. Tudo bem. Comando S. Vamos voltar ao Chrome, atualizar. E aqui vamos nós. Nossa, esses gatos são tão fofos Agora, veja isso. Vou clicar com o botão direito do mouse no Chrome e vou dizer inspecionar. E pode aparecer à direita se isso acontecer, e você está bem com isso. Ótimo. Caso contrário, gosto de tocar nesses três pontos e fazer com que apareçam na parte inferior Além disso, talvez toquemos duas vezes nessa barra aqui, e isso tornará tudo maior. Ok, então aqui você pode começar a ver os elementos. Vou pressionar Command plus para torná-lo um pouco maior para que você possa ver. OK. E você pode ficar tipo, Whoa, HTML head, body, o que é tudo isso? Sim, bem, o Chrome faz algumas coisas muito sofisticadas. Embora não tenhamos escrito isso, ele está colocando isso lá porque pressupõe que é isso que queríamos fazer Então, o que é realmente legal sobre esse inspetor de elementos aqui é que, ao passar o mouse sobre cada elemento, ele o destaca na página acima, o que é muito Você também pode clicar com o botão direito do mouse e editar como HTML. Então, poderíamos simplesmente remover o prato novamente e clicar para fora. E depois o cocô, ele vai embora. Hmm. Poderíamos então pressionar o Comando Z ou Z, e ele volta. Se você não quiser clicar com o botão direito do mouse em algo e dizer inspecionar, você também pode usar este pequeno botão aqui Se eu passar o mouse sobre isso e disser, selecione um elemento na página para inspecioná-lo ou Command Shift C. E então você simplesmente passa o mouse sobre as coisas e pode dizer, Ok, inspecione Tudo bem, tão forte. Vamos ver se o negrito funciona, clique com o botão direito do mouse em Editar como HTMO e altere isso para B Tudo Isso não pareceu mudar nada. Talvez vamos mudar para EM. Você também pode simplesmente tocar duas vezes. Ok, esses gatos são super fofos. Ufa. Então, o que está acontecendo aqui é que você está apenas alterando a versão local que o navegador está oferecendo. Na verdade, você não está alterando nada no seu sistema de arquivos. Agora, você também pode fazer isso em qualquer site do mundo. Você pode editar o que o navegador está oferecendo. Você não está mudando nada. Você não está hackeando Você não vai para a prisão do FBI, nada disso. Totalmente alto, totalmente legal. É simplesmente muito poderoso. Então, quando você se refrescar, tudo voltará ao que era Você também pode excluir elementos, como, vamos tocar nessa imagem aqui, e eu vou pressionar backspace Opa. Desapareceu. Portanto, é uma forma muito poderosa e visual codificar e ver o que você está codificando, ver como é o seu código Quero dizer, mesmo aqui, você pode arrastar essa ênfase para cima. Então, uau, esses supergatos são tão fofos, o que meio que faz sentido, supergatos Mas, sim, você pode até mesmo arrastar esse elemento forte para fora dessa tag P ou elemento P. Legal. Isso parece ótimo, certo? Sim. A outra coisa que o Chrome fez foi colocar muito mais código aqui. Então, se clicarmos com o botão direito do mouse e visualizarmos o código-fonte da página, você verá aqui H um , P, P, imagem, imagem. Ótimo. Fantástico. Mas como ele realmente fez todo esse tipo de coisa, cabeçalho HTML, corpo, todo esse tipo de coisa, eu vou falar mais sobre, mas isso vai fazer sentido para uma página HTML. Então, vamos escrevê-los. Vamos ao código do Visual Studio. E todas essas coisas realmente vão para dentro do nosso corpo. A primeira coisa que vamos colocar é HTML. Lá vamos nós e colocamos no final. Agora, quando vários elementos estão dentro de outro elemento, é muito útil simplesmente pressionar tab e , em seguida, recuar Isso só torna a leitura muito mais fácil, e então queremos colocar nosso elemento principal aqui. Dentro do elemento principal, há vários tipos de elementos invisíveis ou ocultos, como o título, o pequeno ícone que aparece à sua vista, coisas assim. E então, dentro do elemento corporal, todo o seu código visual aparece. Assim. Tudo bem, rapidamente antes de salvar aqui, aqui, isso é chamado apenas de HTML de ponto de teste e volta ao código do Visual Studio. Vamos chamar esse. Vou colocar um elemento de título aqui. Vamos chamá-la de página de teste. OK. Seguro. Vamos voltar ao Chrome e atualizar. Agora você tem uma página de teste dentro do seu elemento principal, você tem uma página de teste com um elemento de título. Fantástico. Mais uma coisa que o Chrome realmente não fez nos fornecer um tipo Duc e você deve ter visto isso algumas vezes enquanto eu tentava escrever isso Se eu começar a escrever aqui, diz tipo Duc. Lá vamos nós. Tipo de duto, HTML. Você realmente não precisa disso, mas isso apenas faz com que alguns navegadores mais antigos percebam que isso é realmente HTML. Então, vamos lá. Vamos guardar isso. Vamos para o desktop do GitHub. E aqui precisamos de um resumo porque temos pelo menos dois arquivos que precisamos confirmar. Então, vamos dizer apenas commit inicial e commit to main. Agora, a qualquer momento, se você disser: Oh, eu quero adicionar algo, sim, vá adicioná-lo. Então, talvez em algum lugar aqui, como no título um, eu realmente queira que sejam duas linhas, mas não quero criar um elemento totalmente diferente. Eu só quero uma nova linha. Como eu faço isso? Bem, se você não tiver certeza de nada, acesse o Chrome, abra uma nova guia e diga Como faço para criar uma nova linha em HTML? E aqui para criar uma nova linha HML, você pode usar a tag BR OK. Haverá vários links que você pode conferir. Às vezes, eles estão no stack overflow. Você pode até usar o Chat GPT se quiser. Então, vamos copiar isso ou podemos simplesmente escrevê-lo e você volta para o código do Visual Studio e, em seguida, BR Alright Título um, Comando S. Vamos verificar isso. Tudo bem, cria uma pequena quebra de linha. Fantástico. OK. Não, você volta para o desktop do Gitybe e diz adicionou uma quebra de linha no título Comprometa-se com o principal. Ok, então quando você começar a mudar as coisas, adquira o hábito de dizer: “Sim, está bem”. Comprometa-se. Você quer ter certeza de que cada mudança significativa tenha seu próprio objetivo. É a melhor prática. Isso significa que se seu gato passar pelo computador ou passar o dedo no computador, você sabe, pela janela ou você derrama sua cerveja de gengibre no teclado, você não perdeu um monte de coisas Talvez você tenha perdido apenas duas linhas de código ou, você sabe, uma pequena alteração um elemento de imagem ou algo parecido. Então você acabou de escrever um monte de elementos HTML diferentes. Eu sugiro que você bombeie o ar com o punho ou solte um grito. Uau, cocô. Comemore de alguma forma. Na próxima lição, mostrarei como compartilhar seu site com o mundo, o que é muito interessante. Nos vemos lá. 10. 9. Compartilhe seu site: Felizmente, para nós, o GitHub facilita muito o uso das páginas da web que ele monitora para criar simples. Vamos entrar nisso. Ok, então como podemos colocar isso online para que outras pessoas vejam agora? Bem, vamos ao GitHub Desktop. E temos esse botão de repositório publicado, no topo aqui ou no meio da tela aqui Então, publique o repositório. Experiência com o nome GitHub.com. Você pode chamá-lo de outra coisa. Você pode dar uma descrição. Mantenha esse código privado. Você não precisa fazer isso. Se você quiser compartilhá-lo, eu recomendaria desmarcar isso Portanto, não mantenha esse código privado. Especialmente se você quiser minha ajuda ou a ajuda de outra pessoa analisando seu código ou verificando seu código. Sim, basta desmarcar isso. Publique o repositório. Estrondo. Agora, o que é ótimo nisso é que, se o seu computador entrar em combustão espontânea, ele está Você não pode mais acessá-lo. Seu código agora está online. Isso também significa que, se você tiver outros três computadores, poderá acessar o mesmo código desses computadores e sincronizá-los usando github.com Quem. Isso é ótimo. Ok, e agora? Já fez seu trabalho. Sim Ok. Vamos acessar github.com em nosso navegador E você verá aqui. Este será seu nome de usuário, slash Experiments ou o que quer que você chame de seu repositório Vamos tocar nisso. Ok. Então esse é o Github, o que é ótimo É aqui que seu código é armazenado. Você pode ver o HTML de teste CTJPEG e até mesmo fazer algumas edições aqui Mas o que queremos fazer é publicar nosso código, nosso site para o mundo ver. Então, vamos às configurações. E depois páginas à esquerda. Isso pode parecer diferente de tempos em tempos. Tudo bem, implante a partir de uma filial. Sim, experiência com páginas clássicas. Ações do GitHub Não, é melhor usar estruturas e personalizar seu processo de construção, coisas complicadas Portanto, implante a partir de uma filial. Fantástico. Ok, as páginas do GitHub estão atualmente desativadas Selecione uma fonte abaixo para habilitar as páginas do GitHub para este repositório Sim. Ok, nenhum. Só temos uma filial, o que é ótimo. Raiz principal, selecionada, ótima. Salvar. Ok. Seu site de página do GitHub ou site do Pages está sendo criado atualmente a partir da ramificação principal. Ok. O molho do GitHub Pages foi salvo. Vou atualizar isso para ver se alguma coisa muda. Ok. Eu acho que isso é bom. Ok. Então, agora precisamos copiar nosso nome de usuário, então comande T. Vou passar lá, ponto github, ponto IO, barra e, em seguida, vamos para Eu vou copiar isso. E então vamos voltar à nossa base de código aqui. Temos HTML com pontos de teste. Então, corte o ponto de teste em HTML. Uau. Aí está. Está online para o mundo ver, senhoras e senhores Às vezes, leva um pouco de tempo para realmente, você sabe, chegar a qualquer lugar do mundo. Às vezes você está lá refrescante, refrescante, refrescante Mas se você disser: Ok, isso não está funcionando depois de 10 minutos, talvez você queira voltar às configurações e depois voltar às páginas. E então dê uma olhada na seção de construção e implantação aqui. Deve ser bem simples. E mesmo aqui, diz: Seu site está ativo aqui. Então, vamos, Bam, visitar o site. Isso acontecerá se não tivermos um arquivo de índice. É por isso que precisaríamos colocar o HTML com pontos de teste. Ok, então vamos tentar isso agora. Quero atualizar minha página um pouco. Quero obter um pequeno ícone favorito e também quero alterar esse link, para que, quando eu pressioná-lo, ele não carregue na mesma página Ok, então como fazemos isso? Bem, vamos fazer algumas pesquisas, e eu quero que você adquira o hábito de pesquisar porque tudo está lá fora Então, eu quero o ícone de quatro páginas HTML. Ícone favorito, como faço para criar um ícone para uma página HTML? Para inserir um ícone, adicione o nome da classe do ícone a qualquer elemento HTML embutido que realmente não pareça Ícone da aba Uh. Ícone Tab. Sim. Ok, vamos dar uma olhada nisso. Ok, exceto os biscoitos. Há duas maneiras de adicionar um ícone favorito a um site, 13 respostas Basta adicionar o código a seguir ao elemento principal. Ok, vamos copiar isso. Vamos para o Visual Studio. Ok. Ícone. Quero que meu gato seja o ícone favorito. Vamos fazer isso. Comando S. Mas dizia que havia duas maneiras, favicons PNG favicons É assim que se chama I, suportado pela maioria dos navegadores, exceto pelo IE 10 e inferiores. Você também pode usar os favicons da ICO. Não precisa mais usar um atributo de ícone e rolagem com o atalho, blá, blá, blá Todos os navegadores modernos sempre solicitarão um ICO de favicon dot, a menos que você tenha especificado um atalho por meio de um Na verdade, esse é um elemento de link, diferente de um elemento âncora Ok. Até agora, o ícone não é ICO. Agora, eu realmente não sei como fazer um ICO, então vou continuar com meu JPEG ou PNG Vamos testar se isso funciona. Este é o online. Esse é o local. Então, vamos atualizar. Oh, aí está. Você pode ver isso. Fantástico. Então, na área de trabalho do Gita, digamos, um ícone favorito atualizado Lá vamos nós. Comprometa-se com Min. Agora, esse primeiro Commit to Min é somente para o seu computador local. Mas se você enviar a origem, isso será direcionado para a versão on-line do seu site Ok. E podemos verificar isso acessando o código em github.com e testando o HTML com pontos Aí está. O CatJpeg como ícone real ou o ícone do link, o ícone Fav para atualizá-la Então suba e atualize novamente. Não parece estar funcionando no momento, pode levar algum tempo. Enquanto isso, o que eu quero mostrar é se editarmos isso um pouco, então edite esse arquivo Vamos começar com o título Quem? Talvez possamos conversar sobre. Gatos são muito legais. Em seguida, confirme-se com as alterações, atualize o HML de teste com o novo título Comprometa-se diretamente com a filial principal, equipe, sim, sim. Comprometa-se com as mudanças. Ok. Então, agora eu realmente fiz uma mudança on-line, mas localmente, isso não reflete. Então, vamos voltar ao desktop do GitHub. E o que queremos fazer aqui é buscar a origem. E diz: Ei, puxe um Commit do controle remoto Origin. Então, isso é muito útil se você trabalha em vários computadores, ou se há, você sabe, pessoas que trabalham no mesmo projeto, pois todos vocês se comprometem em código com aquele, você sabe, repositório online de fontes da verdade Então você toca em puxar Origin. E isso atualizará sua versão local. Então, vamos dar uma olhada nisso. Gatos são muito legais. Fantástico. Lá vamos nós. Vamos testar se este agora tem um pequeno favicon atualizado. Faz. Fantástico. Ok. Agora, a última coisa que quero fazer aqui é onde está escrito HRF Como faço para que isso seja aberto em uma nova guia? Então, novamente, vamos fazer um pouco de pesquisa. Como faço para codificar o núcleo para abrir em uma nova guia. Obviamente, pode perguntar ao HatiPT. Mas aqui, adicionando o atributo em branco de destino. Ok. Ok, ok. Então, eu sei que isso funciona, mas se não funcionar para você, tente outra coisa. Então, vamos aqui. Alvo. Ok, isso é um bom sinal quando ele começa a preencher automaticamente o Tem algumas opções aqui. Então, vamos ficar em branco. Lá vamos nós. Comando S. Vamos voltar ao Chrome e atualizar. Está bem? Nada deve mudar visualmente, mas vamos tocar em um item interessante. E abre o Google em uma nova guia. Uau, capuz. Isso é ótimo. Ok, então vamos voltar para o desktop do Github e abrir o link em uma nova aba Comprometa-se com o Maine, que, novamente, ainda está em nosso computador e, em seguida, pressione Origin. E em pouco tempo, nossos sites on-line também devem ser atualizados. Você acabou de publicar seu primeiro site para o mundo ver, e ele está sincronizado com segurança com Agora, toda vez que você enviar seu código para o Github, seu site será atualizado Além disso, se você tiver mais de um computador, poderá usar o repositório no Github como sua fonte definitiva de verdade Você pode enviar alterações para o Github e obter alterações do Github com muita Agora você está prestes a dominar a Internet. Mas antes de começarmos a estilizar sites, quero examinar pastas, partes de arquivos e nomes de arquivos Eu sei que parece chato, mas essa é a causa de muitos bugs, erros e dores de cabeça Se você entender essas coisas, tudo será muito mais fácil. Te vejo no próximo vídeo. 11. Nomeando, pastas e caminhos de arquivos: Ok, vamos abordar algumas coisas que tornarão sua vida muito mais fácil quando você as entender. A primeira tem a ver com a distinção entre maiúsculas e minúsculas. Na maioria das vezes, no computador local, aquele em que você está codificando, não importa se você usa maiúsculas, minúsculas ou uma Você pode testar se isso importa alterando a maiúscula e minúscula do nome de um arquivo de imagem, no sistema de arquivos ou no seu HTML. Se as coisas falharem quando as maiúsculas e minúsculas mudarem , seu computador fará distinção entre maiúsculas e minúsculas. motivo pelo qual isso importa é que a maioria dos computadores e servidores on-line se preocupam com a caixa que você usa. Eles diferenciam maiúsculas de minúsculas. motivo pelo qual isso importa é que tudo pode parecer incrível em seu computador local, mas bagunçado e quebrado quando você o vê online No seu computador, acessar cat dot JPG pode funcionar porque cat dot JPG e cat dot JPG são vistos como a mesma coisa porque o sistema de arquivos do seu computador não diferencia maiúsculas de minúsculas Mas os servidores do Gitub os veem como arquivos separados porque o Github Portanto, verifique os nomes reais dos arquivos e pastas em comparação com os que você escreveu em seu HTL e CSS se coisas assim começarem a acontecer Para evitar que isso aconteça, no entanto, escolha uma forma padrão de nomear seus arquivos e mantenha-se fiel a ela Eu prefiro nomear tudo em letras minúsculas e usar traços Isso é chamado de caso Kebab. Outras opções populares são estojo de camelo e estojo de cobra. A segunda coisa que vai facilitar sua vida é usar pastas. As pastas tornam seu projeto mais organizado. Isso é especialmente útil quando seu projeto cresce em tamanho. Claro. Você pode alterar seu código, criar pastas e colocar arquivos nelas enquanto codifica, mas isso leva tempo e geralmente leva a erros. Por isso, tento me manter organizado desde o início. Eu tenho uma pasta IMG para imagens. Eu tenho uma pasta CSS para arquivos CSS. Se eu tiver minhas próprias fontes personalizadas, tenho um arquivo de fontes e, se tiver arquivos JavaScript, tenho uma pasta JS. Tudo o que eu quero na pasta principal são arquivos e pastas HTML. Você pode criar suas pastas no código VS ou no seu sistema de arquivos. A terceira coisa que tornará sua vida muito mais fácil é entender os caminhos dos arquivos. Já que estamos usando pastas e arquivos dentro de pastas, como podemos dizer ao navegador onde está um arquivo? Ao escrever o nome do arquivo, informamos ao navegador onde encontrar o arquivo usando uma combinação de instruções antes de chegar ao nome do arquivo. A primeira instrução que você pode usar é pedir ao navegador que procure na mesma pasta em que esse arquivo está atualmente. Use um ponto seguido por uma barra. A segunda instrução é olhar dentro de uma pasta. Use o nome da pasta seguido por uma barra. A terceira é ir até o par e a pasta. Use dois pontos e uma barra para frente. A quarta é começar na pasta raiz ou na pasta principal. Você digita uma única barra para frente. Isso pode não funcionar conforme o esperado em seu computador local porque a pasta do projeto pode na verdade, estar dentro de várias outras pastas. Então, quando você instrui um navegador a acessar a pasta raiz, ele vai até o início da árvore de pastas Mas online, onde há um Urol, funciona maravilhosamente bem. Você também pode, é claro, começar com um domínio ou uRole com uma barra no final, como taptapkaboom.com forwardslash final, como taptapkaboom.com forwardslash E o que é ótimo nessas instruções é que você pode combiná-las como começar na pasta em que o arquivo está, depois ir até a pasta principal, depois ir para a pasta de imagens e, dentro dessa pasta, há uma imagem chamada cat dot JPEG Ok, essas são as três coisas que vão ajudar muito. Vamos atualizar rapidamente. A sensibilidade K é importante. Use pastas desde o início para se manter organizado, e usamos o caminho do arquivo para informar ao navegador onde os arquivos estão. próximo passo é aprender como mudar a aparência de nossos elementos HTML com CSS, e é aí que as coisas começam a ficar super divertidas. 12. 11 O que é CSS: Então, escrevemos um pouco de HTML, mas não parece bonito. É aqui que entra o CSS. O CSS que escrevemos faz com que nosso HTML tenha uma boa aparência substituindo os estilos padrão enfadonhos fornecidos pelo navegador Escrevemos CSS para informar ao navegador a aparência dos elementos HTML. Para fazer isso, escrevemos um nome de propriedade e um par de valores, separados por dois pontos com ponto e vírgula no final Podemos estilizar um elemento com quantos pares de propriedades quisermos. E há muitas propriedades que você pode escrever para mudar a aparência, a sensação e o funcionamento de um elemento. Propriedades como altura, cor de fundo, família divertida, tamanho da fonte e muito mais. Agora, existem dois métodos para escrever CSS. A primeira é usando estilos embutidos, que estilizamos um elemento usando um atributo HTML chamado style A segunda é usar conjuntos de regras, em que selecionamos elementos para estilizar, seguidos pelas propriedades e valores CSS desses elementos. Abordaremos as duas opções e algumas outras coisas importantes sobre CSS nas próximas lições. 13. 12 CSS Inline: Nesta lição, vamos ser práticos e começar a escrever CSS com estilos embutidos, que escrevemos em um atributo HTML Agora, observe que tudo é escrito da maneira americana ao escrever HTML e CSS Sim, então o que vamos fazer aqui é criar alguns estilos embutidos Quem, hoo hoo. Então, vamos arrastar os experimentos para o código do Visual Studio. E sim, parece bem grande. Pode fechar essa guia de boas-vindas. Então, temos HTML de teste. O que eu quero fazer aqui é criar um novo arquivo. E chame-o de estilo embutido com pontos HTML ou estilos embutidos com pontos Tudo bem. Pressione para ouvir o tom. E aqui você verá: Oh, temos que fazer tudo isso de novo? Sim, temos que fazer tudo de novo, mas tudo bem. Então, vamos para A, tipo Doc. Lá vamos nós. Então eu vou fazer HTML. E depois a cabeça. Sim. OK. E aqui, temos um título, e o título deve ser um estilo embutido. Isso é ótimo. E então temos um corpo. OK. Isso parece bom. Então você pode se acostumar muito a fazer isso, praticar fazendo isso, escrevendo o cabeçalho, o corpo do HTML , coisas assim. Agora, vamos escrever uma zona H. E aqui, se você não quiser, não precisa escrever a gravata de abertura. Você pode simplesmente digitar H um, e ele deve, você sabe, fornecer algumas opções aqui. E isso é chamado de abreviatura ET, e eu vou pressionar Return, e ele deve ir para H uma tag à esquerda, H uma à direita e, em seguida, meu cursor deve estar no meio Se não fizer isso, você terá que, você sabe, escrever sua tag inteira no início e no final do seu elemento. Ok, não. Então, vamos para o título um. Eu vou fazer isso quatro vezes. E então o que eu vou mudar aqui é ir para o título dois, três, quatro, e vamos mudar isso para o título dois, três e quatro. OK. Isso parece muito bom. E então eu vou duplicar isso novamente. E então comande S ou salve isso. Você pode ir para Arquivo e depois Salvar ou Salvar como quiser, mas Command S ou Controls se estiver no Windows. E então vamos voltar ao Finder. Temos estilos embutidos em HTML com pontos. Vamos tocar duas vezes nele para abri-lo . E isso é o que você ganha. cabeçalhos um, dois, três, quatro têm tamanhos diferentes, o que faz sentido porque existem diferentes níveis de cabeçalho. Ok, legal. Então, vamos ao código do estúdio ou ao código VS. E vamos criar um atributo chamado estilo. E aqui, vou escolher o tamanho da fonte e mudar isso para 30 pixels. Lá vamos nós. Isso parece bom. Vou copiar e colar isso. Ooh. Muitas cópias e colagens. E então esses, eu vou usar 20 pixels. E eu vou guardar isso. OK. Vamos usar o Chrome e atualizar. E você verá que nossos primeiros títulos têm todos o mesmo tamanho divertido O próximo grupo de títulos também tem o mesmo tamanho divertido. Ufa. Muito legal, certo? Sim. Assim, você pode fazer com que as coisas pareçam iguais, mesmo que não sejam iguais. OK. Podemos continuar adicionando mais propriedades aqui, então vamos usar cores. Isso é cor de texto, não é muito intuitivo, eu sei. Há várias maneiras de colorir. Você pode usar o código hexadecimal, então pode ser como, hash, ff00 00, que é vermelho, ou você pode simplesmente escrever vermelho Mas quando você escreve a palavra vermelho, não há muitas variações de vermelho. Então, se você quisesse algo assim, bem, não há uma palavra para isso, eu não acho. Então, vamos salvar isso. Vamos escolher cores aqui, não contrapor, seja lá o que for. A cor tem que ser americana, lembra? E aqui podemos escolher Alice Blue. Isso é uma coisa? Vamos ver. Então, Alice azul E a razão pela qual está reclamando é porque não temos dois pontos ou ponto e vírgula no Então, vamos tentar isso de novo. Cor, aí está. Alice blue é meio que uma branca. E a água-marinha? Lá vamos nós. Legal. E você também deve ver as cores aparecerem logo antes do valor real. Ok, pinte aqui. Vamos escolher o vermelho. OK. E finalmente, esse aqui. Cor, vamos descer, usando minhas teclas de seta no meu teclado. Crimson é muito legal. Que tal um vermelho dourado escuro? Uau. Que nome de cor. OK. Guarde isso. Então você pode ver aqui, se você quiser que tudo isso tenha essa cor, basta copiá-lo e colá-lo. Mas então, se você quisesse mudar todos eles, você poderia ficar tipo, Oh, ok. Vamos fazer outra coisa agora. E quanto ao parente RGB? Hmm, eu nem sei o que é isso, para ser honesto. Mas RGP ou RGBA, poderíamos fazer isso. Tão vermelho. Vamos para 255, valor verde Vamos para 120, e um valor azul, vamos para 100. Esses são valores de 0 a 255 e, em seguida, um valor alfa, vamos para 0,5 Então é meio opaco, semitransparente Então aí está o número 0-1. Normalmente é uma fração. Então você poderia dizer 0,5. Ah, e aqui, veja isso, vem com um pequeno seletor de cores Ooh. Muito chique. Então, veja isso. OK. Legal. Então, o que eu estava dizendo anteriormente é que se você quisesse alterar todas essas cores, teria que copiar e colar, colar, colar, o que pode ser um pouco irritante Você pode ter dois pontos e vírgulas no final, mas isso não é necessário Ok, digamos isso. Vamos voltar ao Chrome e atualizar. Ok, então você pode ver esses quatro últimos têm a mesma cor. Você tem algumas cores diferentes na parte superior aqui. Fantástico. Agora, o que é realmente interessante é que quando você começa a mudar coisas dentro de um elemento. Então, vamos para o título um. Vou colocar isso em uma nova linha, o que não deve mudar nada. E então eu vou mudar esse número um para uma letra um. E eu só quero te mostrar que nada realmente muda. É uma atualização, só o texto. E essa, eu também quero mudar sua cor. Então, a maneira como eu faço isso é colocando um elemento span ao redor dele, e então podemos colocar um atributo de estilo lá e mudar a cor para azul. OK. Vou salvar isso e depois atualizar. Portanto, a menos que você realmente especifique a cor, ela deve herdar a cor de seu elemento pai Então, se eu escrever Cliqre e disser inspecionar, você verá que esse intervalo tem uma cor azul e seu pai tem uma cor dessa cor pronta Ok, se você quiser mudar isso com muita facilidade, basta selecionar essa cor e, em seguida, aqui deve dizer estilos, e isso deve mostrar de onde vêm todos os estilos. Então, herdada de H um é a cor vermelha. Então, se eu desmarcar o azul, a cor vermelha ou essa cor pronta de seu elemento pai aparece M: Ok. O que eu quero mostrar agora é se você der a um elemento várias propriedades com o mesmo nome. Então veja isso. Vamos ao código do Visual Studio. E vamos adicionar outra cor aqui. Vamos escolher algum tipo de verde amarelo. Parece bom. OK. E então, talvez para o título dois, mudemos isso para cor e optemos por um azul ardósia escuro. OK. Agora, talvez você já saiba o que vai acontecer, talvez não saiba enquanto estamos nisso, eu realmente não gosto quando as coisas continuam para a direita. Então, como faço para mudar isso? Bem, eu quero escolher algum tipo de configuração. Então eu acho que é comando e vírgula. Pronto, ou você escolhe o código e as configurações e, em seguida, basta tocar nas configurações ali. Agora, o que eu quero fazer é pesquisar rap, encurtar palavras. A linha deve terminar, e eu quero que ela continue. Então, vamos ver se isso funciona. Sim. Isso significa que ele não continua indefinidamente para a direita. Simplesmente embrulha muito bem. Então essa é a minha idade de dois anos, e tudo ainda está na linha 14. Ok, obrigado. Digamos isso. Comando S e Comando R para atualização. OK. Então, indo até aqui, vamos dar uma olhada. Hmm. Então você verá que a cor da propriedade, a que foi adicionada por último, é a que o navegador aplica, e você pode vê-la aqui. É vermelho, aquele vermelho, e depois fica amarelo verde, está riscado porque colocamos essa propriedade por último. A mesma coisa para o título número dois aqui. Então, se inspecionarmos essa, a cor azul ardósia escura tem precedência sobre essa outra cor RGBA porque foi Mas esse intervalo com a cor azul ainda tem a cor azul porque é seu próprio elemento, e a cor que ele herdou desse H é substituída por sua cor azul, especialmente porque é um estilo embutido Agora, o que mais podemos fazer? Bem, veja isso. Se eu tocar em um desses valores de propriedade e pressionar Return, posso começar a inserir outro. Então, vamos ver o plano de fundo. Vamos escolher cores. E aqui, o que é o Azure? Vamos para o Azure. Realmente não aparece. Então, talvez para uma haste amarela dourada clara. A realmente não aparece muito bem. Que tal optarmos por um vermelho escuro, vermelho indiano. Lá vamos nós. É muito legal. E, novamente, se você atualizar aqui, esse estilo não vai persistir Não será salvo em seu arquivo. Você está apenas testando coisas nesta versão que o navegador está enviando para você aqui. Ok, então vamos entrar e colocar algumas cores de fundo. Então, código do Visual Studio. Bem, vamos usar a cor de fundo. Ok, vamos escolher um cinza verde, verdes frios. Verifique se você tem vírgula entre as propriedades Então, a cor de fundo aqui, mas o que aconteceu com o tamanho da fonte meio que desapareceu. Então, vamos usar o tamanho da fonte e, por algum motivo, ele simplesmente apaga os 30 pixels Portanto, mesmo que esteja preenchendo automaticamente as coisas para você, basta verificar o que está fazendo E então podemos copiar e colar isso aqui e talvez aqui. OK. Neste caso, vamos usar a cor de fundo. Uau. Um índigo. OK. Se algumas dessas coisas que aparecerem ficarem irritantes, você poderá desativá-las nas configurações Talvez você precise apenas pesquisar eles são chamados ou, você sabe, geralmente acessar as configurações e alterar algumas coisas de acordo com sua preferência. Tipo, todas essas coisas como, Gus, vá lá. Só estou tentando escrever coisas aqui. Índigo, Índigo, Índigo. E você pode ver como isso está ficando muito confuso Tipo, Onde está minha mensagem? Onde estão meus estilos? Tipo, Whoa. E tudo isso está nos levando à próxima lição. Não se preocupe É por isso que vamos progredir. Ok, vamos para o Google Chrome, atualização. Ok, tudo agora tem uma cor de fundo. Fantástico. E se mudássemos isso, teríamos que mudar cada linha. Então, uma, duas, três, quatro, cinco linhas para a roxa, uma , duas, três, para as verdes. Uau. Ok, agora vamos ao Github Desktop. Temos um novo arquivo de estilos embutidos, então crie estilos embutidos chamados HTML Comprometa-se com o Maine e, em seguida, pressione o Origin. O que é realmente importante agora é que se você precisar da minha ajuda para alguma coisa, gostaria que você a enviasse para sua conta do GitHub para que você possa dizer: Ei, as coisas não estão funcionando Aqui está meu link, por favor. Oi, eu. E então você pode me enviar uma URL. Então você pode dizer: Ok, vamos para o GitHub. Dot com, e você pode acessar seu repositório de Experimentos. Em seguida, você pode acessar suas configurações. Você pode acessar suas páginas e, em seguida, acessar seu site ao vivo aqui. E então, como estamos trabalhando em estilos embutidos em HTML com pontos, você pode compartilhar esta página comigo, e então eu posso dar uma boa olhada nela, sabe? Espero que você esteja começando a ver como isso é divertido , legal e poderoso. Você pode fazer com que as coisas pareçam épicas e incríveis com bastante facilidade, mas deve ter notado que isso pode levar muito tempo e que pode levar muito tempo para alterar o CSS de vários elementos que você deseja que tenham a mesma aparência. Então, na próxima lição, mostrarei como usar conjuntos de regras CSS e explicarei por que eles geralmente são melhores de usar. 14. 13 Regras de CSS: Com o conjunto de regras CSS, você especifica quais elementos deseja estilizar e, em seguida, escreve os nomes e valores das propriedades dentro das chaves Deixe-me contar os nomes oficiais de todas as partes de um conjunto de regras. Isso tornará tudo mais fácil de explicar e entender daqui para frente. A parte em que você especifica quais elementos HTR você deseja estilizar é chamada de seletor ou É onde você seleciona quais elementos estilizar. Esse seletor tem como alvo todos os elementos H um. Este tem como alvo todos os elementos da imagem. Abordaremos exemplos mais complexos de declarações do seletor posteriormente no curso A parte dentro das chaves onduladas é chamada de bloco de declaração Ele contém uma ou mais declarações separadas por ponto e vírgula, e um par de valores de propriedade é chamado No final de uma declaração, você coloca um ponto e vírgula Então, o que esse conjunto de regras diz é selecionar todos os elementos do cabeçalho e tornar o texto vermelho e o tamanho da fonte 50 pixels. O uso de conjuntos de regras torna seus arquivos HTML muito mais organizados e fáceis E você pode fazer algumas coisas poderosas com seletores, que abordarei mais adiante neste curso Ok, vamos começar a escrever um conjunto de regras baseado em CSS. Então, em vez de escrever um arquivo HTML totalmente novo com os elementos do cabeçalho e do corpo, vou apenas duplicar este Então, clique com o botão direito e duplique, e então eu pressiono Raton ou clique com o botão direito do mouse e toque em E eu vou chamá-lo de RuleSet. Estilos de conjunto de regras em HTML com pontos. OK. E então, dentro do código do Visual Studio, abrirei os estilos do conjunto de regras E você verá que é verde porque é novo. Então, isso é como dizer: Ei, é novo. Então, vamos entrar aqui. Vamos mudar para os estilos do RuleSet. OK. E então, dentro do seu elemento principal, vamos criar um elemento de estilo como esse. Então, abrindo e fechando a tag, e dentro do seu elemento de estilo, vamos escrever um pouco de CSS. Então, eu quero mudar todos os elementos H um. Bem, quando eu pressiono uma chave de abertura, isso deve criar uma chave de fechamento para mim dessa forma Você também pode colocar um espaço no meio. Eu parei de fazer isso Facilita um pouco a leitura. E então, quando pressiono tab, coloco meu cursor aqui. E então eu quero mudar o let's go para a cor de fundo. Então, cor de fundo. Bem, vamos usar preto porque isso é muito legal, certo? Então, Command S. Agora, vamos ao Google Chrome, e não temos isso aberto. Então, toque duas vezes nos estilos do conjunto de regras. E nada aqui mudou. Interessante. Então, se inspecionarmos isso porque isso vai acontecer, você escreve algo, espera que algo aconteça, e então isso não muda Então, vamos dar uma olhada nesse H, ok? Interessante. A cor de fundo é preta, mas foi apagada e a cor verde amarela foi aplicada Essa é a cor, mas a cor de fundo verde foi aplicada. Hmm. Então, o que está acontecendo aqui é que quanto mais específico for uma propriedade e um valor, mais o navegador vai favorecer isso. Ele vai escolher esse em vez de algo que não é tão específico. Então, estamos dizendo: Ei, todos os H, eu quero que vocês tenham uma cor de fundo preta. Esse estilo de elemento está dizendo: Ei, esse elemento muito específico, eu quero que você tenha uma cor de fundo verde. Então, se tivéssemos que desmarcar a cor de fundo aqui, ah, ela fica preta, o que é muito legal Então, vamos voltar ao código do Visual Studio. Vamos tirar a cor de fundo, cor de fundo de todas essas coisas. P. P. E você pode ver quanto tempo isso leva para fazer qualquer tipo de edição de valores CSS. Puf. Ok, isso parece um pouco mais gerenciável agora Então, eu vou guardar isso. Vamos voltar ao Chrome e atualizar. Ok, agora apenas os elementos do título 1 têm esse fundo preto, o que é ótimo. Vamos tentar outra coisa aqui. Vamos voltar aqui e dizer H unidades, vírgula, H dois, H três, H quatro Então você está basicamente dizendo aqui: Qualquer coisa que seja H um, H dois, H três ou H quatro, eu quero aplicar essa propriedade CSS a você ou a essas propriedades CSS. Então, comande S, vamos voltar ao Chrome. E agora todos eles têm aquele fundo preto. Ok, vamos voltar ao código do Visual Studio aqui. Isso parece ótimo. Fantástico. Agora eu quero mudar as cores apenas das cores H. Então, em vez de colocar um valor e uma propriedade de cor aqui, vou escolher H um e vamos escolher a cor. E que tipo de coral talvez. Coral. Sim. Incrível. E, novamente, aqui, provavelmente não vai funcionar porque já existem estilos de cores embutidos Então, vamos ao Chrome, atualize. Nada deve mudar. Entendi, entendi, entendi Então, vamos remover as propriedades da cor. OK. Tudo isso. Adeus. Embora fosse uma cor bem legal. Então, o que eu vou fazer é colocá-lo aqui, mas eu quero apenas, você sabe, torná-lo invisível, mas eu ainda quero vê-lo. Então, como eu faço isso? Bem, isso se chama comentário. Então você seleciona um monte de texto e, em seguida, pressiona Command e a barra, e isso cria um comentário para você Você também pode escrever seu próprio comentário avançando com a barra Asterix e, no final, com a barra Asterix e avançando com a barra. O navegador não lê isso. Muito legal. Ok, vamos tirar essas cores. OK. Isso parece muito bom. Muito mais gerenciável. Então, vamos salvar isso. OK. Vamos voltar para a atualização do Chrome Ok, então cabeçalho um, título um, grates. O resto deles tem uma cor preta. Ok, então vamos voltar ao código do Visual Studio. Vamos colocar uma cor padrão para H one, H 2h3h4. Vamos escolher uma espécie de verde. Vamos escolher o verde. Ok, salve. Então, o que deve acontecer aqui é que H um, H 2h3h4, eles devem ter uma cor verde, e então H um deve ter uma cor de coral porque sobrescreve esse estilo E como esse foi escrito por último, o navegador deve então escolher aquele em vez do que não foi escrito por último. OK. Atualizar. Lá vamos nós. Isso funciona. Então, título um. Vamos inspecionar. A cor do coral é aplicada. Vamos lá por causa da cor verde que é aplicada a H um, H dois, H três, H quatro. OK. Lá vamos nós. Agora, o span ainda tem uma cor azul porque ainda tem um estilo embutido Ótimo. OK. De volta ao código do Visual Studio. E quanto aos tamanhos das fontes? Bem, ok, vamos mudar algumas coisas aqui. Vamos usar um tamanho de fonte de 30 pixels. E então o que podemos fazer aqui é remover tudo isso. Uau. Muito trabalho lidando com estilos embutidos. Mas você pode usá-los se quiser. OK. Pode reclamar dessas coisas aqui, então vamos eliminá-las. OK. O único estilo embutido que temos é no span. Salve aí. Agora, tudo parece exatamente o mesmo, ou a cor de fundo. Na maioria das cores, o tamanho da fonte é um pouco mais parecido com o espaçamento em torno desse H quatro ou H três ou algo parecido Então, o que podemos fazer é ir para esse H um, h2h3, h quatro, e eu vou mudar a margem para Quem. Lá vamos nós. Isso é, você sabe, mudou tudo para exatamente o mesmo Não há margem agora. parece heterogêneo, o mesmo Exceto pela cor, é claro. Ok, então se você quisesse mudar isso, você poderia. Sim, isso parece muito bom. Agora, o que precisamos fazer é acessar desktop do Github e criar estilos de conjunto de regras com HTML, comprometer-se com o Maine e enviar Tudo bem. Então, esse é o básico do uso de conjuntos de regras CSS Eles são superiores aos estilos embutidos por alguns motivos. Em primeiro lugar, seu CSS é mais fácil de ler. Em segundo lugar, é mais fácil alterar a aparência de vários elementos usando o mesmo código. Copiar e colar entre atributos de estilo é uma grande perda de tempo e propenso a erros Em terceiro lugar, essa declaração seletora pode ser poderosa. Falaremos sobre isso na próxima lição. 15. Declarações de seletor de CSS: Embora os conjuntos de regras CSS tornem tudo mais organizado e fácil de ler, perdemos a capacidade de alterar estilos de elementos individuais É aqui que o poder das instruções seletoras se destaca, especialmente ao usar atributos de classe e ID em seus elementos HTML Você pode ver as declarações do seletor enquanto um professor seleciona quais alunos devem se levantar. Aqui estão alguns exemplos. Todas as garotas, por favor, podem se levantar? Todos os meninos com mais de 11 anos podem se levantar? Todas as meninas de olhos azuis com menos de 11 anos de idade Todos os estudantes que tocam um instrumento musical, mas não o violão, conseguem se levantar? Todas as garotas chamadas Susan podem se levantar? O aluno com o número de estudante 876221 pode se levantar? Você pode ver o quão genéricas ou específicas essas declarações podem ser. Eles incluem ou excluem. E é isso que uma instrução seletora CSS faz. Aqui estão alguns exemplos de como você pode selecionar todos os tipos de títulos, links enquanto eles passam o mouse, parágrafos que vêm depois dos títulos, imagens dentro dos parágrafos, elementos de ancoragem diretamente dentro dos elementos NAV As declarações do seletor são particularmente úteis quando você deseja alterar a elementos com o mesmo nome aparência dos elementos com o mesmo nome em diferentes partes do seu site, como os links na barra de navegação versus os links nos parágrafos do artigo, ou a imagem na barra lateral versus as imagens no resto do Para tornar isso ainda mais fácil, você pode usar atributos de classe e ID. Em qualquer elemento HTML, você pode adicionar uma classe e um atributo de ID. Um atributo de ID precisa ser exclusivo em uma página da Web. Você não pode ter mais de um elemento com o mesmo atributo de ID. Caso contrário, as coisas funcionam de forma imprevisível. Um atributo de ID não pode ter espaços. Se você quiser que um atributo de ID seja composto por várias palavras, use estojo de kebab, estojo de camelo ou estojo de cobra Depois que um elemento tem um ID, você pode selecioná-lo em CSS usando o símbolo de hash seguido pelo valor do atributo ID, como selecionar todos os elementos com o ID do banner do herói Isso deve ser apenas um elemento. Agora, um atributo de classe é uma forma de agrupar elementos ou classificá-los. Pense em coisas como cor dos olhos, sexo e idade. Você classifica elementos HTML dando a eles um ou mais nomes de classe em seu atributo de classe. O nome de uma classe não tem espaços porque um espaço significa outro nome de classe Como um atributo de ID, se você quiser que o nome de uma classe seja composto por várias palavras, use caixa de kebab, caixa de camelo ou caixa Quando um elemento tem um nome de classe, você pode selecioná-lo em CSS usando o símbolo de ponto seguido pelo nome da classe. Por exemplo, selecione todos os elementos com o nome da classe de fundo azul ou selecione todos os elementos do parágrafo com o nome da classe de legenda e fundo azul Agora, vamos brincar com nosso novo conhecimento sobre classes e IDs. Então isso é o que temos, mas agora eu perdi esse tipo de maneira de dizer a um elemento específico: Ei, eu quero que você seja vermelho ou eu quero que você seja azul, ou eu quero que você seja um verde amarelo ou um verde amarelo. Como fazemos isso com classes e IDs? Bem, vamos entrar nisso. Portanto, no código VS, altere essa cor de fundo de preto para nada agora. Então, vamos salvar isso. Vamos voltar ao Chrome e atualizar. Parece muito mais fresco. Parece muito mais fácil de ler, o que é ótimo. E então, sim, para alguns desses, eu realmente quero torná-los vermelhos. Então, vamos entrar aqui. E o que faremos é dizer qualquer coisa com uma classe de vermelho ou importante. Vamos dar uma cor de fundo ou talvez uma cor vermelha, muito vermelha. Lá vamos nós. Portanto, isso não é importante. É uma aula. Ok, legal. Então, como escrevemos uma classe em HTML? Fazemos isso como um atributo e atribuímos a ele uma classe de importância. Lá vamos nós. Vou copiar isso, colocar em H quatro, H um, H três. Ok. Eu vou guardar isso. Vamos usar o Chrome e atualizar. Ok. Então, alguns de nossos títulos agora estão vermelhos porque eles têm essa classe de importante, que vem dessa importante classe CSS Também podemos mudar isso para algo como laranja, laranja, vermelho. Que tal uma cor de orquídea? Lá vamos nós. E você pode ver com que rapidez isso atualiza tudo. É muito mais fácil mudar um monte de estilos HTML. Então, vamos colocar isso aí, ou criança, Orquídea ou criança. Não tenho certeza de como dizer isso. Ok. Isso parece bom. Ou o que dizer dessa cor que tivemos em um comentário? Além disso, você pode ficar tipo: Como faço um comentário em HTML? Porque não é o mesmo Bem, se você quiser comentar em HTML, selecione o texto que deseja comentar, pressione Command ou Control e avance a barra, e ele faz um comentário em HTML, que é um símbolo menor que É um ponto de exclamação e são dois traços no início E então, no final do comentário, você diz traço, traço, maior E você também pode ativar isso com muita facilidade simplesmente pressionando a tecla Command e avançando O mesmo acontece com o comentário CSS. Ok. Nesse caso, é muito simples ler que essa cor realmente será substituída Essa cor é um conflito muito simples. Então, podemos deixar isso acontecer. Então, Comando S, vamos ver o que acontece aqui. Ok, então isso mudou um pouco, só porque nós o inspecionamos Lá vamos nós. Essa cor coral é substituída por essa cor mais agradável. Eu nem sei que tipo de cor é essa. Aquele com um pouco de opacidade. Ok. Agora, vamos voltar ao código VS. Temos algumas aulas aqui. O que acontece se, neste caso, você tiver sua orquídea, mas eu também colocar um verde nela, como H um, H dois, h três, h quatro Bem, se for uma classe e houver um conflito , ela substitui a que não é tão específica Portanto, as classes são mais específicas do que apenas nomes de elementos. Mas o que é bem legal é que também podemos colocar uma cor de fundo aqui. Vamos escolher uma vareta dourada escura ou laranja escura. Lá vamos nós. E podemos ver o que isso parece. Provavelmente vai parecer muito nojento. E o que isso faz é colocar uma laranja escura nas mais importantes, o que é ótimo. Mas o que eu realmente queria mostrar aqui é que, se você colocar essa cor de fundo nesses quatros h1h2 h38 e salvar isso, ela os colocará em tudo Portanto, quando você tem uma propriedade ou declaração de cor, ela não sobrescreve todo o conjunto de declarações anteriores Isso aumenta. Somente se houver um conflito, então é: Ok, qual deles vamos escolher? Precisamos fazer uma escolha aqui. Agora, ainda temos esse estilo em linha azul. Vamos nos livrar disso. E em vez de uma classe, podemos usar uma classe. Podemos colocar uma identificação aqui e podemos dizer, aquele. Gosto de usar estojo de kebab. Você poderia fazer algo parecido com aquele, que é camelcase. Vamos usar isso por enquanto. E como você sabe, faça um ID em CSS. Criamos um símbolo de hash, depois colocamos aquele e depois colocamos nosso CSS aqui E a cor era azul. Lá vamos nós. Portanto, essa é uma maneira muito boa de separar seus estilos do HTML. Então, atualize o Command S. Nada deve mudar porque se inspecionarmos este, isso vem dessa declaração CSS daquele Ok. O que podemos fazer é também adicionar várias classes, dois elementos. Então confira isso. Vamos ao código VS aqui. E para alguns deles, vamos usar letras maiúsculas e classes. E eu vou copiar isso. Então, para esse título dois e esse título três, vou colocar uma classe adicional aqui, e você verá que há um espaço. Um espaço nesse atributo de classe significa que é outra classe. E temos Important, que tem uma cor de orquídea E então temos uma classe de maiúsculas, e podemos dizer transformação de texto e ir para maiúsculas Então, comande S e, em seguida, atualize o Google Chrome. Ok. Portanto, o cabeçalho um está em maiúsculas cabeçalho dois está em maiúsculas. Isso é muito legal. Sim. E você também pode tornar isso muito confuso para si mesmo Portanto, maiúsculas podem ter apenas uma transformação de texto de maiúsculas, mas também podem ter uma cor de uma cor que Rosa quente. Vamos fazer isso. E talvez uma cor de fundo preta. Então, talvez a ideia aqui por trás da classe maiúscula seja torná-la realmente fácil Então, Comando S. Vamos voltar aqui. Ok. Lá vamos nós. Então, se olharmos para o título três, veremos que há algumas coisas acontecendo aqui. Tem esse H um, h2h3, H quatro, um monte A única coisa que ele esconde é o tamanho da fonte de 30 pixels. A cor e a cor de fundo são substituídas por outros estilos Ela também tem uma classe importante, então tem aquela cor de orquídea, mas também é sobrescrita por essa classe maiúscula porque vem por último no Então, se mudarmos isso, colocarmos isso em primeiro lugar e o importante por último e salvarmos lá, a cor deverá mudar para orquídea novamente. Então, é mais refrescante, e assim é. Então esse é o título três, inspecione. Como o importante agora está mais abaixo no arquivo, vem depois, o navegador diz, legal, vamos usar essa cor em vez da cor encontrada na declaração em maiúsculas Então, finalmente, confira isso no título três, se tivéssemos que acrescentar aqui uma ideia de dizer, Sr. Jones. Eu realmente não consigo inventar um nome de identificação melhor. E vamos copiar isso. E diga, Sr. Jones, o que vamos fazer por você? Vou te dar uma cor de talvez vamos escolher uma madeira marrom Burly Vamos comprar Burly Wood. Ok. E mesmo que o Sr. Jones esteja no topo do seu elemento de estilo e você guarde isso, o que deveria acontecer é que ele se aplique. Então, inspecione você verá que o Sr. Jones, por ser uma identificação, por ser superespecífica, obtém essa cor de madeira corpulenta Hein. até mesmo sobrescreve as classes maiúsculas, e certamente sobrescreve a declaração H one, H 2h3h4 Ele até sobrescreve o importante, até mesmo sobrescreve as classes maiúsculas, e certamente sobrescreve a declaração H one, H 2h3h4. Ok. Mas acho que, finalmente, isso tem um ID do Sr. Jones, o que ainda pode sobrescrever isso é um estilo embutido Então, se dissermos estilo, cor, vamos escolher um Não, mas um violeta azul. Aqui vamos nós. Guarde isso. Você verá aqui, e agora é azul violeta. Porque o estilo do elemento é azul violeta. Então, isso tem precedência sobre todas as outras coisas. Agora, a única outra coisa que pode substituir esse estilo embutido de três títulos é uma palavra importante Então, deixe-me mostrar como escrever isso. Eu realmente não aconselho fazer isso, mas às vezes você precisa saber como fazer isso. Então, isso tem uma classe importante e maiúscula. Ele também tem um ID do Sr. Jones. Então, no ID do Burly wood, o que podemos fazer é colocar um ponto de exclamação e escrever importante. Vamos salvar isso e atualizar, e você verá que a propriedade CSS da cor da madeira Burley aparece A mesma coisa poderia ser feita talvez na cor H de uma cor, na cor H de três cores, na apricase Vamos usar rosa choque. Ok, vou guardar essa atualização aqui. Então, o rosa choque aparece. Isso significa que o azul violeta, a madeira corpulenta, a orquídea não apareceram Rosa quente. aquela palavra-chave importante, ela aparece. Agora, você também pode dar importância a esse valor de cor, esse valor de cor ou aquele valor de cor. E então, por causa de onde está, o navegador diria: Sim, vou escolher esse em vez deste na classe maiúscula Vamos experimentá-lo. Então, vamos até aqui e vá para Importante salve isso e depois volte para o Chrome e atualize Agora, de volta a Burywood , porque tem a identificação do Sr. Jones, e é daí que vem E também tem essa palavra-chave importante. E ele substituirá essa importante palavra-chave na classe maiúscula Então, as coisas podem ficar muito complicadas aqui. Não sugiro usar a palavra-chave importante, mas ela pode ser útil quando você está trabalhando com o código de outras pessoas ou com CSS de alguma outra equipe, algum outro serviço e, especialmente, se elas estiverem usando palavras-chave importantes. Agora, há muito mais maneiras de escrever declarações seletivas, e elas podem se tornar complexas e confusas Mas se você mantiver seu site simples e bem estruturado, não precisará entrar em coisas complexas. Na próxima lição, abordarei os conflitos de CSS e quais declarações têm preferência e por quê Isso evitará tantas dores de cabeça, prometo. 16. Teoria de conflito no CSS: Por padrão, um navegador aplica todos os estilos que têm como alvo um elemento de todos os diferentes conjuntos de regras com diferentes instruções selecionadas e estilos embutidos Mas o que acontece quando um elemento tem vários estilos conflitantes aplicados a ele, como a cor azul desse conjunto de regras, cor vermelha desse conjunto de regras e a cor verde amarela de um estilo embutido O navegador sabe em qual cor criar o texto desse elemento? CSS significa folha de estilo em cascata. A ideia por trás da cascata é determinar quais estilos são aplicados a um elemento quando há declarações conflitantes Cascata se refere à forma como os conjuntos de regras CSS caem em cascata da parte superior para a parte inferior de uma página e como eles interagem entre si para criar o estilo final Então, como o navegador decide qual estilo aplicar? Há três coisas que o navegador procura. Em geral, o primeiro é qual estilo foi escrito por último. O último geralmente é o aplicado. Em segundo lugar, quanto mais específica for uma declaração, maior a chance de o navegador escolhê-la em vez de outras declarações. Uma declaração dentro de um conjunto de regras aplicada a todos os elementos âncora não é tão específica quanto selecionar todas as âncoras dentro dos itens da lista dentro de listas não ordenadas dentro dos elementos NIV E isso não é tão específico quanto uma declaração dentro de um conjunto de regras, aplicada a todos os elementos com um ID de link especial. E ainda mais específico é um estilo embutido. Os estilos embutidos são os mais específicos. Os seletores de ID são os próximos mais específicos. Os seletores de classe são os próximos mais específicos e os seletores de elementos são os menos Obviamente, declarações seletoras conflitantes podem incluir tudo isso Portanto, meu conselho é manter as coisas simples e, quando algo não estiver funcionando conforme o esperado, dê uma olhada na especificidade das instruções do seletor Em terceiro lugar, a palavra-chave importante pode ser adicionada a uma declaração CSS para dar a ela a maior prioridade, substituindo todas as outras declarações, independentemente de quão específica seja a instrução do seletor ou da ordem das E se houver várias declarações conflitantes com a palavra-chave importante, o navegador volta à ordem e ao quão específica é uma declaração Ok, é importante saber essas coisas, porque quando seus elementos não parecem que você os codificou, geralmente esse é o primeiro lugar para começar a pesquisar Isso é ainda mais importante se você lidar com o código de outra pessoa, talvez o código de um membro da equipe ou algum código de modelo que você possa estar modificando Na próxima lição, falarei sobre mover seu CSS para um arquivo separado, o que torna tudo mais fácil de ler e escrever, com alguns benefícios adicionais. 17. 16 arquivos CSS separados: Embora o HTML e o CSS se amem e funcionem muito bem um com o outro, há boas razões para separá-los em seus próprios arquivos. O primeiro motivo é porque torna tudo mais organizado e fácil de ler e escrever Você se beneficia. Você não precisa rolar para cima e baixo ao alternar entre escrever HTML e CSS. Você pode até mesmo usar seu editor de código para ver o arquivo CSS em uma janela e o HTML em outra O segundo motivo é que, se você tiver várias páginas da Web com a mesma aparência, não precisará copiar e colar o CSS de arquivo em arquivo em arquivo Especialmente não toda vez que você faz uma pequena mudança. Isso é demorado e propenso a erros. Ter seu CSS em arquivos separados permite que vários arquivos HTML usem o mesmo CSS. Agora, como podemos realmente fazer isso? O primeiro passo é criar um arquivo CSS. Salve-o com uma extensão de arquivo CSS de pontos. Você pode deixá-lo na pasta principal ou colocá-lo em uma pasta. Gosto de colocar meus arquivos CSS em uma pasta chamada CSS. O segundo passo é mover o CSS do arquivo HTML ou escrever o CSS nesse novo arquivo CSS. O terceiro passo é dizer ao seu arquivo HTML que você realmente gostaria de usar esse arquivo CSS para estilizar sua página da web Fazemos isso adicionando uma linha como essa, tinta com um atributo de rolo da folha de estilo e um atributo HRF de onde esse arquivo CSS está E embora possamos adicioná-lo em qualquer lugar, o melhor lugar para colocá-lo é dentro do elemento principal da sua página da web Isso significa que o navegador sabe como exibir sua página da web antes de processar o que precisa ser exibido. É um elemento de link real, não um elemento âncora O atributo role informa ao navegador que essa é uma folha de estilo, e o atributo HF, assim como o elemento âncora, informa ao navegador onde encontrar o arquivo CSS Se você precisar relembrar como escrever caminhos em arquivos, assista à aula sobre nomenclatura, pastas e caminhos de arquivos E lembre-se de que as maiúsculas e minúsculas são importantes on-line e que a ortografia e os erros de digitação são a maior causa de bugs e erros Vamos ser práticos sobre isso. Vamos? Então, as coisas parecem interessantes. Eu não codificaria necessariamente um site como esse, mas espero que você esteja entendendo o que é possível, como as coisas funcionam, especialmente usando todas essas cores, cores de fundo e coisas assim Oh, eu quero limpar as coisas um pouco. Vou parar de usar as palavras-chave importantes porque isso só torna as coisas confusas e irritantes E sim. Podemos manter isso lá apenas para mostrar isso. Ok. Mas agora, você sabe, você viu o que eu tenho feito. Eu tenho meu HTML aqui. Eu tenho meus estilos aqui. Eu tenho que continuar navegando entre eles. E sim, existem maneiras de abrir o mesmo arquivo em duas abas diferentes ou ter uma tela dividida, coisas assim Mas há uma maneira mais fácil. Então, vamos criar um novo arquivo, chame-o de style dot css. Lá vamos nós. Deveria ter esse pequeno hash azul como ícone, ok? E aqui. Vamos cortar. Todas essas declarações e coloque-as neste arquivo aqui. Ok, e guarde isso. Em seguida, salvaremos este, definiremos estilos de regras, voltaremos ao Chrome e atualizaremos, e tudo acabará Por quê? Porque não vinculamos esse arquivo HTML ao arquivo CSS. Então, como fazemos isso? Bem, se você disser, Oh, eu não sei, basta pesquisar no Google. Então, como vincular o arquivo HTML ao arquivo CSS. Vinculando arquivos CS ao HML, o tutorial definitivo para você. E quanto ao W three Schools, HML? Tudo bem Vamos tentar isso. O que é CSS? Ta ta, ta, CSS interno. Já abordamos esse CSS externo. Aqui vamos nós. Link: URL, folha de estilo, estilos href Ok. Então, eu vou copiar isso. Vou voltar ao código VS. E em vez de um elemento de estilo, vou dizer folha de estilo Rl. Refresque neste elemento de link. E abordamos um link para um ícone favorito. Agora, isso é algo um pouco diferente. Está usando o mesmo elemento, mas é diferente. E porque estamos dizendo que é uma folha de estilo e o HF, onde encontramos esses estilos no CSS de pontos Als é chamado de estilo de pontos CSS. Então, vamos renomeá-lo com estilo de pontos CSS. Comando S. Vamos voltar ao Chrome. Atualize e voltaremos aos negócios. Incrível. Muito obrigado, Google e W three Schools, que geralmente é um recurso muito bom. Ok, agora, o que eu quero mostrar é que é muito fácil lidar com seu HTML aqui. Peça até que um membro da equipe faça o HTML e, em seguida, seus estilos existam em uma folha de estilos separada. Você pode até ter várias folhas de estilo. Mas o que eu quero mostrar é criar um novo arquivo aqui, e vamos chamá-lo de conjunto de regras dois. Estilos de pontos em HTML. E aqui dentro, vamos escrever nosso tipo Duc ou apenas digitar Duck Ooh. Olha isso. Então, se você tiver isso, seria muito útil. Quer que eu cubra isso de novo? Sim, basta digitar Duck for Duc, tipo ou documento. E se você tem a abreviatura Emmet instalada, que eu acho que você deveria fazer, basta pressionar Return, e isso cria um monte de coisas para você e isso cria um monte de coisas Ainda não cobrimos esse conjunto de metacarros. Ainda não abordamos essa questão da janela de visualização. Então, se você quiser, pode retirá-los e ele virá com um documento de título. Então, talvez você possa simplesmente dizer Rule set two. E então colocamos nossa tinta Linkage. Lá vamos nós. Já enrole as folhas de estilo e, em seguida, diremos style dot css. E dentro do nosso corpo, vamos escolher um H. Ótimo. Olá. E eu só vou economizar. Vamos verificar se isso funciona. E eu vou copiar isso. Vou colar isso. Vamos definir dois estilos. Tudo bem, funciona. Então você pode ver o quão poderoso isso é. Isso significa que eu posso criar vários arquivos HTML e ter apenas um arquivo CSS que controla todos os estilos desses arquivos HTML, o que significa que , se quisermos mudar do CSS em todo o site, então podemos apenas dizer a cor do plano de fundo. Vamos escolher um roxo. Voltamos ao Chrome, atualizamos, alteramos nesta página e isso também muda nesta página. Muito, muito legal. E também podemos adicionar mais alguns aqui. Então, vamos para a idade de dois anos. Nossa, isso é isso, isso , isso é legal E aos três anos, isso é importante. E lembre-se, podemos dizer que a classe é importante. E então, finalmente, quatro anos. Isso é maiúsculo. E talvez em maiúsculas, possamos colocar isso em um elemento span Ok, vamos guardar isso. Agora vamos voltar ao conjunto de regras dois. Ok, isso é maiúsculo. Isso mudou alguma coisa? Interessante Vamos dar uma olhada. Não, porque não colocamos a aula nisso. Ah, hein. Então, vamos colocar uma classe de maiúsculas Lá vamos nós. É muito importante testar seu código antes de enviá-lo. Lá vamos nós. Isso é maiúsculo Ok, agora, finalmente, nós realmente precisamos confirmar nossos arquivos. Então, vamos para o desktop do Github e escrevemos vários sets e nos comprometemos com o Maine e depois lançamos o Origin Fantástico. Agora, isso deve estar online em apenas alguns segundos ou alguns minutos. E agora mais uma coisa que eu quero mostrar é adicionar outro arquivo CSS a um arquivo HTML. No Visual Studio, esse é o conjunto de regras dois. Bem, vamos adicionar outro. Então, vincule as folhas de estilo Roll e vamos usar o CSS de estilo vermelho. Ok, vamos salvar isso e, em seguida, criaremos um novo estilo CSS de pontos vermelhos. E você viu o que eu fiz aqui? Eu disse Res. Então provavelmente é muito bom copiar e colar. Então, estilize vermelho. Eu vou copiar isso. E então eu vou tocar duas vezes sobre isso ou pressionar Return. Lá vamos nós. Estilo vermelho. Você quer copiar e colar para que, mesmo que tenha o nome errado ou tenha escrito errado, seja o mesmo aqui Se você começar a digitar coisas várias vezes, isso levará a mais erros Ok, então estilize vermelho. O que eu quero fazer é dizer corpo. Vamos fazer com que sua cor de fundo seja vermelha, ou isso vai doer muito nossos olhos Que tal um salmão? O salmão deve ser bom. Ok, Comando S. Vamos voltar ao Chrome. A regra é duas. Ok, regras definidas. Estilos. Ele não o tem porque não está incluindo esse novo arquivo CSS. Ok. Então, isso se torna muito legal e significa que, para páginas específicas, você pode incluir estilos diferentes. Então, temos os estilos gerais e, em seguida, temos o estilo CSS de ponto vermelho. Mas agora, no estilo CSS, se no topo, colocarmos um seletor de corpo e depois mudarmos a cor de fundo para um verde amarelo, o que acontecerá aqui? Você provavelmente sabe a resposta. Então, vamos economizar. Vamos usar o Chrome e atualizar. A regra define dois estilos, tem a cor salmão. Estilos de conjunto de regras, eles devem ter a cor verde. Ok. Mas se definirmos o conjunto de regras dois estilos e mudarmos a ordem das folhas de estilo, o que acontecerá? Ok, estilos de conjunto de regras, que permanecem os mesmos porque só tem uma folha de estilos que está incluindo. Segundo conjunto de regras, é verde. E por que isso? Vamos dar uma olhada no corpo. É porque o estilo vermelho é o primeiro, estilo no CSS é o segundo. Então diz: O verde amarelo veio por último, então eu vou usar isso. Há um conflito. Vou usar o que foi escrito por último. E agora vamos comprometer tudo isso. Adicione uma nova folha de estilo. Sim, isso é ótimo. Ok, vá para o Maine. Vá até a origem. Lá vamos nós. Agora você pode criar quantos arquivos HTML quiser , todos usando os mesmos estilos. Isso é poderoso. E você pode adicionar vários arquivos CSS a uma página HTML. Às vezes, uma página precisa de estilos adicionais ou você precisa vincular a uma folha de estilos que existe on-line. Quando você vincula vários arquivos CSS ao seu arquivo HTML, a ordem em que você os escreve será importante se houver algum conflito de estilo. Agora, você sabe muito sobre CSS e HTML e como eles se misturam para criar sites incríveis. É hora de dançar. Oh, uau. Ok, no restante do curso, criaremos um site real, que pareça legal e que faça sentido quando você o compartilha com o mundo. 18. 17 comentários: Antes de criarmos um site, quero mostrar a você como escrever código que o navegador ignora Isso significa que você pode deixar notas ou comentários para si mesmo e também ocultar vários códigos que não deseja que o navegador leia. Esse recurso está disponível em todas as linguagens de codificação, mas parece diferente em cada uma Então, em HTML, você escreve um comentário como este. Isso é um símbolo menor que, um ponto de exclamação, dois traços, o comentário, seguido por dois traços e um Para ativar e desativar um comentário em uma linha inteira no código VS, pressione a barra de comando no Mac e a barra de controle no Windows Também prefiro deixar um espaço antes e depois do comentário para facilitar a leitura. Agora, em CSS, você cria um comentário como esse. Isso é uma barra frontal e um asterisco, o comentário seguido por outro asterisco e uma barra frontal. Novamente, para ativar e desativar um comentário em uma linha inteira no VS Code, pressione Command forward slash no Mac e Control forward slash no Windows Ok, agora que você entende os comentários, vamos começar a criar nosso site. 19. 18. Vamos criar um site: Nas próximas aulas, vou programar um site para meu personagem de desenho animado favorito, Reckitt Quero que você faça o mesmo e acompanhe, exceto com seu personagem fictício, talvez de um filme, desenho animado, série, história em quadrinhos ou livro Você pode até mesmo criar o seu próprio. Então, comece escolhendo um personagem para o qual codificar um site. À medida que criamos o site, fique à vontade para se desviar, jogar, experimentar e experimentar quando quiser Eu quero que você faça este site seu. E quando você comete erros e depois os descobre, você ganha muita experiência valiosa. Então, vamos embora. E na próxima lição, mostrarei como planejar o código do seu site. Sim, parece chato, mas vai te ajudar a se tornar um ninja programador 20. 19. Planejando seu site: Eu sei que você não quer ouvir isso, mas o planejamento torna a codificação de sites muito mais fácil e rápida Mesmo com um site simples, planejamento ajuda muito. Para mim, planejar é como olhar um labirinto de cima e desenhar uma raiz É um mapa, e programar é como correr por aquele labirinto seguindo o É possível sem um mapa, mas é muito mais fácil com um. Sério, sem um plano, poderíamos programar desnecessariamente por dias, não queremos isso Então, se você ainda não o fez, escolha um personagem para criar um site simples. Vou criar um site para o Record Rolf. Não importa qual site eu esteja criando e não importa se estou fazendo apenas o design ou o design e a criação, eu esboço algumas opções de como um site poderia ser Eu faço isso rapidamente e omito detalhes. Quadros brancos, diários e blocos de papel são ótimos para isso. Em seguida, com base nos esboços que fiz anteriormente, crio o que chamo de wireframe de caixa É onde eu desenho os elementos HTML como caixas, dou nomes a eles e indico quais caixas ficam dentro das outras caixas. Não tento planejar tudo de uma só vez, e costumo tirar uma seta de uma caixa e preencher os detalhes posteriormente, em uma parte separada da página ou até mesmo em uma nova página. Novamente, quadros brancos, papéis e diários são Você pode usar um aplicativo no seu computador ou iPad, se quiser. Tudo o que você precisa é de campos de texto, retângulos e círculos. Criar seu wireframe de caixa digitalmente permitirá que você adapte seu planejamento à medida que avança, o que é útil quando você é iniciante, mas não se distraia com os Precisamos de um mapa aproximado, não de um design perfeito em pixels. Na verdade, criaremos nosso site no navegador enquanto codificamos neste curso. Escolheremos as cores, as fontes, os tamanhos, etc., enquanto codificamos Ok, deixe-me mostrar o planejamento do meu box wireframe. Ok, vamos começar a planejar. Vou usar alguns marcadores aqui. Eu tenho um vermelho. Eu tenho um preto. O que você usa realmente não importa. Mas comece com o tipo amplo de planejamento do site. Vai ter um cabeçalho, vai ter a parte principal e depois o rodapé Deixe-me fazer assim. Cabeçalho. Quem está acordado. Principal. E então tudo isso estará dentro do elemento principal do corpo. Tudo bem? Ok, agora, dentro de cada um deles, o que vai ser o quê? Então cabeçalho. Vamos fazer isso primeiro. Vamos pegar um cabeçalho. E eu quero, como um avatar ou uma foto de perfil aqui de Rece Ralph E então eu quero um H. É aí que vai estar o nome dele. OK. Então, o que podemos fazer aqui é, você sabe, de um modo geral, isso entra em detalhes mais específicos aqui Portanto, isso pode ser um div com uma imagem de fundo ou pode ser uma imagem Eu abordarei essas duas opções. Este será um H com o nome dele. Foto do perfil. OK. Talvez eu precise sacudir isso um pouco. Então, a seção principal, isso poderia ser, talvez um H dois. Diz sobre Ralph. Então temos, tipo, um parágrafo sobre ele. Então, podemos colocar uma imagem talvez com ele e seus amigos ou talvez uma boa foto sozinho. Então temos outro H dois aqui. Talvez essas possam ser as características dele, então alguns itens, você sabe, como características. Em seguida, dois anos com seus amigos. Também é uma lista. Ok, e tudo isso está dentro do elemento principal. Ok, então temos H dois sobre Este pode ser um parágrafo sobre uma imagem. Olá dois, o personagem morre. Nossa, que palavra longa Isso pode ser uma lista não ordenada ou uma lista ordenada. Vou escolher uma lista ordenada só porque é diferente de uma lista não ordenada, e haverá itens da lista lá e H dois, amigos E isso pode ser uma lista ordenada com itens I ou itens de lista, além de âncoras para que possamos vincular a eles. OK. Em seguida está o rodapé Então, acho que isso precisa ser particularmente difícil ou complexo. Oh, vamos colocar uma etiqueta de parágrafo lá. Então, o elemento de rodapé e então isso pode ser apenas P mais etiquetas de ancoragem ou elementos de ancoragem Ok, então temos nosso corpo. Então temos o cabeçalho, o rodapé principal dentro do corpo. Dentro do cabeçalho, haverá uma pomba ou uma imagem no H one Temos nossos principais elementos. Há algumas coisas dentro do elemento principal. Em seguida, temos o rodapé e, dentro do rodapé, há apenas uma etiqueta P com alguns A's ou elementos de ancoragem Ok, então esse é o meu planejamento. Você poderia limpar isso. Você poderia fazer isso digitalmente. Você pode ver como passei de detalhes amplos para detalhes específicos, e não é um site muito complicado. Não há muitos elementos dentro dos elementos dentro dos elementos. A maioria dos elementos dentro dos elementos que vamos ver está por aqui quando há vários elementos âncora dentro dos elementos da lista dentro dos elementos da lista não ordenados Mas haverá apenas um elemento de lista não ordenado lá. Se quiséssemos, poderíamos separar cada uma dessas seções em uma pomba ou elemento de seção, mas na verdade não precisamos A outra coisa que talvez eu queira acrescentar é apenas uma pequena legenda aqui, para que pudéssemos chorar e colocar isso lá e o ponto P. Legenda. Então, um parágrafo com uma classe de legenda, e pode haver coisas que adicionamos à medida que avançamos, mas esse é o nosso planejamento aproximado Sabemos o que precisamos fazer. Está bem claro. 21. 20. Configure seu site básico: Vamos ser nerds e configurar nosso repositório e escrever o código HTML e CSS básico para o site do nosso personagem Você pode consultar o PDF dos elementos HTML comuns ao escrever seu HTML e as propriedades CSS comuns do PDF ao escrever seu CSS. E vou revisar todo o código enquanto o escrevo. Mas se quiser, você pode pedir ajuda ao Google ou algo como o Chat EPT Ok, então eu vou configurar meu site. A primeira coisa que quero fazer é abrir a trabalho do Github e acessar o repositório File New Vou digitar Ralph para a descrição de Rect Ralph , os sites de Reck E Ralph Reck E O caminho estará nos downloads. Não quero me ler, ser ignorado, não, licença, não. Então, vamos criar esse repositório. Agora, o que eu quero fazer é abrir isso no código VS, possamos arrastar essa pasta para o VSCode, ou podemos ir para o repositório e mostrar no Finder e depois arrastá-la de lá, ou podemos ir repositório e abrir R. Muito legal, certo? Agora, a primeira coisa que quero fazer é criar um novo arquivo, e vou chamá-lo de HTML de ponto de índice. A razão pela qual estou optando por um arquivo HTML de ponto índice é porque, se o navegador acessar nosso site e não especificarmos qual arquivo HTML carregar, ele procurará um arquivo HTML de ponto índice. Você também pode nomear um HTML de ponto padrão, mas o HTML de ponto de índice é bastante normal. OK. Em seguida, vou digitar Doc ou doc type. Lá vamos nós. HTML, e então vou digitar Doc e usar essa abreviatura de TI para obter todo esse tipo de As tags HTML. Em seguida, recebi as etiquetas na cabeça e também as etiquetas no corpo. Você realmente não precisa se preocupar com esse idioma EN porque você pode não falar inglês, então poderíamos realmente retirá-lo. Não faz muita diferença. Este conjunto de carros UTF oito não faz muita diferença no momento, mas vou deixar isso em mente que pode ser útil quando começarmos a fazer algumas coisas responsivas mais tarde no O título, eu vou escolher Racket. Ralph. Em seguida, vou colocar um link, mas em vez de folhas de estilo, vou escolher um ícone e o HRF Bem, eu ainda não tenho nenhum arquivo ou pasta. Então, vamos ao Finder. Dentro da pasta Ralph. Vamos escolher uma nova pasta. Vamos chamá-lo de IMG. Se você não quiser criá-los no seu localizador, você também pode criá-los dentro de um código VS E eu vou criar outro chamado CSS. E aqui, vou dizer dentro dessa pasta atual em que estamos, que é a pasta raiz principal, e depois entrar na pasta IMG Eu quero encontrar Rolf icon dot PNG, talvez. Não tenho certeza. Teremos que verificar isso. Vamos embora. Encontre alguma coisa. Estou economizando à medida que avança. A propósito, você também deveria. É muito, muito útil caso você pressione Fechar ou algo assim e não tenha salvo. Ok, no Google Chrome, vou pesquisar por Reck it Rolf Vamos usar imagens. Esse é bem legal. Tudo bem, vamos nessa Vou clicar com o botão direito do mouse e, em seguida, posso realmente usar isso como está. Então, eu poderia dizer copiar endereço do link, mas na verdade quero que seja um ícone favorito ou um ícone na minha estrutura de arquivos ou pastas Então, vamos Copiar endereço do link ou Copiar endereço da imagem. Lá vamos nós. Eu quero colar isso e , em seguida, Command S, salvar para baixar. Fantástico. E então vamos colocar isso na pasta de imagens. Ok, é um JPEG, e então eu vou renomeá-lo como eu o chamo, Rolf icon Então, vou copiar tudo isso, voltar ao código do VS e colar. Ok, então temos o ícone. Vamos verificar se isso funciona. Vou salvar, entrar no Chrome, entrar no Finder, na verdade, e clicar duas vezes no HTML do ponto de índice E lá vamos nós. Está aqui. Uau. Ali. Fantástico. Agora, a próxima coisa que precisamos fazer é adicionar um pouco de CSS e começar a configurar nosso site. Então, vamos ao código VS novamente. Vamos colocar outro link aqui. Tem um rolo de folha de estilo e, em seguida, HRF, esta pasta atual Em seguida, dê uma olhada na pasta CSS. Em seguida, procure por style dot CSS. Fantástico. Guarde isso. Vamos até a pasta CSS aqui, crie um novo arquivo chamado style dot CSS. E aqui, o que eu quero fazer é pegar meu corpo e verificar se isso está realmente funcionando. Vamos escolher uma cor de fundo de chocolate. Legal. Guarde isso. Depois, dentro do Chrome. Vamos atualizar. Fantástico. A cor do chocolate aparece. Isso significa que o CSS está funcionando. Agora, de volta ao arquivo de índice, vou ao meu corpo porque precisamos adicionar algumas coisas aqui. Em seguida, vou adicionar um comentário. Eu vou dizer que é aqui que eu quero meu cabeçalho. É aqui que eu quero meu elemento principal e é aqui que eu quero meu elemento de rodapé Isso nos ajuda a configurar as coisas muito bem. Em seguida, também posso escrever no meu elemento de cabeçalho. Vou adicionar alguns espaços lá ou novas linhas. Em seguida, colocarei meu elemento principal aqui. Eu posso conseguir uma escritora, escrever. E então Puta Okay, então isso parece muito bom Vou comandar S, salvar isso, depois ir para a área de trabalho do Github e, em seguida, vou dizer o Commit inicial E então, talvez para a descrição, eu possa dizer configuração, CSS, imagens e h2m up básico OK. Comprometa-se com o principal e depois publique o repositório. Ok, aqui está onde diz: mantenha esse código privado ou não, porque é aqui que o estamos postando no github.com Vou manter isso verificado para o caso de você verificar. Mas, se possível, desmarque isso. Você não quer que esse código seja privado, você quer que seja público porque queremos transformar esse repositório em uma experiência de páginas que qualquer pessoa possa acessar Ok, mas vou verificar isso caso você queira saber o que fazer. Ok, publique o repositório. OK. Ótimo. Agora o que? Agora vamos para o Google Chrome. Abrimos uma nova guia, digitamos gitab.com e aqui você verá seu nome de usuário cortar seu personagem de desenho animado, seu personagem de filme, para quem você decidiu Então, vamos tocar nisso. Vamos para as configurações. E aqui, vá até as páginas. E aqui. Oh, atualize ou torne esse repositório público para habilitar páginas Então, se você verificou, eu quero manter meu código privado, você tem duas opções agora. Você pode atualizar, o que significa que precisa pagar, ou tornar esse repositório público Hmm. OK. Então, como fazemos isso se não queremos pagar ou vamos para o geral, o topo aqui. Desça até a Zona de Perigo altere a visibilidade do repositório Vamos mudar para público. Há algumas coisas que você precisa percorrer ou obstáculos que você precisa superar aqui Então, sim, eu quero fazer isso. OK. Eu entendo. Torne esse repositório público. OK. Depois de fazer isso, se você tornou seu repositório privado ou não, vá para as páginas E então aqui, implante a partir da filial. Isso é exatamente o que queremos. E então a ramificação que vamos implantar é a principal. Ok, salve. Agora, isso vai levar um pouco de tempo, talvez um minuto. Então, de vez em quando, basta atualizar. Eu sei que você quer que as coisas sejam instantâneas agora, mas seja paciente. Ok, vamos tentar atualizar. Vamos ver o que acontece aqui. Ok, ainda está sendo construído a partir da filial principal. Casco, casco. Ok, vamos atualizar. Mmm Ok, vamos esperar mais alguns segundos. Deixe fresco. Ok, aí está. Seu site está ativo em HTTPS, Colon forward slash forwardslash, seu nome de usuário dot github dot IO slash seu nome de usuário dot github dot IO slash Ok, então vou tocar em Visitar o site. E lá vamos nós. Tudo deveria estar funcionando. Você tem seu pequeno ícone favorito. O fundo também é laranja. Agora, neste ponto, você pode começar a ver se as coisas estão funcionando ou não. Se a cor do plano de fundo não for a que você especificou , você tem um problema de CSS. Se você não conseguir ver seu ícone favorito, talvez tenha um problema de caminho de arquivo ou de diferenciação de maiúsculas e minúsculas Agora, pode haver algumas coisas que comecem a acontecer aqui. Então, vamos entrar no código VS. Vamos estilizar. Vamos mudar essa cor de fundo para marrom, ou vamos para verde ou verde amarelo. É bem diferente do chocolate. Salvar. E agora vou voltar para o desktop do Github Atualize o estilo no CSS. Ótimo. Comprometa-se com a origem principal e push. Ok, vamos voltar ao Chrome. E então, dentro do Github, dentro do seu repositório, vamos ao código Vamos ao CSS. Vamos usar o estilo CSS. Ok, então isso foi atualizado. É verde amarelo. Agora, se você acessar sua página e atualizar e ela não estiver verde e amarela, hmm, isso pode ser algumas coisas A primeira coisa é que pode levar algum tempo para realmente ser atualizado. Não deve demorar muito. Não deve demorar mais do que um minuto. Então, o que você pode precisar fazer é botão direito do mouse e tocar em inspecionar. Você também pode pressionar Command Alt I ou Command Option I. Depois de ativar o elemento e espectro, você poderá atualizar Isso pode ajudar porque o que pode ter acontecido é que seu navegador pode ter armazenado em cache seu arquivo CSS, então ele não acredita que haja novas alterações Então, basicamente, basta carregar uma versão antiga do seu arquivo CSS. Então, vamos atualizar isso mais uma vez. Não. Então, o que vamos fazer é entrar na cabeça, digitar, tocar no estilo de pontos css e clicar com o botão direito para abrir uma nova guia. Então, isso ainda diz chocolate. Então, vamos atualizar. Oh, verde, amarelo. Interessante. Então, se voltarmos aqui e atualizarmos , isso ainda não funcionará Então, o que talvez precisemos fazer é tocar duas vezes aqui, colocar um ponto de interrogação, digitar V igual a um ou outro número se você já usou V igual a um e Lá vamos nós. Agora, isso é exatamente o que está fazendo. Ele está armazenando seu arquivo CSS em cache. Então, se você realmente quer que seu CSS seja atualizado, e ele não está atualizando, quando estiver codificando em seu arquivo HTML, talvez seja necessário colocar um ponto de interrogação e V é igual outro número depois desse E isso significa que ele sempre receberá a versão mais recente do arquivo. Então, vamos salvar isso. Vamos ao estilo e vamos mudar isso também. Vamos escolher uma vara verde verde ou cinza ou dourada. Vamos para Goldenrod Guarde isso. Vamos até Get up Desktop e podemos digitar testando o cache ou o cache do navegador E então vá para a origem. Legal. Vamos voltar a não ser essa. Não essa, essa. Então, vamos atualizar aqui. Então, o CSS diz Goldenrod. Vamos gravar Rolf. Vamos atualizar aqui. OK. Então, isso ainda diz style dot CSS. E acho que o que está acontecendo é que, na verdade, está cache o arquivo de índice Esteja aqui, bem, ainda diz style dot CSS. Não há V igual. Então, vamos ao nosso código aqui, vamos ao HTML de pontos de índice. E diz que V é igual a dois, certo? Sim. Então, atualize aqui novamente. Se isso ainda estiver acontecendo, tudo bem, está atualizado. Mas se isso ainda estivesse acontecendo, o que poderíamos fazer é digitar o ponto de índice HTML e dizer, Ponto interrogação V é igual E então ele deve trazer sua última página HTML de pontos de índice. Ok, então isso era um monte de coisas extras sobre armazenamento em cache, e às vezes é muito frustrante quando você só quer testar se algo está funcionando online, e não está, e deveria estar Provavelmente é por isso. Ele. Agora que você escreveu a estrutura básica do seu site, podemos começar a codificar as seções do site Para cada seção, escreverei primeiro o HTML e depois o CSS e depois alternarei entre o HTML e o CSS até que esteja certo antes de passar para a próxima seção. E, claro, vou me referir ao wireframe da minha caixa à medida que avança. Nas próximas lições, escreveremos o código para o cabeçalho, a seção principal e o rodapé do nosso site À medida que avançamos, também atualizaremos o código que afeta todas as partes do site. Então, vamos para a próxima lição, onde escreveremos o código para nosso elemento de cabeçalho. 22. 21 O cabeçalho de sites: Ok, vamos escrever o HTML e CSS para o cabeçalho do nosso site. É um cabeçalho bem simples e já temos nossas tags de cabeçalho em vigor. Existem alguns bots complicados, com certeza, mas nada que não possamos lidar, especialmente com a Internet na ponta dos dedos Ok, vamos fazer o código HTML e CSS para nosso elemento de cabeçalho e os elementos internos. Então, dentro do código do Visual Studio, vamos até o cabeçalho aqui e vou escrever IMG para imagem, dando a ela uma fonte de barra de pontos Então, olhe dentro dessa pasta e vá para a pasta de imagens, e então vamos para Rolf icon dot JPEG Mas provavelmente precisamos de outra coisa. Não quero que o ícone seja igual a essa foto do perfil. E então, se alguém tem deficiência visual, o navegador gosta de fornecer uma descrição para a imagem só porque, se não consegue vê-la , pode entender lendo ou ouvindo. Ok, então podemos dizer, a foto do perfil de Ralph ou Racket Ralph Vamos mudar isso para um tipo normal de apóstrofo. Racket Rolf . Figura. Lá vamos nós. Se você quiser colocar uma cotação dupla aqui, ele vai reclamar Portanto, há maneiras especiais de fazer aspas duplas quando você está tentando colocá-las dentro de um atributo Se fizermos um rápido Google para isso, vamos procurar aspas duplas em HTML, como codificar aspas duplas via HTML. Ok, código amigável, código numérico hexadecimal. Então, tente citar assim para copiar isso. Coloque-o lá. Ok, foto do perfil de Rick Ralph. OK. Então vamos ao Google Chrome. Vamos atualizar esta página. Você verá que, se inspecionarmos isso aparece com uma aspa. Muito legal. Tudo bem. E se você tivesse aspas simples aqui, como você faria uma citação única? Boa pergunta. Então, vamos fazer A, aspas simples em H TO. Lá vamos nós. Vamos tentar esse. Então copie isso e coloque isso ali. Então, comande S. Ok, grave a foto do perfil de Rolfe Legal. Ok, vamos voltar ao código do Visual Studio. E aqui eu quero colocar um H e dizer destrua-o. Ralph. Ok, vamos guardar isso. Vamos ao nosso navegador e atualize. Fantástico. Agora, eu quero que isso fique no meio, por favor. Então, vamos ao VSC. Vamos usar o estilo de pontos CSS. E então vamos para o cabeçalho. Em seguida, diremos texto Aline center Sim, salve e atualize Perfeito. Agora, quero dar a isso uma cor de fundo. Então, vamos ao código VS novamente. Cor de fundo. Eu quero algum tipo de azul, mas não apenas um azul normal, então vou optar pelo RGB Vou pressionar Enter em vermelho. É um valor de 0 a 255. Mas agora, vou escolher zero tipo zero, tipo zero, e então vou tocar nisso e, em seguida, o código VS exibirá isso. Em seguida, selecionarei um belo azul. Isso parece bom. OK. Comando S. Vamos não para o código VS, mas para o Chrome. OK. Isso parece bom. Mas há uma borda estranha ao redor dela. Então, o que isso significa é que está no HTML ou no corpo. Então, o que podemos fazer é no código VS, vamos colocar isso como um corpo de vírgula HTML Definiremos a margem, que define a margem superior, direita, inferior e esquerda como zero. Em seguida, também definiremos o preenchimento como zero para HTML e corpo Então, Command S, vamos voltar ao Chrome. Lá vamos nós. Desapareceu. Então, alguns navegadores têm isso no HTML, alguns navegadores têm no amigo, mas normalmente há algum tipo de margem ou preenchimento no HTML ou no amigo, e eu sempre Ok, agora eu quero fazer esse cara circular e talvez colocar um pouco de espaçamento na parte superior e inferior Então, vamos voltar ao código VS. Cabeçalho, vamos usar um pouco de preenchimento. E em vez de preencher para cima, acolchoar para a esquerda, preencher para baixo, padronizar para a direita, coisas assim. Eu só vou usar acolchoamento. E aqui vou usar 20 pixels, e isso faz o preenchimento de tudo Ok, isso parece bom, e então eu quero que a imagem seja redonda. Mas essa também é a mesma imagem que estamos usando para nosso pequeno ícone na parte superior. Então, vamos dar uma olhada no Record Ralph Images. Quero colocar um quadrado, mas também quero mostrar o que fazer se você não conseguir encontrar um quadrado. Então esse aqui é bem legal. Definitivamente, não é quadrado. Então, o que vou fazer é clicar com o botão direito do mouse em Salvar imagem como. É uma imagem WebP, duas, 241. Não sou o maior fã de imagens WebP. Quer dizer, eu sei que eles são um pouco mais rápidos. O tamanho do arquivo é menor, eles são compactados. Tudo é incrível, mas não é tão fácil de editar. Então, o que eu faria normalmente é abrir o Photoshop, redimensioná-lo, cortá-lo, deixá-lo do jeito que eu quiser e depois salvá-lo Mas se você não tem o Photoshop, como fazer isso? Então, vamos procurar um redimensionador de imagens. Redimensione várias imagens de uma só vez. Redimensionador de imagem, redimensionador de imagem simples. Não sei qual é o melhor, mas talvez vamos tentar esse redimensionador de imagens simples Ok, aceite os cookies, selecione as imagens. Ou talvez possamos realmente pesquisar por redimensionador de imagem e Cropper Escolha redimensionar. Vamos tentar isso. Ok, vamos para uma web P. Ok, veja, ela não gosta de imagens WebP Vamos voltar aqui e pesquisar por web P. Simples redimensionar imagem, selecionar imagem, web P. Ok, isso é ótimo Bem, parece que vai ser ótimo. Vamos fazer algo assim. 500 por 500. Ok, talvez um pouco maior. Ok, vamos cuidar de 600 por 600. OK. Isso é ótimo. Grito. Ok, Crop Image. Ok, e baixe. Obrigado, pai. OK. Então essa foi uma maneira rápida e suja de fazer isso. Agora eu posso colocar isso na Ralph Image. E podemos chamá-la de foto do perfil de Ralph PFP. Então, vou copiar tudo isso. E então vamos entrar no código do VS e inseri-lo. Comando S. Ok, vamos voltar ao Chrome. Vamos fechar isso. Pode fechar isso. Atualizar. Ok, então é um pouco grande agora. Mas agora vamos dar uma olhada em como podemos mudar isso. Então, vou escolher uma largura de, digamos, 400 pixels. Sim, talvez eu aperte Shift e abaixe. Talvez 300 seja muito legal. Eu ainda gostaria de adicionar uma borda. Então, vamos escolher uma altura de 300 pixels dois. E então eu vou dizer fronteira. E borda é um atalho para largura, estilo e cor da borda Então, aqui vou escolher 20 pixels, sólido, que é o estilo, e depois a cor, vou escolher FF zero, que é como um amarelo. Mas podemos mudar isso novamente no código VS. E então eu vou escolher um raio de fronteira de 50%. Ok, então isso parece muito bom. Eu quero mudar a cor. Então, vou copiar tudo isso, ir para o código VS e, em seguida, para o cabeçalho, eu sou G. Então, isso quer dizer que todas as imagens dentro de todos os elementos do cabeçalho, ou essas são as propriedades que você deveria ter. Ok, isso, vamos comer uma laranja ou algo parecido. Bem, parece muito bom. Comando S. Vamos voltar ao Chrome e atualizar. Ok, isso parece muito legal. Agora, Greek E Rolf. Eu quero mudar a fonte. Há algumas maneiras de fazer isso, mas a mais divertida é acessar o Google Funt. Fontes gratuitas, fontes incríveis gratuitas. Então, Google Fonts. Aqui vamos nós. Ok, eu quero uma fonte de pixel. Há várias maneiras de fazer isso. Você pode filtrar, sentindo a aparência. Oh, tantos. Então, o que eu quero fazer é apenas pesquisar o Pixel. Tudo bem. Algo se destacando? Uau, isso é loucura. Algo muito ousado. Talvez aquele. Digitalizações Pixel Phi Talvez essa, Josie 15, Josie 20. Nós escolhemos Josie 20. OK. Então você diz obter fonte. Isso pode mudar ou a interface do usuário pode mudar de tempos em tempos e, em seguida, obter o código incorporado Ok, existem algumas maneiras de fazer isso. Mas o que eu gosto de fazer é usar a declaração de importação. Então, vou copiar isso e acessar o código do Visual Studio. No topo do meu arquivo de estilo, vou colar isso, mas não quero as tags de estilo. Eu só quero essa declaração de importação. Ok, ótimo. Então, aqui, vou copiar esse código de cópia, embora eu não precise do Jozy 20 normal real Então, o que vou fazer é colar isso e cortar isso, remover aquilo. E então cabeçalho H um. Basicamente, estou selecionando todos os H dentro de todos os cabeçalhos. Temos apenas um cabeçalho e só temos H um ou um H no momento. Vou colar isso. Ok, eu vou economizar. Vamos voltar ao Chrome aqui. Atualizar. Ok, por favor, Ralph Lá vamos nós. Vamos inspecionar isso Vamos mudar o tamanho da fonte. Vamos escolher algo grande, para 50 pixels. Ainda é um pouco pequeno. Eu vou mudar para cima, mudar para cima. 70 pixels parecem muito bons. Mas eu quero que o espaço entre aqui diminua um pouco. Ok, muito obrigado. Você pode ler isso e dizer: Sim, isso é útil, mas estou tentando fazer coisas, então não apareça. Vá embora. Ok, tamanho divertido, 70 pixels. A margem. Novamente, em vez de usar a margem superior e a margem direita, inferior e esquerda, vou usar apenas o atalho Então, margem. Eu vou escolher um máximo de dez pixels. Então isso o reduz um pouco à esquerda e à direita. Vai ser zero e , na parte inferior, 20 pixels. Então, aqui eu não tenho necessariamente que colocar o valor esquerdo zero, mas eu posso, se eu quiser. E então talvez possamos fazer com que seja da mesma cor da borda. Então, vamos copiar isso. Traga-o aqui, cole e depois escolha a cor. Não é cor de texto, não é cor de fundo, é cor. E então podemos copiar e colar esse valor. Vamos salvar isso e atualizar, ver como fica. Sim. É um pouco difícil de ler. Então, vamos mudar isso para branco. Sim, branco parece muito melhor. Então você pode ver que estamos projetando enquanto estamos programando Eu gosto muito disso. Ok, vamos para o branco. OK. Então isso parece muito bom. Organizamos nosso cabeçalho. Você pode mudar várias coisas aqui. Você pode transformar o fundo desse fundo azul em uma imagem ou em uma imagem ladrilhada Você pode pesquisar isso se quiser. E vamos para o desktop do Github. E podemos dizer então o cabeçalho. Ok, comprometa-se com o Maine. Push Origin. 23. 22 Missão lateral do cabeçalho: Lição, vamos refatorar parte do nosso código de cabeçalho para que a imagem do perfil funcione usando um elemento DIV em vez de um elemento de imagem Os benefícios dessa abordagem são que você pode gerenciar imagens em CSS em vez de em HTML, e pode manipular imagens de fundo forma poderosa com Também mostrarei como criar uma nova ramificação com o Github e, em seguida, como mesclar essa ramificação de volta à sua ramificação principal para que você possa trabalhar em algo novo sem afetar seu site atual Esta lição é uma missão secundária e é um pouco mais complexa. Então, se você quiser pular, tudo bem também. Haverá apenas pequenas diferenças daqui para frente. E se você quiser voltar, depois de terminar a aula inteira, vocês dois. Agora, no meu planejamento, eu disse que isso poderia ser uma div ou uma imagem No momento, temos isso como uma imagem. Então, eu quero te mostrar como transformar isso em um div. Mas o que vamos fazer é, porque é um pouco mais complexo criar uma nova ramificação com a qual trabalhar. E vamos criar uma nova filial porque às vezes vamos mudar o site e ele pode quebrar. E se quisermos confirmar nosso código, enviaremos, você sabe, código que não funciona para o nosso projeto ou para o repositório central no github.com Então, vamos para o desktop do GitHub e vamos usar uma ramificação, uma nova ramificação E vamos chamar isso de div PFP, create branch. Ok. Não precisamos publicar a ramificação no momento porque realmente não fizemos nada, mas você pode alternar entre a ramificação atual aqui, então ela é principal e a Dv PFP E eu vou te mostrar o que isso faz em apenas um momento. Então, vamos ao código do Visual Studio. Vamos ao índice. E agora, em vez dessa imagem, o que vamos fazer é div e vamos dar a ela uma classe de PFP E dentro dela, não vamos colocar nada. Ok. Então, vamos salvar isso. Vamos ao Chrome e atualize. Não há mais imagem. Ok. Mas dentro do desktop do Github, se mudarmos a ramificação para principal, diz: “Você tem alterações nesta ramificação O que você gostaria de fazer com eles? Deixe minhas alterações no DIV PFP. Seu trabalho em andamento será guardado nesta filial para você retornar mais tarde Então, o que deveríamos ter feito é realmente tê-los cometido. Então, vamos procurar um advogado e dizer que alteramos o PFP de imagem para mergulho Então, é confirmar isso e depois mudar a ramificação. Ok. Agora, se atualizarmos, a imagem está de volta e dentro do nosso código, você verá que ela está de volta à imagem Interessante De volta ao desktop do Github, vamos mudar isso para Dv PFP e você verá que o código volta a ser alterado. Muito legal. Agora, dentro do style dot CSS, temos uma classe de PFP com a qual podemos trabalhar Em vez de uma imagem, optamos por PFP de pontos e, com borda de altura, tudo isso é um ótimo raio de borda de Agora só precisamos de uma imagem de fundo, que usamos como URL, e colocamos aspas simples ou duplas aqui. E agora vamos do arquivo CSS de estilo. Então, estamos dentro da pasta CSS. Então, dot-slash dot dot slash, que nos leva para a pasta Ralf, e depois IMG, e então vamos para Rolf PFP dot web P. Isso parece bom, então Agora, o que eu preciso fazer é dizer que repetição do plano de fundo não é repetição e a posição do plano de fundo é centro e centro, esse é um valor XY. Você também pode usar pixels e, em seguida, o tamanho do plano de fundo podemos escolher a capa, e isso cobre toda a área. Ok, Command S. Ok, vamos ao Google Chrome. Atualizar. Ok, isso é ótimo, mas agora está à esquerda. O centro de texto realmente não se aplica a ele porque não é Então, o que podemos fazer é alterar sua margem. Margem para zero e automática. Isso significa que a parte superior e inferior são zero e a esquerda e a direita são automáticas. Comando S e isso deve centralizá-lo. Lá vamos nós. Agora, o motivo pelo qual eu gosto muito mais é que isso significa que podemos mudar nossa imagem no CSS e não precisamos mudar para o HTO apenas para alterar a imagem e conferir isso Eu vou até o meu localizador. Lembre-se de que usamos esses 2241 pontos P para fazer o corte Bem, vamos colocar isso nas imagens do Rolf. E vamos chamá-lo de Rolf com pera de baunilha. Eu não sei como soletrar pera de baunilha. Ok, vamos lá. Obrigada Ok, eu vou copiar tudo isso. E agora, em vez de Rolf PFP, vou fazer Rolf com Vanlop. Ok. E então vamos ao Chrome novamente, atualize. E agora temos um quadrado circular ou uma diva circular quadrada que usa uma imagem não quadrada como imagem de fundo. Hmm. Muito legal, certo? Mas agora ainda há aquele pequeno vanlopi O que vamos fazer com ela? Não precisa fazer nada. Mas e se mudarmos o tamanho do plano de fundo para 100%? Vamos subir um pouco. Ok, então 210%. Vamos copiar isso e colocar aqui. Portanto, os tamanhos de fundo cobrem 200% ou 210%. E então a posição de fundo, vamos mudar isso. Vamos voltar ao Chrome. Ok. Oh, cara, vou redigitar. Posição de fundo. Então, a posição, vamos usar talvez 20 pixels. Vamos escolher um valor negativo. Ok, -170, e então zero para o seu valor Y, ou talvez Vamos lá Menos 170 -40 pixels. Ok. Ok. Ok, ok, ok. Então, parece muito bom. E se voltarmos para o desktop do Github, podemos dizer que agora usando imagens ou imagens PFP Fantástico. E então, se formos até a filial principal e atualizarmos, é um pouco diferente, certo? Tudo bem. Ah, essa. Ok, então eu vou escolher este. Mas agora, como podemos colocar nossa nova filial volta em nossa filial principal? Então confira isso. Queremos publicar a ramificação primeiro, então isso a envia para o Gitub on-line e, em seguida, queremos criar uma Então, vamos pré-visualizar o pull request. E não deveria haver muita coisa acontecendo. Basicamente, está informando o que você removeu e o que adicionou. E então você diz, crie o pull request. Isso abre github.com. Ok. Div PFP Então, talvez digamos que fizemos o PFP Div em vez de um Você pode adicionar uma descrição mais descritiva e, em seguida, criar a pull request Ok, verificando a capacidade de mesclar automaticamente. Isso deve funcionar incrivelmente bem. Se você fez algumas coisas complexas e depois alterou coisas na sua ramificação principal, enquanto trabalhava na nova ramificação, as coisas ficam complicadas. Mas então vamos dizer mesclar, puxar solicitação, confirmar, mesclar O Pull Request foi mesclado e fechado com sucesso. Em seguida, vou deletar a ramificação. Não precisamos mais desse galho. Ok. Agora, de volta ao desktop do Github, vou dizer fetch origin. Então aqui, eu posso voltar para a filial principal, e ainda temos essa. O que podemos fazer é ramificar e depois excluir. Sim, exclua. Agora temos o principal e o refresh. Se inspecionarmos isso, deve ser um div com uma classe de Ok, então isso foi bastante só para o nosso cabeçalho. Se você quiser simplificar, pode simplesmente usar a imagem como sua foto de perfil. Mas usar imagens de fundo é muito, super poderoso. Então, se você quiser testar isso e criar uma nova ramificação e alterar esse fundo de azul para uma imagem ou imagens de ladrilhos, por exemplo, teste-o, ou você pode simplesmente, você sabe, fazer tudo na ramificação principal, se quiser 24. 23 Design com CSS: Ok, uma rápida pausa na escrita do código. Quero falar sobre como criar um site enquanto o codifico. A razão pela qual eu gosto de programar durante o design, especialmente depois do planejamento que fizemos, é porque podemos ver sua aparência e sensação Muitas vezes, um site é projetado em um aplicativo de design, mas não se traduz bem no navegador Poder alterar o design em HTML e CSS geralmente o torna mais útil porque você está realmente visualizando e usando o site no navegador e não em um aplicativo de design E ser capaz de projetar usando HTML e CSS geralmente acelera o tempo combinado de design e desenvolvimento. No entanto, se há clientes e assinaram designs e distinções entre designers e programadores e você faz parte de uma equipe, isso torna a mudança de coisas durante codificação um pouco mais complicada Mas esse não é o caso aqui. Somos designers e programadores. Agora, o que é incrível sobre CSS é que você pode fazer com o mesmo conjunto de HTML pareça muito diferente. Então, tente fazer com que o site do seu personagem corresponda à personalidade dele. Agora, vamos voltar à codificação. 25. 24 A seção principal de sites: Agora, vamos para a seção principal, que é bastante normal, então não deve demorar muito, considerando que a maior parte da estrutura e parte do CSS já estão em vigor. Vamos começar com a seção principal do nosso site. Então, no código VS, fizemos o cabeçalho. E se você não fez a crista lateral, então você pode pensar: O que é essa coisa de PFP de classe div Bem, em vez de uma imagem, estamos usando um div com uma classe de PFP e, em seguida, estilizando esse div com CSS para obter o mesmo efeito de usar uma imagem, e você pode Ok, agora vamos fazer algumas reflexões sobre HT dentro do nosso elemento principal Lá vamos nós. Vou me referir ao meu planejamento aqui. Então, eu vou escolher um H dois, e isso vai ser sobre Ralph e P, digamos, Ralph é um videogame, bandido querendo salvar o Algo assim, ele conhece alguns personagens legais ao longo do caminho. E se torna um cara legal. Ok, isso parece bom. Então, temos H dois, o parágrafo Sobre. Agora vamos colocar uma imagem aqui e vamos para a mesma pasta em que estamos dentro das imagens. E vamos dar uma olhada lá dentro. Google para obter uma imagem de Ralph rect Ralph Images. Portanto, é uma imagem sobre. Sim, eu gosto muito disso. Legal, legal. Então, vamos copiar o endereço da imagem. Vamos abrir uma nova guia, colá-la lá e, em seguida, Command S, salvá-la para fazer o download. Vamos trazê-lo para a pasta de imagens. Vou chamá-lo de dot JPEG ou Ralph sobre dot JPG. Ok, agora de volta ao código VS. Vamos colocar isso lá. Aí. E a saída, podemos dizer sobre Ralph Talvez também digamos que ele também gosta de garotas legais e problemáticas. Ele também gosta da amizade. É como amigo do baile? Sim. Fazendo amizade com garotas legais e mal-humoradas . Ok. Então, temos a imagem. Agora eu quero um pouco de legenda Então, vamos usar uma tag P e uma classe de legenda. Se você quiser escrever isso bem rápido com essa coisa chamada, vá para p dot caption, que parece CSS, e pressione Return Lá vamos nós. E a legenda é Ralph e Vamos digitar Vanilla pear font Schwez. Ok. É assim que se escreve VanLapefon Vou copiar isso. Volte para o código VS. Ok. O próximo é H dois novamente. Características dos personagens de Ralph. Isso parece bom. Novamente, talvez não goste disso. Alguns navegadores mais antigos podem dizer o que é essa coisa e você pode obter um pequeno quadrado com uma pequena cruz ou algum caractere estranho Então, poderíamos usar apenas uma aspa simples ou, novamente, poderíamos pesquisar o que é essa coisa. Então, apóstrofo único apóstrofo HTML Ok, vamos tentar isso e Ok, não. Lá vamos nós. Características de Ralph. Vou guardar isso. Vamos voltar ao Chrome e dar uma olhada. Ok, sobre Ralph. Ralph é um videogame blá, blá, blá, Leach Blá, blá, blá, blá, Leach, meninas. Ok, as características de Ralph Eu quero que seja como uma espécie de curvilínea. Essa. Sim. Ok. Vamos colar isso aí. Guarde isso. Sim. Isso parece muito melhor. Ok. Há algumas coisas que eu digo: Ok, definitivamente preciso mudar essas coisas, mas chegaremos lá. Vamos terminar o HTML primeiro. Ok. Aqui, as características de Ralph, eu disse que queria usar uma lista ordenada Portanto, uma OL é uma lista ordenada e, dentro de uma OL e uma UL, que é uma lista não ordenada, ainda temos itens da lista Então, item da lista, ele é forte. Ok, vamos colocar isso aí. Ele é forte. E ele é gentil. Ele, ele é grande. Ele gosta de garotas malucas e não aceita bobagens. Tudo bem. Então essa é a lista ordenada. Vamos guardar isso. E você verá isso se eu atualizar. Há um, dois, três, quatro. Isso significa que é uma lista ordenada. Legal. Ok. A próxima coisa é um H dois, e serão amigos de Ralph E então, aqui, vamos escolher uma lista não ordenada. E dentro da lista não ordenada, vamos escolher um item da lista E aqui vamos comer vanilla P fonchoez Ok, lá vamos nós Mas agora queremos criar um link para outra página aqui. Então, vamos pesquisar isso no Google rapidamente. Vamos escolher VanLaPefon Schwez. E você pode escolher qualquer tipo de página que forneça um pouco mais de informações sobre um personagem. Vamos aceitar tudo o que está lá. Ok, isso é bom. Então, vou copiar esse URL. Tantos anúncios aqui. Uau. VanLapfon Schwez dentro Ok, Vanilla Pe Fon Schwez e eu vamos colocar VanLapfon Schwez dentro de uma etiqueta A ou de um elemento âncora. Então, vamos para A. E depois para o HRF. Vamos lá, cole isso e coloque a etiqueta A final ali Ok, quem mais são os amigos de Ralph? Se você quiser, eu não sei quem são os amigos desses personagens. Bem, deveria ser seu personagem favorito, mas se você não quiser, pode ser como os amigos de Reque Ralph Quem são os amigos de Rick l, Sargento Shigas Tamura Ok. E vamos criar uma nova guia e pronto. Ok, vamos copiar isso. Felix também seria um bom. Então, vou colar isso lá e usar LI A, e então vamos cortar isso, colar lá e copiar o Sargento Culhorn Vamos salvar isso e verificar isso novamente. Tudo isso está funcionando. Ok, atualize Ok, então temos Venlope Von Schwiz e o Sargento Cohor. Mas quando eu toco em um desses, eu quero que ele abra em uma nova aba. Ok. Então você se lembra de como fazer isso? É com o atributo de destino e o definimos como vazio. Fantástico. Alvo em branco. E vamos pegar mais um Li A, e vamos até Felix aqui Então, vamos digitar Felix e salvar. Hmm. Rocker Rolf, aqui está o dever Aqui vamos nós. Vamos. Corrija isso, Felix. Então, vamos copiar isso. Vamos ao código do Visual Studio. Corrija um Felix e cole. Ok. Comando S. Vamos remover o espaço extra e o atualizador de cromo Então, temos três amigos. Ótimo. E sim, isso é praticamente todo o HTML que precisamos. O que eu quero fazer é fazer com que tudo pareça muito bonito. Então, a primeira coisa que quero fazer é colocar isso no meio e talvez fazer com que essa imagem não seja tão grande. Então, basicamente, torne a imagem menor. Dentro do CSS, temos várias coisas de cabeçalho aqui. Vamos colocar alguns estilos principais aqui. Vou dizer largura, vamos usar 800 pixels e depois uma margem. Vou escolher zero na parte superior e inferior e automático na esquerda e direita. Vamos salvar essa atualização. Ok. Isso parece bom. Só que essa imagem é enorme. Então, digamos que a imagem principal. Então, todas as imagens na tag principal ou no elemento principal. Digamos que a largura ou largura máxima seja 100%. Então, se for menor, tudo bem. Se for maior, ele se encaixará em seu elemento pai. Então, vamos salvar essa atualização. Ok. Então, está muito bonito. Não sou o maior fã desse tipo de fonte. Este é um Rolf seraponto, não muito arrogante, e os títulos também são serafins, simplesmente enfadonhos. Então, vamos abordar talvez não precisemos dizer cabeçalho H um. Talvez possamos dizer que todos os H podem ter essa fonte e estilo de fonte. Dizemos todos os dois H. Você pode fazer praticamente a mesma coisa, exceto a cor. Eu só vou manter essa margem preta. Vamos manter o mesmo. 70 pixels. Vamos usar 50 pixels. Tudo bem Então, vamos salvar isso. Ok. Isso parece bom. Talvez um pouco mais de margem na parte superior. Então, vamos avançar 20 pixels lá, e podemos fazer assim, então 20 pixels na parte superior e inferior e zero pixels na esquerda e na direita. Atualizar. Sim, parece legal. Agora, o resto disso, que tipo de fonte queremos? Bem, vamos escolher, você sabe, algumas usuais, talvez. Então, no corpo, vamos definir isso ou o HTML e o corpo, mas o corpo deve ficar bem. Mas sim, provavelmente vamos tirar a vareta dourada daqui a pouco. Talvez possamos retirá-lo agora e optemos pela família de fontes. Há muitas coisas para escolher. E a razão pela qual existem tantas fontes para escolher é que se você especificar uma fonte e alguém não tiver essa fonte, ela precisará saber o que fazer. Agora, com nossa fonte do Google, estamos realmente dizendo, carregue essa fonte e use essa fonte. Nem todos os navegadores podem fazer isso. Novos navegadores modernos, fantásticos. Assim, poderíamos fazer a mesma coisa e importar uma fonte do Google Fonts. Mas, por enquanto, vamos escolher algo padrão. Então, Kuriau, se você conhece suas fontes, talvez consiga descobrir uma maneira de contornar Times New Roman é tipicamente uma fonte sera, uma das pequenas coisas na parte inferior Algo que não tem nada na parte inferior é chamado de San serfont e algo como aéreo Helvetica SAS é o que vamos escolher Então, aqui, você vai dizer: Ei, eu quero que seja aéreo Se você não tem antena, vamos para Helvetica e se você não tem Helvetica, basta Ok, então Command S. Vamos ao Google Chrome e atualize Ok, a cor de fundo é padrão agora, e isso parece muito melhor, mas eu quero mudar o tamanho da fonte. Vamos usar o tamanho da fonte para, digamos, 20 pixels, salve Ok, isso parece bom. E quanto ao espaço entre eles? Então, vamos ver a altura da linha. Talvez vamos usar 24 pixels e salvar lá. De volta ao Chrome. Talvez um pouco mais. Você pode ver que algumas das outras coisas mudaram agora. Interessante Está mudando isso no corpo, o que significa que está mudando isso para todos os seus elementos infantis, então talvez não façamos isso. Vamos cortar isso e depois aplicá-lo às tags de parágrafo e às tags ou elementos UL e OL. Tamanho da fonte: 20 linhas de altura até 24 pixels. Vamos verificar isso. Ok. Isso parece muito bom. Talvez um pouco mais. Então, inspeção. Vamos aumentar um pouco 30 pixels. Legal. Feliz com 30 pixels. Ok, salve aí. Atualizar. Ok. Isso parece muito bom. Eu gosto disso. Eu gosto disso. Rolfe e Vanlope Von Schwez Quero que Então, aqui, temos esse P com uma classe de legenda. Então, legenda de pontos P. Podemos definir o tamanho da fonte para algo como 16 pixels. Podemos definir a cor para cinza. Talvez queiramos um tipo específico de cinza. Mamãe. Algo parecido. Tudo bem E então talvez queira que fique em itálico ou enfatizado para que possamos usar o estilo da fonte, seja itálico ou Eu gosto de oblíquo. Portanto, salve essa atualização. Ok, eu quero estar um pouco mais perto. Então, vamos inspecionar. Vamos escolher a margem superior. Vamos mudar isso para zero. Sim. Isso parece bom. E então eu acho que podemos mudar o fundo da margem também. Vamos ver como é o zero ao redor. Isso é ótimo. Ok. Então, margem zero. Você poderia dizer zero pixels, mas zero é ótimo. Ok, então as coisas estão indo muito bem aqui. As características de Ralph são fortes. Ele é meio que grande. Ele gosta de garotas malucas e não aceita bobagens. Amigos de Ralph. Ok, então isso parece muito bom. Talvez eu queira que esse um, dois, três, quatro fique um pouco à esquerda para se alinhar com os amigos de Ralph e Ralph Então, vamos dar uma olhada nisso. O OL, tem uma parte verde lá. O que é essa parte verde? Então, vou passar para o computador. Se você não vê computado, toque nessas pequenas setas e, em seguida, ela deve estar aqui Então, na verdade, tem um pouco de preenchimento à esquerda, 40 pixels de preenchimento à esquerda Então, vamos definir o preenchimento para a esquerda em zero. Hmm. Isso também não é realmente o que eu quero. Então, o que poderíamos fazer é dizer: o que é isso? Liste a posição interna da lista. Sim. Isso parece muito bom. Ok. Então, preencha para a esquerda e liste a posição interna. Vamos usar o preenchimento total, também zero. Ok. Isso é legal. Vou copiar isso. E isso é para um OL. Talvez tenhamos tentado o OLs e o seja. Então, estamos fazendo isso para P, UL e OL. Vamos usar ULs e OL. Listas não ordenadas, listas de pedidos e ritmos aqui. Comande S e atualize. Ok. Isso parece muito bom. Agora, esses são links ou âncoras. Vamos experimentar algumas coisas aqui. Então, dentro de Ps, ULs e OLs. É isso que eu quero abordar ou as âncoras dentro delas. Então, vou copiar essa linha aqui e dizer, todos os PAs ou talvez usemos apenas A's, certo? Pode ser muito mais fácil. Então, todas as etiquetas de ancoragem A, vamos mudar a cor para vermelho E vamos fazer algo assim. Isso é um pouco mais divertido. Está bem? Isso parece bom. Vamos lá S. E o Chrome, podemos atualizar. Ok. Agora, o que há de muito legal com eles? Vamos verificar se isso abre em uma nova guia, isso acontece. O que é muito legal com eles que você tem essas pseudoclasses que você pode aplicar Então, vamos escolher um Ha e dizer cor ou talvez copiemos e colemos isso e mudemos para azul ou algo assim. Como um azul. Isso parece bom. E você também pode dizer pressionado, acho que isso não parece bom. Eu só vou copiar isso. Vamos ao Chrome, crie uma nova guia, pressione. Um HTML pressionado. Como estilizar um botão de clique, mouse. Oh, lá vamos nós. Ok, visitei a Active. Aí está. Ativo, visitado. Tudo bem. Então, vamos voltar ao código do estúdio. Vamos ficar ativos. Legal. Copie e cole a cor. Ok, podemos mudar isso para talvez um roxo. Provavelmente não vai ficar muito bonito, mas vamos ver. E então você também pode dizer: A, visitou, o que significa que você realmente esteve aqui. Vamos colar isso aqui novamente. E vamos torná-lo cinza. Eu quero te mostrar como isso se parece. Então Command S. Tem um cromo, um refrescante. Já visitou todas essas coisas. Então, talvez se mudarmos o URL um pouco, você verá algo diferente. Vou apenas colocar um ponto de interrogação, V é igual a um e Comando S. Agora a URL deve ser diferente, então vamos atualizar, e Mas agora, uma vez que tocamos nele, e ele tem o V igual a um, agora é cinza, o que é muito Muitas pessoas realmente não fazem mais uso disso. Então, vou voltar ao código do Visual Studio e simplesmente removê-lo porque gosto muito do vermelho, ou o que eu poderia fazer é mantê-lo lá e torná-lo igual ao que A e A visitaram. Então, em vez de ter duas declarações ou blocos de declaração separados , vou combiná-los Então A e A visitaram, você pode ter a mesma cor e , em seguida, passar o mouse e ativar cores diferentes Então, digamos que essa atualização. E quando eu passar o mouse, você verá que eles mudam de cor para azul E se eu tocar e segurar, é roxo. Agora você também pode alterar todos os tipos de coisas, como o tamanho da fonte ou a altura ou a cor do fundo ou a opacidade ou várias Mas para links, às vezes é um pouco irritante se as coisas mudarem demais. Ok, por algum motivo, há um pop-up bloqueado, talvez porque eu o mantenho pressionado por muito tempo. Lá vamos nós. Ok. Então, temos alguns links legais. Então, até mesmo um Po, poderia dizer, Ralph é um vilão de videogame de um filme, talvez possamos incluir isso e depois criar um link para o filme Então Ralph é um videogame, bandido, de um filme, e de um filme que colocaremos em um elemento âncora, dê a ele um HRF, dê a ele um alvo E então vamos procurar por Rice Rolf O. Existe um IMDB ou Rotten Lá vamos nós. Ou podemos vinculá-lo à Wikipedia, mas vamos para o IMDB É só um primeiro filme, com certeza. Ok. Vamos colocá-lo lá. Ok. Vamos guardar isso. Vamos voltar ao Chrome. Vamos fechar isso. Provavelmente podemos fechar todas essas guias. Caso contrário, há muito. Ok, obrigado. Torne o Chrome mais rápido. Basta fechar isso por enquanto e atualizar. Ok, então você pode ver que também é vermelho, o que é ótimo. De um filme, abre o link do IMDB. Ok. Então, esse é basicamente nosso elemento principal concluído ou nossa seção principal concluída. Talvez possamos combinar esse vermelho com esse laranja. Então, vamos fazer isso rapidamente. Dentro do nosso estilo aqui. Vamos escolher esse vermelho. Vou copiar isso e depois descer para o nosso cabeçalho. O PFP tem essa cor aqui, então eu vou colar ali Talvez só precise dessa cor, na verdade. Desfazer. Lá vamos nós. E então coloque dois pontos no final, ponto e vírgula no final. Ok. Refresque o ar Sim, então combina com o resto do site. Há alguns belos vermelhos na imagem, todos amarrados juntos. Ok. É isso mesmo. Agora, vamos para o desktop do Github Eu quero dizer que criou a seção principal. Ok. Comprometa-se com o Maine e promova a origem. E novamente, em pouco tempo, talvez um minuto, seu site do GitHubPage será atualizado Ok, o site está progredindo muito bem. Agora, o que resta é a foto. Então, vamos terminar isso na próxima lição. 26. 25 Rodapé de sites: Tudo bem. Vamos finalizar nosso site. Acabamos de deixar o rodapé. Então, temos um site muito bonito até agora. Vamos criar o rodapé. Portanto, dentro do código do Visual Studio, dentro do HTML de ponto de índice. Dentro do rodapé, vou colocar uma etiqueta P. Você pode criar um rodapé, tipo, tão complicado quanto quiser, mas esse é um site muito simples Então, o que vamos dizer é que este site foi criado durante um tap tap kaboom Além disso, queremos criar um símbolo de direitos autorais, 2025. Bem, isso seria loucura. 2025 e hm Yeah, feito por Rich Armstrong E depois os direitos autorais 2025. Então, vamos dar uma olhada em um símbolo de direitos autorais. Então, cole o símbolo HTML correto. Lá vamos nós. Vamos apenas copiar isso. Legal. É muito útil quando o Google simplesmente coloca isso lá para você. OK. Aqui vamos nós. Então, vamos salvar isso. Vamos ao Chrome e atualizemos. Ok, toque em tap kaboom e Rich Armstrong quer criar esses links Então, vamos colocar uma âncora taka, toque em tap kaboom. Lá vamos nós. H RF é igual a HTTPS, dois pontos, barra, toque, toque em kaboom.com . Poderia até colocar uma WWW lá. Fantástico. E então a mesma coisa feita por Rich Armstrong. E aqui você pode colocar seu próprio nome. Na verdade, você pode colocar o que quiser no rodapé. Rich Armstrong Href é igual a HTTPS, dois pontos SLAASwww dot IH armstrong.net. Tudo bem. E então também podemos atribuir a ele uma meta em branco. Às vezes, alvos em branco são ótimos. Outras vezes, eles são muito frustrantes porque você acaba tendo cerca de 47 abas abertas. Eu provavelmente faço isso por padrão de qualquer maneira. Mas se for para os mesmos sites, eu tento, você sabe, não abri-lo como uma nova guia, você sabe, regra geral. Ok, alvo em branco. OK. Então, vamos salvar isso. Vamos ao Chrome e atualize. Então isso parece muito bom. Parece o resto do site. Agora eu quero colocar isso no meio, assim como na seção principal, e também dar a ele uma cor de fundo colorida. Então, vamos fazer isso em nosso CSS. E, muitas vezes, podemos reutilizar o CSS. Então, Footer, vamos usar Width margin zero auto, algo parecido E vamos dar uma cor de fundo. Vai ficar azul agora, e vamos mudar isso um pouco. Hmm. Havia o azul do cabeçalho que era muito bom. Vamos usar isso de novo, então copie isso. Cole isso e salve. Margem zero automática. Vamos ver o que isso parece. Ok, então não é realmente o que eu quero. É tipo, não, eu quero que tudo isso seja azul. OK. Então, dentro do código do Visual Studio, existem algumas maneiras de fazer isso, mas acho que a mais flexível é colocar um div dentro do nosso rodapé Então, vamos escolher um div com uma classe de conteúdo como essa. E podemos colar isso ali e depois digitar. Então, tudo parece limpo e arrumado, ok? E então temos o conteúdo Potter Dot. Poderíamos até mesmo transformar o conteúdo em algo próprio. Talvez faça isso mais tarde, mas vamos pegar isso e colocar isso no conteúdo. Margem zero e Auto, vamos colocar isso no conteúdo também. Cor de fundo, vamos mantê-la lá. E então vamos salvar e ver o que acontece aqui. Isso parece ótimo. OK. A próxima coisa que eu quero adicionar, talvez um pouco de preenchimento. Vamos clicar com o botão direito no rodapé. Vamos adicionar um pouco de preenchimento. Vamos usar 40 pixels, algo parecido. Sim. Isso parece ótimo. OK. Estofamento. Vamos usar 440 pixels Isso vai estar na parte superior, na parte inferior, na esquerda e na direita. Fantástico. Vamos guardar isso. E então a única coisa que eu gostaria de mudar são essas porque quando você passa o mouse sobre elas, elas ficam com essa cor azul, e esse vermelho também é bem intenso Então, talvez possamos fazer um branco, e quando você passa o mouse sobre eles, eles ficam amarelos OK. Então, vamos usar etiquetas de ancoragem no rodapé, digamos, cor branca E então copiaremos isso e diremos rodapé A, passe mouse. Vamos mudá-lo para. Vamos até aqui e copie e cole. Visitei hober Vamos copiar isso. Mas então vamos mudar para , tipo, um amarelo. Talvez para que mantenha um pouco do mesmo tipo de matiz ou saturação do mesmo lugar Ok, então temos o mouse. Vamos salvar essa atualização. Ok, é interessante que ele faça um e não o outro. Então é porque é visitado, certo? Nós já visitamos esse. Hm. Então, vamos copiar isso. Pasta de vírgula, assim. Eu direi que visitei. Sim, você pode colocá-los em duas linhas separadas se for mais fácil. Você também pode nos dar espaço lá, se for mais fácil de ler. Ok, salve essa atualização. Lá vamos nós. Então, o foco ser amarelo é muito bom E se você pressionar, nada será aplicado porque você já aplicou o mouse Então, qual era a pseudoclasse ativa, aquela roxa? Então, vamos colar isso. OK. Atualizador. Ok, isso não parece muito bom, então, na verdade, vou remover isso. Você pode ver como esses estilos de rodapé para âncoras estão substituindo os estilos de âncora anteriores Um, porque vem mais tarde no arquivo e dois porque é mais específico. Ok, então guarde isso. Vamos voltar ao Chrome e atualizar. OK. Agora, eu quero realmente colocar isso em uma linha separada, e há algumas maneiras de fazer isso. Então, podemos transformar cada uma delas em uma tag P ou colocá-las em um elemento P, ou podemos simplesmente adicionar uma tag BR, que é uma quebra de linha. Então eu vou fazer isso. Eu vou para o Brasil, assim. E salve e depois volte não para o Visual Studio, mas para o Chrome. Tudo bem. Isso é ótimo. Mas agora eu quero colocá-lo no meio. Vamos ver o código e o estilo do VS. E poderíamos fazer isso no conteúdo ou no rodapé ou na tag P do rodapé. Então, vamos tentar enviar uma linha de texto, centro, Command S, Chrome. OK. Isso parece muito bom. Então, feito por Rich Armstrong, verificamos se isso funciona Sim, fantástico. Gravou Kaboom com fita adesiva, verifique se funciona. Fantástico. OK. Então, tudo isso parece muito legal. Acho que pode haver um pouco de espaço aqui entre o rodapé e os elementos principais Então, vamos usar o rodapé ou o principal. Mas como estamos lidando com um rodapé, vamos colocar uma margem superior de, digamos, 20 pixels Isso faria alguma coisa, 40, 60? 80? 60 parecem muito bons. Ok, uma margem superior a 60. Então, vou copiar isso. E cole. Guarde isso. Freshy. Ok, recite Ralph, sobre Ralph, as características de Ralph, os amigos de Ralph. Sim. Incrível. Agora, a única coisa que precisamos fazer é acessar o desktop do Github e dizer: elemento Photo adicionado Comprometa isso com o Maine. Push Origin. Ok, nosso site está pronto. Dê um tapinha, faça uma pequena dança, bombeie o ar com o punho. Bom trabalho. Você verá que cada seção tinha seus desafios e que, às vezes, o que fizemos em uma seção do site afetou outras áreas do site. E agora, na próxima lição, mostrarei as noções básicas para fazer nossos sites tenham uma boa aparência em dispositivos móveis, o que é muito legal porque usamos muito nossos dispositivos móveis Eu vou ver lá. 27. 26. Torne-o amigável para dispositivos móveis: Fizemos um ótimo trabalho ao projetar e codificar um site para nosso personagem, mas não pensamos em como ele pode parecer ou funcionar em telefones ou tablets Então é isso que vamos fazer nesta lição. Fazer um site funcionar para celular geralmente é chamado de torná-lo responsivo ou design responsivo E há várias coisas que designers e desenvolvedores fazem para que os sites tenham uma designers e desenvolvedores fazem para que os sites boa aparência e funcionem bem em diferentes dispositivos e tamanhos de tela. Aqui estão algumas opções. A primeira coisa que podemos fazer é usar unidades e layouts flexíveis Por exemplo, poderíamos usar uma largura máxima e usar uma unidade de medida relativa, como valores percentuais, em vez de valores de pixels. Isso significa que, à medida que a tela fica menor, nosso conteúdo cabe e, à medida que aumenta, a largura máxima mantém o design sob controle. A segunda coisa que podemos usar é a lógica CSS para alterar estilos dos elementos com base em coisas como largura e altura do navegador. Isso é chamado de consultas de mídia e é mais ou menos assim Se a largura for menor que 600 pixels, defina o tamanho da fonte em 16 pixels, crie as imagens do Avatar com 100% e remova os cantos arredondados. Em terceiro lugar, podemos alterar quais imagens são mostradas com base no tamanho do navegador Podemos fazer isso em HTML usando imagem com elementos de origem aninhados que têm mídia ou usando atributos de conjunto e tamanhos de origem em nossos elementos de imagem Outra forma de alterar quais imagens são mostradas é usar imagens de fundo nos elementos e, em seguida, usar consultas de mídia para alterar essas imagens, tudo em CSS Não abordaremos essas três opções durante este curso, mas é útil saber que elas existem. Felizmente, em nosso caso, nosso site é bastante simples, então vamos nos concentrar em torná-lo o mais flexível possível e usar consultas de mídia CSS para alterar algumas declarações Agora, o que mostrarei nesta lição será apenas um rascunho superficial, mas quero mostrar o básico Portanto, embora nosso site tenha uma aparência muito boa em um desktop ou na tela do computador, como sabemos qual é a aparência e a sensação em dispositivos móveis ou em diferentes tamanhos de tela? Então, eu quero que você clique com o botão direito no seu site e vá para inspecionar ou veja as ferramentas para desenvolvedores e desenvolvedores Assim, se o seu inspetor de elementos estiver na parte inferior, quero que você o mova para a direita apenas nesta parte, pelo menos Então toque nesses três pontos e, em seguida, toque nesse ponto no botão direito, ou você pode pontilhar para a esquerda Eu acho isso um pouco estranho. Então, vamos lá. E assim, você pode redimensioná-lo para a esquerda e para a direita. E a principal coisa que me preocupa é a largura da minha tela, porque uma página da web pode ser infinitamente longa e isso deve ser bom É com a largura que me preocupa. Assim, podemos alterar a largura com bastante facilidade. E sim, você pode dizer, mas por que eu deveria me preocupar? Bem, veja isso. Tem esse pequeno botão aqui. que então fornece as dimensões do seu telefone ou de vários telefones diferentes, iPhone XR, talvez um iPad Pro, e você pode alterar o Zoom em Ns Então, isso é 50%. Isso seria 100%, o que é muito maior. Assim, você pode dar uma boa olhada na aparência do seu site com diferentes telefones ou dispositivos móveis. Eu tenho um iPhone SE, então isso é algo que eu sempre conheço porque tenho um formato muito pequeno. Eu sempre tive um telefone menor, então geralmente escolho uma largura de 320 como o mínimo para o qual vou projetar. Agora, isso parece estranho, e o seu pode não ser assim Às vezes, quando você atualiza, ele é ampliado bem de perto, como se estivesse aqui Então, se atualizarmos novamente, isso pode funcionar, talvez não Se você, você sabe, nos der um pouco mais de espaço, há também esse botão giratório, que o transforma em paisagem ou volta em retrato Ok, então você pode ver que há um monte de coisas que parecem muito estranhas aqui Uma delas é que o texto ainda está centralizado aqui, mas há essa barra azul e aquela barra azul Então, na verdade, essa é a largura da nossa tela. Mas como essa imagem é estendida até o fim, isso meio que torna o site tão grande. Então, vamos nos concentrar em algumas coisas primeiro. O que eu quero fazer é voltar ao código do Visual Studio. E você pode ter me visto inserindo essa linha de código no início da aula, e isso foi feito com uma abreviatura ET, e eu disse: Talvez cheguemos a ela mais tarde na Então, se você quiser, mas o que isso significa? Qualquer coisa, você pode simplesmente copiar. E se você acessar o Chrome e abrir o chat GPT ou algo semelhante, vamos ao chitchpt.com e cole isso aqui Você pode dizer: O que isso significa? Algo parecido. E fornece um monte de informações, o que é muito, muito útil. Agora, o que eu quero fazer aqui é adicionar algo a ver com o usuário. Não quero que o usuário consiga escalá-lo. Então, eu poderia dizer que não quero que o usuário consiga escalar em um telefone. O que eu preciso adicionar? Escalável pelo usuário é igual a não. Portanto, um máximo escalável. Escalável pelo usuário, é igual a não. Então, vamos copiar isso. Vamos voltar ao código do Visual Studio. Cole isso aí, coloque uma vírgula, use um não escalável. Vou salvar isso, voltar para o Chrome, voltar para o RecArf e atualizar, e você verá agora que, na verdade, tem toda a E isso é muito útil quando você está desenvolvendo, depurando, tentando fazer as coisas funcionarem as coisas funcionarem Ok. Isso parece bom. Bem, parece melhor do que antes. Mas agora temos um monte de problemas. Vou gostar de rolar para a direita ou arrastar para a direita. Hm. Então, a primeira coisa que quero fazer é abordar essa imagem. E então eu vou clicar com o botão direito aqui e inspecionar. E você verá que isso ainda tem uma largura de 800 porque o Main tem uma largura de 800 pixels. Então, o que podemos fazer aqui é definir uma largura máxima de 800 pixels, e isso deve resolver muitas coisas. Ainda temos bastante espaço no lado direito. Ok, então vamos ao código do Visual Studio. Vamos para o nosso principal. E em vez de largura, usaremos a largura máxima. E a imagem tem uma largura máxima de 100%. Portanto, sempre haverá 100% no máximo da largura desse elemento principal. Ok, legal. Portanto, o conteúdo do Foo também tem uma largura de 800 pixels, então vamos usar a largura máxima novamente. Acho que deve ficar tudo bem. Então, Command S. Vamos voltar ao Chrome, uma atualização. Ok, está parecendo muito melhor. Agora, a próxima coisa que quero abordar aqui é que todo o texto está tocando a esquerda e, você sabe, possivelmente até a direita Então, o que fazer sobre isso? Bem, novamente, isso está na seção principal. Então, o que eu poderia fazer aqui é colocar um pouco de acolchoamento. Então, vamos para zero na parte superior e inferior e digamos 20 pixels à esquerda e à direita. Ok, isso parece muito bom. Ok. E talvez possamos fazer o mesmo na parte inferior. Ok. Role para baixo aqui. Vamos usar Well, padding. Vamos escolher zero na parte superior e inferior e 20 pixels à esquerda e à direita. Salve isso e talvez possamos copiá-lo e colocá-la no conteúdo do rodapé também. Ok, eu vou guardar isso. Atualizar. Este site foi criado durante uma aula de atop kaboom feita por Rich Armstrong 2025 Esse texto parece um pouco estranho. Talvez eu possa diminuí-lo um pouco ou vamos dar uma olhada no que está acontecendo aqui, inspecionar este rodapé O rodapé já tem um preenchimento de 40 pixels, então o conteúdo provavelmente não precisa desse preenchimento extra Legal. Vamos voltar ao código VS. Você pode tirar isso porque o rodapé já tem um preenchimento de 40 pixels, mas talvez 40 pixels seja um pouco demais no celular Então, o que vou fazer aqui é usar uma consulta de mídia. Onde você coloca suas consultas de mídia depende de você. Talvez você queira fazer isso diretamente após esse conjunto de estilos de rodapé Então, talvez possamos adicionar um comentário aqui e dizer: Rodapé. E aqui fazemos uma consulta de mídia dizendo agir e depois mídia e eu vou pressionar Return aqui. E depois abraça. Vamos usar a largura máxima de 600 pixels por enquanto. E então, dentro daqui, eu vou dizer rodapé ou rodapé P. Vamos escolher um tamanho de fonte de 16 pixels Ok. E no Chrome, vamos atualizar. Ok. Qualquer coisa que tenha 600 pixels ou menos mudará o tamanho da fonte para 16 pixels. Podemos verificar novamente esse chá. Isso ainda é muito grande. Então, nesse ponto de 600 pixels, ele se rompe e fica um pouco menor. Isso significa que vai caber muito bem. Mesmo com 320 pixels ou mais. Sim, isso é ótimo. Embora pareça um pouco maior, vou inspecionar isso. Vou para computado e, em seguida, aqui embaixo, tamanho da fonte 16 pixels Talvez seja só porque é branco. Ok. Isso parece muito bom. Talvez possamos alterar o resto do tamanho da fonte também, embora 20 pixels pareçam muito bons. E quanto aos H twos? Talvez possamos mudar os H twos. Então, vamos ao código VS. Vamos digitar essa consulta de mídia novamente. Então, H dois, vamos para a mídia. Há várias outras coisas que você pode fazer com uma consulta de mídia, mas estou apenas mantendo o básico agora. Portanto, com uma largura máxima de 600 pixels, você pode alterar os 600 pixels para o que quiser com base no seu design. Então, vamos escolher um tamanho divertido de 40. E esse é um erro que eu cometo muitas vezes, mas vejo isso em todo o programa. É como se você estivesse pensando que isso é um H dois, então você quer colocar a declaração H dois aqui, mas isso não está realmente dizendo nada a ninguém. Não há bloco de declaração H dois. Esse é apenas o tamanho da fonte no meio do nada quando há uma largura máxima de 600 pixels Então, você realmente precisa colocar esse bloco de declaração H dois aqui e, em seguida, colocar essa declaração de tamanho de fonte dentro do bloco. Ok, vamos salvar lá, voltar ao Chrome, atualizar, e isso o torna um pouco melhor Até isso se encaixa, o que é muito bom. Então, vamos verificar novamente o que isso parece. Sim. Isso parece legal. Talvez possamos fazer isso um pouco menor, vou inspecionar o botão errado Vou inspecionar aqui. Esta é uma classe ou uma div com uma classe de PFP A sua pode ser uma imagem, mas o mesmo cenário se aplica. Vamos ver os estilos aqui. A largura é 300, a altura é 300. Se mudarmos isso para 220, parece muito bom. 220, e então ele não está realmente no meio. Ele ainda está? Posição de fundo. Parece muito bom. E depois. Isso parece legal. Eu gosto disso. Então, acabamos de mudar a posição do plano de fundo e depois a largura e a altura. Então, 220 pixels. Ok. Isso parece ótimo. E nosso disco Ralph está em duas linhas. Então, talvez possamos mudar isso para 50 ou mais. Sim, eu gosto disso. Então, vamos entrar no código do Visual Studio. E aqui podemos realmente colocar esse H dentro dessa consulta de mídia aqui e optaremos pelo tamanho de telefone de 50. Você pode colocar essa consulta de mídia na parte inferior do arquivo e colocar todas as instruções e blocos de declaração select your dentro de uma consulta de mídia, desde que seja do mesmo tamanho. Depende apenas de onde você deseja colocar seu código de consulta de mídia. Ok, então vamos guardar isso. Vamos ao Chrome e atualize. Ok. Então, isso parece muito legal. Vamos mudar isso para responsivo. Ok, então no topo aqui, vamos ver em 600, ele muda o tamanho da fonte. Agora, você pode se divertir muito com consultas de mídia. Você pode mudar as cores. Você pode alterar as imagens. Você pode alterar tamanhos de fontes, fontes todos os tipos de coisas apenas com base na largura da tela. Mas também há muitas outras coisas que acontecem nos aquários da mídia que você pode conferir. Mas, no momento, nosso site parece muito bom em dispositivos móveis, parece muito bom em desktop está pronto para ser compartilhado com a família. E mais uma coisa, precisamos confirmar nosso código. Então, vamos ao GitHub Desktop e digitar um site RS Bonv Lá Vamos nos comprometer com o Maine. Vamos promover o Origin. Incrível. Fantástico. Então, novamente, em alguns minutos, isso será atualizado on-line e você poderá compartilhá-lo com sua família. Ok, agora estamos prontos para compartilhar nosso site nesse grupo familiar do Whatsapp. Deve funcionar nos telefones de todos nos computadores. Eu deveria estar ótima. Mas talvez antes de realmente compartilhá-lo, que tal adicionarmos mais páginas da web com dois caracteres ao nosso site? Vamos fazê-las na próxima lição. 28. 27 Adicionando um personagem: Ok, temos um site incrível para nosso personagem. Combina com o estilo do nosso personagem. É responsivo, mas é apenas uma única página da web. Então, vamos criar pelo menos mais uma página para outro personagem ou talvez até duas. Então, podemos chamá-lo de um site adequado com três páginas. A boa notícia aqui é que podemos fazer isso simplesmente duplicando nosso arquivo HTML de ponto índice duas vezes, alterando o texto e as imagens e adicionando algumas linhas de CSS novo para que cada página pareça um pouco única Ok, agora é hora de adicionar mais um ou dois personagens ao site. Isso vai ser divertido e não deve demorar muito. Então, é claro, Rolf precisa um Pe básico na página Schoez . Então, vamos fazer isso. Vou tocar neste botão aqui, que não quero que seja a tuba do dispositivo, e depois vou movê-la para baixo novamente. Fantástico. OK. Dentro do código VS, vou clicar com o botão direito do mouse nele e em Copiar e clicar com o botão direito do mouse em colar. Em seguida, pressione Enter para renomeá-lo. E eu vou dizer, cara, Vanlope. Oh, eu não sei como soletrar isso? Então, vou copiar isso. ao Visual Studio novamente. Acho que poderíamos chamá-lo de Van. E vou me certificar de que está em minúsculas. Então Vanlope e então o título será Vanlope Von, Schwez. Lá vamos nós. Tenho que mudar o ícone do Rolf, esse será o mesmo Ok, então vamos escolher um ícone do VanLape. Então, uma nova guia. VanLapef Suíça Vamos usar imagens. Ok, esse parece muito bom. Só quero o rosto dela. Então, vou clicar com o botão direito do mouse e salvar imagem como. Sim, parece bom, e encontre-a. Vou colocar isso dentro de Ralph dentro das imagens. OK. Op. Ok. Agora eu quero redimensionar Aqui vamos nós. Usamos esse mais cedo? Não consigo me lembrar. Vamos experimentá-lo. Com uma altura. Vamos cortá-lo. Sim, isso parece bom. OK. Isso parece bom. Recorte, baixe a imagem. Tudo bem. Tudo bem. Baixe a imagem. Fantástico. colocar o ícone do Nlope na imagem de Ralph Opa. Lá vamos nós. Vá copiar tudo isso. Vamos ao código VS. Coloque-o lá. OK. Isso parece bom. Em seguida, podemos copiar e colar isso. Vanellope font schwez sobre vanlope. Ok, eu não sei muito sobre Venlope no momento, então deixe-me copiar e colar algumas Protagonista feminina de VenLopfon Schwez. Ok, vamos copiar isso. Cole aí. Precisamos de uma imagem sobre Vanlope Vamos dar uma olhada em mais algumas imagens aqui. Sim, esse é bem legal. Sim. Vamos salvar a imagem enquanto estou lentamente ampliando esse Vanlop, depois colocaremos Vanlope grande lá, renomearemos e copiaremos tudo isso Para que, quando estivermos no código VS, você possa inseri-lo lá. Sobre a característica de vanlope Vanlope. Ok, vamos em frente. Ela é forte, gentil. Ela é grande. OK. Ela é pequena. Ela é problemática. Ela tem atitude e 9 anos OK. Vamos para VanlapesFriends Bem, aqui, temos o reto Ralph. OK. E agora podemos realmente criar um link para nossa página de índice. Então, corte com pontos. Vamos usar o ponto de índice HL ou apenas a barra de pontos. J vai diretamente para a raiz, basicamente. Ok, Rece Rolf, isso significa que vou salvar isso dentro do Index, que é a página de Rolf aqui para Vanlope, em vez de ir para essa URL externa, o que podemos fazer é ir diretamente para a barra de pontos, mas para Vanpt HTML. o que podemos fazer é ir diretamente para a barra de pontos, mas para Vanpt HTML. E eu não quero atingir o vazio, então vou tirar isso, guardar isso. Vamos até Vanlope. Vamos tirar o alvo em branco aqui também. OK. Isso é ótimo. Vamos ao Google Chrome, acesse a página eKifPage e atualize Tocaremos em Vanilla Pe em Schwez depois em Vanilla Pe em Além dessa imagem, parece muito boa, uma Vanlope. Vamos fechar isso. Tudo bem. Isso é ótimo. E você pode ver como é rápido criar uma nova página, uma página totalmente nova, porque já temos nosso CSS configurado. E então clicamos em Recker Rf, e isso vai para a barra de pontos Agora online, isso funcionaria. Mas aqui, não está funcionando porque não é um servidor. É como um sistema de arquivos ou pastas. Então, vamos voltar ao código do Visual Studio e começar o HTML. Vamos guardar isso. Vamos para o Chrome. Vamos voltar e atualizar. Ok, Rick e Rolf. Pronto, vai para o arquivo de índice em vez da pasta Rolf, que é isso Ok, então isso é ótimo. Vamos voltar para Vanlope e mudar essa imagem. Se você ainda tem uma imagem aqui, então dentro de um código VS no topo aqui para seu PFP, se você estiver usando uma imagem e não fez a missão secundária, onde mudamos esse PFP de imagem para um div com uma classe de PFP, alterá-la Mas agora temos o PFP e eu quero adicionar uma classe de vanlopi além disso PFP. Vamos guardar isso. Vamos usar o estilo CSS. Onde está o PFP. Vou copiar isso, colar que aqui tem uma classe de Dt PFP e Vanp É assim que você diz que vou selecionar todos os elementos com a classe PFP e vanlop dentro do elemento do Ok, então aqui temos uma imagem de fundo que eu vou mudar. Então, talvez a posição do plano de fundo e o tamanho do plano de fundo também precisem ser alterados. Ok, então acho que vamos dar uma olhada nas imagens que temos. Ícone do Phenelope, Penelope JPEG. Provavelmente é muito bom, então vou copiar tudo isso e colar lá. Posição de fundo. Vou apenas definir isso para zero e zero final e o tamanho do plano de fundo para 100% Ou talvez eu use algo como capa. Então, eu vou guardar isso. Vamos voltar ao Chrome e atualizar. OK. Sim. Isso parece muito, muito bom. Eu gosto disso. Fantástico. E se voltarmos para Rece Rolf, dele ainda é o mesmo porque o dele é o padrão Ele também não tem a aula de Vanlope sobre esse PFP. Agora vamos para Vanlope novamente. O dela sim Poderíamos até mudar a cor da borda dela. Sim, vamos fazer isso rapidamente. Então, vamos clicar com o botão direito do mouse em Inspecionar. Ou talvez façamos isso no código do Visual Studio porque temos um seletor de cores lá Então, posição do plano de fundo, tamanho do plano de fundo. Vamos escolher a cor da borda. E vamos para o vermelho. Mas qual é a cor da Vanelope? Vanelope tem esse tipo de cor turquesa. Sim, então vamos fazer isso e economizar. OK. Lá vamos nós. várias maneiras de realmente fazer isso. Como se pudéssemos dar ao corpo uma classe de vanlope e depois mudar tudo com base nisso Mas, no momento, essa é a única coisa que está mudando. OK. Agora você pode fazer isso com uma, duas, três, quatro páginas, quantas páginas quiser. Agora, seu site tem várias páginas da web. Na verdade, é um site e não apenas uma única página da web. E a última coisa que precisamos fazer é acessar desktop do Github e confirmar esse código Adicione em outra página. Comprometa-se com o Maine, promova o Origin. Lá vamos nós. Se você ver algo assim no GitHub Desktop, uma versão atualizada do Gitup Desktop está disponível e será instalada no próximo lançamento. Na verdade, basta tocar em Reiniciar o Gitup desktop e ela deve aparecer em questão de segundos ou minutos Mamãe, hmm. Lá vamos nós. Lá vamos nós. Agora tenho outra página no meu site. Eu adoraria que você fizesse o mesmo. Talvez adicione dois, três, quatro, mais, quantos você quiser. Ok, vamos lá. Se você quiser tornar a página de cada personagem ainda mais exclusiva, vá em frente. Adoro ver como você faz isso. 29. 28 Desafios alternativos de CSS: Agora, se você está pronto para um desafio, quero que crie mais uma ou duas versões da página da web do seu personagem usando exatamente o mesmo HTML, mas usando arquivos CSS diferentes Aqui está um exemplo de duas páginas da Web diferentes com exatamente o mesmo HTML, mas com CSS diferente Você começará a entender o quão poderoso é o CSS com este exercício. Ok, então você pode escolher para qual personagem deseja criar uma nova versão. Eu vou escolher Ralph, então eu vou voltar. E eu vou fazer uma cópia desta página e seguida, alterar o arquivo CSS que ela carrega e, em seguida, criar um novo arquivo CSS também. Vamos entrar no código VS. Vou clicar com o botão direito do mouse em copiar e clicar com o botão direito em Colar. E depois volte, eu vou escolher Ralph dois. Você pode chamá-lo do que quiser. Em seguida, meu estilo, vou clicar com o botão direito do mouse em copiar, clicar botão direito do mouse e colar em CSS, clicar com o botão direito em Colar. Em vez do estilo Copy, vou dizer apenas o estilo dois. Lá vamos nós. Dentro do Rolf two, a folha de estilo que vamos usar é CSS de dois pontos, e você pode dizer V dois ou o que quiser Vamos guardar isso. Agora, dentro do estilo dois, podemos fazer algumas mudanças. Mas eu quero ir ao Google Chrome e ir até Ralph para pontilhar o HTML Não deveria haver nenhuma diferença aí. Mas agora podemos começar a fazer diferenças. Podemos começar a fazer mudanças. Então, vamos fazer o cabeçalho. Vamos mudar essa cor. Talvez optemos por um azul bem escuro, guardemos isso e verifiquemos se está funcionando. Lá vamos nós. Assim, você pode começar a alterar todo o site ou toda a página usando esse outro arquivo CSS E é muito divertido porque o HTML não mudará, mas o CSS sim. Então divirta-se com isso, experimente coisas novas, experimente. Sim, vai ser divertido. E então, é claro, quando estiver pronto e quando terminar, volte para o Git upb desktop e diga, adicione uma versão nova ou alternativa da web de Ralph OK. Em seguida, confirme e, em seguida, envie a origem. Ok, vamos lá. Divirta-se com isso. 30. 29 Compartilhe seu site: OK. O site de Rick Rolls parece incrível. Acho que combina muito bem com eles, e espero que seu site aparência incrível e se adapte ao seu personagem também. O que é incrível é que toda vez que você confirma e sincroniza seu código com o github.com, sua página é atualizada, o que Agora, se você quiser, compartilhe o site do seu personagem com o mundo. Diga à sua mãe, aos seus amigos, aos caras com quem você trabalha, que isso deve deixar todos muito orgulhosos ou com inveja insana Eles provavelmente começarão a tratar você como um ninja e a pedir que você codifique todo tipo de coisa, e talvez até peçam que você conserte impressoras e outras coisas, o que é meio estranho De qualquer forma, eu adoraria ver o site do seu personagem. Então poste onde eu possa ver. Você pode mencionar em taptapkaboom em Todas as redes sociais, ou Meu e-mail está rico em taptapkaboom.com. Agora, neste momento, você pode estar muito orgulhoso de si mesmo. Você acabou de criar um site para seu personagem favorito. Há três páginas. É responsivo. É incrível. Então eu acho que você deveria se dar um high five agora, desse jeito, e talvez até dançar um pouco Tipo, Wo Whoo. Algo parecido. Bem feito. 31. 30 Erros comuns de depuração: Gente, não importa quem você seja, mesmo que você seja um super ninja, você cometerá erros ao programar Eles são chamados de insetos e são frustrantes. Então, como você lida com eles? Aqui estão algumas dicas para lembrar. A primeira dica é saber que bugs acontecem com todo tipo de programador. É exatamente o que acontece. Somos humanos. Até a IA comete erros. Não é uma questão de se, é uma questão de quando. A segunda dica é que o navegador não está aqui para te pegar. É só seguir suas instruções. dica três é que, na maioria das A dica três é que, na maioria das vezes, os problemas são muito pequenos e as soluções são erros ortográficos muito simples, erros de digitação, não usar um ponto na frente do nome de uma classe em CSS, usar um ponto na frente do nome de um elemento em CSS, usar um ponto em vez de um símbolo de hash ao tentar selecionar um elemento Outro pequeno problema é usar maiúsculas e minúsculas diferentes em seu código em comparação com seus arquivos e pastas. Se suas imagens não estão aparecendo ou não há CSS quando você visualiza seu site on-line, há uma boa chance de que seja porque você está tentando acessar um arquivo que não existe. Ou apenas um em que o caminho ou o nome do arquivo tenham letras maiúsculas e minúsculas diferentes. A quarta dica é que há uma razão lógica pela qual não está funcionando. Você só precisa descobrir o que é. Os bugs são fáceis de ver em retrospectiva. dica cinco é manter as coisas organizadas, organizadas e consistentes em seus arquivos HTML e CSS Recue seu código para que seja fácil escanear e observar irregularidades Use as mesmas convenções de nomenclatura e de maiúsculas e minúsculas, como use camel case ou kebab case dica seis é copiar e colar em vez de reescrever sempre que possível Isso significa que mesmo que haja erros ortográficos, eles estarão errados em todos os lugares, mas os mesmos em todos os lugares . Dica sete. Quando algo não estiver funcionando conforme o esperado, explique o que deveria estar acontecendo e depois o que está realmente acontecendo. Você pode conversar consigo mesmo, anotar ou até mesmo explicar para outra pessoa. Mesmo que outra pessoa não codifique, isso pode ajudar. Cães e gatos são excelentes parceiros de programação. Dica oito: participe de uma comunidade e tenha acesso a um mentor ou a alguém mais experiente do que você, especialmente se estiver tentando fazer coisas mais complexas A dica nove é perguntar ao Google ou algo como o Chat ChPT. Não há uma única resposta que eu tenha feito que alguém já não tenha perguntado e encontrado uma resposta decente. Dica dez: faça uma pausa. Dê um passeio, olhe pela janela, respire um pouco ou simplesmente durma com o problema. Deixe sua inconsciência trabalhar nisso. Sério, a quantidade de tempo que descobri o que está errado enquanto estou no banho ou no meio da noite é uma loucura Você vai passar muito tempo depurando. A boa notícia é que quanto mais você codifica, mais rápido você consegue identificar e corrigir esses bugs, você fica tipo, Ah, eu já vi isso antes Então, boa sorte com sua codificação, boa sorte com sua depuração Veja isso como parte do processo. 32. 31 Ajuda-me a ajudar você: Eu sempre o encorajarei a depurar seu próprio código e descobrir as coisas por si mesmo pois você ganha experiência dessa forma Mas às vezes você simplesmente não consegue acertar e quer sair ou jogar o computador pela janela ou no gato. Então eu prefiro que tudo isso não aconteça. Então, nesse tipo de casos, eu gostaria de ajudar. Mas eu preciso que você me ajude a ajudá-lo. Então é isso que eu preciso de você se você vai pedir minha ajuda. Quero que você confirme seu código e o sincronize com o github.com Segundo, me diga qual é o seu nome de usuário do Github. Três, envie por meio de um link para a página da web com o problema. Quatro, se você está preso em uma lição específica do curso, me diga qual lição. Cinco, descreva o que deveria estar acontecendo. Seis, descreva o que está acontecendo. Então eu vou tentar te ajudar. Então, por favor, não diga coisas como: Meu site não funciona. Por favor, ajude. Eu não posso te ajudar aqui. Me ajude a te ajudar. Então, experimente esse formato. Obtenha o nome de usuário e, em seguida, coloque seu nome de usuário , o URL, coloque seu URL onde houver um problema. Número da aula. Por exemplo, coloque o número 16, aquele sobre escrever CSS em arquivos separados. Às vezes não consigo me lembrar do que se trata 16. O que deveria estar acontecendo, a cor do texto título três deveria ser azul. O que está acontecendo é que a cor do texto título três não está mudando de cor. Vou deixar uma explicação por escrito, explicação em vídeo ou agendar uma ligação com você. 33. 32 O que vem a seguir: Ok, esse é o fim do curso, mas espero que seja apenas o começo de sua jornada de programação. Espero que você tenha se divertido. Espero que você tenha aprendido muito e espero que abrace mais esse lado nerd de agora em diante O que este curso lhe deu é uma base sobre a qual você pode aprender mais sobre. Há muito mais para aprender, e pode ser muito divertido criar sites e aplicativos para você, seus amigos e clientes. Agora, se você ainda não o fez, precisa comemorar. Você acabou de criar um site. Olá, você mesmo, solte um grito. Opa, uau Dance, pule para cima e para baixo, corra como um louco. Bem feito. E agora, você poderia me fazer um favor? Você pode, por favor, revisar este curso? Isso significaria muito para mim e ajudaria outras pessoas a decidirem se aceitariam ou não? Sério, fazer isso significaria muito. Portanto, embora este seja o vídeo final, adicionarei mais vídeos a este curso quando fizer sentido e, claro, criarei outros cursos e vídeos do YouTube. Então, participe do boletim informativo taptap Kaboom e assine o canal do YouTube. Tchau por enquanto.