Design de site Construa um site de Web Parallax única página | Laurence Svekis | Skillshare

Velocidade de reprodução


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

Design de site Construa um site de Web Parallax única página

teacher avatar Laurence Svekis, Best Selling Course 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

24 aulas (2 h 13 min)
    • 1. Design de site Construa um site de Web Parallax única página

      2:04
    • 2. 1 Introdução ao site de página única Parallax

      2:53
    • 3. Recursos de curso 2

      7:35
    • 4. 3 Crie quadro de fio de site

      6:08
    • 5. 4 estrutura HTML criar Navmenu

      5:28
    • 6. 5 Criando seções HTML

      5:08
    • 7. Conteúdo de 7 titulares de lugar

      3:18
    • 8. 8 Aplicar CSS ao HTML

      4:26
    • 9. 9 Como criar uma barra de navegação da UL

      8:08
    • 10. 10 seções de tamanho de página inteira e padrões de segundo plano

      6:05
    • 11. 11 Adicionar imagens de fundo

      4:46
    • 12. 12 Faça seu texto se destacar

      4:59
    • 13. 13 Ajustando a barra de navegação para efeitos responsivos

      8:02
    • 14. 14 Atualizações e correções responsivas

      8:23
    • 15. 15 Navbar para telas pequenas

      3:25
    • 16. 16 Como adicionar rodapé e seções de atualização

      7:36
    • 17. 18 Como adicionar gatilhos de evento jQuery

      7:09
    • 18. 19 eventos de janela de ligação jQuery

      3:12
    • 19. 20 Adicionando biblioteca de ícones

      2:33
    • 20. 21 rolagem de animação com jQuery

      8:31
    • 21. 22 Slidemenu até jQuery

      3:08
    • 22. 23 Adicionar efeito Parallax

      6:37
    • 23. 24 Criar um formulário de contato

      9:56
    • 24. 25 resumo do site Parallax de uma única página

      3: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.

330

Estudantes

--

Sobre este curso

Guia passo a passo para construir um site de página única moderno do zero

Você quer construir seu portfólio de web e expandir seu conhecimento de design de web?

O conceito de design de web de paralaxe recentemente trending envolve o plano de fundo movendo-se a uma taxa diferente para o conteúdo de primeiro plano. Isso cria um efeito interessante enquanto o visitante rola para baixo no site.

Neste curso, apresentamos o conceito de web design para sites modernos. Como criar um quadro HTML, adicionar estilo CSS e aplicar interação dinâmica via jQuery.

Este curso é perfeito para qualquer pessoa que queira aprender sobre design da web e como criar sites personalizados modernos do zero. Tudo o que você precisa está incluído neste curso. Saiba como tudo se encaixa todos neste curso de aprendizado exclusivo baseado em projetos.

Construa um projeto da web real e adicione efeitos de animação legal. Este curso foi projetado para ensinar você passo a passo o que cada linha de código faz, como e onde aplicar o código para obter os resultados desejados.

  • Este curso fornece tudo o que você precisa para começar a usar web design.
  • Introdução e planejamento de projetos
  • Aprendizado de passo a passo sobre web design
  • Estruturação de página HTML projetando seu modelo de site
  • Como criar estrutura adequada para se preparar para CSS
  • Como aplicar CSS ao estilo que você website
  • Como criar efeitos no seu site
  • Como adicionar jQuery para conteúdo interativo dinâmico
  • Como adicionar animações à rolagem
  • usando o jQuery para verificar o local de rolagem do visualizador para criar navbar ativo
  • Ajustar e atualizar CSS

O que você recebe

  • Aprendizado passo a passo
  • O código-fonte está incluído
  • Recursos principais fornecidos
  • Trabalhe junto com aulas
  • Vídeo de qualidade HD
  • Instrutor experiente profissional

Este curso abrange o design da Web com uma introdução ao uso de jQuery para funcionalidade web
advanced o final do curso, você vai ter as habilidades e saber como criar um
site.Estou aqui para ajudar você a aprender a criar seus próprios sites e pronto para responder a quaisquer perguntas que você possa
have.Want saber mais, o que você está esperando para dar o primeiro passo. Junte-se agora para começar a aprender como você também pode criar sites hoje.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... 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. Design de site Construa um site de Web Parallax única página: você deseja construir seu portfólio Web e ou expandir seu conhecimento de Web design. Recentemente, os conceitos de Web design, como o Parallax, que envolve planos de fundo se movendo a taxas diferentes no primeiro plano Conteúdo cria um efeito interessante. Neste curso, vamos mostrar-lhe como criar este efeito Web dentro do seu próprio projeto Web. Nós vamos estar introduzindo o conceito de Web design para sites modernos, criando em cada equipe l quadro adicionando estilo CSS e, em seguida, aplicando interação dinâmica com Jay Query. Este curso é perfeito para quem quer aprender sobre o Web design e como criar sites personalizados modernos a partir do zero. Tudo o que você precisa está incluído neste curso. Saiba como tudo se encaixa neste projeto exclusivo. Experiência de aprendizagem facial. Construir um projeto de site real e em efeitos de animação legal. Este curso foi projetado para ensinar passo a passo o que cada linha de código faz, como e onde aplicar o código para obter os resultados desejados. Este curso fornece tudo o que você precisa para começar com Web design, introdução e planejamento do projeto, aprendizagem passo a passo do Web design cada para derreter a estruturação da página, projetando seu modelo de site. Criando estrutura adequada para se preparar para CSS, em seguida, aplicando CSS e estilo em seu site. Criando efeitos dentro do seu site, adicionando J. Cree para conteúdo interativo dinâmico, adicionando animações ao esquilo e, em seguida, usando J. Coury para verificar a localização da rolagem do visualizador para criar um ajuste de barra ativo agora e atualizando seu CSS. Você entra neste curso de aprendizagem passo a passo. O código-fonte está incluído. Falar recursos trabalhar ao lado das lições HD qualidade vídeo profissional experiente instrução. Este curso aborda Web design em uma introdução ao uso de Jake Worry para funcionalidade avançada . No final do curso, você vai ter as habilidades e saber como fazer um site. Estou aqui para ajudá-lo a aprender a criar seu próprio site e pronto para responder a quaisquer perguntas que você queira saber mais. O que você está esperando? Dê o primeiro passo, junte-se agora e comece a aprender como você também pode criar seus próprios sites hoje 2. 1 Introdução ao site de página única Parallax: bem-vindo ao nosso curso sobre como criar e projetar um site de paralaxe de página única a partir do zero . Meu nome é Lawrence, e serei seu instrutor para este curso. E estou tão entusiasmada por ter a oportunidade de apresentar este curso para vocês. Este vai ser um dos meus projetos favoritos em que trabalhei. E este vai ser um site muito atraente que você também pode criar. Vou mostrar-lhe como fazer isso passo a passo dentro deste curso, vamos começar começando com um novo design original para o site. Então vamos esboçar isso,sem fio, sem fio, meio e determinar como queremos que ele pareça e como queremos apresentar esse site que vamos entrar em nosso código HTML, projetar nossa estrutura HTML e apresentar nossa estrutura de uma forma que nós vamos estar preparando-o e pronto toe adicionar em nosso CSS e nosso estilo para nosso site e, em seguida adicionando em que CSS, ele vai transformar toda essa estrutura HTML em um funcionamento real e um que se parece com um site. Então este é o site que vamos construir do zero. E como você pode ver aqui, este site é totalmente responsivo. Então, sempre que estamos redimensionando o site, podemos ver que ele vai redimensionar dois tamanhos de tela diferentes. Portanto, não importa se é uma tela pequena ou uma tela grande. Temos diferentes maneiras de apresentar o menu, e vemos que a funcionalidade de rolagem está funcionando. E vou levá-los passo a passo, como criar um site como este do zero. Vamos olhar para CSS e HTML trabalhando juntos, e então eu vou apresentar Jake. Preocupe-se A. J. Coury é onde obtemos esta incrível funcionalidade animada onde obtemos esta funcionalidade de menu adicional onde está deslizando para cima e alguns efeitos muito legais que seus usuários e seus espectadores do site vai realmente apreciar s Oh, isso está tudo disponível dentro do curso. E se você não está familiarizado com Jay Query, então não se preocupe, porque vai ser muito leve sobre a preocupação do Jake. Eu não vou entrar em muitos detalhes, e eu vou explicar o que cada um dos comandos de consulta J vai estar fazendo e como isso vai afetar nosso site e eu vou te mostrar em tempo real o que está fazendo. O Eso. E à medida que adicionamos isso, vou mostrar a vocês quais efeitos diferentes vão ocorrer dentro do site e do projeto Web, bem como no CSS. Como um assentamento no novo CSS, você vai ver este site se transformar em um site utilizável real. Então tudo isso todo o código-fonte está incluído que eu encorajo você a experimentá-lo por si mesmo e ver o que você pode criar a partir do que você aprende ao longo do curso. Então, quando você estiver pronto, vamos começar a criar este site incrível do zero. 3. Recursos de curso 2: bem-vindo ao nosso curso sobre a construção de um site de página única a partir do zero. Então, dentro deste curso, nós vamos estar construindo um site que vai ser uma paralaxe tem um efeito de paralaxe para as imagens de fundo. Então alguns dos recursos que vamos utilizar dentro deste curso. Então vamos usar colchetes como nosso editor. Então, se você já tem um editor, você pode ir em frente e usar esse. Se você quiser. Tente alguma coisa. Você sempre pode verificar colchetes, mas eu vou estar usando colchetes e eu tenho que aberto aqui no lado esquerdo dentro da tela s Oh, este é um editor de código aberto da Adobe, e é um editor muito bom para utilizar para criar um Web sites sobre conteúdo HTML, CSS e assim por diante. E a coisa realmente precisa agradável sobre suportes. Tem uma prévia de vida. Então o que ele faz é que me permite realmente adicionar conteúdo aqui, e então eu posso vê-lo exibido em tempo real. Há um recurso muito agradável que está disponível entre parênteses, e eu também vou estar utilizando isso dentro do curso. Então outro recurso que vou usar é que vou usar Zampa agora. Você não precisa necessariamente instalar isso. Isto é apenas para os propósitos deste curso, e eu tenho que correr em segundo plano. E o que essencialmente exemplo faz é que ele me permite executar um servidor em segundo plano, e isso me dá a capacidade de ir para o host local, que, quando apontado para o diretório correto, exibe automaticamente esse índice página. Então eu vou usá-lo. Eu ao longo do curso. Vai ser executado em segundo plano. Se você está interessado em configurar isso, ele permite que você crie um ambiente PHP com um banco de dados e todos os sinos e assobios que você normalmente tem em um servidor dentro de sua máquina local de empréstimo. Então está disponível Windows, Linux e OS X, e tem muitas opções para ele. E, como sabemos, quando você está desenvolvendo HTML JavaScript e CSS, você só precisa de um navegador para executar, não de código, então você não precisa necessariamente instalá-lo. Mas é uma coisa boa que o dedo tem quando você está desenvolvendo sites. E quanto ao navegador que estamos usando, vamos usar o Chrome. E a razão pela qual estou usando cromo é que ele tem essas ferramentas de desenvolvimento aqui. E o que duelos de profundidade faz é nos dar informações adicionais sobre a página da Web. Então você vê, nós temos o modelo de caixa aqui para que possamos selecionar qualquer elemento dentro da nossa página da Web, e podemos obter informações adicionais de estilo. Podemos obter algum código fonte, ter estilo. Podemos ver o que ouvintes de eventos podemos ver os pontos de ruptura do amanhecer e podemos ver propriedades. Então as propriedades do amanhecer do próprio site, e vemos que temos todos esses ouvintes de eventos aqui. E essencialmente, o que as propriedades da madrugada são é que elas são utilizadas dentro do JavaScript. E isso é algo o Domus algo que é construído pelo navegador. Então, quando ele vai para o seu site, então para esta instância index dot html, ele lê através de todo esse código HTML, e então ele renderiza e cria o que é chamado de objeto de documento que se relaciona com a página. Então, essencialmente, ele tem todos os elementos, todas as propriedades de cada elemento, e então em JavaScript nós aparecemos e podemos manipular isso. Então esse é o navegador que eu vou usar este cromo e eu também vou estar usando alguns recursos adicionais. Eso eu vou estar usando algumas imagens de espaço reservado aqui porque estamos criando um efeito de paralaxe . Então eu quero usar uma imagem porque esta vai ser a parte mais visível desse efeito de paralaxe. Também vamos usar a polícia para imagens. Então eu acho que com os pixels de Loren, às vezes as imagens carregam um pouco devagar. Então é aqui que mudamos para o lugar. Segure isso. Então ambos fazem a mesma coisa. Eles nos dão imagens de espaço reservado e isso é ideal quando você está desenvolvendo seu site porque isso lhe dá a capacidade de criar espaços reservados onde, se você não tem os recursos de imagem prontos à mão, então você pode simplesmente soltar o , e você pode desenvolver seu site em torno disso e, em seguida, quando você obter os ativos, você pode simplesmente despejá-los em seu site ao longo das mesmas linhas que imagens de espaço reservado. Nós também precisamos de texto de espaço reservado, então eu estou apenas gerando algum texto Laura itsu por ponto bang DK tem um gerador muito bom aqui. Eso lá você vai encontrar um número destes on-line e aqueles que eu sempre procuro ter a nossa capacidade de exibi-lo em HTML. Fonte. Eso Vemos que alguns deles não são exibidos em cada 10 mais fonte, por isso é um pouco irritante quando você não tem essa opção. E é por isso que eu costumo escolher aqueles geradores que podem exibi-lo em HTML. Fonte. Temos aqui algumas opções para parágrafos, frases, palavras. Então essas opções típicas do ar e realmente apenas cria um efeito agradável, porque quando adicionamos este texto em branco apenas padrão, é um outro espaço reservado para o nosso site e faz nosso site parecer um site real em vez de Apenas um campus vazio, vazio. E também é mais difícil projetar em torno desta linha em branco e de um dos outros recursos que vamos usar. Então eu usei um número de ferramentas diferentes praticamente qualquer software de imagem que você poderia fazer isso em. Quero dizer, é aqui que criamos nossas armações de arame. Você pode até pegar um pedaço de papel e escrevê-lo com um lápis. Basta esboçar aproximadamente como seu site deve ser quando você está quando você começa a criá-lo. Então crie essa simulação de seu site s para que você possa ter um esboço melhor. E quando você está criando seu código de site que você pode projetar para ele é O neste curso nesta lição, eu vou estar usando este aqui. Mockups dot com app dot marca ups dot com Eso este, Eu acredito que s eu estou apenas usando uma versão gratuita agora. Alguns não sabem quanto poder eu tenho com isso, mas novamente, realmente não importa qual recurso você está usando se você quiser usar o mesmo que eu estou usando. Então este é o site. Você vai ser capaz de ver isso aqui no canto esquerdo na barra de endereços. Eso é isso para os recursos que precisamos para começar e, em seguida, o resto é apenas código HTML e CSS, e vamos colocar isso dentro do nosso site e construir nosso site básico. A partir daí, também vamos ser adicionando em J consulta e javascript, a fim de promover fornecer alguma funcionalidade adicional quando estamos rolando. Então, esses efeitos de rolagem animados agradáveis e isso está tudo disponível em uma consulta. É realmente fácil e direto anúncio Toe Então se você não está familiarizado com Jake se preocupar eu vou Vai ser realmente básico e direto e você pode praticamente é copiar e colar o que eu estou fazendo dentro das lições também. Eso esta é parte opcional Seu site vai funcionar sem ele também. I Ele lida com a capacidade de resposta do site para os menus. Então, a fim de adicionar isso em, isso é uma coisa boa para ter dentro do seu site. Então, isso vai alternar a barra de navegação e isso vai ser consulta G. Então vou adicionar essas bibliotecas de consulta G e configurar isso. E não se preocupe, vou mostrar-lhe como fazer tudo isso HTML CSS e, em seguida, adicionar sua padaria para funcionalidades adicionais dentro do curso. Então, quando estiver pronto, abra seu editor e vamos começar a criar nosso site do zero 4. 3 Crie quadro de fio de site: vamos começar a criar um site a partir do zero com uma página html index dot e que vai ser um site de página única. Eso só vamos estar usando índice dot html. Não vamos criar páginas HTML adicionais, então todo o conteúdo estará contido neste arquivo. Além disso, nós vamos estar ligando sobre o estilo dot CSS. Então isso é opcional porque este é um site de uma página, mas apenas forma ou legibilidade e para a limpeza do nosso site e melhores práticas, nós links para o estilo dot CSS. Então eu tenho que aberto aqui em baixo arquivo completamente em branco e nós vamos estar adicionando em todos os elementos de estilo conforme necessário à medida que avançamos através das diferentes lições. Então a primeira coisa que queremos fazer quando estamos criando nosso site é começar com um plano. Então, a fim de criar um plano para um site, há uma série de recursos diferentes. Você pode usar uma caneta e papel, escrevê-lo em um pedaço de papel e apenas ter uma idéia geral para ajudar a guiá-lo como você deseja que seu site seja projetado agora. Você poderia entrar em um monte de detalhes nisso, uma ondulação que você poderia rotular tudo. Se você estiver criando formulários, há muitas opções que você pode definir como todas as suas páginas se encaixam e assim por diante. Há muitas opções diferentes sobre como você pode criar seu site. Mas eu vou apenas fazer um esboço aproximado para a apresentação deste curso para que tenhamos uma boa idéia de como queremos que nosso conteúdo apresente. Agora, este vai ser um site de uma página, então pode ser um pouco mais difícil desenhar aqui dentro do design. Então, essencialmente, o que nós vamos ter é que vamos ter um número de seções, então nós vamos ter nosso site principal que vai ser visível dentro do navegador. E a outra parte que queríamos adicionar é, eu queria adicionar na barra de navegação e nessa barra de navegação. isso vai Oh, ser algo que podemos criar que vai parecer diferente em um dispositivo móvel . Então eles têm uma barra de navegação aqui e nós provavelmente vamos para ir com cinco páginas soa muito bom para mim. Então vamos configurar nossa barra de navegação original aqui em cima alguns tornando-o um pouco menor, então ele se encaixa na página. Agora, você também pode se envolver realmente em quantos pixels e quais suas dimensões. Então, se você escrevê-lo, se você desenhá-lo em uma grade como moda, há muito mais opções e você pode ficar realmente detalhado sobre como tudo se encaixa . Mas eu só vou criar são essencialmente um esboço bastante áspero. Eso nós não vamos realmente ir pelo pixel com porque nós vamos fazer esta página responsiva, e vai ser 100% através, no máximo. Talvez vai tomar até 12 80 picaretas nas telas maiores e, em seguida, para baixo de 12. 80 nós vamos ter apenas cheio com do conteúdo que está sendo apresentado. Então ele vai olhar diferente em um dispositivo móvel onde essencialmente eu quero que este menu de navegação para baixo e apenas ser um ícone clicável lá, e então nós vamos apresentar o menu de navegação. Quando for clicado, vamos apresentá-lo horizontalmente. Então vamos apresentá-lo assim no dispositivo móvel. Sem essa tela. Então talvez o que eu vou fazer para que possamos ter tudo em uma página é que eu vou fazer isso diminuir se eu puder um pouco mais. E eu tive que encolher aquela mensagem ali. O tamanho da fonte, a fim de obter isso para acomodar eso o que eu quero fazer Copiar que colar para que nós essencialmente temos que tela. Então este vai ser o grito para a morte. E eu posso trazer outro retângulo. E isto é o quê? Como queremos que ele seja exibido em dispositivos móveis. E eu vou mover este, Teoh o topo trazer para a frente e assim por diante um dispositivo móvel. Nós vamos ter nosso pequeno ícone de menu, e nós vamos ter um pop-up, mas isso vai atravessar todo o caminho, e eu realmente deveria diminuir a largura aqui porque nós queremos que nossa tela móvel seja completamente responsivo. Então, essencialmente, isso é o que vai parecer em uma tela móvel e rapidamente ver se temos nosso pequeno ícone lá para o celular. Ele vai aparecer para os ícones aqui e rapidamente dar uma olhada e ver se nós temos o nosso ícone de menu típico então normalmente você teria como as três barras. Então há duas barras e apenas vendo se nós realmente temos um três bar aqui que está disponível e lá está. Aqui está o ícone do menu dizendo que um dragão solte isso. Então, essencialmente, este é o nosso design móvel eso É um design de uma página, então todo o conteúdo vai estar lá embaixo. E então, enquanto rolamos, parte do conteúdo vai funcionar em um efeito de paralaxe. Este é o menu aberto. E talvez possamos até mostrar-lhe subir este menu aqui em cima até o topo ali porque eu quero que ele se sente no topo esquerdo e, em seguida, sair do seu nós vamos apenas fazer e nós podemos ir e adicionar em um retângulo lá para indicar onde vamos colocar o conteúdo. Então ele vai se livrar disso e apenas adicionar em outro retângulo. E então este é essencialmente o lugar onde o conteúdo vai se sentar. E quando rolarmos que vamos manter o nosso menu aqui mesmo no topo. Então isso é que é este design básico e isso é essencialmente o que vamos fazer com que nosso site pareça quando ele está pronto e funcionando e completo. Então, na próxima lição, vamos começar a projetar este site. Então, essencialmente aqui está o conteúdo e então nós rolamos algumas dessas imagens e vamos usar imagens de fundo e eles vão ficar em segundo plano para criar nosso efeito. Então, na próxima lição, vamos começar a codificar nosso site. 5. 4 estrutura HTML criar Navmenu: vamos abrir nossos editores e começar a criar nosso HTML. Então, na última lição, olhamos para como podemos criar um quadro de arame e, essencialmente, criamos um plano de como queremos que o nosso website pareça. Então, a visualização móvel aqui à esquerda da área de trabalho onde a exibição de tamanho de tela maior aqui no lado direito. Então isso é, ah, bastante básico. Há apenas algumas seções que são seções visíveis, e essa é a barra de navegação e, em seguida, o resto do conteúdo. E isso é típico de sites de uma página onde você teria apenas uma área de conteúdo principal e área de navegação. Então vamos construir nosso site de acordo. Então, essencialmente, quando olhamos para isso, podemos ver que temos uma área de cabeça e, em seguida, uma segunda área div. Então, segundo áreas principais de conteúdo, então essencialmente duas áreas de conteúdo diferentes e, em seguida, quando ele re tamanhos, ainda temos que áreas de conteúdo. Temos a nossa cabeça e temos o nosso conteúdo principal. Então isso é bastante fácil de fazer e bastante simples, e é por isso que o enquadramento de fio é importante porque você quer ser capaz de fazer o seu site para planejá-lo de acordo. E quando u seção estes off, Quando você olha para os dois diferentes essencialmente as duas seções diferentes do seu site, você pode fazer isso com bastante facilidade agora. Outra coisa, também, que a maioria dos sites terá. Eles terão uma área de rodapé. Então isso é opcional. Eso eu normalmente não vou incluí-lo dentro do meu design original. Eu poderia colocá-lo na parte inferior de todo o conteúdo por causa do fato de que quando eu tenho minha navegação principal aqui em cima, eu não quero desordenar minha área de rodapé bem com um monte de conteúdo para que eu possa ter um desses ligados ao área inferior e, em seguida, não iria puxar para cima todo o conteúdo do rodapé. E isso depende de como você deseja projetar seu site. Há uma abordagem diferente para isso. Mas essencialmente o que eu vou fazer para esta lição é eu vou trabalhar com esta área de conteúdo principal configurada. Então a primeira coisa aqui em cima que percebemos é que temos um menu aqui e temos uma barra de navegação e projetando a partir da primeira perspectiva móvel, vemos que temos nosso ícone de navegação aqui, e temos nossa navegação principal. Então nós essencialmente temos duas seções dentro do menu. Então vamos em frente e criá-los. Então, criar um diff e o rígido vai conter todo o conteúdo do menu principal. Então vamos chamá-lo de menu e fechar isso, e então aqui dentro, vamos criar outro DIV, e este vai ser o ícone do valete ou o ícone menor que vai aparecer. Então agora pelo milho, e aqui é onde temos nossos ícones. Então, por enquanto, eu vou deixar um espaço reservado ícones maiúsculos lá e então eu vou construir outra seção e esta não vai ser a nossa seção de navegação. Então eu vou usar a estrutura html cinco para desenvolver sites onde nós, em vez de usar dibs, eu posso usar knaves e nós usamos cabeçalho aqui. A swell Seles são nomes semânticos para elementos, e isso dá mais significado para os diferentes elementos que temos dentro da nossa página Web. Normalmente, quando você está configurando um menu de navegação para fins de legibilidade, criamos em um formato onde temos listas. Então nós temos uma nova lista ordenada, e então cada um dos itens de navegação vai ser um item de lista. Então nós vamos ter itens de lista, e então eles vão ligar para fora para diferentes partes da página da Web. Então vamos ter seções diferentes representando as diferentes áreas de nossos sites de página única . Não estavam usando h Rafto link para outro arquivo. Nós vamos estar apenas slinking para fora Teoh dentro da página web. Então, essencialmente, podemos nomeá-los ou podemos apenas chutar pegos, criá-los como seções. Então, o 1º 1 talvez pudéssemos pegar, poderíamos dar um nome de casa e chamar essa de casa para ser consistente, certo? E vou copiar e colar os eso. Podemos ter algo aqui que possamos ter para chamar este de barco. Também podemos ter algo chamado serviços e portfólio. E, por fim, vamos adicionar a nossa área de contacto, por isso vou mudar isto para minúsculas só para ser consistente. Então, essencialmente, essa é a nossa parte de navegação do nosso site. E eu sei que agora não parece nada. É só uma lista, mas vamos. Quando adicionarmos esse estilo, ele vai realmente tomar forma e começar a parecer mais como um site inteiro. Então, a próxima lição vamos continuar a construir nossa estrutura HTML, onde adicionamos nas diferentes seções para as áreas de conteúdo que criamos os links para aqui dentro da seção de navegação, modo que está chegando no Próxima lição. 6. 5 Criando seções HTML: nesta lição, vamos continuar a construir nossa estrutura HTML para nossos sites. E o último que olhamos, como podemos ligar Teoh Essencialmente, vamos ligar para diferentes seções abaixo nesta div aqui. E eu vou dar essa div no i d do Rocker. Então isso é essencialmente s para que eu possa vincular a ele dentro do CSS. E eu sei que todas as seções dentro do rocker são feitas para ser seções completas dentro de nossa página web. E é assim que você vai dividir todas essas áreas diferentes dentro do site. Vou nomeá-los como seções e, em seguida, e incluir o conteúdo abaixo que nos elementos da seção. Então vamos chamá-lo de seção e vamos dar-lhe uma identificação e é aqui que ligamos para o eu particular que indicamos aqui no menu de navegação. Então vamos dar-lhe um I D. E eu também quero dar-lhe uma classe para que eu possa novamente dividi-los e realmente ser capaz de selecioná-los melhor dentro do CSS. E esta é uma das partes importantes sobre quando você está criando seu site e seu processo de seleção dentro do CSS que você tem a capacidade de fazer essas seleções e torná-lo bastante fácil. Claro, medida que você progride com CSS, você pode ficar mais complexo em ir para baixo e atravessar o pai e descer e isolar todos os diferentes elementos que você deseja. Aplique o estilo também. Então, dentro da seção dentro da seção inicial, podemos criar um número de diferentes áreas menores, seções menores. Então podemos ter algo como ter uma área de direção lá, então talvez chamemos de lar por enquanto. E então nós podemos ter, mas artigo eso primeiro artigo, e nós temos um monte de conteúdo aqui blá, blá bloco. E nós vamos atualizar isso com algum conteúdo padrão mais tarde. Então eu salvei isso, e nós poderíamos ter outro par outro outro artigo lá onde estes também poderiam ser parágrafos bem, ou poderíamos ter parágrafos dentro dos artigos e assim por diante. Então, tudo dependendo do tipo de conteúdo que você deseja apresentar dentro do seu site. Então, por enquanto, o que eu vou fazer é e também vou colocar em um hiperlink lá só para torná-lo mais interessante. Então este aqui vai realmente hiperlink para fora s então nós temos alguns. Então agora eu posso copiar essas seções e eu preciso criar na verdade cinco seções diferentes que vão fazer o meu site, e então nós vamos ser capazes de percorrer por elas à medida que avançamos para o site. Então este aqui vai ser sobre, e eu vou atualizar isso para uma votação. E talvez este só tenha um artigo, e talvez tenha alguns parágrafos lá dentro. Então eu poderia dividir isso com parágrafos e dividir isso com um parágrafo, A inchar. E é isso que colchetes está fazendo aqui. Está fechando isso automaticamente. Então, se você está se perguntando como ele está fechando automaticamente ajustar colchetes que está fazendo isso . Eso próxima seção tivemos serviços, então talvez apenas chamá-lo de serviços aqui em cima, e podemos ter algumas informações de serviços que oferecemos em nosso site s Oh, talvez este tenha uma lista inteira de um monte de serviços diferentes que nós oferta seguinte. Estamos olhando para o nosso portfólio. Então talvez isso possa ser uma Siris de imagens ou links clicáveis, e assim por diante. Então derramado, negócio completo e apenas dar-lhe o mesmo portfólio convenção de nomenclatura. E então aqui podemos ter uma Siris de imagens. Então imagem e vai deixar isso agora é um espaço reservado. Então nós podemos ter um u. l e um monte de itens da lista, e cada um desses itens da lista é uma imagem. Então eu vou apenas copiar este seria aqui e listado lá. Então essa é a nossa área de portfólio aqui. E então, finalmente, precisamos criar nossa seção de contato. Oh, isso vai ser outra seção semelhante ao que fizemos antes. E aqui podemos ter um formulário de contato ou algo assim. Então, talvez seja apenas um parágrafo ou uma div e entre em contato conosco formulário de contato, e então podemos adicionar nosso formulário de contato html dentro deles Então agora vamos voltar para a nossa página da Web e atualizá-lo. Essencialmente, temos um layout muito bom de como estamos apresentando nosso site, e o próximo passo será transformar tudo isso em um real funcionamento de uma página única site ISA transformando nossa estrutura HTML em uma página da Web, e isso está chegando no próximo set uma lição. E, claro, vamos adicionar conteúdo também. Então tudo isso está chegando. 7. Conteúdo de 7 titulares de lugar: nesta lição, eu queria apenas atualizar nossa página HTML básica e adicionar algum conteúdo adicional porque agora nós temos apenas alguns blah, blah, blah, e mesmo quando nós transformá-lo, é não vai parecer exatamente certo. Então vamos abrir nosso navegador aqui e vamos criar algumas imagens. Então eu vou copiar o que o espaço reservado é imagens aqui. Então, esses “thes “serão indicativos de carteiras talvez diferentes. Temos sites diferentes que queríamos mostrar. Talvez até tenhamos algum conteúdo aqui sob os serviços. Então nós não temos imagem aqui, então eu vou transformar esse 600 por 150 em Além disso, eu vou precisar de algum texto falso. Então, indo para o meu gerador aqui, vou torná-lo mais curto. Gere e nós vamos copiar e colar isso e eso em vez de ter tudo isso. Vamos apenas adicionar que emitem que o conteúdo é outro aqui que talvez queiramos gerar dois parágrafos, talvez médio. Então gere esse fora. Certo, acabou um pouco longo, mas não, temos nossos dois parágrafos. Eu vou cortar um pouco porque eu acho que isso é talvez um pouco demais para o que precisamos s Nós temos a seção sobre, então eu vou ter apenas dois parágrafos vai mantê-los curtos e apenas gerar isso e uma cópia de meu hiperlink lá, se livrar disso e, em seguida, adicionar alguns hyperlinks aleatórios aqui em toda a minha página porque hyperlinks é outra coisa. Quando você está projetando isso, você deve sempre incluir dentro de seu design s para que você possa apenas obter uma melhor sensação de como o conteúdo do seu site vai ser apresentado. Então vamos agora dar uma olhada no nosso site e bem, ele parece totalmente diferente. Temos um monte de coisas aqui e parece mais um site de verdade. Então temos alguns problemas de espaçamento entre o texto âncora. Então eu vou cuidar disso agora mesmo. Então vou fazer um achado e substituir isso, e eu vou substituí-lo por um espaço lá para que ele se apresente um pouco melhor. Então isso foi uma coisa que eu perdi na cópia. Então agora temos algo que se parece mais com um site, e isso é o que eu conheci por ter este conteúdo titular lugar porque ele realmente ajuda com a estrutura em seu site e na próxima lição, enfraquecer salto em nosso HTML e realmente começar a construir o terno e tê-lo representado como ele seria quando temos o nosso site completo. E então tudo o que teríamos que fazer é criar esse conteúdo atualizar todo este lugar, coisas antigas com um conteúdo real sobre o nosso site e então estaríamos prontos para ir e lançar o site. Então, a próxima lição vamos entrar nas coisas mais interessantes quando aplicamos o estilo CSS ao nosso site. 8. 8 Aplicar CSS ao HTML: Então esta lição eu quero focar em nosso HTML e construir nosso site para torná-lo realmente mais parecido com um site. Então, vamos abrir nosso arquivo CSS. E lembre-se novamente, nós temos ligado aqui no topo foram ter feito link rehl estilo folha de estilo ponto CSS. Então, agora o que fizermos dentro da folha de estilo vai propagar-se para a nossa página principal de índice html e qualquer outra página que realmente vincula a essa folha de estilo. Então, primeiro de tudo, queríamos olhar para o nosso cabeçalho e aplicar algum estilo para o cabeçalho. E a maneira que eu costumo trabalhar com CSS é que vou começar com os tanques de nível de conversa, então corpo. E então talvez se tivéssemos alguma coisa de hiperlink, tínhamos alguns parágrafos básicos e assim por diante. Poderíamos definir todo esse estilo aqui em cima. Você também muitas vezes só vê as pessoas definindo suas tags H. Eles estão dirigindo etiquetas. Então o H um h dois e assim por diante. Então tudo isso pode ser feito aqui no topo. Eso, por enquanto. Vou deixar isto em branco agora, e vou actualizá-los à medida que passarmos pelo curso. Então, agora, nada lá dentro agora. E também, eu vou adicionar um pouco de espaçamento aqui para que o nosso novo estilo não encolha automaticamente para o fundo quando nós o salvarmos. E isso é algo que colchetes está fazendo novamente porque está embelezando o código à medida que salvamos e digitamos lá. Então agora vamos começar com a nossa área de cabeçalho S O cabeçalho r. Só temos um cabeçalho principal. Posso acessar esse cabeçalho. Se você estiver reutilizando cabeçalho em qualquer lugar dentro do seu site, então talvez dar-lhe uma idéia. Então, apenas para que possamos reutilizar cabeçalho se a necessidade estiver lá. Então vamos acessar cabeçalho e aplicar algum estilo para o cabeçalho. Então talvez possamos dar-lhe uma altura padrão porque queremos que ele seja fixado no topo. Então é aqui que precisamos especificar a quantidade de pixels. Queremos que o cabeçalho ocupe. Queremos uma posição que a posição é fixa. Então isso vai manter o cabeçalho no topo, não importa o que está com. Então dissemos nossa altura e queremos nosso com, então queremos que ele vá inteiramente através da página principal e porque temos uma posição fixa, então vamos atualizar esses para que eles fiquem juntos. Então, quando se trata de corrigir posição, enfraquecer conjunto onde queremos uma posição que eso nós Idealmente, queríamos sentar-se no topo zero picaretas. Queríamos sentar esquerda zero picaretas e s Então é aqui que estamos posicionando esse cabeçalho, esse cabeçalho. Então, vamos refrescá-lo e vemos que é puxado ali para o lado esquerdo. E agora, imediatamente, não há muito que possamos ver com o cabeçalho porque ele está apenas ocupando essa altura e com Então vamos dar-lhe uma cor de fundo para que possamos vê-lo onde tínhamos dado uma borda Por enquanto. E provavelmente vamos querer remover isso à medida que progredirmos. Mas por agora, vamos sair da fronteira em torno dele para que possamos realmente ver onde nosso cabeçalho está sentado . E também eu tenho que dar-lhe uma cor de fundo para cor de fundo e eu tinha um trabalho fora da escala de concordo s. Então esta é uma das coisas que você pode fazer quando você está projetando seus sites para trabalhar fora de um esquema de cores em escala de cinza para que quando estamos quando estamos aplicando nosso estilo que vemos que podemos adicionar as cores e os tons mais tarde. Vamos salvar nosso cabeçalho. Portanto, não se esqueça que atualizamos nosso arquivo HTML. Então precisamos dizer que o Ritz o atualize e agora podemos ver como ele se parece. Então não exatamente como o cabeçalho do nosso design, mas ele vai chegar lá. Prometo que faremos com que pareça exatamente do jeito que queremos dentro do nosso design original. Então precisamos que nós toe atualizar como o menu de navegação é apresentado porque queremos, em última análise, queremos esconder o ícone. Queremos puxá-lo para o lado direito e queremos um estilo. Todas estas listas de itens de uma forma mais apresentável. Então ele realmente se parece com um menu de navegação. Então isso está chegando e aplicando esse CSS, podemos transformá-lo magicamente usando CSS. E isso está chegando na próxima lição. 9. 9 Como criar uma barra de navegação da UL: nesta lição. Quero atacar a nossa barra de navegação. Então nós temos um novo eu d ouvir de menus para que possamos trabalhar fora disso, a fim de identificar todo aquele recipiente lá de todo o conteúdo do menu E aqui é onde podemos aplicar algumas propriedades de menu lá, então trabalhando para baixo a partir do cabeçalho do corpo e Temos o nosso cardápio lá. Então, por enquanto, o que eu quero fazer é me concentrar nessa navegação. Então o carro de navegação, o ícone do agora, é na verdade algo que precisamos esconder, e vamos trabalhar a partir daí. Então vamos dar uma olhada nisso primeiro. Ícone tão clássico agora. Então, selecionamos classes com o período, e o que queremos fazer é não exibir nenhuma nele. E também queremos tornar o tamanho da fonte bastante grande porque vamos usar no ícone lá e eso por padrão. Provavelmente não vai ser muito grande, então talvez pudéssemos usar o E.M. E.M Então isso vai ajudar a redimensionar isso. Mas eu não mostrei nenhum. E por padrão, eu não quero que ele seja exibido quando nossa tela é grande e mais escrito neste menu. Então, quando eu atualizá-lo aqui e eu preciso salvar isso também e eu só rapidamente preciso adicionar em um espaço lá bem Eso Agora vemos que isso desapareceu e podemos continuar a construir nossa barra de navegação no menu. Eso isto só vai ser acessado via valete e nós vamos flutuar o valete até os locais da mão direita. Vamos usar carros alegóricos. Então isso vai puxar o menu de navegação para a direita, e é exatamente onde queremos posicioná-lo. E agora estamos prontos para começar a aplicar algum estilo. Então, o que transformou isso? Livrar-se desses itens de lista e transformá-lo em um menu de navegação real? Eso, vamos dar uma olhada. Então eu vou selecioná-lo desta maneira novamente. E você l So Travers todo o caminho para baixo. E, claro, eu poderia dar a idéia do Knaven. Eu poderia dar a identidade identidade e acessar dessa forma também. É uma série de maneiras diferentes de acessar eso por padrão. Sua lista A Norden vai ter algumas propriedades padrão para ele, então eu vou apenas remover aqueles que eu iria eliminar essas margens. Provavelmente não vai ver muita diferença agora, mas eles estão se livrando dessas margens padrão. Então, se você tivesse puxado para a esquerda, nós provavelmente veríamos que agora ele iria mudar e nós estamos nos livrando desses padrões. Eso, o próximo que queremos dar uma olhada é os itens da lista. Então, agora, uh, listar itens e queremos definir algumas propriedades. Então é aqui que realmente fazemos toda essa transformação de como queremos apresentá-los. Então, se quisermos que eles se empilhem à esquerda um do outro, eu posso flutuá-los para a esquerda. Eu queria atualizar esse estilo de lista, e eu quero me livrar do tipo de estilo de lista, e eu vou defini-lo para nenhum. Então esses são aqueles pequenos pontos redondos lá. Assim que guardamos isso e atualizamos, vemos que agora nos livramos dos pontos de que nos livramos. Nós os flutuamos para a esquerda, modo que os alinhou horizontalmente em vez de verticalmente. E agora o que precisamos fazer é talvez adicionar uma fronteira para que possamos diferenciá-los. E isso pode ser contra algo que podemos querer nos livrar em algum momento s. Então tudo depende de como você está estilizando seu site. Então agora nós temos um bom cardápio necessidade apresentado, e há algumas coisas que ainda não parecem bem. E porque temos todos os hiperlinks em, há para que possamos realmente acessar isso e aplicar algum estilo a esses hiperlinks. E esta é provavelmente a melhor maneira de fazê-lo porque isso aplica essa propriedade diretamente a este elemento. Então não para o pai, mas para o que está dentro. Então gostamos de trabalhar com o último elemento que queríamos utilizar e todo o caminho para baixo. Então queremos exibi-lo como um bloco, e isso vai dar-lhe mais de uma sensação de caixa e olhar para Ele é tão pouco de uma diferença. Essa é uma diferença notável. Mas isso ajuda com o estilo eso sempre que vamos adicionar em preenchimento também para torná-lo sair um pouco mais de decoração de texto. Isso se livra do subjacente. Então, quando eu atualizar Ok, então eu acho que há um problema lá com o lado anterior vida para re ligar que. Então agora temos decoração de texto. Nenhum se livrou desse subjacente. Vamos adicionar em alguns potting mídia ir com 10 picaretas, potting. E agora quando eu digo que então agora ele está começando a olhar cada vez mais como um menu de navegação real s. Então outra coisa que talvez devemos aplicar é uma cor de fundo, modo que se destaca do resto da barra de navegação. Então vamos ficar com nossos padrões aqui, esquemas de cores padrão e talvez ir com uma cor escura e, em seguida, vai transformar a cor das fontes em uma cor branca. Então agora transformamos esses itens da lista, mas uma coisa ainda está faltando. Ele realmente não age como um menu de navegação. Quando você passa o mouse sobre ele, você pode ver que eles são clicáveis, e ele está realmente indo para as diferentes seções. Mas o problema aqui é que eles não são realmente. Normalmente, sempre que você vê algo ativo em uma página da Web, algo acontece quando você passa o mouse sobre ela para que possamos adicionar esse estilo também. E isso é muito fácil de fazer para adicionar esses efeitos dinâmicos realmente agradáveis e fazer algo interessante acontecer para o seu usuário quando eles estão chegando a isso quando eles estão pairando sobre. Então aqui, geralmente o que eu gosto de fazer é reverter as cores. Eso fazer uma mudança bastante drástica. Talvez fazer isso azul ou algo assim. Então, ele realmente se destaca. Eu sei que eu disse, grande escala, mas depende de como queremos apresentá-la. Talvez pudéssemos, de fato, apresentá-lo como branco ou fazer isso fora do peso. E então, sempre que passarmos sobre ele, torná-lo mais branco. Então, talvez façamos isso. Vamos reverter estes. E em vez de branco, vou fazer isso em branco. Então este é um tom de Dee Dee Dee Branco. Talvez seja assim. Eles não se destacam imediatamente, mas quando sempre que pairamos sobre eles, eles se destacam. Mas também podemos ousar o texto, se quisermos. É uma série de opções diferentes aqui que estão disponíveis para nós sempre que passamos o mouse sobre elas. Ele agora se parece com um menu real. Então, a próxima lição vamos continuar a construir isso e vemos que ele já está funcionando sempre que clicamos nos links. E isso é o que eu quis dizer quando nós nem mesmo antes de aplicar o JavaScript, vemos que temos essa funcionalidade agradável quando clicamos, ela automaticamente traz para a âncora, e isso é tudo por padrão dentro do HTML. Então não há nada, uh, realmente acontecendo aqui além do HTML da rua, onde estamos ligando para os hiperlinks e a página da Web é inteligente o suficiente para saber que sempre que você clicar nisso olhando para o hash e sabe que estamos procurando um elemento de ação Nye dentro da página da Web e, em seguida, ele simplesmente vai para que ele é cresce para o topo. Então, quando um cozinheiro sobre, vemos que o topo de cerca está atingindo o topo dos serviços está escondido, então vamos ter que fazer alguns ajustes para isso. Mas vemos que agora temos algumas funcionalidades dentro da nossa Web construídas. Então, a próxima lição vamos continuar a twittar isso e construir isso e realmente transformar isso em umsite agradável e responsivo, site agradável e responsivo, adicionar algumas imagens de fundo e adicionar esse efeito de paralaxe que estamos olhando para apresentar dentro do nosso site build. Então tudo isso está chegando no próximo conjunto de lições 10. 10 seções de tamanho de página inteira e padrões de segundo plano: Então eu estou apenas olhando para a nossa barra de navegação que construímos na última lição. E talvez eu queira um pouco mais para a esquerda. Então eu quero adicionar um pouco de espaçamento, algum espaçamento de margem no lado esquerdo. E assim podemos fazer isso porque podemos realmente isolar qual quer que seja o último filho . Assim, podemos fazer isso por um pseudo estilo selecionando o último filho dos itens da lista. E a partir daqui, podemos adicionar uma margem nisso. Então eu vou em frente e fazer isso e eu vou adicionar margem para o lado direito. E podemos definir essa margem para o que quisermos e vemos que ela muda um pouco mais . E isso é útil porque eu não quero exatamente pendurado até o fim. Eso eu queria colocar um pouco de espaçamento. Podemos até adicionar algumas margens no topo se quisermos fazer todos os itens da lista e assim por diante . Portanto, há muitas opções diferentes sobre como podemos apresentar esse conteúdo. Podemos até encolher esta barra de navegação, talvez 2 50 escolhas. Eso Não está ocupando muito espaço onde você ainda encolhe mais se quiséssemos. Eso não uma opções diferentes aqui que são apresentados a nós eso Agora, dentro desta lição, Eu quero dar uma olhada e saltar para essas seções. Então, normalmente, quando você tem um site de uma página, nós gostamos do dedo do pé, que toda a seção ocupe todo o espaço disponível. E por isso, porque eu os nomeei para descer aqui seção rapper eu posso isolar todos esses elementos diferentes dentro da minha página da Web para que eu pudesse simplesmente chamá-los. Eu lhes dei todas as classes de seção, então é assim que eu vou identificá-los e fazer seleções sobre eles dentro do meu CSS. Então o que eu quero fazer é dar a eles uma altura mínima, então talvez eu queira dar a eles uma altura mínima de 100%. Então, vamos refrescar isso. Então também, talvez seja melhor apenas configurá-lo como uma altura de pixel. Então, dependendo do tamanho das imagens que eu tenho no fundo, eu quero talvez definir em 800 escolhas altura mínima, então a diferença entre a definição de porcentagens e inteligência real é que quando eu estou definindo uma porcentagem, se alguém o abrir em uma tela menor, eles podem geralmente não obter o mesmo efeito. E se eles redimensioná-lo assim novamente, dependendo de como você deseja que seu site para apresentar, é assim que você pode apresentar as diferentes seções. Eu quero adicionar um estouro, e eu quero esconder todo o estouro. Então o que isso faz é que isso irá esconder qualquer conteúdo que está pendurado sobre a borda da seção. Então você vê agora que esta imagem, porque está pendurada sobre a borda lá e eu vou cuidar disso também quando a tornarmos responsiva. Mas agora ele está pendurado sobre a borda porque é um tamanho maior para que possamos ver que sempre que nós estamos tamanho, ele apenas fica escondido. Portanto, essa é uma maneira de evitar que seu conteúdo realmente pendure sobre a borda padrão. Uma outra coisa que precisamos adicionar é um tapinha no topo, e então isso vai ser essencial porque queremos criar esse espaçamento no topo para as diferentes seções, e vimos como mais cedo quando clicamos nas páginas, não estávamos Nós não parecia que as páginas estavam realmente vindo para o topo, porque lembre-se novamente que nós temos 50 opções espaço de cabeçalho aqui reservado Então nós podemos, dependendo de quanto é bater nós queremos entre. Podemos até ir com algo como 60 picaretas. E agora, sempre que eu clico, esses links não estavam escondendo o conteúdo embaixo da barra de navegação. E isso é importante porque esta é uma das coisas que às vezes é negligenciada sempre que você esconde esse conteúdo. Portanto, você não quer ocultar o seu conteúdo de forma ideal. Eso também queremos uma posição que Então eu quero uma posição em relativo. Então, dê um posicionamento relativo para o resto do conteúdo. E isso será útil quando criarmos efeitos de paralaxe. E por enquanto, talvez queiramos adicionar uma borda para que possamos realmente identificar onde é o fim de cada uma dessas seções. Então você obtém uma borda preta e apenas atualiza isso os problemas agora porque eu fiz isso relativo e sobre isso nesta borda, nós podemos realmente ver onde o conteúdo da seção está. Então, sempre que estamos aqui estavam realmente clicando em onde o fim das páginas. Então não estamos apresentando corretamente. Eso talvez por agora, o que eu vou fazer é remover este parente, e eu vou atualizar isso mais tarde porque nós vamos precisar deste efeito sempre que estamos criando nosso efeito de paralaxe. Então agora está jogando fora a forma como os sites funcionam. Então vamos apenas comentar que ele por agora e adicionar isso mais tarde conforme necessário, e você será capaz de ver os diferentes efeitos quando adicionarmos isso. Vamos também cuidar do nosso tamanho de fundo para que o tamanho de fundo seja a capa. Portanto, isto dá-nos essencialmente estabilidade. Cubra toda a área de fundo com uma imagem de fundo. E para cada seção, queremos adicionar imagens diferentes e talvez até cores diferentes e como queremos representá-la. Então eu vou adicionar aqueles em seção por seção eso para todos os homens e assim por diante eso Outra coisa que queremos fazer com fundo queremos definir nossa posição geral nos bem em uma posição no centro e no centro, então é absolutamente posicionado no centro, então ele realmente não parece que há quaisquer mudanças. Mas quando adicionamos algumas imagens de fundo, você vai ser capaz de ver o que estamos fazendo aqui com a cobertura de tamanho de fundo e centro eso na próxima lição. Vamos continuar a construir essas seções dentro do nosso site e aplicar estilos diferentes para realmente fazê-las ganhar vida. Então isso está chegando no próximo conjunto de lições. 11. 11 Adicionar imagens de fundo: Então, nesta lição, eu quero cuidar das diferentes seções que notamos que tínhamos sobre nós e assim por diante. Assim, podemos adicionar um estilo diferente para cada indivíduo. E isso é ideal quando estamos criando esse efeito de paralaxe porque provavelmente queremos ter uma imagem de fundo diferente para cada um deles e sentar essa imagem de fundo. Então configure a imagem de fundo. Você é l. E agora precisamos especificar o u R L que queremos criar e adicionado como a imagem de fundo . Então vamos passar para o nosso gerador Laura ipso ou Laura um, gerador de pixels e dar uma olhada em uma imagem básica de fundo para que possamos especificar esportes se quisermos . Então eu vou copiar esse link. Então talvez se tivéssemos uma página de introdução temática esportiva, então talvez quiséssemos um desses. Então vamos abrir isso. E eu não sabia que você era L. E nós queremos torná-lo grande o suficiente para que ele ocupe o espaço, então espero que isso não carregue muito devagar. E talvez queiramos definir o absoluto com de nosso wrapper para um Max com Então vamos identificar Rapper aqui, e vamos dar um máximo com 1200 fotos, então não queremos que nosso site seja maior do que isso. Então, mesmo que o usuário tenha uma página enorme, não queremos que ela seja maior do que isso. Então, podemos ver aqui que, como estamos rolando para baixo eso sua home page agora tem isso como nosso plano de fundo. E, claro, ainda precisamos aplicar algum estilo ao conteúdo lá porque agora ele não é realmente legível, e nós temos uma imagem em segundo plano. Então, o que? Então vamos em frente e adicionar outras imagens de fundo para você. Algumas outras páginas e também podemos definir algumas cores de fundo. Então algumas cores padrão, bem para que eu possa torná-lo realmente agradável e colorido. E isso é feito novamente através de colchetes onde ele está me dando minhas cores padrão que eu posso selecionar. O próximo era sobre, e nós podemos até usar outra imagem lá desde que um esporte, eu acho que outro, esta cidade ou algo assim, e vamos atualizar a cor também para que ele não vai realmente ver as cores se nós na verdade estão recebendo as imagens. Mas porque essas imagens de ar bastante grandes, eles podem levar um pouco de tempo de carga no dedo do pé. Então o próximo é o serviço. Então, talvez para este, não vamos usar uma imagem de fundo porque queremos que o usuário se concentre em nosso conteúdo em vez do que está acontecendo em segundo plano. Então vamos fazer um azul escuro e a seguir temos nosso portfólio. Então, novamente, talvez não queiramos ter nenhum, uh, então portfólio. E vamos nos livrar dessa imagem de fundo. E para este, talvez nós vamos ter mais, ah, ah, fundo acinzentado e você poderia literalmente definir, como você quiser, olhar para o dedo do pé. Mas vemos que agora, medida que percorremos por lá, obtemos todas essas seções que são divididas, e podemos realmente começar a ver a divisão entre todas as seções diferentes. E para este, vou adicionar outra imagem. Talvez tão rápido checar aqui, e assim temos as pessoas. Talvez nós vamos adicionar em pessoas porque é uma seção de contato comigo e nós vamos apenas manter nosso doc cor marrom dedo do pé branco. Isso é para o caso de a imagem não carregar. Para que possamos realmente ver uma diferença entre lá e algo aconteceu lá, mas sim, isso foi porque eu não adicionei na área de contato. Então, vamos adicioná-lo ao portfólio. Então vamos apoiar Folio. E, na verdade, o que aconteceu aqui é que eu não identifiquei isso como uma seção separada. Então precisamos de dedo do pé, identificar. Isso é contato. Então, agora portfólio. Então temos casa sobre portfólio de serviços e seção de contato. Então, estamos prontos para continuar a construir neste site e adicionar algumas funcionalidades agradáveis. Então percebemos que o texto é difícil de ver, então eu vou cuidar disso também e vamos aplicar um estilo diferente agora ao texto e realmente trazê-lo para fora. Por isso, é mais apresentado e melhor e mais fácil de ver dentro do nosso site. Então tudo isso está chegando na próxima adolescência 12. 12 Faça seu texto se destacar: nesta lição. Eu quero me concentrar no estilo deste texto porque ele não é realmente legível assim. Eu sei que nós temos algumas imagens de fundo agradáveis e nós realmente não temos controle sobre quais imagens de fundo porque eles estão apenas vindo aleatoriamente. Eso eu quero aplicar algum estilo para que s O que ele realmente é mais legível e também para os dois H. Então nós tínhamos o formato relativamente ST Ford e apenas um que eu não tinha. Isso aqui é o artigo nesta seção de contato. Então eu vou apenas atualizar isso e estilo que eu vou usar é eu vou ir para baixo através de seção e artigo para que ele vai ser seção uh e assim nós podemos usar as seções de classe que estávamos usando antes. Então, talvez eu a coloque aqui. Então seção de classe e qualquer um dos H. dois. Então nós vamos aplicar algum estilo lá e seção e um aplicar styling para todos os artigos também. Então o que eu quero fazer por estes e podemos ver que às vezes o texto é muito difícil de ler. Então vamos apenas adicionar uma cor de fundo e vamos fazer um RGB A que nos permite criar uma cor Alfa. Então eu vou fazer para 55 para 55 para 55 para 55. E é aqui que definimos nossos valores para talvez tentar algo como um 0,7. Então vamos refrescar isso. E vemos que agora temos alguns ou os parágrafos estão realmente se destacando e podemos realmente ver o conteúdo lá. Então, mesmo que haja uma imagem lá atrás, podemos vê-los saindo. Vamos fazer a mesma coisa para esses cabeçalhos, mas talvez para os cabeçalhos, porque queremos que eles realmente apareçam. Nós só vamos fazer uma cor de fundo fora do branco para que eles possam realmente estourar lá. Ok, modo que cada dois vão realmente aguentar, então ainda precisa adicionar alguma formatação adicional. Então vamos adicionar um pouco de preenchimento aqui para talvez 10 picaretas tapting, então ele traz o texto em um pouco dos sites, tão refrescá-lo, que ele o apresente um pouco melhor. Talvez este nós possamos estar batendo bem como eso que nós fazemos, batendo tudo certo em torno de cinco picaretas de estofamento. Nós também podemos transformar ou enfraquecer Set Ah lutou estilo s enfraquecer Definir para diferente para esticar hoje. Que tamanho e assim por diante. Então isso é algo que talvez queiramos cuidar de que queremos torná-lo realmente grande e realmente pop, é a para e m. Então veja como isso parece também, queremos fazê-lo texto. Então temos algumas opções com texto. Vamos fazer um texto, transformar e mudar todos para maiúsculas. Então isso vai ser um bom efeito para qualquer um desses “h twos”. São aquelas duas seções H. Eso trazendo isso para fora. E também talvez outra coisa que queremos fazer com o texto é talvez queremos centralizar. Não tenho certeza de como isso vai parecer, mas vamos tentar. Não tenho certeza de como isso vai parecer, E podemos removê-lo se não gostarmos. Então podemos centralizar todas essas seções para que elas estejam realmente destacadas e se destacem. Agora podemos também, se quisermos tornar isso ainda mais visível, podemos mudá-lo para um oito, então isso vai trazer ainda mais. Agora podemos também, se quisermos tornar isso ainda mais visível, podemos mudá-lo para um oito, E às vezes para navegadores mais antigos, talvez você queira fazer algo assim apenas para garantir que onde estamos cuidando da cor de fundo. Então, nos navegadores mais antigos, ele vai ter ambas as propriedades e aqueles que não entendem rgb a vão estar apenas jogando branco. Então isso garante que nosso texto será sempre legível. Mas eu geralmente gosto deste efeito onde podemos ver um pouco das imagens de fundo, melhor quarto porque esses tipos de sites ar realmente imagem pesada na imagem realmente intensa . Então a idéia é realmente apresentar essas imagens muito bem para o usuário da Web. Então este é o nosso site até agora, vemos que sempre que estamos redimensionando, então há alguns problemas aqui quando estamos redimensionando. Então precisamos definir o rapper, precisamos centralizar isso. Então essa é uma das coisas que podemos ver quando realmente rolamos para fora em tamanhos maiores . Claro, ainda precisamos torná-lo responsivo porque nosso menu não parece, não tem maças de estoque e algumas correções. Vemos que as imagens eso algumas dessas imagens são muito grandes para as seções quando nós reduzi-lo para baixo. Então, tudo isso precisamos cuidar para torná-lo responsivo e disponível para qualquer dispositivo, qualquer tela de tamanho de dispositivo. Então, tudo isso e esses ajustes e transformações ar chegando na próxima essência várias . 13. 13 Ajustando a barra de navegação para efeitos responsivos: São algumas outras coisas que eu queria acrescentar e voltar a este artigo. Eu realmente gosto da opção de raio de borda, e isso nos permite fazer cantos arredondados. Então este é realmente um efeito de necessidade. E isso é algo que eu sempre amo colocar em páginas da Web, especialmente. Temos conteúdo apresentado assim. Torná-los arredondados realmente tem um bom efeito. E também o que eu queria fazer era adicionar margens. Então talvez você queira adicionar margens ao redor para que ele tenha algum espaçamento adicional e possamos ver algum espaçamento fora dos lados. Talvez queiramos fazer até a margem 10. Ou nós queremos talvez, uh, uh, fazer zero para cima e para baixo e, em seguida, 10 4 para esquerda e corrida. Vamos ver como isso parece. Então agora temos todas as nossas seções e parece muito bom e Niedere. E é por isso que eu gosto dessas opções arredondadas porque é uma espécie de efeito realmente agradável que você pode ter dentro de sua página da Web. Eso vemos aqui que é arredondado apresenta-se muito bom. Temos um problema aqui porque usamos o artigo duas vezes. Eso Talvez o que eu vou fazer é apenas atualizar isso e remover e só usar o artigo uma vez, ou podemos remover o arredondamento e isso pode ficar um pouco mais complicado. Então o que eu vou fazer é simplesmente remover esse artigo os dois artigos lá, e apenas tê-los como parágrafos separados. Então ele se encaixa melhor com esse estilo arredondado, então apenas atualize isso, para que se apresente melhor. Então agora podemos ver nosso conteúdo muito claro. Nós temos os cantos arredondados, que é algo que eu realmente gosto. E estamos prontos. Teoh, continuar a construir nosso site s. Oh, agora vamos olhar para torná-lo responsivo e responsivo sites é um praticamente um deve ter . E a forma como esse responsivo ou que sites funcionam é que nós podemos. Então eu vou apenas trazê-lo aqui em cima. Então, uma das coisas realmente esqueceu antes de continuarmos é que eu faço em um centro este, uh, este rapper vamos dar na margem automática da esquerda para a direita de zero e de cima para baixo de zero e uma margem de esquerda e direita de automático e isso vai centrá-lo na verdade , Então margem E isso tem sido geralmente ver avaliar a melhor maneira de fazer o seu conteúdo centrado e vemos que imediatamente obtemos essa data do centro de conteúdo e nós também poderíamos até mesmo embrulhar que todo esse áreas de cabeçalho inteiro Bem, então talvez isso possa ser uma idéia melhor. Então temos o rapper para tudo e, em seguida, ter um máximo com o seu para a área de cabeçalho que pudéssemos trazer isso em linha com o resto do site. Eu acho que eu preciso salvar isso então a razão pela qual isso não está se encaixando é porque nós temos isso como uma posição fixa. Então, vamos mover isso para trás e mantê-lo como era com o rapper lá. E isso é algo que podemos ajustar também. Mas fica um pouco complicado quando tentamos centralizar um item de posição fixa. Eso Por enquanto, vamos deixar isso no topo como está, e vamos trabalhar com o nosso menu de navegação do seu uh Então agora este é o nosso site. Vemos quando clicamos, podemos ir para as diferentes páginas e assim por diante. Então eu também vou mostrar a vocês, eu acho que rapidamente como podemos atualizar. É assim que este é o problema aqui. É este menu de navegação? Eso Este menu de navegação está em uma posição fixa e é bastante difícil centralizar esses menus de navegação posição fixa . Mas há uma maneira eso vamos fazer algumas atualizações para isso. E isso é algo de novo que pode ser opcional aqui, então precisamos definir uma taxa de zero. Então temos uma esquerda de zero, uma taxa de zero. Então, vamos refrescar isso. Eu também quero limpar criar que Max com. Então vai ser a mesma coisa que tivemos aqui dentro do rapper. E, claro, poderíamos remover isso, se necessário também. Então, vamos apenas salvar. agora que temos o máximo, mas ainda deslocado para o lado esquerdo. Então é aqui que precisamos do dedo do pé. Adicione essa margem zero e auto para que ela centralize automaticamente a mesma coisa que fizemos com o rapper. E lá temos. Então nós temos um menu centrado agora. Eso Isso está funcionando mais como uma opção central dentro do nosso site. Então vamos abrir o nosso site agora mesmo. Vamos dar uma olhada nele e vamos ver. Então a coisa boa sobre o cromo é que ele tem essa capacidade responsiva onde podemos simular diferentes iPhones e telas de tamanhos diferentes. Então é assim que isso realmente nos ajuda com nosso desenvolvimento móvel porque isso realmente nos dá uma idéia melhor de como ele vai ficar em dispositivos móveis. Podemos girar as telas também. Muito bom efeito. Podemos construir um dispositivo de tamanho diferente eso 6 80 comprar o que quisermos aqui pela altura. Então, quando se trata de design móvel e de ser responsivo, precisamos saber onde queremos definir esses pontos de ruptura. E vemos que uma vez que chegamos a um certo tamanho, então uma vez que estamos literalmente abaixo de 400 escolhas, nosso menu não é redimensionado Bem, então finalmente, eu quero ter algum espaço adicional e talvez sempre que quebrarmos abaixo de 600 fotos, queremos ajustar este menu de navegação. Então, queremos abrir o nosso ícone e, em seguida, tê-lo presente como uma opção suspensa. Então vamos abrir nosso CSS. E este é o lugar onde podemos adicionar na opção de tela de mídia, que nos permite definir esses pontos de quebra dentro do nosso site projetado para tela de mídia e e estamos usando a partir da área de trabalho para baixo. Então nós vamos definir um máximo com e vamos fazê-lo em 640 Então este vai ser o nosso ponto de ruptura . E uma vez que atinge este ponto de ruptura, então vamos exibi-lo de forma diferente. Eso queremos toe realmente mostrar o nosso ícone nav. Então vamos ao invés de esconder que agora vai mostrar isso então vamos fazer o bloco de exibição que você poderia. Então agora vamos atualizar a página. E sempre que baixarmos o tamanho, sempre que chegarmos abaixo de um certo ponto, vamos ver que vamos ter esse ícone aparecendo novamente. Acho que temos que atualizar isso e salvar isso. Talvez nós vamos entrar no nosso bar agora e esconder esse por enquanto. Então, o nosso cardápio valete. Então vamos esconder todo o menu de navegação porque acho que é isso que está interferindo também, com a gente sendo capaz de vê-lo. Então nós vamos apenas fazer um display nenhum para ele e vamos dar-lhe uma largura de 100%. Ok, então vamos atualizar isso agora novamente. E podemos ver quando atingimos o nosso ponto de ruptura que o nosso menu de navegação vai desaparecer e são ícone deve estar aparecendo lá. Então precisamos aplicar algum estilo para que realmente funcione e funcione corretamente. Então acredite que sempre que estamos olhando para isso, então nosso menu é que há ícone de navegação e nosso menu nav está sendo exibido. Nenhum, mas este deve ser exibido, bloco. Então vamos olhar para atualizar isso à medida que vamos para a próxima lição. Então está chegando. 14. 14 Atualizações e correções responsivas: nesta lição. Eu quero terminar e adicionar alguns ajustes adicionais no CSS para realmente tornar nosso site eficaz. Então vemos que quando entramos no site, dissemos isso no mínimo, bate uma altura de 800 pixels. Eso eu quero fazer um ajuste para isso de modo que ele está realmente ocupando toda a área de tamanho da tela disponível, e isso é realmente fácil aplicado dentro CSS. Então nós só precisamos selecionar essa área de seção para seção e nós temos. Então nós temos a altura dos nossos homens para 800 para que possamos definir a nossa altura padrão para 100 VH. E isso significa apenas altura vertical. Então 100% altura vertical e vemos uma vez que fazemos isso, então estamos realmente ocupando esse espaço total disponível. Então, dependendo de quanto altura vertical está disponível na tela quando nós re dimensioná-lo, ele vai ocupar o 100% dele. Então, se nós temos uma altura vertical menor, podemos ver que ele ajustar sua adequadamente para qualquer que seja a altura vertical é, então isso é o que ele define seu tamanho automático também. E isso vai funcionar muito bem, porque esta era uma das coisas que não estava funcionando exatamente taxa sempre que tínhamos tamanhos de tela diferentes. Eso esta adição vai torná-lo muito mais eficaz e responsivo quando estamos lidando com diferentes tamanhos de tela. A outra coisa que eu quero voltar e eu quero olhar para o corpo eo HTML então dentro do corpo e html eu quero definir uma família lutou padrão e eu vou para Google Fonts e eu vou escolher um pensamento do Google para usar dentro do site. Agora Google Fonts é um serviço oferecido pelo Google que permite que você realmente facilmente trazer estilo lutado em seu site para que você possa ir até aqui para fontes dot google dot com. Eles têm 800 famílias de fontes diferentes, todas prontas para ir. Então, tudo que você precisa fazer um especificar que tipo de diversão que você quer. Então agora estamos afirmando isso por tendências populares e assim por diante. E você tem um monte de opções aqui para tipo de classificar através e realmente encontrar que lutou que olhos vai fazer seu site ficar oito eso um monte de opções diferentes aqui em fazer essas seleções. Eso talvez pegue algo que realmente vai se destacar. Talvez nós vamos fazer isso como selecionando a fonte como este escrito lutou. Então vai fazer a maior diferença. Então, quando clicamos nele, obtemos essa família de fontes selecionada, e agora podemos incorporar em nosso site para que possamos trazê-lo, como fazemos com uma folha de estilo e trazê-lo para o nosso projeto Web e, em seguida, utilizá-lo dentro do nosso CSS. Mas a melhor maneira de trazê-lo para dentro é realmente importá-lo diretamente para o estilo porque nós temos uma folha de estilo vinculada. E isso é útil se estivermos vinculando à folha de estilos de outras páginas da Web do que podemos vincular em várias folhas de estilos. Então eu vou apenas abrir aquela pré-visualização ali. E assim que eu colocar na família de pensamento padrão, vemos que imediatamente nós temos esse pensamento trazido para o nosso site. É assim que definimos nossa família de fontes por padrão. E eu acho que isso não é 100% onde é 100% s Oh, lá vamos nós. Para que pudéssemos trazer para a frente. E, claro, se essa Pont não é exatamente o que estamos procurando, podemos escolher outra facilmente e fazer uma atualização. Eso talvez aquele. Não está a sair tão claro como queríamos. Então eu posso selecionar essa família lutada, e eu posso ver mais alguns detalhes sobre ela, bem como quando eu clicar nela e eu poderia realmente acessá-la . Portanto, selecione esta fonte. Então agora eu tenho essa família de fontes selecionada, e nós podemos realmente trazer as duas famílias de fontes também. Então fazendo essa importação. Então talvez o que eu vou fazer é importar os dois e posso utilizá-los em lugares diferentes. Então eu meio que gosto da maneira que isso olha para o não ou para a área de cabeça de seção. Então talvez eu deixe assim. Mas então para o resto do site, talvez eu só vou usar este peido padrão regular dentro do corpo no HTML. Então vamos dar uma olhada nisso e ver como isso acaba. Então isso realmente parece um pouco melhor. É muito mais legível e vemos como nossa fonte está sendo apresentada. Então isso é muito bom. E isso tem um efeito muito bom no nosso site. Então, uma das outras coisas também, é que eu uso o lago para definir é que eu gosto de definir o real os hyperlinks s. Então isso é algo que normalmente nós definimos por padrão dentro do site. Então eu vou apenas atualizar o decker de texto, a decoração de texto, e por padrão, eu vou tê-lo como nenhum. E então sempre que passarmos o mouse sobre os hiperlinks, então eu posso adicionar isso em duas decoração de texto e eu posso adicioná-lo em subjacente. Então, se eu quiser que o Lee apareça sempre que passarmos sobre ele, então podemos fazê-lo dentro deste tipo de efeito. Vamos ver como isso funciona. Então, agora, sempre que passarmos sobre ele, temos este efeito agradável, Teoh nossos hiperlinks e este é um estilo mais moderno hyperlinks dedo do que o quê? Mas os padrões estão dentro html e também podemos adicionar em nossas cores. E eu falei sobre esquemas de cores antes, então isso é algo que podemos adicionar com as famílias de fontes. Então, dependendo do tipo de esquema de cores que estavam usando. Podemos utilizar isso. Então, se quiséssemos ter azul escuro e talvez quiséssemos ou azul escuro e vermelho sempre que eles ficassem exagerados, pairando sobre, podemos ver que agora temos um efeito muito agradável. E, claro, você precisa personalizar isso para o seu esquema de cores. O Eso. Um dos outros ajustes que estou vendo agora é que essas imagens não são responsivas. Não está dimensionando corretamente, então eu quero cuidar disso também. E então eu vou apenas definir uma imagem, e eu vou fazer Max com da imagem e defini-la para 100%. Então, o que vai acontecer agora? Sempre que eu redimensionar, vemos que a imagem agora é tamanhos juntamente com o espaçamento disponível dentro desse elemento para que possamos encolhê-lo para baixo. Podemos torná-la maior quando ultrapassar o tamanho. Este está em 650 eso. Sempre que estamos superando esse tamanho, vemos que ele está apenas sentado lá e não está. Não está ocupando ou passando por cima do espaçamento disponível que está disponível para o nosso site s 01 das outras coisas, também. Temos que consertar esse menu de navegação porque não parece estar funcionando. Bem, está trabalhando nessa resposta, mas sempre que estamos está trabalhando nessa resposta, mas sempre que estamos diminuindo,não estamos vendo nosso menu de ícones. diminuindo, Então isso é algo mais que precisa ser consertado com o ícone do valete s sempre que estamos mostrando e exibindo, precisamos atualizar isso para exibir o ícone de navegação. Vamos adicionar isso aqui. Vamos fazer uma exibição. Nenhum. E então nós também temos que definir um tamanho lutado tão definido que lutou tamanho, também, para e. M. Como um tamanho tão exibir, nenhum na tela maior. E então queremos exibi-lo como um bloco na tela menor. E quando aplicamos o javascript que não é assim que vamos obter essa funcionalidade onde estamos atualizando o menu em tamanhos diferentes. Então, por enquanto, quando estamos trabalhando neste menu, vamos nos livrar dessa exibição nenhuma. E vamos estilizar uma atualização. Nosso dedo do menu realmente aparece porque nós precisamos redimensioná-lo sempre que ele encolhe para baixo que ele vai ocupar esse espaço total, ele vai ir horizontal e eso pode ser, Ah, Ah, menus suspensos horizontais. Então eu vou mostrar a vocês como fazer isso na próxima lição, e nós vamos ter que remover alguns dos estilos que fizemos nas telas maiores . Então isso está chegando na próxima lição. 15. 15 Navbar para telas pequenas: Então, esta lição. Eu quero ajustar e finalizar este menu e apenas atualizá-lo e ver como ele está funcionando em preparação para o nosso não para a nossa adição javascript. Então, uma das coisas que eu notei é que não agora ícone não está aparecendo corretamente. Então o problema aqui é que eu não tenho certeza se você poderia detectar o problema, mas originalmente eu tinha chamado agora ícone e definir algumas propriedades lá. Então, uma coisa importante a lembrar é, quando você estiver criando esses estilos e estiver usando a consulta de mídia, certifique-se de que você está definindo essas propriedades dentro do mesmo formato. Agora temos o ícone do valete, e isso deve funcionar melhor. Eso Agora, quando eu atualizá-lo, vamos apenas verificar e ver se o nosso ícone aparece, quando eu atualizá-lo, vamos apenas verificar e ver se o nosso ícone aparece,o que ele faz exatamente o que precisamos dedo acontecer. Então, uma das coisas que agora precisamos fazer é que precisamos estilizar e configurar nosso menu aqui para cair para baixo para a direita ou para a direita e estar cheio com. Então vamos dar uma olhada nos itens da lista para o naff e atualizá-los agora. Então nós vamos fazer menu agora listar itens, e nós estamos realmente indo para fazer a UL. Então os itens da lista ordenada da ONU, e nós vamos obter uma largura de 100% que está disponível. Então vamos ver o que isso faz quando o atualizamos. Então agora temos o menu configurado exatamente da maneira que queremos, e também podemos ter uma opção para centralizar o texto se quisermos. Às vezes, é uma boa ideia centralizar esse texto para o ícone do valete. Talvez precisemos puxar isso para a direita para flutuá-lo para a direita também, possamos adicionar isso no carro de Esso, certo? Então, estamos apenas atualizando isso. Então isso ainda está costurando dentro do mesmo ponto. Então, sempre que estamos redimensionando, vemos que temos isso, o ícone aparecendo lá, e talvez possamos até fazê-lo desaparecer. Se quisermos eso, vemos que os links ainda são a mesma coisa, então ele ainda está indo para as mesmas páginas, e esta é exatamente a maneira que queremos que o site execute, então apenas vamos atualizá-lo, vemos que os links ainda são a mesma coisa, então ele ainda está indo para as mesmas páginas, e esta é exatamente a maneira que queremos que o site execute, então apenas vamos atualizá-lo, para se livrar disso Uh oh. Pague a cidade logo ali. É assim que o que nós finalmente sabemos o que queremos fazer é que queremos sempre que um desses links clicado, queremos que ele realmente feche esse menu fora e assim por diante. Portanto, há uma série de coisas que queremos que aconteça agora dentro do nosso site sempre que estivermos responsivos. E, claro, se gostarmos desse jeito, se gostarmos do nosso menu assim, podemos deixá-lo assim. Podemos até nos livrar desses ícones. Nós nem precisamos ter um ícone clicável que abra e feche o menu, e assim por diante, muitas opções neste ponto que estão sendo apresentadas para nós. Mas quando trouxermos essa consulta J, ele vai realmente fazer alguns efeitos agradáveis dentro da forma como os sites estão sendo tratados. Então eu acho que você provavelmente vai querer manter tudo isso aqui. E outra coisa que estamos apenas olhando agora é que precisamos estilizar o portfólio também para apresentar isso de uma forma melhor. Talvez possamos fazê-los ocupar um quadrado completo ou algo assim e adicionar estofamento em torno deles. Então é outra coisa que precisamos atualizar e ajustar eso. Vamos entrar nisso na próxima lição e atualizar isso. 16. 16 Como adicionar rodapé e seções de atualização: esta lição. Quero atualizar o portfólio e como esse conteúdo é apresentado. Portanto, só queremos que esses efeitos ocorram sob o portfólio. Podemos querer usá-los em outro lugar. É uma série de opções que podemos adicionar nas aulas. Mas por enquanto, o que vamos fazer é onde ele vai escolher de acordo com o portfólio. Então nós temos nosso portfólio lá, e aqui é onde podemos definir algum estilo adicional para esse elemento. Então portfólio e eu quero aplicar isso para a lista ordenada da ONU e os itens da lista sob o elemento carteira. E o que eu quero fazer é mostrá-los na linha. Então vamos reescrever isso. Então, exiba na linha. Então veja se que diferença isso faz para que já o apresente imediatamente. Muito melhor s. Então, também podemos adicionar em algum preenchimento também. Então eu vou fazer a adição em alguns potting eso para apresentar a lista ordenada da ONU um pouco melhor também. Então talvez precisemos de algum preenchimento e algumas margens e assim por diante. Então vamos apenas adicionar em preenchimento de 10 picaretas e eu vou fazer tipo de estilo lista apenas para ter certeza de que estamos se livrando de que não vai defini-lo para nenhum, mesmo que aqueles não são mais visíveis. E também podemos atualizar o portfólio. Os itens da lista para que todos e todos os itens da lista de fim de semana atualizem aqueles para que possamos adicionar algum preenchimento em torno deles. Então veja como isso se parece agora. Então é adicionado um pouco de estofamento. Há um quebrando esses elementos e também podemos definir margens de olhos nas margens superiores na parte inferior. Às vezes você pode ter algum texto aqui também, então eu posso adicionar algum texto lá. Talvez possamos fazer isso como um parágrafo ou algo assim para termos algum tipo de informação sobre eles. Então, normalmente, eu acho que a imagem estaria no topo. Vamos ver como isso funciona. Então agora temos o mesmo efeito. Mas perdemos o nosso estilo em linha porque temos o preenchimento lá, e agora temos o texto do item da lista. Então, se atualizarmos isso do que ainda estávamos listando e se você realmente gosta dessa maneira, então você pode mantê-lo assim. Eso você geralmente não precisa toe atualizá-lo. Mas vamos trazer de volta o nosso potting para ele. E eu também vou ajustar o tamanho dos itens da lista. Então talvez pudéssemos fazer isso a 70%. E poderíamos fazer alguns ajustes também. Provavelmente a melhor coisa a fazer é realmente adicionar uma fronteira lá para que possamos ver com o que estamos trabalhando. Assim, isto dar-nos-á uma melhor indicação de onde se situam as nossas fronteiras. Vemos que temos uma largura, temos altura. Então talvez nós ainda queremos definir algumas alturas padrão para que eles estão ocupando um determinado tamanho de contêiner e eu ainda preciso mudar isso para em bloco de linha. Então eu mudei no bloco cego aqui. Podemos ver isso agora. Há uma diferença nisso, então estamos pegando palmadas aqui. Se eu quiser fazer o tapinha zero, posso atualizá-los. Então eu não tenho certeza por que ter isso quando eu posso realmente remover aquele em enfraquecer? Prepare-o, Teoh. 45% se quisermos, e podemos ver como isso se mostra. Eu acho que se formos 50 nós devemos estar bem para este também porque nós removemos no estofamento. Então, às vezes é um pouco complicado trabalhar com o estofamento para obter todas essas porcentagens, certo, Porque ele tem algum embutido em preenchimento lá. Então você pode ver se vamos para a 48ª e estamos muito bem com isso. Nossas alturas padrão, talvez um problema também. Então isso é algo que podemos querer também. Então talvez nós queremos apenas ficar com 200 ou uma altura mínima de 200 sobre isso. Então atualize isso de modo que não importa o que, seria um mínimo de 200 eso, não importa o quanto nós redimensioná-lo. E então outra coisa aqui é que talvez quando nós o redimensionamos, queremos atualizar os withs para que possamos ir até nossa consulta de mídia aqui e atualizar essas esperteza para ser 100%. E nós não precisamos de nada do resto deste material aqui e vamos ver como isso vai acabar. Então, agora, quando estamos tamanho, estamos ocupando aqueles cheio com eso um monte de opções diferentes. Depende de como você deseja apresentar seu conteúdo e seu portfólio. Então esta é apenas uma correção rápida para esse anexo. Eu quero me livrar dessa fronteira porque eu não gosto da forma como essas fronteiras de ser exibido tão rapidamente vai se livrar delas e remover o lagarto. Claro, nós poderíamos fazer uma escala de cinza, uma ondulação ou você poderia fazê-lo pontilhado. Mas de qualquer maneira, s O, este é o nosso portfólio agora, Então esse é o conteúdo está sendo apresentado um pouco melhor. Nós também podemos adicionar em Ah, rodapé aqui um o fundo. Então isso é algo que podemos adicionar embaixo da seção e mantê-la dentro daquela Div. Obrigado por me visitar. Então geralmente tem uma cópia, certo e coisas assim dentro, não rodapé s. Então vamos dar uma olhada nisso agora. Então os direitos autorais lá estão na parte inferior. Agora precisamos adicionar algum estilo para o rodapé s para que possamos entrar aqui e atualizar esse rodapé e novamente, assim como o cabeçalho. Se estamos reutilizando Hatters estavam usando elementos de rodapé estavam usando essas tags. Devíamos dar-lhes ideias para identificá-los. Mas não vou reutilizar o pé ou em qualquer lugar. Então eu vou definir como rodapé e cor e dar-lhe talvez uma cor preta. Então, ele realmente se destaca. Lutado pode ser alinhar texto branco. Então, geralmente eles vão ser centrados na banda para ver como isso vai parecer. Também devemos definir altura para isso. Então isso pode ser, ah, altura de 200 fotos porque nós queremos ocupar alguns imóveis eso agradecimentos por visitar direitos autorais e blá, blá, blá, qualquer conteúdo que quisermos colocar lá. Portanto, também podemos provavelmente melhor para fazê-lo como parágrafos também. E acabei de copiar e colar parágrafos aqui. Então lá vamos nós. Então agora temos nosso rodapé configurado. Temos todo o nosso conteúdo configurado e estamos prontos para ir e adicionar em consulta RG. E isso é o que vai fazer com que os efeitos de paralaxe realmente frio e não se move efeito. E o paralaxe é essencialmente quando as imagens estão se movendo em momentos diferentes, diferentes, diferentes, diferentes, então eles não estão realmente ligados um ao outro neste é onde você obtém esse efeito onde talvez você tenha um imagem e você está rolando para baixo. Mas então essa imagem eu vou fazer eso estática não vai rolar mais quando chegar no topo e assim por diante. Dessa forma, sempre que você estiver rolando para baixo, essas imagens terão um efeito muito agradável no fundo. Então eu vou te mostrar como fazer tudo isso na próxima lição. 17. 18 Como adicionar gatilhos de evento jQuery: Então agora a parte do curso que todos vocês estavam esperando, e isso é quando nós adicionamos ghee. Consulta. Então G Query é uma biblioteca JavaScript, e essencialmente torna a adição de JavaScript e fazer funcionalidade JavaScript comum muito mais fácil. E isso é o que significa para J. Query é porque a principal razão que as pessoas usam é porque é realmente fácil. É intuitivo, e faz sentido. E se você está familiarizado com CSS do que Jake Worry e adicionar ações de consulta G é muito semelhante ao CSS porque você está chamando os elementos em sua página HTML com de uma forma semelhante e em orderto ímpar J pedrery. Então Jake se preocupar é uma biblioteca JavaScript, então é apenas um arquivo Js, e você pode baixá-lo, vinculá-lo ao seu site localmente, onde dentro de seu próprio domínio, ou você pode usar o Web Cdn. Então eu estou indo para as bibliotecas hospedadas do Google, e eles nos dão uma nova opção aqui para copiar a consulta G, biblioteca, biblioteca, origem e arquivos de localização, e nós podemos simplesmente vincular a esta versão on-line do J Query. E, claro, se você está desenvolvendo localmente e se você não tem uma conexão com a Internet, você precisa baixar Jake ou para fazê-lo funcionar em seu site e ser capaz de testar oito. Então, é um simples como copiar isso, colá-lo e você está pronto para ir e pronto para adicionar ghee, consulta e J funcionalidade de consulta em seu site. Agora, cada site, cada navegador da Web entende JavaScript, e é por isso que você realmente não precisa carregar nada. Além disso, em seu aplicativo, você não precisa compilar nada. Está tudo pronto para ir. E Jake se preocupar é apenas uma maneira de simplificar a adição de JavaScript em seu site. E para aqueles de vocês que estão familiarizados com Jack JavaScript, você vai entender todo esse potencial que está disponível dentro do J Query e J. Query é apenas uma maneira mais simples de adicionar JavaScript, e você pode fazer tudo o mesmo funcionalidade em javascript também. Portanto, não é necessário que você pode fazer você que você não pode fazê-lo em JavaScript trabalho, mas é preciso um pouco mais de esforço. Uh, e nós não queremos uma base muito deste curso em torno de JavaScript, e é por isso que vamos trazer nerd Worry e O. Esta é a última versão masculina da pedreira G, então M I n é uma versão minimizada. Os homens acreditaram que a imersão significa que se você for a esta página da Web, será sem espaços. Então, se eu passar aqui para o site, vemos que esta é a Biblioteca de Consulta J, então ela é compactada e está pronta para carregar rapidamente em sua página da Web. Então, para adicionar JavaScript, usamos as tags de script. Então script de abertura e fechamento e, em seguida, entre. Aqui é onde adicionamos em nossa consulta JavaScript ou RJ. Agora, a fim de acessar Geico, RJ Corey funciona de madrugada. E este é o modelo de objeto de documento, o que significa essencialmente que isso é carregado sempre que seu site sempre que seu código Web carregado no navegador. E isso é o que é chamado de documento. Isso é algo que é renderizado e criado pelo navegador, e J. Query e JavaScript têm acesso a todos os elementos dentro da página da Web. Ao acessar o objeto de documento, é um documento pronto apenas essencialmente significa que sempre que o navegador terminar de carregar o conteúdo do site eo documento está pronto para ir. Então podemos disparar e começar a tomar medidas com RJ Query. Isso é tudo o que esta afirmação significa aqui. Então, uma das coisas que queremos fazer com o ícone de navegação é que queremos torná-lo clickable eso. Agora temos o nosso ícone de navegação e sempre que o encolhemos, bem, não é clicável e eso A fim de torná-lo clicável, podemos fazê-lo com JavaScript e J. Corey, e eu vou fazer um clicável através da consulta G. E como J. Crew é tão simples de fazer ações e eventos, eventos quentes, só preciso selecionar a classe, entrar no meu arquivo de script, e começamos tudo com o dólar. Assine aqui para indicar que este é um elemento que estamos pegando da mesma forma que distinguimos entre as classes e eu ds é a mesma coisa que podemos fazer em preocupações com Jake. Nós adotamos para uma classe ah hash para, uh, eu elemento e também enfraquecer indicam os etiquetadores bem e assim a funcionalidade que queríamos dedo estranho. Queremos adicionar um ouvinte de eventos, que é um clique. Essencialmente ele Boynes o manipulador de eventos clique no elemento JavaScript para os elementos sempre que ele é clicado, em seguida, ele vai disparar e executar esta função. Então as funções são auto-contidos Pedaços de código em javascript eso não precisamos toe criar uma função separada. Podemos apenas executar essa função dentro do evento de clique s. Então isso é algo que podemos fazer se quisermos. Poderíamos simplesmente simplificar essa funcionalidade de clique. Então, o que vai acontecer agora? Toda vez que é clicado, vamos executar e iniciar esta função. Então, o que queremos que esta função faça? Então nós queremos realmente executar uma função embutida em J. Corey. E isso é o que eu quis dizer com quando Jaqui facilita as coisas que queremos simplesmente alternar toda a barra de navegação. Então vamos voltar para nossa barra de navegação e talvez até dar uma aula para que possamos facilmente identificá-la no trabalho do Jake. E isso foi apenas para simplificar as coisas. Então, basta dar-lhe uma classe de valete e, em seguida, para que possamos identificar esse elemento em particular quando quisermos utilizá-lo no código. Então, tudo já está construído e definido ao amanhecer. Então, sempre que isso carregar, temos acesso ao valete. Da mesma forma que adicionamos essa funcionalidade de clique que vamos adicionar em uma função incorporada chamada slide toggle, e isso irá exibir ou ocultar os elementos correspondentes, dependendo de onde ele está posicionado. Vamos dar uma olhada nisso agora e ver o que acontece. Então, agora, quando eu clico, vemos que temos este menu abrindo e fechando. E então isso vai ser uma funcionalidade muito útil porque este é o nosso menu de cliques. O único problema aqui é que sempre que eu tamanho maior, ele está realmente desaparecendo. Então este é definitivamente um problema aqui que precisamos atualizar também, e podemos atualizar este eso. Normalmente você não estaria redimensionando sua janela do navegador, então isso normalmente não é ativado como um problema. Mas também queremos ter certeza de que não estamos escondendo o menu a qualquer momento. Então não queremos que o dedo acabe em uma situação em que alguém inadvertidamente clica nisso e depois redimensiona, e então eles não têm menu. Eso Isso é algo que vamos olhar na próxima lição, como lidar com isso e como atualizar que 18. 19 eventos de janela de ligação jQuery: na última lição. Nós mostramos a você como podemos fazer um evento clique um gatilho lá. Mas descobrimos que havia um problema quando estamos redimensionando. Então, clicamos neste ícone, nosso menu desaparece e tentamos ir para uma tela maior. Então nosso cardápio ainda se foi. Mas felizmente, J. Cory tem uma solução para isso e da mesma maneira que fizemos isso, onde selecionamos o elemento. Nós também podemos ouvir eventos de janela e janelas são por isso é diferente do documento porque o Windows é essa janela do navegador e podemos ouvir e vincular algo para acontecer quando um determinado evento de janela acontece. Sempre que o usuário redimensionar é seu navegador, podemos fazer a mesma coisa aqui que fizemos e podemos disparar uma função. Então, sempre que eles são dimensioná-lo, nós podemos criar uma função, e esta função vai ser outra dessas auto-contidas. Então, sempre que o redimensionamento da pessoa é a janela, podemos executar através desta função, e é aqui que podemos verificar se este ícone agora está escondido para que possamos fazer uma declaração condicional , essencialmente uma declaração condicional é. Se isso for verdade, então faça isso. E se não for, então faça isso. Então, um ícone novo. Então sabemos que temos um valor para isso. Temos um valor CSS para ele e podemos procurar a propriedade display para que possamos essencialmente ver se isso é verdadeiro ou falso. Ou se podemos ver que o valor da propriedade de exibição que o seu valor que Então vamos verificar para ver se o seu valor que nenhum. E se for, então vamos fazer algum tipo de ação. E a ação agora vai ser toe realmente mostrar então outro construído em função J coury e eu não vi isso torna muito mais fácil. Então ele tem essas funções embutidas para esconder e mostrar elementos. Então eu tenho que fazer é fazer o show e os colchetes. Então vamos verificar isso agora e ver como isso funciona para que possamos redimensionar e lembrar, agora temos isso escondido. Mas veja, quando estou redimensionando, ele está realmente verificando se está escondido. E se for, então ele realmente alterna a visão fora desse valete que agora elemento e re mostra. Então agora vemos que temos esse efeito interessante realmente agradável onde não importa em que estado estavam. Sempre que re tamanho, ele fecha esse menu e podemos utilizar isso uma onda sempre que qualquer um destes são clicados que queremos esconder o menu também. Portanto, é algo que queremos fazer e queremos implementar também. Então vamos dar uma olhada nisso, e podemos verificar para ver qual é o status disso, bem como esconder e mostrar conforme necessário. Então tudo isso está chegando na próxima lição. E também, eu vou me livrar desse ícone de palavra, e eu vou realmente substituí-lo por um ícone de menu de tipo mais visível. Então isso está chegando no próximo conjunto de lições. 19. 20 Adicionando biblioteca de ícones: nesta lição, eu queria adicionar em um ícone real, Stover-lo escrever ícone. Eu queria realmente exibir um determinado ícone, e é aqui que eu vou usar a fonte. Biblioteca incrível. Então isso me dá a capacidade, assim como eu fiz com as fontes do Google para trazer uma biblioteca CSS e ter acesso a todas as guloseimas disponíveis dentro da biblioteca CSS. E há muitos deles disponíveis na frente. Incrível. E, essencialmente, o que ele faz é realmente apenas te dá a opção de acessar e ser capaz de acessar todos esses ícones para que ele lhe dá acesso a 634 ícones diferentes. Eso Temos exemplos dos ícones aqui, e podemos essencialmente simplesmente clicar nele e podemos ver a maneira de trazer isso. Então o que eu estou procurando vai ser um ícone de menu. Então veja se é chamado assim ou talvez seja apenas chamado de bares S. Então este é o que realmente estamos procurando. Então você provavelmente reconhece isso que este é o ícone padrão usado para a barra de menus então tudo eu preciso fazer é pegar esse código. Agora que eu tenho que encontrar gambá, eu tenho acesso a todos esses ícones eso isso, salvando aquilo e voltando para a minha página web. Então, quando eu atualizá-lo, nós vemos que agora temos um ícone de menu padrão, e eu vejo que ele ainda está um pouco mais para você, o lado direito. Então eu quero cuidar disso, e eu quero dar um pouco de uma margem lá no lado direito. Então eu vou dar uma margem direita e dar-lhe um 10 escolhas. Então, só para trazer isso para que ele não esteja pendurado direito no local lá, nós podemos até querer trazê-lo até mesmo, talvez 15 apenas para que ele não seja pendurado e direto para o site. Então veja, isso funciona muito bem. Sempre que redimensionamos o menu, temos um menu de navegação regular de volta e vemos que tudo está funcionando nascendo corretamente. Eso agora podemos adicionar alguns efeitos G Koury. Podemos adicionar em que um efeito imediato onde o rola automaticamente para a página e isso é tudo feito em consulta G, e isso está chegando na próxima lição. 20. 21 rolagem de animação com jQuery: Esta vai ser a lição que todos esperavam. E esta é a lição em que eu realmente vou animar o projeto Web. E eu vou mostrar como facilmente e como efeitos realmente agradáveis e legais que você pode adicionar apenas adicionando isso algumas linhas de consulta G. Assim como o que fizemos antes, onde estamos trabalhando nesse ícone de menu, e sempre que clicarmos nele, podemos ouvir esses eventos de cliques. Nós vamos fazer a mesma coisa aqui onde nós vamos ouvir qualquer cliques dentro desse menu para que possamos identificá-lo muito como nós fazemos com qualquer outro com CSS, onde nós podemos identificar diferentes elementos em sua página web para que eu possa identificá-lo agora porque eu dei a ele a classe do item agora lista e qualquer texto âncora que é clicado. Então eu quero executar esta função e a mesma coisa que fizemos aqui em cima nós vamos fazer aqui e agora quando você se esgueirar para dar um conjunto de instruções do que realmente queremos fazer, e uma das coisas que eu quero fazer é quer evitar o padrão porque sempre que temos uma âncora padrão, isso significa que por padrão ele vai mover o site para baixo. Então vamos ver o que isso faz. Então, agora, quando eu clico, nós realmente não vemos nada acontecendo sempre que eu clico nessas páginas. E isso é porque eu evitei o padrão. A ação padrão é que rola automaticamente até essa página. Então, agora que removemos essa ação, precisamos adicionar isso de volta. Então vamos dar uma olhada no alvo, o alvo pretendido que configuramos dentro da ação típica. E queremos retirar onde queremos o que pagou qual parte do site realmente deseja rolar para. Então isso é importante e isso é algo que precisamos pegar. Então talvez possamos pegar a Seção I D ou algo assim. E a coisa boa sobre G Query e o amanhecer é que toda essa informação está contida neste clique. Então, sempre que alguém clica nele, nós realmente obtemos informações do evento para que eu possa exibir isso lá, e eu posso realmente mostrar a vocês o que está contido aqui dentro também. E assim queremos obter o atributo h ref e obter esse valor e colocá-lo na seção I D. E eu vou consolar logar essas informações para que possamos dar uma olhada melhor nisso. Então, isso é chamado Seção I D Console Log é uma função embutida em javascript. Ele nos permite nos comunicar para trás e para frente a partir do navegador do código para o navegador. E também, talvez eu possa consolar, registrar ou direcionar o Cônsul a informação do evento. E isso é algo que podemos obter e podemos ver sempre que estamos olhando para o amanhecer. Então vamos ao nosso site atualizar a página, e eu vou mostrar onde a informação do cônsul vai aparecer. Assim como o que estávamos olhando mais cedo com cromo. Então nós temos essa habilidade onde temos essa caixa pop-up aqui e você pode realmente alternar onde aparecer uma onda então não precisa necessariamente aparecer lá. Podemos colocá-lo no lado direito da tela, então talvez seja um lugar melhor para isso. Então agora, sempre que eu clico, vemos que estamos realmente captando o local, o alvo para onde queríamos ir. E nós temos isso um evento eso o um evento Essencialmente é esse objeto de evento e você pode usar qualquer uma dessas variáveis dentro da sua fórmula de preocupação Jake. Temos o nosso alvo lá e temos a nossa localização aqui. Então, quando indicamos que queremos pegar o atributo do evento, podemos pegar essa informação do nosso evento clique. Nós também sabemos onde a página onde o mouse está localizado e há um monte de informações realmente úteis aqui. Então, podemos realmente utilizar qualquer parte desta informação que queremos e vemos lá temos o h áspero lá, temos o texto interno. Então nós sabemos o que é o que o texto interno está lá e apenas realmente tudo o que temos sobre html externo e praticamente qualquer coisa que queremos. Temos informações sobre isso. Então agora que vemos que sempre que estamos clicando, estamos recebendo que i d. e isso é essencialmente o que estamos passando. Precisamos calcular o quanto fora de quanto a diferença é quão longe ele está fora da parte superior da página da Web e podemos fazer isso novamente usando a propriedade offset do alvo. E vemos aqui dentro de toda essa informação que podemos pegar no deslocamento. Então sabemos que o deslocamento essencialmente é, uh, nenhum valor de pixel América de onde ele está localizado no posicionamento desse elemento em particular que estamos procurando para que possamos escolher isso e não está listado aqui porque É só isso dentro desse evento, e estamos pegando essa informação, e agora vamos olhar para o dom e não podemos fazer esse cálculo. Então vamos calcular esse deslocamento. Talvez eu ligue do topo. Então isso faz um pouco mais de sentido lá. E é aqui que fazemos nossos cálculos, ou J. Corey faz o cálculo deles para nós onde vamos escolher esse elemento em particular. Então, qualquer que seja o alvo, então qualquer idéia de seção de valor lá, então nós só precisamos calcular esse deslocamento e o que é fora do topo. Então só para mostrar para que eu vou me livrar disso, atualizar a página e mostrar qual é a nossa saída. Então sabemos onde essa seção está localizada a partir do topo. Então esse é o número de pixels. Está sentado de cima. Vemos a seção sobre é bem, casa é o primeiro do que sobre então serviços, portfólio e contato. Então há cerca de 1000 ou 1100 diferença ou 1089 diferença ou 1081. Então, dependendo de como você está olhando para isso, então esta é a diferença. E isso é o que podemos usar agora para realmente animar nossa rolagem e deixar consulta G mover nossa barra de rolagem para nós. E este é outro. Este é o efeito legal que todos esperávamos dentro deste projeto. Então, aqui vamos nós. Então agora precisamos identificar esses elementos dentro do nosso HTML. Então vamos apenas identificar HTML e corpo, assim como faríamos com CSS e vamos usar a função incorporada dentro de Jake Worry Enemy. Então executa um conjunto de animação personalizado de propriedades CSS, que vai adicionar e calcular matematicamente como fazer este trabalho de rolagem. Nós vamos usar a opção de conversa rolada, e então este é o comando que vamos usar. E então aqui só precisamos colocar esse valor em tubulação. Então nós também poderíamos colocar um valor numérico. Mas como estamos calculando aqui, esse é o fato de que queremos que aconteça. E, em seguida, temos outra opção incorporada dentro desta função é que podemos configurá-lo para especificar quantos milissegundos esta animação vai levar. Então agora, 1000 milissegundos. Então esse é um segundo que essa animação vai levar. Então vamos verificar isso agora para que você veja que ele está rolando automaticamente. Temos nosso pergaminho acontecendo novamente, e é apenas um efeito muito agradável e puro que adicionamos em nosso site. Portanto, não é mais que clicar automaticamente para essa parte específica do site de página única . Está rolando até ele. E isso é muito mais atraente para os usuários quando vêem este pergaminho acontecendo um efeito muito agradável ,muito legal. , Então, na próxima lição, nós ainda temos algumas atualizações para fazer porque uma das coisas aqui é que nós não estamos fechando este menu, então nós precisamos deslizar o menu para cima sempre que ele é clicado. Então precisamos cuidar disso também. Então isso está chegando na próxima lição. 21. 22 Slidemenu até jQuery: esta lição. Quero atualizar o menu. Então, quando alternamos os diferentes dispositivos, vemos que temos este menu. Agora está aberto, vamos rolar. Mas, idealmente, este menu deve realmente alternar e fechar sempre que estamos fazendo nossa animação. Então isso é novamente isso vai ser adicionado aqui dentro desta função de clique, eu posso me livrar dessa coisa de cônsul também, então não precisamos disso. Preciso mesmo de estar a olhar para isso agora. E vamos adicionar isso em que vamos fechar nossa barra de menu se ele for aberto, se for algum se ele não estiver sendo exibido ou ele está sendo exibido como um bloco s para que possamos fechá-lo e deslizá-lo para cima. Então é aqui que usamos as condições. Então vamos fazer uma verificação para ver se nosso ícone Daph, se o CSS é, tem um valor de exibição. E se ele faz exatamente como acima onde nós vamos verificar para ver se é um bloco, na verdade, e se é, então nós vamos disparar essa função, e o que nós vamos fazer é em vez de deslizar, alternar de modo essencialmente uma praticamente a mesma função que estamos usando lá em cima. Vamos deslizá-lo para cima porque não temos que nos preocupar com a criança. Não queremos deslizá-lo para baixo e assim por diante. Então vamos dar uma olhada nisso. Tenho que atualizar essa página. Então, agora, sempre que clicarmos, então algo não está funcionando bem, e eu posso olhar no nosso console lá. Então nós temos um problema lá com o ícone do botão. Então, há algo problema lá, e parece que eu perdi o período lá, e este é outro uso para o console. Então é bom que essa questão tenha surgido, esse erro surgiu porque dá uma ideia melhor de como podemos utilizar esse Cônsul. Então agora, sempre que temos o menu aberto e clicamos em algo, vemos que agora ele fecha. Fazemos todo esse efeito de rolagem, então realmente precisa de funcionalidade muito agradável. Então ainda não terminamos com este site. Mesmo que tudo pareça muito bom, tudo está funcionando. Eu ainda quero acrescentar esse efeito de paralaxe que tem prometido você ao longo do curso. Vamos tratar disto na próxima lição e vamos usar o J. Corey para isto. E a maneira que isso vai funcionar é que vai verificar para ver onde estamos fora definido a partir do topo daquela escola, e nós vamos adicionar uma classe e remover uma classe, dependendo da posição do pergaminho e da posição do seção particular que estamos olhando. Então, essencialmente, nós vamos fazer com que ele grude, e nós vamos fazer essas imagens não mais. Vamos deixar o resto do conteúdo rolar, mas vamos manter as imagens no lugar enquanto estamos rolando para cima, e isso vai adicionar um efeito muito agradável. Então isso está chegando na próxima lição. 22. 23 Adicionar efeito Parallax: nesta lição, vamos atualizar e criar um efeito de paralaxe dentro do site. Então, uma das coisas que eu notei é que sempre que clicamos aqui, sempre que entramos na página e estamos em pequenos do que o menu já está aberto. Então, não queremos isso. E isso é algo que quando eu estou olhando para este cordão, nós tínhamos realmente comentado isso antes para que pudéssemos trabalhar no menu de navegação, modo que isso deve resolver esse problema lá. Então, agora, sempre que eu entrar na página da web, o menu é fechado na tela pequena e tudo funciona exatamente como nós queríamos quando temos o efeito de rolagem ocorrendo. E também precisamos adicionar um formulário de contato também. Então eu vou fazer isso na próxima lição. Então, por enquanto, o que eu queria fazer é atualizar o site e eu quero atualizar o site e incluir nosso efeito de paralaxe. Então, para fazer isso, eu quero trocar. Eu vou usar consulta J, mas eu também vou trocar para fora, e eu vou criar uma classe aqui, ponto fixo ou ponto fixo e para esta classe particular. Então, qualquer coisa que tenha essa aula vai ter um anexo de fundo e fundo vai estar em uma posição fixa e com preocupação nerd, eu vou atualizar isso. E eu não fixo ponto e removê-lo como onde, como estamos rolando através. Então, sempre que estamos rolando, eu quero disparar outro evento e minha consulta J. Então eu vou fazer isso aqui embaixo e vamos usar aquele objeto de janela novamente. Então, sempre que um pergaminho, é o que quer que o rolo da janela esteja acontecendo. Então nós estamos ligando para esse evento, então nós ligamos ele para redimensionar. Agora nós estamos apenas encontrando-o para rolar Sempre que rolagem ocorre, eu quero disparar uma função, e então esta função vai adicionar nessa seção e atualizar essa classe. Então, primeiro de tudo, precisamos dar uma olhada em todas as seções diferentes. E o que eu quero fazer é, enquanto estamos rolando, eu quero definir essa propriedade para adicionar uma classe se dependendo de onde a posição de rolagem está, então vamos atualizar isso e selecionar A com todas as seções diferentes que temos. Então nós vamos selecionar as seções, e nós vamos percorrer cada um deles e executar através das diferentes funções. Então isso deve estar ficando bastante complexo aqui no J. Crace. Estou tentando ficar com ele. Um simples ast é possível eso novamente. Vamos fazer aquele cálculo que fizemos aqui, onde nos deslocamos do topo. Mas como estamos a percorrer as diferentes secções, podemos obter essa informação. Então vamos usar isso de novo, e vamos pegá-lo do topo. Então esta é outra variável, e eu vou mostrar qual é o valor da conversa enquanto estamos rolando. Então, só para ter certeza de que ele está realmente disparando. Então, vamos atualizar a página. Dê uma olhada no nosso console e vamos ver como estamos rolando, estamos descobrindo onde estamos fazendo uma pesquisa rápida e estamos vendo onde cada seção está posicionada. E agora podemos usar esses cálculos e determinar onde está a barra de rolagem e em que imagem estamos olhando e fazer uma condição rápida para ver se nossa rolou. Se a nossa posição de esquilo está nessa imagem, então podemos aplicar que, caso contrário, irá removê-lo. Então isso vai ser um efeito realmente interessante, e provavelmente é muito mais fácil apenas fazê-lo e mostrar os resultados de sua explicação. Está ficando bastante complexo. Então eu só vou fazer uma declaração condicional aqui. Vamos verificar para ver a janela. Lembra-se? Com o objeto janela é que podemos ver onde a nossa posição de rolagem é, assim você pode ver onde rolar por que e esquilo y retorna o número de pixels que o documento já rolou verticalmente. Então vamos saber quantos pixels já rolamos. E vamos fazer uma condição rápida para ver se a posição de rolagem é quanto. É diferente do do tenso. E eu tenho que adicionar o tamanho da barra de menu também. Então temos que levar isso em consideração. E se ele corresponder a esta condição, então nós vamos selecionar isso e vamos adicionar em uma classe a ele. Então a classe que estamos adicionando vai ser aquele cérebro que você um que acabamos de criar. Então esse foi o ponto fixo. Então nós estamos adicionando na classe de ponto fixo, e se ele não corresponder a essa posição de rolagem, então nós vamos remover essa classe. Então isso só vai garantir que só estamos aplicando a classe para a seção que está aparecendo dentro da área da escola. Então, em resumo, estamos aplicando-o em certos pontos, dependendo de onde estamos rolando. E agora podemos ver que temos esse efeito de paralaxe que as imagens se movem em pontos diferentes. Então, se tivéssemos um número de imagens diferentes, podemos ver que alguns pontos eles ficam estáticos e, em seguida, em outros pontos, eles realmente se mobilizam e se movem. E este é o efeito de paralaxe que estávamos procurando s uma série de opções diferentes. Aqui é bem que você pode utilizar dentro de seu site eso você pode realmente brincar com isso e obter alguns efeitos legais muito agradáveis com It s então nós estamos apenas alternar que fora e podemos ver que a mesma coisa está acontecendo agora na tela maior onde estamos obtendo esse efeito de paralaxe completo dentro do site. Então, a próxima lição vamos terminar o que estávamos olhando com o com a seção de contato . Então eu vou apenas fazer um formulário de contato rápido no ADOT em s. Eu não vou vinculá-lo a qualquer volta em, mas só assim nós temos a formatação para o formulário de contato e cuidar de quaisquer outros ajustes e probabilidades e fins que precisam ser feitos a fim de concluir este projeto de site. 23. 24 Criar um formulário de contato: nesta lição. Eu quero jogar uma atualização rápida para o site. Então eu notei que sempre que estamos em uma tela menor, então se eu alternar o tamanho do dispositivo e descemos para portfólios, então eu vou descer pela barra de menus, vemos que parte do conteúdo do nosso portfólio está sendo cortada. Então não queremos que isso aconteça. E isso é algo que precisamos atualizar em nosso código-fonte. Então nunca está em uma tela menor. Parece que está cortada. Às vezes, as imagens aparecem, então queremos o dedo do pé. Faça isso ajustar automaticamente o eso. Isso está disponível dentro dessa seção. Então eu já tenho essa altura mínima definida para 800 picaretas. Mas melhor ainda definir a altura mínima para 100 altura de visualização. Então, isso irá garantir que sempre temos 100% de altura disponível e sempre que re tamanho, em seguida, o tamanho dos recipientes redimensionar isas Bem, eso. Agora podemos ver todo o conteúdo contido nesse portfólio. Eso só com isso consertado lá. Então vamos voltar para o nosso HTML e fazer algumas atualizações para o nosso código HTML, adicionando nesse formulário de contato. Então, abra. Nossos editores vão para o nosso HTML. Então não vamos olhar para o JavaScript agora. Estamos apenas olhando para HTML. Então o que eu queria fazer é eu quero adicionar um formulário de contato, então eu vou fazê-lo em um parágrafo aqui e para um formulário. Então nós temos nossa forma típica lá, e nós temos que apenas usar dibs para separar todos os campos de formulário. Então talvez eu possa até dar-lhe uma classe de papel ou algo assim para que eu possa distinguir entre eles adicionando rótulos para cada campo s Precisamos indicar para que campo? Isto vai ser quatro. Então eu vou criar um campo chamado nome e, em seguida, aqui dentro. Eu só vou pedir o nome fechar a etiqueta e depois aqui vou fazer uma entrada. Eso o i d vai ser nome o nome dele vai ser nome, e o tipo vai ser um campo de texto. Agora podemos até fazer algo como um oficial da polícia e digitar o nome, é claro, lá dentro. Então esse é o nosso formato básico para cada peça do nosso formulário eso o próximo é e-mail. Então, normalmente você vai pedir nome, e-mail, bagunça, e-mail, endereço. Então tudo isso precisamos atualizar o e-mail do Teoh e aqui, em vez de digitar texto, vamos fazer e-mails apertados. Então html five vai cuidar de verificar para se certificar de que é um endereço de e-mail real. E, finalmente, vamos adicionar mais um, e este pode ser a mensagem, então vamos apenas fazer mensagem e fita na mensagem em vez de uma entrada. Então eu vou fazer desta uma área de texto, e eu vou dar um eu d de mensagem, apenas o que faz sentido aqui. Nome do tipo de mensagem que não precisamos nos preocupar. Mas precisamos especificar dentro da área de texto quantas linhas queremos. Então um pouco de estilo há enfraquecer. Spect especificar a rosa. Também podemos especificar as colunas. Então, quantas colunas? Então, quão grande ele vai ser então talvez 2 50 e, em seguida, fechar a área de texto e colchetes adicionados em um extra lá para mim. Então eu vou apenas corrigir isso e, em seguida, por último, vamos adicionar em mais uma linha porque precisamos de um botão de submissão. Então nós somos apenas classe e talvez você poderia fazer rolar novamente e, em seguida, aqui nós vamos apenas adicionar um botão para que possamos fazer botões de texto. Bem, fita é igual a submeter. Então este vai ser um botão de enviar e enviar a sua mensagem. Vamos dar uma olhada e ver como isso parece em nosso site. Então, vamos entrar em contato Então há nosso formulário de contato parece OK, não é ideal. Então vamos fazer algumas atualizações para isso e estilizá-lo um pouco melhor. Então vamos, uh eu tenho que abrir uma nova janela. Aqui está para que você possa dar uma olhada melhor e ver como ele vai ser como nós estamos adicionando estilo. Então tudo acontece e toda a magia acontece dentro do nosso estilo. Então o que eu quero fazer é eu quero adicionar o meu estilo aqui no topo eso onde nós teríamos todo o nosso conteúdo corporal. Então eu quero adicionar no estilo para todos os nossos formulários dentro do nosso site toe Olhe o mesmo. Então, qualquer formulário vai tomar essas propriedades, eu vou dar-lhe uma margem fora de zero e auto para que nós centralizamos essa forma automaticamente. Então isso acrescenta algumas propriedades agradáveis. Talvez nós queiramos fazer um máximo com porque nós não queremos que ele esteja indo muito longe. Então talvez Max semanas de 600 nós vamos adicionar em algum eso estofamento que tal um AM tapando e talvez até adicionar em uma borda para que possamos ver, ver onde a bagunça onde o formulário é sólido e fazer isso vai realmente final fronteira assim? Então vamos dar uma olhada em ver como ele fica agora, então parece um pouco melhor. Ainda precisamos nos preocupar com a forma como os rótulos e assim por diante. Então vamos dar uma olhada nisso. Talvez até queiramos contorná-lo. Então, o raio da fronteira. Assim como fizemos com os formulários externos, vamos torná-lo um. Então agora temos essa borda arredondada ao redor de nossas formas, um efeito agradável, puro e interessante para a forma eso. Agora nós notamos que todos os rótulos de ar meio fora de controle lá. Então vamos cuidar de rótulos dentro do nosso site, e isso vai se espalhar através de todos eles exibir e nós vamos exibi-lo como um bloco escrito display errado lá. Então exibir como bloco. Então veja se isso é a hora certa. Isso faz com que seja muito melhor forma formatada. Talvez queiramos fazer isso com 100%. Só para garantir que estamos ocupando esse texto de espaço completo, queremos alinhar o texto para que o texto alinhe à esquerda, alinhe-o. Podemos definir as nossas margens também, se quisermos. Talvez a deixemos em ponto agora, para que fique muito melhor. Também podemos estilizar as áreas de entrada. Então, se você quiser que a entrada e a área de texto para ser o mesmo Então geralmente esta é a maneira que nós fazemos isso onde nós iniciamos ambos o mesmo e nós aplicamos todas as propriedades lá. Então é aqui que podemos definir uma largura para que talvez faria 60% com sobre eles. Então veja como isso se parece. Então agora eles são todos iguais com nós queremos, queremos centrá-los. Podemos querer dar uma margem eso tudo dependendo de como ele queria ser. Podemos fazer uma borda também, para que possamos realmente trazer essa borda e tocar algum tipo de cor da borda. Então vamos três setes e ver como isso se parece. Então eu não tenho certeza do que isso é Oh, isso está parecendo um pouco melhor lá. Também podemos definir o tamanho do pé. Então o tamanho da fonte que vai estar lá quando você digitar no texto lá. Então, o que quer que lutou tamanhos notam isso. Então eu tenho algum espaçamento extra lá que eu preciso me livrar. Definitivamente tem que se livrar de S O. Esse foi um dos problemas lá quando nós, quando colchetes adicionados em que a formatação extra lá e nós também podemos outro muito legal um dedo adicionar em formas é uma entrada. E sempre que nos concentramos na entrada e que é para a área de texto, foco. Então, sempre que estamos selecionando um elemento específico, podemos atualizar a cor da borda. Então vamos fazer borda ou vamos apenas definir a propriedade da cor da borda. Então, se quisermos torná-lo vermelho ou algo assim, para sabermos que o selecionamos, vamos dar uma olhada nisso agora. Então, sempre que estamos selecionando. Vemos que as cores mudam sempre que nos concentramos nela. E então é isso. Há muitas coisas que você pode fazer com seus formulários, mas essencialmente isso corresponde a todas as nossas necessidades. Então, temos nossosite responsivo de página única totalmente desenvolvido, site responsivo de página única totalmente desenvolvido, totalmente funcional com G Query e JavaScript. Temos este efeito de paralaxe com as imagens. Sempre que estamos rolando para cima, vemos isso. E se nós realmente tivéssemos alguns fundos e essas outras seções, nós veríamos alguns efeitos realmente agradáveis lá, bem como nós estamos rolando para cima. E estamos meio que empilhando todas as imagens. Parece que estamos empilhando um em cima do outro enquanto estamos rolando para cima. 24. 25 resumo do site Parallax de uma única página: Agora que concluímos nosso projeto de site, é sempre uma boa idéia verificar o seu site e certificar-se de que tudo está funcionando da maneira que você pretendia que ele funcionasse. Nós também podemos voltar para o nosso design original e apenas para ter certeza de que ele realmente tem a aparência que queríamos que ele fosse quando projetamos o site. Essencialmente, não havia realmente muito para o trabalho de design deste porque todas as coisas realmente boas que acontecem são tratadas por G. Query. A única coisa que estamos realmente olhando aqui dentro do design é polegar quando você e como estamos colocando menu. E isso é típico para qualquer site moderno onde temos esses menus e nós redimensioná-los e ele se apresenta de forma diferente em telas de tamanhos diferentes. Então menu totalmente funcional aqui abre e fecha, e assim por diante. Eso temos nosso formulário de contato são sobre mim seção nossa seção de portfólio de produtos e você pode realmente personalizar qualquer uma dessas seções para atender às suas necessidades. Atualize as imagens conforme necessário. Você pode até brincar com esse efeito de paralaxe, aplicando-o a diferentes seções e apenas vendo todas as coisas realmente legais que você pode fazer acontecer dentro de J usando J. Corey, HTML e CSS. Juntos, todo o código-fonte será fornecido dentro do curso, bem como os recursos que eu usei para criar este modelo da Web. Você pode pegar o código-fonte e criar sua própria versão deste modelo da Web e realmente utilizá-lo para ver o que você poderia construir a partir do básico que nós passamos com neste curso e aplicar seu próprio estilo e seu próprio CSS. É realmente realmente interessante ver as mudanças surpreendentes que você pode fazer com apenas um pouco de frio com um pouco de CSS e, em seguida, aplicar como J. Coury e JavaScript todas as funcionalidades surpreendentes. Você pode adicionar tantas coisas que pode remover e atualizar conforme necessário. Então, para realmente obter o efeito e a aparência que você deseja para o seu site e a principal coisa a tirar deste curso e esta essência resolver é que existem diferentes maneiras de projetar sites e nós mostramos a você como você pode essencialmente projetar um site completo a partir do zero e página única site moderno já para ir. E eu só notei aqui que nós temos um problema aqui com o conteúdo s O. Isso foi porque eu tinha redimensionado e atualizado isso. Então não está pairando. Mas isso é algo tão bem que quando você está verificando seu site, apenas certifique-se de que tudo está funcionando corretamente. E se você tiver algum texto transbordante, sempre poderá ocultar esse texto transbordante. Você pode definir essa largura máxima e assim por diante e fazer atualizações conforme necessário. Então isso era apenas algo que estava atrasando do navegador. Então, nem sempre está acontecendo. Eso Essas são apenas coisas diferentes para dar uma olhada no globo ocular o que está acontecendo com o seu site enquanto você trabalha através dele. Por isso, encorajo-vos a tirarem o que aprenderam no último conjunto de lições. Experimente por si mesmo, pratique-o e veja o que você poderia fazer acontecer usando HTML, CSS e Jake foram