HTML e CSS para iniciantes: crie seu próprio blog pessoal!

1. Boas-vindas ao curso!: Bem-vindo ao HTML iniciante e CSS. Estou animada por ter você comigo neste curso. Meu nome é Chris, e eu sou um desenvolvedor web e também um experiente criador de cursos on-line ensinando milhares de alunos certificados. Este curso irá apresentá-lo ao HTML e CSS, aos principais blocos de construção, sites de guindastes. Se isso é novo para você, não se preocupe. Este curso foi projetado para iniciantes, e eu criei este curso com minas de ouro quentes. Vamos levar os iniciantes e dar-lhes as habilidades e confiança para ir em frente e criar seus próprios sites a partir do zero. No final deste curso, você construirá seus próprios projetos de blog pessoais totalmente personalizados com várias páginas. O projeto terá uma página de destino em tamanho real para dar um pouco de informação sobre você ou seu bloco. O tema e o design deste blog são completamente até você. Encorajo-te a inventar as tuas próprias ideias. Isso irá então vincular a outras páginas, incluindo sua própria página de blog. Agora só vamos criar o site para ficar bem em telas de computador. Também garantiremos que o design também seja responsivo. Isso significa que ele mudará estilos e layout. As telas de tamanhos diferentes para ficar bem em tamanhos de celular e tablet também. Todas as habilidades que você aprenderá serão imediatamente colocadas em prática para reforçar tudo e também dar um exemplo real de como elas são usadas. Depois de terminar este curso, você terá a confiança e também as habilidades para construir mais sites a partir do zero usando HTML e CSS, juntamente com alguns recursos e fervor rennin para tirar, para mantê-lo aprendendo muito depois de terminar. Este é apenas um gostinho do que você aprenderá ao longo deste curso. Cadastre-se no curso e comece sua jornada para o emocionante mundo da construção de sites. 2. Ferramentas necessárias: Se você é novo para construir um site, pode ser comum pensar que um assunto técnico como este vai precisar de um computador super poderoso e muitas ferramentas ou software. Este não é o caso, no entanto, desde que seu computador possa executar um programa como o Word, e também navegar na Internet, você está pronto para ir. Para acompanhar este curso, há apenas duas coisas principais que você precisará, e ambas são gratuitas para usar e baixar. Primeiro é algo que você provavelmente já tem se estiver assistindo a este curso, e este é um navegador web. Vou usar o Google Chrome para este curso e é também o que eu recomendaria. Analisaremos as ferramentas de desenvolvedor do Chrome posteriormente neste curso. Se você tem qualquer um dos outros navegadores principais, como Firefox, Safari, Internet Explorer ou o Microsoft Edge mais recente, isso é completamente bom para usar também. Você pode querer baixar mais de um para testar seu site em diferentes navegadores. O próximo é um editor de texto. Este é um lugar onde você vai escrever seu código. Aqui, você pode ver alguns editores de texto populares disponíveis, e também os links para cada um. Em primeiro lugar, há o Visual Studio Code, que usarei, e também está disponível para Mac, Windows ou Linux. É gratuito para baixar e usar. Atom também é popular e é construído pelo GitHub. Tem um bom back-in. Ele está disponível para Mac , Windows e Linux, e também gratuito para uso. Sublime Text também tem sido popular por um longo tempo e é um grande editor de texto web. Este é o único aqui onde há um custo para comprar uma licença. No entanto, é gratuito para baixar e também para avaliar. Atualmente, não há limites de tempo para o período de avaliação. Novamente, ele está disponível para Mac, Windows e Linux. Bracket também é popular e tem uma boa visualização de vida, o que significa que as mudanças como mostrado no navegador enquanto você digita, sem ter que atualizar a página. Isso também está disponível para Mac, Windows e Linux também. Você pode realmente escrever um site com qualquer programa de texto, como o Word, mas há muitos benefícios em usar um editor dedicado para a web, como codificação de cores, realce de seta e auto-completar, para citar alguns. Como eu disse antes, usarei o primeiro aqui chamado Visual Studio Code. Vá até lá ou outro de sua escolha e baixe o software para sua plataforma. Uma vez feito isso, volte no próximo vídeo e daremos uma olhada no que é HTML e CSS. 3. O que é HTML e CSS?: Durante este curso, estaremos construindo nosso projeto e aprendendo sobre HTML e CSS. O que exatamente é HTML e CSS? Bem, começamos com HTML. HTML significa marcação de hipertexto language.HTML é a linguagem de marcação padrão para a criação de sites e aplicativos. Atualmente, a versão mais recente é HTML5 e em cada versão que é introduzida, há novos recursos adicionados. Falaremos sobre isso também para o curso. Os elementos HTML são os blocos de construção de uma página da Web. A maioria dos elementos consiste em uma tag de abertura e fechamento com algum conteúdo no meio. Então, este exemplo na parte inferior é uma tag p, e isso é usado para adicionar parágrafos de texto. Temos a etiqueta de abertura à esquerda e, em seguida, uma etiqueta de fechamento à direita com a barra dianteira. Então colocamos algum conteúdo no meio. Para este exemplo, é apenas um texto. Também podemos adicionar alguns atributos a esses elementos HTML e fornece algumas informações adicionais. Adicionamos esses atributos à tag de abertura. Então, podemos ver com o exemplo na parte inferior, nós adicionamos um ID atributos a este parágrafo de texto e, em seguida, deu seu ID um nome de texto de cabeçalho. Podemos então usar este nome do texto do cabeçalho. Mais tarde para adicionar algum CSS ou até mesmo trabalhar com ele usando JavaScript. Em seguida, temos CSS. CSS significa folhas de estilo em cascata. É uma linguagem de folha de estilo usada para descrever a aparência e também a formatação de um documento da Web escrito em uma linguagem de marcação, como HTML. CSS é usado para estilo, posicionamento e layout. CSS3 é a versão mais recente, que inclui muitos recursos novos, como adicionar transformações e animações, para citar alguns. Então, ao percorrermos o curso, aprenderemos muito mais sobre HTML e CSS, mas por enquanto, lembre-se de que HTML fornece o conteúdo da página web. Em seguida, usamos CSS para qualquer estilo e layout. 4. Escolha seu tema!: Estamos quase prontos para começar a construir nosso projeto e começar a aprender sobre HTML e CSS. Antes de fazermos isso, gostaria de pensar um pouco sobre um tema para o seu projeto. Na tela aqui, este é um projeto que eu vou construir. Que será um blog de viagem pessoal. Claro, você está livre para acompanhar comigo, e ficar com o mesmo tema de viagem. No entanto, gostaria de encorajá-lo a pensar em algo pessoal para você. Pode ser algo como um livro de esportes, um blog sobre desenvolvimento web ou codificação em geral, ou até mesmo sobre sua comida favorita, por exemplo. O projeto que vai construir pode ser personalizado para atender praticamente qualquer tipo de blog que você pode pensar. Vá em frente e seja tão criativo quanto quiser. Talvez escreva algumas ideias e uma vez que a sua ideia tenha sido finalizada. Podemos então passar para o próximo vídeo onde começaremos nosso projeto. 5. Começando um projeto na web: Agora vamos pular direto para a construção do nosso projeto de blog. A página de destino será a página de entrada principal do site. Faz sentido começar aqui. É também a página mais simples e irá ligar para o resto das páginas que criamos também, como o blog e a página sobre mim. Criar um novo projeto de site é relativamente simples. Começamos com uma nova pasta do projeto. Esta pasta irá então conter todos os arquivos para o nosso site, como as diferentes páginas e também as imagens. Vou colocar o meu na área de trabalho para facilitar o acesso. Você pode adicionar o seu em qualquer lugar que você achar mais conveniente. Como os documentos. Sim, vou clicar com a tecla Control pressionada ou clicar com o botão direito e criar uma nova pasta. Vou chamar isso de bloqueio de problemas. Então as exibições são de qualquer maneira, encontrar conveniência. Você já deve ter baixado o Visual Studio Code agora ou um editor alternativo. Para abrir este projeto no editor tudo que você precisa fazer é selecionar seu editor de código e, em seguida, ir para o arquivo. Você pode selecionar sua pasta a partir daí. Ou você pode simplesmente arrastar na pasta do projeto e começar a trabalhar. Então agora você vê a pasta do projeto dentro da barra lateral. Podemos ver o título de Travel Blogger. Agora é hora de criar o novo arquivo para conter o código para nossa página de destino. Tradicionalmente, a página principal ou padrão em um site é chamada de página index.html. Vamos criar isso agora. Assim, você pode ir para Arquivo e Novo Arquivo ou Command ou Control N para criar uma nova página da Web. Você deseja salvar isso imediatamente como a página index.html. Certificar-se de que esta tem a extensão HTML no final, porque a página da Web será um HTML. Certifique-se também de que isso está salvando dentro do projeto de blog de viagens também. Ele está salvo e agora você verá a nova página dentro da pasta do projeto, na barra lateral. Vou apenas digitar Hello no index.html e, em seguida, salvar isso. Se você quiser abrir esta página web no navegador para ver o conteúdo, tudo o que precisamos fazer é abrir a pasta do blog de viagens e, em seguida, clicar duas vezes no index.html. Agora podemos ver Hello! Dentro do navegador. Portanto, este é apenas texto simples em vez de HTML válido. Mas parabéns por abrir a primeira página da web dentro do navegador. Agora este projeto está configurado. Vamos agora passar para analisar como estruturar corretamente uma página da Web. 6. Estruturando páginas em HTML: Ao criar páginas HTML, que devem ser lidas pelo navegador, é realmente importante estruturar nosso código corretamente. A primeira coisa que precisamos fazer em nossa página de índice é adicionar uma declaração doctype. Isso declara qual versão do HTML estamos usando. HTML5 é a versão mais recente, e o doctype se parece com isso. Abra as tags, use um ponto de exclamação e, em seguida, doctype e HTML. Doctype s as primeiras versões do HTML, eram muito mais longas e mais complicadas, mas HTML5 agora é agradável e simples. O doctype não diferencia maiúsculas de minúsculas. Mas eu sempre gosto de digitá-lo em maiúsculas de qualquer maneira, então nós temos os elementos HTML raízes e que se parece com isso. Assim, a maioria dos elementos HTML, há uma tag aberta e também uma tag de fechamento que começa com a barra. Este é o elemento de rota principal, que significa que todo o resto deve ser adicionado entre essas tags, com o doctype sendo a única exceção. Dentro da tag de abertura, vou adicionar um atributo de idioma. Um atributo é apenas algumas informações adicionais sobre os elementos. Vou criar um site em inglês, então o código do idioma é “en”. Então adicione os atributos de idioma que eu vou definir como “" en”. Se você quiser usar um idioma diferente, você pode encontrar uma lista completa procurando códigos de idioma HTML e, em seguida, selecione seu idioma a partir daí. Este elemento HTML principal agora contém dois elementos aninhados dentro. Primeiro, temos a seção “cabeça”. Simplesmente assim. Novamente, isso tem as tags “abertura” e também “fechamento”. A seção contém dados às vezes referidos como metadados, que são informações sobre o documento HTML. Essas informações não são exibidas dentro do navegador, mas fornecem informações importantes sobre seu site, como o título do site, a descrição e também links sobre arquivos para os quais veremos mais tarde. Então outra seção é o corpo. Então, a tag corpo de abertura e, em seguida, a tag de fechamento com a barra de frente. Assim como um humano teria a seção da cabeça em cima e depois a seção do corpo. Esta seção contém todo o conteúdo dos sites que é exibido dentro do navegador, como qualquer texto ou imagens. Então, basicamente, a cabeça contém os dados do nosso site que não são exibidos. E o corpo é para o conteúdo do nosso site que é exibido no navegador. Agora podemos adicionar algum conteúdo no lado da seção da cabeça. O primeiro é os metadados. Vamos adicionar o elemento meta. O metatag não contém uma tag de fechamento. Dentro daqui podemos adicionar um atributo chamado conjunto de caracteres. Aqui podemos especificar a codificação de caracteres para a página web. O mais comumente usado é chamado UTF-8. Você pode encontrar a lista de conjuntos de caracteres disponíveis dentro dos recursos. O último metatag que adicionarei é para o viewport. Então, novamente, abra a meta tag desta vez, o nome é igual a “viewport”. A janela de exibição é a área visível da página da Web. No passado, costumava ser apenas uma tela de computador. Mas desde smartphones e tablets, o tamanho da viewport agora pode variar consideravelmente. Então é por isso que esta tag viewport é importante. Primeiro, adicionamos o conteúdo e definimos a largura do conteúdo para ser igual à largura do dispositivo. Isso permite que a largura da página seja igual à largura do dispositivo no qual ela está sendo visualizada. Em seguida, separados por uma vírgula, podemos adicionar a escala inicial para ser igual a 1. Isso define o nível de zoom quando a página é carregada pela primeira vez. Isso pode ajudar a manter o zoom consistente ao girar dispositivos de paisagem para retrato, por exemplo. Finalmente, vou adicionar o título do site logo abaixo. Então isso tem as tags de abertura e fechamento. Com a barra para a etiqueta de fechamento, então podemos ter o título dentro. Vou ligar para o meu “Blog de Viagem do Chris Dixon”. Então dê esse cofre. Assim, este elemento título será exibido dentro do navegador. Então, se formos para o Google Chrome e clicar em Atualizar, veremos agora o título aparece na guia superior lá. Então esta é a estrutura básica que precisamos para qualquer página HTML. Se tudo isso é novo para você não se preocupe em memorizar todos os problemas ainda. Usaremos a mesma estrutura em todas as nossas páginas. Tão logo se tornará mais familiar. Sei que esta parte pode parecer um pouco chata. Não estamos vendo nada na tela ainda. Mas passaremos agora a adicionar mais conteúdo na página de destino. Então, em seguida, vamos adicionar a seção head, que irá conter o título do site e também os links de navegação para outras páginas. 7. Criando o cabeçalho: Agora é hora de começar a adicionar um cabeçalho de site. Este cabeçalho conterá o título do site e também os links para outras páginas. Também podemos reutilizar código e ter um cabeçalho consistente em todas as nossas páginas. Para começar, comece na página index.html e adicione isso entre as tags body. Logo abaixo da abertura para o corpo. Podemos abrir as tags de cabeçalho e novamente, como mais essencialmente abertura e também o fechamento dentro. O elemento de cabeçalho não é obrigatório. No entanto, é um elemento fornecido cadeias, hey, HTML5. Então faz sentido fazer uso dela. O elemento real em si não será exibido na tela. Então, economizamos e atualizamos. Ainda não conseguimos ver nenhum conteúdo dentro do navegador. Mas em vez disso, ele descreve para o navegador qual conteúdo ele irá conter. Vamos em frente e adicionar algum conteúdo entre as tags de cabeçalho. Comece com o nome do site na parte superior da página. Nós vamos adicionar isso dentro das tags H1. Então H um é um elemento de cabeçalho. Os cabeçalhos são adicionados com tags da página um até H6. H1 sendo o nível superior do mais importante citado em e H seis sendo o menos importante. O texto exibido também é maior para H1 e, em seguida, fica gradualmente menor até H6. título do nosso site é uma informação importante. Portanto, este é um bom uso para a tag H1. Vou adicionar o título do site entre o blog de viagens de Chris Dixon. Basta dar isso salvar e então nós podemos ir para o navegador e depois atualizar. Agora vemos o título na parte superior da página. Nós vamos fazer uso do tamanho maior de títulos para enquanto passamos por esses projetos. Em seguida, podemos adicionar os links de navegação para as outras páginas. Nós também temos um elementos circundantes para estes dois chamados nav. Então, logo abaixo de H1, eu vou criar os elementos de navegação com a tag de abertura e fechamento. Tanto o nav quanto o cabeçalho, são o que chamamos de elementos semânticos. O que significa que eles descrevem o conteúdo dentro deles. Isso ocorre porque um mecanismo de busca como o Google pode ver esses elementos e saber exatamente o que eles são. Assim cabeçalho irá conter estes cabeçalho do Site e nav irá conter a navegação do site e assim por diante. Na maioria das vezes criamos nossos links usando uma lista. Então nós não nav, podemos criar uma lista desordenada usando as tags UL. Um pedido significa simplesmente que cada item na lista não será numerado. Por exemplo, 123 e assim por diante para cada item. Em seguida, para criar cada item na lista, ou no nosso caso, a lista de páginas. Nós adicionamos as tags LI e, em seguida, dentro do alvo, podemos adicionar o nome de cada um de nossos links. Vou começar com a página inicial. Então nosso segundo link, novamente dentro das tags LI vai ser a página sobre mim e o terceiro vai ser para o livro. Então o nome que adicionamos entre esses itens da lista, vai ser o nome que vemos na tela. Se você passar por cima e atualizar o navegador. Agora vemos casa sobre mim e também o blog. Você pode ver por padrão que é um marcador ao lado de cada item à esquerda. Se quiser que esta lista seja numerada, por exemplo 1,2,3, podemos alterar as tags UL. Temos aqui dois OL para uma lista encomendada? Isso parece muito diferente do local de acabamento, no entanto, que analisamos anteriormente. Isso ocorre porque nós apenas adicionamos o conteúdo HTML. O estilo CSS e o layout farão com que isso pareça muito mais agradável em um vídeo posterior. 8. HTML semântico e layout: Eu quero dar um rápido passo atrás da adição a este site, e tomar um momento para olhar para o que chamamos de elementos semânticos. Elementos semânticos são simplesmente elementos que descrevem claramente seu conteúdo, não só para o navegador, mas para outros desenvolvedores também, olhando para o seu código. Já em nossa página de índice, usamos alguns tanques semânticos, tanto o cabeçalho como o nav são classificados como semânticos, como eu digo ao navegador que o conteúdo entre eles, cabeçalho zebra ou uma seção de navegação. Este é um diagrama de um site típico. O corpo contém todo o conteúdo que vemos na tela, como já sabemos. Aqui vemos algumas seções típicas de um site. Cada seção tem um elemento div. Uma div é uma seção ou uma divisão usada para agrupar conteúdo. Como você pode ver aqui, usamos um para cada parte do site, cada um com um atributo id, para que possamos adicionar um estilo usando CSS. É assim que as coisas têm sido feitas há muito tempo e ainda são. Os elementos Div são perfeitamente bons para usar. Na verdade, vamos usá-los durante este projeto também. Aqui adicionamos mais alguns elementos div, desta vez aninhados dentro dos existentes. Novamente, isso é bom e também muito comum. No entanto, desde o HTML cinco, agora temos alguns elementos alternativos para usar, assim como você pode ver aqui. Em vez de usar uma tag div genérica, agora podemos usar esses elementos semânticos ou descritivos. Tanto o div como também todos os novos elementos que você vê aqui, ainda têm uma abertura, e também uma tag de fechamento para cercar o conteúdo, assim como o cabeçalho e o nav que nós olhamos anteriormente. Há também main, que contém o conteúdo principal do site. Isso não deve ser usado para qualquer conteúdo que é repetido em outras páginas, como barras laterais. Por exemplo, o elemento de lado que vemos à direita é frequentemente usado para barras laterais, e geralmente é repetido em todo o site, portanto, é melhor ser mantido separado do conteúdo principal. Como você pode ver, há também um elemento para o rodapé agora também. Então este é o exemplo que vimos anteriormente, mas desta vez com os novos elementos semânticos. Aqui você pode ver um elemento de artigo que é ideal para usos como uma postagem de blog ou um widget, que tem conteúdo auto-suficiente. Há também um elemento de seção abaixo também. Isso, como parece, define a seção do nosso documento web. Isso é para agrupar conteúdo relacionado. Também temos agora o elemento nav, que já vimos. Isto é para seções de navegação. Note que nós colocamos isso dentro do cabeçalho para este exemplo. No entanto, isso não é necessário. Eu posso ser colocado fora do cabeçalho ou mesmo aninhado dentro de áreas também. Também podemos levar as coisas ainda mais longe, reutilizando elementos, como o cabeçalho ou o rodapé para definir as seções de cabeçalho e rodapé de um artigo, ou até mesmo reproduzir seções dentro de outros elementos, como a barra lateral. Lembre-se, porém, que esta é apenas uma maneira comum de usá-los. Eles não são forçados sobre nós de qualquer maneira particular, e o caso de uso também diferirá dependendo do estilo do site em que você está construindo. 9. Links, aninhamento e indentação: Adicionamos nossa lista de páginas à navegação. Mas se você clicar neles, nada parece acontecer. É porque nós só os adicionamos como uma lista em vez de dizer ao navegador que eles devem vincular a outras páginas? Fazemos isso adicionando um elemento A que significa âncora. Isso pode ser adicionado entre as tags LI, assim como este. Vou primeiro cortar o texto inicial e depois adicionar as etiquetas A. Isso tem uma abertura e uma tag de fechamento e, em seguida, podemos colar o texto de volta dentro. Eu vou fazer o mesmo por mim. Eu vou cortar o texto para fora e adicionar o elemento A e colar isso de volta dentro e, em seguida, o mesmo para o blog e dar um salvamento. Em seguida, podemos adicionar um elemento para a tag A chamado HREF. HREF simplesmente nos permite adicionar um local para o link. Nós estaremos ligando para outras páginas, então vamos adicionar os nomes de nossas páginas aqui. Adicione o atributo HREF dentro da tag de abertura. O index.html será vinculado de volta à página inicial, então isso será index.html. Este é um caminho de arquivo relativo. Vou deixar a página sobre mim vazia por enquanto pois isso será um desafio para você mais tarde no curso. Ainda não criamos a página do blog, mas adicionaremos isso em breve. Para me preparar para isso, eu também vou adicionar o HREF dentro aqui e isso vai ligar para a página blog.html. Dê que um salvamento e, em seguida, se vamos para o navegador e bater atualizar, agora podemos ver que a casa eo blog agora é transformado em um link. Podemos ver o sublinhado e também o cursor muda para um símbolo de mão para mostrar que este é um link. Vamos clicar no “Blog” e você pode ver a página não foi encontrada porque ainda não criamos a página do blog. Vamos voltar e o link do Início deve nos manter em sintonia. Com esses links agora funcionando, eu quero dar uma olhada rápida no aninhamento e recuo. Já usamos ambos dentro do nosso editor de texto. Já falamos sobre como podemos aninhar elementos dentro de uma lista, assim como aninhando o NAV dentro da seção de cabeçalho. Com os links NAV que acabamos de adicionar, isso também é muito importante. Se olharmos mais de perto para este item da lista, vemos que temos o texto inicial no meio. Em seguida, trabalhando para fora, vemos as tags A em cada lado deste texto. Na terceira linha, temos as tags LI circundantes do lado de fora. Estes são então cercados pelas tags UL e assim por diante. Não aninhando corretamente é um erro comum de iniciantes e um que muitas vezes faz com que seu site não seja exibido como pretendido. Isto é algo para ter cuidado e algo que pode evitar quaisquer problemas. Recuo é quantas vezes ou espaços cada linha é definida a partir da esquerda. Seu editor de texto pode fazer isso automaticamente para você, como você pode ver o meu tem. Muitas vezes, você verá o recuo equivalente a dois ou quatro espaços, dependendo da sua preferência. Por exemplo, podemos ver ambas as tags body recuadas no mesmo nível com esta linha aqui. Então, dentro, vemos os próximos que você encontrar, que são as duas tags de cabeçalho, e ambos estão na linha também. Isso, em seguida, continuar dependendo de quantos elementos estão aninhados dentro de uma lista. Não há nenhum padrão que devemos seguir ao recuar. Uma lei é apenas uma preferência pessoal. No entanto, usá-los corretamente e consistentemente torna seu código mais legível e também podemos ver mais claramente qual conteúdo está aninhado dentro. 10. Tags div e texto: Vamos agora passar para adicionar o conteúdo HTML final a esta página de aterrissagem. Lembra quando vimos os slides alguns vídeos atrás. Analisamos elementos descritivos e também usando elementos div. Bem, eu vou criar um elemento usando uma div como um recipiente para este texto principal de “Oi, eu sou Chris, siga-me na minha jornada ao redor do mundo.” Vamos começar passando para o index.html. Abaixo da tag de cabeçalho de fechamento vou criar esta seção div. Então, a etiqueta de abertura e também a etiqueta de fechamento. Então podemos ninho aqui dentro um elemento p. O elemento p representa um parágrafo de texto e podemos usá-lo para adicionar o nosso texto dentro. Então eu vou adicionar meu texto aqui dentro. Claro, adicione os textos que se adequam ao seu blog. Pode ser absolutamente qualquer coisa que você quiser. Então, “Oi, sou Chris, siga-me na minha jornada ao redor do mundo”, e então dê um “Salvar”. Vá para o navegador e, em seguida, clique em “Atualizar”. Agora podemos ver a linha de texto está sendo adicionada. Nós também podemos adicionar mais de um elemento p também e isso irá separar cada bloco de texto em uma nova linha, também com algum espaçamento entre eles. Então este é agora todo o conteúdo que você vê na tela. Comparado com o blog acabado, embora não pareça muito bonito. Vamos começar a styling em breve com CSS. Em primeiro lugar, existem alguns elementos que você pode adicionar ao HTML para alterar o texto. Você verá nesta versão finalizada algumas coisas. Primeiro, detecte uma divisão em duas linhas. Também é enfatizada a palavra “mundo”. Tudo isso é feito com tags HTML. Primeiro de tudo, para quebrar o texto em uma nova linha, nós simplesmente adicionar um elemento de quebra onde queremos que essa quebra aconteça. Vou adicionar o meu logo após o nome de Chris. Então vá para as tags p. Então podemos adicionar um elemento de quebra. Este é um dos poucos elementos que não tem uma etiqueta de fechamento, então estamos bem para deixá-lo assim como está lá. Agora, se atualizarmos, vemos depois da palavra Chris, que a segunda linha foi criada. A razão pela qual isso não tem uma tag de fechamento é simplesmente porque não adicionamos nenhum conteúdo dentro. É adicionado onde quer que precisemos. Agora podemos adicionar algumas tags ao redor do mundo texto, então ele se destaca. Primeiro, podemos envolver a palavra mundo com m tags. Então a tag m pouco antes, e também a tag de fechamento logo depois. O elemento m adiciona ênfase extra no texto e normalmente é exibido no navegador como Itálico. Podemos ver salvando isso e, em seguida, atualizando o navegador. Agora podemos ver que a palavra mudou para Itálico. Além disso, podemos adicionar um elemento forte. Você pode cercar toda essa seção m com as tags fortes. Então adicione-o antes da tag de abertura e logo após a tag de fechamento m. O elemento forte dá aos textos uma grande importância. Isso também é normalmente exibido em negrito. Novamente, isso enfatiza a importância de entender como o aninhamento funciona. Como temos a palavra no centro, e, em seguida, a tag m em torno dele e, finalmente, as marcas fortes do lado de fora. Em seguida, volte para o navegador e, em seguida, atualize. Você pode ver que o texto é um pouco mais ousado. Pode ser difícil ver o elemento forte no momento, mas será mais visível mais tarde quando aumentarmos o tamanho do texto e também adicionar uma imagem de fundo. Então, com todos os HTML agora no lugar. Vamos agora passar para adicionar algum estilo a esta página. 11. CSS interno e fontes do Google: Embora estejamos aprendendo muito sobre HTML até agora, sites realmente não começam a ficar bons até que adicionemos algum estilo, estilos CSS podem mudar a aparência do nosso site de algo como nós temos atualmente aqui para então algo como isso, que é o local de acabamento. Uma onda, quero dizer CSS, é adicionar tags de estilo à seção principal de nossos documentos. Se abrir o editor de texto e, em seguida, vá para o index.html. Volte para a seção de cabeça superior, e logo abaixo do título podemos adicionar os elementos de estilo. Assim como este. Isso tem a abertura e também a tag de fechamento. Podemos adicionar qualquer estilo que queremos entre essas duas tags. Essa maneira de fazer as coisas é chamada CSS interno. Isso ocorre porque os estilos são feitos apenas para ser usado internamente nesta página. Mais tarde, também abordaremos uma maneira alternativa de fazer isso. Então precisamos escolher quais elementos queremos estilizar, usando um seletor. Um seletor pode ser um nome dos elementos que já usamos, como cabeçalho, p ou li, por exemplo. Vou começar selecionando o HTML, então adicione HTML lá. Como HTML é um elemento raiz, todos os estilos que adicionamos aqui serão aplicados a todo o site. Quaisquer regras de estilo CSS para o seletor precisam ser colocadas dentro de um par de chaves, assim como este. Uma vez que é seletor HTML se aplica a toda a página, um bom uso para isso talvez para adicionar a fonte que você deseja usar. Para mantê-lo consistente em todo o site, podemos usar a propriedade font-family para definir a fonte. Você pode ver que o editor de texto automaticamente dá algumas sugestões para que possamos usar. Vou escolher Arial como um exemplo com o ponto-e-vírgula no final. Você vai notar que são três nomes diferentes aparecendo, e esta é a ordem de prioridade. Primeiro, temos Arial, e esta é a fonte que vamos usar se o navegador suportá-lo. Caso contrário, passará para Helvetica, que é a segunda prioridade. Se nem Arial nem Helvetica estiverem disponíveis, o nome de família genérico será usado, como serif ou sans-serif. Esta é uma maneira de adicionar fontes, outra é visitando um site de fontes e selecionando um a partir daí. Você pode fazer uma pesquisa por fontes da Web se quiser dar uma olhada mais de perto, um popular é fontes do Google. Eu vou sair para o navegador da web e, em seguida, procurar por fontes do Google, e este é o site que eu vou usar para o meu blog. Vamos até fonts.google.com. Você pode ver alguns dos populares. Você pode fazer uma pesquisa ou também restringir por categoria. O que vou usar no meu blog chama-se areia movediça. Vou fazer uma busca por isso e depois apertar “Enter”, e você pode ver a areia movediça que aparece na busca. Claro, sinta-se livre para escolher um diferente, se preferir. Neste, só precisamos clicar no símbolo vermelho mais. Em seguida, para adicionar isso ao nosso site, nós descemos para baixo e expandimos. Então temos o link para a folha de estilo CSS. Este é um link para fontes do Google, que nos permite usá-lo em nosso projeto. Então copie este link completo. Vou usar Command ou Control C para copiar isso e voltar para o index.html, e então precisamos colar isso dentro da seção de cabeça. Eu vou adicionar isso, basta soprar o título e colar isso dentro Precisamos fazer isso porque não estamos usando uma fonte web padrão. Precisamos vincular ao Google para disponibilizar isso dentro do nosso código, de volta para fontes do Google. Em seguida, precisamos copiar a linha de CSS, que é para a família de fontes que já vimos antes. Então copie isso e, em seguida, se entrarmos na seção de estilo, eu vou substituir a família de fontes, que usamos antes e colar nesta areia movediça. Agora esta fonte não padrão deve funcionar, já que temos o link acima. Vamos dar que salvar e, em seguida, atualizar o navegador, para voltar para o projeto e, em seguida, atualizar. Agora podemos ver o estilo do texto mudou. Isso significa que a fonte está funcionando agora. Em seguida, podemos então mudar a cor da fonte. Nós simplesmente adicionamos uma propriedade de cor para fazer isso. Ainda dentro do seletor HTML, vai adicionar uma nova linha, que vai ser para a cor. Novamente, ao digitar isso, você verá algumas sugestões do navegador. Você pode escolher qualquer uma dessas cores que preferir, ou você pode usar um seletor de cores para uma gama maior de cores. Se voltarmos para o navegador e, em seguida, ir para o Google, eu vou procurar o seletor de cores HTML. Um popular é o W3Schools, então eu vou selecionar isso. Aqui podemos selecionar a cor que gostamos e também ver muitos tons diferentes e variantes desta cor. Basta selecionar um do lado esquerdo e, em seguida, podemos reduzi-lo para uma sombra mais clara ou mais escura. À direita, nos são dadas as sombras no que é chamado de formato hexadecimal. Isto é o que você pode ver no lado direito, e este é seis dígitos com o prefixo hash. Podemos então usar essa cor hexadecimal dentro do nosso CSS. Vou usar um valor de cor para o meu texto de 1a1a1a. Então vamos voltar para o CSS e, em seguida, com o prefixo hash, eu vou adicionar 1a1a1a com o ponto-e-vírgula no final. Precisamos ter certeza de que cada linha termina com um ponto-e-vírgula e esse é o caso de todas as propriedades CSS. Dê que um salvamento e, em seguida, se atualizarmos nosso projeto dentro do navegador, isso não deve mudar a cor dentro do navegador. A mudança é muito sutil, por isso pode ser difícil de dizer. Se você quiser verificar se isso está funcionando, podemos alterá-lo para uma cor diferente, como vermelho e depois atualizar, e agora podemos ver claramente que o texto foi alterado. Vou desfazer essa mudança e voltar a pô-la como era. Muito bem se conseguiste pôr tudo isto a funcionar. Caso contrário, verifique seu código cuidadosamente para erros de digitação. Em seguida, também quero mostrar como usar classes e IDs para selecionar nossos elementos. 12. Classes e IDs: Analisamos a seleção de elementos pelo nome da tag, como HTML, cabeçalho ou url. Há também outras maneiras de fazer isso usando classes e IDs. Classes e IDs são atributos, que podemos adicionar aos elementos. Vamos começar olhando para como podemos usar uma ID. Se descermos para a tag de abertura para o cabeçalho, podemos adicionar um atributo ID e dar a este um nome de nossa escolha. Vou chamar isso de fundos e salvar. Agora podemos usar esse nome de fundo com o prefixo hash. Logo abaixo dos calibradores HTML. Como é um ID, podemos usar o áspero e, em seguida, selecioná-lo com o nome de fundos. Uma das razões pelas quais faríamos isso é porque se tomarmos o cabeçalho como um seletor, então os estilos se aplicariam a todos os cabeçalhos na página e consciência de domínio. Se formos para o local acabado, quero que este fundo adicione a cor de fundo cinza, que você pode ver aqui. Somos fornecidos com uma propriedade de fundo para fazer isso. De volta no CSS, podemos adicionar o plano de fundo. Vou dar ao meu joelho uma cor hexagonal de D8. Também temos acesso à mesma gama de cores que fizemos anteriormente com o texto. Salve isso, depois vá para o navegador e atualize o projeto. Agora podemos ver o fundo cinza apareceu atrás de todo o cabeçalho. Se você olhar para os sites finalizados, também podemos ver que o mesmo fundo cinza também está por trás do texto. No entanto, este não será um bom caso de uso para um ID. Um ID deve ser usado apenas uma vez para uma seção exclusiva. Se quiséssemos usar os mesmos estilos mais de uma vez, poderíamos alterar esse ID para ser uma classe. Para baixo no cabeçalho, podemos alterar ID para ser igual à classe. Em seguida, podemos adicionar a mesma classe para o texto p para outros fundos para estes dois. Então classe p também é igual ao plano de fundo. Em seguida, quando é mudar o seletor CSS de um áspero para ser um ponto. É assim que selecionamos classes. Agora, se salvarmos isso e voltarmos para o navegador, clique em Atualizar. Agora temos os fundos cinzentos no cabeçalho e também o texto. Então esta é a diferença entre o uso de classes e IDs com CSS. 13. Introdução ao Flexbox e design responsivo: A flexbox CSS é uma maneira relativamente nova de colocar e alinhar itens em um site. Pretende tornar o processo muito mais simples do que foi no passado. No passado, usamos hacks e métodos como; tabelas, flutuadores ou CSS complicado para alcançar a camada que você deseja. O flexbox vendeu isso fornecendo algumas maneiras simples, mas eficazes de layout e posicionar itens. Começamos definindo um contêiner flexível, como você pode ver aqui. Isso nos permite definir como queremos que os itens flexíveis dentro apareçam. Podemos definir a direção, o alinhamento, e quanto espaço está no meio, para citar alguns. Além disso, temos o controle dos itens flexíveis individuais também. Por exemplo, podemos definir a ordem em que você deseja que eles apareçam, o alinhamento e também definir como eles devem crescer ou diminuir dependendo do espaço disponível. O que tudo isso significa para o nosso blog? Bem, basicamente, ele será usado para layout nosso site para ser mais adequado para diferentes vícios do site. Alterar layout para diferentes tamanhos de tela é conhecido como web design responsivo. Vamos fazer com que o nosso blog responda a diferentes dispositivos do site para uma melhor experiência do usuário. À esquerda, temos um pequeno dispositivo de tela, como um celular ou tablets pequenos. O conteúdo aqui é normalmente empilhado em cima de cada um dos outros verticalmente. No entanto, como podemos ver à direita, como temos mais espaço disponível na tela, podemos adicionar mais conteúdo lado a lado. Para conseguir isso, simplesmente definimos nossos contêineres flexíveis, como o cabeçalho na parte superior, e outro contêiner para o resto de nosso conteúdo que queremos controlar. Aqui, estou usando um div. Para conseguir isso, podemos definir uma propriedade CSS de direção. Entre eles, direção flexível nos permite definir os elementos filho para ser qualquer coluna, que é empilhado em cima do outro, uma linha, que é da esquerda para a direita. Para alterar uma propriedade CSS de coluna para linha usará uma consulta de mídia, mas mais sobre isso mais tarde. Esta é apenas uma visão geral básica do flexbox CSS. Tem muito mais propriedades e opções do que podemos ver aqui. Nós também vamos olhar para alguns destes durante os projetos, mas por enquanto vamos colocar isso em prática, adicionando-o à seção pesada. 14. Cabeçalho em CSS, margem e preenchimento: Agora temos uma ideia melhor de como usaremos a flexbox para layout do nosso site. Vamos agora começar a trabalhar na seção de cabeçalho. Então vamos abrir o editor de texto. Então vamos projetar o site com uma primeira abordagem móvel. Isso significa que começaremos a planejar os sites de um dispositivo móvel primeiro e, em seguida, aproveitaremos isso para dispositivos maiores à medida que houver mais espaço disponível. Para fazer isso, vou encolher o navegador para simular um dispositivo menor. Então isso parece certo. Vou fechar esta barra lateral, só para nos dar um pouco mais de espaço. Então, dentro da seção de estilo. Vamos começar adicionando o seletor de cabeçalho, para o CSS. Então logo abaixo dos planos de fundo, vai adicionar o cabeçalho aqui dentro, com as chaves. Então, com dispositivos menores, eu quero alinhar todo o texto no centro. Podemos fazer isso adicionando uma propriedade text-align. Vou colocar isso no centro. Então salve isso e atualize. Agora podemos ver o texto está dentro do centro do cabeçalho. Também temos a opção de esquerda e direita. Em seguida, como vimos nos slides flexbox, queremos definir cabeçalho para ser um recipiente flexível. Podemos fazer isso definindo o tipo de exibição, para ser igual a um flex. lodo atualiza o navegador. Você verá que o conteúdo será exibido em seguida, o que for. Isto é, porque, por padrão, a direção flexível é definida como linha. assim que queríamos procurar dispositivos grandes. Mas com dispositivos menores, podemos definir essa direção flexível de volta à coluna. Então, dentro da seção de cabeçalho, vamos adicionar a propriedade flex direction. Em seguida, mude de volta para a coluna. Dê um salvamento a isso. Vamos ver como isso está parecendo. Ótima. Assim, agora pode ver o conteúdo é empilhado um em cima do outro. Então, tenha em mente enquanto você percorre os sites. Estas são as propriedades CSS, que estou adicionando para o meu blog. Sinta-se livre para fazer as alterações que você deseja melhor se adequar ao seu site. Então, em seguida, eu vou adicionar alguns CSS para este título de cabeçalho h1, contido dentro do cabeçalho. Então, já analisamos como podemos estilizar isso adicionando uma classe ou um id, a este h1. Ou [inaudível] h1 é assim. Então vamos adicionar o cabeçalho h1. Isso garante que somos específicos e apenas atingir o h1 dentro do cabeçalho. Isso também funciona para mais de elementos também. Vou adicionar alguma margem e estofamento a isso para espaçamento. Antes de fazermos isso, vamos dar uma olhada rápida em que margem e preenchimento é? Digamos que estamos colocando em um elemento artigo em nosso site. Eu gostaria que fosse bom igual ao espaço ao redor, como vemos aqui. Se apenas adicionarmos neste artigo, por padrão, ele pode parecer mais com isso. Encostado no recipiente exterior. Para manter algum espaço no lado de fora do elemento. Podemos adicionar alguma margem, como você pode ver aqui. Além disso, podemos adicionar espaço para dentro dos elementos. Isso é chamado de estofamento. Por exemplo, se adicionássemos uma imagem aqui dentro, preenchimento seria aplicado dentro do artigo, criando espaço ao redor da imagem como podemos ver aqui. Então, basicamente, a margem está fora dos elementos e o preenchimento está dentro. Então agora sabemos a diferença entre margem e preenchimento. Podemos ver isso em ação com o cabeçalho h1. Se olharmos para o cabeçalho dentro do navegador, podemos ver que há algum espaço já acima deste elementos h1. Isso está sendo aplicado pelo navegador como padrão. Podemos remover isso por subitamente margem de volta a zero. Então adicione isso dentro do cabeçalho h1, dar que um salvar e, em seguida, atualizar. Agora você pode ver que ele foi movido para cima, então a margem padrão foi removida. Então, isso remove o espaço padrão acima, mas deixa tudo amarrado. Podemos adicionar algum espaço extra aqui dentro, adicionando um volume de preenchimento. Então, logo abaixo da margem, vou adicionar um pouco de preenchimento. [ inaudível] mina a 15 pixels. Mas, claro, faça o que se adequar ao seu blog. Então atualize. Agora você pode ver que temos algum espaço acolchoado agradável entre os elementos. A última coisa que eu quero fazer neste vídeo é remover os marcadores padrão, à esquerda dos itens da lista e também centralizar o texto. Agora podemos segmentar os itens da lista usando o seletor LI. Para remover esses marcadores, tudo o que precisamos fazer é definir a propriedade list-style como none. Há também opções para alterações em outros estilos também. Tal como um quadrado ou até mesmo uma imagem. Então, guarde isso e atualize. Agora podemos ver que as balas foram removidas. Vamos espaçar isso agora. Vou aplicar um pouco de estofamento. Logo abaixo do estilo da lista. Vou definir isso para ser um valor de 10 pixels. Então agora vamos ter um bom espaçamento em torno de cada um dos links. Então as coisas estão começando a ficar um pouco melhor agora. Mas podemos ver que os itens nervosos ainda não estão no centro. Então, por que está de pé? Para entender melhor, precisamos passar para as ferramentas de desenvolvedor do navegador. Então, eu só vou expandir o navegador um pouco maior. Então vou controlar ou clicar com o botão direito do mouse e depois descer para inspecionar. Então, se clicarmos nesta pequena seta no canto. Então passe o mouse até vermos a UL aqui em cima. Podemos ver que temos esta seção verde do lado esquerdo, que parece estar empurrando tudo, esta seção verde. Se rolarmos para baixo até o fundo, podemos ver que a parte verde é o preenchimento. Então isso significa que o preenchimento está sendo adicionado por padrão, dentro do navegador. Então tudo o que precisamos fazer é substituir isso dentro do CSS. Podemos fazer isso selecionando a lista não ordenada. Em seguida, definindo o preenchimento de volta para zero. Então dê essa atualização. Agora você pode ver que os links estão agora bem no centro. Então nosso cabeçalho agora está começando a parecer melhor. Agora vamos fazer com que isso pareça ainda melhor, passando para adicionar nossa imagem de fundo. 15. Onde encontrar ótimas imagens: Durante a construção deste projeto e também projetos futuros. Você sempre encontrará a necessidade de encontrar algumas imagens de alta qualidade para usar em seu site. Este blog não é diferente, e aqui eu quero mostrar-lhe alguns recursos para encontrar algumas imagens de boa qualidade. O primeiro é pixabay.com, e este é um site onde você pode encontrar imagens de estoque gratuitas, e estas estão listadas sob a licença Creative Commons. Isso significa que ele é gratuito para uso comercial, e não precisamos adicionar nenhuma atribuição à oferta ou ao site. Encontrar imagens é simples. Podemos usar o recurso de busca ou até mesmo clicar no botão Explorar. Então, por exemplo, se quiséssemos uma foto de um tigre, poderíamos fazer uma pesquisa, e então se selecionarmos uma, tudo o que precisamos fazer é clicar no download gratuito. Aqui você pode ver algumas informações sobre a licença. Você pode ver que a imagem é gratuita para uso comercial e não precisamos escrever nenhuma atribuição. Portanto, este é um bom site para usar para imagens de alta qualidade. Outro é um site chamado Unsplash, e você pode encontrar esta arte Unsplash.com. As imagens que você pode encontrar aqui também são livres para usar e, novamente, você pode ter facilidade de pesquisa fácil ou clique nas imagens e, em seguida, pressione o botão de download. Você também vai notar que há um pop-up dizendo que o crédito não é necessário, mas é apreciado para dar aos fotógrafos um pouco mais de exposição, e há algum texto abaixo para incorporar no site se você não quiser fazer isso. Outro grande recurso é o site Wiki media Commons. Todos os dias há uma nova imagem do dia que você pode usar e tudo que você precisa fazer é clicar na aba de imagens no topo, e então podemos selecionar imagens por uma categoria. As imagens aqui são gratuitas para usar, e você também pode descobrir mais informações sobre a licença no lado esquerdo e na seção Bem-vindo. Isso basicamente tem algumas informações, informando como as imagens são livres para usar. Finalmente, temos um site chamado Shutterstock.com. Você pode já ter ouvido isso como é provavelmente o maior, e tem a mais ampla gama de imagens disponíveis. Você também pode baixar itens como faixas de música e clipes de vídeo para. No entanto, há um custo para isso. Shutterstock é um dos que não é grátis. Você pode conferir os planos de preços para clicando no link aqui. Outra maneira de encontrar imagens é uma pesquisa do Google. Então isso também é procurado pelo nosso tigre. Mas uma das coisas a ter em mente é o acordo de licenciamento. Se clicarmos nas imagens, uma das maneiras de filtrar isso para as que são livres para usá-lo, indo para link do menu de ferramentas e, portanto, ir para os direitos de uso e o rotulado para reutilização com modificação. Se selecionarmos este não emitido agora preenche as imagens para aqueles que estamos disponíveis gratuitamente para usar. Mas, finalmente, verifique sempre a licença e o contrato antes de baixar qualquer imagem para verificar se você está bem para usá-los para o seu caso de uso. Então tudo que você precisa fazer agora é selecionar uma imagem que você vai usar para o fundo do seu blog, e então ter isso disponível para usar no próximo vídeo. Ou se você quiser apenas acompanhar comigo, a imagem é usada neste curso fornecido dentro da seção de recursos. 16. Imagens de fundo e posicionamento do Flexbox: Agora você deve ter imagens uniformemente fornecidas com o curso, ou suas próprias imagens que você deseja usar. Para adicionar essas imagens ao seu projeto, tudo o que precisamos fazer é adicioná-las à pasta do projeto. Estes podem ser colocados em qualquer lugar, mas eu vou adicioná-los dentro de uma pasta de imagens apenas para manter as coisas organizadas. De volta à área de trabalho, vou abrir os projetos. Aqui você pode ver que eu tenho as imagens que estão disponíveis como parte deste curso. Não se preocupe se você só tem a imagem de fundo por enquanto. Todo o resto dessas imagens serão usadas mais tarde no curso para o blog. Dentro desta pasta de blog de problemas, vou clicar com o botão direito do mouse e criar uma nova pasta chamada imagens, e então eu vou arrastar todos esses para dentro da pasta de imagens. Por enquanto, só usaremos esta imagem de fundo para a página de Londres. Claro que o seu pode ser chamado de algo completamente diferente, então apenas tenha isso em mente quando digitarmos isso dentro do projeto. Agora, se formos para a página index.html, se deslocarmos para baixo até a parte inferior, explodimos todo o CSS. Teremos este texto de “Oi, sou Chris, siga-me na minha jornada ao redor do mundo.” Vou adicionar duas aulas. O primeiro vai ser para o recipiente div circundante. Esta classe vai ser chamada imagem de viagem, então este é o nome da classe para o recipiente. Em seguida, uma segunda aula para estes textos de textos de Jornada. Como você pode ver aqui temos duas classes separadas apenas separadas por espaço e isso é perfeitamente bom para usar. Agora temos essas classes adicionadas, podemos adicionar a imagem para o recipiente de imagem jornada usando o CSS. Faça backup para a seção Estilo. Lembre-se que esta é uma aula, então precisamos usar os pontos. Queremos atingir a imagem da viagem. Podemos adicionar uma imagem de fundo em CSS com a propriedade de fundo, em seguida, usamos um URL para fornecer um link para o local do arquivo. Isso é armazenado dentro da pasta de imagens e a imagem é chamada de fundos ponto JPEG. Claro que se o seu tiver um nome diferente, terá de mudar isso. Em seguida, vamos adicionar algumas propriedades antes de tudo, de nenhuma repetição. Por padrão, as imagens serão repetidas horizontalmente e verticalmente. Nós adicionamos nenhuma repetição porque queremos apenas uma imagem de tamanho completo. Em seguida, o sensor central. Isto irá detectar a imagem nos eixos X e Y por padrão para substituir no canto superior esquerdo. Isso move a imagem de volta para o centro. Então, finalmente, vamos adicionar fixo no final, isso mantém a posição da imagem fixa quando rolamos e vamos dar uma olhada neles em apenas um momento. Dê um salvamento, então, se formos para o navegador e depois atualizar, ainda vemos que nenhuma imagem foi exibida na tela. Isso ocorre porque a imagem de fundo será apenas a altura do conteúdo dentro desta div, que é o texto, e este texto, no entanto, oculta a imagem por causa do fundo cinza. Se passarmos temporariamente para o estilo e removermos o fundo, recorte e salve e, em seguida, atualize. Podemos ver que o fundo acabou de aparecer na tela. Vamos adicionar isso de volta. Para contornar isso, podemos definir a altura da imagem de viagem no CSS usando a propriedade mínima alta, e podemos adicionar isso logo abaixo da propriedade de fundo. Para rolar de volta para a imagem da viagem, e então podemos adicionar a altura mínima de 100 vh. Altura mínima pode ser um valor de pixel, uma porcentagem ou de 70 a 100 vh. Este conjunto diz ser 100% da altura da viewport. A viewport é uma tela visível do dispositivo. Salve isso, e agora, se atualizarmos, vemos agora que a imagem está na tela. Uma coisa a notar ao rolar para baixo no navegador, que a imagem está em uma posição fixa. Isso é porque nós definimos isso para ser corrigido. Se fôssemos remover isso, podemos ver atualizando o navegador que a imagem rola com o resto da página, mas eu quero manter o meu fixo como eu gosto de olhar para isso. Vamos continuar com silencioso esta seção de imagem. Abaixo das alturas mínimas, vou adicionar a propriedade de tamanho de fundo. Vamos preparar isto para cobrir. O tamanho do plano de fundo pode ser definido como encoberto para fazer a imagem cobrir a área de fundo completa, e então vamos definir o tipo de exibição para ser flexível, assim como vimos no cabeçalho. Este também vai ser o contêiner flexível para nossos textos, então salve isso e se atualizarmos, podemos agora ver que o texto está agora colocado em cima da imagem, em vez de ficar sentado acima dele, como era antes. Agora podemos usar a flexbox para alinhar esse texto no centro, tanto horizontal quanto verticalmente. Para definir a linha de texto como verticalmente, podemos definir a propriedade itens de linha. Vamos adicionar isso logo abaixo do tipo de exibição. Alinhe itens no centro, e vamos dar uma olhada nisso. Refresque. Agora podemos ver que isso está alinhado verticalmente à imagem. Agora, para enviar o texto horizontalmente, podemos usar outra propriedade flexbox de justify content e também definir isso para ser sensor, então salve e dar essa atualização. Agora podemos ver que o texto foi agora movido para o meio da imagem. Agora você pode ver como é fácil alinhar texto usando a flexbox. Em seguida, vamos terminar adicionando os estilos finais para a visualização móvel. 17. Estilização final para telas pequenas: Então agora podemos adicionar um pouco de estilo ao texto também. Recebemos este texto, uma classe de texto de viagem. Vamos adicionar isso ao CSS logo abaixo. Então vamos começar adicionando a linha de texto do sensor. Torna um pouco menor. Em seguida, quer aumentar o tamanho da fonte para ser 2ems. Aqui usamos um m como o tamanho da fonte. Podemos usar tamanhos fixos também, como pixels, mas em é unidade escalável, um em é igual ao tamanho da fonte atual. Então sinistro 2em faz com que seja o dobro do tamanho que normalmente seria. Então vamos dar uma olhada atualizando e agora você pode ver que o texto é muito maior. Então vamos adicionar algum preenchimento ao texto e desta vez eu quero adicionar 1.5em, e isso funciona exatamente como o tamanho da fonte é ser 1,5 vezes o preenchimento, que normalmente seria. Então agora você pode ver que temos algum espaço ao redor do texto. Finalmente o raio da fronteira, e uma vez que a mente para ser dez pixels. Então, se eu atualizar, isso nos dá uma borda arredondada agradável no lado de fora do recipiente. Então as coisas começam a parecer um pouco mais agradáveis. Nós também queremos fazer algo sobre esses links para a cor não se encaixa com o resto do site e eu quero remover o subjacente também. Se você se lembrar desses links, um conjunto com a tag a. Então, direcionamos o seletor em um CSS. Então, abaixo dos textos de viagem, podemos adicionar o a. Para remover o sublinhado, podemos definir a decoração do texto para ser conhecido e isso irá remover a linha de baixo de cada um dos links, e então nós também podemos definir a cor como olhamos e que muito o resto do site, enviando isso para o valor hexadecimal de 1a1a1a, e depois atualizar e agora isso parece muito mais consistente com o resto dos sites. A última coisa que queremos fazer agora neste vídeo é tornar este fundo cinza um pouco transparente, que o fundo possa ser visto através dele. Primeiro, eu vou para o CSS e até a propriedade de fundo. Vou adicionar um comentário, que pode ser usado com uma barra, depois estrelar antes, e depois o oposto de uma estrela e uma barra, e então comentar esta linha. Um Comum é uma maneira de dizer a um navegador para ignorar este código. Também podemos usar comentários para digitar notas, tanto para nós como para outros desenvolvedores. Para adicionar essa opacidade transparente, podemos usar uma cor RGBA no lugar do tipo hexadecimal, que acabamos de usar. Para converter este tipo hexadecimal colorido para RGBA. Podemos usar uma ferramenta online para isso. Então eu vou para o Google e fazer o navegador um pouco maior e quero procurar hexadecimal para RGBA e suas várias ferramentas que você pode usar. Vou usar a ferramenta de cor hexadecimal. Eu não preciso digitar uma cor. Então o valor hexadecimal que usamos antes era d8d8d8, e isso irá então convertê-lo em um valor RGBA. Então copie isso e vá para os fundos pode colar isso em para definir o plano de fundo para o novo valor RGBA, seguido pelo ponto-e-vírgula. As cores RGBA têm quatro valores. Definimos os valores de vermelho, verde e azul para começar. Então o último valor é para a transparência e este é um valor entre zero e um. Zero sendo totalmente transparente. Então eu quero definir o meu para ser não 0.7, dá-nos salvar e, em seguida, atualizar o navegador. Então agora podemos ver por trás do texto que temos os fundos semitransparentes e a imagem começa a confirmar. Então, agora terminamos o estilo para a exibição móvel de tela pequena. Em seguida, vamos dar uma olhada nas consultas de mídia para nos permitir adicionar estilos para aplicar somente em dispositivos maiores. 18. Introdução às consultas de mídia: Agora, como as coisas parecem que queremos em dispositivos menores. Agora podemos começar a ampliar o navegador para simular como as coisas ficarão em dispositivos maiores. Podemos então usar uma consulta de mídia para aplicar somente CSS quando o navegador é mais amplo do que o que definimos. Basicamente, as telas menores terão uma aparência única e as telas maiores podem ter diferentes layouts e estilos. Se voltarmos para inspecionar e abrir as ferramentas do desenvolvedor, podemos clicar nesta divisão aqui e tornar o site menor ou maior e também podemos ver no topo que podemos ver a largura do navegador. Isso nos permite ver uma largura de tela onde nosso conteúdo começa a olhar fora do lugar para dispositivos maiores. Podemos ver para dispositivos menores esta abordagem de largura total funciona bem. No entanto, se esticarmos o navegador para cerca de 1000 pixels, parece que é um pouco mais largo, as coisas começam a parecer um pouco esticadas e precisam de uma mudança. É aqui que as consultas de mídia entram em jogo. As consultas de mídia nos permitem aplicar apenas determinadas propriedades CSS se uma condição for verdadeira. Por exemplo, podemos alterar estilos ou layouts para dispositivos em paisagem ou retrato ou podemos definir uma largura mínima ou máxima para aplicar a consulta de mídia. Há também muito mais condições que podemos definir e haverá mais links no download de recursos para ver alguns deles também. Vamos para as folhas de estilo e começa a adicioná-las ao nosso site. Vamos abrir o código do Visual Studio e adicionar nossa consulta de mídia. Para definir uma consulta de mídia, podemos usar o tipo de mídia livre CSS usando @media. Abaixo na parte inferior abaixo estão todos os nossos estilos, indo para adicionar @media e, em seguida, apenas como o estilo em cima, este tinha seu próprio conjunto de chaves curly. Em seguida, depois @media podemos adicionar alguns colchetes para adicionar a condição em que esta consulta de mídia será aplicada. Quero que esses estilos se apliquem quando o navegador atingir uma largura mínima de 1.000 pixels. Lembre-se de antes de eu começar a parecer um pouco sobrecarregado deste tamanho. É por isso que eu defini para 1.000 pixels. Sinta-se livre para mudar seu tamanho dependendo do seu site. Em seguida, podemos adicionar nossos estilos CSS dentro dessas chaves, assim como sempre fizemos. Vou começar definindo o peso máximo para o corpo em torno de 1.600 pixels. Isso impedirá que o conteúdo seja muito esticado quando chegarmos a monitores realmente grandes. Podemos fazer isso dentro do corpo. Vou definir a largura máxima de 1.600 pixels. Isso restringirá o tamanho do site para que as coisas não fiquem realmente esticadas em grandes monitores. Em seguida, podemos definir os valores de margem. Eu vou fazer isso com a margem zero auto. Zero não adiciona margem à parte superior e inferior. Também fará automaticamente a margem à esquerda e à direita para ser igual, o que significa que o site estará no centro da página quando tiver mais de 1.600 pixels. Salve isso e você não vai notar nenhuma diferença na minha versão porque a tela é muito pequena. Mas a margem zero auto fará com que isso seja no centro em monitores grandes. Agora lembre-se dos slides anteriormente falamos sobre como consultas de mídia podem ser usadas para alterar layouts usando flexbox. Bem, agora é a hora de ver isso em ação. Mais de 1.000 pixels, podemos alterar a direção flexível no cabeçalho para linha, logo abaixo do corpo e também garantir que isso ainda está dentro das chaves da consulta de mídia. Vamos direcionar o cabeçalho e, em seguida, definir a direção flexível para ser linha. Então vá lá e atualize. Isso significa que, em telas grandes, nosso conteúdo de cabeçalho não é mais empilhado um sobre o outro. Agora vemos que o conteúdo está lado a lado. Se voltarmos abaixo de 1.000 pixels, podemos ver que os estilos originais ainda se aplicam para que estes sejam estocados como uma coluna. Voltar para os dispositivos maiores. Isso é melhor, mas os itens da lista ainda estão empilhados. Ficaria melhor se os itens da lista estivessem alinhados. Podemos alterar o tipo de exibição para ser inline-block para conseguir isso. Vamos direcionar o cabeçalho, listar itens e, em seguida, tudo o que precisamos fazer é definir o tipo de exibição para ser inline-block. Vamos guardar isso e depois atualizar. Agora posso ver que temos os itens da lista em linha. Por padrão, o tipo de exibição de itens de lista é definido para bloquear, que significa que os elementos começarão no online. Inline-block permitirá que este elemento particular para ser acusado um ao lado do outro. Vamos continuar trabalhando dentro desta seção de cabeçalho. Abaixo do cabeçalho li, Eu vou segmentar dois elementos, primeiro o cabeçalho h1, que é o título do site principal e, em seguida, separado por uma vírgula, nós também podemos direcionar o nav cabeçalho. Esta é apenas uma maneira conveniente de segmentar dois elementos separados e aplicar os mesmos estilos a ambos. Vou definir o valor flex como um. Defina o flex para um tanto para o h1 e também o nav irá garantir que ambos ocupem uma quantidade igual de espaço. Salve isso e, em seguida, atualizar e agora podemos ver o cabeçalho, título, e também a navegação que ocupa o mesmo espaço. O valor flexível descreve como um item aumentará ou diminuirá para se ajustar ao espaço disponível. Se, por exemplo, definirmos o nav para ter um valor flex de dois, ele tentaria ocupar duas vezes o espaço disponível do h1. Agora cada elemento está ocupando a quantidade igual de espaço, podemos fluir o cabeçalho para a esquerda e também fluir os links nav para a direita. Vamos começar com o título de nível 1. Cabeçalho, h1, já usamos text-align antes para o centro. Mas desta vez vamos definir o alinhamento para ser a esquerda e depois atualizar e agora podemos ver o título é empurrado para a esquerda. O mesmo também pode ser feito com o cabeçalho nav. Mas é claro que desta vez precisamos definir a linha de texto para ser a correta. Dê um salvamento e agora devemos ver os links do lado direito. Isso agora nos dá um cabeçalho bonito olhando, cada lado ocupando uma quantidade igual de espaço e fluir para a borda da página. Se redimensionarmos o navegador abaixo de 1.000 pixels, podemos ver que os estilos originais ainda se aplicam. Ainda temos o cabeçalho empilhado um em cima do outro. Essa é a nossa página de aterrissagem completa. Parabéns por chegar até aqui, e te vejo no próximo vídeo. 19. Folhas de estilo externas: Até agora, em nosso site, adicionamos estilos dentro desta seção de cabeça, entre as tags de estilo. Isso é conhecido como uma folha de estilo interna e é uma maneira de estilizar uma página particular. Há também outro tipo que podemos usar chamado folhas de estilo externas. O CSS irá escrevê-lo exatamente da mesma forma, mas irá colocá-lo em seu próprio arquivo separado. Isso tem alguns benefícios; primeiro , reduz o tamanho do arquivo HTML. Ele também nos permite separar o HTML do CSS para facilitar a manutenção. Além disso, também podemos reutilizar os mesmos estilos em várias páginas. Para adicionar folhas de estilo externas tudo o que precisamos fazer é criar um novo arquivo dentro do nosso projeto. Vamos abrir a pasta do projeto. Isso pode ser colocado em qualquer lugar, mas eu vou adicionar uma pasta CSS. Isso é útil se você quiser adicionar mais folhas de estilo mais tarde, então vamos criar uma nova pasta chamada CSS. Em seguida, podemos adicionar nosso novo arquivo CSS dentro de um Visual Studio. Nós também vamos abrir a barra lateral e, em seguida, clicar na pasta CSS e, em seguida, clicar em novo arquivo. Vamos chamar isso de style.CSS. O nome do arquivo depende de nós, mas ele deve ter a extensão CSS dot. Agora inclua todos os estilos da seção principal da nossa página de índice. HTML, selecione todos os estilos, incluindo a consulta de mídia até o fim. Então corte os estilos e, em seguida, salve isso e cole-o dentro do novo estilo. CSS. Dê isso um Salvar e agora, se voltarmos para a página de índice, não precisamos mais das tags de estilo, então podemos removê-las. Uma coisa que precisamos é de um novo elo. Este link será vinculado à nossa folha de estilo e é semelhante ao que temos acima, o link para nossas fontes do Google. Adicione este link em, é apenas uma tag de abertura, não há tag de fechamento, em seguida, nos atributos rel. Especifica a relação entre os documentos atuais e os documentos vinculados. Neste caso, é uma folha de estilo. Em seguida, adicionamos um segundo atributo, que é o href. O href é a localização do nosso arquivo, e é o mesmo atributo que usamos nestes links abaixo. Como isso está na pasta CSS, vamos adicionar o css/style.css. Agora, se salvarmos isso e passarmos para o navegador, abriremos o projeto e atualizaremos. Agora podemos ver que os estilos ainda entraram em vigor, mas a imagem de fundo está faltando. Se formos para o arquivo style.css e, em seguida, se localizarmos a imagem de fundo, podemos dar uma olhada no porquê. Tudo depende da URL da imagem. O caminho do arquivo estava bem antes porque o estilo estava na página de índice. Este caminho de arquivo é relativo ao arquivo em que estamos, isso significa que a partir da página de índice, nós só precisávamos ir para a pasta de imagens e a imagem estava lá para nós. Agora esse estilo está dentro da pasta css. Precisamos usar a barra ponto-ponto na frente do caminho do arquivo. Esta barra ponto-ponto diz ao navegador para procurar um nível, que significa que ele irá saltar para fora da pasta CSS e para o nível raiz onde a página de índice está. Uma vez que estamos de volta ao nível da página de índice, podemos então voltar para a pasta de imagens como antes. Salve isso e atualize, agora devemos ver que a imagem de fundo está de volta no lugar e nossa folha de estilos externa está funcionando agora. 20. Adicionando a página do blog: Com a página Londres agora concluída, agora vamos passar para a criação da página do blog. Grande parte da estrutura básica, como a seção de cabeça, é semelhante em todo o site. Nós também estaremos reutilizando o mesmo habitue. Isso significa que podemos duplicar ou copiar e colar a página de índice existente para nos ajudar a começar. Vamos fazer isso no nosso editor de texto. Vou para Command ou Control C e, em seguida, Command V para copiar e colar esta página de índice e, em seguida, queremos renomear este arquivo, o blogue dot HTML. Lembre-se também, como nós construímos esta página do blog, embora eu tenha mostrado técnicas para usar ao aplicá-los ao meu site, sinta-se livre para personalizá-los se você deseja salvar seu projeto. Agora temos duas páginas HTML, temos nossa página de índice para a página de Londres, e depois a página do blog, para a qual vamos vincular. Na verdade, todo o código HTML que temos para a página de Londres também se aplica ao blog. Se dermos uma olhada na versão final e, em seguida, selecionar o blog, a página é exatamente a mesma que a página de Londres com um blog apenas adicionado abaixo na parte inferior. A imagem também não é o tamanho total da tela, mas isso é algo que podemos corrigir no CSS. Vamos voltar para o blog dot HTML. Se você se lembra de antes, também temos o link para esta página HTML ponto blog já em vigor, que significa que agora devemos ser capazes de clicar no link no navegador para ver o blog. Selecione um blog na parte superior, e embora esta seja a mesma página, podemos ver que este é agora selecionado o blogue dot HTML. Aqui também podemos ver os benefícios de mudar para um folhas de estilo externo. Agora temos duas páginas HTML compartilhando os mesmos estilos. Em seguida, começaremos a criar alguns artigos para exibir as postagens do blog. 21. Criando publicações no blog: Neste vídeo, vou me concentrar em criar as postagens do blog. Como você pode ver aqui no site final, se redimensionarmos o navegador, vemos o switch de layout para telas pequenas para largura total. Nós já sabemos que podemos conseguir isso usando flex-box. Para fazer isso, eu vou criar elementos div com a classe de borracha para cercar tanto o blog como também a barra lateral. Podemos então definir o estado para ser os pais flex e mudar o conteúdo de coluna para linha em dispositivos de tamanho diferente. Vamos preparar isso agora. Vamos passar para o blog dot HTML e, em seguida, ir logo abaixo desta div com a classe de imagem de jornada. Vou criar uma nova div. As tags de abertura e fechamento e, em seguida, nos dar uma classe de wrappers. Então vamos ter duas seções dentro deste, vai ser uma seção principal que vai cercar as postagens do blog. Então vai ser uma seção lateral, que vai ser para a barra lateral. Vamos criar essas duas seções agora. Primeiro temos a seção principal. Então, logo abaixo disso, temos a seção lateral. Adicione estes dois em e certifique-se de que eles estão aninhados dentro da div com a classe de wrapper main no lado junto com o artigo, que vamos usar em seguida para todos os elementos HTML semânticos que olhamos anteriormente. Agora podemos adicionar o artigo para ser o recipiente para as postagens do blog. Todas as postagens do blog que criamos estarão dentro desta seção principal. Vamos adicionar nosso artigo. Além disso, vou reutilizar a classe de fundo para dar à postagem do blog o mesmo fundo cinza consistente que já usamos. Vamos adicionar essa classe de fundos. Agora é apenas um caso de construir este post de blog com elementos que já usamos. Vamos começar com o cabeçalho. A seção de cabeçalho vai incluir informações como o nome da postagem do blog, também algumas informações sobre o autor e tags. Vamos adicionar o cabeçalho na parte superior. Em seguida, dentro daqui eu vou adicionar um h 2. Isto vai ser um pouco menor do que o título principal do topo da página. Este vai ser o nome do post do blog, como você pode ver aqui. Como exemplo, eu vou chamar isso de postagem do blog 1, e então eu vou criar uma lista não ordenada para, em seguida, criar as informações sobre a postagem do blog, como o banco de dados criado, as tags e também a oferta. Logo abaixo do título de nível 2, vamos adicionar a lista não ordenada. Junto com alguns itens da lista, vamos começar a oferecer. Então eu vou usar as tags em para adicionar alguma ênfase extra ao nome do autor. Entre eles, vou adicionar o meu nome. Vamos salvá-lo e ver como ele está olhando. Se voltarmos para o projeto, selecione o blog e, em seguida, role para baixo. Agora temos o autor mostrado na parte inferior, bem como o título da postagem do blog. Tudo o que eu quero fazer agora é simplesmente copiar, este item da lista e colá-lo em mais duas vezes. O segundo vai ser para as etiquetas. Vou adicionar apenas algumas etiquetas aqui dentro. Tudo bem e, em seguida, o terceiro e último vai ser data de criação. Vamos apenas adicionar cinco dias atrás como um exemplo e dar um salvamento e ver como isso está olhando. Vou definir todas as informações de cabeçalho, fora desta seção de cabeçalho, mas ainda dentro do artigo. Agora vou criar uma nova seção. Isso vai ser para todo o resto da informação do blog, como a imagem e também o texto. Antes de ter examinado a adição de uma imagem através da propriedade de fundo CSS. Também podemos adicionar imagens usando a tag de imagem HTML. Esta é uma tag de fechamento automático, que significa que não há nenhuma tag de fechamento para ela. Então, tudo o que precisamos fazer é adicionar os elementos da imagem e, em seguida, adicionar uma fonte. A fonte será a localização da imagem. Lembre-se de antes que adicionamos todas as imagens dentro de uma pasta de imagens, selecione a pasta de imagens e, em seguida, eu quero começar com a imagem Venice.JPG. Se você não estiver usando as imagens fornecidas com este curso, agora seria um bom momento para pegar 4-5 imagens diferentes e colocá-las dentro de sua pasta de imagens. Eu também vou adicionar um atributo ALT da imagem de Veneza. Isto é basicamente um fallback para se a imagem pode ser exibida. Também é lido por leitores de tela. Geralmente é recomendado colocar este texto alternativo no caso de a imagem não poder ser exibida. Abaixo disso, você deseja adicionar o texto para o bloco dentro do tipo p. Claro, sinta-se livre para escrever um post no blog, se quiser. Mas eu vou apenas adicionar um texto de amostra, e nós podemos fazer isso visitando um site chamado Lorem Ipsum. Eu só faço uma pesquisa por Lorem Ipsum e, em seguida, selecionar lipsum.com. Isso nos dará alguma amostra ou texto fictício que podemos usar no site. Tudo o que precisamos fazer é descer e selecionar quantos parágrafos quisermos. Eu só vou mudar isso para dois parágrafos e, em seguida, clique em gerar. Então isso nos dá algum texto de exemplo que podemos copiar e usar dentro do nosso projeto. Cole isso na direita entre as tags p e dar um salvamento. Vamos ver como isso está parecendo agora. Se voltarmos para o blog e atualizarmos. Ótima. Assim como o cabeçalho também teremos a imagem e também o texto de amostra abaixo. A última coisa que queremos fazer é adicionar um link para a seção Ler Mais. Como você pode ver no site acabado aqui. Logo abaixo do texto de amostra e crie um pouco de espaço aqui. Eu quero usar tags A porque isso vai ser um link com o href e eu vou apenas manter isso vazio por enquanto. Isso será útil para vincular as postagens completas do blog em sua própria página separada e, em seguida, o fechamento de uma tag. O texto de Leia mais. Vamos dar uma olhada nisso agora no navegador, atualizar. Nunca vai agora terá o link na parte inferior. Este artigo agora no lugar, Eu vou simplesmente copiar e colar isso em mais algumas vezes. Copie o artigo completo e cole-o mais uma vez. Eu só vou mudar para postagens de blog 2 e também mudar a imagem de Veneza para hike.JPEG. Em seguida, procure artigo fazer algum espaço e cole novamente, então blog post livre. Desta vez a imagem vai ser lago. Digamos que vou fazer isso mais uma vez. É ótimo para artigos colá-lo e mudar isso para ser blog post 4 ea imagem final que eu vou usar é o elefante. Salve isso e adicione suas imagens e, em seguida, vá para o navegador uma vez que isso é feito, e verifique isso para postagens de blog. Então, o primeiro, o segundo, o terceiro, e também o quarto, cada um com sua própria imagem única. Agora podemos ver as quatro postagens do blog no lugar. O estilo precisa de um pouco de trabalho e o layout ainda não será responsivo. Mas isso é bom, por enquanto vamos consertar isso em um vídeo mais tarde. 22. Ícones de redes sociais na barra lateral: Agora temos a seção principal concluída com a postagem do blog no lugar. Agora, queremos passar para a barra lateral e adicionar alguns botões de mídia social. Botões de mídia social não são muito difíceis de aplicar. Os são certos sites que nos permite usar ícones de mídia social em nosso site gratuitamente, como Font Awesome que eu vou usar neste site. Vamos começar criando uma nova seção para a barra lateral. Vamos para o blog.html. Fecharemos esta barra lateral para nos dar mais espaço. Lembre-se de antes, nós já criamos a seção lateral para a barra lateral. Tudo o que precisamos fazer é adicionar uma nova seção. Em seguida, dentro da tag de abertura da seção, eu vou adicionar algumas classes. Primeiro de tudo, eu vou adicionar um chamado widgets de barra lateral. Isso nos permitirá estilizá-lo com o CSS em breve, e também a classe de fundo para manter a cor de fundo consistente em todo o site. Então eu vou adicionar um título usando as tags h2. Então um texto de siga-me. Em seguida, podemos adicionar nossos ícones de mídia social abaixo. Vou adicionar um novo elemento chamado HR. Isto é para uma linha horizontal, que podemos ver se vamos para o navegador e depois atualizar. Vamos para a barra lateral. Na verdade, estava lá embaixo porque ainda não adicionamos nenhum layout. Vamos ver o texto de siga-me e também a linha na parte inferior. Isto irá separar o texto dos ícones assim que os colocar no lugar. Como eu mencionei antes, eu vou estar usando um site chamado Font Awesome para fornecer os ícones de mídia social. Podemos encontrá-los visitando fontawesome.io então para começar. Clicamos no ícone Começar na parte superior e, em seguida, role para baixo. Se você descer para Download & Customize, clique no botão Download. Há uma versão paga também, mas tudo o que precisamos fazer é clicar em não obrigado. Basta baixar Font Awesome 4, que só deve levar um momento para baixar. Uma vez que isso é feito, podemos ir para os downloads e, em seguida, descompactar o pacote Font Awesome. Este lugar na área de trabalho por agora, em seguida, renomear este simplesmente fonte impressionante. Remova o número da versão. Então, se entrarmos em nossos projetos de blog de viagens, podemos colocar isso dentro da pasta CSS assim. Isso ocorre porque esta é apenas uma folha de estilo como nós já adicionamos para nossos próprios estilos personalizados. Vamos adicionar isso como antes dentro da seção da cabeça. Vamos abrir o projeto de novo. Volte para a seção da cabeça e adicione-os logo acima das folhas de estilo personalizadas. Vamos adicionar o link, atributo rel de folhas de estilo. Em seguida, o href para vincular ao arquivo o arquivo está dentro da pasta CSS. Em seguida, dentro da pasta CSS, temos a pasta de fonte impressionante para a frente barra. Isso também tem sua própria pasta CSS dentro dele. Podemos ver isso selecionando o CSS, fonte impressionante, e, em seguida, como uma pasta CSS secundária dentro lá. Em seguida, o nome do arquivo que queremos vincular é fontawesome.min.css. A ordem de vincular essas folhas de estilo também é importante. Nós sempre queremos nossas próprias folhas de estilo personalizadas na parte inferior. Isso garante que nossos próprios estilos que adicionamos sejam adicionados por último. Portanto, ele substituirá qualquer um dos outros estilos das folhas de estilo acima. Agora temos os ícones adicionados ao nosso projeto. Vamos voltar ao Font Awesome e ver como usá-los. Voltar para fontawesome.io. Deveríamos nos livrar disso. Então, se formos até os ícones, podemos fazer uma busca por qualquer um dos ícones disponíveis. Por exemplo, vamos procurar o Facebook. Podemos ver os resultados da pesquisa aparecem na parte inferior. Vou usar o oficial do Facebook, clique nisso. Então, se você rolar para baixo, podemos ver um elemento HTML que podemos usar. Copie este elemento i e, em seguida, de volta para o blog.html. Se formos para a seção de lado. Então logo abaixo da regra horizontal, vou adicionar uma div desta vez com uma classe de social. Podemos usar isso no CSS. Fechar a div. Então tudo o que precisamos fazer é colar os novos elementos. Guarde isso. Vamos verificar se isso está funcionando bem atualizando. Você pode ver o ícone do Facebook na parte inferior. Quero colar isto em mais três vezes. O segundo vai ser fa-instagram. Você pode fazer uma pesquisa no site Font Awesome para qualquer um desses links. O próximo eu vou usar twitter-quadrado. Então, finalmente, o pinterest-quadrado. Verifique se escrevemos tudo isso corretamente atualizando o navegador. Ótimo, então agora podemos ver os quatro ícones na parte inferior. Eles são muito pequenos no minuto, mas podemos fazer estes um pouco maior com uma classe Font Awesome de fa-2x que eu vou colar isso em todos os quatro links. Isso torna os ícones duas vezes o tamanho que normalmente seriam. Parece muito melhor agora. Coloquei esses ícones na barra lateral. Não vou ligar a nenhum dos meus sites de redes sociais. Você pode ir em frente e fazer isso cercando o elemento i com o elemento a e fornecer um link exatamente como estamos fazendo nos links na seção de cabeçalho acima. Você pode então adicionar um atributo href como fizemos no cabeçalho. O atributo href é exatamente o mesmo que usamos em qualquer um dos links nav acima. No entanto, é um link externamente. Precisamos fazer um link para o URL completo. Quando terminar, certifique-se de salvar isso. Agora nossa página do blog está indo bem. Em seguida, vamos terminar o HTML adicionando os últimos widgets da barra lateral. 23. Introdução às tabelas e entidades de HTML: Dando uma olhada nesta versão final do meu site, agora vou adicionar os widgets da barra lateral com os países a visitar. Este é um widget iria atender o meu blog. Você pode, naturalmente, escolher em breve financiar, se preferir. No entanto, as técnicas que abordaremos neste vídeo são fundamentos úteis para conhecer. O layout do widget será criado com uma tabela HTML. Tabelas costumavam ser usadas há muito tempo para colocar nossos sites. Isso foi antes de CSS assumir o posicionamento de layout. Também muito antes da flexbox, que estamos usando agora. uso de tabelas para layout agora é considerado uma prática ruim. No entanto, continua a ser útil para estabelecer dados como a nossa lista de países ou mesmo algo como uma tabela de resultados ou resultados. Para começar, vamos adicionar nossa seção da barra lateral, logo abaixo da seção de mídia social. Adicione uma nova seção dentro aqui e, em seguida, dentro da tag de abertura, podemos adicionar algumas classes. Assim como antes que eu vou usar é widgets de barra lateral consistente em segundo plano. Vamos continuar a usar os joelhos mais tarde no curso. Dentro da seção, podemos então adicionar uma tabela com os elementos da tabela. Isso também tem uma tag de abertura e fechamento. Dentro daqui podemos começar a criar nossa tabela. Aqui dentro podemos adicionar alguns títulos de mesa. Por exemplo, em uma tabela de usuários, esta será a linha superior em negrito, que são o primeiro nome, um sobrenome e um e-mail, por exemplo, na parte superior de cada coluna. Vamos criar este cabeçalho com o cabeçote. Dentro daqui usamos os elementos tr. Tr é usado para criar uma nova linha, podemos usar mais de uma linha por só precisa do título de países para visitar. Vou manter isto como uma fila. Então, ao lado dele aqui dentro, você vê os elementos. Isso é usado para os dados do cabeçalho. Abrindo e fechando tag e que dentro daqui podemos pedir o texto que queremos adicionar como o cabeçalho. Eu também estou indo para lugares dentro de um psiquiatra H2 dentro, apenas para manter o nome consistente com o widget sobre mídia social. Vamos adicionar ao h2 aqui com o texto dos países a visitar. Em seguida, logo após esta seção de cabeça tabela abaixo aqui, nós também podemos adicionar o corpo da tabela com tbody. Se você está lutando para se lembrar de todas essas tags, não se preocupe. Há uma seção da cabeça e também uma seção do corpo, assim como já usamos em seu site, onde temos a seção da cabeça no topo e, em seguida, a seção do corpo logo abaixo. Role-os de volta para baixo até a mesa. Podemos então começar a adicionar alguns dados a este corpo de tabela, como os países que querem visitar. Assim como este cabeçalho da tabela, os dados do corpo são colocados dentro das linhas dois. Usamos o mesmo tr para cada linha. Cada célula dentro da linha usa td, para os dados da tabela. Aqui podemos começar em nossos países ou quaisquer dados que você deseja colocar em sua tabela. Vou começar com o país do México. Em seguida, dentro da mesma linha, eu vou adicionar um novo td para mais alguns dados de tabela. Então aqui dentro, tem que usar o símbolo e comercial, o áspero então um, zero, zero, zero, zero, três, seguido pelo ponto-e-vírgula no final. A primeira célula é para o nome do país. O segundo pode parecer um pouco estranho. Isto é o que chamamos de entidade HTML. Entidades HTML são usadas para exibir caracteres ou símbolos, assim como o tick que vemos nos sites finalizados, logo aqui à direita. Também entidades são usadas para substituir certos símbolos, como o menor ou o maior que símbolo. Assim como este. Se fôssemos apenas usa menos ou maior que símbolo, o navegador pode pensar que este é o início de uma tag HTML. Isso pode causar problemas. Como exemplo, menos do que é substituído por comercial lt, seguido por um ponto e vírgula. Vamos salvar isso e depois ver isso no navegador. Se atualizarmos, voltamos para a mesa, podemos ver que há o nosso tick, que é este código aqui. Em seguida, o nosso símbolo menos, podemos ver acima apenas aqui. Podemos usar um símbolo maior do que substituindo lt iria gt então atualizar. Agora você pode ver que o símbolo é agora o maior que. Vamos remover isto. Também tem acesso a muitos outros símbolos Unicode, visitando um site chamado unicode-table.com. Aqui podemos ver uma lista de alguns dos personagens populares que podemos usar. Ou podemos fazer uma pesquisa para, e precisamos fazer para adicioná-los, é selecioná-lo e, em seguida, copiar o código HTML e adicionar isso ao nosso projeto. Agora podemos ver as informações nesta primeira linha. Tudo o que vou fazer agora é copiar e colar em mais algumas linhas. Copie a seção tr. Quantas vezes você colar isso depende das informações que você precisa para o seu tema, cole-o abaixo e, em seguida, altere o país. O próximo que vamos adicionar é o Egito. Então vamos continuar com o país, seguida vou adicionar Espanha, depois China. Eu também vou remover o carrapato porque eu não fui para a China, colá-lo mais, mudanças para Portugal, República Dominical, e depois Tailândia. Claro, adicione quantas linhas quiser para o seu blog. Eu deveria adicionar mais um ou dois, depois da Tailândia eu vou para a França, e apenas mais um par, nós vamos adicionar o Canadá. Quero remover o carrapato do Canadá. Então, finalmente, a última linha eu vou adicionar Austrália. Dê um salvamento, e então vamos verificar isso em um navegador. Isso parece bom. Agora podemos ver nossa lista de países em suas próprias linhas separadas. Também temos a entidade HTML como um tick. Com esta tabela agora terminado é agora completa a seção A-side para o meu blog. Além disso, este é o conteúdo HTML final agora adicionado. Agora podemos passar para o próximo vídeo. Vamos adicionar alguns CSS styling ao longo vamos olhar em pseudo-classes. 24. Estilização do blog e pseudoclasses: Na versão final para dispositivos menores, você pode ver algumas diferenças para o que eu tenho até agora sem CSS. A versão final, como você pode ver aqui, tem o texto centrado, tem uma imagem de largura total, e geralmente melhor espaçamento. Alongando o navegador mais amplo, também podemos ver que a consulta imediata é usada para alternar a exibição da postagem sendo empilhada em cima da outra, para ter as postagens de blog e barra lateral lado a lado. Para fazer essa mudança de layout em uma página blog.html, já temos uma div circundante com a classe de wrapper, que está logo acima da seção principal aqui. Este será o nosso recipiente flexível. Então tudo o que precisamos fazer é mudar a direção flexível de coluna para linha, para telas maiores. Isso não é nada de novo, já vimos isso para o cabeçalho. Vamos começar no estilo dot CSS para fazer isso funcionar. Fora da consulta de mídia, podemos direcionar a classe de wrapper. Adicione estes logo acima da consulta de mídia, então dot wrapper, porque é uma classe. Então, como acabamos de mencionar quando é definido o tipo de exibição para ser de flex, com uma direção flexível da coluna. Como isso está fora da consulta de mídia, isso significa que a direção flexível da coluna será aplicada nas telas menores. Em apenas um pouco, podemos mudar essa direção flexível de volta para linha dentro da consulta de mídia. Vamos economizar e ver como isso está parecendo. Dimensione o navegador para baixo para que você possa ter uma ideia melhor. Agora eu vou adicionar um pouco de preenchimento e margem, apenas para dar ao artigo um pouco de espaçamento. Vamos selecionar o artigo e também a classe widget barra lateral. Esta é a classe que você dá a todos os componentes da barra lateral. Vou adicionar um pouco de preenchimento dentro, de 15 pixels, e então também alguma margem, de 15 pixels na parte superior e inferior, e então zero na esquerda e na direita. Isso irá adicionar algum preenchimento dentro da div e, em seguida, alguma margem acima e abaixo para separar as postagens do blog e também os widgets. Vamos dar essa atualização. Agora você pode ver que esta margem foi aplicada entre cada uma das postagens. Lembre-se, cada uma dessas postagens de blog também tem sua própria seção de cabeçalho. Nós vamos adicionar uma cor de fundo para este cabeçalho do blog, mas nós não queremos usar o seletor de cabeçalho porque isso também teria como alvo o cabeçalho na parte superior da página. Para fazer isso, logo abaixo desta seção de artigo, vamos direcionar o cabeçalho do artigo, exatamente assim. Usando este símbolo maior que, selecione apenas filhos diretos. Nesse caso, isso direcionará apenas os elementos de cabeçalho, que é um filho direto de um artigo. Em seguida, vamos definir a cor de fundo para ser o valor hexadecimal de d8d8d8, salvar e atualizar. Agora você pode ver esta seção de cabeçalho tem um fundo um pouco mais escuro. Em seguida, a imagem, se esticarmos o navegador um pouco mais largo, podemos ver que a imagem não se encaixa perfeitamente na largura total da página. Para corrigir isso, podemos selecionar todas as imagens e definir a largura para ser 100 por cento. Em seguida, atualize e dê uma olhada nisso, e agora podemos ver os fluxos de imagem para ser 100% do contêiner. Eu também vou adicionar um pouco de margem para os ícones Font Awesome. Se fizermos o navegador um pouco menor e rolar para baixo até o fundo, eu vou apenas adicionar alguma margem para a esquerda e direita, apenas para espaçar esses ícones um pouco mais. Lembre-se Fonte impressionante tinha os elementos i, para que possamos selecioná-lo com i, então margem zero na parte superior e inferior, e cinco pixels à esquerda e à direita, e depois atualizar. Agora podemos ver que temos melhor espaçamento entre os ícones. Nosso estilo mobile-first está quase completo, mas antes de seguirmos em frente, quero apresentá-los às pseudoclasses CSS. Pseudo classes são usadas para aplicar estilo a um determinado estado. Um exemplo comum é alterar a cor de um link quando um usuário passa o mouse sobre ele. Podemos selecionar os links com os elementos a, e então usamos dois pontos e, em seguida, adicionar ao nome do pseudo seletor, que neste caso é pairar. Toda vez que o usuário passa o mouse sobre um link, vamos mudar a cor do link. Então vamos definir isso para uma cor azul e nos dar uma chance. Vamos voltar para a seção superior, e agora podemos ver quando você passar o mouse sobre qualquer um desses links ele agora fica azul. Então, finalmente, eu vou olhar para o enésimo pseudo-seletor criança. Se descermos até a mesa dos países visitantes, quero adicionar um pouco mais de preenchimento à esquerda desses carrapatos. Se apenas segmentar os elementos td no CSS, isso também se aplicará ao elemento td para o país também. Para adicionar esse preenchimento apenas ao segundo em cada linha, usamos a pseudo-classe filho enésimo. Isso leva em um número como um parâmetro entre colchetes. Este número no nosso caso será o número 2 para selecionar os segundos elementos td. Vamos dar uma olhada em como podemos fazer isso. Vamos direcionar o td, e novamente separados por dois pontos, podemos adicionar enésimo filho. Como eu mencionei antes, queremos selecionar o segundo filho e, em seguida, queremos adicionar algum preenchimento apenas à esquerda de 30 pixels. Vamos economizar e ver como isso está parecendo. Agora podemos ver que os carrapatos serão movidos ligeiramente para a direita. Isso só é aplicado ao segundo td, não temos preenchimento adicional no primeiro; os países, que também estão pairando que tem primeiro filho e último filho. Você pode descobrir mais sobre eles no download de recursos. Isso agora termina os estilos que eu quero adicionar à exibição mobile-first para o meu blog. Esperemos que agora eu tenho um grande blog procurando também para telas pequenas. Agora é hora de seguir em frente e adicionar os estilos finais para dispositivos maiores. 25. Estilização do blog para dispositivos maiores: Seu blog agora deve estar se formando muito bem. Temos o estilo CSS agora concluído para dispositivos móveis, e agora é hora de completar o CSS para telas maiores, incluindo uma mudança de layout dentro da consulta de mídia. Se você se lembrar do último vídeo, definimos o recipiente ou o invólucro para ter o tipo de exibição de flex e a direção flexível da coluna, que empilha todos os elementos um sobre o outro. Para telas maiores, você deseja que as postagens do blog e também a barra lateral tenham uma direção flexível da linha. Vamos fazer isso dentro da consulta de mídia. Logo abaixo do cabeçalho de navegação, vou adicionar um comentário. Lembre-se de antes que mencionamos que comentários podem ser adicionados para adicionar notas a nós mesmos. Isso é ignorado pelo navegador da Web. Então esta é a seção do blog agora. Vamos selecionar o wrapper e mudar a direção flexível para ser linha e, em seguida, atualizar. Agora podemos ver instantaneamente que as postagens do blog e a barra lateral estão agora em uma fileira. Agora vamos definir a propriedade flex. Vamos definir a seção principal, que é esta parte do blog, para ter um valor flexível de três, e depois a barra lateral para um valor flexível de um. Isso significa que a seção do blog ocupará três vezes o espaço disponível da barra lateral. Vamos fazer isso agora com o seletor principal. Lembre-se que este é o blog posts, o valor flexível de três, e, em seguida, a seção lateral pode ter o valor flex de um. Vamos salvar isso, atualizá-lo, e agora você pode ver que o tamanho mudou. Eu vou adicionar alguma margem à esquerda da barra lateral também apenas para criar um pouco de espaço entre uma barra lateral e as postagens do blog, então margem esquerda de 15 pixels. Ok. Bom. Parece muito melhor agora. Agora eu vou adicionar alguns CSS para o cabeçalho da postagem do blog. Podemos direcionar isso com cabeçalho do artigo. Portanto, isso só se aplica ao cabeçalho dentro do artigo. Vou usar a propriedade flex box de justificar o conteúdo. Isso define como queremos que os elementos sejam espaçados. Um dos exemplos é o espaço entre. Salve isso e dê uma atualização. Agora podemos ver isso adiciona espaço entre o título e também a lista não ordenada. Também podemos mudar isso para o espaço ao redor. Vamos dar uma olhada nisso. Agora teremos espaço igual ao redor dos elementos. Se houvesse mais elementos dentro deste cabeçalho, eles também seriam igualmente espaçados. Justify conteúdo tem mais algumas opções também e há alguns links disponíveis dentro dos recursos. Agora que é meu blog agora terminado, e eu estou feliz com como as coisas estão começando a olhar para telas menores e também telas maiores. Vamos encolher o navegador e ver a consulta de mídia em ação. Quando atingimos 1000 pixels, obtemos uma mudança de layout, então isso é ótimo. Eu encorajo você a continuar trabalhando em seu próprio CSS também e mudar as coisas para se adequar a você. Até jogue com o tamanho das consultas de mídia e os layouts se ele funcionar melhor para o seu conteúdo. Mesmo com este blog agora completo, Eu ainda quero cobrir algumas coisas que são úteis para você saber. Vou cobrir estes nos próximos vídeos. 26. Compatibilidade de navegador: Todos nós já terminamos no blog. Agora eu vou dar um pequeno passo atrás e codificação, e cobrir algumas coisas que você pode achar útil durante a construção do blog, nós usamos um monte de HTML e CSS. Um dos desafios do desenvolvimento de sites é o fato de que diferentes navegadores podem exibir nossos sites de forma um pouco diferente. É sempre melhor testar seu site em vários navegadores, como Chrome, Safari, Firefox e Internet Explorer, juntamente com navegadores de dispositivos menores para verificar se parece bem no shopping. Além disso, outra consideração é que alguns usuários usarão versões diferentes do mesmo navegador. Pode ter a versão mais recente, enquanto alguns terão uma versão mais antiga. Há um site útil disponível chamado caniuse.com. Vamos para isso. Este site nos dá informações sobre os navegadores pausar para diferentes versões. Por exemplo, se começarmos procurando por flexbox, e rolar para baixo, podemos ver sob o esporte do navegador que ele é principalmente verde. Por exemplo, ele está disponível em todas as versões do Chrome e é totalmente compatível. O mesmo para o Firefox e a maioria dos navegadores. Agora vamos dar uma olhada na grade. Procure por grades. Se deslocarmos para baixo até o suporte do navegador, essa propriedade de grade CSS é nova dentro do flexbox. Pode ver alguns vermelho, o que significa em pontos suportados e alguns pontos parciais em diferentes navegadores. Isso significa que devemos tomar um pouco mais de cuidado ao usá-lo como alguém usa pode não ter suporte total para isso. Dentro do navegador. Existem algumas ferramentas e soluções alternativas disponíveis para ajudar com o local do navegador. Se isso é algo que está interessado em, existem alguns links úteis nos recursos para verificar. Vale a pena conferir sites como este, juntamente com testes em diferentes navegadores para melhorar a experiência do usuário. 27. Introdução às ferramentas de desenvolvedor do navegador: Junto com os testes em diferentes navegadores que mencionamos no último vídeo, também é útil testar a aparência de um site em vários dispositivos. A maioria de nós não tem muitos tipos de tablets e telefones redondos para testar, então o Google Chrome nos ajuda com isso. Se formos até um site, o telefone de qualquer pessoa e, em seguida, se clicarmos na opção “Inspecionar” para abrir as Ferramentas do desenvolvedor. Tenha em mente que outros navegadores também terão sua própria versão das ferramentas de desenvolvedor, mas eles podem funcionar um pouco diferente disso. Se clicarmos no ícone com o telefone celular e tablet, que está no topo aqui, podemos simular a aparência de um site em diferentes dispositivos. Em vez de tê-lo Responsive ou vários dispositivos para selecionar. Por exemplo, se você clicar no iPhone 6, podemos ver exatamente como isso seria renderizado em um iPhone 6. Você pode ver com as consultas de mídia, isso significa que tudo ainda parece bem. Isso ocorre especialmente porque projetamos este site para ser móvel primeiro e construído sobre ele para dispositivos maiores. Também podemos selecionar um iPad grande e ver como isso parece. Parece tudo bem aí. Se você não tem muitos dispositivos para testar, esta é uma boa ferramenta para ver como os sites se parecem em dispositivos de tamanhos diferentes. Vou apenas clicar neste ícone novamente para voltar à vista da área de trabalho. Outra ferramenta útil que já analisamos neste curso, é a capacidade de selecionar um elemento clicando nesta seta. Isso é útil para encontrar problemas e depuração. Por exemplo, se você está se perguntando por que algum CSS não está tendo efeito, podemos então passar o mouse sobre quaisquer elementos no site e dar uma olhada em todas as propriedades CSS que entraram em vigor. Por exemplo, se clicarmos no título de nível 1, sobre o lado direito, podemos ver o cabeçalho h1. Nós também podemos ver a margem, o preenchimento, e também ver de que folhas de estilo estas estão vindo. Isso é útil em sites maiores que podem ter mais de uma folha de estilo. Também podemos removê-los temporariamente e ver como o site parece com ou sem eles. Também podemos adicionar estilos diferentes em. Vamos mudar a cor para ser vermelho, e você pode ver que as mudanças são instantaneamente refletidas nos sites. No entanto, não se preocupe muito em quebrar o site. Uma atualização simples retornará tudo ao normal. As ferramentas de desenvolvedor são realmente úteis e podem fazer muito mais. Mas muito disso é para casos mais avançados. Nós não vamos cobrir isso aqui, mas tenho certeza que, à medida que você progride em sua jornada de web design ou desenvolvimento, você passará muito mais tempo aqui dentro. Em seguida, eu quero mostrar-lhe um grande plugin editor de texto chamado Emmet, que vai realmente acelerar a sua codificação e tornar as coisas muito mais fáceis. 28. Acelerando sua programação com o Emmet: Durante os projetos de curso de grandeza, nós codificamos manualmente todos os elementos em HTML. Esta é uma maneira perfeita de ganhar prática e memorizar como as coisas funcionam. No entanto, uma vez que você tem mais prática e você sabe como as coisas funcionam, às vezes você pode sentir que precisamos acelerar nossa codificação e o mais produtivo. É aqui que Emmet entra em jogo. Emmet é um plug-in para os editores de texto mais populares, o que realmente ajudou a acelerar nossa codificação e tornar o trabalho mais eficiente. Se formos para a seção de download, podemos ver que o Emmet está disponível para a maioria dos editores de texto populares. Eu gostaria de encorajá-lo a ir em frente e fazer o download para o seu editor de texto particular. Também muitas vezes a maioria dos editores de texto, tem uma seção plugin nas preferências, que permitem que você instale plugins mais facilmente. No entanto, se você estiver usando o código do Visual Studio como eu estou, ele já está incluído por padrão. Vou para uma das páginas HTML. Vou rolar até o corpo. Emmet nos fornece alguns atalhos de teclado, o que realmente nos permite acelerar nossa codificação. Por exemplo, quando começamos este projeto pela primeira vez, digitamos toda a seção html, incluindo a seção head, os metadados, o corpo e também as tags html circundantes. Emmet nos fornece uma maneira fácil de fazer isso. Tudo o que precisamos fazer é digitar html:5. Então podemos ver, obtemos o auto completo, dizendo que esta é uma abreviatura Emmet. Tudo o que precisamos fazer agora é clicar Enter ou tab, e então temos uma estrutura HTML básica no lugar. Eu só vou remover isso e tentar olhar para mais alguns exemplos. Aquele que nos poupará muito tempo. Em vez de digitar nenhum elemento. Assim como fazemos durante este curso com a etiqueta de abertura e fechamento. Tudo o que precisamos fazer é digitar o nome dos elementos e novamente pressionar Enter ou Tab e isso preenche a tag de abertura e fechamento para nos salvar muito trabalho. Podemos ir ainda mais longe. Por exemplo, se quiséssemos criar uma lista não ordenada com um item de lista já dentro, você poderia fazer ul, o símbolo maior que e, em seguida, li. Pressione Enter, e podemos ver isso adiciona automaticamente o li dentro da lista. Se você quisesse mais de um item da lista, poderíamos fazer ul, o símbolo maior que e um li, assim como fizemos antes. Em seguida, após o símbolo da estrela, podemos adicionar quantos itens da lista você quiser. Então, por exemplo, se quisermos cinco, podemos fazer isso. Claro que é muito mais que você pode fazer. Eu realmente encorajo você a ter um jogo em torno deste e usar uma vez que você ficar mais confortável com HTML. Então eu vou remover isso. Se você quiser olhar para isso ainda mais e descobrir mais dos atalhos. Há uma boa documentação em sites que você pode olhar e descobrir mais sobre as abreviaturas. É assim que podemos usar Emmet para acelerar a codificação. Em seguida, vamos dar uma olhada em blocos versus elementos inline. 29. Elementos em bloco versus em linha: Nós usamos muitos elementos durante este curso sem pensar muito sobre como eles são exibidos na tela. Normalmente, os elementos HTML pertencem a dois grupos, seja em bloco ou em linha. Um elemento de nível de bloco começa em uma nova linha na página da Web e ocupa a largura total disponível. Um exemplo disso é o elemento P para exibir texto. Como você pode ver aqui, ele se estende até a largura total do espaço disponível. Um elemento div também é um elemento de nível de bloco também, juntamente com muitos mais que vamos dar uma olhada em breve. O próximo é inline. Um exemplo de um elemento embutido é o elemento de imagem. Elementos inline não começam em uma nova linha, portanto, podem ser colocados ao lado um do outro, como você pode ver aqui. Eles também podem ser colocados dentro de um elemento de nível de bloco também. É assim que muitas vezes fazemos as coisas ao usar uma div circundante. O elemento div é nível de bloco, e isso pode conter elementos de bloco e inline dentro dele. Se formos para o site da Mozilla, podemos ver uma lista de blocos e elementos inline na parte inferior. Rolando para baixo até a lista de elementos de nível de bloco podemos ver o rodapé, o formulário, lado, artigo, tags de parágrafo e tabelas para citar alguns, são todos elementos de nível de bloco. Portanto, começando em uma nova linha por padrão. Então temos os elementos em linha. Novamente, podemos rolar para baixo até a parte inferior e ver os elementos embutidos como uma lista. Isso é coisas como botões, entradas, em, e também imagem, como acabamos de olhar antes. Esses links estão disponíveis nos recursos se você quiser dar uma olhada mais de perto. Bloco e inline é uma maneira tradicional de categorizar um elemento. Em HTML5, existem mais algumas categorias disponíveis, como fluxo e fraseado. Estes, no entanto, têm regras e definições muito mais complexas, então talvez apenas maneira de mergulhar em uma vez que você se tornar realmente confortável com HTML. Claro, também há links para isso nos recursos se você quiser conferir isso. Mas entender a diferença entre bloco e inline é realmente importante quando se trabalha com HTML. Ele irá ajudá-lo a colocar melhor o seu conteúdo e também ajudar a entender por que as coisas estão sendo colocadas em uma página de uma certa maneira. 30. Desafio final: Parabéns por chegar ao final deste curso. Antes de irmos, quero deixá-los com um desafio final. Eu gostaria que você voltasse ao seu projeto e adicionasse a ele. Lembre-se que criamos o link “sobre mim” na parte superior da página. Bem, eu gostaria que você voltasse e criasse sua própria página “Sobre Mim” e então vinculasse a ela a partir do menu de navegação principal. Isso é tudo que já cobrimos. Se você ficar preso, basta olhar para o resto do projeto e eu tenho certeza que você vai encontrar as respostas. Fazer este desafio sozinho, sem a minha ajuda vai realmente fazer você pensar sobre as coisas e também reforçar o que você aprendeu até agora. Além disso, se você estiver se sentindo particularmente criativo, vá em frente e adicione uma seção de rodapé também em cada página. Boa sorte e mal posso esperar para ver o que vocês criaram. 31. Etapa final: Parabéns, você chegou ao fim deste curso. Esperemos que até agora, você esteja mais confortável construindo sites com ótima aparência usando HTML e CSS. Agora você deve saber o suficiente para seguir em frente e completar projetos mais desafiadores também, para construir sobre o que você já aprendeu até agora neste curso. Juntos, construímos um site de blog com o seu tópico de escolha. Espero que você também tenha conseguido completar o desafio de adicionar a página Sobre Mim também, ou talvez até adicionar a seção de fotos. Eu adoraria que você também compartilhasse seu projeto também, para que eu e colegas pudéssemos ver. Esta é uma ótima maneira de mostrar suas habilidades, além de inspirar outros alunos também. Mas este não é o fim da sua jornada. Construir sites é um processo de aprendizagem contínua, mas também pode ser muito gratificante. A melhor maneira de continuar aprendendo é construindo mais sites e continuar desafiando a si mesmo ao longo do caminho. Se você não tem nenhum projeto para praticar, tente criar um ou mesmo copiar um de seus sites favoritos. Assim que você se sentir confortável com HTML e CSS, eu encorajaria você a aprender uma nova linguagem, como JavaScript para realmente dar vida aos seus sites. Por agora, porém, um enorme obrigado de mim por fazer este curso, e espero que você tenha gostado, juntamente com aprender algumas novas habilidades ao longo do caminho. 32. Vídeo: siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, confira o resto das minhas aulas aqui no Skillshare. Além disso, siga-me para quaisquer atualizações e também para ser informado de quaisquer novas classes à medida que elas se tornarem disponíveis. Obrigado mais uma vez. Boa sorte. Espero que te veja de novo em uma aula futura.