Amplie seu kit de ferramentas CSS com Flexbox

1. Introdução: Eu sou Jay Silverstein, um instrutor de treinamento de desenvolvimento Web e desenvolvedor de front-end, e eu vou guiá-lo através deste curso sobre CSS Flex Box. Flex Box é um dos meus novos desenvolvimentos favoritos de CSS, e as empresas estão realmente começando a cavar em seu potencial de flexibilidade e capacidade de resposta. Este curso é perfeito para pessoas que já sabem um pouco sobre a idade para CSS montanha e já familiarizado com eles alguns e estão olhando para expandir. Osias tem kit de ferramentas. Ao longo destes, 16 vídeos vão passar pelas ferramentas que precisamos para configurar um projeto, atualizar alguns poucos idade dois melões, isas básico e, em seguida, terminar. Negócios com caixa CSS Flex também vai passar por cima de algumas técnicas de design responsivo e conceitos ,e também um pouco de frente e jogar fora. , Decida. No final do curso, você será capaz de projetar e construir seu próprio site de uma página usando CSS Flex box. Eu estou realmente animado para ensinar este curso, e eu estou animado para tê-lo junto para o certo Uma coisa que eu quero salientar é que por causa da maneira que diz que este é um tem um conceito é uma coisa. Não é possível que você ensine tudo sobre isso em 16 vídeos, mesmo que nós estamos apenas fazendo um subconjunto muito pequeno, então para meio que aliviar que o que eu fiz foi que eu juntei um conjunto de materiais de recursos que você poderia se referir como Você está indo para os vídeos. Estes incluirão coisas como todo o código que eu uso nos exemplos quaisquer links e artigos que eu acho que você acharia útil e quaisquer exercícios adicionais que eu acho que você deve fazer para praticar suas habilidades. Isso será vinculado na descrição deste curso, então você pode ir em frente e clicar sobre isso e seguir ao longo dos materiais de recursos como você está indo com vídeos. Sem mais delongas, vamos começar esta jornada para o mistério da caixa 2. Configuração e ferramentas: uma das partes mais importantes de qualquer desenvolvedor configurado há ferramentas? Tooling refere-se às ferramentas que eles usam quando eles estão trabalhando em projetos, e este curso eu vou estar usando código V s. Há uma série de outros editores de código por aí, Adam e sublime ou dois exemplos, e você pode usar o que quer que seja quando estiver mais confortável. No entanto, você precisa estar usando um editor de código. Você não pode escrever código no Microsoft Word ou páginas ou nenhum animal de estimação ou qualquer outra coisa. Se você não tem um editor, eu recomendo Della Inveous code em code visual studio dot com. Está disponível para Mac, Windows e Lennox, outra ferramenta importante que os desenvolvedores usam frequentemente a linha de comando ou o terminal. Geralmente, quando você interage com o seu computador era, você usa o que é chamado de interface gráfica do usuário, o gooey que mostra onde suas pastas estão, O que é formatos. Seus arquivos são e etcetera em oposição aos pegajosos, que lhe dá uma espécie de camada visual sobre o que está acontecendo sob a superfície do seu computador. O terminal permite que você interaja diretamente com seu sistema de arquivos de máquinas. Vou ver como usar a linha de comando na próxima máquina Maxwell A, porque é isso que eu tenho. Vou te dar se você estiver em um computador Windows, você ainda pode acompanhar. Há alguns comandos que são diferentes. Mas vou te dizer uma coisa. Esses são adiantados. Hum, se você não está confortável usando o terminal para navegar, preferiria apenas usado localizador ou Windows Explorer, O que você Isso é totalmente bom. Só acho que usar o terminal me ajuda a ser mais produtivo. Então é isso que eu vou estar rebaixando ao longo do curso. Então, a primeira coisa que eu vou usar as minhas costas não vai usar o Spotlight, que é o espaço de comando para encontrar o terminal. Vou digitar o terminal e abri-lo para que você possa ver que ele me diz o nome do meu computador, que é Victoria ligado. E então ele tem meu nome de usuário. A primeira coisa que eu quero fazer é que eu quero verificar o diretório que eu sou e eu vou fazer isso gravando o Commander P W. D. Isso significa diretório de trabalho de impressão, e ele me diz que eu conheci usuários barra Jail são Isso é muito legal. Mas e se eu quiser saber o que está neste diretório? Posso usar o comando. L s l s vai listar todos os todos os subdiretórios e todos os arquivos que estão neste diretório particular. Este é um dos comandos que vai ser um pouco diferente em um computador Windows. Se você estiver em um computador Windows, use o comando. D I r vai parecer um pouco diferente. Vai te dar algumas informações diferentes. Isso é OK. Aqui está a minha lista de tudo o que está nesta pasta em particular. Eu vou querer fazer uma nova pasta chamada Flux Box. É aqui que vou guardar todos os materiais para este curso. Para fazer isso, eu ainda vou fazer isso na linha de comando e vou usar o comando m k d I R. Isso significa diretório make. E então eu vou dar-lhe o nome do diretório que eu quero fazer, que é flats box. Vou em frente e apertar Enter e ele vai me dizer. Ok, eu fiz esta caixa flexível diretório, e se eu fizer ls ou de ir. Se você estiver em um computador Windows novamente, você pode ver essas caixas flexíveis. Agora, aqui na minha lista de coisas que estão nesta pasta em particular, ela é muito legal. Então o que eu quero fazer agora é eu vou querer ir para aquela pasta de caixa flexível e começar a fazer arquivos para que eu possa fazer coisas com eles. Então o que eu vou fazer é eu vou dio o comando C d. que significa mudar diretório e então eu vou dar-lhe o nome da pasta que eu quero mudar em caixa flexível. E, em seguida, se eu verificar onde eu estou novamente usando PWD e ver que eu estou agora ele usuários barra caixa flexível jlr barra . Legal. Se eu quisesse voltar para cima de um nível e ir para o meu contendo mais completo, eu iria digitar c d ponto ponto e que me levaria para cima um nível de volta para a minha pasta de usuário. Ponto representa o mais completo acima do atual. Se você fizer apenas um ponto que representa a pasta atual. Vamos ver isso novamente quando falamos sobre como vincular arquivos HTML e CSS um, por enquanto, por enquanto, basta lembrar que aqueles de ponto ponto significa ponto de volta ponto significa a pasta atual. Então eu vou CD de volta na caixa flexível, e então eu vou querer fazer o meu primeiro arquivo. Eu vou fazer um arquivo chamado, uh, caixa flexível que CSS em um Mac. O Mac ou a máquina Lennox. O comando para isso é toque. E, em seguida, o nome do arquivo que você deseja fazer toque, uh, caixa flexível que CSS. E agora, se eu fizer ls novamente, podemos ver que agora eu tenho a caixa flexível que o arquivo CSS no meu diretório usuários do Windows. O que você vai querer fazer para fazer um arquivo é digitar N u l maior que e, em seguida, o nome da caixa flex arquivo. Isso é sim. Isso iria quebrar se eu tentasse executá-lo porque eu não estou executando um computador Windows, mas isso é o que você faria aqui. Se eu quiser abrir isso e olhar para tudo que estava neste arquivo, e neste diretório, eu poderia apenas digitar código, uh, uh, ponto aberto e isso vai abrir isso no Finder ou Windows Explorer ou o que você tem, O que é muito legal. A última coisa que quero ver neste vídeo é que se você baixou o casaco V, há uma coisa extra que você pode fazer que vai tornar seu processo muito mais suave. Então eu quero que você faça é que eu quero que você abra o código V. Eu quero ir em frente e digite comando shift p para abrir a paleta de comandos e, em seguida, começar a digitar shell e, em seguida, ir para esta opção, que é instalado comando código no caminho. Você deve obter essa coisa que diz código de comando Shell instalado com sucesso no caminho. Em seguida, se você sair do terminal usando o comando Q e reiniciá-lo. Vamos CD de volta para a caixa de fluxo. Então eu posso digitar código dot E o que isso vai fazer é abrir a pasta atual no código V S , incluindo todos os arquivos que estão nessa pasta, que é muito legal. A linha de comando consome um pouco intimidante na primeira vez que você aprendeu sobre isso. Mas é uma ferramenta muito poderosa que pode realmente ajudar a aumentar sua produtividade como desenvolvedor. E o recurso é que mencionei no primeiro vídeo. Há um conjunto de exercícios de linha de comando para você praticar suas habilidades de linha de comando . E, claro, como eu mencionei, se você não está confortável usando a linha de comando, você não precisa. Você pode seguir em frente e continuar usando o localizador de interface de usuário gráfico ou o Windows Explorer, ou o que você tem para executar todas as etapas necessárias para este projeto. Eu, no entanto, peço que você faça essa pasta de caixas de apartamentos para que você tenha um lugar para colocar todos os seus materiais do curso. Neste vídeo. Falamos sobre as ferramentas de uso do desenvolvedor. Um editor de código como V S Code Adam são sublimes, e os comandos de terminal, uma vez que você fez essa pasta caixa flexível e opcionalmente também ter feito os exercícios de linha de comando que eu tenho nos materiais de recursos. Vamos passar para o terceiro vídeo 3. HTML Refresher e elementos semânticos: neste vídeo, vou resumir brevemente os conceitos básicos de HTML. Se você não trabalhou com HTML antes, eu recomendo realmente gastar algum tempo aprendendo sobre isso antes de continuar com o curso. Por outro lado, se você já está familiarizado com HTML e sabe sobre HTML cinco elementos semânticos, você pode ir em frente e pular este vídeo. HTML significa linguagem de marcação de hipertexto. Foi criado por Tim Berners Lee no CERN como uma forma de compartilhar pesquisas. HTML define a estrutura de tudo o que você vê na Web. CSS define o estilo, e JavaScript define a interatividade, e este curso estará falando sobre como usar HTML para criar estrutura para nossos sites e seguida, usar CSS para estilizá-los. Cada página HTML tem duas partes básicas. Uma cabeça e um corpo. O cabeçalho de um documento HTML contém informações sobre o documento, o título que deve ser exibido na guia e as folhas de estilo apropriadas. Qualquer informação do CEO, etc. O corpo contém o conteúdo que será mostrado no navegador, então eu tenho terminal aberto. Vou criar um novo dentro do meu suporte de caixa de fluxo. Eu vou criar uma nova pasta chamada site Demo Demo e, em seguida, dentro do site de demonstração, eu vou criar um novo arquivo chamado índice dot html indexado em HTML. Então eu vou abrir. Código invejoso usando meu comando code dot. Então eu vou andaime fora da estrutura HTML básica. A primeira coisa que preciso é de um tipo de doca. Isso informa ao navegador que tipo de documento este é neste caso é um documento HTML. Então eu preciso envolver tudo dentro de uma tag HTML como esta para que você possa ver que eu tenho a tag de abertura aqui em cima e, em seguida, a tag de fechamento aqui em baixo. Isto é o que demonstra uma etiqueta de encerramento , a barra depois da cenoura, então eu preciso de um a barra depois da cenoura, elemento à frente, que eu também vou incluir aqui esse título. Tudo bem, primeiro, que página então? Também vou precisar de um corpo. E dentro disso, eu vou ter em cada um que apenas diz olá mundo, e esta é uma página HTML muito simples. A outra coisa que você pode fazer é, em vez de ter que digitar tudo isso você mesmo ves código, nós vamos andaimes para você se você digitar html dois-pontos cinco e clicar tabulação. Então eu tenho a tag HTML. Eu tenho a etiqueta de corpo que eu tenho que tag cabeça Eu vou varrer para cima com este título é que vai ser a minha primeira vista, e em seguida, no corpo que eu vou ter em cada um que diz olá, mundo. Eu vou ir em frente e abrir isso e cantar digitando índice aberto que h duas bocas. Lá vamos nós. Temos algo que diz olá, mundo. Isso também me dá acesso às ferramentas de desenvolvedor do Chrome. Se eu ir em frente e à direita, clique e, em seguida, pressione Inspecionar, Você pode ver que eu tenho aqui em baixo esta caixa de ferramentas que se abre e dá e ele me mostra do html para o que está mostrando na página. Ele também tem algumas coisas com as folhas de estilo em que quem vai mexer com a gente em um pouco. Então esta é outra ferramenta muito poderosa que os desenvolvedores usam um pouco. Você provavelmente está familiarizado com um monte de HTML. Elementos estão prontos. Por exemplo, P de Dube marca uma tag H uns 36 extensões gritou aliados, etcetera, etcetera, etcetera, etc. O que você pode não saber é que a mais recente especificação html e introduziu um novo conjunto de elementos chamados HTML cinco elementos semânticos. Elementos semânticos incluem coisas como Nunca artigo principal, cabeçalho, rodapé Aside e outros. Elementos semânticos não aparecem na Web de forma diferente dos elementos DIV, mas eles são benéficos para coisas como rastreadores da Web, leitores de tela e S. O que eles fazem é descrever o que cada parte do documento é e como ele refere-se a outras partes do documento. É por isso que é benéfico para o desenvolvimento Web moderno, e o recurso é, Eu incluí um link onde você pode ler mais sobre cada tipo de elemento semântico. Assim que terminar de ler isso, você pode continuar para o próximo vídeo. 4. CSS Review e Reset.css: então eu fiz algumas pequenas modificações em nosso site de demonstração. Eu adicionei alguma estrutura a ele, então agora temos um cabeçalho em um principal. O principal tem alguns fatos sobre a Terra, que eu pensei que seria divertido. Estamos dizendo olá. Os líderes mundiais terão alguns fatos sobre o mundo, uh, e isso está em um diff com uma tag P nele, que é muito legal, mas até agora parece bem básico. Nós não fizemos nenhum de nosso próprio estilo. Nós apenas estamos contando com o navegador para decidir como ele se parece. O que você pode notar, no entanto, é que alguns elementos parecem diferentes de outros, mesmo que não tenhamos escrito nenhum estilo. Isso ocorre porque cada navegador tem seus próprios estilos embutidos que será padrão na ausência de quaisquer estilos definidos pelo usuário. Por exemplo, Crom diz que este cada um deve ser maior do que este h três, e que um três deve ser maior do que estes imposto P. Ele também diz que deve haver uma margem de oito pixels ou algo assim, e que cada um deles deve ser espaçado um pouco para que você possa ver ao seu redor . Queremos nos livrar de todo esse estilo padrão. Então vamos usar algo chamado Reset CSS. Queremos nos livrar do estilo porque cada navegador lida com um pouco diferente . Por isso, é bom começar com uma ardósia em branco para que possamos começar do zero e não ter que nos preocupar com nada. Vamos fazer isso usando algo chamado Reset CSS. Como o nome sugere, isso tirará qualquer estilo padrão e nos dará uma tela em branco com a qual criar nossa Web Design Art. Existem algumas versões diferentes do Redefinir CSS. Vamos usar o original do Eric Meyer. Você pode ir. Você pode encontrá-lo na minha web dot com barra eric barra ferramenta barra CSS barra reset. Ou você pode apenas fazer o que eu faço todas as vezes e Google redefinir. Aqui vamos nós. Uh, e aqui está. Então nós temos aqui e ele descreve um pouco, e então ele tem o conteúdo do CSS reset. Você pode ver que ele está apenas redefinindo tudo para ser zero e todos os seus padrões. O que vamos fazer é pegar isso, copiá-lo, e então vamos colá-lo em algo chamado Reset CSS. Agora, nós ainda não fizemos este arquivo, mas o que nós vamos fazer é no terminal nós temos nosso índice HTML e nossa pasta de site demo. Até agora, vamos fazer outra pasta chamada Estilos lá e, em seguida, nós também vamos fazer um chamado ativos vai ser o que contém quaisquer imagens que podemos incluir mais tarde. Não vamos usá-lo ainda, mas vamos. Então dentro, nós vamos então agora nós vamos CD em estilos. Então vamos fazer uma nova pasta de redefinição CSS, toque em redefinir, avaliar nazista. E nós também vamos fazer um estilo CSS estilo toque estilo que CSS legal. Esta atualização será exibida em nosso código em R. V s. Você vê, nós temos essas coisas novas, então nós vamos entrar em estilos em CSS reset, e nós vamos apenas colar todo o CSS reset lá dentro. Guarde agora. Ainda não há nenhuma alteração em nosso documento HTML. Isso ocorre porque ainda não conectamos o CSS com o HTML. Então, no índice ela Mel, vamos entrar na etiqueta principal. Vamos adicionar uma nova linha que vai dizer OK, incluir esta folha de estilo. Vamos dizer link sobrancelha é estilo. Tipo de tiro é uma barra de texto CSS e a ref de TI é a pasta atual e, em seguida, a pasta Estilos e, em seguida, redefinir esse CSS. Então o que isso faz é dizer OK, vamos incluir um link para outro documento. Esse documento vai ser uma folha de estilo do texto, CSS. E então aqui está o caminho para ele, que é que estilos, uh, redefinir esse CSS. Então, agora, se salvarmos isso e atualizarmos isso, vocês podem ver Não, temos absolutamente nenhum estilo aqui, que eu acho que é uma vantagem. Claro, isso parece super chato. Vamos consertar isso. Vou dizer que talvez devêssemos fazer um Chuan é grande de novo. Devemos também espaçar as coisas um pouco e adicionar um pouco de cor também. Então o que eu vou fazer é ir em frente e vincular meu estilo que CSS Então eu vou dizer Link Rale sua folha de estilo novamente digite é texto barra CSS e, em seguida, um rascunho. Desta vez vai ser em estilos. Vai ser estilo que CSS legal. Então tudo o que me resta fazer é ir em frente e abrir minha folha de estilo. A primeira coisa que vou fazer é pegar tudo na etiqueta do corpo e fazer Sand Saref porque prefiro olhar para Sand Saref em vez de Sarah. Então vou escrever uma regra para isso. Primeiro vem o meu seletor. Depois vem a propriedade, que vai ser uma família divertida, e depois o valor. Que vai ser o Sands. A Sarah. Legal. Lá vamos nós. Então eu quero que cada um seja grande de novo. Então eu vou dizer que cada um deve ser divertido tamanho 2 da manhã. E eu vou dizer que cada div deve ter uma margem de cinco pixels em todo o caminho. Então isso vai espaçar um pouco mais. Vamos também fazer três anos divertido adorável. Espere, deve ser legal e acabamos. Isso ainda não é muito bonito, mas parece um pouco melhor do que antes. Hum, mas nós incluímos o CSS reset. Então, agora temos um dedo de tela em branco trabalhando se você não se sentir confortável com CSS. Incluí alguns links no material de recursos para você examinar antes de continuar , já que este curso é destinado a pessoas que já têm um pouco de familiaridade com CSS. Se todas as coisas que acabei de escrever são totalmente estranhas para você, eu realmente recomendo que você olhe através dessas pernas antes de continuar. Há um artigo em particular que eu gostaria que todos que estão lavando isso para ler que é ouma partes visíveis do CSS por Mike Wreath Mueller. Eu recomendo especialmente a parte sobre o modelo de formatação visual, já que isso vai se tornar relevante em um pouco. Até agora, em nosso site de demonstração, incluímos o Reseteo CSS. Fizemos um pouco de pé, mas não tanto. Ainda não introduzimos o Flex Box, e faremos isso no próximo vídeo 5. Flexbox: um novo contexto: Então chegou a hora de apresentar a estrela deste show. Caixa Flex CSS. Vamos ver o que os funcionários vêem isso, como ocasiões especiais têm a dizer sobre Flex Box. O CSS três módulo caixa flexível ou caixa flexível, é um modo de layout, proporcionando a disposição de elementos em uma página de modo que os elementos se comportam previsivelmente quando o layout da página deve acomodar diferentes tamanhos de tela em diferentes dispositivos de exibição. O aspecto definidor do layout flexível é a capacidade de alterar seus itens com e ou hype para melhor caber no espaço disponível em qualquer dispositivo de exibição. Quem o que isso significa? Vamos explorar e descobrir. Mas antes disso, precisamos falar sobre o conceito de contexto e seu site comum na Internet. Os elementos são dispostos em um contexto de bloco em cima, seu valor de exibição padrão é. Bloco dá elementos de lista de Heather. Em HTML. Cinco elementos semânticos são todos elementos bloqueados por padrão. Ser um elemento preto significa um par de coisas, por padrão, que ocupam o peso total de seu contêiner pai. Por padrão, eles adotam a altura de seu conteúdo e, se você aninhar, bloqueiam elementos dentro de elementos de bloco. Um novo contexto de bloco é criado que se comporta de forma semelhante quando aplicamos Display. Flex para um elemento, no entanto, estavam redefinindo o contexto. Acabamos com o que é chamado de contexto flexível. Elementos dentro de um contexto flexível se comportam de forma muito diferente de seus elementos de bloco comuns. Vamos dar uma olhada em um exemplo, então eu tenho Aqui são mesmo site de demonstração. Eu adicionei alguns mergulhos adicionais com números. 123456789 Eles são apenas dibs de caixa de classe. Eles têm um par de estilos lá neste recipiente, chamados caixas que tem uma altura mínima de 300 pixels e com 600 pixels. Então eles estão se comportando como elementos de bloco normais. No entanto, vamos em frente e aplicar display flex ao nosso contêiner pai display flex. Agora, quando eu atualizar a página, o que vamos ver é muito diferente do que vimos. Estávamos observando no contexto negro. Qualquer elemento que tenha a propriedade display flex torna-se o que é chamado de recipiente flexível. É aqui que criamos um contexto flexível. Aqui está o que as especificações do W 3 têm a dizer sobre isso. Cada filho de fluxo final de um contêiner flexível se torna um item flexível. Cada execução contínua de texto que está diretamente contido dentro de um contêiner flexível é moldada em um item flexível anônimo. Então, mas isso significa sobre o item flexível anônimo é que se eu só tenho então eu tenho as caixas de classe seção , Este é o nosso recipiente pé. Eu tenho todas essas caixas dá. Todos esses são os chamados itens de fluxo. Se eu tiver apenas algum texto aleatório no lado deste, ele também é tratado como um item flexível. Isso é tudo o que isso significa. Assim, qualquer elemento de nível de bloco dentro do nosso novo contexto flexível torna-se o que é chamado de item flexível . Os itens flexíveis são caixas de nível flexível, o que significa que eles participam do contexto de formatação flexível dos pais. Então isso significa que eles apenas se deitam, como você pode ver aqui. Dentro de cada item flexível, entanto, o contexto é parentes, qualquer que seja o valor de exibição de elementos específicos é que, por padrão, é geralmente bloco. O que isso significa é que se dentro de um dia desses, eu for e criar um par de outros dibs, isso é ansioso. A classe é igual à Caixa Um? Ok, vamos fazer um par mais destes ok, e para um cool e então vamos também ir em frente e diferente. Trate-os um pouco, então temos um pedido de caixa. Você pode ver que esses ar sendo colocado da maneira normal que um elemento de bloco seria assim . Enquanto um item flexível existe em um contexto de movimento, seu conteúdo ainda existe em qualquer contexto que seja criado, que normalmente será um contexto de bloco por padrão. Nós também pode executar o que eu gosto de chamar opção flex, que está aninhando contextos flex dentro de outros contextos flex. Então vamos demostrar isso rapidamente. Se eu fosse pegar a nossa caixa pai e dizer que deve ser display flex, você pode ver que agora nossos elementos filho são agora itens flexíveis. Este é um novo contexto flexível. Estes são itens flexíveis e você pode ver que criamos outro contexto flex e estes ar exibindo neste longo tipo de estiramento vertical como os outros elementos neste flex no recipiente flats. Agora que discutimos a criação de um novo contexto para nossos elementos, o contexto Flex passará os próximos cinco vídeos discutindo propriedades específicas que podemos aplicar a contêineres flexíveis e itens flexíveis. Como sempre, o código que escrevemos neste vídeo está nos materiais de recursos 6. Eixo principal, Eixo transversal: No último vídeo, mencionamos o conceito de contêineres flexíveis e itens flexíveis neste vídeo e nos seguintes vídeos. Vamos mergulhar no que diferencia um contêiner flexível para ele de um item flexível e quais propriedades específicas podemos aplicar a cada um. Antes de fazê-lo, No entanto, precisamos falar sobre os dois eixos que são específicos para contextos flexíveis. Cada contêiner flexível tem um eixo principal e um eixo transversal. É realmente importante que você não pense nesses eixos é X e Y eixos ou horizontais e verticais ou qualquer coisa assim. Eles são o principal acesso e os eixos transversais. O acesso principal define quais itens de direção são colocados na página por padrão. O eixo principal começa no lado esquerdo da página e vai para a direita. Os itens de reunião são dispostos horizontalmente ao lado um do outro. Isto é o que acontece quando aplicamos display flex a um elemento. É elementos filho alinhar-se ao longo do acesso principal suas propriedades que podemos usar para mudar a direção do eixo principal. Vamos rever estes no próximo vídeo, mas por enquanto, aqui está uma demonstração rápida. Então podemos ver aqui que nesta pequena caixa temos um recipiente flexível com três caixas de itens flexíveis . Temos também um pequeno indicador que nos mostra onde o acesso principal começa. Assim, o excesso principal começa no lado esquerdo e, em seguida, todos os elementos são dispostos de acordo. Agora vou invulgar essas outras seções que têm jogo semelhante. Você pode ver que eles têm a mesma marcação HTML exata. Eles só mudaram a direção do acesso principal. Então vamos dar uma olhada nisso. Assim, você pode ver quando o acesso principal começa na parte superior do contêiner. Os elementos estão alinhados de acordo com isso. Neste caso, uma vez que o acesso principal está no topo, os aliums são dispostos verticalmente. Aqui está outro exemplo em que o acesso principal começa à direita e vai para a esquerda . Você pode ver que o 1º 1 está agora todo o caminho para a direita porque eles ainda estão alinhados de acordo com o acesso principal. E por último, mas não menos importante, temos o excesso principal começando na parte inferior. E então temos 123 subindo. O acesso cruzado é sempre perpendicular ao acesso principal por padrão. Ele só vai começar no topo, onde a esquerda. Mas também podemos mudar qual direção dele também. Vamos ver como usar o acesso cruzado em nossos layouts muito em breve. 7. Propriedades Flex: direção flex, envoltório flexão: No último vídeo, falamos sobre os dois eixos que cada recipiente flexível tem o eixo principal e o acesso cruzado . Neste vídeo, nós vamos aprender como alternar esses eixos para que possamos criar diferentes layouts no meu contêiner de rebanhos, que é a seção que eu vou adicionar a direção flex propriedade e dar-lhe o valor Row flex Linha de direção flexível. Isso não vai fazer nada porque Linha é o valor padrão, no entanto, entanto, se em vez de dizer linha de direção flexível eu digo coluna Direção de fluxo você pode ver que esta mudança é onde o acesso principal começa, que é, como eu disse, disse antes indicado por este pequeno ponto vermelho Isto é útil, especialmente ao projetar um site que vai ser usado tanto na área de trabalho e móvel, porque podemos mudar qual direção são elementos vão ser dispostos apenas por alterando um valor de propriedade, também podemos usar o valor. Por exemplo, Ro reverso ro ré inicia o eixo flexível no lado direito em vez da esquerda. E como você provavelmente poderia imaginar, se dissemos quando é uma coluna inversa, isso vai começar na parte inferior em vez de no topo. Até agora, isso é muito esperto, mas há um problema que podemos encontrar. Se tivermos um monte de elementos alinhados um ao lado do outro e um deles tem que ter um conjunto com, eles vão transbordar o recipiente. Podemos corrigir esse comportamento adicionando a propriedade flex rap rap. Então, primeiro de tudo, vamos quebrar isso primeiro antes de consertá-lo. Então vamos mudar isso de volta para a linha. Eu tenho um monte de outras caixas aqui que eu estou indo para uma NCAA quis dizer, e então vamos ver como isso parece. Oh, não, este não é realmente o olhar que estamos procurando. Eu acho que seria legal se todos esses, tipo, tipo, embrulhá-lo para baixo na próxima linha. Então é isso que vamos fazer. Vamos aplicar a propriedade flex rap flex wrap. Então agora estes irão fluir para a próxima linha. Se eu fosse adicionar outra linha de caixas, essas também continuariam fluindo para baixo. Vamos ver como isso parece legal. Como você pode ver, eles ainda estão transbordando os limites do nosso contêiner, mas isso é porque eu contêiner é muito pequeno. para segurar todos eles, e isso é bom. Legal. Então eu também posso fazer isso com, hum com uma coluna. Então, se eu quiser ter coluna Direção de Fluxo e eu sei que isso é muito grande para manter todos estes e forma de coluna, então ele vai obter 123 na coluna e então assim por diante e assim por diante. Nós também podemos inverter a direção de thes usando rap reverso. Então agora, em vez disso, muda a direção do acesso cruzado. Então, se tivéssemos, por exemplo, direção flexível crescer e flexionar rep envolto reverso, estamos começando aqui na parte inferior em vez de e na parte inferior esquerda. E assim o canto superior esquerdo. Então, estamos apenas mudando onde o acesso cruzado começa. Podemos combinar essas duas propriedades em uma propriedade chamada fluxo flexível. Fluxo flexível é uma espécie de como a borda, a propriedade border ou qualquer uma dessas outras propriedades que você pode dar um monte de valores para todos de uma vez. Isso aconteceu digite nomes de propriedades individuais, então, com fluxo flexível, você dá primeiro a direção que deseja ir. Digamos que queremos que Theo vá e a coluna. E então, se você quer ou não embrulhar isso, eu vou vendê-lo para embrulhar exatamente assim. Lá vamos nós. Então, nós falamos sobre flex direction flex wrap in flex flow e no próximo vídeo vamos falar sobre como alinhar e justificar nossos itens ao longo de cada eixo. 8. Propriedades Flex: alinhe itens, justifique conteúdo: falamos sobre como gerenciar a direção de elementos flexíveis usando flex direção flex envolto em fluxo flexível. Em seguida, precisamos falar sobre como posicionar esses elementos em relação aos contêineres pai. As propriedades sobre as quais vamos falar neste vídeo são as que realmente explodiram minha mente quando eu estava aprendendo Flex Box fez um monte de trabalho duro fora de aprender CSS e apenas tornar tudo muito mais fácil. Ah, então eu estou animado para compartilhá-los. Eles também são um sonho para design responsivo. Fale sobre em um vídeo posterior as propriedades. Para isso, vamos falar sobre nossos itens alinhados e justificar o conteúdo. Eles fazem coisas muito parecidas, é por isso que estamos falando sobre eles juntos. Justificar conteúdo lida com como os elementos são posicionados ao longo do eixo principal, enquanto uma linha itens lida com como suas posições ao longo do acesso cruzado. Então vamos dar uma olhada em ambos e demonstrar Hum, então vamos primeiro olhar para os diferentes valores para justificar conteúdo. Ah, eu vou começar dizendo que essas propriedades de ar que são aplicadas em ah recipiente flex então eu vou pegar meu recipiente flexível, que é a seção, e eu vou dizer justificar conteúdo. Deve ser, uh, vamos começar com Flex Start. Uma das coisas boas sobre o código BS é que ele fornece pequenas dicas sobre o que cada uma das propriedades fazer à medida que você digita-los. Então, como você pode ver, Flex Start embala todos os elementos para a frente do contêiner. Este é o padrão, e nós não vamos ver nenhuma mudança ainda. No entanto, se mudarmos este fim desvios, itens flexíveis vão ser embalados para o fim da linha porque você pode ver aqui, isso é diferente do rap reverso Quando fizemos rep reverter o um foi todo o caminho no Certo. Como você pode ver aqui é apenas empurrar os elementos para escrever em vez de reordená-los. Então, ok, então nós temos flex e nós também vamos ter centro que, como você pode suspeitar, centraliza os elementos. E então nós temos, um também o valor padrão, que é stretch eso. Os elementos são é esticado ao longo da altura da página, mas este é o padrão. Uma coisa muito útil que você pode fazer com isso é que você pode fazer algo. Concorda os elementos dela tanto na horizontal como na vertical. O que leva muito trabalho a fazer se você não estiver usando caixa flexível, mas com caixas flexíveis. Super simples. Então dizemos centro de itens online e, em seguida, também dizemos justificar centro de conteúdo. E lá vamos nós. Temos os nossos elementos bem no meio da nossa caixa. Se você não está fazendo isso com Flex Box, você tem que fazer algumas coisas como, ligeiramente hacky, e é muito frustrante. Então isso é uma linha. Itens no conteúdo justificar. Há 1/3 de propriedade que pertence a esta família. Ele é chamado de conteúdo de linha que se aplica a contêineres flexíveis que têm mais de uma linha de conteúdo encapsulado . Então deixe-me adicionar mais algumas caixas aqui. Eles estão encerrando? Sim. Eles devem embrulhar. Então vamos voltar e dizer, uh, uh, Flix Flow Pro Rap. Legal. Então agora eles estão embrulhando. O padrão para isso é tê-los esticado, mas podemos dizer ah, conteúdo de linha flex start, e isso irá empurrá-los para cima para o início. Claro, podemos passar por extremidade flexível e ver o que parece que vai empurrá-los para baixo para o centro inferior, é claro, colocá-los no meio. E então nós também temos espaço ao redor, como você pode ver e espaço entre. Não sei se o espaço se aplica uniformemente a este ou não. Oh, ele faz. Então temos espaço em torno do espaço uniformemente e espaço entre como você pode ver usando uma linha itens e justificar conteúdo nos ajuda a resolver um monte de problemas de layout que caso contrário teríamos que fazer um monte de trabalho manual a fim de resolver. Então esse é apenas um dos muitos benefícios de usar caixas flexíveis. A capacidade de usar itens online e justificar o conteúdo é deixar itens de lugar. Agora que falamos sobre esses dois e como os átomos estão alinhados na página, vamos começar a falar sobre como crescer e encomendar itens para que possamos controlar seu tamanho e a ordem em que eles aparecem 9. Propriedades flex: flexão, base flexível, ordem: Agora que sabemos como colocar elementos onde queremos. Vamos falar sobre como ajustar seu tamanho. Para fazer isso, vamos usar para propriedades flex espaços e flex grow. base flexível descreve o tamanho base de um item flexível ao longo do eixo principal. Então, tudo bem, então isso é um pouco difícil de entender. Vamos quebrar um pouco. Então aqui eu tenho outra versão das minhas caixas em seu recipiente flexível. Há cinco caixas diferentes. Cada um deles é uma div dentro de uma seção, então eu posso direcionar todos eles usando isso e, em seguida, direcioná-los individualmente usando as classes . E aqui está a minha secção. Tem manchas de exibição nele. Por isso, é bi recipiente flex. Então eu quero que cada um desses dispositivos tenha 25 pixels de largura. Quero salientar que estou super ampliado nesta coisa em particular. Então 25 pixels não são geralmente tão grandes, mas eu quero que cada um desses seja 25 pixels. O que? Então meu direito de resposta padrão vai ser dizer, uh, uh, o que, 25 pixels que parece normal e razoável, certo? Ok, então cada um deles tem 25 pixels. O que? Agora digamos que quero que sejam colunas. Certo? Então eu quero apenas virar estes para que o um esteja no topo e, em seguida, descer 2345 Eu ainda quero que eles ocupem o todo com. Eu ainda quero que eles sejam toe tem que manter que 25 pixels eu mencionei. Exceto que eu queria ser uma altura agora em vez de um quê? Então vamos tentar primeiro. Aplicando coluna de direção flexível. Ok, bem, eles estão alinhados como eu queria que eles fossem, mas eles ainda têm 25 pixels de largura. Isso não mudou porque agora eu quero que eles tenham 25 pixels de altura em vez de 25 pixels de largura. Então, a fim de corrigir algo assim, em vez de usar largura ou altura, vamos usar uma nova propriedade chamada base flexível. Base flexível. base flexível descreve a medição do elemento ao longo do eixo principal. Então agora este ar 25 pixels de altura ao longo do acesso principal que começa no topo homem está indo para o fundo. Se eu fosse me livrar dessa coluna de direção flexível, eu conseguiria 25 pixels de largura ao longo do acesso principal, que vai da esquerda para a direita. Então é assim que funciona a base flexível. Eu quero salientar que a base flexível, hum, hum, não é necessariamente um ditado de como, Oh, eu quero que este seja exatamente este vinho. Então, se eu fosse dizer toda essa div, toda essa seção é de 300 pixels de vinho. Mas se eu disser a base flexível para ser 300 pixels, ele não vai fazer isso porque ele não quer expandir além do contêiner. Se eu quisesse que tivesse 300 pixels de largura, teria que usar homens. Qual é o mínimo permitido com este elemento em particular? Então, como você pode ver, definir a base flexível de um elemento não é o mesmo que definir com ele. Ele ainda pode expandir ou encolher, dependendo da quantidade de espaço disponível, a base apenas lhe dá uma diretriz sobre por onde começar. Agora, se queremos falar sobre a expansão de um elemento, vamos usar a propriedade flex grow. Vou me livrar desses homens e voltar ao nosso layout normal desses caras. E então eu vou aplicar uma propriedade flex grow com o valor um para todos eles juntos você pode ver o que isso faz. Isso tira o espaço extra que temos aqui. O Sub divide-o em quantas unidades temos aqui e aplica uma unidade do espaço extra a cada uma, que tem o efeito de elevação resultante de espaçamento uniforme. Agora aplicamos o Flex crescer um dedo todos esses cinco elementos, que significa que estamos pegando o espaço extra e subdividindo-o em cinco partes e que aplicando uma parte a cada um desses cinco elementos. Mas se eu fosse tirar isso para que estivessem novamente olhando assim e, em seguida, aplicar Flex, crescer um para apenas um elemento. Nossa primeira caixa que vai ocupar todo o espaço adicional que sobrou porque há apenas um elemento que temos que aplicá-lo. Agora, se eu fosse aplicar Flex, crescer um para a minha segunda caixa, você pode ver que os espaços restantes agora têm entre eles eu também posso usar números diferentes para aplicar diferentes quantidades de crescimento a cada item. Então, se eu vou dizer flex, crescer um na primeira caixa e flicks crescer na segunda caixa, isso vai ficar assim. Então o que estamos fazendo é pegar aquele espaço extra que estava disponível aqui. Estamos somando todos os números de crescimento flexível que estão nesse particular ou que estão neste recipiente de fluxo, então temos três. Então ele está dividindo esse espaço extra em três, e então aqueles pedaços de espaço extra. É distribuí-los para cada uma das sub-caixas no número que eles são flex crescer. Número é assim que este recebe um pedaço de espaço extra neste recebe dois pedaços de espaço extra . Flex Grow é um dos conceitos mais complicados de entender no Flex Box. Se você está sentindo que você poderia usar um pouco mais de ajuda para entendê-lo, eu vinculei um artigo nos materiais de recursos que você pode ir dar uma olhada que tem algumas ilustrações detalhadas e algumas explicações de toda a matemática que está envolvida como o navegador está fazendo seus cálculos. A próxima propriedade que temos de falar é sobre a propriedade da ordem. A propriedade do pedido nos permite reorganizar nossos itens flexíveis sem alterar o código-fonte. Isso é útil, por exemplo, para S C O. Ele permite que o conteúdo importante apareça primeiro no código-fonte, mesmo que ele não apareça primeiro na página. Use a propriedade order. Tudo o que temos a fazer é aplicar a ordem e depois dar-lhe um número. Vou pedir 54 Caixa 1. Então, quando eu atualizar a página, caixa um estará no final. Se eu fosse dizer caixa para deveria ter, vamos dar na verdade, Caixa 4 deve ter ordem quatro. Vai aparecer ao lado da caixa 1 agora. Então agora o nosso pedido é 235 para um. De acordo com a propriedade que demos aqui, isso é muito legal. Também é muito útil para lidar com um CEO e design responsivo porque nos dá a flexibilidade de reorganizar nossos elementos sem ter que alterar a marcação HTML de nossa página . Agora que falamos sobre o dimensionamento com a propriedade flex grow e a propriedade flex base , e ordenar nossos elementos com a propriedade order. É hora de terminar e praticar mais um pouco antes de mergulharmos na criação sites usando livros flexíveis. 10. Flexbox Froggy: falamos sobre direção, alinhamento embrulhado, justificação, tamanho e pedido. Mas há sempre mais para aprender mais para praticar. Se você realmente quer praticar seus dólares flex, eu realmente recomendo o site. Caixa Flex Froggy You Confined Effect Flex caixa para ele ponto com Basicamente o que é, é uma prática interativa com caixa flexível. Você tem este sapo que você precisa para chegar à almofada de lírio e você apenas aplicar a propriedade flats correta para que ele termine. E este nível queremos usar a propriedade de conteúdo justify content para enviar a fraude todo o caminho até o final do contêiner. Flex, eu realmente recomendo jogar através disso. Eu brincava com isso o tempo todo. Se eu só quiser refrescar minhas habilidades. Eu passei por isso enquanto eu estava fazendo este curso juntos para ter certeza de que eu não estava esquecendo nada. Assim por diante, há também uma outra coisa que eu gostaria de mostrar a vocês. Felizmente para mim, caixa Flex Robbie tem um nível dedicado a esse pensamento particular vendeu ele. Deixe à direita aqui é a propriedade alinhada auto. Um auto de linha permite que você pegue um item flexível específico e alinhe-o de forma diferente dos outros itens na página. Então você sabe, como estão os itens de linha? Propriedades são coisas como, um Flex, start flex, end center assim por diante e assim por diante, sozinho através do acesso. Bem, se quisermos, temos um item que queremos colocar no início ou no final de uma página separada de seus outros elementos circundantes. Nós aplicamos a propriedade, alinhar-se a esse item flex específico. Então nós vamos dizer, aliado no auto-centro, e você pode ver que nós temos esse sapo de classe. Amarelo está agora no centro, enquanto todos os outros sapos ainda estão alinhados no topo e nós teríamos realmente movido todo o caminho para baixo para flex. E lá vamos nós. Então, tanto quanto eu estou preocupado, onde você tocou em todas as propriedades flex e nós sabemos como aplicá-los a diferentes elementos agora podemos começar a ir em frente e criar alguns layouts usando caixa flexível 11. O layout sagrado Graal: e este vídeo, vamos fazer uma descrição de layup. Nós vamos resolvê-lo com Flex Box, e então nós vamos falar através da vida. Resolvê-lo com brejos flexíveis é a melhor e mais eficiente escolha que o layout será resolvendo é chamado de layout do Santo Graal. Você já viu isso antes, cerca de mil milhões de vezes. Parece assim para colocar em palavras. O layout do Santo Graal tem um centro fluido, que significa que a coluna central muda com como o navegador muda com e corrigido com barras laterais. Todos eles são da mesma altura. A coluna central aparece primeiro no Hdois. Mel, qualquer coluna pode ter mais conteúdo. Ele tem uma altura fixa, cabeçalho e rodapé que abrangeu a largura da página. Ele tem um rodapé que atinge pelo menos a parte inferior da janela do navegador. Não importa a altura do conteúdo sem usar o posicionamento absoluto ou fixo, ele requer apenas um elemento extra, e ele usa o mínimo de CSS possível. Agora esta descrição é tirada de um artigo em uma lista separada intitulado layout do Santo Graal. Eu liguei-o, e os materiais de recursos estarão funcionando a partir deste HTML. Só se parece com isso. Tivemos o nosso elemento de elemento principal no artigo dois asides e um rodapé que é isso. Vamos usar a caixa flexível para transformar isso em algo parecido com a imagem que eu mostrei antes. Então eu criei estilos baseados que apenas nos dá um pouco de cor. Temos a estrutura de nossas bocas H montadas aqui em nosso documento. Vamos começar a escrever um pouco de CSS. Parece-me que um bom lugar para começar seria fazer todo o corpo de Flex recipiente eso vamos dio display deve ter display flex Parece legal. Ok, então agora nós temos essa coisa maravilhosa flex acontecendo. Deixe-me dar uma olhada nisso. Como você pode ver, queremos que o corpo seja a altura total da janela do navegador. Mas agora é só o quê, 348 pixels de altura. Mas agora é só o quê, O que vamos fazer é pegar essa altura, e vamos dizer que a altura dos homens do corpo deve ser de 100 V h v h representa altura da porta Vieux. Hum, e o que isso vai fazer é dizer ao nosso corpo que vai ter que ser 100% da altura da janela do navegador. Então também precisamos mudar a direção flex porque queremos que o cabeçalho seja na parte superior no rodapé para estar na parte inferior. Hum, então nós vamos dizer coluna de direção flexível, que vai nos deixar tipo de volta onde começamos. Mas sabemos que há muitas coisas diferentes acontecendo sob o capô agora. Ok, então agora que nós temos que configurar, eu vou ir em frente e abordar esta descrição do cabeçalho e do rodapé como tendo uma altura igual definida. Então nós vamos dizer cabeçalho e rodapé, pé ela vai ter, uh, uh, flex propriedade flex base de 150 pixels, então isso vai dar-lhes a sua altura igual. Então eu tenho este recipiente flexível. Ele gasta toda a altura da janela do navegador, mas eu tenho todo esse espaço extra no final. Quero pegar todo esse espaço extra e dar ao meu elemento principal. Então eu vou dizer que Maine vai ter um flex grow Propriedade de um. Lá vamos nós. Então agora isso está chegando em direção ao que nossa descrição parecia. Temos o cabeçalho no topo. Temos o pé ou todo o caminho no fundo. Mesmo que não haja conteúdo aqui ainda. Também queremos que nosso contêiner principal seja um contêiner de fluxo. Então nós vamos dizer, uh, uh, Display Flex aqui também. Incrível. Agora tudo o que resta a fazer é redimensionar essas barras laterais. Então as costeletas são ambos elementos laterais, e eles vão ter uma base flexível de 200 pixels, que lhes dá um tamanho igual. E então nosso artigo vai ter todo esse espaço restante aqui. Então, vamos dizer Flex, crescer um para a etiqueta do artigo, e então nós só temos que encomendá-lo. A barra lateral esquerda tem uma classe de esquerda, então vamos dizer ordem zero. O artigo tem que ter um pedido, e então nossa barra lateral direita tem que ter o pedido três. E lá vamos nós. Fizemos esta camada. Foi super rápido e fácil com caixa flexível. Eu só quero mostrar brevemente um pequeno trecho de código do que a solução parece sem caixa flexível. Isto é extremamente feio. Se você já tem uma margem negativa que é tão grande, você fez algo errado, e você provavelmente deve repensar o que você está fazendo com seu CSS. Então nós resolvemos esse problema de layup usando caixa flexível, e nós exploramos um pouco de y flex boxes, a escolha correta para este tipo de coisa. Mas ainda há algumas falhas e nossa solução. Por exemplo, se formos em frente e dermos uma olhada no que isso parece, se fizermos a tela menor, por exemplo, se for um dispositivo móvel, ela começa a parecer um pouco estranha. Quando fazemos a tela pequena o suficiente, ela ainda não responde. Vamos passar os próximos vídeos falando sobre design responsivo, o que é e como podemos usar a caixa flexível para tornar nossos designs responsivos. 12. Design responsivo : Então o nosso layout Santo Graal que construímos usando caixas flexíveis muito legal, mas ainda tem algumas falhas. Como eu mencionei, não é muito responsivo. Antes de avançarmos e tornarmos uma resposta, vamos falar um pouco sobre o que é o design responsivo e o que isso significa. O termo design responsivo foi cunhado por Ethan Marcotte em 2010. Eis o que ele tem a dizer sobre isso. Web design responsivo é a abordagem que sugere que o design e o desenvolvimento devem responder ao comportamento dos usuários e ao ambiente com base no tamanho da tela, plataforma e orientação. Agora, projetando dessa maneira com em I para o que o usuário precisa no momento específico, é algo que é específico para telas, certo? Se você está projetando para impressão, você não pode tornar as coisas responsivas. Projetar para telas é inerentemente diferente de projetar para impressão. Por causa desse conceito que Frank Camaro chama de fluxo. Fluxo é o conceito de que que a tela é mutável. Pode mudar com o tempo. Meu bom exemplo disso é um documento do Excel. Você pode reorganizar as colunas, você pode reorganizar a rosa assim por diante e assim por diante, enquanto com uma tabela impressa, você não pode originalmente as pessoas que estavam projetando para Web eram designers de impressão. É por isso que muitos dos primeiros projetos da Web nos anos noventa e no início dos dois milhares parecem muito muito boxe. Eles não redimensionam bem. Eles são construídos usando a tabela e assim por diante porque os designers estavam acostumados a projetar para impressão, então eles carregaram o mesmo tipo de conjunto de ferramentas que estavam trabalhando nele. Mas assim que as pessoas visualizavam a Web em tamanhos de tela diferentes, assim que começaram a ter tamanhos diferentes de monitores, assim que as pessoas começaram a olhar para as coisas em seus telefones, etc, etcetera, tornou-se bastante óbvio rapidamente que a forma como pensávamos em projetar para tela precisava mudar. Aqui está uma definição de uma página da Web de um artigo intitulado The Web Grain de Frank Camaro . Ah, página web é uma superfície naturalista de porções desconhecidas compostas por pequenos elementos invariáveis individuais de múltiplas vantagens é montado em um buraco legível. Agora há algumas coisas aqui que eu quero desempacotar individualmente. O 1º 1 é este conceito de Edgell é ISS. Se você olhar Se você pensar sobre uma página da Web e você pensar sobre o que forma suas páginas da Web, a resposta inicial direita é pensar nisso como um retângulo porque a janela do navegador é retangular. Mas, na realidade, é mais como uma superfície infinita que conecta gastar potencialmente, infinitamente em qualquer direção. Certo, porque você é capaz de rolar, você é capaz de rolar em direções diferentes. Pode até haver elementos de interatividade. Se o site é culpado, música, ou se ele é capaz de responder ao seu ambiente, eu diria que isso é parte da forma que ele é. Então esse é um elemento dessa definição. Outro elemento é este conceito de remontagem, ou de elementos que podem ser movidos e remontados para criar diferentes versões do mesmo furo. Vou mostrar-te um gráfico para te ajudar a entender isto. À esquerda. Aqui temos uma imagem da Mona Lisa. Podemos pensar na Mona Lisa como projetando para imprimir essa estática. Não muda à direita. Temos o que é chamado de marceneiro de David Hockney. Agora, isso é muito mais como projetar para a Web. Você pode ver que temos todos esses pequenos elementos individuais. Há muito movimento nesta peça em particular. Podemos imaginar que se tirássemos algumas dessas fotografias e as reorganizássemos em uma ordem ligeiramente diferente, ainda teríamos o mesmo contexto do todo. Isso é muito parecido com, você sabe, pensar fora de suas páginas da Web que você está projetando. Você pode pensar neles como pequenas peças individuais de um buraco maior que você pode reorganizar conforme necessário. Então vamos dar uma olhada nessa definição novamente na lista de borda, superfície de proporções desconhecidas. Então conversamos sobre a forma de um site e como não sabemos o quão grande ele é até revisá-lo . Composta por pequenoselementos invariáveis individuais, elementos invariáveis individuais, estes são taxas e vãos e assim por diante montados em um buraco legível. Agora, gerenciar esse tipo de remontagem é o que estamos fazendo quando fazemos design responsivo, porque não devemos pensar no design responsivo como gerenciar os pontos de interrupção de um site ou de gerenciar onde ele começa a parecer estranho. Onde o layout começa a quebrar assim por diante e assim por diante devemos pensar nisso em termos de remontagem. Estamos pegando os mesmos elementos que já temos e remontando-os em um todo diferente e legível. O trabalho de um designer ou desenvolvedor. Isto para estruturar a página que, a qualquer momento, não importa o tamanho da tela ou do dispositivo do usuário, o usuário está vendo as informações de que mais precisa. Uma das coisas bonitas sobre caixas flexíveis que torna a remontagem muito mais fácil gerenciar como veremos no próximo vídeo. Mas quero deixar-te com um último pensamento. O design responsivo não se trata apenas de garantir que o site tenha uma boa aparência em todos os tamanhos. Também se trata de antecipar as necessidades individuais do usuário. Estamos falando principalmente no contexto do design visual, mas isso estende coisas Teoh como a forma como o conteúdo do site é estruturado como deveria. As informações importantes devem estar mais próximas, a parte superior de um dispositivo móvel, porque é mais uma dor rolar para baixo. Deve ser como o site é fácil ler no leitor de tela também. Essa é outra parte do design responsivo. Assim por diante, os designers apenas se aproximando de um problema com através de uma lente criativa, a fim de encontrar uma solução bonita. Se este tópico é interessante para você, como é. Para mim, design responsivo é definitivamente uma das minhas coisas favoritas para falar. Eu realmente recomendo para artigos de Frank Camaro. O primeiro é intitulado O que as telas querem e o segundo é intitulado O grão da Web que eu vinculei a ambos nos materiais de recursos. 13. Implementando design responsivo: consultas de mídia: então discutimos a teoria por trás do design responsivo. Agora vamos falar sobre como realmente implementá-lo em nosso site usando algo chamado media queries. As consultas de mídia são o que nos permite tornar nossos sites adaptáveis para a inteligência de tela variável. Aqui está a sintaxe para consulta imediata que se aplica a telas com uma largura de 10 25 pixels. Faz sentido quando você lê-lo em voz alta para Hey, mídia, mídia, onde os tamanhos de tela mais de 10 25 pixels. Você pode ajustar o tamanho de consultas de mídia baseadas sem especificar que, portanto, tela. Mas geralmente é bom ser o mais específico possível. Você também pode especificar o significado de impressão quando alguém vai imprimir sua página e fala para leitores de tela, a fim de obter consultas de mídia para trabalhar em sua página, você tem que incluir algo que é chamado de tag meta Vieux Port. Isto é, este aqui. Isso é algo que você vai estar pesquisando muito no Google. Eu recomendo que você apenas mercado de livros. Incluí um link com mais informações sobre o que é o ataque do meta ponto de vista nos materiais de recursos . Então agora temos esse layout do Santo Graal que começa a parecer estranho quando a tela fica pequena o suficiente. Então, vamos adicionar uma consulta de mídia a ele. Então a primeira coisa que vou fazer é dizer que quero que isto seja uma consulta de imprensa. Quatro tamanhos de telefone, o tamanho do telefone que eu costumo começar com 7 68 pixels. Então eu vou dizer na tela de mídia, e nós vamos dizer que isso deve se aplicar a telas com menos de 768 pixels de largura. Então nós vamos dizer Max com tem que ser 7 68 p x e então nós temos nossa consulta de mídia. Podemos começar a ler algumas regras aqui. Eu acho que o primeiro 1 que nós vamos abordar é esta área principal aqui no centro porque nós queríamos alinhar como colunas em vez de sua uma linha, eu vou ter o tamanho de tela menor. Então o que vamos fazer é dizer que principal deve ser direção flexível. Chame ele de legal. Agora, quando eu atualizar a página e redimensionar isso uma vez que ela chega ao tamanho que ela troca para ser a direção da coluna. Isto é tão bom. Eu amo caixa flex especificamente, apenas gosto de fazer coisas como esta sem ter que se preocupar com quaisquer carros alegóricos ou como onde os elementos estão posicionados na página. Mas eu poderia apenas dizer flicks direção calma e pântano automaticamente. Eu amo tanto isso. Ok, a próxima coisa que precisamos trabalhar são as ordens que o contrato vem primeiro, e depois a barra lateral esquerda na barra lateral direita. Isso também é bem simples. Tudo o que temos que fazer é dizer, uh, uh, que a esquerda deve ser a fronteira um, uh, a direita faz com que ele fique. Ordem três como está agora, e vamos dizer que o Maine deve ser o pedido zero e pronto. Era tudo o que tínhamos que fazer. Eu adoro isso. Então, quais consultas de mídia você deve incluir em um projeto? Depende realmente do que o seu projeto precisa. É inútil tentar escrever uma consulta de mídia para todos os sites de dispositivos individuais, porque existem literalmente centenas de tamanhos de dispositivos diferentes lá fora. Meu conselho é começar a projetar para celular e, em seguida, colocar todos os seus estilos de desktop dentro de uma consulta de mídia desktop como geralmente uma boa idéia para começar com celular porque design é mais fácil como um processo aditivo do que como um subtraído. Significa que você deve começar com a versão mais básica do seu site, que geralmente será a versão móvel. Estamos muito perto de ser capazes de fazer o projeto. E o próximo vídeo. Vou rever algumas técnicas comuns de layout e tendências de design para ajudá-lo a projetar seu projeto. 14. Layout 101: Até agora, aprendemos como montar uma página. O que não falamos é sobre o que colocar na página e o que parece quando você colocá-lo lá. Isso é, Ah, tópico inteiro para um novo vídeo da Siri para que eu não vou cobrir todo o design do site neste vídeo. Mas vou rever alguns conceitos básicos que irão ajudá-lo enquanto você está trabalhando em seu projeto. A primeira coisa é considerar a legibilidade do seu site. Um erro que eu notei um monte de novos designers fazendo é que eles fazem o texto de largura total ou realmente, por que , ah, boa regra de ouro é tentar manter o seu texto tipo de er estreito e como blocos. Há um comprimento, e eu vou colocar no material de recursos que tem um jogo que você pode jogar que irá ajudá-lo a descobrir a proporção correta de altura da linha, também. Uh, comprimento de parágrafo para parágrafo com uma grande tendência e Web design agora é ter algo que é chamado de seção de herói, que é uma seção grande no topo da página que inclui uma imagem e algum texto grande . Eu tenho curadoria de algumas seleções de anúncios que eu vi no metrô, e eu quero que você perceba como todas essas imagens são vibrantes e como eles estão recebendo atenção . Veja também a tipografia. Tipografia é um daqueles detalhes que não parece super importante, mas quando é realmente bom, é uma daquelas coisas que você não deve notar em tudo. Outra coisa que muitos desses lados demonstram é realmente bom senso de ritmo como você rolar para baixo a página, algo que muitos sites fazem é que eles terão seções distintas separadas. Talvez gostaria de uma imagem e uma imagem, ou são várias imagens atraentes. Este tem um monte de produtos. Este tem alguns apelos à ação chamados A ação é uma área que tem, como um pequeno blurb. E, em seguida, em algum lugar você pode clicar para tomar medidas que irá vender o produto ou algo assim. Você também verá frequentemente algo assim. Este layout de três colunas, com três produtos diferentes ou três etapas que você pode executar ou algumas informações sobre um determinado produto. Obter o ritmo de uma página direito leva muito tempo na prática. Se é se você não está se sentindo bem sobre o ritmo de seus primeiros 2 sites. Isso está tudo bem. Isso realmente significa que você está em um bom lugar, que é que seu gosto está correndo à frente de onde suas habilidades estão. É um bom lugar para se estar, porque você sempre pode melhorar suas habilidades. Tudo isso está construindo sobre uma base realmente sólida de boa cor e boa tipografia. Escolher cores e tipos de letra são ambos cursos próprios. Mas eu quero apontar um par de recursos é que você não poderia visitar para ajudá-lo a aprender sobre as duas coisas. Este site que Amon agora é chamado de Color Claim. É por dois preconceitos Van Schneider. Ele projetou o Spotify, e ele tem o site que tem um monte de pares de cores realmente bons. Eu vou a este site sempre que eu preciso tomar as cores para um novo projeto e, em seguida, outro site que você iria encontrá-lo útil se você está olhando para cima bom. Tipografia é o tipo de local lobo. Este site só tem um monte de exemplos de sites com boa tipografia. Olhando para exemplos é uma das melhores maneiras de aprender a fazer esse tipo de coisa. E, claro, as fontes do Google são sempre um ótimo recurso. Como sempre, coloquei links para um monte desses sites nos materiais de recursos. No próximo vídeo, vou demonstrar como eu construiria um projeto como o que você vai construir. 15. Demonstração completa de construção: Finalmente está na hora do projeto. Que emocionante, mas eu vou estar fazendo neste vídeo é eu vou estar fazendo uma demonstração de um projeto como o que você vai fazer para este curso. Então o que eu vou fazer é decidir sobre um site que eu quero construir. Vou desenhá-lo. Vou armar para fora. Eu vou e então eu vou construí-lo com H dois CSS montanha. O site que eu vou construir vai ser sobre, eu acho que uma nave espacial. Vou mostrar-vos o meu processo de criação com todas as coisas que faço para preparar o local. E você pode pegar o que eu faço e adaptá-lo às suas necessidades enquanto constrói seu projeto. Como eu mencionei antes, eu realmente prefiro desenhar meus amigos de escuta. Eles não se distraem com as características de vários programas de temer fios, começando com a minha área de herói. Vai ter texto grande em um pequeno trabalho com botão que chamado Área de Ação que tem texto em um blurb, em seguida, uma seção que tem três colunas com uma imagem título e uma pequena descrição sob cada imagem para cada um desses, então uma área que tem vai ter uma imagem à esquerda e, em seguida, algum texto à direita , seguido por outro parágrafo curto e, em , seguida, por último, mas não menos importante, um rodapé com três colunas para texto e uma imagem. Outra coisa que isso está parecendo muito bom Até agora, outra coisa que eu gosto de fazer é eu gosto de quebrar isso e quantas seções vão ter Então um, 23 para cinco e, em seguida, por último, mas não menos importante, esse rodapé é nosso Sexta seção. Então eu também gosto de subdividir seções em dibs que eu acho que eu vou precisar na minha página. Então, há um toda essa seção de heróis, talvez este botão de mensagens de texto seja outro. Então nossa área de cada coluna vai ser uma div. E então cada uma das colunas terá sua própria div. A imagem e a imaginação seriam um div. Então isso instituiu também para que possamos compensá-lo dos lados um pouco. Ele precisa ser espaçado corretamente, e então cada uma dessas colunas será de propriedade. Se isso realmente me ajudar a ver o quê? A estrutura do meu HTML vai ficar muito feliz com isso agora Tudo o que resta é começar a trabalhar no revestimento. Então eu vou começar por fazer um diretório de site de espaçonave e meu diretório de caixa de flicks fazendo arquivo HTML índice fazer uma pasta de estilos e uma pasta de ativos e, em seguida, dentro de estilos que eu preciso fazer redefinir CSS em grande estilo. CSS. Então abra tudo em código. Eu também vou abrir o índice html e cromo. Hum, então eu preciso do meu html cinco caldeirão. Dê-lhe um título. Até agora , não parece nada. Isso é muito legal. Precisamos redefinir CSS aqui. Não se distraia com o quão rápido estou digitando aqui. Eu acelerei isso um pouco para que ele não tomou uma boa música quando você assisti-lo, ok, eu estou usando tela dividida para que eu possa olhar para o HTML e CSS ao mesmo tempo. Vou ligar os meus lençóis de estilo. Precisode Preciso um para reiniciar. E eu também preciso de outro link para esta folha de estilo em si. Quem vai ser o que tem todos os meus estilos? Legal. Ainda não se parece com nada Vamos adicionar algum html Vamos começar com uma tag de cabeçalho. Aqui vai ser onde o nosso herói está, e então vamos dizer H um parágrafo de naves espaciais com alguns aquecimentos e texto e, em seguida, uma extensão de botão de classe que eu vou estilizar mais tarde parece um botão em vez de apenas olhar com algum texto. Diga que é menina para aprender mais. Está bem, fixe. Então está lá. Não parece nada, mas sabemos que pode parecer algo, então vamos começar a estilizá-lo. Então, com o cabeçalho que é display flex, ele deve ter uma direção flexível da coluna e nós vamos dar-lhe uma altura masculina para que ele ocupa alguma área no topo da página. Nós também vamos dizer que eu quero um recipiente div em torno destes três elementos, mas eu tinha para obter isso. Eu já tenho um contêiner, então eu não preciso disso. Eu tenho este herói divisão classe que vai atender às minhas necessidades também ia dizer um centro de itens de linha e justificar o centro de conteúdo para que este é verticalmente e horizontalmente centrado naquela caixa. Vamos dizer que todos os ataques aqui devem ser do centro da aliança. Vamos dar um tamanho de fonte e esperar por este h um. Lá vamos nós. Maior não parece grande o suficiente, mas chegaremos a isso daqui a pouco. Há a margem fazendo um pouco maior. Vamos fazer todo o texto sobre o herói maior para que possamos ver isso também, e então apenas mexa com isso um pouco. Uma maneira de tornar seu texto mais legível é dar-lhe um destaque de 1.4 E. M. Esta faixa ajuda a espaçar o texto em um parágrafo para que seja mais fácil para o olho seguir de linha em linha. Como você faz isso, você só tem que ter certeza de que cada vez que você está mudando o tamanho da fonte, você tem Teoh definir a altura da linha bem, modo que apenas ajuda a tornar as coisas mais legíveis. Também vai torná-lo areia Sarah, porque eu acho que um pouco menos doloroso para olhar como eu estou projetando e vamos dar esta cor de fundo cabeçalho para que ele possa dar uma olhada em como ele parece não muito alto o suficiente. Dê a ele essa classe também. Então é isso que faz um pouco maior. Certo, isso é o que eu quero ter. Até agora, Vamos trabalhar na primeira seção, que é RCD A ou nossa chamada à ação. Vou comentar isso, dizendo o que cada seção termina, que podemos olhar para ela, uh, por conta própria. Legal. Então vamos ter uma história de oito que diz que este é um site sobre naves espaciais em um local real . Isso seria algo como entrar em contato conosco para saber mais sobre blá global. E então o botão diria Ligue agora ou algo assim e, em seguida, vinculado à página de contato. Mas desde que eu não tenho outra página que novamente um link para e vai deixá-lo assim Então eu estou colocando em meus estilos base do topo. Eu vou dizer que cada extensão deve ter uma exibição de bloco para que eu possa movê-los um pouco mais facilmente mais tarde. Legal. Então não é isso que eu quero que pareça até agora, mas será. Então nós temos que fazer um div CJ para colocar esses dois elementos de texto em cool. E então nós vamos dizer que topos et um C T um div costumava ter uma exibição de flex. Eu preciso dar um pouco de estofamento também, e depois dar um máximo com porque eu não quero. Eu vou dar-lhe uma largura de 80% do relatório dentro de um máximo com 1000 pixels, Eles receberam uma margem auto, que basicamente vai tomar todo o espaço disponível e, em seguida, tipo de centro esta div na página. Você pode ver como ele fez isso. Eu vou dizer que um espaço Wainaina entre nós, exceto que já que estamos fazendo isso ao longo do acesso principal , deve realmente ser conteúdo justificado. Sempre confundo aqueles dois quando tento fazer coisas assim. Legal. Então o ok está de um lado e o H três está do outro. Faça o H três um pouco maior, faça um pouco menor, ajuste a altura da linha. Como eu mencionei antes. Eu continuo fazendo isso. Estes dois não estão mesmo, então eu vou adicionar uma linha de linha de base ilhas que apenas os encerra na parte inferior do texto. Eu não mencionei que quando eu falei sobre um vinho da primeira vez Adam, mas é muito útil para casos como este quando você tem que texto itens e precisa alinhar o texto em si. Então essa é a seção feita. Vamos trabalhar nesta área de três colunas. Eu decidi que precisa que a seção exiba flex. Então nós temos esta área comum três. Vai ter um título e depois vai ter esses três pentes. Vamos começar com isso. Então nós temos a seção com um H três n ele. Aqui estão alguns fatos básicos sobre naves espaciais que eu posso soletrar legal e, em seguida, temos uma comparação de nosso contêiner coluna e, em seguida, cada coluna barra também precisa ser uma definição individual. Chamamos o terceiro, e então vamos usar essa coisa chamada lugar. Segure isso eu t. para pegar algumas imagens. Eles são apenas como imagens cinzentas de qualquer tamanho que você precisa. Vem como um elo. Eu não quero isso como um elo. Livre-se disso. Há isso. E então meu fato de nave espacial, que vai ser algo como eles geralmente são bem grandes, que é um bom fato sobre naves espaciais em então, outra coluna apenas direita no html para essas colunas. Isso é muito bom quando você nomeia suas aulas para nomeá-las descritivamente, , que você possa ver o que elas devem fazer. Eles fazem longas viagens no espaço. E então eu recebi uma cópia, essa coisa toda, e então apenas mudar o texto de novo. Então vamos brindar a este. Eles são acumulados por homens, mulheres e pessoas extremamente corajosos porque não sabemos o que os juízes alienígenas têm. Está bem, tão fixe. Então, isso parece assim. Até agora, precisamos adicionar algumas coisas aqui para que possamos ter certeza de que isso parece como aconteceu em nossa armação de arame. Primeiro, a primeira coisa que vamos fazer é mexer com isso. Eu acredito que nós vamos mexer com aquele H três para que possamos fazer com que pareça o que precisa . É três. Nós vamos novamente fazer a coisa onde nós dar-lhe uma largura e máximo com e margem para que ele não estende o todo com a página que está contida nesta área. Eu usei esta caixa tamanho propriedade um par de vezes também. Se você não sabe o que ele faz, eu recomendo procurá-lo. Tem a ver com o modelo de caixa CSS e como ele funciona. Adicionando um pouco de preenchimento. Apenas um espaço para fora da seção um pouco mais. Lá vamos nós. Isso parece melhor. E, em seguida, adicionar uma margem na parte superior da parte inferior do nosso cabeçalho para que possamos espaçar até um pouco mais. Certo, então nosso contêiner de coluna precisa ser flexível porque queremos alinhar esses três ao lado do outro. Vamos dar a cada uma a coisa toda e preenchimento e 50 pixels. Nós também vamos fazer a mesma coisa aqui em cima, que é que nós queremos que o recipiente específico seja de um menor com são um fator. oportunidade aqui é colocar todas essas regras em uma classe e, em seguida, aplicar essa classe definitiva. Isso precisa disso. Ok, então agora os elementos estavam alinhados, então nós vamos trabalhar nas colunas individuais íamos dizer que cada um deles deve ter uma largura máxima de 33% e um crescimento flexível de um. Vamos ter uma margem, e eles iam dizer-lhes para usarem o tamanho das caixas. E nós também vamos dizer que cada imagem e uma dessas caixas pequenas só deve ter um máximo com o 100% porque Ok. Sim, lá vamos nós. As imagens estavam transbordando mais cedo, então isso parece muito bom até agora. Em seguida, eu vou trabalhar fora fazendo o texto olhar. OK, então cada coluna, terceiro parágrafo terá um tamanho de fonte um pouco maior. Vai ser centrado. Legal, um pouco palavra. Seu tamanho de fonte será centralizado. Vamos dar um pouco de margem. E então eu acho que nós também vamos dar um pouco de uma linha diferente. Altura. Lá vamos nós. Isso parece melhor. Poderíamos parecer ainda melhor. Lá vamos nós. Legal. Então, há a nossa terceira seção. A próxima seção que temos que trabalhar é aquela com a imagem e o texto ao lado um do outro. Legal. Então nós vamos trabalhar na classe de seção para ter a metade dele é a imagem da outra metade é a imagem imagem e, em seguida, o texto, em vez disso, e nós vamos começar por escrever. Então nós vamos dizer que a seção de duas casas deve ser display flex direito na frente. Sim. Lá vai lá. Então vai ter que fazer isso. Um vai ser chamado de picareta. O outro será chamado de conteúdo. Então, há a imagem deste conteúdo que o recipiente pic ganhou. Em vez de realmente colocar a imagem dentro dela, vamos definir a imagem pick como a imagem de fundo que torna um pouco mais fácil gerenciar como ele re tamanhos em diferentes tamanhos de tela. Se você quiser ver uma descrição desse problema específico com uma imagem próxima texto e parece estranho quando o redimensionamento da tela é confira esse artigo, A Web é verde. Ok, então isso não parece nada como nós queríamos trabalhar agora. Portanto, queremos que o contêiner de seleção e o conteúdo tenham um crescimento flexível de um. E então nós também queremos que ambos tenham uma base flexível de 50%. Legal. Lá vamos nós. Então você pode ver que vai haver uma foto à esquerda e uma imagem em algum texto à direita. Faça a fonte um pouco maior, disse que a altura da linha e, em seguida, também definir algum preenchimento sobre o tive conteúdo. Lá vamos nós. Isso parece muito bom. Um pouco mais de estofamento. Aqui vamos nós. Também vamos dizer que ambos devem ter uma altura mínima de 200 pixels. Nós vamos dar-lhe um conteúdo apenas pé ou sobre os itens de linha em vez centro e, em seguida dizer-lhe para exibir Flex para que será centrado na coisa. E então vamos dar recipiente também uma cor de fundo de cinza para que possamos ver o que é quando realmente colocar uma imagem lá. Parece muito bom. E então nossa segunda a última seção é essa sinopse. Então você tem uma classe diferente de sinopse. Vamos colocar alguns minutos de verdade ou de lá. Então eu não tenho que, tipo, continuar tentando puxar para tipo, fora as partes do dedo que eu memorizei. Vamos, nosso parágrafo legal. E até agora isso parece ver, que está indo todo o caminho através da largura da página. Eu realmente não gosto desse olhar, então vamos mudar isso. Vamos usar o mesmo conjunto de regras que fazíamos antes das coisas. Nós vamos torná-lo ainda um pouco mais estreito por padrão apenas para que ele se destaca um pouco mais marcha auto acariciando D e, em seguida, tamanho caixa. Então o nosso parágrafo vamos torná-lo um pouco maior e você colocar uma altura de linha, ver como fica. Ok, isso parece muito bom. Mas vamos torná-lo ainda maior. Só que ele se destaca mais e, em seguida, até o estofamento. Incrível. E então tudo o que resta a fazer é o rodapé. Vamos reutilizar algumas dessas aulas que tínhamos usado antes. Então essa coluna, classe de contêiner e, em seguida, essa coluna , terceira classe Só porque , você sabe, nós sabemos que nós os usamos antes e nós sabemos que eles olham do jeito que nós queremos que eles coloquem alguns, Tipo, manequim mandando mensagens aqui. Lista de naves espaciais notadas inclui o William Fall ele, o USS Enterprise e o wild card e muitos mais. E a nossa próxima coluna. Vamos ter outro blurb sobre viagens espaciais. Inovações legais do século 22. Claramente, este é um site do futuro. Se eu puder digitar e, em seguida, por último, mas não menos importante vamos incluir uma pequena imagem aqui, e vamos usar este lugar. Segure que eu t imagem coisa de novo. Um dos benefícios de usar isso é que você pode recitar essas imagens tipo de em tempo real apenas, mas alterando os números na URL. Então decidi que não gostava muito disso. Olha, eles vão mudar. Que tamanho de imagens. Está bem, está bem. Está bem. Lá vamos nós. Isso é o que parece certo. E então uma coisa que eu gosto de fazer é que eu gosto de fazer o rodapé tipo da coisa mais pesada no site. Então ele vai. Então o ritmo flui, baixos, vamos fazer isso ter um fundo preto, e então vamos dar um pouco de texto branco vamos fazer isso ter um fundo preto, e então vamos dar um pouco de texto branco. Ok, então essa é a estrutura da nossa página. Parece muito bom até agora. Estou muito feliz com isso. O que eu vou fazer é pegar isso e depois adicionar cores, fontes e imagens, e então vamos nos reunir novamente e eu vou mostrar a vocês o que eu inventei. Está bem. Como você pode ver, aqui está a nossa versão final do site. Escolhi algumas cores, escolhi algumas imagens. Temos uma imagem boa e ousada no topo. As fontes e eu estou usando são todos de fundos do Google. Eu escolhi um azul escuro agradável acentuado por um par de cores mais quentes para a paleta de cores A Z você pode ver que ele está começando a realmente se parecer com um site. Nós temos alguns padrões de fundo aqui, assim por diante e assim por diante, como eu mencionei antes, se você estiver interessado em aprender como boas cores e fontes para o seu site, você deve verificar as vistas no recurso materiais para ajudá-lo através desse processo . Uma ondulação. Eu tenho o código do código atualizado com todos os estilos atualizados. Isso também estará no material de recurso, então você pode dar uma olhada nele. Basicamente, eu fiz a coisa fator re que eu mencionei anteriormente, onde eu tomei todas as partes do código que se parecia com isso e, em seguida, convenceu que possui dedo do pé uma classe e, em seguida, continuou aplicando. Aquela aula vomitou. Esse é o conceito que é chamado de classe ajudante. Realmente ajuda. É realmente uma daquelas coisas que realmente ajuda módulo surgir seu CSS que você pode reutilizar partes dele sem ter que digitar tudo de novo, que é algo para se esforçar. E, no geral, estou muito feliz com a minha visão. Estou muito animado com isso, e também estou animado para ver o que você vem acima com em seu projeto. E aí está, um site da Internet junto com caixa flexível. Como sempre, o código para esta compilação está nos materiais de recursos, e agora é a sua vez. Pense em um fio de idéia, emoldurá-lo e, em seguida, construir o HTML e CSS para ele. 16. Outro: Bem, você chegou ao final do curso e esta Siri nós revisamos uma configuração de ferramentas para HTML e CSS Basics. O que caixa flexível é, como usar propriedades sexuais individuais um pouco sobre o que é Web design responsivo e como aplicar seus conceitos e até mesmo falou um pouco sobre design de layout antes de fazer o seu projeto. Estou tão feliz que você veio comigo neste passeio e tem algo para mostrar para ele. Só quero deixar você com um pensamento. Aprender CSS leva tempo. Não é razoável esperar que você mesmo entenda todos os CSS de uma só vez. É uma daquelas coisas que não importa quanto tempo você está fazendo isso, você ainda é um pouco de um processo de tentativa e erro. Você ainda tem que violar nossas coisas tipo de propriedades diferentes, assim por diante e assim por diante. Você gastará muito tempo em suas ferramentas de desenvolvedor tentando fazer as coisas funcionarem. Tudo bem, isso é normal. Meu conselho é, se você realmente quer obter essas habilidades para baixo, é para Primeiro de tudo, continuar jogando Flex Box, Brockie e segundo de tudo, indo fazer três ou quatro projetos como o que você acabou de fazer que irá realmente cimentar o conhecimento em sua mente, e ele vai ser capaz de ver como você melhorar de projeto para projeto. Muito obrigado por assistir. Foi um prazer.