Como criar um site com HTML e CSS | Robin Haney | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Como criar um site com HTML e CSS

teacher avatar Robin Haney, Web Developer and Online Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

35 aulas (2 h 12 min)
    • 1. Introdução ao nosso projeto

      1:24
    • 2. Crie sua primeira página na site

      2:07
    • 3. Trabalhando com a programação

      1:39
    • 4. O que é HTML?

      1:25
    • 5. Como criar uma warme para nosso projeto

      1:53
    • 6. Como criar a estrutura de uma página da site

      3:33
    • 7. Containers de conteúdo em HTML

      2:58
    • 8. Como criar nossos sites

      4:35
    • 9. Como criar nossa página de portfólio

      2:36
    • 10. Como adicionar imagens à nossa página de portfólio

      2:29
    • 11. Como construir nosso Footer

      4:42
    • 12. Introduçãoao CSs

      6:36
    • 13. CSS externo e interno

      4:28
    • 14. O que são seletores de ID

      2:52
    • 15. Como Centrar nossos sites

      4:36
    • 16. Vamos fazer uma abordagem de mobilidade

      2:54
    • 17. Como criar nosso site com algumas cores

      3:52
    • 18. O que são cursos em CSS

      3:38
    • 19. Como adicionar comentários à seu CSS

      1:59
    • 20. Como adicionar fontes no nosso site e como ajustar o tamanho do texto

      8:22
    • 21. Como estilizar nossa página de portfólio

      4:52
    • 22. Como criar uma navegação horizontal

      1:39
    • 23. Como corrigir nosso rodagem e navegação

      4:52
    • 24. Crie uma em sobre

      5:22
    • 25. Como estilizar nossa Sobre em página

      3:44
    • 26. Crie uma página de contato

      6:17
    • 27. Como criar uma página de blog

      9:02
    • 28. Como criar nossa página de portfólio

      2:07
    • 29. Como adicionar uma gradepara uma página à nossa página de portfólio

      4:31
    • 30. Ajustamento final na nossa Sobre na página

      5:01
    • 31. Ajustamento final para nosso cabeçalho e rodagem

      2:38
    • 32. Finalizando nossa página de portfólio

      1:03
    • 33. Como encontrar um nome de domínio

      3:04
    • 34. Como encontrar um site para seu nome de domínio

      1:31
    • 35. Como conectar seu domínio à sua conta de hospedagem

      7:14
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

171

Estudantes

--

Sobre este curso

Se você sempre quis aprender como codificar e criar sites online, é exatamente o que você a precisa. Você vai aprender como criar seu primeiro site com apenas HTML e CSS do zero completo. Você vai fazer upload do seu site em online e vai ser para mostrar seu trabalho para todos os no mundo.

Este curso é perfeito para iniciantes e que não saiba absolutamente nada sobre HTML e CSS ou na web em desenvolvimento em geral. Este curso também é uma ótima revisão e de de uma boa revisão e de revisar para os quem precisam de um pouco para ajudar a juntar tudo para criar um site do início ao final.

Neste curso, vamos fingir de um cliente a contratou você para criar um portfólio online para seu negócio de de de cabelo de seu negócio de estilo de cabelo. Você como desenvolvedor na web foi contratado e tem um trabalho para fazer Você precisa criar um site que é responsivo em celular e parece ótimos. Não se preocupe, sei que vai fazer um bom trabalho.

Vamos começar.

Conheça seu professor

Teacher Profile Image

Robin Haney

Web Developer and Online Instructor

Professor

Hello,

My name is Robin Haney and I am an instructor here at Skillshare. I primarily teach web developing and programming tutorials. 

You can check out my blog here - www.robinhaney.com 

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução ao nosso projeto: Oi, meu nome é Rob. Este curso é perfeito. Se você nunca escreveu uma única linha de código antes ou se você precisa de uma atualização sobre como criar um site que você estava, comece aprendendo HTML básico na criação da estrutura de uma página da Web. Neste curso, vamos fingir que temos a construção de um site para um cliente. Uma vez que você tem HTML down pat, vamos passar para o básico de CSS, bem como estilo CSS de nível intermediário para um site . Este será o produto acabado do nosso site. Esta é a nossa página para um filme do site Billy e uma página do cinto para um cliente. Uma página de contato blawg em um portfólio que funciona como uma grade que mostra o trabalho de nossos clientes . Nosso site também será móvel, responsivo e ajustado dependendo do dispositivo em que nosso site está sendo visualizado. Podemos vê-la todas as páginas no site ou móvel, responsivo e olhar grande e dispositivos móveis e tablets. Estaremos construindo tudo isso do zero. Ela vai aprender muito neste curso. Isso é ótimo para qualquer um precisa de uma pequena ajuda extra para colocar tudo junto para obter um site on-line. Se você já quis aprender qual desenvolvimento neste curso é perfeito para você, por favor, interno hoje e estou ansioso para vê-lo dentro do curso. 2. Crie sua primeira página na site: Olá. Bem-vindos de volta ao curso. Espero que você esteja animado como eu estou para começar a projetar um site comigo. Agora, antes de começarmos a construir nosso site, vamos começar com alguns HTML básico. Nesta lição, você criará sua primeira página da Web. Vamos esquecer que a primeira coisa que você vai precisar fazer é criar uma pasta em sua área de trabalho para que você possa manter todos os arquivos que usaremos ao longo deste curso e um local organizado em seu computador. Em seguida, vamos abrir um novo arquivo sem pad, e você pode dar o nome que preferir. Depois de abrirmos nosso documento, vamos escrever nossa primeira linha de código HTML. Vou criar o que é chamado de elemento de manchete. Como um tipo de código, você verá que primeiro eu estou criando o que é chamado de abertura take e, em seguida, usamos o Ford Slash para declarar o fechamento. Pegue qualquer coisa que digitarmos. Entre a tomada de abertura e fechamento será uma manchete de Nível um, que é basicamente um texto realmente grande em uma página da Web. Vou digitar ascendência aqui para começar agora Vamos salvar o arquivo e dar-lhe o nome do arquivo . HTML. Isto está dizendo ao nosso computador para abrir este arquivo como uma página HTML. Então vamos para Kara File Index. Mas certifique-se de que usou a extensão dot html. Como eu mencionei antes. Isto está dizendo ao nosso computador para abrir este arquivo como uma página HTML. Depois de saborear a página que podemos ver, uma nova cópia dela é criada aqui. Vamos abrir e ver como é. Legal. Podemos ver o texto que escrevemos antes como um elemento H um em nosso campo Web. Parabéns. Você acabou de criar sua primeira página. Sei que não é muito, mas temos de começar por algum lado, certo? Experimente isto e veja se consegue criar uma página Web no seu computador sozinho. Quando estiver pronto para seguir em frente, me encontre aqui e podemos começar com a próxima lição. 3. Trabalhando com a programação: você provavelmente já percebeu que a codificação em nenhum bloco pode ser um pouco dolorido nos olhos. Felizmente para nós, eles estão codificando programas de edição que podem nos permitir programar ou sites muito mais facilmente. O exemplo que eu vou estar usando o código dele sem almofada mais este editor de revestimento é grátis. Você pode baixá-lo a partir de seu site como eu estou prestes a mostrar-lhe aqui. Uma vez que você não tem pad plus instalado em seu computador, podemos começar a editar nossas páginas da Web clicando com o botão direito nelas na seleção de editar sem pad mais Plus, Isso não parece um pouco mais fácil de ler? Vamos escrever mais alguns elementos de título apenas para adicionar um pouco mais de código à nossa página web . Vamos adicionar H dois elementos e em H três elemento também é que você pode já ter adivinhado em . H dois é menor do que em H um, e H três é menor do que em H dois. Enquanto você está escrevendo seus elementos, certifique-se de adicionar uma tomada de abertura e uma tomada de fechamento também. Vamos em frente e saborear a página web e ver como isso parece visualmente em nosso navegador da Web como podemos ver ou cada um é o maior. Interior H três tem um texto fuma na página. Existem opções pagas para citar editores que você pode olhar mais tarde, mas por enquanto, codificação sem pet plus vai funcionar muito bem para nós. 4. O que é HTML?: antes de irmos mais longe no curso, vamos tomar alguns minutos para falar mais sobre o que é HTML. HTML é um ism inicial que basicamente significa linguagem de marcação de hipertexto. não se preocupe muito com o que isso significa No entanto,não se preocupe muito com o que isso significa. Hypertext está se referindo a qualquer imposto que pode ser exibido em uma tela, e um hiperlink é um link que basicamente vincula a documentos ou páginas da Web juntos. Cada equipe Ellis principal usado para criar a estrutura de uma página web construindo uma estrutura de site é muito parecido com escrever um jornal. Você tem seus títulos, parágrafos, fotos e manchetes. Usamos HTML para criar a estrutura básica e em todos esses momentos para nossas páginas que. CSS é outra língua que estará aprendendo mais tarde Isso permitirá que você altere a apresentação visual do seu site. Isso pode ser um pouco complicado de enxertar no início, mas depois de começar a trabalhar com CSS mais, você entenderá o email HD muito melhor. Por último, mas não menos importante, vale a pena mencionar que o HTML evoluiu para projetar e construir os sites que temos hoje. E HD Mo tem sido em torno de um tempo muito longo Eu fui em frente em comprimento, toe alguns documentos sobre a história do e-mail hte e a seção de notas do professor deste curso que você pode verificar se você está interessado em aprender mais sobre HTML. Tudo bem, vamos seguir em frente. 5. Como criar uma warme para nosso projeto: Agora, antes que possamos ir mais longe com a concepção e construção em nosso site, nós realmente temos que construir uma fama de arame para um projeto. Agora eu tenho a versão final de um site aqui, então você não precisa planejar nada. Tudo já está feito por nós em nossas chaves. Mas normalmente você teria que planejar o conteúdo em seu site. Então esta é basicamente a página inicial que eu tenho e eu criei este site antes do tempo só para que ele soubesse exatamente o que estávamos construindo. Então estas são as diferentes páginas individuais em um site. Temos nossa página sobre. Temos uma página bloqueada. Temos o nosso título post bloco e uma barra lateral aqui com a imagem do autor, algumas páginas do site, temos uma página de contato será apenas uma imagem básica com algumas informações sobre nossos clientes no link e-mail e temos nosso portfólio que seria um formato de grade como este. E temos nosso rodapé na parte inferior e, claro, nosso cabeçalho. Agora este prato não é super complicado, mas definitivamente vai ser algo que vai ser um desafio para você se este é seu primeiro site ou se você é novo para hte e-mail ou mesmo CSS. Uma coisa que eu também vou apontar é ao criar um quadro de arame ou criar a estrutura do seu site. Também é bom criar versões móveis e responsivas do seu site também. E se eu fortalecer minha janela aqui, você pode realmente ver que um site muda. E isso ocorre porque uma janela do navegador está mudando, assim como faria em um dispositivo móvel que podemos ver aqui. Esta é a versão móvel do nosso site, e parece muito diferente do que quando um navegador de janela está esticado para fora, que é o corretivo da versão desktop. Diferentes páginas são formatadas de forma diferente, então, ao criar seu quadro de fio, você quer fazer uma versão móvel primeiro, e então você pode expandir essa versão mais biológica para a versão desktop como está aqui mesmo Agora. Então, em nossas chaves, todo o trabalho duro já está feito por nós. Sabemos exatamente o que temos que construir, então agora que sabemos o que fazer, vamos trabalhar construindo nosso portfólio para nosso cliente 6. Como criar a estrutura de uma página da site: agora que temos uma idéia visual de como queremos que um site se pareça. Vamos em frente e começar com a construção da estrutura e HTML antes de começarmos. Vale a pena mencionar que agora o email hte está mudando muito. Novos elementos foram adicionados nos últimos anos, e atualmente cada equipe 05 trouxe muito para a mesa. À medida que construímos nossa página da Web, usaríamos os elementos mais recentes de suporte. É que seu site é moderno e atualizado agora, já que isso acabou, vamos voltar a codificar em nosso site. Então, a primeira coisa que você deve adicionar ao seu site é um tipo de documento ou tipo de documento. Para encurtar. Nós colamos da seguinte forma. Esse tipo de documento deve ser inserido na parte superior da página da Web antes de qualquer outra coisa. Tudo isso realmente faz é basicamente dizer ao navegador que esta página é um documento HTML. Em seguida, vamos criar outro elemento HTML chamado Bem, html. Esta tomada vai conter todo o nosso e-mail hte que temos em nossa página, então precisamos tomar o nosso elemento H existente e envolvê-lo dentro do elemento HTML. Observe como há um pouco de uma intenção para cada um dos elementos. Isso é chamado Nestea, e é usado para nos ajudar a dizer quais elementos estão aninhados um no outro. Você vai começar a ver como isso é útil uma vez que começamos a adicionar mais código na nossa página web. Em seguida, eu vou adicionar o que é chamado de elemento principal para a nossa página web. Nossa tomada de cabeça irá conter elementos que adicionam estrutura à nossa página web, mas geralmente não são visíveis na própria página Web. Isso também é chamado Mehta Information. Depois de tomar adiante, eu vou adicionar um corpo tomar uma ondulação o corpo vai conter a grande maioria sobre o conteúdo de sites. Eu também vou pegar o nosso cada um mais uma vez em aninhado dentro do nosso elemento corpo, bem como nosso elemento HTML. Tudo bem, agora vamos criar um título para um site. Nosso título é feito informação, então ele vai dentro do elemento cabeça. Podemos usar o elemento título para declarar o nome do nosso site. Eu vou ir em frente e digitar apenas um nome aleatório aqui apenas por agora. título dos nossos sites foi exibido na parte superior do seu navegador ou guia que você abriu. A última coisa que vamos fazer nesta lição é adicionar o conjunto de caracteres para a nossa página web. Nós também inserimos esse insight. Nosso porco chefe aqui é o código que vamos precisar. Você não precisa realmente memorizar este trimestre. Qualquer coisa. Mas o que este código faz é ajudar para o navegador da Web processo informante R h parecer uma página web. Não, vamos salvar nossa página e ver como fica. Você também pode pressionar o controle C nas janelas para ver o documento rapidamente. Como podemos ver, título dos nossos sites está sendo exibido no topo, e isso é praticamente todas as mudanças visíveis que fizemos até agora. Na próxima lição, seremos mais estrutura para a nossa página web com contêineres de conteúdo. 7. Containers de conteúdo em HTML: Vou começar por entrar no nosso corpo e adicionar um elemento de cabeçalho. O cabeçalho é a parte superior do nosso site, então eu também vou colocar o nosso cada um que criamos o seu mais cedo também. Por baixo estão tomadas de cabeçalho. Eu vou adicionar uma seção take e um pé ou tomar bem depois disso. Então vamos rever estas três novas tomadas que acabei de adicionar ou em que página? A etiqueta de cabeçalho é diferente da nossa cabeça Take. Muita gente faz Thies provar. Confundir nossas vistas Título e navegação é geralmente mantido aqui. Dentro do cabeçalho tomar também. A tomada de seção pode ser usada para dividir a página em diferentes seções em nossas seções. Tomar eu vou adicionar um novo elemento chamado elemento parágrafo. Este momento de parágrafo levará qualquer texto que você digita à vista dele e o transformará em um parágrafo. Eu só vou colocar algumas verificações aleatórias aqui que podemos mais tarde mudar para um portfólio e bloquear posts mais tarde. Mas eu só quero dar um exemplo de como o elemento de parágrafo funciona com HTML. O elemento de rodapé é semelhante ao elemento de cabeçalho, exceto que ele está na parte inferior de sua página web. Colocaremos nossas informações de direitos autorais, bem como outros links para nossas plataformas de mídia social no rodapé para nosso cliente. Vamos adicionar um parágrafo no rodapé tomar bem que nós contêm nossos sites. Informações sobre direitos autorais. Você pode notar que alguns caracteres que você deseja exibir em um site não podem ser digitados no teclado. Podemos usar entidades HTML para representar esses caracteres. Por exemplo, o símbolo de direitos autorais pode ser exibido em um site digitando a seguinte entidade HTML . Memorizar entidades HTM Oh não é recomendado como ele subiu usando-os com muita frequência. Sempre que você precisar descobrir uma das entidades HTML, você sempre pode pesquisar no Google para encontrar uma referência. Eu também fui em frente e vinculado a uma folha de referência também. Na seção de arquivos externos deste curso, se você precisar se referir a ele agora, adicionamos um monte de novos códigos em elementos HTML ao nosso site. Vamos salvar suas páginas e ver como ele fica no navegador. Até agora, observe que enquanto olhamos para a nossa página web. Os elementos são exibidos um após o outro. É assim que os navegadores exibem elementos HTML. Agora, o Page parece um pouco vazio, mas não se preocupe. Você está tendo um bom começo. Nós usaremos CSS mais tarde no curso para adicionar muito mais estilo e cor às nossas páginas da Web . 8. Como criar nossos sites: na última seção do curso. Criamos a estrutura básica do nosso site com HTML. Agora é hora de começar a adicionar conteúdo ao nosso site. Vamos começar projetando a navegação para o nosso site A navegação de sites. Nós geralmente consistem de um título ou logotipo que liga para a página inicial e links para outras páginas importantes da Web no site também. Então, vamos começar fazendo o link do título do nosso site de volta para a página inicial do nosso site. Eu vou estar adicionando um novo elemento aqui chamado um elemento âncora. Eu vou, em seguida, embrulhar o meu cada um à vista são recém-criado elemento âncora em um atributo aqui com o índice de texto html. O que estamos fazendo aqui é ancorar nosso índice L a K html para o texto de seu H um elemento índice dot html é geralmente uma página inicial de um site e também o nome deste arquivo . Quando criamos as outras páginas para um site, vamos inserir seus nomes como atributos também. Por enquanto, basta ficar comigo e você vai ver como ele funciona mais claramente à medida que desenvolvemos nosso site, a navegação para um site é comumente criado com uma lista. A primeira coisa que vamos fazer é em um novo momento para nossa navegação dentro de nosso cabeçalho . O que eu vou fazer agora é nos nossos links como um nordeste. Isso adicionará nossos links em um formulário com marcadores , como no Microsoft Word. O que você vai levar aqui representa uma lista não ordenada. Em seguida, vamos adicionar nossas outras páginas como itens de lista. Insider na lista de pedidos. O L que tomo representa o item da lista. Primeiro, vamos começar com a nossa página sobre e, em seguida, fazer um horário de lista para todas as outras páginas que criaremos mais tarde para o nosso site. Eu vou começar colocando um elemento âncora com seu ref H e ele está olhando para a nossa página sobre dot html, que nós não criamos ainda. Também precisamos adicionar texto para exibir como seu item de lista. Então eu vou digitar por aqui. Uma vez concluído, vamos ter que copiar este pedaço de código aqui, e vamos apenas colá-lo para outras páginas e, em seguida, fazer algumas pequenas alterações para refletir essas páginas. Então é Copie isso e cole algumas vezes aqui. Então vamos mudar isso para a nossa página de bloqueio. Nós também vamos mudar isso para a nossa página de contato, e precisamos adicionar mais um aqui, e isso vai ser para a página do portfólio depois que você alterar o texto que está sendo exibido para cada item da lista, nós temos que alterar o HTML páginas. Agora, ainda não criamos essas páginas, mas vou adicioná-las aqui porque é assim que vamos nomear essas páginas mais tarde à medida que as criamos agora, antes de prosseguirmos, vamos dar-lhe o pêssego um cofre rápido e ver como tudo parece no navegador da Web. Tudo bem, legal. título do nosso site agora vincula a nossa página inicial html index dot. Temos a nossa lista ainda com o nome de cada uma das páginas do nosso site. Claro, se clicarmos neles, eles não estão funcionando agora porque não adicionamos ou páginas. Mas uma vez que entramos em quais páginas em nosso site, tudo funcionará corretamente. Antes de irmos. No entanto, notei que o link da minha página inicial não está funcionando, e isso é porque estamos vinculando para induzir indexado em cada equipe Ail aqui. Mas, infelizmente, no topo aqui, nós realmente temos o nosso índice dot html dot e-mail envelhecido. Então temos o nosso nome incorreto aqui. Então eu vou ir em frente e corrigir isso, e então nossos links devem estar funcionando corretamente. Certo, então um passado de cinco anos deve estar correto. Agora, agora está se abrindo, e , sim, podemos ver que agora está realmente voltando para a mesma página, então não parece que nada está acontecendo, mas nós estamos realmente voltando para a página ou visualizando no momento. Então, de novo , nosso título está se ligando corretamente, e nós temos tudo planejado. Bom trabalho. Fizemos um trabalho sólido com nossa navegação no site, e estamos prontos para seguir em frente e começar a trabalhar em nossa página de portfólio. 9. Como criar nossa página de portfólio: Nós terminamos de construir nossa navegação por enquanto, mas é hora de criar o conteúdo para nossa página de portfólio. Estruturaremos nossa galeria de imagens semelhante à nossa navegação com um A Nordeste. Nós estamos indo para criar o nosso portfólio no elemento seção da nossa página para são bloqueados página em sobre Paige e página de contato. Vamos usar este elemento seção para outra coisa. Então vamos em frente e excluir o parágrafo que criamos anteriormente no lugar dele com uma lista de pedidos da ONU com um único item de lista. Por enquanto, antes de avançarmos, é importante que você veja os arquivos para esta palestra do curso. Lá você encontrará os arquivos de imagem para a nossa página de portfólio. Se você não colocar a pasta de imagem na mesma pasta que seu documento HTML cada dia que são imagens não foram exibidas corretamente, eu fui em frente e encontrei alguns exemplos. Quero dizer, apenas online que podemos usar como se fossem imagens que o nosso cliente nos deu. Então vamos adicionar nossa primeira imagem à nossa página web. Vou abrir o nosso primeiro item da lista aqui e escrever uma imagem Take. Eu vou então adicionar um atributo fonte a esta tomada, e dentro desses atributos, eu vou colocar o caminho para a nossa primeira imagem que queremos exibir no aviso de página. Incluo a pasta Imagem e o nome e extensão do arquivo de imagem Estamos pegando isso tudo precisa estar correto. Caso contrário, nossa imagem ou não carrega corretamente. Eu também vou ir em frente e adicionar uma tomada de tudo no final de sua imagem que significa texto alternativo. Se, por qualquer motivo, a imagem não for exibida, o texto inteiro será exibido em seu local. Na verdade, vou deixar o texto antigo em branco só por enquanto. Isso pode não fazer muito sentido agora, mas à medida que você trabalha com imagens, você ficará melhor em adicioná-las às suas páginas da Web e trabalhar com a sintaxe. Agora, antes de terminarmos, vamos salvar um arquivo e ver como ele se parece. Vamos ver se a imagem dela está sendo exibida corretamente em uma página da Web. Lá vamos nós imagens em nossa página web. Agora é hora de voltar em anúncios ou outras imagens para o nosso portfólio, e mais tarde podemos realmente corrigir essas imagens, porque agora isso é muito grande para caber em nossa página 10. Como adicionar imagens à nossa página de portfólio: neste vídeo, nós vamos terminar de adicionar o resto de nossas imagens ao nosso portfólio, bem como alterar algumas das informações em nosso site, porque nós vamos mudar o tamanho de suas imagens mais tarde para ser muito menor para caber na tela. Queremos que nossos visitantes possam clicar na imagem e ver o tamanho completo se quiserem . Podemos fazer isso escondendo uma âncora, omitir nossa imagem e vinculando diretamente a essa imagem. Portanto, se o usuário clicar em qualquer lugar na imagem a partir da página da Web, ele poderá ver o tamanho total da imagem se escolher. Então vamos começar escondendo nosso presságio de âncora aqui. E eu vou copiar o caminho do arquivo para a nossa imagem e usar isso como link. Então, novamente, quando a pessoa clica nele, ele irá diretamente para a imagem. E eu vou fechar o momento acres logo depois da nossa lista aqui. Então este é o código padrão que teremos para cada imagem aqui. Então agora que nossa imagem está completa e tudo o que precisamos fazer é copiar nosso item da lista aqui e repeti-lo para todas as outras imagens que vamos adicionar à nossa página sobre. Então vamos em frente no ritmo que aqui. Lembre-se de alterar os caminhos dos arquivos, acordo com a imagem que você deseja exibir. Caso contrário, você foi exibida a imagem errada. Quero dizer, isto é muito fácil aqui e esconder o número da imagem das imagens. Uma imagem para a qual três. Imagem quatro e imagem cinco. Então é muito mais fácil de fazer. Lembre-se de alterar os dois caminhos de arquivo para a fonte quando as pessoas clicarem nela, bem como as imagens que estão sendo exibidas. Assim que terminarmos conosco, podemos salvar nossa página e verificar se nossas imagens estão sendo exibidas corretamente. Então vamos em frente e fazer isso agora. Eu também vou verificar novamente nossos caminhos de arquivo apenas para ter certeza que eu tenho eles corretamente. Parece que isto deve ser bom para ir. Então, sim, podemos ver que nossas imagens estão sendo exibidas aqui corretamente. Além disso, se clicarmos em qualquer aviso de imagem que foram levados diretamente para essa imagem e uma janela recém-aberta , ótimo trabalho. Da próxima vez vamos aprender como construir o rodapé do nosso site 11. Como construir nosso Footer: Tudo bem, então nós adicionamos nossos sites. navegação fez nosso portfólio rolar. Agora é hora de trabalhar no rodapé com nosso rodapé. Vamos adicionar alguns links para nossas plataformas sociais online. Assumindo que nosso cliente os tenha aqui, vamos adicionar um Twitter, Facebook e Google. Além disso, também vamos adicionar algumas outras coisas ao nosso rodapé à medida que vamos. Mas, por enquanto, vamos começar com isso. Certifique-se de dizer-lhe os arquivos para esta palestra para que você possa usar os ícones de mídia social que eu forneci. Sinta-se livre para usar o seu próprio, se quiser, apenas para um pouco de prática também. Vamos começar escolhendo até seu rodapé e digitando o elemento de imagem para adicionar nosso primeiro ícone. Nosso arquivo de origem para esta imagem será o nome do arquivo de ícone do Twitter. Não se esqueça da extensão também. No nosso caso, esses conjuntos de ícones são arquivos PNG para o texto alternativo. Eu também entro no tipo Twitter também. Quando isso estiver completo, vou economizar algum tempo copiando toda essa linha de código e colando em outras vezes para nossos outros ícones de mídia social. Esta é uma correção muito fácil e tudo o que precisamos fazer é mudar o caminho do arquivo, bem como o texto alternativo para refletir qualquer ícone que estamos mostrando. Então eu fui para ir em frente aqui e vamos começar com o 2º 1 Excluir a parte do Twitter aqui e vamos adicionar Facebook. E então também vamos mudar o texto alternativo para refletir o Facebook. E o nosso último será o Google Plus e acredito que digitei o Google Plus assim. Tudo bem, então nossas imagens são exibidas e a última coisa que precisamos fazer é vincular ícones para seus sites correspondentes porque seu cliente não existe de fato. Eu só vou ligar para a página inicial do site em vez disso. Então vamos criar o nosso elemento âncora antes da nossa imagem e fechá-lo depois que a nossa imagem são um verdadeiro valor, vai estar vinculando para os sites home page caseiros que estamos ligando para. Então o ícone do Twitter vai ligar para a página inicial do twitter dot com, e o ícone do Facebook vai ligar para a página inicial do Facebook. E, claro, o ícone do Google Plus será vinculado à página inicial do Google Plus. Uma vez que terminamos aqui, podemos salvar nossa página web e ver como ela fica por algum motivo ou ícones ou não exibindo. Portanto, deve haver um erro no nosso código Summer. Vamos voltar ao nosso arquivo e ver se conseguimos ver o ar. Oh, eu posso ver onde ele está. Esquecemos de adicionar a tomada de fechamento após nosso link para nosso nome de domínio para o qual estávamos vinculando. Então podemos fechar isto aqui e dar-lhe um cofre e isto deve resolver o problema. Lá vamos nós. Agora podemos ver que nossas imagens estão sendo exibidas corretamente e funcionando. Dê um tapinha nas costas. Agora você está começando a chegar a algum lugar com a criação de seu site. Também podemos dar um clique a essas imagens e ver se elas estão se vinculando ao site correto. Vês os do Twitter a funcionar? Nosso ícone do Facebook também está funcionando, e nosso Google Plus também Rex. Quando você pode clicar nele na próxima seção do curso, você começará a aprender tudo sobre CSS. Estou ansioso para vê-lo lá 12. Introduçãoao CSs: por enquanto, vamos olhar para a primeira maneira que poderíamos adicionar CSS à nossa página web. Podemos fazer isso com o porco estilo. Devemos colocar o estilo take dentro de nosso elemento cabeça. Este é o lugar onde todo o nosso CSS deve ir. Vamos criar nossa primeira regra CSS. Vou datilografar e depois analisaremos. Ok? Pode adivinhar o que isso pode fazer? Primeiro, temos o nosso seletor CSS, que está selecionando o elemento cabeçalho de HTML. Um documento que você está dizendo ao nosso navegador para alterar todos os textos encontrados dentro do cabeçalho para ser azul com esta propriedade de cor bem aqui. Vamos dar a ficha dela e ver o que acontece. Certo, podemos ver aqui que não temos nenhum texto na página dela no cabeçalho. Temos alguns links, mas links ou estilo diferente do texto. Então eu vou ter que fazer aqui voltou para o nosso cabeçalho em nosso html. E eu vou adicionar um pequeno elemento de parágrafo apenas para adicionar algum texto à nossa página dentro do elemento de cabeçalho. Atualize a página. Lá vamos nós. Podemos ver que temos algumas mensagens de texto para a cabeça dela como romana, e é automaticamente estilizado para ser azul. Bastante arrumado. Agora lembre-se o que eu mencionei anteriormente sobre a natureza em cascata do CSS? Então, se eu voltar para o nosso CSS e adicionar exatamente a mesma regra CSS que a que temos atualmente . Mas digamos que mudei o texto para Verde. O que você acha que vai acontecer com um texto? Ser azul ou verde? Vamos tentar e ver o que acontece. Como podemos ver o Texas realmente verde porque a última regra sempre substituirá quaisquer regras anteriores dentro dos mesmos seletores exatamente. Isso leva um pouco de tempo para se acostumar, mas vamos realmente usá-lo para nossa vantagem mais tarde. À medida que construímos nosso site antes de seguirmos em frente, há algumas coisas sobre o nosso rel CSS que eu quero apontar para cima. A primeira palavra aqui é o nosso seletor. Ele tem como alvo o elemento que queremos estilizar aqui. Então temos nossas chaves que conterão nosso código CSS real. Finalmente, no final de cada instrução CSS, tínhamos um ponto-e-vírgula como ele trabalhava mais com CSS. A sintaxe se tornará uma segunda natureza em pouco tempo antes de terminarmos com esta lição. Vamos tentar mais algumas regras em CSS para que você possa aprender algumas novas maneiras de estilizar suas páginas da Web, Isso é o que vamos apenas obter alguma boa prática antiquada. Vamos criar outra propriedade CSS. Desta vez eu vou mudar a fonte do meu elemento H um. Então começamos declarando o seletor cada um, e eu vou digitar uma nova propriedade CSS chamada tamanho da fonte. A propriedade tamanho da fonte irá alterar o tamanho da fonte do seletor que você está selecionando neste caso, ou cada tamanho de fonte será alterado. Então, novamente, aqui temos nosso seletor, que é seu elemento H um. Em seguida, temos o nosso tamanho de fonte propriedade CSS. Então temos o tamanho real do telefone em pixels. Quanto maior fizermos esse número, maior será o nosso texto em uma página da Web. No nosso caso, o nosso Texas vai parecer muito grande. Vamos salvar o arquivo e ver o que acontece como podemos ver agora, nosso texto aumentou de tamanho. Tenha em mente que, uma vez que estamos direcionando cada um dos nossos elementos, se você fosse voltar em nosso html e Target ou criar outro elemento cada um. Esse elemento também teria um texto muito grande. Nosso código aqui tem como alvo todos CSS h um elementos sob a página e foi estilizado eles em conformidade. Então vamos para um código. E eu vou apenas copiar ou codificar aqui em paz novamente para mostrar um exemplo. Se criarmos outra idade um elemento em sua página, eu vou salvá-lo aqui, em seguida, voltar na visualização são o que página podemos ver que o novo H um elemento está dando exatamente o mesmo estilo. Além disso, tenha em mente que também podemos ser um pouco mais precisos com nossos seletores, por exemplo, como um tipo Petr H um que em vez de alvos todos os de nossa página e estilizá-los com nosso código, ele só irá aplicar esses mostradores para H um elementos que são encontrados dentro do elemento de cabeçalho de sua página. Então eu vou voltar para o meu código aqui, quem quer que cada um de mais cedo, e realmente movê-lo para fora do cabeçalho para que nós vamos encontrar o final de sua tomada de cabeçalho aqui. Vamos colar em nosso código E por último, mas não menos importante, nós realmente temos que criar nossa regra que irá direcionar nosso cabeçalho cada um deles. Então vamos entrar em uma dessas regras aqui e isso é apenas tipo cabeçalho antes de cada um. Agora o que estamos dizendo é, vamos atacar Onley cada um deles que são encontrados dentro de seu cabeçalho. Se atualizarmos a página, podemos ver que nosso primeiro cada um aqui é muito grande, mas nosso segundo cada um, é não ter nosso estilo. Este é o poder do CSS. Mas espere, ainda há muito mais que podemos fazer, especialmente com CSS. Quando você sentir que está pronto, vamos seguir em frente com o curso e eu vou te ver na próxima palestra. 13. CSS externo e interno: Então vamos pegar nosso estilo que criamos anteriormente e cortá-lo. E o que eu vou fazer agora é criar uma nova pasta chamada CSS, Fazer um novo arquivo word e dar-lhe o nome CSS, bem como o ponto de extensão CSS. Podemos ir em frente e excluir esta pasta antiga, já que não precisamos mais dela. E vamos abrir o nosso novo arquivo CSS pasta são casaco velho dentro e salvá-lo Por enquanto, Eu notei que como eu abri meu arquivo CSS que temos essas duas abas aparecem que nenhum pad nos permite editar ambos os arquivos realmente facilmente. Então eu colo meu código CSS aqui, e eu vou dar-lhe um cofre rápido. O último passo é vincular nosso arquivo CSS recém-criado ao nosso documento HTML. Vamos abrir o documento HTML dela e dentro da etiqueta principal, vou escrever o seguinte casaco. O que estamos fazendo aqui é vincular nosso arquivo CSS ao nosso documento HTML. Certifique-se de obter o nome de caminho de arquivo correto ou então ele não funcionará. O que estamos fazendo aqui é que estamos ligando uma folha de estilo relativa e no oito suspiros temos nossa pasta CSS são o nome do arquivo CSS e, em seguida, nossa extensão CSS dot. Digamos que ambos os arquivos e abrir uma página da Web e um navegador para ver se isso funciona incrível. Podemos ver que nossos estilos CSS ainda estão sendo aplicados à nossa página web. Isso significa que nossa folha de estilos CSS externa está funcionando corretamente. Agora vamos nos livrar do CSS por enquanto, já que não precisamos mais dele. Além disso, se salvarmos nosso novo arquivo, podemos ver que nossos estilos CSS não estão mais sendo aplicados à nossa página web. Agora, antes de terminar esta lição, vou ligar para outro arquivo CSS chamado CSS de ponto normalizado. Para conseguir que isso caia, você vai sair para ir online e seguir por aqui. Como eu peguei este arquivo CSS, eu vou para o Google. Vou digitar CSS normalizar ponto ou simplesmente normalizar. O primeiro resultado aqui é o que você quer e você só vai querer baixar a versão mais recente aqui para que possamos apenas clicar, baixar e em seguida podemos copiar todo esse texto aqui. Ele vai dar-lhe uma cópia rápida aqui e, em seguida, nós precisamos realmente criar um novo arquivo, dar-lhe o nome normalizado dot CSS e, em seguida, colar I código que acabamos de copiar dentro desse arquivo normalizar ponto CSS é alguma formatação CSS básica criada por alguns realmente inteligente on-line que ajuda renderiza alguns elementos consistentemente em todas as rosas web. Então seu site vai ficar melhor em sistemas diferentes e nos dizer que eu recomendo que você jogá-lo em todos os seus projetos apenas por precaução, porque ele faz uma diferença realmente grande. Tudo bem, então vamos dar um cofre rápido e eu acho que normaliza muito bom para ir. Você não precisa editar nenhum código, basta colá-lo lá, basta colá-lo lá, e agora precisamos vincular a ele a partir de nossa folha de pessoal HTML. Podemos copiar o frio que criamos mais cedo porque é praticamente o mesmo. A única coisa que precisamos mudar é o caminho do arquivo, que seria o CSS normalizado porque colamos normalizado fora sucesso pasta CSS interna . Nós já estamos chamando a pasta CSS e, em seguida, nós normalizou-nos para avaliar a sua apenas dar-lhe um cofre rápido e tudo deve ser bom para ir 14. O que são seletores de ID: A primeira coisa que vamos fazer nesta lição é criado elemento chamado de diff . Vamos usar esta div para ajudar a envolver a parte principal do nosso conteúdo. Como você trabalha com dibs, você os entende ainda mais Por enquanto, basta pensar nisso como uma caixa que organiza o conteúdo dos nossos sites. Nós vamos criar o nosso primeiro fez entre a nossa seção e elemento de cabeçalho e fechá-lo entre o nosso rodapé e corpos fechando tomadas. Como nosso conteúdo HTML aqui está dentro do nosso recém-criativo, precisamos inventar nosso código. Nós podemos apenas selecionar este bloco inteiro de código aqui e recuado tudo de uma vez pressionando a tecla tab porque nós vamos estar criando lotes de fez leva em nosso código HTML. Nós podemos realmente atribuir i ds únicos para nossos mergulhos para separá-los um do outro. Podemos fazer isso adicionando um atributo a um culto diff e eu d e então nós damos que eu d o nome. Uma vez que esta div vai ser o wrapper para um site que realmente o chamou de rapper. Agora, a coisa legal com dibs é que nós também podemos selecioná-los como um seletor em nosso CSS. Para fazer isso, podemos digitar o seguinte e nosso código CSS. Primeiro, vamos começar selecionando nosso nome de rapper, vamos adicionar ou chaves. E, em seguida, dentro dessas raças claramente, eu vou criar uma nova propriedade CSS chamada text Alinhar com este texto align propriedade faz é nos permitir mudar nosso texto em nossa página ou dentro do nosso elemento. No nosso caso, vamos alinhar as nossas mensagens no centro. Então, se salvarmos sua página e, em seguida, ir ver nosso site, todo o conteúdo dentro de nossa tomada wrapper deve ser centrado em sua página. Vamos fazer isso agora mesmo. Tudo bem? Podemos ver que nosso conteúdo agora está centrado na página. Agora que pré muito mostra como trabalhar com dibs e I ds no próximo vídeo, você vai trabalhar na centralização do nosso wrapper em uma questão mais eficaz 15. Como Centrar nossos sites: no último vídeo, você aprendeu a usar o I DS para criar dibs para separar seu conteúdo. Em HTML, você também aprendeu como segmentar ideias de estilo em CSS. Nesta lição, vamos criar incentivos ou wrapper para um site. Vamos começar. Vamos começar com a adição de um pouco de estilo básico ao nosso invólucro. Vou digitar algumas propriedades e valores CSS, e depois vamos percorrer e explicar o que cada um deles faz. Então aqui temos um máximo com 940 pixels e uma margem de zero e auto. A primeira propriedade que temos aqui é Max, com o que isso faz é dizer ao nosso Div que o conteúdo não pode crescer maior do que 940 pixels , mas kang ou menor, dependendo do que a resolução dos navegadores ist. Por exemplo, se salvarmos nossa página e eu redimensionar a janela, notei que um rapper se ajusta com base na tela. Também notei que, uma vez que atingimos 940 pixels, o conteúdo não muda de tamanho. Isto é por causa do nosso máximo com propriedade. Nossa propriedade margem será apenas o espaçamento para o nosso elemento wrapper. A margem é o espaço em torno de um elemento. O primeiro valor define a margem no topo. O segundo define o valor à direita. O terceiro define o valor na parte inferior e, por último, a margem à esquerda Tente pensar nisso como um relógio. Então aqui estamos dizendo que você quer que a margem na parte superior e inferior seja zero, e as margens à esquerda e à direita sejam definidas como auto, o valor automático irá preencher qualquer espaço vazio no lado esquerdo ou direito do diff. Isso pode ser um pouco confuso para entender no início, mas à medida que você colocar mais sites, você entenderá como as margens funcionam. Enquanto isso, vamos ter um visual sobre como esse código afeta nossa página da Web. Vamos adicionar uma propriedade de cor de fundo para estilizar o fundo de sua morte. Vamos salvar a página e dar uma olhada Primeiro, vamos fazer um navegador pequeno, como a forma como ele ficaria em um dispositivo móvel, podemos ver que estão mergulhados, ocupa toda a página. À medida que aumentamos o tamanho do nosso navegador, nossas margens se ajustam automaticamente e centralizam o rapper. Observe que uma vez que atingimos mais de 940 pixels são margens. Adicionar voz branca extra desde que dissemos um rapper para ir não maior que 940 pixels. Observe também que algumas de suas imagens são um pouco grandes demais, furtivas, então elas estão saindo um pouco, mas vamos em frente e corrigir isso mais tarde. Um problema que notei um pouco mais cedo é que, em telas menores, nosso texto está um pouco próximo demais dos lados da tela. O que precisamos fazer. É um pouco de estofamento para um rapper. Lembra como usamos margens para adicionar espaço ao redor do lado de fora do nosso elemento? Bem, podemos usar o preenchimento para o espaço do anúncio no interior de um elemento também. É assim que digitamos o código, assim como com margens estão batendo funciona em uma matéria certa relógio. Então aqui estamos basicamente dizendo zero tapinhas na parte superior e inferior, mas em 5% para o lado esquerdo e direito para a tela. Então 5% do total com outro rapper será aplicado como espaçamento dentro do elemento no lado esquerdo e direito novamente. Vamos salvá-lo e obter uma visão visual do que mudou. Ali. Podemos ver no lado esquerdo e no lado direito. Temos algum espaçamento antes de texto e ícones. Uma boa maneira de lembrar A diferença entre margem e Patty é que a margem é o exterior e o preenchimento é o interior s. Você cria mais sites e uma vez que começamos a olhar para projetar sites que são móveis amigáveis, você vai notar por que isso é muito importante para referência. Também anexou alguma margem em diagramas panorâmicos. Para lhe dar uma melhor compreensão, as propriedades CSS funcionam com elementos. 16. Vamos fazer uma abordagem de mobilidade: é importante que adotemos uma primeira abordagem móvel quando você constrói nossos sites. A razão é porque é muito mais fácil pegar um site móvel e expandi-lo para uma versão desktop em vez de pegar uma versão desktop e transformá-lo em um site móvel. Isso também é bom para você porque sites móveis são mais fáceis de construir e eles são um must have. Cada site precisa ser compatível com dispositivos móveis, já que mais de 50% das pessoas visualizam a Web a partir de algum tipo de dispositivo móvel. Projetar sites móveis é tudo sobre simplicidade e facilidade de uso. Depois de concluir seu site móvel, você pode começar a trabalhar em recursos mais complexos para uma versão desktop. Agora vamos voltar ao código dela e começar a fazer a versão móvel do nosso site. Podemos nos livrar de nossos antecedentes. Já que não precisamos mais dele, vou realmente trabalhar na seção de logotipo e cabeçalho de nossos sites. Uma vez que a nossa versão desktop terá um logotipo, vamos em frente e usar um elemento H dois para adicionar um subtítulo ao nosso site. Agora vamos embrulhar nossos dois títulos em um I D chamado logotipo. Também vou deletar nosso elemento parágrafo já que não precisamos mais disso. Nós também precisamos ter certeza de que nosso elemento DIV irá cobrir nosso H um N R. H dois, bem como o elemento âncora. Agora vamos para o nosso CSS e criar uma nova declaração para o nosso logotipo recém-criado. Idee. Vou ao centro, alinhar nosso texto e dar-lhe uma margem de zero. Por enquanto, a fim de alinhar nosso texto, vamos usar a propriedade que aprendemos antes chamada Alinhar texto e dar-lhe o valor de centro. Se formos em frente e saborear Page, nosso fundo vai ser ido em seu texto deve ser bem centrado em nossa página. Lá vamos nós, nosso Texas bem centrado como é em uma armação de arame. Vamos voltar e fazer isso para uma navegação mais tarde. Ótimo trabalho. Você aprendeu algumas características básicas do CSS. Depois de fazer um teste rápido, você estará pronto para passar para a próxima seção do curso, que funciona em mais estilo e trabalhar com CSS em nosso site 17. Como criar nosso site com algumas cores: nesta lição, você aprenderá como adicionar alguma cor às suas páginas da Web. Vamos começar instalando links de nossos sites. Vou apontar o nosso elemento âncora aqui e criar duas declarações separadas. O 1º 1 vai estilizar todos os links em nossa página que ar não visitado e a segunda decoração com estilo visitado links exatamente a mesma cor. Agora, você pode estar perguntando, qual é esse número? Bem, esse número é chamado de cor hexadecimal, o que basicamente significa que este código hexadecimal representa uma cor avermelhada rosada e quente . Se você Google códigos de cores hexadecimais, você pode realmente olhar para todas as cores diferentes. Então você confinou com códigos decimais hexi. Você também pode procurar palavras-chave de cor html e usá-las em seu site para referência. Estou incluído links para cores hexadecimais e curadas na seção de links externos deste curso neste site de exemplo. Você pode ver que podemos escolher nossas cores aqui e à direita. Eles listaram todos os códigos hexadecimais diferentes que podemos usar para limpar links ou quaisquer outros elementos em uma página que desejamos voltar para o nosso site. No entanto, este código era links de estilo em um bloco, esta cor avermelhada rosada. Mas vamos mudar isso em alguns minutos. De qualquer forma, vamos salvar e ver como estão nossos links. Você vai parecer bem? Podemos ver que eles são um tipo avermelhado de cor avermelhada. Mas o problema é, nós não queremos que nossos links de cabeçalho esta cor, então nós realmente precisamos mudar isso. Vamos voltar para o código de nossos sites e vamos criar uma nova declaração CSS para o nosso cabeçalho um take. Vamos dar aos links sobre cada um uma cor acinzentada. Eu também preciso fazer isso para o companheiro H dois também, porque queremos que nossos outros links para sites permaneçam esta cor mais vermelha. Nós, na verdade, o alvo do nosso logotipo idéia e visamos os links que ar dentro do nosso logotipo I D. Então, o que esse código vai fazer? Bem, faça os links dentro do nosso logotipo I d cor acinzentada, mas mantenha todos os outros links em nosso site lidos. Vamos dar para salvar e refrescar. Veja como parece. Tudo bem, lá vamos nós, os dois primeiros cada um com idade dois que estão dentro do nosso logotipo. Eu tinha agora esta cor acinzentada. Também estou percebendo que essas ligações interferem subjacentes. Na verdade, precisamos nos livrar disso. Então, para fazer isso, vamos ter que voltar e direcionar o cabeçalho e adicionar uma nova propriedade CSS. A propriedade que vamos usar é a propriedade de decoração tecnológica. A propriedade de decoração de texto permite-nos em ainda mais estilo dedo do pé são links todos preferem. No nosso caso, nós realmente queremos remover todo o estilo para que possamos colocar nenhum aqui. Isso se livrará do subjacente em seus links e nosso cabeçalho de sites. Vamos dar nossas páginas seguras e ver se está funcionando como você queria. Podemos ver aqui que são sublinhados. Ainda estamos aqui. Por que é isso? Oh, eu posso ver. E nossa tomada de cabeça. Esqueci de incluir o elemento âncora porque eles são cabeçalhos. Links são links reais. Precisamos de um alvo de ligações mais especificamente. Lá vamos nós. Agora o subjacente para novos links agora se foi. Tudo bem. Então o status do roupão começa a ganhar vida com alguma cor. Ainda temos muito trabalho a fazer. No entanto, e a próxima lição que você estava indo para aprender como podemos usar classes em CSS 18. O que são cursos em CSS: nesta lição, você aprenderá o que são as aulas e como podemos usá-las corretamente. Em CSS, a classe é muito semelhante a um I D. Exceto por uma grande diferença, e eu d só pode ser único e não pode ser repetido na mesma página. Uma aula, por outro lado, é um pouco mais flexível. Podemos ter quantas aulas quisermos em qualquer página. Vamos adicionar um pouco mais de estilo à nossa página web e vamos adicionar uma nova classe aos nossos links de navegação. Vou navegar até a nossa lista de pedidos da ONU e dar-lhe os links de navegação do nome da classe. Eu vou realmente aumentar o tamanho de todos os nossos itens de lista fonte ligeiramente. Nós também precisamos fechar nosso mergulho logo abaixo da nossa lista de pedidos da ONU bem aqui. Agora vamos para o nosso CSS e usar nossa classe recém-criada como um seletor. Eu também vou slick a propriedade do item da lista também. Tudo bem, então vamos usar uma nova propriedade CSS chamada tamanho da fonte. E o que a propriedade tamanho da fonte faz é controlar o tamanho da fonte de qualquer classe onde elemento que você estava direcionando neste caso, reiterando o tamanho da fonte de nossos links de navegação. Vamos salvar e abrir e ver o que acontece. Podemos ver aqui que, medida que mudamos nosso tamanho de fonte são encontrar mudanças em nossa página da Web. Quanto mais alto o número, maior o tamanho da fonte crianças. Selecionamos 18 pixels, o que está ligeiramente acima da média, então nossos lados dianteiros de nossos tempos de lista ficaram um pouco maiores aqui. Em seguida, vamos adicionar um efeito legal de pairar. Quando alguém passa o mouse sobre nossos links de navegação, vamos precisar direcionar nossos links de âncora da barra de navegação, e também vamos segmentar uma classe prosciutto chamada hover. Então, sempre que o mouse de alguém passa sobre os links de navegação em nossa barra naff, qualquer cor que colocamos aqui é clara em que os links foram transformados. Em seguida, vamos realmente adicionar uma cor. Eu vou adicionar uma cor um pouco mais escura do que o que são link padrão Cor é agora. Isto é como uma cor vermelha mais escura. Para encontrar esse assassino, no entanto, vou pegar nossa cor avermelhada padrão, e vou digitá-la no Google e tentar encontrar uma cor vermelha mais escura. Então eu vou pegar o código aqui, e então eu vou abrir meu navegador da Web e procurar o site que usamos mais cedo para encontrar nossa cor avermelhada padrão digitando cores hexadecimais. Tudo bem, então nós realmente colamos ou colorimos aqui e aqui nós poderíamos ver diferentes tons que podemos usar . Algo vai agarrar isto, colaborar aqui, encaixar este código hexadecimal e depois adicioná-lo ao nosso efeito de pairar. Uma vez que todos nós terminamos aqui, nós podemos salvar nossa página web. E vamos ver como tudo parece no navegador. Direita em. Parece que nosso texto aumentou de tamanho para ser um pouco maior e ter o máximo em nossos links. Uma cor avermelhada mais escura é aplicada. Eles estão parecendo muito bem até agora. Sabe, como você vê as aulas de avaliação? E você sabe a diferença entre uma classe e um I d. Quando você estiver pronto, vamos seguir em frente para aprender sobre como organizar seu CSS com comentários 19. Como adicionar comentários à seu CSS: Agora que nosso site está tentando realmente chegar a algum lugar, é importante que organizemos nosso código para que possamos navegar facilmente quando decidimos trabalhar em nosso site. Comentários são muito úteis porque eles nos permitem adicionar nota em nosso código e nos ajudar a organizar tudo um pouco melhor. Também é importante notar que um navegador da Web foram ignorar comentários quando ele processa seu casaco e site. Os visitantes não poderão ver seus comentários, a menos que a visualização do código-fonte do site também . Podemos começar um bloco de comentários digitando Ford Slash no símbolo de truques de bunda, e então fechamos o bloco com um símbolo gástrico e depois o Ford Slash. Qualquer coisa dentro deste bloco comum será ignorada pelo navegador da Web e sem pad. Além disso, podemos ver que virou tela. Vamos começar comentando o que algumas de nossas propriedades CSS fazem, bem como organizar o verão de um código para que você possa obter alguma prática, bem como ter uma referência para o que essas propriedades realmente fazem. Nós também vamos adicionar alguns comentários para organizar o logotipo do nosso site, um rapper ou rodapé e cabeçalho e algumas outras coisas também. Vamos entrar e fazer isso. Então aqui podemos organizar nossos estilos de link. Aqui você pega as cores do link. A maioria vai adicionar talvez algumas propriedades aqui também. Então vamos vincular cores e propriedades. Vamos também comentar essas cores e também apenas para que você saiba o que elas são quando você referi-las mais tarde. Então esta cor do link é clara de vermelho. Este logotipo é uma espécie de Ah, cor mais escura. A última coisa que vou fazer é mudar a cor dos nossos links aqui na barra Naff . E colocou uma cor vermelha mais escura aqui e isso deve ser bom por enquanto. Para nossos comentários em CSS, adicionaremos mais um pouco mais depois. À medida que você progride através deste curso. 20. Como adicionar fontes no nosso site e como ajustar o tamanho do texto: você aprendeu um pouco de CSS até este ponto, eu acho que é hora de adicionar um estilo de fonte ao nosso site, a fim de obter uma fonte para um site realmente vai ter que ir sobre os fundos do Google. Podemos procurar por uma fonte que gostamos, mas só para manter este vídeo curto, eu realmente vou ir em frente e pegar o 1º 1 que eu vejo que parece um pouco diferente. Já que estamos construindo um cabeleireiro Wallich, vamos procurar uma fonte moderna, uma que eu normalmente não escolheria, mas uma que tenha algum estilo. Vamos tentar este aqui. Este parece muito bom. Então vamos clicar e adicionar isso à nossa coleção. E eu também vou pegar uma frente de filhos abertos, bem como, que nós precisaríamos para o corpo de texto do nosso site e outros elementos diferentes foram styling. Assim que estivermos prontos para seguir em frente, podemos clicar no botão usar e temos nossos dois fundos aqui e você constrói qual você quer. Podemos clicar no normal ou em negrito para o script de dança, e então você vê músicas abertas tem muito mais opções, bem como, que todos que você quer que você selecioná-lo. E aqui temos o código que podemos realmente inserir em nosso site. Então nós temos o nosso Este é o nosso código HTML aqui, então realmente tem que copiar isso. Vá para o nosso HTML um site e na seção de cabeça iria apenas inseri-lo aqui porque isso está basicamente nos ligando para a fonte do Google. Então, depois disso, nós realmente temos que colocar o CSS para uma fonte. Podemos usar esta propriedade família fonte para estilo qualquer elemento que queremos com a fonte específica . Então, no caso do nosso título, nós realmente vamos estilo ou logotipo, eu acredito que com esta fonte aqui que eu vou usar e nós podemos apenas copiar e colar para ver, avaliar e apenas colocá-lo aqui assim, e deve ser Bom para ir. Então qualquer coisa em nosso local tem esse novo estilo de fundo novamente, eu vou copiar nosso comentário aqui, e eu vou apenas digitar fontes para são logotipo apenas para que nós sabemos para que esta fonte é usada e vamos realmente testá-lo e apenas ver se tudo é trabalhando. Então estamos nos dando segurança e abertura. E sim, podemos ver que nosso novo estilo de fonte estava sendo aplicado ao nosso logotipo. E também podemos ver que são outros elementos Não têm este novo estilo de fundo. Certifique-se de salvar cada página do Nemo e sua página CSS. Este é um erro comum que muitas pessoas cometem, incluindo eu mesmo. Quando eu comecei e podemos ver aqui na parte inferior novamente, é apenas uma diversão estilo padrão. Então nós temos que voltar para os fundos do Google e nós vamos realmente pegar os filhos abertos CSS encontrado aqui. Eu vou copiar isso, e nós vamos realmente adicionar isso ao nosso corpo para que todo o resto no documento tenha este estilo de fonte Salins aberto. Mas o que nós vamos ter que fazer é realmente vai ter que adicionar isso ao topo, já que se nós colocá-lo em nosso corpo, tomar isso vai fazer com que cada elemento em nossa página tenha isso aberto tão em estilo. Mas queremos que um logotipo tenha um estilo diferente. Então nós colocamos depois que nosso corpo tomar porque lembre-se da natureza em cascata do CSS. Então nossa família de fontes do logotipo vai substituir a família do fundo do corpo. Este é outro exemplo de como podemos usar o caixão ele natureza de CSS para beneficiar nossas páginas web. Então vamos dar um cofre rápido e ver como fica. Tudo bem, podemos ver que nosso estilo de fonte mudou. Então temos os filhos abertos diversão sendo atitude, tudo no corpo. E como nossa declaração do logotipo da Reform Family foi depois do nosso corpo tomar, temos nossos diferentes estilos sendo aplicados ao nosso logotipo. Em seguida, realmente vai mudar o nosso tamanho de um fundo H para 2.0 e m e GM é apenas como um pixel, exceto que ele é móvel responsivo. 1 da manhã é igual ao padrão atual de tamanho da fonte do dispositivo de visualização, que geralmente é de cerca de 16 pixels. Então, por que não usar apenas pixels? Bem, o problema dos pixels é que eles não mudam em dispositivos móveis. 16 pixels podem ser muito grandes ao definir o tamanho do nosso fundo para o EMS. São divertidos vai escalar dependendo de qual dispositivo está visualizando nosso site. Então isso para M é o mesmo que dizer 16 vezes também, mas é claro que isso para ele vai escalar em sua página. Então eu vou cortar esta seção de comentários aqui e eu vou escrever este ano. Só para sabermos, para referência, o que é igual a 1 da manhã. E, na verdade, vou mudar isso muito rapidamente. Aqui para ele não vai ser igual a 16 pixels é realmente igual a 32 pixels. Eu sei que isso é um pouco confuso, mas vamos abordar isso com mais detalhes quando chegarmos a testar nosso site para a capacidade de resposta móvel . Por enquanto, eu só tento usar E m se você puder, porque eles vão escalar e tornar seu site mais móvel, responsivo. Quando se trata do texto sendo exibido em seu site, eu também vou mudar o tamanho da fonte de nossos dois H e nossa propriedade logotipo. Então vamos copiar este código baseado e mudar isso cada 12 e h dois e vamos fazer o tamanho do texto apenas um pouco menor. Vamos lá. Algo ao longo das linhas de tamanho de fonte é igual a 1,25 PM, então vai ser um pouco maior do que o que normalmente cada texto seria, mas também vai ser um pouco menor do que ela. Cada um. Eu também vou adicionar um fundo, esperar para R H dois e eu vou procurar o normal porque, por padrão, os elementos de título têm uma frente saiu, negrito adicionado a eles. Então, se adicionarmos uma nota de rodapé normal, isso mudará a assinatura da idade também. E adicione mais ênfase em seu h um. Antes de terminarmos aqui, vou pegar nossa citação de comentários aqui, e vou organizar nossa navegação um pouco melhor. Vou adicionar uma seção de navegação aqui. Apenas para que nossos links de navegação e todos os que estão um pouco mais organizados em nosso código. Enquanto estamos aqui, vamos também criar uma nova propriedade Nath e vamos alinhar texto todo o elemento interNap texto a ser centralizado. Então este ou fazer a nossa navegação realmente centro na tela em vez de aparecer à esquerda e você verá que em um segundo quando eu salvei a página. E por último, mas não menos importante, vamos copiar são código comum aqui. E vamos criar uma seção para o nosso flitter. Dentro estão seção rodapé aqui. Vamos alvo são rodapé e vamos mais uma vez mudar o tamanho da fonte para 1,25 PM Isso vai fazer o texano ou rodapé apenas um pouco menor e também torná-lo móvel. Responsivo. Eu também vou mudar a cor do filtro de ar de texto. Então vou criar uma propriedade de cor. E o que vamos fazer é pegar esse tipo de tom escuro de cinza usamos no topo aqui, vamos estragar tudo e encontrar este ótimo leitor de cores. Então eu vou apenas copiar isso em e assim como nosso cabeçalho, nós estamos indo para texto, alinhar nosso texto e torná-lo enviado arised em nosso rodapé. Então eu acredito que terminamos aqui editando nosso CSS para esta lição. Vamos salvar nosso arquivo e ver como ele fica no navegador. Tudo bem, então podemos ver que são combatidos. Os tamanhos mudaram em nosso cabeçalho. Nós também resumimos tudo Nós podemos ver nossa navegação aqui agora no centro do nosso pager e se nós rolar para baixo para o nosso rodapé, podemos ver que são rodapé é agora tudo está no centro e nosso texto mudou um pouco lá também, então está parecendo muito bom. Nosso site está começando a se unir. Nós ainda temos um monte de trabalho, mas na próxima seção estará fazendo ainda mais styling para o nosso site. 21. Como estilizar nossa página de portfólio: Agora que terminamos com o estilo tipográfico de um site, é hora de seguir em frente agora. Nós cobrimos a maior parte do básico. É hora de fazer algum trabalho nas imagens que temos em nosso site. Agora, já que temos várias listas na página dela, devemos dar o portfólio dela. E eu quero ir em frente e dar a ele o portfólio de nomes. Agora que criamos um A D para um portfólio, podemos começar a estilizar nosso portfólio. Eu vou copiar nosso comentário CSS aqui, e eu vou fazer uma nova seção para o nosso portfólio styling. Está bem, Dokey. Então a primeira coisa que eu quero fazer é mudar os lados de nossas imagens a partir de agora , o caminho muito grande para que página? E não parece muito bom. Então, a fim de corrigir este problema de dimensionamento, mas vamos fazer é declarar um máximo com para imagens. Quando você dá a eles um máximo com de 100% nós usaríamos o seletor de imagem para direcionar todas as imagens em um site. Este máximo com propriedade irá dizer às nossas imagens que eles só podem ser tão grande quanto 100% do recipiente que eles Aaron. Se o contêiner encolher de tamanho, a imagem também diminui. Isso parece menor, mas pode ter um enorme impacto na capacidade de resposta do nosso site. A seguir, vamos fazer a nossa parte por ti. Primeiro de tudo, vamos nos livrar dos pontos feios que temos para cada item em nosso item de lista de portfólio. Podemos fazer isso com a propriedade menos estilo e selecionamos a porca. Isso vai se livrar desses pontos vermelhos ao lado de cada imagem. Em seguida, vamos segmentar um item de lista de galeria. Vamos dar-lhe um com de 95%. Vamos dar-lhe um com de 95% e vamos definir uma margem de 2,5% no lado esquerdo e direito de cada item. Isso fará com que nosso item da lista seja 95%. Com da página, os 5% extras serão aplicados ao lado esquerdo e direito de cada imagem. Mais tarde, éramos apenas um site Leo usando carreiras de mídia e a propriedade de fluxo. Mas lembre-se, por enquanto, ainda estamos trabalhando na versão móvel de um site. Vamos saborear o documento e ver como ele fica. Ok, podemos ver aqui que são imagens encolhidas um pouco de tamanho. Também podemos ver que esses pontos ainda estão aqui. Por alguma razão. Vamos voltar ao nosso código e ver se talvez cometemos um erro ou digitamos algo errado. Olhando para o nosso portfólio, achoque sei qual é o problema. Olhando para o nosso portfólio, acho Eu acho que nós acidentalmente nós colocamos um capitalize sobre ela i d Mas quando ele usou em nosso CSS, nós não capitalizamos ou CSS. Então precisamos fazer é mudar isso para um p minúsculo e deve funcionar como queremos. Vamos tentar isso e ver a direita. Lá vamos nós, nossas imagens lá agora 100% do rapper e nossos pequenos pontos ao lado de cada imagem agora se foram . Além disso, vamos fazer alguns testes aqui. Então você notou que, como uma diminuição do tamanho da nossa página aqui ou imagens escala com a página e nossas percentagens no site também escala também. Quando temos 5% de uma margem no lado esquerdo e direito de nossos itens de portfólio e como diminuímos os lados de um rapper, são imagens escala com os lados dele. Portanto, este é um passo muito importante para tornar o nosso site móvel responsivo. Uma coisa que eu vou fazer aqui muito rápido não vai adicionar uma margem ao topo de cada imagem com um pouco de espaço na versão móvel. Então, vamos adicionar 10 pixels aqui e vamos salvá-lo em seu transtorno novamente. Você vê aqui que lábios eu não queria fazer isso. Temos um pouco mais de espaço aqui. Podemos ajustar isso mais tarde, mas por enquanto parece muito bom. E, novamente, isso é muito importante para tornar um site móvel responsivo. 22. Como criar uma navegação horizontal: é hora de fazer algum trabalho em nossos sites e navegação. Nós também vamos fazer algumas outras correções rápidas. Por que estamos aqui primeiro. Vamos Target são naff na lista ordenada. Eu também vou para nós como a soneca e itens de lista ordenados também. Nesta propriedade, nós vamos dar a nossa lista itens tapting de zero. Eu também vou definir algumas margens também. Vamos dar-lhe uma margem. Parte superior da margem zero direita de 20 pixels e uma margem inferior e esquerda de zero. Eu também vou definir o valor de exibição para ser exibido no bloco de linha. Isso mudará nossos itens de lista para em vez de ser exibido como uma lista de pontos aparafusados de cima para baixo para realmente ser exibido horizontal em uma página da Web. Para dar um exemplo de como isso funciona, vamos agora salvar nosso documento e ver como nossa página da Web se parece e anotar as mudanças que acontecem em nossa lista horizontal para nossa navegação. Agora podemos ver aqui que ele é exibido horizontalmente em nosso site. Muito legal se para mais informações sobre a propriedade de exibição mr para verificar o externo segue para as pontuações como eu ligado a um documento que fala sobre a propriedade de exibição e um pouco mais em detalhes. Por enquanto, estamos muito bem para ir aqui ou navegação parece muito bom. E na próxima lição vamos aperfeiçoar nossa navegação recém-criada, bem como alguns de nossos elementos de rodapé que precisamos trabalhar. 23. Como corrigir nosso rodagem e navegação: agora, uma vez que nossos itens de lista de navegação serão links, vamos precisar estilizá-los. Então, vamos direcionar nossos elementos de âncora de navegação e dar a eles um peso de fonte de negrito. E vamos também adicionar um pouco de espaçamento neles também. Eu vou fazer você aqui para que quando alguém pairar sobre nossas ligações, eles jogam boliche. Eu também vou mudar o tamanho de nossos ícones de mídia social na parte inferior da página dela. Agora, eles são um pouco que podemos segmentar nossas imagens, mas eu não fiz uma aula para eles. A próxima coisa aqui é que nós podemos realmente dar ambas as imagens a mesma classe porque lembre-se, classes podem ser usadas várias vezes para que possamos usar esta classe ícones sociais com todos os nossos ícones de mídia social e, em seguida, declarar o estilista para que uma classe e não será aplicada a todos os três ícones. Então vamos em frente e copiar e colar a classe aqui, dar a todas essas três imagens a mesma classe, então vamos em frente e realmente direcionar essa classe e dar às nossas imagens de rodapé alguns estilos. Vou mudar a altura e com 30 pixels cada. Vamos salvar isso e ver como ele fica em nosso site. Beba isso aqui. Tudo bem? Então, se passarmos o mouse sobre os links, vemos que eles têm esse efeito ousado com eles. E na parte inferior Aqui, podemos ver nossas imagens ou meio minúsculas. Mas você também tem essas setas aqui. Há um estouro suficiente. Então temos algum tipo de ar acontecendo em nosso código. Então vamos investigar isso e ver se conseguimos detectar o ar. Então, parece com as nossas aulas. Ok, mas você pode ver aqui acidentalmente adicionou uma antena extra aqui para uma etiqueta de fechamento. Então vamos nos livrar disso, você sabe, basta copiar e colar nossa aula e enfiar de volta aqui. E isso deve se livrar dessas flechas estranhas que estavam aparecendo para nossas tomadas finais. Mas feche isso aqui. E lá vamos nós. Isso deve resolver esse problema. Vamos salvá-lo rapidamente e verificar e ver. Oh, lá vamos nós. Ali. Tudo tem. Mas você também notou que nós temos esses espaços estranhos entre nossas imagens também. Então, o que está fazendo isso acontecer? Acho que podemos ter alguns estilos de decoração de texto interferindo com nossos ícones de pé ou mídia social . Então eu vou para Rodapé e eu vou mirar os elementos de âncora, e eu vou dar-lhe decoração de texto de nenhuma. E vamos ver se isso corrige o problema porque eu acho que é isso que a faculdade naqueles pequenos Dash está lá para aparecer. É verdade e eles são você. Eles se foram todos. Então nossas imagens, estamos olhando um pouco melhor. Vamos verificar o nosso estado na versão móvel também, apenas para ter certeza de que tudo está bem. Ok, eles ficam muito bem lá também. Uma coisa eu quero um aviso. Talvez eu faça as imagens um pouco maiores. Eles estão um pouco menores agora, então talvez devêssemos voltar e torná-los um pouco maiores. Também estou percebendo que há necessidade de haver um pouco mais de espaço aqui entre os itens da lista . Podemos ver aqui que eles estão um pouco próximos, então vamos voltar para os itens da nossa lista de navegação e vamos adicionar uma margem inferior de talvez 10 escolhas. Então, vamos ver como isso parece bem. Nós poderíamos ver que há um pouco mais de espaço, e isso definitivamente parece um pouco melhor lá entre os nossos itens da lista também. Voltando ao que tínhamos que fazer antes, vamos voltar aos ícones das mídias sociais e torná-los um pouco mais maiores. Então vamos para nossos ícones sociais que criamos. E vamos tentar 40 pixels e ver como isso parece. Torne as imagens um pouco mais grandes. Tudo bem, isso parece muito melhor, um pouco maior, mas não muito grande. Estou gostando disso, e até agora tudo o resto parece muito bom. Então, após esta lição, você tem um teste rápido e então você vai aprender como podemos adicionar todas as outras páginas ao nosso site. 24. Crie uma em sobre: é hora de começar a adicionar mais páginas ao nosso site. Nesta seção, vamos criar arte sobre contato e página bloqueada. Vamos começar com Criando são uma página de barco. A primeira coisa que você precisará fazer aqui é criar um novo arquivo de texto e sua pasta Sites. Depois disso, vamos abrir o arquivo e salvá-lo como dot html. A próxima coisa que vamos precisar fazer é copiar todo o nosso html HDNet da nossa próxima página para a nossa recém-criada página de um barco. Podemos fazer isso e Windows pressionando o controle, See Key para copiá-lo e, em seguida, controlar mais P para colá-lo. Agora, se visualizarmos esta página, ela vai se parecer exatamente como nossa página do portfólio. Então, é claro que precisamos mudar isso. A primeira coisa que precisamos nos livrar é de todas as nossas imagens. Então vamos gostar de tudo dentro da tag de seção e excluí-lo. Então, agora, se saborearmos o coração sujo e aberto recém-criado um arquivo html ponto barco, podemos realmente agora clicar em nossa página sobre em nosso próximo arquivo e foram levados para a nossa página. Acabamos de criar aqui. Mas é claro que não há nada aqui porque nós apenas excluímos tudo, mas nossas páginas de barco agora funcionando corretamente em nosso site. Muito legal. Então vamos voltar ao HTML e começar a construir nossa página sobre. A primeira coisa que eu vou fazer é a imagem de nossos clientes para a página. Notei que também vou adicionar uma classe à imagem dela, que possamos estilizá-la especificamente com CSS mais tarde. Para que esta imagem para disputar exibição corretamente, vai ter que baixar os arquivos do projeto para esta lição também, ou se você quiser, você pode usar sua própria imagem se você sentir como ele, eu só vou rapidamente dobrar verifique a nossa extensão aqui. Então eu tenho a extensão certa para uma foto e é um porco J. E para o texto alternativo, vou colocar o nome do nosso cliente aqui. E por último, vamos adicionar a nossa classe à nossa imagem, e vamos adicionar a foto do perfil da turma. Em seguida, vamos adicionar um título à nossa página web porque já temos um H um e H dois no cabeçalho. Vamos ter que usar um H três. Vamos dar ao HD o título sobre mim. Você também pode usar uma idade para Aqui é bem, se você gosta Depois disso, vamos Addy parágrafo onde um cliente pode adicionar algum texto sobre si mesma. Por enquanto, vou inserir algum texto de exemplo apenas para que algo esteja lá e possamos ver como ele realmente vai olhar no navegador. Eu vou também adicionar alguns parágrafos elemento aqui. Então nossa página é construída um pouco e podemos ver o espaçamento entre eles. Vou tirar um tempo aqui para limpar isso um pouco. Eu agarro o slalom se alguns on-line, que é basicamente apenas texto de preenchimento enfraquecido inserir aqui. Eu também vou tomar cada parágrafo uma textura e envolvê-lo em um elemento parágrafo também . Lembre-se de fechar o elemento de parágrafo também. Mais perto do último e enfraquecer. Exclua este último parágrafo fechamento tomar aqui, já que não precisamos mais dele. Tudo bem, então nossa página sobre está parecendo muito boa. Vamos dar-lhe um assento rápido e ver como ele fica em nosso site. Então, clicamos em um barco. Agora temos a nossa página de barco aqui para o nosso cliente. Não parece muito ruim. Aqui podemos ter o nosso Sobre mim, que é o título são parágrafo a texto e uma foto de seu cliente. Vamos voltar e estilizar tudo isso na próxima lição. Uma última coisa que vou acrescentar, no entanto, é debaixo da foto do perfil do nosso cliente. Vou adicionar um parágrafo, e vou digitar o nome do cliente como uma legenda para a foto. E quando atualizamos, podemos ver que agora essa legenda é exibida aqui pela nossa imagem, então eu acho que está parecendo muito bem até agora. Na próxima lição, vamos expandir nossa recém-criada uma página de cinto para o nosso site. 25. Como estilizar nossa Sobre em página: Tudo bem. Então nós apenas criamos nossa página sobre e configuramos o HTML básico. Agora é hora de trabalhar com nosso CSS. Vamos criar uma seção aqui em nosso CSS para nossa página sobre. Eu vou pegar este ano e eu vou copiar e vamos chamá-lo de estilos para o nosso Boat Beach apenas para tipo de manter tudo um pouco mais organizado. Oh, sim, não. Vamos começar com o estilo da nossa foto de perfil. Eu vou dar-lhe e Max com de 200 pixels, bem como algumas margens, lembre-se que nós precisamos realmente alvo são imagem de perfil ponto. Vamos tentar emergente de cinco pixels por todo o lado apenas por agora, apenas para dar à imagem um pouco de espaço para respirar. E por último, precisamos definir esta exibição para bloquear para que nossas margens automáticas à esquerda e à direita centralizem a imagem na página. Agora, antes de terminarmos com seus estilos aqui, vamos fazer um pouco de estilo para cada uma das três manchetes. Oh, eu vou fazer aqui é nas margens, especificamente para a parte inferior dos elementos que há um pouco de separação entre r H D e R elemento parágrafo. Antes de fazermos mais alguma coisa, vamos salvar isto e ver o Haro chateado. Parece que podemos ver aqui que são fotos de perfil, na verdade um pouco pequenas. Então eu vou em frente e fazer isso um pouco maior. Vamos tentar algo como talvez 300 pixels. Tudo bem, parece muito melhor. Um pouco maior. Por fim, vamos em frente e mudar o título do nosso site. Então, para fazer isso, nós vamos ter que ir para o nosso HTML para ir para cada um dos nossos e vamos colocar o nome real de recaída do Rio. Nós temos o nome do nosso site aqui, e eu realmente vou me livrar do H dois porque eu acho que parece um pouco melhor sem o H dois. Então vamos apagar isso por enquanto. Além disso, eu vou entrar em nossas informações de cooperação e digitar o nome do nosso cliente e porque nós estamos fazendo isso apenas sob uma página de barco, nós realmente vamos ter que voltar e abrir todas as nossas páginas individuais e mudar as configurações neles para que você possa ir em frente e fazer isso por conta própria. Vou mudar meu índice aqui e mudar o nome e o rodapé. Oh, sim, então eu acho que é basicamente isso. Vamos salvar e atualizar a página. Lá vamos nós. Acho que parece muito melhor, então acabamos aqui. A versão móvel do nosso site está quase completa. Uma vez que terminamos de projetar a versão móvel em todos os lugares, as páginas passarão para projetar a versão desktop do nosso site. 26. Crie uma página de contato: Terminamos duas páginas até agora, e agora temos mais duas para ir. Vamos continuar e começar a trabalhar em nossa página de contato. Vamos criar nossa página de contato assim como nossa página sobre. Primeiro, vamos criar um novo arquivo de texto e chamá-lo de contato dot html. Tudo bem, podemos apagar o antigo aqui. Vamos abrir nossa página de contato e o que vamos fazer aqui é pegar tudo da nossa página de índice e novamente policial, copiá-lo para nossa página de contato recém-criada, assim como antes. Vamos ter que entrar aqui e excluir nosso portfólio. Como não precisaremos dele em nossa página de contato, vamos navegar para nosso portfólio seletivamente itens e liderá-los. Agora vamos criar outra seção. Tome aqui. Temos duas colunas. Nossa primeira tomada de seção será nossa primeira coluna, e nossa segunda tomada de seção será nossa segunda coluna para nossa versão móvel do site. Essas colunas seriam apenas empilhadas, mas quando você expande nosso site para a visualização da área de trabalho, essas duas colunas foram flutuadas lado a lado. Então, por agora vamos criar um H três para o título e dentro eu vou escrever. Contacte-me. Vai ser o título da nossa página nesta página. Vamos exibir informações de contato de nossos clientes logo abaixo da nossa tomada H três que criamos. Vamos adicionar um elemento de parágrafo e escrever algumas informações de contato sobre nosso cliente aqui. Poderíamos colocar algo como, Se você alguma vez precisar para obter um porão de mim, você pode entrar em contato comigo usando os detalhes abaixo ou algo ao longo dessas linhas foram trabalhados perfeitamente bem. Ou você pode simplesmente classificar inserir qualquer texto que você gosta por agora, apenas para colocar algo lá para que você possa ver como ele vai ficar. Exceto que vamos realmente criar um segundo parágrafo aqui. E em nosso segundo parágrafo, nós estávamos indo para realmente inserir as diferentes maneiras que as pessoas podem alcançar nosso cliente. Vamos fazer coisas como em um número de telefone, nossos clientes, nossos clientes, endereço maléfico, e podemos adicionar algum mercado especial a esses elementos também. Eu também fui em frente e preso no endereço físico dos nossos clientes também. Tenha em mente, este é apenas ter inventado endereço que eu encontrei na Internet e vamos estar usando isso apenas para o exemplo deste site. Em seguida, eu vou colar dentro Nossos clientes mais uma vez fizeram um número de telefone porque eu quero que os diferentes presságios de contato sejam exibidos como linhas separadas. Na verdade, temos que fazer um elemento de parágrafo para cada um separadamente. E por último, mas não menos importante, vamos adicionar nossos clientes endereço de e-mail apenas no caso de alguém querer entrar em contato com nosso cliente por e-mail. Então o que vamos fazer agora é adicionar um mercado especial a esses diferentes elementos. HTML tem algumas marcações para adicionar para coisas específicas, como endereços de e-mail, números de telefone e endereços físicos. Então eu vou ir em frente e adicionar essas tags para as diferentes maneiras de contato que criamos anteriormente. Vá em frente no elemento de endereço. O outro que vamos adicionar aqui é que nós vamos realmente adicionar um link para nossos e-mails que se nosso cliente clicar no botão de e-mail nós, ele realmente vai adorar em e-mail diretamente para nós. Então podemos fazer isso criando um link aqui com o treff A e, em seguida, colocando correio, também. Web master dot com ou qualquer que seja o seu endereço de e-mail. Por exemplo, você colocaria macho em qualquer endereço de e-mail. Isto é apenas inventado quando eu criei apenas para referência. Tudo bem, então acho que terminamos aqui. Vamos saborear o Page, abri-lo e ver como fica. Então eu vou começar a abrir o índice, ir para a nossa página de contato, e legal. Podíamos ver que tudo aqui é exibido muito bem. Temos o nosso link para o nosso endereço de e-mail, e temos um pouco de marca especial aqui em cima para nossas informações de contato. Agora, há uma última coisa faltando nesta página, que é a fotografia de nossos clientes. Na verdade, vou tirar a foto do perfil e as páginas de contato. Bem, você pode deixar assim se quiser, ou você pode adicionar uma foto. É completamente com você. Mas eu vou voltar e em nossa primeira seção, tomar eu vou inserir nossa foto que nós criamos antes. Tudo bem? Podemos ver aqui que nossa foto de perfil está sendo exibida aqui. Exatamente como eu ganhei. Acho que parece um pouco melhor. Adiciona um pouco mais de personalidade à página. Então eu acho que nossas páginas parecem muito boas até agora Nós realmente vamos manter nossa página de contato para este site. Muito simples. Para o ponto. Tudo bem. Ótimo trabalho. Temos mais uma página para criar em nosso site. 27. Como criar uma página de blog: agora é hora de criar a página blawg para o nosso site. Então vamos começar criando um documento de texto e vamos salvá-lo como blawg dot html . Já que esse será o nome da Art Blawg Page, podemos fazê-lo. Este velho arquivo de texto não precisamos mais. E o que vamos fazer é pegar a página de contato html e vamos copiar tudo e colocá-lo em uma página bloqueada e colar tudo lá e podemos ir em frente e excluir tudo o que não precisamos. Então vamos manter a nossa foto de perfil, mas vamos apagar este parágrafo aqui. Eu também vou excluir tudo em nossa segunda tag seção que temos aqui e, em seguida , vai criar um parágrafo e adicionar algum texto de exemplo aqui para que possamos ver como o texto será parecido para as nossas mensagens de bloco não estavam indo para fazer uma publicação de bloco real. Vamos fingir que temos um aqui por enquanto. Então estamos fechando nossos parágrafos. Tudo bem, Nadal parece muito bem. Em seguida, eu vou dar a esta seção uma aula e eu vou dar-lhe a classe de conteúdo blawg apenas para que nós podemos segmentar e estilizar esta classe de seção aqui e nós vamos dar esta tag seção a classe de barra lateral. Uma vez que esta imagem aqui do nosso cliente vai realmente ir na barra lateral na página do bloco , eu também vou adicionar uma idade três aqui que vai dizer um autor volumoso e isso vai para ir para cima da imagem do perfil na barra lateral e Aqui embaixo, vou adicionar uma nova classe à foto do perfil no tribunal. perfil Blawg uma vez que vamos usar estilos exclusivos para esta imagem e não vamos estar usando estes estilizados sob outras páginas por último, vamos criar um cada três para as nossas páginas do site em nossa barra lateral. E então eu vou pegar nossa lista aqui da nossa navegação, copiá-la e colá-la aqui embaixo. Então vamos ter uma lista das páginas do nosso site na barra lateral também. Tudo bem, então isso parece muito bom. A próxima coisa que podemos fazer é ir em frente aqui e em um lugar mais apertado para o bloco de arte. Vou adicionar um h três e, em seguida, vamos apenas pegar nosso blawg post cauda ou algo semelhante a essa extensão. Isso é um exemplo. E novamente, isso pode ser em cada dois ou NH três, que você preferir. Em seguida, vamos dar o documento dela, Isi, e ver como tudo parece por agora. Abra nosso índice clicando na página bloqueada dela. E você pode ver que temos todas essas coisas diferentes aqui. Na verdade, temos nosso título de contato aqui que precisaremos nos livrar. Esqueci-me de apagar isso. Então eu vou voltar para o documento HDL dela aqui e me livrar do H três. Próximo em estilo são blawg imagem aqui. Na verdade, vamos pegar essa foto em fluido para a direita da página dela e, sim, sim, conteúdo vai tipo de ir para o lado esquerdo da orelha e você vai ver o que eu quero dizer. Assim que fizermos isso, faremos com um carro alegórico. Então vamos voltar para o nosso CSS. E eu vou fazer uma nova seção aqui, e eu vou chamá-la de Estilo é para nossa página de pertença. E vou começar por apontar a nossa foto. Só vou checar a aula. Tudo bem? Por isso é bloqueado prova, prova log perfil pic. Está bem, está a certificar-me que acertei. E vamos fazer algumas coisas diferentes neste filme. A primeira coisa que eu vou fazer é realmente copiar todas as configurações de imagem de perfil para que a imagem mostre exatamente como é como nós temos antes da paz que lá Em seguida, eu vou adicionar um raio de borda, e eu vou fazê-lo 100%. O que isso vai fazer com que o nosso filme seja girado, fazer a borda da foto dela ao redor. Então, enquanto saboreamos a página que você vê, não podemos ter esse efeito de imagem arredondada agora, o que é meio legal, e podemos mudar a maneira como o raio da borda é exibido alterando o valor percentual, podemos ir abaixo de 100% e eu torná-lo mais de um quadrado. Mas 100% é um círculo completo no geral. Em seguida, vamos segmentar nossa barra lateral desconhecida lista de itens, e nós vamos fazer aqui é um indo para decoração de texto, e eu vou definir a decoração tecnológica para nenhum. Então nos livramos dos marcados pequenos pontosmarcadosque estão aparecendo lá em cima você realmente tem que fazer disso os links, links, estilos, links, estilos, estilos, entrelaçamento de Tatum. Eu também vou adicionar um estilo de lista de nenhum também. E eu realmente vou mudar para apenas segmentar o nosso item da lista porque isso pode funcionar um pouco melhor. Tudo bem, então isso é gon. Ambos os pontos se foram. Nossos links ainda estão subjacentes, mas acho que está tudo bem. Podemos deixá-los assim. Isso faz um pouco de sentido, especialmente se estiver na barra lateral. Livre-se disso. Decoração têxtil é igual a nenhuma. Ok, isso é bom. Isso está funcionando e parecendo muito bem. Em seguida, vamos criar uma declaração CSS que vai direcionar nossa barra lateral em Lee. E vamos encontrar um novo comando e vamos chamá-lo de flutuador. Vamos flutuar, certo? E o que isso vai fazer, vai pegar nosso ciber-e flutuar para a direita do conteúdo e você verá isso em apenas um segundo para que possamos ver nossa barra lateral. Div aqui está agora flutuado para a direita da página. Agora vamos precisar definir algumas margens e corrigir algum texto aqui. Mas novamente, você pode ver como ele está flutuando aqui do lado direito. Isso ocorre devido à propriedade float CSS. E como eu disse, nós lhe demos um valor de direito. Então vamos fazer um pouco de estilo para a nossa barra lateral. Vamos pegar seu lado onde cada três e alinhar o texto para o centro da página que deve torná-lo um pouco melhor. Vamos verificar, Dario. Isso parece um pouco melhor. Mas também precisamos de obter o item da lista aqui para ser enviado também. Então vamos fazer isso. Nós vamos para o nosso Nós realmente apenas mirar nossa barra lateral, e lá vamos nós. Isso também funciona. Você vê aqui que nós temos um pouco de um recuado aqui de nossos itens de lista, e que pode ser de preenchimento ou margem dos itens da lista em si mesmos. Mas antes de lidarmos com isso, vamos adicionar algum espaço de margem ao nosso tietz cibernético e respirar espaço ao nosso texto. Vamos dar-lhe uma margem superior de 0% e vamos com esquerda e direita de 5% e isso deve limpar a página um pouco. Ariel, agora temos espaço para respirar na barra lateral da enfermeira. Está parecendo muito bom. Vamos encolher o tamanho da janela e ver como fica. Podemos ver que os pontos de vista menores aqui, alguns dos Texas difíceis de ler parece um pouco pateta, mas nós vamos realmente usar media queries na próxima seção para corrigir isso. Então está tudo bem por enquanto. Podemos deixá-lo como está, mas no geral, está parecendo muito bom. Mas também vou tentar aumentar para 10% só para ver como fica. Vamos ver como isso parece. Ok, então é um pouco mais de espaço que parece um pouco melhor no Brower. Por que gosta do espaço extra aqui? Então talvez possamos mantê-lo assim. Então eu acho que são páginas bloqueadas muito bom para ir. Bem feito. Concluímos agora a criação de todas as páginas para o nosso site 28. Como criar nossa página de portfólio: agora é hora de criar nossa página de portfólio para o nosso site. Então vamos fazer exatamente o mesmo que as outras páginas criarão nosso documento, em seguida, salvá-lo como portfólio dot html e nossa página de portfólio já está praticamente feito para um site. Na verdade, é a página inicial, uma página de índice KR para um site. Então tudo o que realmente precisamos fazer é ir para a página de índice aqui. Copie todo o código na próxima página e inserido em nossa página de portfólio recém-criada do nosso site. Então, vou fazer isso agora mesmo. Aqui. Vou guardar o documento. E agora, quando abrimos índice dot html, agora temos nossa página portfólio. Mas é claro que é a mesma página. Existe na próxima página porque copiamos todo o texto? Eu realmente vou pegar nossa página blawg e usá-lo como a página de índice para o nosso site. Então o que eu vou precisar fazer aqui é voltar. Eu vou abrir nossa página de bloqueio, copiar apenas html em nossa página de sangue e depois colá-lo em nossa página de índice dot html. Podemos excluir todo esse código aqui passeado em nossa página de bloco, dar nosso site para salvar e, em seguida, abrir html agan Índice que h e e-mail e nós poderíamos ver nossas páginas de sangue agora sendo exibidas na página inicial. Temos a nossa página sobre são bloqueados contato página e portfólio. Portanto, não terminamos de adicionar todas as páginas que precisamos ao nosso site. É hora de seguir em frente e começar a estilizar e terminar nossas páginas de sites. 29. Como adicionar uma gradepara uma página à nossa página de portfólio: é hora de fazer algumas mudanças realmente grandes em nosso site. Nesta lição. Você ia aprender a usar consultas de mídia para adicionar pontos de interrupção ao seu site para que nosso site fique bem em todos os dispositivos móveis e desktop. Consultas de mídia permitem que você adicione CSS personalizado à sua página que só será aplicado a sua página quando o seu navegador é que um certo com sempre que você Adamia carreira onde eu preciso de um ponto de interrupção . Vamos em frente e ao ar Inserir consulta imediata Inter CSS. Vou datilografar e agora explicar o que tudo isso significa. O primeiro na tela de mídia é dizer ao navegador que estamos mirando em dispositivos de mídia exibindo as armas. Em seguida, temos a palavra-chave e e o nosso mínimo com 600 pixels. Por último, temos um suporte que é onde nossos usos aduaneiros irão para a regra CSS. A seguir, vou mirar o nosso portfólio. Eu d aqui e nós vamos usar a nova propriedade CSS chamada um flutuador. Então o que vamos fazer aqui é flutuar, estão antes da sua lista itens à esquerda, e vamos dar-lhes A com cada 45%. Eu também vou adicionar uma margem de 2,5% ao redor. Vamos salvar nosso arquivo CSS e ver como isso realmente parece no navegador. Se trouxermos nossa página de índice aqui, navegamos. Vamos fazer isso grande. Em primeiro lugar, navegue até pro folio. Podemos ver isso em uma tela maior. Nossas imagens agora são exibidas lado a lado. E se reduzirmos o tamanho da tela, eles perdem essa propriedade flutuante. Lembra da nossa consulta de mídia que criamos? Enquanto nossa tela for maior que 480 pixels, então essa propriedade float CSS será aplicada a suas imagens. E eles eram apelativos lado a lado. Muito legal. Agora, como nosso elemento de rodapé está flutuando com suas imagens, nós realmente precisamos adicionar uma propriedade especial a ele para impedi-lo de flutuar, nós vamos deixar claro, e nós vamos colocar dar a ele o valor de ambos. Então o que isso vai fazer é que agora vai fazer o nosso rodapé voltar para onde normalmente está e não flutuar com tudo o resto novamente. Vamos aumentar o tamanho da página dela. Podemos ter certeza de que tudo está bem em telas maiores. Tudo bem, parece muito bom. Mas digamos, por exemplo, se ele quisesse realmente criar isso em um layout de três colunas? Quando chegarmos à vista estendida da área de trabalho? Bem, nós também poderíamos fazer isso com bichas da mídia. Vamos voltar para o nosso CSS e vamos criar outra media query para telas maiores indo para copiar nosso código que tínhamos antes. Mas em vez de ter 600 pixels, vou ter 900 pixels. E o que precisamos fazer é encontrar um com que permita que nossas imagens apareçam três na página. Vamos tentar 25% e ver como isso parece mais seguro, página web e abri-lo novamente. Atualize e estenda sua exibição. E isso não parece tão ruim. Acho que poderíamos fazer essas imagens um pouco maiores, no entanto. Vamos tentar algo ao longo deste fim de 28% e ver se isso vai fazer com que as imagens dela se encaixem perfeitamente. Tudo bem, isso parece muito melhor. Então, novamente, vamos trazer nosso site aqui e vamos olhar para ele na visão estendida podemos ver que nossa imagem ou apenas estão exibindo muito bem aqui em um layout de três colunas. Estamos faltando uma imagem aqui na parte inferior, à direita, e nós vamos realmente adicionar outra imagem para fazer isso parecer um pouco melhor. Mas acho que nos estendemos. Ele realmente parece muito bom, e à medida que o encolhemos, podemos ver que um site mudará para o layout de duas colunas, e então quando ela chegar à nossa última consulta de reunião, ele mudará para a visualização de versão móvel no site . Então, usando consultas de mídia, podemos realmente criar um site responsivo que parece ótimo em todos os dispositivos desktop e móveis . 30. Ajustamento final na nossa Sobre na página: Tudo bem. Então agora é hora de terminar todas as mudanças finais que vamos fazer em nossa página sobre agora, eu vou abrir no próximo ano e vamos dar uma olhada na nossa página sobre. Então a nossa página sobre está quase pronta. Fazer qualquer coisa que eu realmente quero fazer é eu quero flutuar esta imagem aqui e nossa pequena textura com o nome de nossos clientes. E quando eu flutuei para a direita, tipo de como nós fazemos em nossa página de bloco tipo de fazer como um forte barra lateral. Então, a fim de fazer isso, nós vamos ter que ir para o nosso primeiro vamos abrir cada equipe para uma página de barco, e então nós vamos abrir este CSS para nossa página sobre também. E a primeira coisa que poderíamos fazer é entrar em nosso HTML e vamos pegar nossa foto aqui em um parágrafo, e eu vou colocá-la no topo aqui para que quando o flutuarmos, ele vai flutuar corretamente, tipo de como fizemos em nossa página de bloqueio, e eu vou criar uma seção separada para ele. E desde que já criamos uma barra lateral para um site para estilizar com em nossa página de bloqueio. Podemos realmente ir em frente e adicionar essa classe cibernética a este novo elemento de seção e todo o estilo que já fizemos para uma barra lateral. Seria aplicado. Então, a maior parte do trabalho já está feito para nós aqui. Então vamos abrir essa imagem do Peaster no parágrafo dela. E se tudo está funcionando corretamente, se dissermos isso e então se você é uma página web, devemos ter nosso ciber-funcionando corretamente e lá vamos nós. Tudo está parecendo muito bem. Então, a versão final para desktop de sua página Bo está parecendo muito boa. Mas vamos verificar a versão móvel. Nós podemos ver que estamos tendo exatamente o mesmo problema que tivemos antes quando você começa a baixar virgens móveis como esta, o Texas meio que parece um pouco estranho em torno da imagem. Então o que vamos fazer aqui é quando a nossa imagem chegar a um ponto baixo, vamos remover esse flutuador. Nós vamos dizer que nenhum fluido vai ser adicionado, então ele vai tipo de pilha como ele parecia. Qualquer armação de arame para o nosso celular projetar. Então, vamos navegar para nossas consultas de mídia. E eu vou nos mudar para consultas de mídia para páginas já que nós vamos realmente usá-las para nossas páginas em nosso site. E eu vou O que eu vou fazer aqui é eu vou mirar a nossa imagem. Então vamos voltar para o meu HTML para que eu possa ver como a classe é chamada. Kids barra lateral no perfil de classes pic OK, e eu acho que a maneira mais fácil de fazer isso será pegar a nossa barra lateral flutuar propriedade CSS, e apenas inserido em uma consulta de mídia aqui. Na verdade, eu só vou subir aqui e copiar e cortá-la aqui. Então, o que isso vai fazer? Isso vai adicionar este lado onde flutuar na página Leigh Vencedor é um mínimo com 600 pixels. Então, se nossas páginas maiores sendo visualizadas maiores do que 600 pixels que são pé seria aplicado. Mas se as páginas com menos de 600 pixels, não serão aplicadas como podemos ver aqui. Então vamos olhar muito bem, mas nossas imagens não estão mais centradas, então vamos ter que corrigir isso muito rapidamente. Aqui. Vamos voltar para a nossa imagem de perfil Blawg e vamos dar-lhe e margem esquerda e direita de auto em uma margem superior e inferior de cinco pixels. Então isso deve preencher esse espaço extra e centralizar nossa imagem e isso parece muito bom. Em seguida, podemos ver aqui que são sobre mim. O título precisa ser enviado na página dela na visualização móvel. Então, vamos alinhar este texto para centralizar a página da Web de poupança. E lá vamos nós. Isso agora está no centro, e eu gosto que pareça muito melhor. Vamos verificar para ver como ele fica na área de trabalho, e isso parece muito bom. A única coisa que eu quero fazer é realmente queria mudanças sobre mim h três para não ser enviado arised na área de trabalho. Então, mais uma vez, a fim de fazer isso, vamos copiar R H três. Vamos para a Consulta Imediata. Vamos selecionar nossa primeira consulta de mídia e vamos acelerar este código aqui, e a diferença que vamos fazer aqui é em vez de texto alinhar o H três para estar neste centro, vamos mudar isso para a esquerda, então ele realmente vai alinhar texto à esquerda da página. Vamos para a esquerda, e isto deve funcionar é o que queríamos. Tudo bem, dê-lhe um cofre. E quando vamos para a versão desktop, agora podemos ver que ele está alinhado à esquerda da página. Isso está parecendo muito bom. Tudo bem. Então eu acho que a nossa página sobre o nosso site está agora completa. Parabéns. Estamos quase terminando de projetar nosso site. Temos apenas algumas páginas para terminar. 31. Ajustamento final para nosso cabeçalho e rodagem: Tudo bem, todo mundo. Então é hora de fazer alguns ajustes finais em nosso cabeçalho e rodapé em nosso site, nosso site. Está quase completo, mas há algumas pequenas coisas que quero resolver aqui. A primeira coisa para o nosso cabeçalho é que eu quero confiar em você com alguns dos itens da lista e inter fitter. Eu quero adicionar um pouco mais de espaço e eu quero adicionar um pouco de estilo ao texto em seu rodapé. Então, se você olhar para um blogueiro agora, podemos ver que esses itens de lista e eles acima estão um pouco próximos. Vamos mudar isso. O que vamos fazer é adicionar um pouco mais de espaçamento. Então, no seu celular, eles estão mostrando um pouco diferente. Então vamos para a nossa lista de itens aqui e vamos encadear essa margem de 40 pixels a 50 pixels e vamos ver como isso parece. Tudo bem. Escuta, horários das listas foram espalhados um pouco mais, mas vamos ainda mais longe. Vamos tentar 70 pixels, tudo bem, então podemos ver os itens da lista dela e agora meio empilhados aqui assim. E acho que isto parece muito melhor. Então, enquanto arrastamos a página dela, nossos estilos de desktop responderam, então eu meio que gosto um pouco mais disso, e acho que vamos mantê-lo assim por enquanto. E acho que são todas as mudanças que quero fazer na cabeça dela, por enquanto. Em seguida, vamos para o nosso rodapé e Inter rodapé. Quero adicionar um pouco mais de espaço entre nossos ícones sociais e nosso texto em nossa página. É um pouco apertado juntos, então a maneira que vamos fazer isso é adicionar uma margem superior ao nosso rodapé, e isso deve criar espaço suficiente para nossos ícones de mídia social. Vamos tentar 50 pixels por enquanto, e sim, podemos ver que temos muito mais espaço agora e isso parece melhor. Tão livre. Zoom na área de trabalho muito mais espaço, e nosso cabeçalho e rodapé parecem muito melhores agora. Por último, mas não menos importante, vamos estilizar o texto do parágrafo de seu rodapé, vamos pegar nosso rodapé é texto de parágrafo, e vamos ter alguma ênfase no nosso pé ou texto em nosso site bem aqui no fundo do passarinho. Então está em uma propriedade de estilo de fonte e vamos dar-lhe o valor metálico que irá adicionar alguma ênfase ao nosso pé ou texto. Vamos ver se funciona e lá vamos nós. Agora podemos vê-lo com um estilo um pouco diferente do texto do seu parágrafo, e ele se levanta. Então são um cabeçalho e rodapé limpo, e tudo está olhando bem em nosso desktop e um dos AH versão móvel do nosso site. Nosso site está quase completo. Temos mais duas páginas para ir e vamos completar este projeto. 32. Finalizando nossa página de portfólio: para a nossa página de portfólio. A única mudança que realmente temos que fazer é adicionar essa imagem extra para preencher esse espaço vazio . Nós temos isso novamente para baixo os arquivos para esta lição, que você possa obter a imagem ou você pode adicionar o seu próprio. Mas vamos colocar uma imagem aqui e consertar essa página do portfólio. Então vamos agarrar. Este ano, vamos copiar o item da lista e colar aqui, e eu já mudei os nomes. Então nós sempre temos que fazer é colocar Imagem seis Go imagem seis anos, e tudo deve estar funcionando corretamente. Vamos abrir o portfólio de arquivos e podemos ver que nossa imagem aqui está pronta para ir, e isso está parecendo muito bom. Se mudarmos o tamanho da nossa página de quê, podemos ver nosso portfólio exibindo muito corretamente na visualização do tablet móvel e desktop ,para , que todos fiquem muito bem aqui. Ao contrário da forma como ele está olhando até agora, é isso para uma página de portfólio, é hora de terminar a última página de um site, que é a página de bloqueio 33. Como encontrar um nome de domínio: nesta lição, você vai configurar seu nome de domínio, ao vivo na Internet. Mas antes de tudo, antes que um site extra fique online, precisamos comprar um nome de domínio. Mas qual é o nome de domínio? Bem, o nome de domínio é basicamente o URL U ou endereço do seu site. Veja o Google, por exemplo. W w dot google dot com é permanecendo o mesmo do Google com o Twitter. Aqui podemos ver que Twitter é o nome de domínio do site www dot twitter dot com. Outro exemplo é o meu bloqueio pessoal. Temos www dot Robyn e haney dot com. Este é um nome de domínio do meu site. Então, a fim de obter o nome de domínio, a primeira coisa que precisamos fazer é ir para um provedor de nome de domínio. Há um monte de provedores lá fora, mas eu vou com ir, papai, papai, já que eu gosto de sua interface e eu tive experiência em usá-los antes, então a primeira coisa que podemos fazer aqui é procurar por nome de domínio. Você não quer escolher um nome de domínio que tenha algo a ver com seu site. Por exemplo, se você estiver criando um portfólio ou bloco, talvez considere fazer seu nome ou se você tiver um nome para sua marca, você também pode usá-lo. Nós vamos olhar para o balcão único é na verdade o nome do nosso site, e podemos ver aqui que o nome já está tomado e isso geralmente acontece muito, especialmente se é um nome de domínio é popular no nosso caso. Já que eu sou do Canadá, nosso cliente é Billy notável por seu salão, então em nossas chaves usando a extensão ponto C A faz sentido porque eles não vão redirecionar um mercado global. De um modo geral, se você é comercializado para global, você quer ir para um ponto com. Mas se vai ser um local como o nosso cliente é, e neste caso, podemos fazer um ponto c oito. Então, no nosso caso, eu acho que nós vamos para um ponto C A. Então é marcar esta caixa aqui, e nós vamos continuar para o nosso Kurt. Tudo bem, então vá. Papai vai tentar te vender outras coisas com seu nome de domínio, e vamos pular tudo isso. Nós não queremos nada. Só queremos um nome de domínio e o próximo. Nós temos que inserir as informações da nossa conta, então eu realmente tenho uma conta. Vou entrar aqui, e depois de entrar, te encontro na próxima tela. Tudo bem? Então, muita coisa na minha conta. Dependendo do domínio escolhido, talvez seja necessário assinar um contrato. Então eu vou apenas marcar esta caixa aqui, ir para continuar a check-out. E eu tenho alguns meios de experiência, mas poderia pular isso. E aqui temos a nossa tela para o nosso check-out. Agora você pode selecionar quantos anos você deseja para o seu nome de domínio. Só vou escolher um ano no nosso caso, mas depende de você. Geralmente, são cerca de 10 a US $11 aproximadamente por ano, dependendo da extensão de nome de domínio que você está procurando. E certifique-se de que nenhuma das coisas na parte inferior seja verificada também, já que isso é coisa extra, você não come. Então acho que estou muito bem para ir. Vou continuar para o check-out e você pode selecionar seu método de pagamento. E depois que você está feito tudo isso, você pode me encontrar na próxima lição e vamos continuar com a seleção estão hospedando pacote para um site. Se você também quiser, você pode escolher uma conta de hospedagem do Go Daddy, que é eu vou fazer um ótimo, mas, hum, sim, apenas inscreva-se. Você tem seu domínio configurado por enquanto, e depois de fazer isso, podemos passar para a próxima etapa. 34. Como encontrar um site para seu nome de domínio: Tudo bem. Então temos nosso nome de domínio comprado. Agora é hora de configurar para a conta de hospedagem. Agora vamos montar um casaco de hospedagem no “Go Daddy” também. Uma vez que já temos um nome de domínio lá em cima, isso é mais fácil ter tudo em um só lugar. Então estamos agora em uma página inicial do papai. Vamos para a hospedagem. Vamos clicar em hospedagem na Web. Nós vamos começar aqui e agora nós temos nossos pacotes para um planos de hospedagem. Os dois planos estavam interessados é a nossa economia e luxo. A diferença é $1 por mês e um diferente A principal diferença entre os dois pacotes definidos com a economia, você pode hospedar um site, mas com o deluxe, você pode hospedar sites ilimitados. Então, só estamos indo de luxo porque é de longe o melhor negócio. E não importa qual você quer. Se você estiver indo para construir um monte de sites on-line como um desenvolvedor da Web, eu diria ir com luxo, Mas você sempre pode atualizá-lo a qualquer momento, Então não é um grande negócio. Em seguida, selecionamos o prazo e vamos escolher um mês. Você diz dinheiro. Se escolher mais meses. Então, se você sabe que vai ter esse nome de domínio e sua conta de host por um ano e você pode pagar tudo de uma vez, então vá 12 meses. Mas se você não tem certeza você sempre pode ir em uma base mês a mês. Não é tão caro, sério. Esta é a coisa extra que não queremos. Então ele vai continuar, e nós temos nosso xadrez aqui e novamente. Você quer ter certeza de que não tem mais nada preparado aqui. Eu só quero ir para prosseguir para check-out. E podemos sentir a informação aqui e depois jogar. Ordem de classificação. E estamos todos prontos para ir. Assim que tiver sua conta de hospedagem configurada, me encontre na próxima lição. Estamos conectando nosso nome de domínio à nossa conta de hospedagem no Go Daddy 35. Como conectar seu domínio à sua conta de hospedagem: agora é hora de conectar nossa hospedagem em nosso nome de domínio juntos. Vamos para nossa conta Go Daddy e vamos visitar nosso painel de conta em nossa seção de domínio . Vamos navegar até o domínio que você comprou. Vamos abrir nossas configurações de domínio em nossas configurações de domínio. Vamos clicar. Usar meu domínio aqui estavam realmente indo para construir um novo site sobre ele. Vamos clicar nesta opção aqui e agora. O que podemos fazer é usar o construtor do site do Go Daddy. Mas já que já compramos hospedagem, podemos clicar neste Tad hospedagem aqui, e vamos clicar neste link que diz, usá-lo com o seu domínio porque já possuímos hospedagem. Agora, esta é a nossa conta de hospedagem para um go Daddy. Então vamos gerenciar aqui, e isso vai trazer nosso painel C. Agora, se você comprou seu domínio e conta de hospedagem de uma só vez e ir papai, então ele já deve estar conectado, e você deve ser bom para ir. Mas, por nossa causa, temos que conectar os dois juntos porque eles estão separados. Então, o que está acontecendo? Acrescente os meios que vamos fazer aqui é que vamos adicionar ou para mim. Então vou digitar nosso nome de domínio aqui. Uma parada de desmancha, e temos que colocar a extensão dela ponto c. clicamos aqui, e essas configurações serão preenchidas automaticamente. Então, tudo aqui está bom para ir. Uma neve clique em Adicionar domínio. Tudo bem, legal. Então, Adam Domain agora é criado em nosso painel C, modo que tudo está pronto para ir. A próxima coisa que temos que fazer é entrar em nosso domínio e apontar nossos servidores de nome para sua conta de hospedagem. Agora, o que geralmente acontece é quando você envia para uma conta de hospedagem na web, você receberá uma recepção. Um e-mail que irá listar seus servidores de nome para sua conta de hospedagem no nosso caso já. Saiba o que meus servidores de nome de hospedagem do papai são. Mas se você acabou de comprar uma conta de hospedagem de, em seguida, verifique o seu e-mail para obter as informações do servidor de nomes . Então eu vou voltar para o meu painel e eu vou clicar em domínios que eu vou navegar para o meu domínio e clicar em DNS gerenciado , que é servidores de nomes de domínio para abreviar. Vamos descer aqui e clicar no botão gerenciar servidores de nome aqui. Agora eu tenho o meu não salvo em um bloco sem. Então eu vou apenas copiar e colá-los um por um novamente. Verifique seu e-mail para encontrar seus servidores de nomes. Se você não conseguir encontrar seus servidores de nome em e-mail de sentimento para apoiar em qualquer conta de hospedagem que você com e eles provavelmente receberão seu servidor de domínio enviado em nenhum momento . Tudo bem, então está tudo bem para ir aqui e podemos acertar, salvar tudo. Deve ser bom para ir agora. Leva algum tempo para que seus servidores de nomes se propaguem na Internet e se configurem e tal. Então pode levar algumas horas ou pode acontecer imediatamente. Depende mesmo. Entretanto, o que podemos fazer Entretanto é carregar os nossos ficheiros para o nosso website. Vamos navegar de volta para a nossa conta do painel C e o que vamos fazer Se eles estão indo rolar para o topo e clicar no gerenciador de arquivos, vamos selecionar nosso nome, jogar nome de domínio e certifique-se de que você clique rota pública FTP também. E vamos com o nosso nome de domínio na lista. Aqui, clique em Ir e em seguida vamos bater html público aqui, e eu apenas navegar de volta para um nome de domínio apenas para ter certeza de que estamos no caminho certo. Ok, então estamos prontos para ir aqui. Agora podemos fazer upload de arquivos de um site aqui, e eles serão exibidos em um site quando as pessoas visitarem nosso site. Então vamos voltar para a área de trabalho dela. Vamos pegar nosso site. O que vamos fazer aqui é que eu vou encontrar a última lição onde nós realmente temos uma versão completa sobre um site, e eu vou apenas verificar aqui duas vezes para ter certeza de que um site realmente é a versão completa . Tudo bem. Parece que este é bom para ir. Então eu vou fazer é copiar todos esses arquivos, certo? Clique neles e eu vou clicar em enviar para a pasta Zip compactada. Isto vai levar os nossos ficheiros e guardá-los numa pasta que podemos carregar para o nosso website . Todos os que acabarem aqui, vou ter a nossa nova pasta e vou chamar-lhe Índice. Na verdade, vamos chamá-lo de um desmanche, só para eu saber exatamente o que é. Ok, então nossas pastas aqui agora, vamos voltar para a conta de hospedagem dela e carregar o upload. Escolha o arquivo deles. Encontre o caminho certo aqui, e faça upload do nosso arquivo para o nosso site. Isso vai demorar um pouco, dependendo da sua velocidade de envio. Mas quando terminar, me encontre aqui e continuarei com essa lição. Ok? Então, onde um site está quase completo aqui, vamos esperar mais alguns segundos para que ele termine. Não, vamos voltar e atualizar esta página. E agora eu posso ver são arquivos zip aqui. Vamos à direita. Clique nele e vá extrair. Vai extrair todos os ficheiros para o nosso html público outra vez. Você primeiro a página, e aqui podemos ver nossos arquivos do site aqui sobre dot html ou blawg contatado até mesmo a página de índice e página do portfólio. Então, sempre que alguém visita um site, eles eram cr index dot página html. Agora, nosso DNS ainda não está configurado, então eu vou esperar algumas horas, e então eu vou voltar e vamos ver se tudo está bom para ir. Então eu decidi esperar um dia inteiro, já que eu estava recebendo alguns herdeiros com o reitor dela e na verdade levou muito tempo para um site aparecer. Normalmente leva minutos. Mas só para que saibas, pode demorar um pouco. Então talvez dê um dia ou algo assim. Hum, mas agora vamos tentar ou o seu próprio ver se o nosso site funciona, ir a uma parada de desmancha e lembre-se, nós estamos ponto C A. Temos que ter certeza que você coloca ponto c en voila. Agora estamos ao vivo na internet, e nosso site está funcionando agora. Sempre que alguém digita o euro, ele é levado para o índice, a página HTML. E lembre-se, é sempre o índice dot html a k a. A página inicial que as pessoas foram levadas para o clique em nossas páginas individuais. Você pode ver se eles funcionam perfeitamente agora. Eu tive que voltar para nossa conta de hospedagem e tive que mudar nossa página, um, nomes para ah, nomes para ah, maiúsculas aqui porque quando eu fiz upload por algum motivo, eles carregaram em minúsculas. Então, se você clicar em suas páginas e você está recebendo como um erro, alguns pensam que voltar para a sua conta de hospedagem ou ir para o seu documento HTML e apenas mudar o seu sobre ponto h e-mail seu blog html dedo um minúsculo ou o que quer que você está ligando dois. E isso vai resolver o problema que eu tive antes. Mas podemos ver aqui que tudo está funcionando perfeitamente. E um site. Verifique todos os links aqui para ter certeza. Sim, está tudo bem para ir. Nosso site está agora disponível na unidade. Parabéns. Você acabou de criar seu primeiro site e você também concluiu este curso.