Transcrições
1. Introdução: Olá e bem-vindo ao desenvolvimento web responsivo, HTML e CSS para Web Designers. Eu sou Chris, um Desenvolvedor Web Freelance e Professor aqui no SkillShare.com. Neste curso, vou ensinar-lhe como ir do design
ao desenvolvimento quando se trata de criar sites. A primeira seção do curso será sobre as diferenças entre web design e desenvolvimento web. Vamos rever o design responsivo, falar sobre código e terminar com um pouco de SEO. Na segunda seção, vamos pegar um design pronto criado no photoshop e transformá-lo em uma página web responsiva completa. Apesar do título, essa classe está configurada para beneficiar tanto Web Designers quanto Web Developers. Para Web Designers, você aprenderá como seus designs se traduzem em
sites de trabalho para que você possa se comunicar melhor com Desenvolvedores ou criar seus próprios projetos. Para desenvolvedores da Web, você aprenderá a trabalhar com Designers e criar uma cópia precisa de seus designs em HTML e CSS. Se você é um Desenvolvedor querendo trabalhar com um Designer, um Designer querendo trabalhar com um Desenvolvedor ou apenas alguém que queira desenvolver habilidades em ambas as áreas. Este curso é para você. Então, se você está pronto para começar, clique no próximo vídeo e eu vou vê-lo por dentro.
2. Design vs. desenvolvimento - Responsividade: Antes de começarmos a criar nosso site, é importante entender quais são as diferenças entre web design
tradicional e o desenvolvimento web front-end. O maior revelado no título desta classe é Responsividade. No contexto da web,
Responsive Web Design and Development significa que o layout e o design de sua página da web respondem às dimensões da janela em que ela está contida. Muitas vezes pensamos em Responsive Web Design em termos dos três dispositivos mais comuns, um laptop ou computador desktop, um tablet ou um telefone celular. Alguns designers podem confundir a versão móvel de um determinado site como um site completamente diferente. Mas geralmente o site móvel é simplesmente o mesmo que a versão desktop, mas é feito para ser responsivo para que ele se adapte a esse tamanho de tela menor. Como vê, enquanto o tablet móvel e o PC são os principais exemplos, eles simplesmente representam pontos diferentes em um espectro de fluidos. Se eu pegar minha janela do navegador aqui, por exemplo, você pode ver que a página da Web já está respondendo à alteração na largura da tela. No Google Chrome, posso simular a largura e a altura da tela de um celular abrindo minhas ferramentas de desenvolvedor e clicando na barra de ferramentas do dispositivo de alternância. Agora você pode ver a mesma versão do site, mas com um design adaptável que irá atualizar para qualquer tamanho de tela. Esta pode ser uma área de confusão entre designers e desenvolvedores porque os designers geralmente criam seus projetos com uma tela de conjunto. No mínimo, os designers criarão uma versão desktop do site. Mas, idealmente, os desenvolvedores devem receber designs
separados para todos os três tamanhos de tela comuns, PC, tablet e celular. Fora dessas dimensões de tela específicas, cabe ao desenvolvedor garantir que o layout da página da Web permaneça fluido e que quaisquer problemas que aparecem entre determinados tamanhos de tela sejam resolvidos. Para designers, eles costumam usar uma ferramenta como Adobe InDesign ou o Photoshop para criar seções e inserir texto e imagens. Uma maneira que você poderia conceituar isso é por ter cada elemento representado por uma caixa. Este conceito traduz-se muito bem em desenvolvimento web, exceto que as caixas irão mudar as dimensões ou mudar posição dado diferentes tamanhos de tela. Claro, esses elementos ou caixas, se você quiser, são determinados por como HTML e CSS, e é exatamente isso que vamos chegar na próxima lição.
3. Design vs. desenvolvimento - Código e exibição visual: Na lição anterior, falamos sobre como os designers costumam criar web designs em uma tela estática enquanto em desenvolvimento web, tamanhos de
tela e elementos fluidos,
significando que suas dimensões e posição podem mudá-lo a qualquer momento, esse comportamento é possível via HTML e CSS. Eu cobri HTML e CSS extensivamente na minha classe anterior, Web Development Fundamentals, HTML e CSS, mas para aqueles de vocês que não desejam aprofundar esses tópicos, HTML é uma linguagem de marcação que dá estrutura à web páginas e aplicativos em toda a web. CSS é a linguagem da folha de estilo usada para descrever a apresentação de HTML. Quando um não-desenvolvedor olha para um site, isso é o que eles podem ver, mas para criar o que você vê aqui, você precisa escrever o que você vê aqui. Este é HTML e este é CSS. Vamos entrar em como usar cada um deles na seção prática desta classe, mas por enquanto o ponto que estou fazendo é que a web,
como sabemos, ela, é composta de conteúdo contido em tags HTML, temos regras aplicadas a partir de CSS, que lhes dão estilo e layout. Isso é diferente de como um designer criaria uma marcação estática de página da Web. Por exemplo, usando uma ferramenta como o Photoshop, eles selecionariam entre uma variedade de controles interativos
e, em seguida, essas seleções serão armazenadas em um arquivo
do Photoshop, cujo código interno você nunca verá. Agora, esta informação não se destina a confundir você, mas simplesmente trazer à tona uma grande diferença entre Web Design e Desenvolvimento. Como desenvolvedor, tive problemas no passado,
com a comunicação com clientes que não entendem linguagem técnica. Por exemplo, cores, cores no desenvolvimento web são representadas por códigos hexadecimais, códigos
RGBA, códigos HSLA ou um conjunto de rótulos reconhecidos como branco ou preto. Idealmente, os designers devem tornar mais fácil para os desenvolvedores saber quais cores usar, sendo explícito sobre a cor exata necessária. Outro exemplo são as dimensões. Semelhante às cores, seria ideal para os designers passarem dimensões específicas para os desenvolvedores, em
vez de confiar no desenvolvedor para poder pegá-lo visualmente. No desenvolvimento web, as unidades mais comuns são pixels para alturas e larguras absolutas, e EM ou porcentagem para alturas e larguras relativas. Em ambos os exemplos, os designers geralmente podem entrar em seu software e anotar as cores ou dimensões específicas usadas, disponibilizando isso para o desenvolvedor. A exceção é, claro, larguras e alturas
relativas. Mas não se preocupe se você está um pouco confuso toda essa palestra técnica na seção prática desta aula, nós vamos realmente mergulhar e traduzir um design em uma página web real, então fique atento para isso. Até lá, só temos mais uma consideração para rever e que é SEO.
4. Design vs. desenvolvimento - SEO: O ponto final no desenvolvimento web que os designers devem considerar é SEO. SEO significa otimização do motor de busca. No desenvolvimento web, devemos nos preocupar principalmente com um lado do SEO. Frio na página SEO. Enquanto o SEO na página inclui um monte de fatores diferentes para áreas
comuns que podem causar problemas são imagens e cabeçalhos. Vamos cobrir as imagens primeiro. Os designers podem ser usados para exportar imagens e documentos com a mais alta qualidade possível, mas isso não é ideal para a Web. Ao construir sites, as imagens só devem ser tão grandes quanto precisam ser. A razão é sobre a velocidade da página. Você vê quando você vincula uma imagem em HTML, você pode definir uma largura e altura mesmo em um documento CSS ou diretamente no elemento. Este código é executado toda vez que o site é acessado e isso significa que a imagem neste endereço é carregada na íntegra cada vez. Claro, há algumas exceções a isso, mas esse é o comportamento padrão. O fato é que, se você pegar uma imagem e redimensioná-la para um tamanho menor em seu código, você simplesmente desperdiça dados e quanto maior a imagem, mais tempo
a página levará para carregar. É por isso que é importante para o designer exportar as imagens com apenas a resolução mais alta possível. Ou o desenvolvedor calcula
a resolução mais alta necessária e redimensiona as imagens de acordo. Em seguida, texto e cabeçalhos. Quando se trata de texto, sua escolha de tags é importante para SEO na página, vamos entrar em tags quando começarmos a trabalhar com HTML diretamente. Mas, por enquanto, é importante notar que
o uso das tags certas não se resume simplesmente à aparência. Em termos de tags de cabeçalho, às vezes vejo desenvolvedores cometer o erro de usar o que já tem o tamanho de fonte pretendido. Mas se você olhar para o sistema de numeração para títulos em HTML, você descobrirá que a tag h1 deve definir o cabeçalho mais importante e h6, o título menos importante. Web designers e outros não desenvolvedores podem não entender esse conceito. Portanto, é importante seguir a estrutura correta dos cabeçalhos e atualizar os estilos de cada tag se a aparência deles não estiver correta. Finalmente, quando se trata de texto dentro de imagens, tente evitar isso sempre que possível. As imagens não são responsivas e os motores de busca têm dificuldade em ler texto nelas, vez de texto real na página. No passado, usar imagens para obter um determinado layout ou estilo poderia ter sido essencial. Mas hoje em dia, HTML e CSS percorrem um longo caminho para reduzir qualquer efeito desejado. Isso é tudo para a seção de teoria desta classe. Na próxima seção, vamos ficar práticos e realmente construir uma página da web a partir de uma maquete criada no Photoshop. Vejo você no próximo vídeo.
5. PSD para HTML - Antes de começar: Portanto, antes de começarmos, é importante falarmos sobre o conhecimento e as ferramentas necessárias. Em termos de software, você vai precisar apenas de um navegador web e
do editor de código e para aqueles de vocês que são novos no desenvolvimento web, isso é o que ambos principais. Um navegador não é apenas o que você usa para navegar na Web, mas também o que você usa para visualizar documentos HTML em seu computador. Um editor de código é o que você usará para escrever seu código e editá-lo. Estes dois são basicamente as ferramentas essenciais necessárias para qualquer uma das minhas aulas de desenvolvimento web. Você definitivamente precisa de um lugar para escrever código e um lugar para visualizá-lo. Além disso, uma cópia do Adobe Photoshop é desejável, mas não essencial. Na seção a seguir, usarei o Photoshop para examinar o design do site, inspecionar cores e fontes e definir o preenchimento e as margens. No entanto, se você não tiver o Photoshop, ainda poderá acompanhar. Finalmente, em termos de conhecimento, recomendo que você já conheça os conceitos básicos de HTML e CSS. Para obter um conhecimento básico de HTML e CSS, eu recomendo que você faça minha aula anterior de Skillshare, fundamentos de desenvolvimento
web, HTML e CSS. Mas se você tiver pouco tempo, as seções HTML e CSS do meu primeiro curso, compreendendo o desenvolvimento web, um guia para iniciantes para a web deve ser suficiente para fornecer uma introdução básica a essas duas linguagens. Tirando isso, fornecerei os arquivos necessários para você completar a compilação na próxima lição.
6. PSD para HTML - Configuração: Então agora você deve ter um editor de código, um navegador da web, e até mesmo Photoshop pronto ou como alternativa, qualquer software que lê documentos. Para pegar um design para uma página web e transformá-lo em uma página web real, você vai precisar da simulação real da página web, as imagens necessárias e as fontes, cores e margens necessárias. Para aqueles que não estão trabalhando com um arquivo do Photoshop, você precisará do design e fornecer as imagens, as cores específicas, os nomes das fontes desejadas
e, se possível, os tamanhos de fonte e as margens entre os elementos. Neste caso, eu vou fornecer essa informação para você. Caso você tenha o Photoshop e o designer forneça um arquivo do Photoshop, você poderá pegar todas essas informações do próprio arquivo do Photoshop. É o que vou fazer nesta aula. Para começar, precisamos ir para um endereço em nosso navegador. Armazenei os arquivos do projeto para este projeto no GitHub. Então você só precisa ir para github.com/christopherdodd/skillshare. Uma vez que você chegar a essa página, você verá um repositório aqui, e aqui está Cuda Project.zip. Clique nisso e, em seguida, aqui, clique em “Download”. Vou colocar o meu para desktop. Então eu vou selecionar Desktop e clique em “Salvar”. Esse é um arquivo zip, é claro, então teremos que entrar em nosso Finder ou Windows Explorer, se você estiver usando o Windows. Vá para a área de trabalho e expanda o projeto. Podemos nos livrar do arquivo zip neste momento. Quando abrimos o Projeto Cuda, há duas pastas, uma é os arquivos de design. Temos o arquivo Photoshop aqui como denotado por the.psd. Então, se você não tem Photoshop, não se incomode em abrir esse. Aqui temos o PDF que representa o design, então se eu abrir isso, você pode ver o design que vamos fazer hoje. Isto é o que vamos ser capazes de fazer no final desta classe usando HTML e CSS. Claro, também há algumas imagens aqui, e é aí que entra a nossa pasta de ativos. Em nossa pasta de ativos, temos essas imagens disponíveis para trazer para o nosso projeto. Se você não estiver usando o Photoshop e tiver apenas a maquete para sair, precisará das cores e fontes específicas. Eu os coloquei em um documento PDF para você, também em um documento RTF, se você quiser ir e copiar colar, você deve ser capaz de copiar e colar com a maioria dos navegadores PDF de qualquer maneira. Então, se eu abrir isso, você pode entrar e copiar códigos de cores e colá-los diretamente no seu projeto. Agora que temos o nosso design pronto, é hora de realmente começar a codificar este projeto, e é isso que vamos fazer no próximo vídeo.
7. PSD para HTML - Estrutura: Então, agora que temos todos os nossos arquivos de design prontos, podemos realmente ir em frente e começar a construir este projeto em HTML e CSS. Nesta lição, vamos colocar a estrutura usando HTML. Em seguida, nas lições a seguir, vamos usar CSS para estilizá-lo. Você verá em breve como o projeto vem junto com CSS enquanto que com HTML sozinho, ele não vai se parecer nada com isso. Então eu tenho meu arquivo do Photoshop bem aberto na minha frente, mas, claro, como eu mencionei anteriormente, se você não tiver Photoshop você ainda pode seguir em nossa pasta Projetos aqui. Tenho a maquete em PDF. Então, o que eu vou fazer usando o arquivo do Photoshop, e se você tiver o Photoshop, sinta-se livre para acompanhar. Obviamente, o que eu posso fazer com o arquivo do Photoshop é realmente entrar e inspecionar elementos. Então eu posso entrar aqui e eu posso ver que a fonte é Titillium Web, que o peso da fonte é negrito, que o tamanho da fonte é 42,16 pixels e se eu olhar aqui, ele parece ser branco, mas na verdade não é um branco puro. É perto do branco, mas não puro. Então, o que eu fiz foi se você entrar na pasta novamente e clicar em Cores e Fontes, o que eu fiz foi dizer explicitamente o que todos esses elementos diferentes têm em termos de tamanhos de fonte, pesos e cores. Felizmente, e esta é uma lição para designers e desenvolvedores, os designers devem fornecer isso para desenvolver, pois não temos o Photoshop, e os desenvolvedores que não têm o Photoshop devem solicitar essas informações aos designers. Às vezes, os designers esperam que os desenvolvedores apenas tenham uma olhada nisso e sejam
capazes de descobrir a fonte apenas pelo tamanho ou descobrir o tamanho da fonte ou peso, isso é simplesmente impraticável. Portanto, certifique-se de que, seja você o desenvolvedor ou o designer, esses detalhes foram escritos ou estão disponíveis no arquivo do Photoshop, certo? Tudo bem, então a outra coisa que eu mencionei anteriormente, além de cores e fontes são dimensões. Mesmo usando uma ferramenta gratuita como Visualização, você ainda pode inspecionar dimensões. Você pode clicar na seleção retangular aqui e arrastar uma seleção, e há realmente uma ferramenta em Visualização se você estiver usando Mac ou eu não sei o que você usaria no PC, mas você pode realmente ir e encontrar Inspetor. Agora como eu arrasto, então eu tenho que fazer a seleção novamente. Você pode ver aqui, eu estou recebendo uma largura e altura para essa seleção. Então é aproximadamente 145 entre este logotipo e o início deste texto aqui. Então isso é realmente tudo o que precisamos saber. O resto podemos escolher visualmente, mas coisas como dimensões específicas, tamanhos de fonte específicos, famílias de fontes, pesos de fontes, algumas das quais são muitas vezes difíceis de identificar como desenvolvedor. Portanto, é importante obter essas informações onde quer que estejam em um documento como esse ou você obtenha o arquivo completo do Photoshop. Tudo bem, então sem mais delongas, vamos começar a construir nosso HTML. Vou abrir o ATOM, que é o meu editor de código. Como você pode ver aqui, eu tenho um projeto anterior aberto, mas eu vou fechar isso. O que eu vou fazer é criar um novo arquivo. Vou abrir uma nova janela no Google Chrome, que é o meu navegador preferido. O que eu vou fazer é ir para [inaudível] para HTML. Este é o lugar onde eu obtenho meu modelo HTML de nível base. Então eu vou copiar isso, e eu vou colocá-lo aqui. Assim como em meus outros cursos sobre HTML e CSS, eu vou cavar no meu arquivo do Project e eu vou chamar isso de cuda.html. Como estamos construindo apenas um arquivo HTML nesta classe particular, eu estou apenas nomeando Cuda. Mas se eu estivesse construindo várias páginas, eu chamaria este Índice para a página inicial. Só uma nota lateral. Assim que eu salvar esse documento, eu recebo todas as cores bonitas e eu também sou capaz de abrir isso no meu navegador. Por isso, vou levar isto para o outro lado. Vou arrastar isso para o meu navegador e, voilá, temos acesso ao nosso projeto agora. Se eu colocá-los lado a lado, eu posso ver o código e eu posso ver a saída aqui. Tudo bem, então a primeira coisa que eu vou querer mudar é o título Cuda. O que Cuda faz? Eu vou dar-lhe mais algumas palavras-chave, sites
incríveis e aplicativos móveis, vamos com isso, sites incríveis e aplicativos móveis. Agora só um aviso antes de entrarmos nisso, isso pode levar um pouco de tempo para entender o que estou prestes a fazer. Este não é um curso básico de HTML e CSS, então eu definitivamente recomendo que você vá e faça esses cursos se você ainda não fez isso. Mas o que estou prestes a fazer é estabelecer a estrutura que eu acredito que faria sentido para este projeto. Há várias maneiras de fazer isso, e você pode não acertar na primeira vez. Como você coloca em CSS, você pode ter que modificar seu HTML. Tudo isso está bem. Na verdade, eu já criei esse projeto, então eu tenho uma boa compreensão do que HTML funcionou e o que não funcionou, e eu tive que fazer algumas mudanças. Então, mantenha isso em mente enquanto passamos. Alguns dos meus processos de pensamento podem não ser imediatamente claros para vocês, mas, novamente, isso vem apenas do meu conhecimento fundamental e minha experiência com a construção de projetos semelhantes. Então, sim, vendo como eu faço isso e se você tiver alguma dúvida, sinta-se livre para perguntar na discussão. Então essa é a minha pequena declaração de responsabilidade antes de começarmos. Vamos realmente passar e construir isso. Então o que estou vendo aqui são três seções, ok? Então, se eu abrir isso, há esta seção aqui que é representada por esta caixa roxa. Há esta seção aqui que é a bela caixa verde. Você tem essa seção que é agradável e azul, e aqui em baixo é na verdade uma quarta seção, mas isso é mais um rodapé. Então você tem a Seção 1, Seção 2, Seção 3, e um rodapé. Como você pode ver, o cabeçalho, que podemos considerar esta parte aqui, é na verdade parte da primeira seção. Então eu vou estar aninhando isso dentro da Seção 1, ok? Agora a outra coisa que eu estou percebendo imediatamente é que não há nada fora dos limites dessas duas linhas de grade, ok? Isso é algo comum no desenvolvimento web chamado de contêiner. Agora tudo o que colocamos na página, se é um tamanho de tela que é bastante grande, ele não se estende até a largura total da tela. Ele fica dentro de um recipiente de uma largura máxima de, bem, vamos apenas dar uma olhada e ver qual é a largura máxima disso. Você pode ver aqui eu estou apenas arrastando minha ferramenta de seleção de um lado para o outro. Então o que vamos fazer em nosso HTML é ter contêineres embutidos em cada seção de 1140 e você verá isso acontecendo na prática muito em breve, ok? Isso pode se transformar em uma longa lição, então eu posso dividir isso em dois, mas vamos começar imediatamente. Então eu vou me livrar disso, e eu vou recuar isso, obter um pouco mais de espaço em nosso documento, eu gosto de muito espaço em branco. O que vamos fazer é a primeira seção, então eu vou recuar, criar uma seção. Vou dar a essa seção uma identificação da Seção 1, muito inventiva, eu sei. Então feche essa etiqueta. Se você é novo em HTML, você precisa de uma tag de abertura
e fechamento, e você terá conteúdo no meio. Está bem. Então temos mais duas seções como essa. Então eu vou nomear essa Seção 2, Seção 3 e então nós temos um rodapé. Então estes são os elementos de nível superior da nossa página web, três seções e um rodapé. Agora, dentro desta seção particular, o que eu vou fazer é criar um contêiner, e isso é apenas uma div com uma classe de contêiner. Isso garantirá que todo o conteúdo interno não fique mais largo do que 1140 pixels. Eu só vou copiar e colar isso em tudo, incluindo o rodapé porque como você pode ver o rodapé está dentro desses limites também. Está bem. Agora temos uma secção e um contentor. A próxima coisa que quero é um cabeçalho. Então, para criar este cabeçalho, eu vou abrir e fechar tags de cabeçalho, e a primeira coisa no cabeçalho é uma imagem, então img-src. Aqui é onde eu posso mirar um logotipo. Então, se eu entrar em um diretório, podemos ver ativos aqui e então podemos ver logo lá. Então assets/logo.png. Agora, a qualquer momento, você pode realmente ir e recarregar a página e ver o que você tem acontecendo. Como você pode ver aqui, a imagem não está chegando. Pergunto-me porquê. Então vá e inspecione aqui em baixo. A imagem está chegando, mas é branca. Então, como há um fundo branco e há uma imagem branca, você não pode realmente vê-lo. Para aqueles de vocês que não sabem, este é o Inspetor e eu sou capaz de olhar para qualquer página web e inspecionar o que está acontecendo em tempo real. Então isso é muito legal se você não fez nenhuma das minhas aulas anteriores. Então o que eu vou fazer porque nós vamos ter um monte de pequenos problemas como esse. Eu só vou construir o HTML fora primeiro, e então nós vamos olhar para o que ele parece como um documento puramente HTML, e então nós vamos construir o CSS e você vai ter uma noção de por que nós definitivamente precisamos CSS. Então temos a imagem. O que vou fazer agora é fazer um nav. Então você tem abertura e fechamento de navegação, e dentro eu vou fazer uma lista desordenada. Em seguida, para itens de lista seus LI, Então eu vou criar um e, em seguida, duplicar. Então o primeiro é o lar, e a outra coisa sobre esses links não é apenas eles listam itens lá, claro, links, e para denotar um link, nós só precisamos usar a tag a. Então, quando você cria links e você não tem a página para vincular ainda, muitas vezes você apenas usa um hash, e você tem que fechá-lo. Lá vamos nós. Agora podemos copiar isto, e podemos mudar o nome. Então, em casa, e se você está se perguntando por que eu não estou fazendo isso em maiúsculas, nós podemos realmente fazer isso em CSS, e isso realmente vai facilitar para nós. Quando estamos escrevendo nosso código, não
temos que olhar para ele em maiúsculas, e se quiséssemos mudá-lo por alguma razão para não maiúsculas depois, poderíamos mudar um estilo e isso voltaria atrás. A outra coisa aqui é que o primeiro link está ativo. Tem uma caixa à volta. Isso é o que essa caixa vai significar. Você teria visto isso em outros sites. Quando você está na página ativa, há algum tipo de indicação, e neste design específico, há uma caixa em torno do local em que você está. Estamos na página inicial no momento, então há uma caixa em casa, então a maneira mais fácil de fazer isso
na convenção usual é adicionar uma cláusula ao item da lista de ativo. Então agora temos nosso nav e nossa imagem dentro de um cabeçalho. Agora podemos descer e criar esta próxima seção, que é o cabeçalho principal e a chamada à ação. Vou dar a isto uma identificação, pensei muito sobre isto, mas não consegui arranjar um nome melhor, título
principal e CTA. Sei que é longo e provavelmente não é o melhor nome, mas é o mais descritivo. Então eu vou com ele. Agora, este título em particular aqui, é o cabeçalho de nível superior da nossa página web. Então é h1 que precisamos usar. A outra coisa boa de ter o Photoshop é que eu posso copiar diretamente o texto do arquivo do Photoshop para o meu documento HTML. última coisa além do título é, claro, o botão, e em HTML, se você usar a tag botão, você vai obter alguns estilos que parecem muito feios. Vou te mostrar o que quero dizer com isso aqui. Vou mudar isto para botão e depois vou dizer para trabalhar connosco. Você verá aqui que é o formato padrão para um botão. Por isso, é mais fácil de estilizar às vezes
se você fizer disso um link e, em seguida, estilizá-lo como um botão. Então, provavelmente vai ligar para outra página em seu site de qualquer maneira, então queremos criar isso como um link de qualquer maneira. Eu só vou dar uma aula a isso porque na verdade há dois desses botões, e nós vamos querer estilizá-los de maneiras semelhantes. Vou dar uma aula a isto, que
possamos ter como alvo o Big Button. Essa é praticamente a primeira seção. Agora vamos até a segunda seção, vamos identificar quais são os elementos. O que temos é essa seção de cabeçalho com um título, uma linha e um parágrafo, e então temos essas quatro colunas com um ícone, um cabeçalho e parágrafo novamente. A primeira coisa que vou fazer é que já temos o nosso contentor aqui. Eu vou criar esta primeira pequena seção, que eu vou classificar como a seção de cabeçalho. Na verdade, não vamos usar a seção porque estamos usando a seção aqui. Vamos chamá-lo de caixa de título, caixa é um pouco diferente, então eu não entendo isso confundido com a seção. Na caixa de título. Como eu disse, nós temos um título, e nós já temos um título de nível superior, então nós vamos ter que ir mais abaixo na lista e usar o título 2, eu vou digitar os serviços que fornecemos. Mais uma vez, vou esperar até o fim para mudar tudo isso para maiúsculas porque podemos fazer isso com um estilo. Em seguida, temos esta linha aqui, e geralmente para fazer uma linha básica em HTML, tudo o que podemos fazer é apenas usar esta regra horizontal tag, mas vai ser difícil estilizá-la exatamente como esta. Então o que eu vou fazer é ter uma div, dar-lhe uma classe de linha, e então podemos usar CSS para dar todos esses estilos que vão fazer com que pareça uma linha. Então, por baixo, vamos ter apenas uma tag de parágrafo, e como eu fiz antes, eu posso apenas selecionar todo esse texto e colá-lo diretamente. Então temos nossa caixa de título aqui, e agora podemos começar a construir nossas colunas. Então o que precisamos primeiro é de uma seção tudo para isso. O que essas coisas geralmente são chamadas de Blurbs. Então eu vou chamar a coisa que contém todos eles como uma linha de sinopse, e então dentro disso eu vou criar quatro divisões com a classe de sinopse. Agora, antes de duplicarmos isso quatro vezes, esses blurbs são praticamente a mesma coisa. Então o que eu vou fazer é construir um deles primeiro e depois copiar e colar. O primeiro, temos uma imagem. Se eu entrar em ativos e, em seguida, qual é o nome dele? Sinalizador icon.png. Um pequeno hack é que você pode entrar lá, clicar para tentar renomear, e então simplesmente copiar o nome,
para que possamos colocar isso lá dentro. Então vamos para outro título e eu vou torná-lo um título 3 porque estamos nos movendo para baixo na hierarquia, e eu vou chamar isso de branding. Então eu vou colocar no parágrafo, e então você tem um blurb. Crie algum espaço aqui, e vamos duplicar isso três vezes. Eu vou expandir para este também. Agora precisamos passar e alterar apenas o endereço do ícone, o título e o texto. Voltando para aqui, o próximo será o ícone de lápis de cera. Então eu vou copiar e colar o nome do arquivo, e vamos chamá-lo de design. Posso avançar aqui porque
estou basicamente a fazer a mesma coisa para todos os quatro. Tudo bem, no final de tudo isso, temos nossa seção dois. Temos a nossa caixa de título com um título, uma linha e um parágrafo. Então temos nossa linha de blurbs com quatro blurbs cada um com uma imagem, um cabeçalho e um parágrafo. Então vamos voltar e olhar para estes lado a lado. Você pode ver como o HTML se traduz para os elementos que
identificamos no próprio design. Agora temos a terceira seção para entrar em contato. Este vai ser o mais complicado porque as formas são sempre complicadas com design responsivo. Assim como os últimos, eu vou descer aqui, e eu posso copiar e colar essa caixa de título porque é a mesma coisa. Eu posso mudar o título para entrar em contato, e então eu posso copiar o texto do parágrafo e substituí-lo. Muito bem, as caixas de tittle já estão dentro. Isso é ótimo. Agora o que eu vou fazer é criar uma div para o formulário. Há apenas um formulário de contato, então eu vou dar a este um ID do formulário de contato. Então, dentro eu vou realmente abrir um formulário. Isto é o que faz um formulário funcionar. Você tem que colocá-lo dentro de um formulário. Então o que eu vou fazer, o que pode não fazer sentido agora, mas será quando começarmos a estilizá-lo com CSS, é criar linhas para cada uma dessas linhas diferentes no formulário. Só vai tornar mais fácil o estilo. Podemos realmente usar o estilo flexível, que eu vou mostrar em um vídeo mais tarde. Vou chamar isso de uma fila de formulários. Quero três dessas fileiras. Um para nome e e-mail, um para mensagem e outro para o botão. Agora temos três linhas de formulário. O primeiro, vamos colocar em duas entradas. Primeiro, tipo de entrada, texto, vai dar-lhe um nome de “nome” e um espaço reservado de “seu nome”. O texto que vai nesta caixa é chamado de espaço reservado no caso de você não ter percebido. É tudo o que precisamos. Então podemos ir e criar uma entrada para e-mail. Seu e-mail será o espaço reservado para esse. Agora aqui em baixo, esta caixa de texto não é realmente uma tag de entrada, acredite ou não, então eu tenho que fazer área de texto. Como um atributo na área de texto, somos capazes de dizer espaço reservado. Por completo, também lhe darei um nome, que será uma mensagem. O último, vamos fazer outro botão grande, mas desta vez ele precisa ser uma entrada para que o formulário possa ser enviado. Nós vamos colocar em outro tipo de entrada de enviar, classe de botão grande porque ele vai ser formatado da mesma maneira, eo valor vai determinar o que vai no conteúdo real dos botões. Neste caso, vai ser “enviar mensagem”. Certo, tenho certeza que essa lição tem sido longa, mas tenha um pouco mais comigo , porque só temos uma seção restante, e é a seção do rodapé. Então novamente com a seção de
rodapé, é semelhante à seção de navegação porque temos uma lista de links. Mas eu não chamaria isso de navegação necessariamente porque ele não está navegando para outros lugares no site. Na verdade, está se ligando a sites externos de mídia social. Semanticamente, vou chamá-lo de div em vez de nav para manter todos esses links. Vou dar a esse div uma classe de links de rodapé. Agora, como eu mencionei, é uma lista, então eu vou criar uma lista não ordenada e, em seguida, ter os diferentes itens. Assim como o acima
, vai ser listas com links dentro deles. Então, muito rapidamente, e eu poderia avançar com um pouco disso. Vou colocar os links. Tudo bem. O último passo, como podem ver aqui, é que o Twitter está em azul. Presumo que seja para o Active Link. Eu não sei como poderia ser um link ativo onde se você não está realmente na página do twitter, mas nós vamos tratá-lo da mesma maneira e nós vamos dar-lhe uma classe de ativo. Basicamente, qualquer um desses links com uma classe de ativo vai ter essa cor diferente. Assim como aqui em cima, qualquer um desses links com uma classe de ativos vai ter aquela caixa em torno dele. Essa é a maneira usual de fazer isso, então vamos aderir a essa convenção. Doce. Então é basicamente isso pessoal. Para o HTML, eu coloquei em um monte de classes já, mas nenhuma dessas classes está vinculada ao CSS. Vamos dar uma olhada em como ele se parece no navegador. Eu só preciso atualizar minha página, e walah olhar para este belo design. Então, rapazes, o que vocês estão olhando agora é HTML sem qualquer estilo. Não há estilos em linha, não
há nenhum arquivo CSS, e isso é o que parece. Como você pode ver, CSS vai fazer todo o trabalho pesado para nós quando se
trata de transformar o que isso é para isso. Tudo bem, então é por isso que esta é apenas uma lição, colocando o HTML em, e então o resto das lições serão em CSS. O que vamos fazer é dividi-lo seção por seção. Nós vamos realmente criar regras de estilo. Então você vai ver esta estrutura realmente se juntar e olhar muito perto do que temos aqui. Espero não ter perdido você neste vídeo. Desculpe se foi um pouco longo. Espero vê-lo no próximo, onde vamos realmente começar a fazer este parecer com o nosso design bem aqui. Vejo você no próximo vídeo.
8. CSS - Seção 1: Tudo bem. Na última lição, apresentamos a estrutura HTML da nossa página web recém-projetada. Como você pode ver, HTML faz um pouco para obter o conteúdo na página, mas precisamos de um monte de CSS para torná-lo assim. É sobre isso que serão as próximas três lições. Vamos dividi-lo em três seções, Seção 1, Seção 2, Seção 3, incluindo o rodapé, e então vamos trabalhar para torná-lo responsivo. Claro, vamos fazer escolhas CSS que
garantirão a melhor chance de ele ser responsivo à medida que descemos para tamanhos de tela mais baixos. Mas inevitavelmente, há sempre pequenos problemas que surgem. Nós vamos aprender como corrigi-los também com consultas de mídia. Finalmente, vamos transformar este menu em algo que é alternável. Eu não sei se isso é uma palavra, mas basicamente o que vai acontecer é que isso vai contrair e então nós podemos ativá-lo e desativá-lo no celular, que é um recurso bastante padrão em muitos sites nos dias de hoje. Nesta primeira lição, vamos fazer a primeira seção e isso deve nos manter ocupados. Primeiro, vamos para o editor de código, e o que precisamos fazer é criar um novo arquivo para abrigar todo o nosso CSS. Vou clicar em Novo arquivo, e vou salvá-lo imediatamente para obtermos nossa coloração, então navegue para o diretório do projeto, e vamos colocá-lo diretamente com nosso arquivo HTML. Vou chamá-lo de styles.css. Agora, a segunda parte disso é vincular este arquivo CSS ao nosso documento HTML. Como fazemos isso é entrando nas tags de cabeça, criando uma tag de link com um rel de folha de estilo e link para o arquivo styles.css. Como está na mesma pasta, não
precisamos colocar nenhuma pasta ou qualquer coisa. Podemos apenas ir styles.css. A primeira coisa que eu vou querer fazer é este recipiente, eu vou começar colocando em uma definição CSS classe. Novamente, esta não é uma classe básica CSS e HTML, mas pontos para classes. Veja como colocamos classe como um atributo em algumas dessas tags. Podemos segmentar essa classe colocando um ponto
e, em seguida, o nome dessa classe,
e, em seguida, entre colchetes, todos os nossos estilos. Mesma coisa para id. Se estamos identificando um único elemento na página, usaríamos id, e para segmentar um id, usaríamos hash e, em seguida, o nome. Por exemplo, para este cabeçalho principal no cta, que vamos chegar a um pouco, nós vamos direcioná-lo direito assim. Agora, a primeira coisa que eu quero fazer é criar uma largura máxima para este recipiente. Lembro que dissemos 1140 pixels. A segunda coisa que vamos querer fazer é
certificar-se de que seus centros no meio da página. Vou dar-lhe uma margem esquerda de auto e uma margem direita de auto. Basicamente, quando você tem um elemento de uma largura fixa, você é capaz de centrá-lo dentro seu elemento pai usando margin-left auto e margin-right auto. Se voltarmos ao nosso site agora e recarregarmos, você pode ver que ele tem algum bom espaçamento em ambos os lados. Se arrastarmos isto para dentro, ele vai continuar a manter aquela caixa agradável, aquele bom recipiente no meio da página até chegarmos a um ponto onde a largura da tela é menor que este número aqui, 1140. Nós temos nosso contêiner, que vai afetar toda a página, e agora vamos trabalhar na primeira seção. O que eu gostaria de usar são comentários para rotular as diferentes partes do meu documento CSS, então eu vou colocar um comentário aqui. Isto não vai fazer nada. Isto é apenas para nós olhando para o código, e assim você pode colocar em um comentário começando com uma barra e um asterisco e terminando com uma barra asterisco. Agora eu vou mirar minha primeira seção usando o símbolo hash, que eu mostrei a vocês um momento antes. O que vamos fazer é dar a esta seção este fundo roxo. Para aqueles de vocês que têm o Photoshop, você pode realmente clicar sobre isso, e com alguns cliques diferentes, você pode entrar e encontrar o código hexadecimal. Agora eu posso criar um atributo para cor de fundo, colocar no hash, colocar no código. Se você fizer isso sem o arquivo do Photoshop, ele estará em seu documento de cores e fontes,
e você só olharia o plano de fundo da Seção 1 lá está. Mesmo que você não tenha o Photoshop, lembre-se, você ainda pode acompanhar. Mas vou usar o Photoshop de agora em diante para descobrir essas coisas. Demos a cor de fundo, vamos ver o que acontece quando atualizamos a página. Voilá, temos este belo passado. Mas temos um problema aqui. O corpo tem uma margem. Eu não sei por que isso está acontecendo diretamente, mas nós podemos facilmente consertar isso, novamente, eu estou subindo aqui porque eu estou colocando todos os nossos estilos universais no topo. Podemos segmentar todo o corpo do nosso documento HTML. Vou me certificar de que não há margem ou preenchimento apenas colocando margem, preenchimento zero. Agora ele vai para as bordas. Como podem ver aqui, ainda
temos o nosso contentor. Podemos ver o nosso logotipo agora, porque não temos um fundo branco, mas ainda temos um longo caminho a percorrer. Em relação à Seção 1, também
quero ter certeza de que é alto o suficiente porque há muito espaço em nosso design. Vou marcar a caixa no Photoshop ou
posso arrastar uma seleção e ver a altura aproximada deste elemento, e podemos realmente corrigir nossa seção para ser a mesma. Tem cerca de 595-596 de altura. O que eu vou fazer é voltar para a nossa definição de seção aqui, dar-lhe uma altura mínima de 595. Lá vamos nós. É óbvio que não vai fazer sentido agora, mas o que vamos fazer é mover isto para cá, mover isto para o meio, fazer disto um bom botão. Voltando ao design, sempre referindo-se ao design, temos a primeira seção da nossa seção, ou a primeira área da nossa seção é este cabeçalho. Como você pode ver, há um pouco de uma margem acima. O que eu vou fazer é juntar-me a outra seleção para descobrir o quanto isso é, e digamos que é cerca de 55. Gosto de arredondá-lo para os cinco pixels mais próximos. Vamos para o cabeçalho do alvo. Lembre-se, se você estiver segmentando uma tag ou elemento HTML, você está apenas direcionando todos eles. Você não precisa usar um hash ou um ponto. Você pode simplesmente colocar explicitamente em qualquer elemento que você está direcionando e que afetará todos os elementos. Neste momento, só temos uma tag de cabeçalho, então isso só afetará aquela. O que eu vou fazer é dar-lhe um topo de preenchimento de 55 pixels. Eu sei que eu disse margem, mas se mudarmos isso para margem, o que ele vai fazer é empurrar toda
a seção para baixo e então você vai ter este espaço branco acima aqui. Não queremos isso, queremos estofamento. Expanda isso. A próxima coisa em que vamos trabalhar é este menu. Neste momento, está parecendo uma lista padrão de links. O que eu quero dizer com isso é que nós temos este estilo padrão para links onde nosso navegador, vai transformá-lo em um texto azul e dar-lhe sublinhado, e então também esses pontos feios, que é o comportamento padrão de fazer listas de coisas e fazer os links. Precisamos anular isso. Vou segmentar os itens da lista selecionando primeiro nav, em
seguida, indo para a lista não ordenada
e, em seguida, direcionando todos os itens da lista dentro dessas listas não ordenadas. O que eu vou fazer é primeiro mudar o estilo de exibição. Em vez de bloco de exibição, que atualmente é agora, Eu vou dar-lhe display bloco inline. Eu guardo isso. Você vai ver agora, ele está indo em linha em vez de bloquear. Novamente, esta não é uma classe CSS fundamental, mas uma explicação rápida de inline versus bloco. Você pode pensar em bloco como algo que estende toda a largura para a página e, em seguida, pilhas em cima um do outro como nossa página web é agora, você pode ver tudo é apenas empilhado em cima do outro. Esse é o comportamento padrão da maioria dos elementos para exibir apenas como um bloco. Mas o uso de bloco inline nos permite ter esses elementos em linha. Se a tela chegar a um ponto em que não pode suportar todos esses inline, ele voltará a bloquear. É um método de exibição muito comum, bloco inline. Agora eu quero me livrar dessa decoração de texto como é conhecido em CSS. Vou segmentar uma camada mais profunda e desativar a decoração de texto. Decoração de texto, nenhum. Lá vamos nós. Ainda temos azul. Eu vou entrar e fazer a cor branca, e lá vamos nós. Uma das coisas que estou percebendo agora é que temos algumas fontes bem feias. Isso é provavelmente algo que eu deveria ter criado no início, mas eu vou, estou descobrindo agora. Nossa fonte que estamos usando como escrito aqui é Titillium Web. Como fazemos Titillium Web em nosso projeto? O que vamos fazer é entrar no nosso navegador e procurar por fonte Titillium Web. Agora, podemos ir para o Google Fonts, e Google Fonts armazenar essa fonte no que é chamado de CDN. Um endereço público para o qual podemos vincular e trazer esta fonte. Vou selecionar essa fonte
e, em seguida, vou clicar em Personalizar. Caso contrário, ele só vai nos dar regular, então eu vou clicar em Personalizar. Vai nos dar um monte de opções diferentes. Quero ser capaz de selecionar luz, regular e negrito. Isso é o que precisamos para o projeto. Mas se suspeitar que precisaremos de mais, pode selecionar todos eles. Também podemos baixar essas fontes e hospedá-las em nosso site. Mas para o propósito deste curso, eu vou apenas usar esta tag aqui, que vamos vincular à fonte do Google, e então nós especificamos isso em nosso CSS. O Google torna as coisas mais fáceis para nós. Só temos que pegar o que diz aqui e colocar no nosso projeto. As primeiras coisas primeiro, isto vai. Esqueci-me de fazer a etiqueta final. Bem, ainda funcionou. De qualquer forma, agora estou me referindo a fontes externas. Isso deve estar ligado agora. O que posso fazer agora é definir o fundo do corpo. Estas serão as fontes padrão de tudo no corpo do nosso documento. Eu posso copiar isso e mudar a família de fontes para Titillium, eu acho realmente difícil pronunciar este aqui para Titillium Web. Vamos fechar isso, voltar ao nosso projeto e ver o que acontece. Olá, agora temos uma fonte diferente. Então, haverá certos pontos onde vamos usar negrito e vamos usar luzes, eu acho. Mas, por enquanto, podemos definir tudo para Titillium Web. A próxima coisa que quero fazer é flutuar o NAB para a direita. Como você pode ver aqui, está vindo por baixo do logotipo e eu não quero isso. Quero que flutue para a direita. Agora está aqui à direita. Está parecendo um pouco restrito nesta vista. Mas como você pode ver, quando somos maiores que 1140 pixels, ele tem alguma margem agradável. Vamos chegar a um tamanho de tela menor em uma lição posterior. Mas tirando o que temos aqui, vou continuar trabalhando para conseguir que isso seja como queremos. vez, eu só quero lembrá-lo antes de continuar que você pode fazer algumas tentativas para conseguir exatamente como parece aqui, e isso é totalmente bom. Eu tinha alguma prática antes. Alguns dos meus processos podem não ser imediatamente claros para você, mas apenas dê uma chance e tente coisas diferentes se o preenchimento não funcionar, tente margens. Se as margens não funcionarem, continue tentando e você chegará lá, eventualmente, faça alguma pesquisa. É assim que a maioria de nós aprende desenvolvimento web. Mas por agora, você tem me para orientá-lo através de como eu fiz isso e espero que vai fazer sentido se não como sempre caixa de discussão abaixo, se você tiver alguma dúvida. A seguir, o estofamento e a caixa. Eu vou para o item da lista e eu vou dar-lhe um pouco de preenchimento. Vamos dar uma olhada no design novamente. Como você pode ver, há um pouco de estofamento na parte superior e inferior, mas há mais preenchimento na esquerda e na direita. Só vou estimar isso. Vamos apenas arrastar um pouco de um dedo de seleção. Você pode ver a largura há cerca de 17 pixels, e o topo é de cerca de 15 pixels. É cerca de 16 pixels em ambos os lados, na verdade. Vamos começar com isso. Vamos começar com preenchimento de 16 pixels. Para ativo, eu vou segmentar esse elemento específico com uma classe de ativo usando isso, dar-lhe essa cor de fundo. Novamente, estou usando o Photoshop para fazer isso, mas você pode verificar no documento essa cor específica. Eu vou entrar aqui, hash essa cor em particular, e então nós podemos realmente vê-lo na tela lá. Como você pode ver agora, basta colocar esse preenchimento e essa cor de fundo, e nós já fizemos uma grande diferença. Agora, é claro, uma coisa que eu posso ver aqui é que nós temos essas bordas duras. O que podemos fazer para suavizar isso é usado o que é chamado de raio de fronteira. Vou adicionar isso ao nosso item de link ativo. Border- raio, cinco pixels é geralmente uma boa quantidade. Lá vamos nós. Agora, como você pode ver, o estofamento é um pouco mais retangular aqui. Vou modificar isso um pouco. O que eu vou fazer é mudar o estofamento contra cima e baixo para esquerda e direita. Acho que é um pouco mais perto. Talvez um pouco menos de estofamento no topo. Um pouco mais de enchimento à direita. Novamente, não é em capitais. A maneira como podemos fazer isso é usando a transformação de texto, e podemos selecionar maiúsculas. Agora, cada item da lista dentro de um nav terá letras maiúsculas. Como você pode ver, ainda há um pouco de diferença lá, mas eu vou seguir em frente porque eu não quero
gastar muito tempo em nenhum pequeno pedaço de elemento. Claro, a atenção aos detalhes é importante, mas você pode passar e experimentar isso para torná-lo perfeito. Vamos dar uma olhada. Parece que uma cabeça está muito boa agora. próximo passo é toda esta seção. Eu rotulei isso em um documento HTML como cabeçalho principal e CTA. O que vou fazer é criar um estilo para isso. Rubrica principal e CTA. Agora, o que eu quero do meu título principal e CTA? Em primeiro lugar, notei que tudo está centrado na página. Eu também notei que há alguma margem aqui. Se eu der uma olhada nisso, as margens de cerca de 150 pixels. O que vou fazer é dar a isto uma margem superior de 145 pixels. Agora está mais no centro. Mas então também vou dar-lhe um alinhamento de texto do centro para que ele apareça no centro. Lá vamos nós. A próxima coisa dentro deste título principal e CTA é o título real. Eu posso direcionar o título que está dentro do cabeçalho principal e CTA colocando no cabeçalho principal e CTA com um h1 depois. A primeira coisa que percebo é que a cor é branca, não preta. Lá vamos nós. O tamanho da fonte é realmente muito maior. Se eu entrar aqui, posso verificar o 42.16. Eu só vou com 42 pixels. Tamanho da fonte, 42 pixels. Você vai notar que é um peso de fonte, negrito. Felizmente nós instalamos o peso da fonte também. Podemos descer aqui e fazer o peso da fonte em negrito. Agora vamos dar uma olhada. Uau, olhe isso. É tão frequente que a menor das mudanças pode causar um grande impacto. É loucura pensar que começamos com o que estávamos olhando antes, que era se eu apenas me livrar desse link folha de estilo. Isto é o que estávamos olhando antes. Não sei há quanto tempo estamos indo para talvez 15 minutos de codificação. Agora temos esta bela paz. Obviamente, estou me adiantando. Há mais uma coisa estilo aqui e esse é o botão. Mas eu só queria deixar esse ponto brevemente. Como o botão vai ser estilizado praticamente a
mesma coisa que o botão de enviar mensagem aqui em baixo. Vou colocar um estilo acima da seção um para o botão grande. Botão grande tem alguns estilos diferentes sobre ele. Mais notavelmente, tem um monte de estofamento. Novamente, desenhando a ferramenta de seleção no topo
, tem cerca de 27. Nos lados. Tem uns 83. Esses números não serão exatos, mas nos dão um bom ponto de partida. Vou entrar e fazer estofamento de 25, 90, 25, 90. Também para o texto, queremos que seja do White. Vamos dar uma olhada agora. Ainda podemos ver o estofamento funcionando para nós. Também temos esse sublinhado, então precisamos consertar isso. Mas o que podemos fazer é adicionar um estilo para especificamente este botão para torná-lo o fundo laranja. Então podemos realmente ver o estofamento funcionando. O que eu vou fazer é começar com este seletor e é uma tag, então eu vou selecioná-lo usando um a.
Uma coisa que eu notei é o sublinhado, então eu vou me livrar da decoração de texto. Então a segunda coisa que vou fazer é dar a cor de fundo. A cor de fundo é, se eu entrar e inspecionar este elemento no Photoshop, lá está ele, colocá-lo. Agora vamos ver o que acontece. Temos um grande botão laranja. Estou notando algumas coisas. O trabalho do botão EUA está em maiúsculas e o tamanho da fonte é realmente um pouco maior também. Entrando aqui, posso ver que na verdade são 18 pixels. Assim como antes para capitalizá-lo, podemos usar texto transformar capitalize. Podemos corrigir o tamanho da fonte para 18 pixels. Agora fica um pouco maior. Infelizmente, o maiúsculo não é o mesmo que maiúsculas. Desculpe por isso. Capitalize no caso de você estar se perguntando, basta capitalizar a primeira letra de cada palavra. Lá vamos nós. Trabalhe conosco. Outra coisa que estou percebendo é que há alguma margem entre o botão e o texto. Isso é cerca de 60 pixels de margem. Como você pode ver, já há um pouco de margem já com a tag de cabeçalho que vem incorporada. Mas podemos estender para 60 pixels. Eu vou para o título, margin-bottom 60 pixels. Isso é empurra o botão um pouco para baixo. Outra coisa, raio de fronteira para dar aquela borda curva agradável. Lá vamos nós. Há mais alguma coisa? Acho que isso é muito bom, pessoal. Nossa primeira seção está praticamente completa. Obviamente, quando redimensionamos, ele funciona muito bem até certo ponto, vamos começar a corrigir problemas responsivos em um vídeo posterior. Mas para a seção um, acho que chegamos a um bom estado. Pode haver algumas discrepâncias, mas estou muito feliz com isso. Eu espero que você tenha sido capaz de acompanhar com esta lição, nós vamos agora fazer praticamente a mesma coisa, mas com esta seção e, em seguida, claro, o rodapé, e então você vai ver todo esse projeto se tornar assim. Mas, além disso, também vamos torná-lo responsivo e funcionar bem em todos os tamanhos de tela. Esse é o futuro excitante desta turma. Espero vê-lo na próxima lição. Vejo você então.
9. CSS - Seção 2: Muito bem, bem-vindos de volta, rapazes. Nesta lição, vamos continuar com a criação do CSS para nossa página de aprendizado para levá-lo deste para este. Vamos nos concentrar nesta segunda seção aqui nesta lição. Então, na próxima lição, faremos a seção final. Assim como antes, vou começar com a seção em si. Se eu clicar aqui e clicar no retângulo, se eu estiver usando o Photoshop, eu posso descobrir o preenchimento, então a cor da caixa e a altura dela. Vamos marcar esses estilos imediatamente. Primeiro de tudo, eu vou criar algum espaço aqui para que vocês possam ver o que estou digitando mais facilmente. Vou trapacear um pouco e copiar o que temos aqui. Eu vou continuar separando cada seção com um comentário apenas para
legibilidade para mim e
quem vem e olha para esta folha de estilo mais tarde abaixo da pista. Para a Seção 2, como eu mencionei, cor de
fundo como eu acabei de copiar, infelizmente eu já preenchi minha área de transferência com outra coisa, então eu tenho que ir e copiar isso novamente. Então as alturas que estão aqui em cima são 747 pixels. Eu vou com 745 só porque eu gosto de
arredondar para baixo e eu vou usar min-height. Agora, eu uso min-height aqui também, e você deve estar se perguntando por que eu uso min-height e não altura. Tem a ver com a capacidade de resposta. Agora queremos que ele tenha uma altura mínima quando todos os elementos, eu acho, podem caber facilmente dentro dele. Mas quando descemos para um tamanho de tela menor, você pode ver aqui com a Seção 1, você vê a altura da caixa fica maior e queremos que as alturas da seção fiquem maiores, para incluir todos os elementos. Agora vamos tornar este texto menor e alterar algumas das dimensões
dos elementos à medida que entramos em tamanhos de tela menores. Mas, independentemente disso, queremos que seja uma altura mínima, mas em tamanhos de tela
menores, estamos felizes por ela se
estender até o tempo necessário para incluir todo o conteúdo. Espero que isso esclareça isso, se você está se perguntando. Se eu rolar para baixo até a segunda seção, salve no documento, atualize a página, agora você pode ver que temos um fundo verde. Se eu estender a página inteira, o conteúdo é realmente mais alto do que a min-height nesta instância, então não estamos vendo realmente essa min-height em vigor. Mas assim que começarmos a colocar isso lado a lado, você verá isso. Uma coisa que estou percebendo que não está certa é que há uma lacuna entre aqui. Eu sei por experiência própria que as tags de cabeçalho têm uma margem superior e inferior por padrão. No inspetor podemos ver isso por esta área laranja. Se eu passar o mouse sobre o título 2, podemos ver uma área laranja na parte superior e inferior. Eu sei que isso está causando este espaço branco aqui. O que eu vou fazer é afetar este H2 em seguida. Em nosso HTML nós chamamos de caixa de título, eu vou novamente espaço para baixo, selecione título caixa, H2. O que eu vou fazer é me livrar da margin-top, possamos nos livrar disso,
e o que eu vou fazer mais tarde é colocar um pouco de preenchimento, o que eu não vou fazer agora, mas eu vou colocar um pouco de estofamento, então ele ainda tem algum espaço com isso linha para o título. Estou ficando um pouco à frente de mim trabalhando neste título, mas eu só queria me livrar desse espaço branco imediatamente. Voltando à nossa seção geral, uma coisa que precisamos para toda a seção é que a cor precisa ser branca. Novamente, colocando em cor branca, guardando isso, e lá vai você. Agora que colocamos os estilos para toda a seção, vamos trabalhar nas partes individuais. Temos primeiro esta área de caixa de título com a linha de cabeçalho e parágrafo. Como vimos um pouco mais cedo, a área de title-box tem a classe de title-box, e temos um H2 um div com uma classe de linha e uma tag P. Algumas coisas que notei sobre o design desta caixa de título são número um, é centralizado, então isso está flutuando para a esquerda ou alinhando para a esquerda, então precisamos centralizar o texto. Então a segunda coisa é se eu expandir o tamanho da tela, você pode ver que a quebra de linha está acontecendo muito apertada, e como podemos obter isso é colocando em uma largura máxima que ele não se estenda por mais tempo do que sobre essa largura. Primeiramente, vou espaçar, colocar um estilo de caixa de título aqui,
alinhar texto no centro, e vamos dar uma olhada em quão grande este texto é. Se eu desenhar uma ferramenta de seleção em torno dela, é cerca de seis ou nove. Novamente, eu gosto de arredondar para baixo, então eu vou fazer uma largura máxima de 609 pixels. Agora o que isso vai fazer é alinhar o texto e dar-lhe uma largura máxima, mas ele ainda vai aparecer à esquerda. Agora como podemos corrigir isso é agora que temos uma largura fixa, podemos colocar em ordem margin-esquerda e ordem margin-direita, e agora isso vai aparecer no meio. Lembre-se, se tivermos um elemento de bloco de largura fixa, podemos centralizá-lo dentro de seu elemento pai usando a ordem margin-esquerda e margin-direita. Agora eu vou voltar para este H1 e o que eu quero é um estofamento em cima. Aqui você pode ver que há muito preenchimento entre o topo da seção e o título. Nós nos livramos da margem então
não vai haver margem inerente agora. Mas isso é fixe. Podemos discar em nossa própria altura de preenchimento, e parece que tem cerca de 120 pixels. Vou entrar aqui, criar uma parte superior de 120 pixels. Felizmente, meu software de codificação cada vez que eu salvar, mata aqueles linha extra. Eu poderia apenas colocar em um comentário, para que ele pare de fazer isso. Desculpe por isso. Vamos voltar para a nossa página web. Agora podemos ver que há um grande espaço aqui. Não vai parecer muito certo até acertarmos este rumo. O que precisamos fazer para isso é torná-lo maior e torná-lo capitalizado. Se eu entrar e selecionar esse texto, posso ver que está 40 pixels em negrito, e obviamente está em maiúsculas. Vamos entrar e fazer isso. Tamanho da fonte, 40 pixels, peso da fonte, negrito, conversão de texto em maiúsculas. Vamos voltar ao nosso projeto, ver o que acontece. Lá vamos nós. Isso é praticamente o título da seção feito. A próxima coisa é a linha, e agora não há nenhuma linha aparecendo, então precisamos criar essa linha usando CSS. Primeiro de tudo, precisamos direcioná-lo, então title-box, em seguida, linha, e eu vou usar novamente o arquivo Photoshop como referência. Podemos dar uma olhada nas dimensões desta caixa clicando aqui. Podemos ver que a largura é 87 e a altura é quatro. Vamos discá-los para o nosso CSS. Largura 87 pixels, altura, quatro pixels. Agora ainda não vai aparecer. O espaço vai ser criado, como você pode ver, mas não vai aparecer até darmos uma cor, como qualquer div em HTML. Não vai mostrar nenhuma cor a menos que lhe dêssemos uma cor. Se olharmos para esta caixa, podemos ver que o preenchimento é praticamente completamente preto, mas o que ele tem é uma opacidade. Eu sou capaz de dizer isso olhando para as camadas e verificando aqui a opacidade. Se isso fosse 100 por cento, seria apenas uma linha preta sólida. Mas veja como ele se desvanece um pouco no fundo. Isso porque tem uma opacidade de 15%. A maneira como podemos discar isso
em CSS é usando RGBA. RGBA é uma maneira de colocar em um código de cor. Para esta pequena função, existem quatro parâmetros. O primeiro é o canal vermelho, o segundo é o canal verde, o terceiro é o canal azul, e o último, eu não sei o que significa “A”, mas é aí que podemos colocar o opacidade. O código RGB para preto é apenas zeros ao redor porque não há vermelho, verde ou azul. Eu vou fazer é zero; zero; zero, e então para opacidade, eu vou colocá-lo em como um decimal, então 0.15. Se eu salvar isso, recarregar a página, você pode ver que temos uma linha, mas é claro que está à esquerda aqui. O que vamos fazer é novamente, margin-esquerda e ordem margin-direita, não
importa em que ordem você os faz, e agora está no centro. Temos o nosso rumo, temos de nos alinhar e agora temos de trabalhar neste parágrafo. Eu acho que vai ser apenas uma questão de mudar o tamanho da fonte. Se eu cavar aqui, posso ver que o tamanho da fonte é 18 pixels e o peso é apenas normal, então não precisamos mudar isso. Entrando na caixa de título, direcionando a tag P dentro dela, eu vou definir o tamanho da fonte para 18 pixels. Voltando para trás, agora vemos nossa caixa de título trabalhando muito perto do que temos em nosso arquivo de loja de fotos. A única coisa que eu posso realmente notar aqui que é diferente no nosso é que há um pouco menos de preenchimento aqui, então dê uma olhada nesses 20 pixels. Vou voltar para a fila. Novamente, isso é por causa deste cabeçalho com sua margem herdada, ele vai inerentemente ter alguma margem inferior. Como você pode ver aqui, esse espaço laranja é o espaço entre o texto e a linha. O que eu vou fazer é mudar a margem inferior do cabeçalho para 20 pixels. Agora, você pode ver que não é exatamente perfeito porque há alguma altura de linha aqui também, então podemos mudar a altura da linha. Caso contrário, podemos apenas diminuir a margem inferior até que esteja mais perto do design real. Acho que está perto o suficiente. Doce. Essa é a caixa de título. Se eu expandir a Janela, fica muito bem. Agora precisamos fazer essas colunas acontecerem. O que vou fazer é voltar ao meu HTML e dar uma olhada no que temos. Temos uma div aqui chamada linha de sinopse, e então dentro que temos quatro blurbs. Para que todos se sentem um ao lado do outro, o que eu vou fazer é dar-lhes uma largura mais apertada e em seguida, usar o atributo de exibição inline-block. Passando para o nosso arquivo CSS, eu vou criar uma regra para o blurb, e o que eu vou fazer é que na verdade existem quatro colunas aqui. Agora, teoricamente, se tivermos 100 por cento de largura para trabalhar,
podemos fazer com que todas essas colunas sejam 25 por cento, e então isso somará 100. Mas, na realidade, existem outras coisas como margem, preenchimento e bordas que adicionam à largura horizontal e altura dos elementos. Para ser seguro, um bom número, que é um pouco menor que 25 é 23,33 por cento. Eu vou corrigir a largura deste para 23,33 por cento, e porque é uma largura relativa, isso significa que a largura desses elementos vão responder se o contêiner ficar menor que 1.140 pixels, que é o que queremos e você verá que funciona em apenas um segundo. Claro que temos a largura, mas não será exibido em linha, a menos que
definamos o estilo de exibição para inline ou inline-block, então eu fiz isso. Agora, eu vou voltar para o meu navegador, apertar atualizar e voila. Agora você pode ver que eles estão todos sentados bem ao lado do outro. Só para mostrar que se não fizéssemos 25 por cento, haveria um pouco de quebra de linha porque há sempre margem de preenchimento e bordas que ficam no caminho. 23,3 por cento dá um pouco de espaço para
respirar para que todos possam sentar-se bem juntos. A outra coisa é centralizar dentro dessas colunas. Como você me viu fazer uma e outra vez, eu vou dar-lhe um estilo de centro de alinhamento de texto, e lá você pode ver que chegamos bastante longe. Se voltarmos ao nosso design, podemos ver que isso é realmente um pouco próximo do parágrafo acima. Mais uma vez, eu só vou verificar a altura deste, que 80 pixels. Vou dar à linha de sinopse uma margem superior de 80 pixels. Lá vamos nós. Voltando ao design, agora acho que é hora de trabalhar nos blurbs, e o que podemos fazer para os blurbs é atualizar o tamanho
desses cabeçalhos e parágrafos e também capitalizar esses cabeçalhos. O que eu vou fazer para isso, direcione o título dentro da
sinopse, que eu acho que é um H3. Vamos checar isso novamente. Sim, então H3s dentro dos divs com uma classe de blurbs, vamos alterar o tamanho da fonte deles, então vamos determinar quais são esses. Vinte e quatro pixels e também negrito, então precisaremos alterar o peso da fonte também. Tamanho da fonte, 24 pixels e peso da fonte em negrito
e, claro, a transformação do texto em maiúsculas. Guarde isso, e agora temos um texto maior. Há um pouco da questão do alinhamento aqui, mas chegaremos a isso em apenas um segundo. A última coisa que eu quero fazer antes de corrigir isso é apenas para
ter certeza de que esses parágrafos são o tamanho certo da fonte. O que eu vou fazer para isso é ir para o Photoshop, selecionar a fonte, dizer que 16 pixels, e apenas discar isso para sinopse. Novamente, começando na sinopse e segmentando todos os Ps dentro da sinopse, vou corrigir o tamanho da fonte em 16 pixels. Se atualizarmos a página, podemos ver que ela não foi feita nenhuma alteração e assim que o texto deve ter sido tudo pronto 16 pixels. Agora, a última coisa que eu acho que nós temos que fazer
nesta seção é trabalhar nesta margem aqui. Eu vou dar uma olhada novamente com minha ferramenta de seleção, ver que são cerca de 60 pixels, e então o que eu vou fazer é voltar para este estilo para Cabeçalho 3 e dar-lhe uma margem superior de 60 pixels. Se eu salvar isso e atualizar a página, agora
você pode ver que tudo começa a se mover para baixo. Mas há uma edição final e que é que este título para branding está fora de linha com o resto dos títulos. Agora, por que isso? Bem, se você tomar um segundo para olhar para os parágrafos aqui, cada um deles está em duas linhas, exceto por esta. Se fôssemos realmente capazes de entrar e alterar a quantidade de texto neste parágrafo, vamos apenas nos livrar de tudo além dessa vírgula lá, você verá que tudo está em alinhamento novamente porque o texto está indo apenas sobre dois linhas. Poderíamos remover algum texto e eles se alinhariam muito bem, mas essa não é uma boa solução, especialmente se quisermos colocar mais texto para diferentes blurbs, e isso também pode quebrar quando diminuímos o tamanho da tela como está fazendo agora . A melhor maneira e a maneira mais fácil de fazer isso funcionar é usando a tabela de exibição. Tudo o que temos que fazer é voltar aqui e para blurb em vez de inline-block, inline-table, salvar isso ,
atualizar a página, e mesmo com essa segunda ou terceira linha de texto, tudo está alinhado bem como se fosse uma tabela com três linhas. Isso é um pequeno hack agradável disponível para nós nesta versão do CSS. Se esta fosse uma tabela com três linhas, você pode ver que cada linha tem aproximadamente a mesma altura agora,
e é claro que temos nossas colunas que configuramos antes. Isso é um pequeno hack para fazer isso funcionar. Às vezes, é preciso experimentar o estilo de exibição para corrigir pequenos problemas como esse. Na próxima seção, vamos realmente olhar para outro chamado display flex. Esses diferentes estilos de exibição podem ajudá-lo com esses problemas. Sim, isso resume basicamente a Seção 2. Se eu olhar para trás aqui, parece muito bom além de mais uma coisa e isso é que, como você pode ver aqui, a mesma coisa que estávamos falando aqui em cima. Parece haver uma largura máxima nesses parágrafos, ou se eu apenas desenhar meu cursor em torno dele, posso ver que tem cerca de 200 pixels de largura. Nós vamos entrar, dar-lhe uma largura máxima de 200 pixels e como você pode ver, ele está se movendo para a esquerda ainda. Precisamos entrar e fazer aquela coisa que sempre fizemos para colocar as coisas no centro, e isso é ordem margin-esquerda, ordem margin-direita. Salve isso, e como você pode ver agora, ele está criando esse espaço entre essa largura máxima, que está fazendo com que essas palavras se dividam em uma nova linha. Verificação final. Acho que está parecendo muito perto do design. Novamente, pequena atenção aos detalhes. Você poderia entrar e ter certeza de que, se as coisas tiverem cinco pixels de diferença, você poderia entrar e torná-las perfeitas. Mas eu acho que para nossos propósitos e para o propósito desta classe, estamos muito perto de onde ela precisa estar, e se eu arrastar minha janela para dentro, você pode ver o efeito desses tamanhos de largura relativa. Lembre-se que usamos 23,33% em vez de uma largura de pixel e o que isso permite é que quando estamos nesses tamanhos de tela menores, podemos começar a vê-los se adaptarem devido ao tamanho de seu contêiner. Como você pode ver, já estamos desenvolvendo algumas práticas que garantirão a melhor chance de que nossa página da web seja o mais responsiva possível. Novamente, quando chegarmos a um tamanho como este, começa a ficar um pouco confuso, então vamos precisar consertar isso. Mas, caso contrário, é bastante responsivo a um certo ponto e esse é o benefício de pensar à frente e usar esses estilos relativos. Essa é a Seção 2. No próximo vídeo, vamos fazer a Seção 3 e também o rodapé. Estou ansioso para te ver nessa.
10. CSS - Seção 3: Muito bem, bem-vindos de volta, rapazes. Estamos agora na retch homestretch para obter esta página web com bom aspecto em pelo menos desktop. Já fizemos a seção 1 e a seção 2 agora. Agora é só sobre deixar isso bonito. Como você pode ver, nossos estilos que criamos para a caixa de título já chegaram, então não precisamos fazer essa seção novamente. Essa é a melhor coisa sobre as classes e a criação de estilos para elas, você começa a reutilizar esses estilos. A coisa que vai levar a maior quantidade de trabalho
nesta lição aqui vai ser este formulário aqui. Primeiramente, como fizemos em todas as lições anteriores, vamos definir os estilos gerais para esta seção e
vamos seguir o mesmo formato que os anteriores. Eu só vou copiar toda a seção 2s porque nós vamos usar os mesmos atributos. Renomeie isso para a seção 3, e o que vamos mudar é a cor de fundo e a altura mínima. Como sempre, vou entrar no meu arquivo do Photoshop para descobrir o que deve ser. Como sempre, eu posso clicar em “Preencher” aqui e obter o código hexadecimal exato da cor. Eu posso ver a altura aqui tem 820 pixels de altura. Vamos discar isso imediatamente. Vou mudar esse código hexadecimal para isso e mudar a altura mínima para 820 pixels. Voltando ao nosso projeto, agora
você pode ver que a altura tomou afetar a cor do texto é diferente e nós temos aquele lindo fundo azul. Com os estilos de seção e também os estilos de caixa de título já feitos para nós, a única coisa que resta para trabalhar para esta seção é o formulário em si e isso vai nos manter muito ocupados porque como você pode ver, este formulário não parece qualquer coisa como o que temos aqui. Primeiramente, vamos dar uma olhada no nosso HTML. Como você pode ver aqui, temos um recipiente div com o id do formulário de contato. Temos o formulário real dentro, e então temos três linhas de formulário, cada uma com entradas diferentes. Como você pode ver aqui, nós temos esses dois existentes em uma linha, este existente em uma linha, e o botão enviar existente em uma linha também. Agora há alguns pequenos problemas aqui como você não pode ver o texto no botão porque é cor branca e o botão é cor branca. Chegaremos a isso em apenas um segundo. Mas para começar com o elemento pai, para começar, vamos criar um estilo para formulário de contato. No meu CSS, estou criando uma regra de estilo para qualquer coisa com um id de formulário de contato, que vai ser este div bem aqui. O que eu quero fazer é exatamente como fizemos aqui para a caixa de título é dar-lhe uma largura máxima e centralizá-lo. Vou entrar no meu arquivo do Photoshop e descobrir o tamanho desse formulário. Arredondando para o pixel mais próximo, é cerca de 871, 870, desculpe. Vou entrar e dar a isto uma largura máxima de 870 pixels. Agora que ele tem uma largura fixa, podemos usar margem esquerda ordem, e margem direita ordem para centralizá-lo dentro de seu elemento pai. Neste momento, tudo isso está alinhado à esquerda, mas se quisermos inspecioná-lo no front-end, você pode ver que ele existe em um contêiner agora centralizado e restrito a 870 pixels. Agora que temos essa base, é hora de estilizar os elementos reais dentro e podemos fazer isso usando a tag Level Seletor. Todas as entradas e áreas de texto, quero que a cor do texto inserido seja branca. Também quero que o fundo seja o pano de fundo que temos aqui. Se eu olhar para essas caixas e no Photoshop, , pegue o código hexadecimal. Posso trocar para o meu código. Software, mude a cor de fundo para isso. Voltando ao nosso design, você pode ver que ele afeta cada entrada e cada área de texto. Agora o problema com isso é que nosso botão Enviar
também é um elemento de entrada, então ele vai afetar este botão bem, que pode não ter sido planejado e definitivamente para isso, nós não queremos os mesmos estilos que temos em nossa entrada para afetar nosso botão de entrada. O que vamos fazer é que vamos ter que colocar alguns seletores
de atributos aqui para ter certeza de que ele só seleciona esses dois e não essa entrada. Isso vai parecer um pouco confuso se você não estiver acostumado a CSS antes, mas podemos direcionar um atributo e valor usando esses colchetes em CSS. Vamos direcionar as entradas com um tipo de texto. Então temos que criar outro porque este é realmente tipo de e-mail para copiar
isso e alterar o tipo para e-mail. Se eu salvar isso, você verá que ele não está afetando mais o botão Enviar. Apenas essas entradas e aquela área de texto. A outra coisa que notei é que tem uma fronteira feia. Eu vou dizer fronteira nenhum para que isso se livre disso. Estou percebendo que o espaço reservado, apesar de entrar e ser capaz de digitar com a cor branca. Como você pode ver aqui, nós mudamos a cor branca não muda realmente o espaço reservado. Ele só altera o texto que você digita nessas caixas. Para fazer isso, vamos ter que usar um pouco de um tipo de seletor especial, e isso é um pseudo seletor. Como fazemos isso é digitando e eu vou
selecionar todos esses dois pontos, dois pontos, espaço reservado. Essa é a maneira que podemos direcionar o espaço reservado de certos elementos dentro do CSS. Sei que pode parecer estranho, mas é assim que é. Vou colorir isso para branco e, em seguida, wallah, você pode ver aqui que o espaço reservado não está passando e há realmente um pouco de texto já lá dentro. Isso é porque qualquer espaço que você colocar aqui,
qualquer espaço em branco que vai se deparar. Vamos fechar esse conjunto de etiquetas e lá vai você. Textarea, é um estranho porque é uma entrada, mas ele simplesmente não age da mesma forma que uma entrada. Voltando ao CSS, há algumas outras mudanças que precisamos fazer aqui. Queremos ter certeza de que o tamanho da fonte é o mesmo que o nosso design. Queremos adicionar alguma margem também. Então, é claro, precisamos torná-los tão grandes quanto eles precisam ser, então eles são bem pequenos no momento, queremos que este seja 50% de largura, este tem cerca de 50% de largura, e este para estender todo o largura do nosso recipiente. Entrando em nossa folha de estilo aqui, realmente entrando em nosso design primeiro. Podemos entrar, usar a ferramenta de texto para selecionar o texto aqui e ver que ele é 18 pixels. Indo, tamanho da fonte, 18 pixels. Agora o tamanho da fonte é maior, mas os campos são simplesmente muito próximos. Vamos colocá-lo em um pouco de margem. Vou fazer um cálculo aproximado da margem. O espaçamento entre diz cerca de 28. Aqui, é cerca de 44, apenas indo para ir com 26 por agora. Margem, e isso pode mudar no futuro, mas vamos apenas fazer 26 para a margem. Como você pode ver, isso é um pouco demais, então eu vou ligá-lo de volta para talvez 16. Vamos precisar mudar isso, mas está tudo bem por enquanto. O que eu quero fazer é ter certeza de que estes se estendem por toda a largura do recipiente, então agora eu vou trabalhar sobre estes, linha por linha. Precisamos corrigir o, não só a largura, mas a altura deles também. Para os dois primeiros, texto
de entrada e e-mail de entrada. Vou criar um espaço aqui. Vamos fazer a largura de 50% e a altura. O que devemos fazer para a altura? Se entrarmos na caixa de novo, só precisamos limpar essa seleção. Vá para a caixa, podemos ver que a altura é de 56 pixels. Vamos marcar essa altura aqui. Agora, quando nós atualizamos a página, como você pode ver, como eu mencionei antes, com as colunas aqui em cima sendo 25 por cento cada. Se fizermos 50 por cento cada um, com o estilo de exibição de inline, ele vai quebrar para uma nova linha e nós precisaremos dar um pouco menos de uma largura para que ele possa ficar unido. Lá vai você, com 45 por cento. Vamos precisar mudar isso daqui a pouco e mostrarei como vamos fazer isso em apenas um segundo. Mas, por enquanto, precisamos fazer com que este se estenda 100% e então também vamos descobrir a altura desse também. Então, entrando aqui, clicando na “Ferramenta Retângulo” para que possamos ver a altura. Podemos ver que são 200 pixels. Vou segmentar minha área de texto no meu CSS, corrigir a altura em 200 pixels e definir a largura para 100 por cento. Agora você pode ver que a linha superior e a segunda linha, aproximadamente vai a largura total do recipiente. Agora, como te mostrei antes, precisamos que isto seja 50-50. Mas por causa da margem, por causa de tudo o resto, não está alinhando, então temos essa vantagem que não está alinhando perfeitamente com essa borda. O que vamos fazer para consertar isso, é ajustar isso de volta para 50. Mas temos o mesmo problema de novo. Como é que vamos ultrapassar isto? Bem, é quando podemos usar nosso amigo display flex. Se você está se perguntando antes por que eu criei essas linhas para começar, class="form-row">, foi para este propósito exato. Então, se eu entrar aqui e criar uma regra de estilo para a linha de formulário, eu posso mostrar-lhe a magia do display flex. Vou definir isso para exibir flex. Vou atualizar a página e voilá. Agora você pode ver que as bordas estão alinhadas perfeitamente e está flexionando, suponho que você poderia dizer, para obter esse resultado. Mesmo se eu redimensionar a página, ela ainda permanece perfeitamente borda a borda alinhada. Essa é a beleza do flex. Estamos chegando muito perto de onde queremos que esteja. Estou percebendo duas coisas agora que são diferentes entre o arquivo do Photoshop e nosso documento, e que é o raio limite e também um preenchimento aqui à esquerda. Vou consertar isso agora. Para todas as entradas, eu vou entrar e mudar o raio da borda para cinco pixels, como fizemos em todos os outros lugares e eu vou ter um preenchimento sobrando de cerca de 16. Se eu atualizar a página, você pode ver começa a parecer um pouco mais agradável. Agora há também esta margem aqui para a área de texto, e isso é cerca de 24 pixels. Então, na área de texto especificamente, eu vou dar-lhe um topo de preenchimento de 24 pixels. Lá você pode ver que nós temos um bom acolchoamento confortável. Na verdade, isso é muito próximo do que temos aqui. Pode haver um pouco de diferença com a margem, mas no geral estou muito feliz com isso. Estou pronto para seguir em frente para o nosso botão aqui. Como já definimos um estilo para botão grande aqui em cima, podemos reciclar esses estilos, e por isso vai ser uma questão principalmente de mudar a cor de fundo. Então, a cor de fundo do botão, se entrarmos e selecionar a caixa aqui, encontrar seu atributo de preenchimento e copiar. Podemos alterar a cor de fundo do nosso tipo de entrada enviar. Então você vai para aqui e
segmentá-lo da mesma forma que direcionamos nosso texto e e-mail. Só precisa dizer [type="submit "], e depois cor de fundo o código # de 30bae7. Tudo bem. Como você pode ver, está
se deparando muito melhor agora que colocamos essa cor de fundo. Mas o que precisamos fazer também, é nos livrar dessa fronteira feia. Tudo bem. Assim como aqui, precisamos ter certeza de que o texto é maior e maiúsculo, eu acredito. Também precisamos centralizar este botão e vamos trabalhar em um pouco da margem também. Se eu voltar ao meu design, posso verificar qual é o tamanho da fonte do meu botão. São 18 pixels. Vamos discar isso, tamanho
da fonte 18 pixels. E como mencionei antes, está em maiúsculas. Então vamos ter que usar a transformação de texto em maiúsculas
e, em seguida, é claro, queremos que ele seja centralizado. Margina-esquerda: auto, margin-direita: auto. Guarde isso. Venha para o outro lado e lá vai você. É mais no centro. Só precisamos mais uma vez consertar o raio da fronteira. Vamos dar uma olhada nisso em comparação com o nosso design. Bastante perto. A única coisa, como eu mencionei antes, é a margem, então isso é cerca de 60 pixels e nós poderíamos dar-lhe uma margem superior aqui de 60 pixels. Mas se inspecionarmos e veremos que estamos fazendo a linha maior por ter uma margem aqui. O que eu gosto de fazer neste caso, configurar uma margem superior no envio de entrada. Eu vou colocar um estilo em linha na linha de formulário antes dele, e dar-lhe uma margem inferior de 60. Isso só garante que as alturas dessas linhas de formulário permaneçam as mesmas, e a margem é definida entre essas linhas. que eu acho que é mais apropriado, mas ao mesmo tempo, realmente não importa. Você poderia ter colocado a margem no botão também. Tudo bem. Essa é a nossa forma feita. Vamos passar para o rodapé rapidamente e encerrar esta seção e, em seguida, passar para consultas de mídia. Para isso, precisamos fazer algo semelhante ao que fizemos aqui em cima. São apenas um monte de links que estão organizados como uma lista, então precisamos fazer algo semelhante ao que fizemos para isso. Na verdade, vou copiar e colar o que temos aqui. Desloque-se para baixo, cole isso. Em vez de nav ul li, o que estamos direcionando é links de rodapé, e assim você pode verificar isso aqui em baixo. Temos ligações de rodapé com um ul e depois Lis. Nós não queremos que eles fiquem em maiúsculas, então eu vou dar uma transformação de texto em maiúsculas, mas vamos ver o que acontece quando fazemos isso. Ótima. Agora também precisamos nos livrar da decoração do texto e torná-los brancos. Então eu vou copiar e colar isso. Novamente, alterando nav para links de rodapé. Agora você não pode vê-los infelizmente, porque nós precisamos realmente mudar a cor de fundo do rodapé. Então, rodapé é apenas uma tag, então podemos ir para o nosso arquivo do Photoshop como fizemos em toda esta seção. Clique na caixa, descubra a cor de fundo
e, em seguida, disque-a em nosso CSS. Então, lá vai você. Temos a cor de fundo apropriada, mas ainda não estamos lá, porque temos essa margem acima e abaixo da lista. Então, se eu for inspecionar isso, eu posso achar que a lista real não ordenada, como você pode ver aqui por essas linhas laranja, está criando essa margem. Então eu vou entrar e segmentar essas listas não ordenadas específicas como esta, e definir a margem como zero. Agora, se eu voltar, atualizar a página, agora, está de volta ao normal. Então, duas coisas que estou percebendo agora a partir daqui para isto é, número 1, precisamos aumentar a fonte. Inspecione isso em apenas um segundo. Também que temos isso pendurado para o lado aqui, onde gostaríamos que fosse mais centrado. Então, vamos dar ao recipiente uma largura máxima e centralizá-lo exatamente como fizemos com outros elementos aqui em cima. Então, se eu voltar ao meu arquivo do Photoshop aqui, posso inspecionar esse texto e ver que ele tem 24 pixels. Então vamos fazer isso agora. O tamanho da fonte, 24 pixels. Agora com o contêiner, se eu olhar aqui, é sobre pegar uma ferramenta de seleção e colocá-la de um lado para o outro, é cerca de 945 largura, então eu vou criar um estilo para os links. Largura máxima dessa quantidade, que era 945, e como de costume ordem marginal esquerda, ordem margin-direita, guarde isso. Volte para o nosso documento aqui. Agora você pode ver que ele se centra. A única outra coisa realmente óbvia aqui é que Twitter é uma cor diferente neste design, e isso é porque, tanto quanto eu posso dizer, é um link ativo, como eu mencionei antes, eu não sei como poderia ser quando não estamos realmente no site do Twitter agora. Mas, independentemente disso, decidimos estilizá-lo como um link ativo. Então eu copiei esse código hexadecimal, e o que eu vou fazer, é atingir o mesmo que eu alvejei logo acima, mas desta vez colocar ponto ativo no li, e então cor hash 30bae7, e lá vai você. Agora, para torná-lo perfeito, há alguns problemas de preenchimento e margem aqui,
então, como você pode ver, há um pouco de margem entre aqui e ali, cerca de 45 pixels, e na parte inferior aproximadamente o mesmo. Então também entre eles, há cerca de 50 pixels entre eles também. Então, para obter um resultado semelhante a esse, o que eu vou fazer é colocar algum preenchimento na própria lista. Top acolchoado. O que era mesmo? Cerca de 50 preenchimento top 50 pixels, preenchimento inferior, 50 pixels,
e, em seguida, entre os próprios itens da lista nós já temos algum preenchimento, mas talvez possamos torná-lo um pouco maior, então eu vou para alterá-los de 16 para 20. Voltando ao nosso design, agora
você pode ver que há muito mais preenchimento,
e há um pouco mais de margem entre cada um desses itens. Na verdade, é um pouco demais, então o que eu poderia fazer é diminuir para cerca de metade. Então, estofamento superior, enchimento inferior 25. Isso está começando a se parecer muito mais com o que temos aqui em baixo. Novamente, pode haver algumas discrepâncias, mas para o propósito desta lição, acho que estamos muito perto do que precisa ser, e se você redimensionar,
você pode ver que está indo muito bem, de forma responsável também. Mas como eu mencionei nas lições anteriores, você pode começar a ver a quebra de página em diferentes pontos em todas as seções, se nós trazê-lo em um pouco. Então, com este, o texto fica um pouco grande e preso juntos. O menu quebra em uma nova linha. Esse botão cai e vai além da altura da seção. Aqui embaixo, essas colunas ficam super apertadas e, em seguida, uma quebra forçada em uma nova linha ,
e claro, isso, formulário aqui , e o rodapé, vamos precisar fazer algumas mudanças nisso. A maneira como podemos fazer isso é usando o que é chamado de media queries. Então agora, você pode ver um site ou uma página da web que nós
desenvolvemos para desktop que funciona muito bem e é responsivo a um certo ponto, mas o que nós vamos ter que fazer, é adicionar essas consultas de mídia para garantir que ele parece perfeito em todos os tamanhos de tela. Então, no próximo vídeo, eu vou mostrar a vocês como fazer isso, mas eu estou muito animado que agora nós transformamos o que era. Vou fazer isso de novo só para mostrar a diferença. O que era isso agora isso apenas colocando em alguns estilos CSS. Esse é o poder do CSS ali mesmo. Então dê um tapinha nas costas por ter vindo até aqui. Nós só temos um pouco a fazer em termos de consultas de mídia, então eu vou mostrar-lhe como fazer a coisa do menu móvel, que é bastante comum em sites móveis. Fale um pouco sobre bootstrap também, e então vamos terminar a aula. Não muito tempo, fiquem aí, pessoal, e vejo vocês no próximo vídeo.
11. CSS - Media Queries: Bem-vindos de volta, rapazes. Nesta lição, vamos falar sobre consultas de mídia, e vamos usar consultas de mídia para tornar nossa página da web totalmente responsiva. Lembre-se, quando eu redimensiono a página em algumas lições anteriores, ela começou a ficar um pouco confuso, começa uma pausa um pouco, e podemos corrigir tudo isso com consultas de mídia. O que são consultas de mídia? Na verdade, há algumas coisas que você pode fazer com consultas de mídia. Eu tenho a definição aqui de w3schools.com. Você pode usar consultas de mídia para verificar muitas coisas, como largura e altura, orientação e resolução. Mas no contexto do desenvolvimento web responsivo, podemos usar consultas de mídia para alterar as regras
de estilo de nossos elementos com base em uma variedade de tamanhos de tela. Para a gama de tamanhos de tela geralmente estamos falando de larguras de tela. Vamos mergulhar e mostrar-lhe um exemplo imediatamente. A primeira coisa que eu sabia é quebrar, e eu gosto de colocar minhas consultas de mídia na parte superior dos meus arquivos CSS para que eles carregem primeiro lugar. A primeira coisa que eu estou percebendo é, o que eu mostrei antes quando eu redimensiono a janela e eu fico abaixo de 1140 pixels, eu começo a obter margens apertadas em ambos os lados, e eu não quero isso. Aqui em baixo, ele realmente não aparece, mas aqui no cabeçalho, ele aparece. O que eu quero fazer é em vez de ter margin-left auto, margin-right auto porque ele não está tendo efeito mais porque ele é menor do que o contêiner. Eu quero realmente fixar uma margem. O que eu fiz lá foi inspecionado um elemento, e isso trouxe à tona as ferramentas do desenvolvedor. Vou manter as ferramentas do desenvolvedor abertas para o resto desta lição. A razão pela qual é como eu estou redimensionando, você pode ver no canto aqui ele vem até embora muito brevemente com uma largura de tela, então eu posso realmente ver em que ponto as larguras da tela estão quebrando. Para esse contêiner em particular, sei que será quando tiver menos de 140 pixels. Não sei qual navegador você está usando, mas se estiver usando o Chrome, você pode procurar as ferramentas de desenvolvedor. Acredito que eles estão no menu Exibir, Desenvolvedor, Ferramentas do desenvolvedor. Já as tenho abertas, então fecharam. Outra exibição que você pode usar para ver essas dimensões novamente, é clicar aqui na barra de ferramentas do dispositivo de alternância
e, em seguida, você está no nó Responsive. Você pode redimensionar a janela, e essa largura vai ficar lá em cima. Uma coisa que você deve observar sobre a visualização responsiva nas ferramentas de desenvolvedor
do Google Chrome é que ele simula um ambiente móvel. Se você quiser usá-lo em frente, antes de entrarmos nos menores tamanhos de tela como
aqui em baixo , onde é mais como um telefone ou tablet, vamos ter que colocar em uma tag extra em nosso HTML, e nós vamos ter para chegar a isso de qualquer maneira, então podemos muito bem fazê-lo agora. Precisamos colocar a meta tag para viewport. Eu não espero que você saiba o que é isso, mas se nós apenas digitar, meta tag para viewport ou viewport meta tag no Google, Ele vai aparecer para nós. Eu já estive neste link antes, que é um recurso muito bom da Mozilla. Aqui, se rolarmos para baixo, podemos ver a tag viewport que precisamos colocar nesse projeto. Antes de colocarmos, o que é? Bem, aqui está um pouco de fundo se você quiser ler mais sobre isso. Basicamente, ele força a viewport a ser o mesmo que o tamanho da tela. Se você está se perguntando por que isso não seria por padrão, é uma maneira de tornar sites otimizados
não móveis, em geral, melhor em tamanhos de tela estreitos. Na verdade, são quatro páginas que não são otimizadas para dispositivos móveis. É claro que, neste dia e era em que desenvolver todos os nossos sites é responsivo para dispositivos móveis, por isso é quase um dado que gostaríamos de colocar esta tag em nosso HTML. Um pouco de um te trouxe lá. É apenas algo que precisamos lembrar ao desenvolver sites responsivos para dispositivos móveis. Certifique-se de que a viewport é igual à largura do dispositivo. Isso é tudo o que precisamos para colocar em nosso HTML. Vamos voltar aos nossos estilos
e, na verdade, construir algumas consultas de mídia. Gosto de colocar minhas consultas de mídia no topo para que elas sejam carregadas rapidamente. Como você escreve um é usando um símbolo at mídia, tela e, em seguida, isso é quando você coloca em sua largura máxima ou min-width. Você também pode colocar em alturas, mas para o propósito desta lição, só
precisamos fazer larguras. Como eu mencionei antes, a margem deste recipiente começa a quebrar uma vez onde menor do que 1140 pixels. Vou definir isto para largura máxima, 1140 pixels. Em seguida, abra a consulta de mídia usando esses colchetes novamente. Em seguida, dentro dos colchetes você pode fazer uma regra CSS como de costume. Eu posso criar uma regra para o recipiente em vez de margin-esquerda auto, margin-direita auto, Vou fazer margin-esquerda, cerca de 15 pixels, margin-direita 15 pixels. Se eu salvar isso, recarregar a página, você pode ver que nada aconteceu. Deixa-me ver isto. Se eu entrar no contêiner e inspecioná-lo, você verá que os estilos estão chegando, mas eles estão riscados. Isso significa que eles estão sendo substituídos por estes aqui. Se eu desmarcar estes, você verá que estes agora se aplicam. É claro que não podemos desmarcá-los para todos os sites. Vamos ter que descobrir uma maneira de corrigir isso para todos os usuários. Um hack fácil que podemos usar é ponto de exclamação, importante. Se você colocar isso logo após o valor para o atributo, salve isso, atualize a página, então ela substituirá o que temos aqui. Agora, há toda uma hierarquia de especificidade em CSS, que eu examinei no meu curso sobre CSS e HTML. Se você quiser saber mais sobre a hierarquia, você pode ir conferir esse curso, como eu mencionei antes. Basicamente, só precisamos colocar em um importante a
fim de ultrapassar esta regra na hierarquia. Agora, há outra maneira de fazer isso, e isso é colocando essa regra em outra consulta de mídia que não se aplica a esse tamanho de tela, porque isso se aplica a cada tamanho de tela porque não está dentro de uma consulta de mídia. Eu poderia fazer isso, em vez disso, para este caso em particular, pelo
menos para fins de demonstração. O que eu posso fazer é colocar uma media query bastante semelhante acima desta, mas em vez de max-width, eu coloco min-width, e eu vou discar no mesmo valor, mas um extra. Agora, vou copiar estes estilos. A largura máxima pode permanecer a mesma em ambos os tamanhos de tela. Mas eu vou remover a margin-esquerda e margin-direita auto, e só tenho isso quando o tamanho da tela é maior que 1141 pixels. Se ele ficar mais baixo que isso, então ele estará neste intervalo, e a margem esquerda e margin-direita serão 15 pixels cada. Se eu salvar isso, atualize a página aqui, você pode ver o mesmo efeito. Arraste esta janela responsiva em um pouco mais e veja quais mudanças podemos precisar fazer em tamanhos de tela menores. Uma coisa que eu notei é que o rodapé começa a quebrar em uma nova linha em cerca de, vamos discá-lo e ver, em 932, que é quando isso começa a quebrar em uma nova linha. Agora, precisamos tomar uma decisão de design aqui. O que vamos realmente fazer quando o tamanho da tela é muito pequeno que não pode ter todos eles com o mesmo tamanho de fonte e preenchimento. Bem, o que eu acho que é mais apropriado é ter a linha quebrada, mas ter todo o texto centrado. Você vê aqui como o GitHub flutua para a esquerda. Queremos que o GitHub flutue no meio, e queremos que as linhas sejam o mais uniformes possível, em termos de quantos links eles têm em cada linha. Mais uma vez, isto é apenas o meu pensamento. Você pode fazer como quiser, mas é o que eu acho que é a melhor maneira de fazer isso. Vou simulá-lo aqui nas minhas ferramentas de desenvolvedor. O que posso fazer é diminuir a largura máxima dos rodapés até começarmos a ver mais deles caídos na segunda linha. Atualmente, estamos no 900, então vai ter que ser mais baixo do que isso. Vamos discar 850 e ver o que acontece. Felizmente, vocês estão confortáveis com o uso das ferramentas do desenvolvedor. Estou usando-os extensivamente ao longo deste curso, obviamente, porque eles são uma ótima ferramenta e você pode experimentar em tempo real com diferentes estilos. Se você não estiver confortável em fazê-lo dessa maneira, você sempre pode ir direto para o seu arquivo CSS, salvar, recarregar a página, salvar, recarregar a página, mas isso é um pouco mais rápido. Temos um segundo para descer para uma nova linha, trazendo essa largura máxima para baixo. Agora, nós realmente temos um número desigual de links, então nós não vamos ter exatamente o mesmo em cada linha, mas quatro e três é perto o suficiente. Vou subir até o ponto em que ele se rompe. Isso é 676. Agora precisamos nos lembrar das larguras. Esqueci os pontos de interrupção, então vou criar uma estrutura de consulta de mídia por enquanto. Vou criar um espaço em branco para colocar isso. Mas sabemos que queremos links completos para atualizar para uma largura máxima desse valor. Quando queremos que isso aconteça? Se eu recarregar a página, podemos reidentificar o ponto em que ela quebra para uma nova linha. Usando a visão responsiva, estou discando os números e parece que é 932. Vamos colocá-lo aqui 932 pixels. Atualize a página. Podemos ver aqui que nosso estilo está sendo substituído novamente. Nós vamos usar esse hack de importante, e se eu atualizar novamente, você pode ver que uma vez que descer de 933 para qualquer mais baixo, ele vai quebrar em duas linhas. Claro, eu quero tudo isso centrado. Uma coisa que eu posso fazer sobre isso é colocar em um estilo de centro de alinhamento de texto. Novamente, isso está apenas nas minhas Ferramentas de Desenvolvedor para verificar se está funcionando. Sim, parece bom. Vamos entrar aqui, e alinhar o texto no centro. Recarregue a página para ver se essas alterações foram tornadas permanentes. Sim, agora nós o dividimos em uma nova linha. Antes de rolar para cima e trabalhar nos tamanhos de tela menores, eu estou realmente percebendo um pouco de um problema que você pode ter perdido. Isso é que há mais espaço à esquerda aqui do que à direita. Isso não está exatamente sentado exatamente no meio, e isso se tornará mais pronunciado se baixarmos a largura da tela. Como você pode ver aqui, é definitivamente fora para o lado. Se eu voltar para 908 e eu tenho uma olhada no inspetor para os links parece ok em termos de caixas aparecendo na tela. Mas se eu entrar na UL, posso ver que o preenchimento, que é representado pela caixa verde, está na parte superior, inferior e esquerda. Nós definimos o preenchimento superior e inferior explicitamente, mas por algum motivo há um preenchimento esquerdo. Isso deve ser algo que vem padrão com listas não ordenadas. Mas é algo que podemos nos livrar colocando em uma regra, preenchendo esquerda 0. Lá você pode ver que nós resolvemos o problema. Claro, para tornar isso permanente, temos que colocá-lo em nosso arquivo CSS. Vou criar um estilo para links de rodapé UL e mudar o preenchimento à esquerda para 0. Agora, quando atualizarmos a página, essa mudança será permanente. Agora que temos esse espaço extra que foi ocupado pelo preenchimento, podemos realmente mudar essa largura máxima se quisermos. Eu posso discá-lo ainda mais para que mais dos links quebrar para a nova linha. Isso é 636, parece ser onde está. Vou actualizar isso aqui. 636. Atualize a página. Agora você pode ver nosso rodapé e nossos links de rodapé on-line bem no centro da página. Voltando para 908, e tendo uma olhada na página enquanto reduzimos a largura da tela, vamos dar uma olhada nos problemas que surgem. Isso está ficando um pouco apertado, mas não estou muito preocupado com isso ainda. Descendo para cerca de 800. Ainda estava bem. Descendo ainda mais para cerca de 750. Vamos dar uma olhada agora. Tudo parece bem além daqui, podemos ver essa maré quebrar em duas linhas, então está bagunçando o alinhamento um pouco. Uma maneira de corrigir isso é reduzindo o tamanho da fonte. Eu só vou discar para baixo no inspetor real. 22 deve ser suficiente para resolver essa questão. Mas é claro, eu tenho que descobrir quando esse problema começa a acontecer. Vou me concentrar nesse título, arrastar minha janela para fora, e parece que está ocorrendo em uma largura máxima de 797. Como sempre, eu vou fazer uma consulta de mídia para isso, e apenas como uma pequena nota, pessoal. Você não tem que fazer tantas consultas de mídia, nós poderíamos combinar algumas delas na verdade. Mas é assim que gosto de fazer. Tradicionalmente, você pode querer combinar esses pontos ou até mesmo ter certos pontos de interrupção, como no Bootstrap, que eu mostrarei mais tarde. Mas para mim, eu só gosto de passar e consertar as coisas quando chegar a essa largura exata da tela. É assim que gosto de fazer, sinta-se livre para fazer do outro jeito. Essa nota lateral acabou. Vou criar um estilo para o cabeçalho da sinopse para torná-lo 22 pixels. Tamanho da fonte 22 pixels, e porque estamos substituindo um estilo anterior onde você tem que colocar importante sobre ele, e lá vai você. No 797 foram muito bons, vamos arrastar em nossa janela ainda mais para baixo para cerca de 735. Sim, 700 ou 695. Agora você pode ver essa quebra de linha começando a acontecer novamente com o título. Mas isso sendo dito, em vez de alterar o tamanho da fonte do título. Novamente, eu acho que é sobre a hora esta linha de quatro colunas se transformar em uma situação de duas colunas, duas linhas. A maneira como podemos fazer isso é dobrando a largura da linha. Obviamente, à medida que entramos em tamanhos de tela menores e menores, haverá um ponto em que a coluna se rompe com uma nova linha. Podemos muito bem cortá-lo na parte de trás mais cedo e então podemos corrigir este problema de cabeçalho também. O que eu vou fazer é experimentar 46,66% em minhas Ferramentas de Desenvolvedor apenas para ver se ele funciona. Você pode ver que ele faz. Vou escolher uma largura de tela quando isso começar a quebrar novamente. Parece que acontece às 732. Novamente, usando consultas de mídia, largura máxima de 732, largura de
sinopse 46,66 por cento e importante para garantir que ele substitua o estilo anterior. Atualize a página. Agora você pode ver que uma vez que ele chega a 732, ele vai quebrar em duas linhas com duas colunas cada. Outra coisa que eu estou percebendo que nós realmente não vimos antes quando eles estão todos alinhados um ao lado do outro, é que precisamos de um pouco de margem no fundo. Aqui você pode ver que isso está um pouco perto demais da próxima seção, e esses dois estão um pouco próximos. Eu vou dar ao blurb alguma margem inferior também. Margem inferior 30 pixels. Lá você pode ver que há um pouco mais de espaço para respirar entre os elementos. Eu não tive que colocar importante nisso porque nós
não definimos uma regra para a margem inferior ainda. 704, vamos discar para cerca de, vamos com 50 incrementos, 650. Estou muito bem com isso. Vamos descer para 600, formulário parece bem. Agora temos um problema. Podemos ver que nosso botão está se estendendo para a próxima seção. Vou ligar para ver quando essa mudança acontece. Parece que acontece exatamente às 619. Como eu vou resolver isso,
é que este texto está parecendo um pouco grande de qualquer maneira. Eu posso reduzir o tamanho disso e isso vai trazer esse botão de volta para a seção. Você já deve estar acostumado a escrever consultas de mídia porque
já escrevemos muitas delas. Apenas discando em uma largura máxima de 619, e para o tamanho do título, está em 42 agora, eu acho que 35 será suficiente. Vamos discar nas ferramentas do inspetor. Sim, isso parece muito bom. Vou entrar no cabeçalho principal e CTA, tamanho da fonte
H1 35 pixels, e é claro, importante substituir esse estilo anterior. Agora, se atualizarmos a página, isso vai ser permanente. Como você pode ver, uma vez que ele atinge esse ponto, o texto fica menor e nós não temos esse botão indo para a próxima seção. Outra coisa que você vai notar é o nosso menu aqui em cima. Está entrando em uma nova linha e não parece mais ótimo. Isso é algo que você pode corrigir agora, mas nós realmente vamos construir um menu móvel especificamente para dispositivos móveis. Não estou preocupado com isso nesta fase, essa será a próxima lição. Mas vamos dar uma olhada em tudo o resto em nossa página. Tudo o resto está parecendo bem ainda. Eu vou continuar, 550. Agora estamos entrando nos tamanhos que você pode ver no seu telefone. Aqui você pode ver que o texto é um pouco grande, vamos ter que quebrar o botão novamente. Eu só posso dizer. 450. Tudo bem, 400 e agora você pode ver aquele botão invadindo aquela seção novamente. Eu vou fazer o mesmo estilo, mas basta adicionar um novo ponto de interrupção. No ponto de ruptura de 404, quero que o título fique ainda menor. Eu vou discar para baixo para 25, apenas para que nos dê algum espaço para
trabalhar quando entrarmos em tamanhos de tela ainda menores. Eu posso basicamente copiar o que já temos aqui, mudar isso para 25 e mudar o ponto de quebra ou a largura máxima para 404. Agora, se eu atualizar a página, você pode ver quando chegar ao ponto em que o botão iria quebrar, ele agora está voltando ao alinhamento. Como você pode ver aqui nos serviços que fornecemos, está começando a ficar um pouco apertado com essas colunas, então o que eu vou fazer é torná-lo uma linha de uma coluna de agora em diante. Vamos fazê-lo no 404 só para nos poupar a escrever outra media query. O que eu vou fazer é entrar aqui, sinopse, largura e vamos fazer 90 por cento. Isso vai garantir que apenas um vai em cada linha. Vamos precisar colocar essa etiqueta importante, como de costume. Salve, atualize a página, e lá vai você. Agora, nós temos um problema com a margem e então se você pode ver isso, mas há um pouco mais de espaço à direita do que havia à esquerda, então o que eu vou fazer é dar-lhe uma margem igual
à esquerda de 5% e uma margem em o direito de 5 por cento. Desde que não haja preenchimento, 5 mais 5 mais 90 irá adicionar até 100 e deve se alinhar bem. Como você pode ver, ele tem. Rolando para baixo, está ficando um pouco apertado aqui, mas deixe-me apenas ir um pouco menor tamanho de tela em 350. Lembre-se de ignorar o menu aqui. No nosso formulário, está ficando um pouco apertado, mas tudo parece bem. Vou baixá-lo para 300 e em 300, você pode começar a ver como os botões ficam confusos. Bem aqui, a mensagem de envio e o botão de trabalho conosco está ficando um pouco confuso. Agora, você não quer otimizar para tamanhos de
tela que são ridiculamente pequenos, como 200. Uma vez que entramos nesses tamanhos de tela menores, eu gosto de simular os tamanhos de tela de dispositivos populares. No Galaxy S5, este é o aspecto do nosso site em 360 pixels de largura. No pixel 2 com uma largura 411, é assim que vai parecer. No pixel 2 Excel, isso é o que ele vai parecer,
e assim por diante e assim por diante. Se formos para o iPhone 5, você pode ver que os telefones celulares estão indo tão baixo quanto 320. Acho que é tão baixo quanto ele fica e é quando você pode ver esse botão bagunçando e também aqui embaixo. O que eu vou fazer é trabalhar naquele botão seguir e talvez isso possa acabar com isso para nós. Se eu fizer algumas experiências aqui, se eu diminuir o tamanho da fonte, talvez isso funcione. Sim. Então eu vou fazer isso. Vamos descobrir em que ponto. Nós sempre podemos apenas discar 320, mas eu vou encontrar o ponto exato que ele bagunça para que ele seja responsivo em todos os tamanhos de tela. Discando para baixo, parece que acontece em torno de 314, mas por algum motivo, se atualizarmos a página no 320, iPhone 5, fica um pouco confuso. Vamos apenas fazer 320 na tela de mídia e largura máxima 320. Vamos reduzir o tamanho da fonte do botão grande para, o que foi que decidimos? Eu acho que foram 15 pixels e nós vamos colocar um importante no final disso. Agora, se eu atualizar a página, você pode ver que os botões não estão mais quebrados. Se eu descer até aqui, este botão também não está quebrado. Agora, o que você pode querer fazer é tornar o suporte do lugar e o texto que você digita aqui menores e talvez você realmente queira testar em dispositivos móveis para ver se você precisa fazer isso. Mas para o propósito desta aula, acho que estamos perto o suficiente da capacidade de resposta móvel. Vamos dar uma olhada no nosso trabalho voltando ao modo responsivo e arrastando-o de um tamanho de tela largo para um tamanho de tela apertado. Vamos fazê-lo seção por seção e ter uma verificação final para ver se alguma coisa importante se rompe com o menu, é claro. Aqui você pode ver que vai quebrar em breve, mas nós colocamos essas consultas de mídia. Novamente, à medida que vamos cada vez menor, ele quebra abaixo de 300, mas eu não acho que haja nenhum tamanho de tela que seja menor que 300, então provavelmente não precisamos otimizar para isso. Vamos dar uma olhada na nossa segunda seção. Como você pode ver, ele começa como uma linha de quatro colunas, fica mais apertado e mais apertado. O cabeçalho fica menor e, em seguida, quebramos em uma linha de duas colunas e, em seguida, em um determinado tamanho de tela, nós dividimos em uma linha de uma coluna. Então, para o formulário, o formulário que não tivemos que fazer muitas mudanças. Acho que nem mudamos nada sobre isso. Essa é a beleza do flex e como a montamos. Se formos cada vez mais baixos e mais baixos, ele continua a parecer bem. Talvez queiramos reduzir o tamanho do texto deste endereço aqui e, claro, o rodapé. Se descermos até o fundo, podemos ver que uma vez que somos forçados a quebrar em uma nova linha, ele quebra dois adicionais, liga em uma nova linha,
centraliza no meio e, em seguida, enquanto você arrasta o interior e o interior, Ele permanece centrado e está parecendo bem. Lá vai vocês, pessoal. Esse é o nosso site agora corrigido para dispositivos móveis com consultas de mídia. Novamente, como mencionei, o menu é a última coisa que precisamos resolver. O que vamos fazer é ter o que é chamado de ícone de hambúrguer aqui, que você possa ativar e desativar o menu e vamos formatá-lo mais bem. Isso é bastante padrão em sites modernos e aplicativos da web. Acho que é uma lição importante para se ter. Espero que esta lição não tenha sido muito longa sobre consultas de mídia. Como eu disse, eu gosto de ter muitas consultas de mídia, mas você pode combinar algumas delas também e ter menos pontos de interrupção, menos pontos onde as coisas estão acontecendo. Mas como eu gosto de fazer isso é começar de largura, derrubar a largura da tela e fixo como você vai. Traços diferentes para pessoas diferentes caras, não
há maneira errada de fazer isso. Desde que o site apareça bem em todos os tamanhos de tela, isso é o mais importante. Obrigado por assistir caras, Estou ansioso para vê-lo
no próximo vídeo onde vamos trabalhar neste menu móvel.
12. Criando um menu para dispositivos móveis: Para finalizar nosso projeto de página web responsiva, o que vamos fazer nesta lição é transformar este menu em um menu responsivo móvel togglable. À medida que reduzimos a largura da tela aqui, posso ver que ela fica em torno e quebra em uma nova linha e em um determinado tamanho de tela, um dos itens quebra em uma terceira linha. Agora, isso não parece muito ruim sem links de menu 1, 2, 3, 4, 5, mas em alguns outros sites podemos ter seis ou mais itens de menu e uma vez que chegamos a uma largura de tela por aqui, ele começa a ficar um pouco lotado. Começa a ser mais difícil para as pessoas
pressionarem com os polegares no celular e precisamos de uma solução. Um muito comum, e o que vamos construir neste projeto, é algo que você provavelmente já viu antes. Eu vou abrir meu próprio site, christhedeveloper.com e você pode ver que temos um menu de nível superior aqui que quando derrubarmos o tamanho da tela se transforma em um ícone de hambúrguer, que agora podemos alternar o menu de uma forma vertical. Essa é a diferença entre desktop e versão móvel. Para fazer isso, o que vamos precisar é HTML e CSS, claro, mas também vamos precisar de JavaScript. Porque se eu estiver ativando e desativando as coisas, estou tornando a página web interativa e para toda a interatividade no front-end, precisamos usar JavaScript. A primeira coisa que eu vou querer fazer é criar o link para expandir e contratar o menu, e o que precisamos para isso é o ícone de hambúrguer. Agora, assim como fizemos com a importação da fonte para o Titillium web para usar essa fonte dentro do nosso projeto, vamos precisar importar o que é chamado de fonte de ícone. Uma fonte de ícone é praticamente a mesma coisa que uma fonte de texto normal, exceto que em vez dessas letras do alfabeto, nós vamos ter ícones diferentes. A fonte do ícone que vamos usar para este projeto e provavelmente a mais popular do mundo é chamada Font Awesome, e você pode acessá-lo acessando fontawesome.com. Basta clicar em Iniciar Uso Gratuito, e aqui está a maneira mais fácil de configurá-lo em sua página web, apenas copiando este pedaço de HTML. Eu vou copiar isso e como eu mencionei, quando fizemos a tag do Google, nós vamos apenas ligá-lo de um CDN externo, que significa que nós não temos que baixar a fonte nós mesmos. Lá vai você, é uma etiqueta bem longa, há alguns atributos aqui que nós realmente não precisamos entender. Isso vai importar o arquivo que precisamos para acessar o ícone de hambúrguer. Voltando ao site Font Awesome, só
precisamos procurar a referência para o ícone do hambúrguer. Podemos entrar em ícones e há mais de 5.000 deles, então podemos filtrar aqui. O que procuramos chama-se barris e você pode ver aqui que é o primeiro item. Eu vou clicar nesse e ele vai me dar o HTML exato que precisamos colocar nesse projeto, a fim de fazê-lo aparecer. Eu vou clicar para copiar e o que eu vou fazer é, dentro do nosso cabeçalho, criar algum espaço e eu vou colocá-lo depois do nav. Eu vou colocar um link tag, e por enquanto eu vou apenas tê-lo em branco. Eu vou dar-lhe um ID do ícone de menu, e mais tarde eu vou colocar algum código JavaScript lá para que ele realmente vai fazer algo quando clicarmos nele. Dentro dessa tag de link, vou colocar no código que acabamos de copiar de lá. Se voltarmos ao nosso site e atualizarmos a página, você pode ver que temos o ícone de hambúrguer lá, mas está bem em frente ao logotipo e é azul e não está formatado corretamente. Isso é o que nós vamos ter que fazer a seguir, e a outra coisa é que nós não queremos que ele apareça no EVA desktop. Vou adicionar um atributo de estilo ao link e configurá-lo para exibir nenhum. O que isso vai fazer é certificar-se de que, por padrão, ele não é exibido quando carregamos nosso site. Agora, é claro, queremos que ele seja exibido em um tamanho de tela menor. O que eu vou fazer é encontrar um ponto de interrupção que se alinhe com uma de nossas consultas de mídia só para facilitar, e então eu vou fazer com que ele apareça no celular. Abrindo nossas ferramentas de desenvolvedor novamente para que possamos ver chicotes de tela, eu vou trazer a largura
da janela para um ponto onde eu acho que ele precisa invadir o menu móvel. Agora, como não temos muitos links de menu, podemos realmente ir muito longe sem invadir o menu móvel. Em outros sites, você pode ter seis ou mais links, então você deseja fazer o ponto de interrupção mais cedo ou até mesmo ocultar alguns dos links. Mas para nós, vou escolher por volta do 797. Novamente, você pode escolher onde você quer colocá-lo, nós poderíamos fazê-lo muito mais tarde aqui em baixo como 619, ou aqui em 797, é com você. É mais fácil se usarmos um ponto de interrupção que já
determinamos aqui em nossas consultas de mídia. Indo para o nosso código, eu disse que vamos mudar em 797 pixels. O que eu vou fazer, ícone de menu de destino e configurá-lo para exibir inline-bloco, e precisamos torná-lo importante porque
já colocaram o estilo de exibição nenhum no elemento real. Vamos precisar usar o importante para anular isso. Agora, atualizando a página, você verá que o ícone não aparece, mas se baixarmos a largura da janela para menos de 797, você pode ver que ela começa a aparecer lá. Agora, precisamos colocar em muito mais estilos para fazer isso funcionar, então vamos começar com isso. Se trouxermos a tela que temos novamente, a primeira coisa que noto é que é azul e é pequeno. Para corrigir essa cor branca e tamanho da fonte, eu vou definir para 25 pixels. Agora, se você está um pouco confuso por que estamos usando font-size, lembre-se que estamos usando fontes de ícones e só porque não são letras alfabéticas, ele ainda funciona como uma fonte dentro do HTML. Se eu atualizar a página, você pode ver que ela está parecendo muito maior e agora está branca. Parece o que queremos,
mas a posição continua a ser um problema. Agora, uma coisa que podemos estar inclinados a fazer é flutuar para a direita. Agora você pode ver que ele flutua entre a imagem e o menu aqui. Mas a coisa está no celular, nós realmente não queremos que este menu apareça. Queremos que ele apareça vertical quando ativarmos e desativarmos isso. Outra coisa que vamos ter que fazer
nesta consulta de mídia é desligar o menu completamente. Se olharmos para aqui, é apenas dentro deste nav, para o
qual não demos uma identificação, e só usamos nav uma vez, então é seguro para nós usar o seletor de nível de tag. O que vamos fazer é definir o navegador para mostrar nenhum neste tamanho de tela. Agora, se eu atualizar a página, você pode ver que uma vez que chegar ao tamanho da tela, o menu da área de trabalho irá se esconder e, em seguida, um ícone de hambúrguer aparecerá. Só precisamos dar alguma margem, porque está preso aqui. Vou dar-lhe 15 pixels de margem à direita. Agora, você pode ver que começa a sair do lado. Ele também está alinhando um pouco mais alto do que o nosso logotipo aqui, então você pode querer dar alguma margem para o topo, bem como, talvez cerca de 10 pixels. Há outra maneira de fazermos isso usando a posição absoluta, mas não vou confundi-lo mais. Na verdade, há algumas maneiras de fazer esse ícone aparecer. Na verdade, vou reduzir essa margem para cinco. Acho que está um pouco mais na linha. Doce. Agora que temos o menu da área de trabalho escondido no celular, e em vez disso,
temos este ícone de hambúrguer, a próxima coisa que vamos ter que fazer é obter este ícone de hambúrguer para realmente alternar o menu. Caso contrário, qual é o ponto de ocultar o menu da área de trabalho para começar? Para isso, vamos precisar usar JavaScript porque cada vez que precisamos aceitar a entrada do usuário e mudar algo na página, precisamos usar JavaScript. O que eu vou fazer é copiar e colar alguns JavaScript em porque este não é exatamente um curso JavaScript. Mas vou explicar qual é a função que vamos usar e como ela realmente funciona. Primeiro, antes de realmente criar a função, eu quero adicionar um atributo ao nosso link aqui. Este atributo vai ser chamado on-click, e dentro eu vou adicionar uma função JavaScript. A função JavaScript vai ser chamada de Menu Alternar, e para definir uma função precisamos colocar colchetes abertos e de fechamento e dois pontos. Agora, o que isso vai fazer em linguagem técnica é adicionar esta função ao evento on-click desta tag link. Mas realmente tudo o que você precisa saber é que esta função irá acionar quando clicarmos neste link. Agora, para desativar este menu e ligar vamos precisar marcá-lo de alguma forma. Poderíamos marcá-lo usando nav, então apenas um seletor de nível de tag, mas há uma chance de que possa haver várias tags de navegação. Eu só vou ser um pouco mais diligente aqui e realmente definir isso com uma identificação. Vou ligar para este menu principal. Isso é tudo o que precisamos fazer em nosso HTML para que isso funcione. Agora, para o JavaScript que eu vou colocar na parte inferior da página. Podemos colocar algum JavaScript em nosso documento HTML usando tags de script
e, em seguida, no meio eu vou copiar e colar minha função. Esta é a função que preparei anteriormente. Chama-se menu de alternância. Como você pode ver que corresponde ao nome aqui em cima, e o que ele vai fazer é pegar o elemento pelo ID do menu principal, que está bem aqui, o nav e vai verificar se ele está exibindo atualmente ou seja, é o bloco de estilo de exibição. caso afirmativo, defina a exibição como nenhuma. Se não, ele vai ser configurado para bloquear. Um pedaço de código bem simples. Ele só vai alternar o estilo de exibição de nenhum para bloquear com base se ele está atualmente em bloco ou atualmente em nenhum. Uma função bem básica lá. Agora, se eu salvar e recarregar a página, agora tudo parece igual. Mas se eu clicar neste ícone, você pode ver que ele desativa e ativa o menu. Agora, o problema aqui é que temos o mesmo menu que temos na área de trabalho. É exatamente o mesmo menu da área de trabalho, apenas em um tamanho de tela diferente. A próxima coisa que vamos ter que fazer é mudar o estilo deste menu. O que eu vou fazer para que ele não afete menu
da área de trabalho é defini-lo nesta consulta de mídia. Nesta consulta de mídia, o ícone de menu será exibido. Ele vai ter todos esses atributos. O nav vai desligar por padrão, mas se clicarmos nele, que então muda para exibir bloco inline-. Para terminar isso, só precisamos dar estilos a isso para torná-lo vertical. Nós já definimos um ID, então eu posso entrar e segmentar menu principal usando ID e para obter os resultados que eu quero eu vou fazer o menu largura total, e eu vou fazer cada item no menu. Usando um seletor descendente aqui, estou direcionando itens de lista dentro de uma lista não ordenada dentro do menu principal. Eu vou definir isso para exibir bloco em vez de bloco inline-. Se eu salvar isso, atualize a página agora que você pode ver quando você alternar no menu, você está recebendo uma lista vertical. Agora, o problema com este menu vertical é que ele está empurrando nosso ícone de hambúrguer para baixo também. Isso é porque todos os nossos elementos estão flutuando. Lembre-se que definimos este ícone de menu para flutuar direita e se rolarmos para baixo até onde definimos o nav, nós o definimos para flutuar para a direita também. Se estes elementos flutuantes, se um mudar o outro vai mudar. Nós só precisamos corrigir este ícone à direita em vez de tê-lo flutuando. O que eu vou fazer é usar a posição absoluta, e em vez de margem superior vamos defini-la para top 5 pixels e direita 15 pixels. Você pode não estar familiarizado com a posição absoluta, mas é apenas uma maneira que podemos alterar o posicionamento de um elemento para corrigi-lo em uma determinada posição e usar topo, direita, esquerda e inferior para posicioná-lo com base na janela. Atualizando a página. Agora vai ser muito alto, mas pelo menos está preso no único lugar. Vou experimentar alguns tops aqui. Talvez 20 pixels, não muito mais. Vamos tentar 50 pixels. Vamos tentar 55. Agora que eu experimentei com isso, eu vou adicionar 50 ao nosso topo, torná-lo 55 pixels. Lá vai vocês, pessoal. Essa é uma maneira que podemos contornar o flutuador é fixando-o a esta borda da janela usando a posição absoluta. Isso parece muito bom até agora, mas o que eu quero fazer para tornar mais óbvio onde o menu começa e termina é dar-lhe uma borda. Descendo para o nosso menu principal aqui, eu vou definir uma borda e vai ser uma linha branca sólida de 1 pixel. Vamos tentar isso. Atualizar a página e, em seguida, ativá-la. Agora você pode ver uma borda ao redor do menu. Mas eu não gosto muito dele nas laterais e em cima, então eu vou mudar isso para o fundo da borda para que ele só vá na parte inferior. Atualize a página, e agora você pode ver que
há uma linha aqui para dizer que esse é o fim do menu. Nós também poderíamos colocar fronteiras sobre os itens de linha, mas isso parece legal para mim. Talvez nós queiramos realmente colocar um no topo. Borda, topo, 1 pixel. Novamente, pessoal, muitas dessas coisas são subjetivas, então se você quiser ir lá, refinar um pouco mais e fazer parecer mais agradável e móvel, definitivamente faça isso. Eu provavelmente gostaria de adicionar um pouco mais de margem para o topo. É como a estação a gosto. Há muita subjetividade envolvida e sim, basta usar sua própria discrição de como você quer que pareça. Mas no geral, estou muito feliz com isso. Se testamos no desktop e no celular agora, no desktop se redimensionarmos ele não vai aparecer. Mas se atualizarmos a página, ela vai aparecer e, em seguida, se entrarmos tamanhos de tela
menores, podemos ativá-la e desativá-la. Se o tivermos ligado e depois voltarmos para aqui, então podemos vê-lo ligado. Se quiséssemos corrigir esse pequeno problema, poderíamos criar outro evento JavaScript que
detectaria quando a tela fica maior e, em seguida, ativar o menu novamente. Mas eu acho que é um problema muito pequeno porque muitas pessoas não vão redimensionar suas janelas assim. Eles provavelmente vão carregar a largura da janela na largura em que vão usá-la. Isso é um pouco extra que podemos colocar dentro, mas para o propósito desta classe eu acho que nós fizemos o suficiente para mostrar a mecânica de como você faria este menu móvel para funcionar e como você iria fazê-lo para se esconder na área de trabalho e então aparecer em móvel. Isso é tudo para este design de página web responsivo. Espero que não tenha sido muito tempo de uma seção prática para vocês. Eu tenho uma lição bônus depois desta sobre Bootstrap. Se você está interessado em como você pode agilizar e economizar tempo na criação de todos esses estilos, definitivamente fique por perto para a lição bônus. A lição bônus no Bootstrap será sobre o uso de estilos pré-fabricados. Como você pode ver aqui, a maior parte desta classe tem escrito esses estilos CSS. Mas usando Bootstrap, podemos escrever nosso HTML de uma certa maneira com certas classes e não ter que escrever tanto CSS. Se você está interessado em fazer o que acabamos de fazer, foi de uma maneira mais rápida usando Bootstrap, definitivamente ficar por perto. Vejo você no próximo vídeo.
13. Bônus: Introdução ao Bootstrap: Bem-vindo a todos à nossa lição bônus sobre Bootstrap, a biblioteca HTML,
CSS e JavaScript mais popular do mundo. O que tudo isso significa? Bem, Bootstrap é apenas um monte de código que podemos conectar em nosso projeto que nos permite economizar tempo escrevendo todos esses estilos, e também alguns JavaScript também. Se formos para getbootstrap.com ou pesquisar Bootstrap no Google, podemos acessar o site do Bootstrap. Agora, se você quiser cavar por aí, este não vai ser um vídeo aprofundado no Bootstrap. Sinta-se livre para ler a documentação, veja alguns exemplos. O que eu queria fazer neste vídeo em particular é demonstrar como o Bootstrap afetaria nosso projeto atual, e como mudaríamos nosso HTML para usar estilos que já estão incorporados no Bootstrap para economizar tempo criando páginas da web de desenhos de conjuntos ou modelos de sites. Eu mostrei isso algumas vezes ao longo do curso, mas se eu entrar aqui e excluir o link ou comentá-lo, então ele não se aplica mais à folha de estilos, e eu atualizo a página, isso é o que nossa página web parece como sem CSS. Agora, o que podemos fazer é adicionar no Bootstrap e ver como isso afeta nossa página HTML, e então podemos usar estilos e
classes Bootstrap para torná-lo parecido com o que tivemos com Bootstrap. Vamos voltar ao nosso Bootstrap Home e clicar em “Começar”. Agora, assim como fizemos com o Google Fonts e Font Awesome, podemos baixar o Font, o CSS, tudo isso nós mesmos, e depois fazer referência a ele. Mas eu gosto de usar o CDN, poupa-nos de ter que baixá-lo para o nosso computador. Se eu apenas copiar a tag HTML que eles definiram aqui, isso irá carregar CSS em nosso documento. Para o propósito desta lição, eu não vou me incomodar com o JavaScript. Este é apenas o CSS. Assim que carregarmos isso, vou atualizar esta página e ver o que acontece. Como você pode ver, já estamos vendo algumas mudanças de estilo. A fonte é diferente, e também podemos ver que ele está usando nosso contêiner também. Mas na versão Bootstrap de um contêiner, há muito mais pontos de interrupção e partes onde ele muda a largura do contêiner. Entrando em nossa documentação para Bootstrap, vamos recriar o cabeçalho usando Bootstrap. Vou clicar em “Componentes” aqui, e podemos começar a usar alguns dos componentes Bootstrap. Para o cabeçalho, eu vou encontrar Navbar, que é o equivalente ao cabeçalho em Bootstrap. Aqui você pode ver o HTML necessário para fazer este Navbar aqui. Para que o nosso pareça com isso, não
teríamos que mudar nenhum CSS porque ele já está integrado. Nós só precisamos colocar neste HTML. O que eu vou fazer é copiar isso, eu vou colocar esses lado a lado só para que eu possa copiar ul tags. Home será o mesmo conjunto de recursos. Vamos colocar sobre. Em seguida, em vez de trabalhar preços,
e, em seguida, este é um link desativado. Nós realmente não precisamos disso, então eu vou apagar isso. Copie e cole esses dois novamente para nossos outros links. Blog e Contato. Vou colocar Blog e Contato. Agora que temos copiado entre itens de menu, podemos simplesmente excluir nosso navegador antigo completamente. Se eu salvar isso, volte ao nosso projeto, vamos ver como ele afetou. Agora você pode ver que temos esta barra de navegação criada para nós. Não é exatamente como o nosso design, mas economiza muito tempo com a criação de CSS. Como você verá se você entrou em exemplos aqui, todos os sites do Bootstrap têm a mesma aparência porque eles usam os mesmos estilos, então você terá um pouco de um visual Bootstrap. Você pode estar realmente familiarizado com o olhar Bootstrap agora quando você vê-lo. Se você vir um site parecido com este, você pode suspeitar que ele seja Bootstrap. Você pode realmente verificar indo para o código-fonte e verificando a referência para Bootstrap. Aqui você pode vê-lo bem ali. Novamente, ele não vai mostrar exatamente como o nosso design, mas o que é um recurso realmente poderoso do Bootstrap é o sistema de colunas. Mas antes de chegarmos a estas colunas, quero consertar este botão. No Bootstrap, você tem estilos de botão logo fora da caixa. Eu vou clicar em “Botões” aqui, e você pode usar uma classe de btn btn-primary para transformar qualquer tag link em um botão que se parece com isso. Isso é o que eu vou fazer. Em vez de botão grande classe, eu vou substituir isso com classe btn, btn-primary, recarregar a página, e agora você pode ver que temos um botão estilo Bootstrap onde se colocarmos nosso cursor sobre ele, cursor gira para um ponteiro, e também a cor do botão muda, para que saibamos que é um botão. Como eu disse, no entanto, são as colunas que tornam o Bootstrap muito poderoso. Em termos de serviços que fornecemos, podemos alterar isso para um sistema de colunas no Bootstrap. Para ver como você faria isso, podemos clicar em “Layout” aqui, e podemos aprender sobre a grade. Aqui, você pode ver os diferentes pontos de quebra quando um estilo acabar mudando nesses pontos específicos. Lembre-se, no vídeo anterior eu falei sobre como na minha abordagem usamos muitos pontos de interrupção diferentes. No Bootstrap, eles têm apenas 1, 2, 3, 4 principais pontos de interrupção. De qualquer forma, isso é apenas uma nota lateral. Se rolarmos para baixo, eles não terão uma seção sobre linhas e colunas. Acho que pode estar em um menu diferente aqui. Deixe-me procurar nesta caixa, linhas, sistema de grade. Aqui vamos nós. Está no item de menu Grade em Layout. Aqui você pode ver como funciona. Eu encorajo você a ir ler isso se você está interessado em Bootstrap. É bastante profundo, e é um ótimo recurso para aprender como funciona. Mas basicamente, o que você tem é divs com uma classe de linha, e então dentro deles, você tem divs com uma classe de col. Em seguida, para definir qual largura você deseja essas colunas, você pode colocar em outro estilo que irá dizer ao elemento HTML quão grande você quer que ele seja. Este é, naturalmente, um sistema responsivo. Vai manter essas proporções à medida que você redimensiona a página. Aqui vamos nós. Aulas responsivas. Como isso se relaciona com nosso projeto é que temos essa linha de sinopse
e, em seguida, temos sinopses. Então, em vez de linha de sinopse e sinopse, eu vou apenas me livrar do blurb e tê-lo como linha, e depois mudar todos os blurbs para colunas. Como temos quatro colunas que queremos de igual largura, e Bootstrap funciona em um sistema de 12 colunas, precisamos dividir 12 por 4, e isso determinará qual classe usamos. Então 12 dividido por 4 é 3, então podemos colocar em um traço aqui e torná-lo um layout de três colunas, e então colocar no número 3. Eu guardo isso, atualizo a página aqui. Agora você verá que temos uma bela coluna imediatamente. Se redimensionarmos a página, olhem para isto, eles começam a redimensionar. Em um certo ponto, ele quebra. Uma vez que ele se decompõe, no entanto, não
precisamos criar novas regras CSS. Tudo o que precisamos fazer é adicionar mais classes às nossas colunas aqui. Queremos que ele se rompa em uma nova linha em um certo ponto de interrupção. Usando os pontos de interrupção do Bootstrap como referência, aqui você pode ver extra pequeno, médio, grande e extra grande. Digamos que, em média, queremos que seja um layout de duas colunas por linha. Além do col 3, tem col md para médio e, em seguida, em vez de três, seis; que é duplicar esse número. Agora, quando atualizamos a página, ela está mudando a coluna. Infelizmente, quando redimensionamos a página desta forma, não
vai mudar a partir desse layout col-midd 6. O que vamos ter que fazer é adicionar grande no meio daqui. O código para maior é lg. Vou salvar isso, atualizar a página, e agora, quando estiver nesse meio, será um layout de duas colunas. Então, quando está na tela média tamanhos são mais baixos, ele vai ser um layout de duas colunas. Você pode realmente ver que ele quebra em um layout de uma coluna mais tarde também. Só arrastando de novo. Você pode ver que nós temos essas colunas responsivas sem ter que escrever qualquer CSS nós mesmos é apenas sobre usar as classes certas aqui em cima. Se você realmente olhar para o arquivo Bootstrap, ele é enorme. Há tantos estilos CSS diferentes. Levaria muito, muito tempo para escrevê-lo nós mesmos. Há muita coisa que podemos fazer apenas com aulas e IDs no Bootstrap. Todo o CSS é basicamente escrito para nós além de coisas que queremos personalizar a nós mesmos. Como, por exemplo, os fundos que tínhamos, não
temos essas cores de fundo agora. Nós ainda teríamos que escrever alguns estilos nós mesmos. Nós ainda vinculamos uma folha de estilo externa e escrevemos nossos próprios estilos em cima disso. Mas como você pode ver, podemos cuidar de alguns dos aspectos de estilo comuns usando classes Bootstrap. Outra coisa que eu quero chamar a sua atenção é que ele nos deu um menu móvel por padrão. Veja como, quando vamos mais longe, ele se contrai. Mas o problema e a razão pela qual não está alternando é porque precisamos importar esse JavaScript também. Lembre-se, nós apenas vinculamos a folha de estilo, não o JavaScript. Só para corrigir isso rapidamente, eu posso copiar todos esses links de JavaScript, ir para a minha cabeça, eu vou expandir aqui, colocar em todos esses links JavaScript, salvar, voltar para o nosso projeto, e torná-lo menor. Agora, você pode ver que nosso menu está alternando. Eu não vou passar por toda a página e recriá-lo usando Bootstrap, que só demoraria muito, e esta é apenas uma lição bônus. Eu só queria mostrar que você poderia usar o Bootstrap para economizar algum tempo, alavancar alguns estilos já criados, e espero que você não escreva uma folha de estilo tão grande como você fez aqui. A coisa que Bootstrap realmente ajuda é o que eu mostrei, o sistema de colunas é incrível. As colunas e os contêineres, não
teremos que nos atualizar. Bootstrap é muito bom em fazer tudo se encaixar bem em diferentes tamanhos de tela. Cuida muito desse trabalho responsivo para nós. Se você desenvolver com Bootstrap como ponto de partida, você tem uma boa chance de que tudo vai funcionar bem em dispositivos móveis e desktop. É basicamente isso pessoal. Essa é a lição bônus em que estamos falando de Bootstrap. Se você quiser que eu vá em profundidade com Bootstrap, me avise. Pode ser uma ideia para uma aula futura. De qualquer forma, pessoal, espero que tenham aprendido uma coisa ou duas sobre a criação de páginas web baseadas em designs. Novamente, se há alguma área em particular que o confundiu, seja o JavaScript, seja o CSS HTML, definitivamente vá e confira minhas outras classes, se você estiver interessado, você pode obter um compreensão do que tudo está fazendo. Infelizmente, eu não tive tempo de rever todos os fundamentos de HTML e CSS, e ficar com o projeto de classe. Mas se você estiver interessado, você pode entrar e fortalecer seu conhecimento usando essas aulas. Mais uma vez, obrigado por se juntarem a mim nesta aula. Vamos terminar com a conclusão no próximo vídeo. É isso aí, pessoal. Obrigado por assistir.
14. Conclusão: Então, isso praticamente conclui esta classe sobre desenvolvimento Web Responsive. Para o seu projeto de classe, eu quero que você pegue um design de site, seja um modelo que você encontrou on-line ou um site existente, e tente replicá-lo com HTML e CSS. Depois de terminar, certifique-se de compartilhá-lo com o resto da turma. Lembrem-se, traduzir designs em HTML e CSS, como fizemos nesta classe, é uma habilidade que vai melhorar com a prática. Então eu não espero que você saiba exatamente qual elemento HTML ou estilo CSS usar em cada cenário. Muito provavelmente, vai ser um pouco de tentativa e erro,
e, claro, uma boa quantidade de boa e velha Googling. Dito isto, se você precisar de alguma dica ou orientação, deixe um comentário na caixa de discussão abaixo, e farei o meu melhor para apontar você na direção certa. De qualquer forma, pessoal, obrigado por assistirem. Espero vê-lo novamente em algumas das minhas outras aulas.
Christopher Dodd, Web Developer / Educator
