Como criar um cartão de visita digital com HTML e CSS

1. Introdução ao curso: Ei, você deve ter notado que a tecnologia está crescendo cada vez mais rápido em praticamente todos os setores lá fora, e a tecnologia Web não é exceção. Aprender HTML e CSS são grandes habilidades toe tem não só para a sua carreira, mas também apenas para o crescimento pessoal. Sou Nathan Blair. Eu sou um desenvolvedor da Web, e aprendi HTML e CSS de tutoriais como este. Posso te dizer por experiência pessoal que você pode fazer isso também. Tudo o que é preciso são alguns projetos divertidos, muita prática e um pouco de orientação para você começar. E este curso será aprendendo fazendo. Vamos criar um design HTML e CSS simples que pode ser usado como seu cartão de visita digital . Vamos começar por falar sobre como configurar um projeto de site no seu computador. Então vamos mergulhar em algum design com estilo CSS. Vou deixá-lo com algumas das minhas dicas pessoais, bem como algumas coisas que você pode querer verificar após o curso. No final do curso, você terá uma página publicamente acessível e algum código que você pode mostrar para qualquer pessoa. Este curso é para você. Se você tem algumas habilidades básicas de informática, talvez até habilidades de design. Mas você está realmente interessado em aprender como construir seu próprio site ou como fazer alterações simples em um site existente. Você precisará ter uma compreensão básica de como navegar no computador. Você também precisará de algum tipo de editor de código. Agora eu prefiro usar Adam, mas muitas pessoas adoram texto sublime ou estúdio visual que é realmente até sua preferência. Eu postei alguns links para cada um deles na descrição do projeto, então você pode ir conferi-los. Por último, certifique-se de ter uma boa foto de cabeça para exibir em sua página. Ou, se preferir, você pode usar um logotipo ou realmente qualquer imagem. A decisão é sua. Então, você está pronto para adicionar algumas habilidades HTML e CSS ao seu arsenal? Se assim for, vamos começar a revestir 2. Documento e sintaxe em HTML: Fora, certo, pronto para começar. Vamos aprender um pouco sobre HTML primeiro. O que HTML significa é linguagem de marcação de hipertexto, e você pode ler sobre um monte de história que entrou em H dois mil. Mas basicamente é o bloco de construção da Web como a conhecemos. Se você olhar para qualquer página da Web hoje e visualizar essa fonte clicando com o botão direito do mouse, você pode ver o HTML que vai para o plano de fundo. Eu não sei se você pode ver neste tamanho de tela, mas HTML está lá. Você tem algumas tags HTML básicas, e então você tem um monte de bobagem jumbo sobre. Este site irá ignorar isso por enquanto, mas tudo na Web é de alguma forma ou forma HTML. Então, para começar este projeto primeiro, precisamos ter certeza de que nosso ambiente está configurado corretamente. Então vamos em frente e abrir uma nova janela do localizador. E você sabe, o que eu gosto de fazer é se você acessar sua pasta pessoal muitas vezes, você verá a pasta Sites. Se você ainda não tem um, você pode criar um, então vá em frente e abra isso e nós vamos criar uma pasta para o nosso projeto. Eu recomendo a criação de uma pasta de projeto para manter todos os seus arquivos de projeto em. Portanto, é apenas um pouco mais organizado e mais fácil de gerenciar quando se trabalha com sites. Isso também é comumente conhecido como o site rotear a rota do site. Vamos dar um nome simples. Eu só vou com o tutorial e mais um passo. Só vou facilitar para mim e adicionar isto aos meus favoritos. Agora vamos passar para a próxima etapa, que é criar nosso documento. Então, para este passo, você vai precisar de algum tipo de editor de código como eu mencionei, você pode escolher o software que mais lhe agrada. Vamos abrir nosso editor de código e criar um novo arquivo. Vou continuar e salvar isso na minha nova pasta de tutoriais. Este é o lugar onde salvar a pasta e os favoritos vem a calhar Agora. O padrão para documentos moinho HT é que sua página inicial vai ser chamado índice e, em seguida, a extensão do arquivo é dot html Good e clique. Economize agora. Muito em primeiro lugar, tang precisamos é uma tag que diz ao navegador que tipo de documento. Isto é então nós vamos digitar doc type e imediatamente com um editor de código, você vai ver que ele sugere tags para você. É inteligente e sabe o que você está digitando, e você pode clicar nesta ou clicar na guia. Tudo bem, então a próxima tag muito básica é uma tecnologia html. E isso diz ao navegador que é aqui que estamos iniciando nosso HTML e com cada tag a partir deste ponto, precisamos de uma tag aberta e uma tag fechada. Então este está abrindo a nossa etiqueta. O próximo, usando uma barra, fecha-o. Então agora temos HTML aberto e fechar um macho. Todas as tags HTML seguem esse princípio básico, normalmente dentro de uma tag HTML. Você tem uma cabeça e um corpo dentro da cabeça. É aí que todas as meta-informações vão sobre sua página da Web, coisas como o título da página, e você pode vê-lo automaticamente preenchido em casa. Mas vamos dar um título diferente. Vamos dizer o nosso nome. Vou digitar Nathan Blair. Aqui vamos nós e não dentro do corpo. É aí que todo o seu HTML personalizado vai. É aí que você vai construir o site que você vai ver na tela. Agora, antes de avançarmos para isso, vamos dar uma olhada em algumas outras metatags que você pode adicionar à cabeça. O que eu gosto de fazer é manter notas sobre essas coisas porque eu não me lembro necessariamente de todas as metatags diferentes. E, na verdade, há uma coisa que perdemos. Também podemos adicionar o idioma à nossa tag HTML. Vamos em frente e colocar isso aí. Então isso só diz ao navegador, Ei, olha, este documento vai ser em inglês, tudo bem, vamos olhar para algumas outras metatags aqui. Você vê o meta tag provavelmente 90% do tempo que você vai estar usando o caractere ajuda UTF disse. Então, eu só recomendo ficar com isso. E a próxima meta tag que vamos adicionar é para design responsivo. Vamos falar disso um pouco mais tarde, mas isso basicamente garante que sua página da Web seja dimensionada corretamente quando for visualizada em um iPhone, iPad ou tela grande. Vamos adicionar algo ao corpo para apenas por diversão. Tudo bem, guarde. E vamos dar uma olhada no que temos. Então, como você visualiza um documento HTML do seu computador. Bem, é bem fácil. Vamos para o documento e arrastá-lo para o seu navegador. E olha para isso. Aí está o nosso mundo do olá. Se você olhar no título, verá o texto do título e terá um documento HTML básico. Então, isso cobre a sintaxe HTML básica. Vamos adicionar alguns elementos em nosso próximo vídeo. 3. Elementos básicos: de títulos e Headings: Muito bem, temos o nosso lindo texto do “Olá Mundo” e uma grande página vazia em branco. Vamos preenchê-lo um pouco com alguns elementos de texto básicos. Então, de volta ao nosso editor de código, vamos ter um título. Esta é uma das tags básicas que cada navegador reconhece. Vá em frente e digite H um em seu corpo e feche também. E no meio desta etiqueta, vamos digitar o título. Vou usar o meu nome para isso. Vamos guardar isto e verificar. Atualize a página. E ei, olha para isso. Temos um pouco de estilo. Ele vem direto da caixa porque todo navegador sabe o que é um H one tag. E há outras tags de cabeçalho também. Se você acertar H dois, você tem duas etiquetas de idade H três h quatro. A lista vai até seis, e cada um vem com seu próprio tamanho. Então, como você pode ver, medida que o número aumenta, o título fica menor e o estilo desses títulos pode ser alterado com CSS, que é o que vamos entrar mais tarde nesta lição. Agora não precisamos de todos esses títulos, mas vamos manter H. 2. E no nosso H dois, este vai ser o nosso subtítulo. E eu acho que este é um bom lugar para colocar seu cargo ou alguns outros subtítulos que você gostaria em seu cartão de visita. Então, vou colocar o desenvolvedor da Web. Guarde isso e vamos checar. Ótima. Ok, vamos dar uma olhada em outra etiqueta. É a tag P, que é abreviação de parágrafo. E vamos ver como isso se parece. E um monte de editores Você pode apenas digitar Boram e ele vai lhe dar Laura fez algum texto. Como você vê, esta é uma corda longa aqui, mas é ótima para provar coisas. , Como pode ver, o estilo de uma etiqueta de parágrafo é muito mais simples. É para como você adivinhou parágrafos. Agora, no nosso caso, não precisamos de um parágrafo inteiro de texto no nosso cartão de visita. Quero dizer, eu acho que você é certamente bem-vindo para fazer isso, mas eu acho que este é um lugar apropriado para colocar nosso endereço de e-mail. Tudo bem, guarde. Vamos dar uma olhada. Tudo bem. Ótima. Isto ainda não parece muito, mas prometo-te que tudo se vai juntar. Só temos que dar um passo de cada vez. Como aprendemos. Uma coisa a ter em mente ao projetar uma página da Web é a semântica. O que isso significa? Bem, navegadores e outros dispositivos que lêem sua página da Web esperarão certas coisas de tags diferentes em sua página. Por exemplo, dentro de uma tag de cabeçalho, espera-se que isso seja um cabeçalho de algum tipo. O mesmo com um H dois em um parágrafo. Alguns dispositivos, como leitores verdes, usarão a semântica para navegar em um site. Portanto, é importante ter em mente o conteúdo que você está colocando nesses diferentes impostos HTML . Em nossa próxima lição, vamos passar por tags html mawr que você tem disponível e irá criar uma lista com 4. Tabelas e listas: maneira. Então, aprendemos sobre elementos de texto básicos. Mas quais são algumas outras maneiras de estruturar nossa textura Informação na Web? Bem, um exemplo é uma mesa. Nós não vamos usar uma tabela neste projeto em particular, então não sinta que você tem que digitar nada disso. Mas é um dos elementos HTML básicos que você deve conhecer, então eu gostaria de revisá-lo rapidamente. Então, dentro de uma tabela você tem algumas seções padrão. Você tem uma cabeça T, um corpo T. E se você quiser um pé T agora, dentro dessas seções, há sempre um TR, que significa uma fila de mesa e dentro desse T d e a TV está cada célula individual. Vamos simular uma tabela HTML rápida para que você possa ter uma ideia de como eles funcionam. Vamos apenas fazer alguns cabeçalhos básicos e o corpo iria fazer a mesma coisa e depois a mesma coisa no rodapé T. E só para poupar tempo, vou copiar daqui e colá-lo. Mas vamos fazer algumas cordas diferentes. Certo, vamos ver como isso parece. Tudo bem, ótimo. Então temos comida. Barbat no cabeçalho da tabela e. Temos 123 e nossa primeira fila e depois ABC no rodapé. Agora, se tivéssemos uma tabela mais complexa ou uma tabela real, provavelmente veríamos mais de uma linha. Então, parece algo como isso, e cada um pode ter seus próprios valores para que a tabela possa ficar cada vez mais longo. Você pode adicionar mais colunas de quem você gosta. Há muito mais que você pode fazer com tabelas HTML. Eu não vou entrar em tudo aqui neste tutorial, mas só sei que as tabelas são um grande recurso para quando você está construindo seu site. Aqui está algo que vamos usar em nosso projeto. Há algo mais que você pode usar para exibir informações estruturadas, e isso é uma lista. Existem dois tipos de listas. Em HTML. Há uma lista ordenada, que é a etiqueta ol, e há também o A Norden List ul e cada um destes. Há outra marca aninhada para cada item. É um elemento de item de lista, ou L I. Vamos ver qual é a diferença entre esses dois tipos de listas. Vamos adicionar alguns itens a cada um, e vamos ver, hein? Então, como você pode ver, uma lista ordenada é ordenada e como números enquanto em uma lista nem fez é apenas marcadores. Eu tendem a usar a lista A Norden muito, mas há certamente aplicações para uma lista ordenada também. Para este projeto, vamos usar o A Nordeste. Esta lista nos dará um bom formato para listar todos os diferentes perfis que queremos vincular a partir de nossa página web como um espaço reservado. Eu só vou colocar o nome de cada site que eu quero vincular a um dos meus sites de codificação favoritos , como você viu antes, foi get hub. Então eu vou adicionar isso aqui. Eu também vou colocar lengthen e Twitter. Certo, vamos dizer isso e ver como fica. Tudo bem, lá vamos nós. Agora, à medida que avançamos com este tutorial irá adicionar links para esses itens. Mas, por enquanto, estamos a começar bem. Você sabe o que? Na verdade, acho que é um bom tópico para o próximo vídeo. Vamos em frente e adicionar um pouco de comprimento aos nossos itens. Velho 5. Links e imagens: Agora que temos nossos itens de lista, precisamos adicionar alguns links. Então vamos em frente e limpar isso um pouco. Primeiro, gosto do Teoh. Mantenha tudo em linhas separadas apenas para torná-lo um pouco mais legível para mim envolvendo este Get hub texto. Vou adicionar um link tag. Um link é realmente chamado na tag âncora, que é apenas uma âncora tão aberta Fechar âncora no meio é obter hub. Agora precisamos adicionar o u. r l ouvir a maneira que fazemos isso é usando um atributo que vamos usar especificamente os atributos H ref Muitos elementos em H e mail têm atributos, e eles são apenas bits de informação que você pode adicionar ao elementos para fazê-los se comportar de uma certa maneira ou mudar diferentes aspectos sobre eles. Este atributos em particular, adiciona um seu l para o seu link. Então, neste caso, vou adicionar o meu U R L ao meu perfil get hub. É uma prática recomendada incluir o https na frente para que o navegador não fique confuso sobre se este site é parte do seu servidor ou se ele está indo para outro lugar . Muito bem, agora que adicionaram o meu link. Vamos tentar. Vá em frente e atualize a página e confira. Temos uma ligação. Agora vamos ver se funciona. Aí está o meu perfil de “get hub”. Mas como você pode ver, abriu-o na mesma janela do navegador. E você não quer necessariamente que todo o seu tráfego desapareça do seu site assim que alguém acessar uma de suas outras páginas. Então vamos voltar e mudar isso um pouco. Há outro atributo que pode ser usado em uma tag âncora chamada Target. E não, isso não é fazer referência ao popular shopping center que está realmente dizendo ao navegador qual janela usar. Então, vamos dizer em branco. E isso basicamente significa que queremos que isso se abra em uma nova guia. Vamos guardar isso e tentar. Atualize a página e clique em nosso link. Lá vamos nós. Você tem uma nova torneira. Vamos fazer a mesma coisa para outros links. Eu só vou copiar e colar para tornar isso um pouco mais fácil, e nós vamos substituí-los por diferentes URLs. E agora vamos mudar o texto dentro das tags âncora. Tudo bem. Vamos ver como isso se parece. Grande teste. Os links não têm sido muito tempo, mas funciona. Tudo bem, ótimo. Então agora temos três links. Vamos subir um pouco e realmente fazer algo chique. Vamos adicionar uma imagem a esta página. Este é outro elemento que usa atributos. Vamos dar uma olhada. Vamos adicionar nossa imagem na parte superior do nosso documento. A tag da imagem. É que eu sou G. E tipicamente usamos dois atributos com esta tag. Vamos primeiro falar um pouco sobre os atributos antigos. Velho é texto alternativo. A razão. Precisamos de um texto alternativo. Imagens estrangeiras? Bem, algumas pessoas na Web não conseguem ver imagens. Eles são cegos. Assim, os leitores de tela podem ler esse texto alternativo e entender qual imagem está na tela. Portanto, é ótimo adicionar alguns textos descritivos agradáveis dentro de seus próprios atributos. Vamos deixar em branco até sabermos qual imagem estamos adicionando. Agora, é aqui que você vai precisar de uma imagem ou logotipo para colocar no seu cartão de visita. Eu já tenho um configurado minha imagem de perfil padrão que eu adiciono em todos os lugares na Web, e você vai colocá-lo diretamente dentro de sua pasta tutorial onde sua raiz da Web vai estar . Vamos voltar ao nosso código. Então, já que sabemos que está na nossa raiz da Web, podemos até vê-lo aqui no nosso projeto. Podemos apenas digitar o nome do arquivo aqui. Vamos guardá-lo e dar uma olhada. Oh, ei, veja isso. Isso sou eu. Então temos a nossa imagem configurada. Agora vamos adicionar um texto antigo. cara sorridente de Nathan Blair. Se você atualizar, verá Nada mudou, mas um leitor de tela poderá ler esse texto, e qualquer visitante cego do seu site saberá o que está acontecendo. Isso é ótimo. Então temos algumas imagens. Temos um texto estilizado. Temos algumas ligações. Vamos continuar avançando e adicionar um pouco de estrutura a esta página. 6. Blocos e HTML semântico: Tudo bem, então estamos adicionando conteúdo a esta página. Está ótimo, mas seria bom para separar o conteúdo apenas para que tenhamos um estilo de tempo mais fácil, mas também para semântica. Já mencionamos semântica antes. Vamos olhar um pouco mais detalhadamente sobre como você pode melhorar sua semântica em seu site. Se você der uma olhada nas docks da Web indiana, essa é uma documentação muito comum feita pela Mozilla. Eles entram em muitos detalhes sobre todas as diferentes tags semânticas que você pode usar na Web e para que eles são usados. Eu não vou entrar em todos esses, mas como você pode ver, há tantos. Eles falam sobre seccionamento de conteúdo, usando um lados e rodapés e cabeçalhos. Eles têm conteúdo de texto. A lista continua e continua. Sinta-se livre para navegar por isso. Dê uma olhada em todos os diferentes componentes da Web e todas as coisas que você pode usar em seu site. Mas vamos revisar um layout básico de página da Web que você pode ver na Internet hoje. Normalmente, em um site, página tem um cabeçalho, e dentro disso, geralmente há uma barra de valete no topo bem, há elementos semânticos que você pode usar tal tem cabeçalho e soneca. Abaixo disso, geralmente há a seção principal do site, e dentro dela há tipicamente um artigo principal, como textos ou uma postagem em bloco. E talvez haja uma barra lateral, que poderia ser um lado e depois abaixo de tudo. Normalmente há um rodapé. Todos esses itens são tags HTML reais que você pode usar para seção fora do seu site e torná-lo mais semântico. Então vamos dar uma olhada em alguns dos elementos que podemos usar para seção de nossa página, mesmo que seja uma página muito, muito simples. Não podemos usar muitos deles, mas há um casal que podemos dar uma olhada. Então, de volta ao nosso código, vamos começar por apenas embrulhar tudo no que é chamado de elemento de bloco. E a forma como criamos um é usando o DIV Tech. Uma tag DIV é basicamente apenas um bloco na página. É muito útil para estilizar, mover coisas ao redor, posicioná-las no lugar que você quer na página. Agora, em um monte de editores de código, você vai notar uma classe atributos aparece este será usado mais tarde com o nosso CSS em vez de classe. Vamos mudar isso para I d. Assim como isso e I d atributos é novamente usado principalmente para CSS, às vezes JavaScript, que é muito mais avançado do que precisamos entrar. Mas é essencialmente uma maneira de identificar um elemento específico na página, e eles são sempre únicos. Então você nunca quer idéias que são as mesmas em diferentes elementos na página. Eles sempre devem ser únicos. Neste caso, este é o nosso site rapper. Há apenas um deles na página, então vamos dizer que eu às vezes gosto de fazer isso para apenas manter o controle do que os elementos estão sendo usados para. Agora vamos adicionar todo o nosso conteúdo nesse bloco. E vamos dar uma olhada no que acontece quando fazemos isso absolutamente nada porque uma tag DIV não tem nenhum estilo inerente. Na maior parte, você não vai notar nenhuma diferença, acrescentando isso, mas isso nos dará uma estrutura melhor para quando entrarmos em styling mais tarde. Vamos voltar ao nosso código e em mais alguns elementos agora seria ótimo para dizer ao navegador qual é o nosso conteúdo principal. Em que devemos nos concentrar? , Basicamente, o carro inteiro. É o nosso elemento principal, então vamos envolvê-lo em que grande. Então agora temos um elemento principal com todo o nosso conteúdo, e está dentro de um site. Rapper Se você voltar para sua página novamente e atualizar. Ainda assim, nada aconteceu de novo. Main é como um elemento de bloco. Não tem nenhum estilo inicial, mas é ótimo para a estrutura. Vamos adicionar outro I D a esta tag principal. Vamos chamá-lo de cartão. E sabes que mais? Vamos separar um pouco o nosso conteúdo. Vamos criar mais algumas tags DIV. Vamos criar um para a nossa imagem e o outro para o texto. E desta vez, vamos usar o atributo de classe para nomeá-los. Vamos nomeá-lo de imagem, bloco e bloco de texto se você salvá-lo e olhar ainda sem alterações. Sei que pode parecer que não está fazendo nada agora, mas prometo que será útil nos próximos passos. Na próxima lição, vamos fazer algumas coisas divertidas. Nós vamos entrar em CSS styling 7. Primeiros passos com CSs: Tudo bem, então se você tem acompanhado até agora, nós temos um ótimo documento HTML aqui, mas é um pouco chato. Bem, neste próximo passo, é aqui que as coisas ficam um pouco mais interessantes porque nós vamos aplicar algum estilo com uma coisa chamada C. S S. E o que CSS significa é folhas de estilo em cascata. É uma forma de marcação que os navegadores usavam para aplicar estilos a sites, e usa um padrão em cascata, o que significa que os estilos na parte superior da folha serão substituídos por estilos concorrentes na parte inferior da folha. Vamos dar uma olhada em algumas das diferentes maneiras pelas quais você pode adicionar CSS ao seu documento. Agora. Uma maneira que você poderia fazer isso é apenas adicionando um estilo em linha diretamente a um de seus elementos, e isso geralmente não é recomendado pelos padrões de hoje. Mas apenas por uma questão de demonstração, vamos simplesmente adicionar um estilo ao nosso elemento de parágrafo. Então a maneira como fazemos isso é digitando estilo igual a, e então dentro das aspas, vamos colocar nossos estilos, então eu vou começar com um estilo muito simples. Isso é cor. Vamos guardá-lo e dar uma olhada no que isso faz. Tudo bem, então você pode ver que é simples assim. Temos texto vermelho no nosso parágrafo. Muito legal, certo? Bem, isso pode levar a problemas no caminho quando, digamos, você está desenvolvendo um site maior e você tem estes em estilos de linha misturados em seu código em todos os lugares. Como você consegue tudo isso? Bem, em vez de usar em estilos de linha, você também pode colocar estilos em sua cabeça. Vamos fazer isso rápido e como você faz isso. É apenas digitando estilo e você vê que ele já acrescenta, em algumas coisas aqui, nós vamos apenas deixá-lo assim. Agora, aqui em cima, você precisará usar o que é chamado de seletor para determinar quais elementos você deseja aplicar seus estilos, também. Então vamos rever alguns dos seletores básicos que temos seletores de elemento, e isso apenas corresponde ao nome do elemento que você está aplicando estilos. Então eu vou usar o elemento parágrafo, então isso vai ser o alvo do nosso parágrafo, certo? Nós também temos seletores de classe e a maneira como usamos aqueles como nós apenas usar o caractere período ou ponto e no tipo ou nome da classe. Então vamos direcionar o bloco de texto. Vamos atacar a turma do livro. E finalmente, vamos adicionar um seletor I D. E a maneira como fazemos isso é usar a tag hash ou símbolo numérico. Assim como alvo card. Então isso vai ser o alvo da idéia de cartão aqui. Sem notar a sintaxe aqui para cada seletor. Nós sempre precisamos incluir um colchete aberto e de fechamento, e dentro desses colchetes, é aí que vamos colocar todos os nossos estilos. Então vamos em frente e adicionar alguns estilos a estes para o parágrafo. Vamos mudar a cor do seu texto novamente. Então, e para o bloco de texto, vamos adicionar algo diferente. Talvez tivesse algum texto azul para todo o bloco de texto, então isso significa que o parágrafo terá texto lido. Qualquer outro texto deve ficar azul. E para o cartão, vamos fazer algo diferente. Talvez uma cor de fundo, e vamos mantê-lo simples e dizer cinza. Agora observe esta sintaxe para adicionar estilos. Tudo o que você precisa fazer é adicionar a propriedade, a propriedade style, dois pontos e, em seguida, o valor dessa propriedade. E você sabe que há toneladas de propriedades de estilo lá fora vai cobrir um monte deles para este tutorial, mas haverá muito mais. Então definitivamente confira essa documentação e apenas brincar com todas as coisas diferentes que você poderia fazer com o seu CSS. Certo, então temos nossos estilos aplicados. Vamos ver como isso se parece. Vá em frente e atualize. Lá vamos nós. Está tudo aí. Não foi tão ruim, certo? Temos o nosso texto azul de fundo cinza, mas, em seguida, um parágrafo de leitura. Agora, esse método de adicionar CSS ainda não é exatamente o ideal. Quero dizer, se você tiver várias páginas em seu site e todas elas usarem os mesmos estilos? É aqui que folhas de estilo externas serão úteis, e essa é geralmente a melhor prática para os padrões atuais. Então deixe-me mostrar-lhe como configurar isso. Nós vamos criar um novo arquivo e ir em frente e salvá-lo como estilo dot CSS. Tudo bem. Você simplesmente copia todos os estilos que já temos aqui, e nós podemos nos livrar desse material extra e nós podemos colar tudo em nosso estilo dot CSS. Agora, antes de voltarmos à nossa página, também temos que vinculá-la ao nosso documento HTML. Certo? Então, a vantagem desta folha de estilo externa é que você pode simplesmente vinculá-la a cada documento HTML que você tem. Então, se você tiver várias páginas, você pode usar a mesma folha de estilo para cada página. Então, a maneira como fazemos isso é usando a tag link que você apertou tab, você provavelmente verá folha de estilo preenchida para você. E você não tem realmente um arquivo mestre CSS. Isso é apenas, eu acho, um espaço reservado para o seu arquivo real. Então o que vamos fazer é adicionar estilo de ponto CSS e vamos ver como ele se parece. Refresque. Tudo bem. Então, como você pode ver, temos todos os nossos estilos ainda lá, então isso significa que nossa folha de estilo externa está funcionando. Agora vamos adicionar alguns dos estilos que realmente precisamos para este projeto. Então vamos em frente e nos livrar de muitas dessas coisas aqui. Mas vamos manter o seletor de bloco de texto agora para cor de texto para, como, como, parágrafos e outras coisas. Gosto de usar uma cor que não é muito preta, como um cinza escuro, e você pode obter esse tipo de controle finito e suas cores. Se você usar algo chamado um valor hexadecimal. E se você não estiver familiarizado com valores hexadecimais ou cores hexadecimais, eu recomendaria fazer uma pesquisa no Google pelo seletor de cores hexadecimais. E, na verdade, nos resultados da pesquisa do Google em si, ele aparecerá com um seletor de cores que você pode usar, e você pode escolher sua cor favorita. Eu tenho um pré selecionado aqui só para economizar algum tempo, então eu vou colar isso aqui. E é assim que o seu valor hexadecimal vai parecer. Então vamos em frente e atualizar e ver o que conseguimos. Tudo bem, então é uma mudança tão sutil. Você realmente não pode dizer se este é um cinza escuro ou preto, então eu quero apresentá-lo a uma grande ferramenta que você pode usar em todos os navegadores lá fora. Ele é chamado de Inspector Tool ou às vezes é chamado de Console do desenvolvedor. Mas, basicamente, você pode simplesmente selecionar qualquer coisa em sua página clicando com o botão direito e clique em Inspecionar, Inspecionar,e você verá esta ferramenta pop-up onde você pode ver todo o seu HTML. Você pode passar o mouse sobre ele e ver o que você está olhando e quando você clicar em um elemento aqui . Você pode ver todo o estilo CSS que você aplicou a esse elemento, e podemos ver que temos nossa cor aqui, e na verdade é porque ele está sendo herdado de um pai, certo? Então é porque CSS é passado para baixo para os filhos de cada bloco. Então, se aplicarmos alguns estilos à nossa etiqueta principal ou cartão, então ele vai ser passado para os filhos dele também. E quero mostrar-vos mais uma coisa que podem fazer com esta ferramenta. Você pode realmente visualizar alterações em seu CSS. Então digamos que eu queria ver como é com texto vermelho. Veja, as mudanças são feitas instantaneamente. Você também pode adicionar novos estilos. Então digamos que eu queria adicionar uma cor de fundo. Lá vai você e apenas saiba que isso não está realmente fazendo alterações em seus arquivos. Não está salvando nada. Se você atualizar a página, ela será redefinida. Então isso é apenas pré-visualizar as coisas. Tudo bem, vamos adicionar outra coisa. Rasgou uma página, talvez, ah, cor de fundo em nosso estilo dot CSS. Vamos mirar no corpo. Então vamos usar o seletor de elementos para isso, e isso vai ser selecionar nossa tag body. Então, vamos adicionar uma cor de fundo. E eu tenho outro valor hexadecimal pré-selecionado aqui. Então eu vou colar isso e vamos ver como é. Lá vamos nós. Tudo bem, então nós temos nosso CSS trabalhando com nosso HTML na próxima lição. Quero mostrar-lhe algumas maneiras que você pode organizar seu projeto site um pouco melhor, e também talvez possamos adicionar alguma textura ao fundo do nosso cartão antigo. 8. Imagens de fundo e links relativos: Longe, certo? Então conversamos um pouco sobre cores de fundo. Mas, você sabe, você também pode adicionar imagens de fundo. Então eu quero recomendar um ótimo site para isso. Sabe, nunca me lembro da garota porque é um pouco complicado. Mas se você pesquisar padrões sutis no Google, é o primeiro resultado aqui. Portanto, este é um grande recurso porque eles têm uma excelente seleção de fundos sutis para o seu site. Mas você pode visualizá-los e você pode procurar por algo que você está procurando, como talvez papel e você pode encontrar todo tipo de texturas de papel. Vamos procurar algo extremamente sutil que me lembre de um tipo de cartão de visita. Uh, vamos ver aqui. Eu gosto deste papel sulco. Sim, parece muito bom. Então, tudo o que tenho para fazer o download é você vai baixar um arquivo ZIP, ir e abrir isso, e nós vamos usar a versão menor. Então vamos copiar isso para o nosso projeto. E aqui vamos nós. Temos os nossos bens. Vamos em frente e usar isso como pano de fundo. Então vamos voltar ao nosso código. E vamos ver, eu gostaria que isso se aplicasse apenas ao cartão em si. Vou mirar este cartão seletor. Eu só uso o sinal de número para o alvo e eu d. E a idéia é cartão. Vamos aplicar uma imagem de fundo e a garota será simplesmente papel sulco. Tenho Ping agora, uma coisa a ter em mente Para cada estilo CSS que você escreve, você sempre quer incluir esse ponto semi cólon no final. Vamos salvar isso e não precisamos mais disso e vamos nos atualizar. Muito bem, aí está o nosso padrão. É muito sutil, mas está lá. Você pode ver agora. Sabe, não temos muitos arquivos aqui, mas isso pode ficar um pouco complicado. Seria bom ter um pouco mais de estrutura para o nosso projeto porque à medida que adicionamos mais ativos dizem que temos um site maior em que estamos trabalhando. Vamos querer um grupo de coisas em pastas diferentes, certo? Bem, é claro, nós poderíamos apenas criar algumas pastas novas, talvez uma para imagens. Aqueles lá dentro talvez 14 CSS que lá dentro, isso é bom e organizado. Mas o que acontece agora? Com todos os nossos elos, tudo fica quebrado. Então, por que quebrou? Bem, porque estamos dizendo ao navegador groove paper dot ping está localizado diretamente em nossa rota de projeto , mas esse não é mais o caso. Agora é uma imagem. Mesmo com a nossa imagem principal estavam dizendo perfil que JPEG está localizado em nossa rota do projeto, mas não o caso mais. Como é que contornamos isto? Bem, nós temos que fornecer o caminho, e o que usamos no desenvolvimento Web normalmente é um caminho relativo. Então, em vez de digitar todo o site e depois o caminho, não precisamos fazer isso. Se estiver tudo no mesmo servidor, basta usar o caminho relativo ao arquivo com o qual você está trabalhando. Então, neste caso são arquivo está na rota e queremos acessar uma imagem que está na pasta de imagens. Então nós digitamos imagens barra perfil J escolher. Vamos dar uma olhada, uh, uh, as imagens estão de volta? E a nossa folha de estilo? Se fizermos a mesma coisa e nos atualizarmos, não estamos vendo nada. Bem, por um lado, precisamos mudar o caminho para a própria folha de estilo. Então, agora não estamos recebendo nenhum estilo CSS. Vamos fazer isso primeiro de volta em nosso HTML, vamos mudar o caminho para CSS estilo barra que CSS porque estamos aqui. Queremos acessar o arquivo lá dentro. Atualização CSS. Ok, há estilos de volta, mas ainda não temos o fundo. Por que é isso? Bem, porque o estilo dot CSS não está na rota do site. Está dentro do diretório CSS. Então o que precisamos realmente fazer é sair desse diretório e, em seguida, para o diretório de imagens para chegar ao nosso groove paper ping. Há uma sintaxe para isso, e é basicamente apenas dois pontos e uma barra. Isso está nos dizendo. Tudo bem, vá para trás um diretório e então acesse o diretório de imagens. E é aí que você encontrará a imagem. Vamos economizar e dar uma atualização. Ah, lá vamos nós. Está funcionando de novo. Ótima. Em nossa próxima lição, vamos falar um pouco mais sobre encontrar propriedades e estilo Alguns desses links 9. tipografia: até agora neste projeto, acabamos de usar a fonte padrão para o navegador, que é tipicamente uma fonte Serra. E não é ideal para todos os projetos, certo? Então vamos dar uma olhada em algumas das propriedades para você pode usar para iniciar um seu fundo. O que eu gosto de fazer é definir uma fonte base na propriedade body para que essa fonte seja herdada por todos os seus filhos. Vou te mostrar o que quero dizer com isso. Então vamos usar a propriedade font. E primeiro vamos colocar uma bola de basebol em 16 pixels. 16 pixels é, ah, praticamente um padrão da Web. Então eu gosto de ficar com ele agora. Vamos adicionar um tamanho de fonte de 16 pixels em uma barra e, em seguida, a altura da linha depois disso, o que nós vamos fazer um. E isso é apenas dizer que nós não queremos que cada linha de texto ocupe mais espaço do que os caracteres realmente são. Então, você sabe, uma altura de linha de um personagem, certo? Ok, então a seguir vamos manter isso muito simples, e nós vamos apenas especificar tudo bem, nós queremos Ariel fundo se ele está disponível. Se não, então San Serif. Ok? E você pode ver que imediatamente todas as fontes na página mudaram. Como é que isso aconteceu? Bem, é porque com CSS, se você tivesse um estilo para um elemento pai, todos os seus filhos também herdarão esses estilos. Então, se você inspecionar este elemento principal, você verá que os mesmos estilos de fonte são herdados do corpo. Agora vamos descer para dizer nossas rubricas. E se quiséssemos títulos menores? Bem, vamos dar uma olhada no que ele está usando agora. Bem, ele está usando uma unidade de medida diferente chamada para M. M unidades são basicamente uma maneira de pegar a fonte do elemento pai e multiplicá-lo por um certo número. Então, neste caso, ele está dizendo, OK, pegue a fonte base de 16 pixels, multiplique por dois. Então vamos passar para o nosso código e vamos envolver esses títulos em um elemento de bloco. Vamos dar-lhe uma classe de cabeçalho e mover esses elementos para dentro de tudo bem e de volta para o nosso CSS. Vamos em frente e em nossos estilos de fundo base em. Gosto de copiá-las diretamente do navegador, colá-las aqui, e agora vamos adicionar nossa nova fonte. Então, para cabeçalhos, para cabeçalho três e nós vamos dar-lhe um tamanho de fonte de 0,8 a. M. Vamos dar uma olhada nisso. Tudo bem, então é um pouco menor, mas o Texas na verdade dentro do elemento H um no elemento H dois, que têm seus próprios tamanhos de fonte aplicados, isso pode muitas vezes ficar bastante confuso para as pessoas. Quero dizer, se o bloco de texto tivesse seu próprio ese o bloco de texto tivesse seu própriotamanho de fonte de três m e então Oh, meu Deus, como você calcula tudo isso? tamanho de fonte de três m e então Oh, meu Deus, Certo, então pode ficar um pouco complicado. Mas há outra unidade de medida que pode resolver esse problema para você. E esse é o reino. Se você apenas adicionar um r na frente, voltamos ao normal, certo? Tão bem, quase que Bram dirá. Ok, eu não me importo com os pais. Eu só quero ser relativo à base lutada, então ele vai olhar para o tamanho da fonte do elemento corpo. Então isso está realmente dizendo 0.8 vezes 16. Vamos em frente e mudar nosso código para usar rim. Atualize a página e ainda estamos bem. Agora, e quanto a esses links? Eles são de uma cor diferente do resto da diversão. Bem, os links são alterados um pouco diferente. Eles são interativos, então eles têm mais algumas propriedades com as quais você pode trabalhar. Então vamos verificar isso. Se você inspecionar um de seus links, você verá no inspetor que temos este pequeno cólon H o b. Se você clicar sobre isso, você tem um monte de elementos diferentes estados que você pode trabalhar com. O que isso significa é dizer, você está passando o mouse sobre um link ou dizer um deles ativo ou dizer que você guia para um. Você vê como é diferente lá, enquanto cada um é um estado diferente em que este elemento pode estar. Então vamos ter alguns estados pairando para o casaco dela. E antes de tudo, vamos especificar uma cor específica para nossos links. Eu fui em frente e escolhi uma cor eu mesmo, então vamos colocar isso na cor deles. Tudo bem, e vamos nos refrescar. Ok, então isso é um pouco melhor. Agora vamos voltar e adicionar um estado de pairamento direito novamente. Eu tenho uma cor ligeiramente diferente por um tempo. Estamos pairando sobre bem fresco, e agora ele paira. Ótima. Agora você pode estar pensando, Eu não quero isso sublinhado, Então, se você não quer nenhum sublinhado sob seus links, você pode removê-lo dizendo decoração de texto. Não, vamos adicionar esse estilo ao nosso código também. Certo, etiqueta de âncora. Salve isso. Refresque. Lá vamos nós. No próximo vídeo, vou mostrar-lhe algumas bibliotecas que eu realmente gosto de colocar em alguns ícones agradáveis e também estilizar a diversão ainda mais com fontes do Google. 10. Bibliotecas: enquanto fundo aéreo é bom, seria bom para especificar sua própria diversão, especialmente se você quiser que isso pareça um pouco mais profissional. Bem, existem algumas bibliotecas gratuitas por aí, e uma delas é a fonte do Google. Vamos dar uma olhada nisso. Então, se você vai para fontes dot google dot com, você verá todas as suas fontes diferentes que você pode usar em seu site. Eu encorajo você a olhar através e encontrar seus favoritos. Eu tenho um que eu gosto, então eu vou digitar P. T. T. Stands. Lá vamos nós. E vamos adicionar isso à nossa seleção. Assim que terminar de selecionar tudo o que deseja em seu site, abra isso. Como você pode ver, eles têm algumas instruções muito boas e detalhadas para você. Então eles têm uma tag de link assim como nós adicionamos nossa folha de estilo. Vamos ir em frente e copiar isso e colá-lo em nosso HTML. Agora queremos ter certeza de que adicionamos acima de nossas folhas de estilo para que possamos usá-lo dentro de nossos estilos CSS, porque o que vai acontecer é que o navegador vai ler este documento de cima para baixo. Portanto, qualquer recurso precisa ser usado dentro deste documento CSS, você precisa ter certeza de que eles estão acima do topo. Então temos o nosso estilo. Se salvarmos e atualizarmos, não veremos nada alterado. Isso é porque neste momento ele ainda está usando o fundo aéreo. Então, se você voltar às fontes do Google, verá que elas mostram a família de fontes que você deve usar. Então vamos copiar a PT Sands e vamos para a nossa folha de estilo. E o que podemos fazer é adicioná-lo bem na frente da antena. Então isso está dizendo que tudo bem, nós preferimos PT Sands. Mas se isso não estiver disponível, use antena. Mas se isso não estiver disponível, então tudo bem, basta usar qualquer areia que Sarah lutou. Então, se dissermos isso e atualizar, lá vamos nós, vemos RPT Sands. Ótima. Então, o que mais podemos diligir? Bem, seria bom substituir esses links de texto por pequenos ícones. Talvez um ícone para o gin tub loco, talvez o logótipo ligado e o logótipo do Twitter. Certo. Bem, há uma biblioteca gratuita, quatro fundos de ícones chamados fonte. Incrível. E aqui está. Então deixe-me mostrar-lhe como usar isso em seu site. Eles têm instruções muito simples. Basta clicar em, começar a usar gratuitamente. E tudo que você tem que fazer é a mesma coisa que você fez com nossa biblioteca do Google Font. E eles realmente têm este pequeno link de cópia útil aqui. Então eu vou usar isso. A mesma coisa é antes de colarmos isto aqui. Deve ficar bem. Salve isso. E agora vamos ver como podemos usá-lo. Então, se você procurar o ícone que você quer no meu caso, eu vou olhar para esquecer Hub. Lá vamos nós. Então eles têm algumas escolhas diferentes. Acho que vou com a rodada. Vou clicar nele, e ele mostra o HTML que você pode usar para esse ícone. Então eu vou em frente e copiar isso. Volte para o meu projeto e no lugar de obter hub, eu vou colar isso aqui e vamos ver como isso parece. Uh, lá vamos nós. Temos um pequeno logotipo do hub. Isso é muito legal. Então vamos fazer o mesmo com os outros. Tudo bem? E vamos ver como isso parece. Muito bem, isto está mesmo a chegar, por isso temos os nossos ícones. Temos nossa fonte personalizada do Google. Então, na próxima lição, vou falar sobre como você pode posicionar qualquer elemento na sua página antiga. 11. Elementos de posicionamento: Uma morsa, certo? Então você pode estar pensando, como diabos vamos mover todos esses elementos na posição certa e vamos começar pequeno. Vamos começar com esses ícones. Eles têm algumas balas estranhas agora e realmente não funcionam com ícones. Vamos consertar tudo isso. Então, se inspecionarmos, vamos dar uma olhada na diferença entre os tipos de exibição. Se olharmos para o aliado, esse é o item da lista. Você pode ver que a exibição é lista. O item faz sentido, certo? E alguns outros elementos? Como um parágrafo que diz bloco de exibição? E que tal um mergulho? O mesmo bloco de coisas. Então, cada elemento vem com seu próprio estilo inerente, e você quer. Se você quiser ver suas opções, você pode dizer exibir e, em seguida, ver o que ele recomenda. Há muitos tipos diferentes. Nós não vamos entrar em todos eles, mas o que vai nos ajudar mais agora é exibir em bloco de linha. Vamos voltar ao nosso código e dar uma olhada. Então vamos ver. Temos um monte de elementos aliados lá dentro, não é? Bem, em vez de adicionar um estilo a cada elemento aliado, vamos adicionar um nome de classe ao nosso pai. Você vai. Vamos chamá-lo de nenhum estilo porque vamos remover o estilo padrão da nossa lista e torná-lo nosso próprio. Agora, para a nossa classe sem estilo, vamos dizer OK para o elemento sem estilo. Queremos que cada elemento aliado dentro dele seja exibido em elementos de bloco de linha que estão em linha bloqueada. Este tipo de jogo irá embrulhar como textos, mas ficar tudo dentro de um bloco. Vamos salvá-lo e ver o que isso faz com nosso projeto. Refresque. Ah, lá vamos nós. Temos tudo horizontal, mas ainda há muito espaço aqui. Bem, o que está acontecendo aqui? Ainda existe algum estilo padrão aplicado ao elemento U L? E nós apenas direcionamos o aliado para desfazer alguns desses estilos. Vamos voltar ao nosso código e corrigir isso para atingir a U.L Só precisamos atingir a classe sem estilo. Vamos em frente e remover o estilo padrão dizendo estilo de lista nenhum, que se livra das balas se eles ainda estão lá, e também diremos preenchimento esquerda zero. Agora você pode estar se perguntando o que é Patty? Bem, primeiro, vamos refrescar e você vê que ele se livra do espaço à esquerda. Agora vamos verificar qual é o preenchimento do seu inspetor. Você verá um pequeno diagrama do que é isso. Isso é chamado de modelo de caixa. O modelo de caixa refere-se a todos os tamanhos diferentes pertencentes ao preenchimento da borda de margem e como eles se relacionam entre si dentro de um elemento. Muitas vezes é difícil entender completamente como o modelo de caixa funciona até que você realmente apenas colocar suas mãos em algum código e brincar com ele. Por isso encorajo-te a fazer o que estou a fazer agora. Veja como as coisas interagem e dê uma olhada nesse pequeno diagrama bacana para ver como ele funciona. Certo, assim como posicionamos esses ícones de forma horizontal, bem, poderíamos fazer o mesmo com nossa imagem e nosso texto, certo? Então vamos em frente e fazer isso em nosso código. Então, como vamos fazer isso? Vamos olhar para ele. Nós temos um bloco de imagem e um livro didático, então nós poderíamos apenas adicionar uma exibição de bloco em linha para cada um desses blocos. Vamos tentar isso para que nós estamos adicionando uma exibição de em bloco de linha tanto para o bloco de imagem o bloco de texto. Vamos guardá-lo e ver como isso parece. Tudo bem. Bem, isso é um bom começo. É um pouco estranho. Para começar, acho que o texto deve estar alinhado ao topo da imagem, certo? Então vamos ver como podemos fazer isso de volta em nosso código. Vamos também adicionar uma linha vertical superior e atualizar isso. Lá vamos nós. Está um pouco melhor agora. Gostaria de um pouco de espaçamento entre estes dois elementos. E como acabamos de aprender, podemos fazer isso com preenchimento ou margem. Como nós realmente só precisamos de espaçamento para a direita da imagem, eu vou adicionar uma margem direita à nossa imagem. Então aqui, sob estilo triste para o nosso bloco de imagem e vamos dizer, margem, certo, Oops, e vamos apenas dar-lhe um espaço de um m. Guarde e vamos checar. Tudo bem, então isso parece um pouco melhor. O que mais podemos acrescentar? Bem, vamos ter algum preenchimento em torno de todo o cartão, na verdade, então nós vamos para o seletor de cartões e adicionar preenchimento que vai adicionar preenchimento em torno todo o cartão como vimos antes, então tapinhas e vai dizer a eles novamente, Salvar e atualizar. Tudo bem, parece um pouco melhor. Ok, então essa é uma visão geral de como o modelo de caixa funciona e como você pode posicionar e espaçar as coisas na página. Há muito mais para aprender lá, mas isso cobre o básico. Em nosso próximo vídeo, vamos falar sobre tamanho. 12. Redimensionamento de elementos: Bem, isso realmente está vindo aqui, mas essa imagem é muito grande. Vamos falar sobre algumas das diferentes maneiras de redimensionar elementos agora uma maneira muito simples aplicar o dimensionamento às imagens. É apenas para usar seus atributos com e altura. Então, na minha tag de imagem, eu poderia apenas adicionar um atributo de largura igual e, digamos, 1 50 E o navegador vai interpretar isso como 150 pixels e grande olhar para isso. Também aplicou uma altura para nós, isso manteve a relação de aspecto correta. Minhas imagens são quadradas, então a largura e a altura precisam ser as mesmas. O que você acha que vai acontecer se eu aplicar uma altura diferente da minha dentro do cenário? Vamos verificar isso. Digamos, em vez disso, 100 pixels. Oh, eu fui esmagado, então apenas tenha isso em mente. Normalmente, você não quer adicionar com e altura às imagens, mas em vez disso você deve deixar o navegador preservar a taxa de proporção para você. Essa é uma ótima maneira de adicionar dentro da altura. Mas no desenvolvimento Web moderno, ele é normalmente tratado dentro do CSS. Então vamos ver como você pode fazer a mesma coisa com CSS em vez disso. Primeiro, vamos excluir esses atributos extras e vamos para o nosso CSS para que possamos apenas segmentar qualquer imagem dentro da classe de bloco de imagem. Largura ou altura do cabeçalho é bastante simples. Em CSS, você poderia usar a propriedade width e dar-lhe um valor de pixel ou uma porcentagem, ou M. Quaisquer que sejam suas preferências, eu vou ficar com pixels aqui e vamos apenas ficar com 150 exatamente assim. Vamos ver o que isso nos dá. Ótima. Agora, essas propriedades de largura e altura também podem ser aplicadas a outros elementos em sua página, então também podemos usá-lo para limitar a largura do nosso cartão. Então isso não está abrangendo toda a página aqui. Então, vamos adicionar aqui para baixo ao nosso elemento de cartão. Por enquanto, vamos tentar um com 600 pixels e ver como isso se parece. Vamos voltar e refrescar-nos. Ótimo, então você pode ver que o cartão em si agora está limitado a 600 pixels de largura. Não se estende por toda a janela. Agora eu pessoalmente sinto que isso é um pouco largo demais. Há muito espaço extra aqui à direita. É um pouco estranho. Vamos encolher isso um pouco, e isso pode ser diferente para o seu nome. Se você tem um nome mais longo ou um nome mais curto, basta senti-lo e ver o que parece bom para você. Ah, digamos que talvez cinco 10 pixels pareçam um pouco melhor agora. Uma coisa a ter em mente é o design responsivo. Por exemplo, o que acontece se estamos vendo isso em uma tela pequena, como um dispositivo móvel vai em nosso inspetor? Podemos visualizar isso usando esta ferramenta útil para alternar dispositivos. Infelizmente, nosso design não é muito responsivo agora. Como estamos usando valores de pixel fixos, o navegador está basicamente diminuindo as coisas, tentando encaixar tudo dentro do dispositivo. Eis o que podemos fazer para contornar isso. Além do nosso com valor, também podemos adicionar um máximo com e configurá-lo para 100% para que apenas diz o navegador nunca escalar este cartão além de 100% da tela. Dessa forma, em dispositivos ainda menores, como um iPhone 5, o texto simplesmente será encerrado e nunca haverá rolagem horizontal. Está bem. Antes que esqueçamos, vamos copiar esses estilos e colocá-los em nosso código. Então vamos substituir este original por. Lá vamos nós. Vamos nos certificar de que tudo ainda está funcionando. Parece ótimo. Mas ainda há uma advertência . Infelizmente, nem todos os navegadores são iguais. Vamos dar uma olhada nesta mesma página no Firefox. Abra o Inspetor. Então parece bem agora. Mas então dê uma olhada quando eu rolar para a direita. Não queremos nada dessa rolagem horizontal, então parece que no Firefox, o máximo com não está funcionando. O problema aqui é uma complicação com o nosso modelo de caixa. Neste momento, o navegador está aplicando o nosso máximo com para o conteúdo da nossa caixa. Mas o preenchimento está adicionando algum adicional com além do tamanho da nossa página. E podemos contornar isso adicionando outra propriedade chamada tamanho caixa e adicionar um valor de caixa de borda caixa. Isso diz ao navegador para aplicar o com até a borda do nosso modelo de caixa em vez de restringí-lo à área de conteúdo. Eu sei que isso é um pouco de conceitos avançados, então não sinta que você tem que entender completamente o que está acontecendo aqui, mas eu só queria ter certeza que você tem essa compatibilidade corrigida dentro de seu design. Então não se esqueça de adicionar isso aí. Vamos em frente e copiar esta propriedade extra para o nosso código. E vamos dar uma olhada no Firefox primeiro. Tudo bem? Ótima. E quanto ao cromo? Tudo bem. Parece bom. Tudo bem, isso é bom e responsivo agora. Então, no próximo vídeo, eu vou orientá-lo através de algumas das maneiras que você pode alinhar esses elementos dentro de sua página. 13. Alinhamentos: Então o próximo. Seria ótimo se pudéssemos posicionar este cartão inteiro no centro da página. Bem, existem algumas maneiras que você pode posicionar elementos usando CSS e vamos rever as diferentes maneiras de fazer isso. forma como você posiciona os elementos depende realmente do tipo de exibição. No caso de um elemento de parágrafo, por exemplo, você pode adicionar o centro de alinhamento de texto de estilo, e ele centraliza-o dentro do parágrafo. Neste caso, o parágrafo não é muito amplo, mas vamos deixar isso como alinhado à esquerda, que é o padrão no caso de elementos de bloqueio de linha, como nossos itens de lista. Bem, esses poderiam ser alinhados usando o mesmo método de alinhamento de texto para que você possa adicionar um centro alinhado de texto e centralizaria todos estes em elementos de bloco de linha. Mas não vamos fazer isso. O que queremos alinhar é nosso cartão geral, que, que, como você pode ver, é um elemento de bloco. Elementos de bloco são um pouco mais desafiadores para centralizar. O que podemos fazer é utilizar a margem para que possamos fornecer espaçamento igual no lado esquerdo e direito do bloco. Então a maneira que você pode fazer isso é adicionando margem automática, isso diz ao navegador, ok, automaticamente determinar a margem máxima tanto para o lado esquerdo quanto para o lado direito deste elemento e apenas igualá-los fora. E isso nos dá um alinhamento central. Agora, além disso, podemos adicionar a esta margem porque queremos um pouco de espaçamento a partir do topo da página. Certo? Bem, como fazemos isso? Podíamos adicionar uma margem superior e dar-lhe um M. E lá vamos nós. Ou também podemos fazer isso. Agora, como diabos isso funcionou? Bem, vamos dar uma olhada no diagrama aqui. É aplicar um M ou 16 pixels neste caso para a parte superior e inferior, então a esquerda e a direita são calculadas automaticamente. A razão para isso é porque esta é realmente uma propriedade abreviada. Se eu clicar nesta seta aqui, você pode ver que ele está realmente determinando todas essas propriedades separadas. Então margem é abreviação para uma margem. Margem superior, margem direita, água inferior e esquerda. E está nessa ordem. Então digamos que você queria Ah, margem superior de um m e você queria uma margem direita para eles. E você queria que o fundo fosse de três m e que fosse para ele. Eu não sei por que você iria querer isso, mas só para ilustrar, você pode ver que isso se aplica a cada um por essa ordem. Então vamos deixá-la. Vamos deixar no ah para M auto. Isso nos dá um pouco de espaço no topo, mais o alinhamento centrado. Muito bem, vamos aplicar estes estilos ao nosso código antes de esquecermos. Vamos aplicar este cartão dentado aqui, consertar nosso espaçamento, salvar e atualizar. Tudo bem, lá vamos nós. Parece muito bom. Agora há uma outra maneira. Você poderia alinhar itens que eu queria apenas rever brevemente. Não vamos usá-lo neste projeto, mas digamos que você queria mover esta imagem para a direita. Bem, você poderia facilmente fazer isso usando a propriedade float por padrão. Não há carro alegórico. Mas se você flutuou direito, bem, olhe para isso. Move a imagem para o lado mais direito antes de atingir o preenchimento do carro. Certo. Então você pode usar isso à sua disposição também. Muita gente vai flutuar coisas sobrando. Ah, a fim de tornar os sites mais responsivos. Não vamos usar essa técnica neste projeto, mas saiba que isso também está à sua disposição, Velho. 14. CSS avançado: Certo, então isso está realmente chegando. Há mais alguns tweets que eu queria adicionar que são um pouco mais avançados, mas acho que estamos prontos para enfrentá-los. Então, antes de tudo, seria bom se pudéssemos apenas clicar neste link e abriria nosso cliente de e-mail . Certo? Então vamos passar para a nossa idade para enviar, e vamos apenas adicionar um link para isso. Como você se lembra, os links são a marca âncora agora para o ref H. Nós vamos adicionar uma garota especial que basicamente diz ao navegador para abrir o cliente de e-mail no computador da pessoa para que isso seria correio muito dois-pontos. E então você vai adicionar qualquer endereço de e-mail para o qual deseja enviar e-mail. Vamos voltar ao nosso navegador, atualizar, e você verá que é um link. Vamos clicar nele, e abriu-se na minha outra janela. Mas posso mostrar-te aqui. Lá está ele. Então abriu minha caixa de entrada. Eu não tenho um homem configurado no meu computador agora. Não vou fazer isso agora. Quais são outras coisas que podemos acrescentar? Bem, assim como nós horizontalmente centrado são cartão. Seria bom tê-lo centralizado verticalmente também, por isso está bem no meio da página. Acredite ou não, isso é um pouco avançado, mas vou te mostrar como se faz. Portanto, há uma propriedade relativamente nova disponível para quase todos os navegadores. Neste ponto, ele é chamado Flex Box, e há um monte de detalhes sobre Indian sobre como caixa Flex funciona. Pode ficar um pouco complicado, mas vou mostrar basicamente como usá-lo para alinhar elementos verticalmente. Porque realmente, essa é uma das melhores maneiras de fazê-lo hoje em dia com navegadores modernos. Então vamos nos livrar disso e voltar ao nosso código. Assim, a forma como a caixa Flex funciona é que você precisa de um elemento de empacotamento geral, e então você pode posicionar elementos dentro disso. Então vamos usar o rapper TIC de tese como nosso elemento pai geral. E vamos ver, vamos em frente e adicionado acima cartão, eo primeiro passo é apenas para torná-lo flexível exibição. Agora, a fim de centralizar verticalmente na página, vamos precisar ter certeza de que este elemento está ocupando toda a página. Certo? Então vamos adicionar, ah, ah, altura de 100%. Então, dessa forma, ele vai ocupar toda a página, e nós vamos dizer direção flexível deve ser coluna porque queremos centralizar verticalmente , justificar conteúdo deve ser centro. E um item de linha também deve ser central. Então, o que? Isso salvou. Vamos ver o que temos até agora. Refresque. E bem, nada aconteceu. Por que é isso? Vamos dar uma olhada. Tudo bem? problema difícil aqui é que sim, estamos ocupando 100% do nosso corpo, mas o corpo dela não é 100% da janela dela. Por que é isso? Bem, nem o documento HTML em si. Então, como podemos garantir que toda a janela seja tomada pelo nosso documento HTML? A maneira que eu gosto de fazer isso é realmente adicionar estilos ao próprio documento. Então eu posso adicionar uma altura de 100%. Isso garante que o documento HTML ocupa toda a página e eu poderia fazer o mesmo para o corpo. E lá vamos nós. Vamos em frente e aplicar esses estilos ao nosso código. Vou colocar isso no topo HTML e altura do corpo. 100%. Tudo está funcionando como esperado. Incrível. Vamos ver algumas outras coisas que eu realmente gostaria que esses cantos fossem um pouco ao redor. E assim parece mais um cartão. Bem, vamos tentar isso. A maneira como podemos fazer isso é adicionando o que é chamado de raio de fronteira, e é bem simples. Assim, junto com a fronteira, há fronteira, raio e enfraquecimento. Basta aplicar o padrão, pixel ou M o que você preferir. Só vou dar um raio de cinco pixels. Isso parece muito bom. Mas, sabe, na verdade, acho que talvez devêssemos usá-los para fazermos 0,8 m. Ah, sim, isso é bom. Assim é relativo ao resto da página. Então vamos salvar isso em nosso código, encontrar nosso cartão e em nosso raio de fronteira e atualizar. Ótimo. Tudo bem, um ajuste final. Seria muito bom se pudéssemos apenas adicionar uma sombra sutil lá, então realmente saiu do resto da página. Vamos ver como você pode fazer isso. O que eu gosto de fazer é ir a um gerador de sombras de caixa porque há muito para encaixar sombras. Não me apetece calcular sozinha. Então caixa de gerador de sombra e há uma tonelada destes on-line Escolha o seu favorito. Eu só vou clicar no primeiro 1 que eu vejo. E os controles são bastante intuitivos ano. Então, é uma visão muito boa, eu diria. Uh, vamos ver. Vamos torná-lo um pouco mais sutil. Ok, então vamos tentar isso. Tudo que você tem que fazer é copiar tudo isso e colá-lo em seu cartão. Vamos voltar ao nosso navegador, e não precisamos mais disso. Vamos refrescar. Tudo bem, isso é incrível. Então, agora que fizemos o nosso design, acho que é hora de colocá-lo online para se exibir. Certo? Então, no próximo vídeo, eu vou mostrar a vocês como fazer isso de graça 15. Publicar seu código: Uma morsa. Certo. Então temos o nosso produto acabado. Esta é a nossa estrutura de arquivos, como você sabe, nós para obter todos esses arquivos na web para que ele possa ser acessado por qualquer pessoa no mundo. Como é que fazemos isso? Bem, há um monte de opções lá fora. Você poderia comprar alguma hospedagem de. Você sabe, os vários anfitriões lá fora. Tenho certeza que viu comerciais para eles. Ah, vai, papai, Host Gator. Ah, há uma tonelada delas e elas tornam muito fácil para você fazer. Ou você poderia mantê-lo simples e ir para obter hub. Como sabe, adoro pedir ajuda porque está no meu cartão. Tudo bem, então vamos nos levantar e tudo bem. Eu já tenho uma conta. Sou muito ativo aqui. Você não vai ver tudo isso, mas o que você quer fazer é criar um novo repositório. Uma vez que você se inscrever, esqueça hub. Você pode criar um repositório que é basicamente apenas um lugar para colocar todos os seus arquivos. Agora, não tem que ser público se você não quiser que seja. Mas se você queria estar online, então você provavelmente deveria mantê-lo público. Também é ótimo ter uma conta hub get. Se você está tentando entrar na comunidade de desenvolvimento Web Ah, é um ótimo lugar para mostrar o que você pode fazer na medida em que codificar o quão ativo você é. Ah, e apenas para se comunicar com outros desenvolvedores porque há um monte de projetos de código aberto em levantar-se que você pode ter acesso e apenas contribuir para si mesmo. De qualquer forma, o que fazemos aqui é que precisamos de um nome de repositório. Isso também vai amarrar o U R l de seus cartões de visita. Por isso, tenha isso em mente quando chegar ao seu nome. Só vou manter as coisas simples. Então, no nome que cartão tutorial e você não tem que fornecer uma descrição. Vou pular isso a partir de agora. Nós vamos mantê-lo público, e você quer inicializá-lo com um leia-me apenas por diversão Estes Tudo bem, Então vamos em frente e criar um repositório. E aqui esta é a sua chance de adicionar todos os seus arquivos. Então, basta ir até aqui para fazer upload de arquivos, e a partir daqui você pode literalmente arrastar e soltar todos os seus arquivos na janela. Então selecione tudo o que temos em nosso diretório ah tutorial e coloque-o em seu repositório. Vai carregar tudo com os diretórios e tudo mais. E esta é a sua chance de dizer, tudo bem, o que você acabou de fazer? Bem, ele vem com um texto padrão, e eu gosto disso. Então, vou cometer mudanças dessa forma. Então é cometer mudanças. Isso pode demorar um pouco. Quando estiver pronto e funcionando a seguir, vamos para as configurações. Este é o lugar onde você pode ir em frente e lançar seu site. Então, role para baixo para obter páginas de hub, queremos escolher uma fonte. Deve ser o ramo mestre. Salve isso. E, se você rolar para baixo, verá que as páginas de ajuda estão habilitadas e poderá alterar o domínio. Mas estou feliz com isso. Então, se você clicar em seu domínio, lá está. Seu código agora está vivo e você pode compartilhar esse euro com quem quiser 16. Resumo: Parabéns. Você deu seus primeiros passos para aprender HTML e CSS, e você tem uma página legal da Web para provar isso. Agora, não se preocupe se um pouco disso é um pouco difícil de reter, é um monte de informações. Basta lembrar que você tem o código que acabamos de escrever para referência. Você também tem a documentação indiana, então fique à vontade para olhar através disso se precisar de algumas dicas. Além disso, você não tem que parar aqui. Você poderia levar este projeto um par de passos adiante. Se você estiver pronto para alguns desafios bônus, eu recomendaria algumas coisas que você poderia pensar sobre, adicionando uma imagem de fundo à página da Web. Você pode brincar com o raio da borda e torná-lo mais um estilo Kirby ou um estilo circular. Você também pode expandir este cartão e torná-lo mais de uma mini biografia. Você poderia entrar em alguns de seus antecedentes algumas de suas habilidades. Quando estiver satisfeito com o seu design, encorajo-o a partilhá-lo na Galeria de Projetos. Estou ansioso para ver alguns dos produtos acabados lá fora também. Ei, se você gosta deste curso, por favor sinta-se livre para me seguir aqui em compartilhamento de habilidades. Além disso, você pode me acompanhar no Twitter e eu adoraria qualquer feedback que você tem para mim em uma revisão também . Então, de qualquer maneira, obrigado por sintonizar e um revestimento feliz velho.