CSS 301: design de web responsivo

1. Bem-vindo ao CSS 301: design responsivo de web responsivo: Bem-vindo ao web design responsivo, CSS 301. Este é o passo final em sua jornada CSS, onde você aprenderá sobre o web design responsivo e como produzir um site com ótima aparência em todos os dispositivos. Neste curso, vamos tomar CSS básico e alterá-lo com base no tamanho do dispositivo, que é basicamente aplicar uma pequena quantidade de lógica aos nossos belos sites usando CSS. Então, você sabe, quando um site tem uma barra lateral na exibição da área de trabalho, mas então você encolhe seu navegador e, de repente, as coisas desaparecem e os menus aparecem nas coisas se escondem. Isso é um web design responsivo. É o que vamos fazer neste curso. Olá, sou Caleb Italiano. Faço sites há 20 anos. Tenho ensinado codificação online há cerca de oito anos. E hoje eu vou estar instruindo você através do CSS 301, web design responsivo. Se você quiser fazer sites bonitos que ficam bem em seu desktop, laptops, TVs, tablets, telefones, praticamente qualquer dispositivo. Então este curso é absolutamente para você. Bem-vindo ao CSS3 u1 web design responsivo. E estou ansioso para vê-lo nessa primeira lição. 2. O elemento viewport: Tudo bem, para começar com web design responsivo, precisamos realmente ter certeza de que temos um elemento meta dentro de nossa página HTML. Então eu vou apenas criar um novo arquivo aqui e mudar de texto simples para HTML. E estou usando o código VS. Este é apenas o editor de texto que escolhi. E se eu fizer HTML dois pontos cinco, e eu vou fazer isso apenas um pouco maior. Se eu fizer HTML dois-pontos cinco, vejo este m na abreviatura. Eu posso então bater tabulação e ele me dá tudo o que eu preciso. Ele me dá a linguagem HTML, o que é bom. Ele me dá UTF-8 para codificação de caracteres, o que permite que você tenha coisas como emojis em sua página. E então temos essa linha, e esta é a mais importante. O meta name é igual a viewport. O conteúdo é igual à largura, é igual à largura do dispositivo e a escala inicial é 1. Isso é importante. Queremos manter isso exatamente do jeito que vemos. E o que isso faz é permitir que nosso navegador diga, ok, então esta vai ser uma página responsiva. Então, se você tiver alguma página em que você está trabalhando, qualquer site em que você está trabalhando e você deseja torná-los responsivos. Certifique-se de adicionar isso à seção principal de sua página em cada elemento HTML ou elemento, mas cada HTML, certifique-se de que você tem isso em cada arquivo HTML ponto que você tem. E isso vai garantir que seu CSS age da maneira que queremos que ele aja com web design responsivo. 3. Sintaxe de consulta de mídia: Ok, vamos dar uma olhada na sintaxe de consulta de mídia. Então o que eu posso fazer aqui é que podemos fazer isso em um estilo interno com o atributo de estilo ou não atribuir o elemento. Ou podemos fazer isso dentro do CSS externo. Eu vou fazer isso dentro deste documento para que você possa ver exatamente o que eu estou fazendo com o HTML e CSS lado a lado. Então tipicamente nós escolheríamos um elemento como o nosso corpo. E poderíamos dizer que a cor de fundo vai ser azul. E vamos salvar esta página como index.html. E o meu sempre muda aqui. Vamos mudá-lo de volta para HTML normal, não para modelos do Django. E assim isso vai nos dar, o corpo, elemento corpo vai ter uma cor de fundo de azul, k. Isso vai ser feio, mas isso vai ser uma boa demonstração. Então vamos para um navegador. Só estou usando o Chrome aqui. Posso ir até Arquivo, Abrir Arquivo, selecionar meu index.html. Temos um fundo azul K. Isso é muito feio, mas ele entende o ponto por aqui. Agora o que posso fazer é clicar com o botão direito do mouse inspecionar. E seu painel pode parecer um pouco diferente do meu. Acho que o meu é apenas o modo escuro. E esse será o meu cenário em algum lugar. Configurações. Configurações, configurações. Sim, tema, escuro, luz requer uma recarga. Eu não quero recarregar, mas sim, você pode mudá-lo lá se quiser. Então o que isso está fazendo é nos permitir clicar neste pequeno botão aqui, que alterna a barra de ferramentas do dispositivo. E isso vai mudar a largura da nossa página. E isso torna nossa página responsiva. Então, é muito parecido com encolher seu navegador para a esquerda e para a direita, mas isso realmente faz isso corretamente, então fica um pouco mais preciso dessa maneira. Nós também podemos dizer responsivo, mas também hey, vamos tentar como um iPhone ou um iPad Pro ou coisas assim. E vai dimensioná-lo automaticamente para nós. Ou podemos fazer apenas responsivo e uma largura regular aqui. Então, a maioria das coisas se baseia. web design mais responsivo funciona com a largura do seu dispositivo, não com a altura. E vamos em frente e redefinir isso para 100%. Isso é enorme e vamos fazer isso menor. Então, tudo bem, nada acontece aqui. Web design responsivo é quando dizemos que quando essa largura do dispositivo é uma certa largura, maior do que, menor ou entre dois tamanhos, mudar essa cor de fundo. E assim ele se parece muito com isso em suportes de mídia, largura máxima. E então, que largura queremos dar? Digamos que 640 pixels. E então também podemos dizer aqui. Então, estamos embrulhando uma consulta de mídia em torno de mais CSS. Faça esse corpo ter uma cor de fundo de vermelho. E assim com 640 pixels e abaixo, porque ele vai ter uma largura máxima, nós aprendemos sobre esse NCSS para bem 1640 pixels e abaixo vai mudar essa cor de fundo para vermelho. Então vamos em frente e atualizar esta página e responsivo. Vamos em frente e muda para 641. Nada, 640 fica vermelho. E podemos ver quando eu arrasto para cá. Este é um bom exemplo. É um exemplo feio, mas é realmente um bom exemplo de web design responsivo. Então vamos dar uma olhada nessa sintaxe mais uma vez. Eu tenho o meu estilo regular aqui em cima. O que eu normalmente quero acontecer, pode estar no corpo, pode ser nas aulas, ideias. Você estaria selecionando Por Atributos, o que quiser. É o seu CSS normal que vai aqui em cima. E, em seguida, abaixo, fazemos colchetes de mídia, largura máxima, largura que você deseja, colchetes, e, em seguida, seu CSS regular aqui e, em seguida, terminar essa chave. E nós podemos realmente colapsar isso também. Então, parece um pouco mais com isso. E nós apenas colocamos nosso CSS ou CSS regular dentro de lá. 4. O que é o celular primeiro móvel?: Certo, vamos dar uma olhada no que é o celular primeiro. Você vê um monte de gente dizendo móvel primeiro. Bem, bem primeiro, o que é móvel primeiro? Mobile primeiro significa que você estava fazendo um site para, para ficar ótimo em seu telefone primeiro. Então o que eu fiz aqui foi definir isso baseado em absolutamente nenhuma regra. E sabemos que se não houver nenhuma regra de consulta de mídia que esse estilo aqui será aplicado. Cobertores sobre cada tipo de dispositivo, cada largura de dispositivo. E então o que eu disse foi, hey, na verdade, quando essa largura máxima é 640 pixels ou abaixo, isso é o que a largura máxima significa. Então mude isso. Mas Mobile First é a idéia de fazer isso oposto. Então, o celular primeiro diria: “Ei, deixe o fundo do corpo vermelho. E, em seguida, com uma largura mínima de 640 pixels, altere essa cor de fundo para azul. E então tudo o que estamos fazendo aqui é revertê-lo. Estamos sempre a dizer fazeres essa cor de fundo vermelha. E, em seguida, em uma largura mínima e acima 640 pixels e acima mudar essa cor de fundo para azul. Então, do último vídeo para este vídeo, eu vou atualizar esta página e nós vamos ver que nada realmente acontece. Então vamos fazer isso maior. E fica azul. E então nós o tornamos menor, menor, menor. E quando chegarmos ao 640, você pode ver que fica vermelho. E isso faz exatamente a mesma coisa que fizemos antes. Só que trocamos onde estamos escrevendo nossos códigos estavam dizendo, hey, tudo aqui precisa ser para celular primeiro. E então, em uma largura mínima de um para cima, nós realmente queremos que essa cor mude. E agora estamos escrevendo código para telefones primeiro e ajustando para uma área de trabalho. Enquanto que no último vídeo o que fizemos foi escrever código para um desktop ou tablet ou algo grande. E então nós dissemos, hey, na verdade, quando esse mínimo, quando a largura da página é pequena o suficiente, mude-a. E então um é desktop primeiro, um é móvel primeiro, e este é móvel primeiro. Muitas vezes você vai ver as pessoas dizendo que o celular primeiro é melhor. Honestamente, você vai ver mais pessoas escrevendo desktop primeiro css mais do que você está indo para escrever um, mais do que você está indo para ver as pessoas escrevendo mobile first CSS. 5. Imagens responsivas: Vamos dar uma olhada em como fazer uma imagem responsiva, porque por padrão eles realmente não são tão responsivos. E então vamos em frente e abrir uma nova guia e vamos para um Splash.com. E vamos procurar algum tipo de pintura. Claro, bom o suficiente. O que vou fazer aqui é clicar com o botão direito do mouse. Copie esta imagem. Não, copie o endereço da imagem, não a imagem, mas o endereço da imagem. E então eu posso abrir isso no meu navegador. E nós temos essa imagem. Legal, isso funciona, isso é o que eu quero em nosso HTML. Vamos em frente e adicionar uma imagem. Então não temos imagem aqui. Fonte IMG vai ser o que quer que a URL é e que, tudo, isso, tudo vai ser pintura. Quando volto para a minha página aqui, vejo esta imagem. E essa imagem realmente não é responsiva até que a página fique muito grande e então ela se torne responsiva. Isso nem sempre é o que queremos com web design responsivo, na maioria das vezes, o que queremos é dizer que esta imagem será como 50% da largura o tempo todo. E isso significa que mesmo agora, 50%, bem, claramente não é 50, 50% por cento estaria em algum lugar por aqui. Isso ainda deve ser encolhendo, mas não é, ele não encolhe até que ele realmente atinja a largura máxima da janela de exibição. Mesmo assim, ele realmente não reconhece que eles deveriam ser uma fronteira, não uma fronteira, mas sim preenchimento ou margem ao redor do corpo no lado direito lá. Então as coisas estão ficando um pouco peculiares aqui. E nós podemos, nós podemos fazer isso funcionar melhor com uma imagem responsiva. Então o que podemos fazer é em vez de mudar nosso corpo, podemos mudar nosso IMG. E podemos dar a isso uma largura de, digamos, 100% e uma altura de auto. E isso é apenas indo para Auto calcular a altura para nós. Agora não queríamos 100%, queríamos 50%. E vamos apenas fazer essa atualização maior. E você pode ver que a imagem ficou menor e ela permanece em 50, 50% está bem no meio daquele X, eu acredito. Então, se formos direto para baixo, podemos ver que isso é 50% e ele vai ficar lá, não importa o tamanho das páginas, ele vai ficar lá. E então isso é responsivo. Agora o que podemos fazer é tornar isso ainda mais responsivo. E podemos dizer, quando a página tem uma largura máxima de 640 pixels, podemos torná-la 100% de largura. Agora, eu posso ter perdido você lá. Então, na última lição, falamos sobre desenvolvimento web responsivo primeiro, mobile-first. Vamos misturar e combinar estes um pouco. Então, agora vamos fazer a mídia. Largura máxima, 640 pixels. Então é muito parecido com isso, mas exatamente o oposto. Então a sintaxe é a mesma, mas isso é dizer de 640 para cima. Este é o ditado de 640 para baixo. Selecione essa imagem e dê a ela uma largura de 100%. Agora, porque sabemos como o CSS funciona de cima para baixo, podemos dizer, selecionar essa imagem, dar-lhe uma largura de 50%, dar-lhe uma altura automática, fechar essa imagem. Não precisamos especificar altura automática aqui porque tudo o que estamos fazendo é substituir essa largura aqui. Isso é tudo o que estamos substituindo vai automaticamente herdar a altura de auto. Então é muito parecido com escrever. Altura é Auto. Mas nosso navegador vai herdar isso de qualquer maneira do código na linha 13 aqui, então não precisamos escrever isso. Vamos em frente e salvar, atualizar e olhar para isso. Sempre que a página vai Ler, a imagem obtém largura total. Então 505050, cinquenta e zero cem por cento, todo o caminho para baixo. E agora temos uma imagem realmente responsiva. 6. Enfeite responsivo: Bem-vinda de volta. Vamos falar sobre incorporações responsivas. Então, neste vídeo, vamos fazer um vídeo, um iframe, e vamos torná-lo responsivo. Agora é o seguinte, é quando vamos ao Youtube e clicamos em Compartilhar e obtemos o código de incorporação. Isso não é responsivo por padrão. Então, se eu voltar para a nossa página e vamos jogá-la debaixo da nossa imagem aqui, HR. E vamos colar isso. Veremos que tem uma largura, um codificado com um 5-6, altura codificada de 315. E então um monte de outras coisas lá que nós realmente não precisamos saber. O SRC é o principal aqui. Este é o nosso vídeo do YouTube. Então vamos em frente e atualizar esta página e vamos rolar para baixo. E temos este vídeo. Agora vamos dizer que queremos que isso realmente seja largura total. O que podemos fazer isso dizendo largura é igual a 100%, mas então temos que descobrir um 100%. Que altura é essa? Qual é a relação de aspecto? Todo o tempo que temos que descobrir essa relação de aspecto sem parar. E não podemos fazer isso. Mas o que podemos fazer é escrever uma matemática inteligente para fazer isso por nós. E então eu vou apertar isso para que possamos ver todos nós em uma linha. Agora mova isso para cima. Iframe vai acima da imagem e o RH vai para o iframe. Então vamos em frente e minimizá-los. Agora o que queremos fazer aqui, e isso é um pouco de um truque CSS, é que queremos envolver um contêiner em torno disso. E então eu costumo chamá-lo de contêiner e contêiner iframe, algo assim. E realmente só precisamos ser capazes de selecionar este contêiner e selecionar o iframe ao mesmo tempo. E então o que queremos fazer aqui é pegar esse contêiner e queremos dar a ele uma posição relativa e esconder o transbordamento. Aprendemos sobre posição relativa e escondendo overflow e largura, o que vamos usar em seguida, todos NCSS, um-para-um NCSS para O1. Então você já deve estar familiarizado com isso. Então vamos em frente e pegar este contêiner. E vamos dizer que a posição é relativa e o estouro vai ser escondido desta forma, nós simplesmente não mostramos nada que está fora desta caixa. Vamos dar a isso uma largura de 100%. Esta vai ser toda a largura do nosso iframe. Então, em vez de dizer, “Ei, respeito a com o 560, eventualmente nós vamos dizer fazer isso uma largura de 100% da nossa página. Agora é aqui que ficamos um pouco complicados. Nós vamos dizer estofamento, top é 50, não, 56 ponto 2-5 por cento. E isso vai ficar um pouco estranho. E a razão pela qual estamos fazendo isso é porque se dissermos 16 por 9, então se formos 16 divididos por 9, não, isso é o contrário. Então, se dissermos 16 por nove, é suposto ser nove dividido por 16, obtemos 0,5625. Ou se multiplicarmos isso por 100, teremos 56,25. E então isso é apenas um pouco de matemática básica bem ali. Então nós pegamos nove divididos por 16, essa é a nossa proporção, ou 16 por nove. E então ele nos deu um decimal e então nós dissemos vezes por um 100 para nos dar o número real. Esta é a nossa percentagem. Isso vai nos dar um estofamento de 56,25%. Agora o que queremos fazer é selecionar este iframe, e nem sempre temos acesso a este iframe. Então, não vamos dar uma classe ou um ID ou qualquer coisa, mas digamos que qualquer contêiner que tenha um I-Frame dentro dele. Poderíamos dizer posição absoluta, topo 0, esquerda 0, inferior 0, direita 0. E isso só vai esticar todo o caminho. Este, que também tem estofamento extra em cima da cabeça como um 16 por nove estofamento no topo. Apenas para uma boa medida, vamos em frente e dar a isso uma largura de 100% e uma altura de 100%. Tecnicamente, isso não vai ser necessário, mas não faz mal tê-lo lá dentro. Vamos salvar esta página e voltar ao Google. E quando atualizarmos, não só o iframe estará no topo, mas ocupará toda a largura desta página. Então, vamos atualizar e descobrir o que ele está fazendo aqui. Olha para este vídeo enorme. E então nós podemos fazer isso responsivo fazendo este Olá, Olá, Olá, Olá responsivo, incorporar, vídeo do YouTube responsivo, o que é muito legal. Então, na verdade, o que isso está fazendo aqui é criar um pouco de uma demonstração agradável. Então nós tivemos um site de desktop feio agora. Mas se deslocarmos para baixo até a visualização móvel onde o fundo fica vermelho, as coisas começam a clicar juntas e começa a parecer um pouco mais agradável. E isso é exatamente o que queríamos fazer. Queremos que o layout do nosso site mude, na maior parte com alguns bits e bobs aqui dentro. Queremos que essas coisas mudem com base na largura do seu dispositivo. 7. Várias consultas de mídia de mídia: Certo, vamos dar uma olhada em várias consultas de mídia. Então vamos em frente e criar uma nova caixa. E ele vai ser chamado de caixa e nós não vamos fazer nada com ele ainda. E HTML interno, vamos criar caixa e aqui me dá este m abreviação, slam essa tecla tab e temos uma caixa. Então vamos dizer que essa largura vai ser 400 pixels, a altura vai ser 400 pixels. Haverá uma borda de dez pixels, margem preta sólida, margem, margem, margem, margem de 50 pixels e auto. Então é uma linha que no centro. E nós vamos mudar a cor de fundo, enorme mudança de cor de fundo, esporte, e isso é chato. Vamos mudar o raio da fronteira. E ele vai ter um raio limite de nada por padrão. Então agora o que podemos fazer é escrever essas consultas de mídia, uma para largura mínima, uma da largura máxima. Podemos juntar estes. Podemos dizer adicionar mídia. Digamos uma largura máxima de cem, dez centos pixels e uma largura mínima de, digamos, 700 pixels. E então podemos selecionar essa caixa novamente. E podemos mudar esse raio de fronteira para 50%. Então isso vai transformar essa caixa em um círculo sempre que a largura estiver entre, não 100, mas vamos fazer 11000 pixels e uma largura mínima de 700. Então, entre setecentos e dez centos pixels, isso vai ser um círculo. Todas as outras vezes. Isto não vai ter esse raio de fronteira. Então vai parecer um quadrado. Vamos atualizar, abrir o Chrome, atualizar nossa página. E temos esta caixa. Então vamos fazer isso. Então estamos no 537 agora. Se formos até 700 e rolar lentamente até 700, vamos ver sim, 700 mudanças para um círculo. E então ele vai até 1000. E então uma vez que atinge 1000 vai mudar de 1000 para um quadrado. Então isso está dizendo que a qualquer momento que essa largura responsiva aqui é entre 1700, faça um círculo. Agora, novamente, este é um exemplo feio, mas este é um exemplo poderoso para mostrar que você pode usar max-width e min-width juntos. 8. Como fazer um layout responsivo: Certo, vamos trabalhar com algo real. Precisamos criar algum tipo de layout e torná-lo responsivo porque o que temos feito até agora é divertido. É legal, mas não é realmente tudo o que aplicável em peças individuais. O que queremos fazer agora é criar algum tipo de layout flexbox e basicamente mudá-lo para que, quando é visto de um telefone, ele realmente se encaixe bem. Então vamos em frente e criar um novo arquivo. Vamos chamar esse ponto de flexbox HTML. E nós mudamos de um modelo Django para um modelo HTML. E vamos fazer HTML dois pontos cinco. E isso nos dá isso. Isso é exatamente o que queremos. E vamos em frente e criar algum tipo de layout HTML aqui. Então nós temos algum tipo de contêiner chamado nossa grade ou nosso layout número de layout layout layout layout layout porque ele vai ser um ID. E digamos que temos uma identificação para navegação NAV aqui. Outro ID para barra lateral, Barra lateral aqui e outro ID para conteúdo, conteúdo aqui. Agora isso agora vai parecer com qualquer coisa neste momento porque nós não aplicamos nenhum CSS. Vamos em frente e aplicar alguns CSS. Vamos usar flexbox. Você poderia, alternativamente, em vez de usar o flexbox, usar o Grid também. Vou usar flexbox porque é um pouco mais popular nos dias de hoje. Mas a grade também é uma boa prática. Então, se você está procurando uma boa prática, eu diria, hey, tente isso com flexbox e depois deste vídeo, também tente com grade. Então, vamos em frente e selecionar esse layout. E vamos dizer que vai ser display flex. E vamos querer ter a certeza de que isto acabe. E também aprendemos sobre flexbox e CSS 201. Então você deve estar familiarizado com isso, mas vou devagar e caso você não esteja. Flex rap, vamos dizer “embrulhe”. E o que isso vai fazer é em vez de fazer todos esses lado a lado, digamos, hey, quando esses elementos são muito largos para a página, empurrá-los para baixo em uma nova linha. E então vamos passar por aqui, reutilizar esta aba Arquivo, Abrir Arquivo, flexbox dot HTML, e não vemos nada útil. No entanto, estes são lado a lado, por isso está realmente a fazer algo útil. É que ainda não chegamos lá. Vamos em frente e selecionar esse nav pelo seu ID. Agora, vamos dar-lhe uma base flexível de 100%. Vamos dar a isto uma fronteira. No fundo. Um pixel sólido, adicionar um OCC, ver algo assim. Isso pode não ser escuro o suficiente. Um pouco mais escuro. E vamos refrescar. Ok, então a navegação é lá em cima. É que está batendo as coisas agora porque, como dissemos, base flexível é 100%. Vamos fazer essa barra lateral. Vamos dar a essa largura de 20%. Então vamos em frente e selecionar a barra lateral usando flexbox. E nós, novamente, nós não usamos largura sua base flexível ervas daninhas. Então base flexível vai ser 20% e borda direita vai ser um pixel sólido. Vamos fazer com que corresponda à navegação AAAA. Certo, e isso está se dando bem. E então o conteúdo só vai expandir o resto da página. Na verdade, ele não está indo para por padrão. Mas podemos fazer com que expanda o resto. Então vamos em frente e selecionar conteúdo e dar a isso uma base flexível de 100% menos 20%. Então ocupa 100% da página, não 100. Queremos 80% lá dentro. E só para sabermos onde estamos trabalhando para delimitar um pixel, vermelho sólido. E você já me viu fazer esse pixel muitas vezes. Oh, ok, então isso realmente se depara com uma coisa interessante. Isso bateu em uma nova linha. O que nos esquecemos de fazer, e aprendemos sobre isso e CSS para U1 também foi vamos selecionar tudo. E digamos que o tamanho da caixa precisa ser border-box. E isso vai colocá-lo de volta lá. E o que isso fez foi dizer: “ Ei, tem essa caixa vermelha. Tem uma largura de 80% mais um pixel em cada lado. Para aquela fronteira. O que a caixa de fronteira fez? Caixa-border-box de tamanho. Dizia, na verdade, você tem 80%, incluindo essa fronteira. Então, com a borda é 80% e, em seguida, apenas uma espécie de colidiu com ele lá porque este é o layout de precisão de pixel. É agora que está a retocar isto um pouco. Digamos que o corpo precisa ser porque eu só quero que isso pareça um pouco decente. O corpo precisa ter um preenchimento de 0, margem de 0. E a navegação deve ter um preenchimento de 20%. Não, não, 20 pixels, não 20%. Lá vamos nós. Veja a mesma coisa com a barra lateral e veja como isso parece. Olhando muito bem e eles vêem a mesma coisa com o conteúdo. Ok, então nós temos algum tipo de layout lá. Vamos dar a essa barra lateral e ao conteúdo uma borda inferior. Então barra lateral e conteúdo. E tudo o que eu fiz lá foi em VS Code, eu cliquei em um lugar e então eu fiz, fiz Command clique em outro. Acredito no Windows. É você clicar em um lugar e, em seguida, é alt click em outro lugar. E podemos fazer fronteira. No fundo. Um pixel sólido AAA. Está bem, fixe. Então nós temos algum tipo de layout aqui. Quando fizermos isso responsivo. Vai funcionar, sim , não vai funcionar do jeito que esperamos. Não está lá, fica um pouco estranho e isso é completamente esperado. Mas o que podemos fazer dizer em, digamos 640 pixels, e podemos fazer essa barra lateral realmente abranger toda a largura e derrubar esse conteúdo apenas um pouco. E assim podemos dizer na Media, e eu vou mover isso para cima. Então você pode ver que na minha tela na largura máxima de mídia 640 pixels, vamos selecionar essa barra lateral. E vamos dar-lhe uma base flexível de 100%. E vamos remover essa taxa de fronteira. A taxa de fronteira vai ser 0. E vamos também pegar essa seção de conteúdo que tem uma base flexível atualmente de 80% e dar-lhe uma base flexível de 100 também. Então, ele vai derrubá-lo. E então o que podemos fazer aqui, porque este é basicamente o mesmo código. Vamos selecionar os dois. E vamos fazer isso um pouco maior, atualizar. E quando eu faço isso um pouco menor, podemos vê-lo deslizar para baixo e você pode ver como ele bate lá em sua própria linha pequena. Isso é muito bom, que é desenvolvimento web responsivo em poucas palavras. Agora podemos ir ainda mais longe com isso. Vamos em frente e tornar isso um pouco mais ampliado. Agora o que poderíamos fazer com isso é quando chegamos a, digamos 480 é bom e eu digo 480 pixels, isso está ficando um pouco de um tamanho de dispositivo menor em 470 cinco é na verdade o vice ISIL usará, usará isso. Vamos esconder a barra lateral. Então agora podemos criar outra media query com largura máxima de mídia 475 pixels. Vamos pegar apenas essa barra lateral e não mostrar nenhum. Vamos escondê-lo completamente. E então eu vou atualizar a página onde ele para 80 agora. E se eu fosse clicar aqui e apenas seta para baixo, seta para baixo, seta para baixo, seta para baixo, seta para baixo. E se esconde. Você pode ver que eu estou trocando entre 476 e 75, e ele está se escondendo para mim, está fazendo exatamente o que queríamos fazer. Agora que meu amigo é um desenvolvimento web responsivo. Em poucas palavras, isso é realmente tudo o que é, é quando você faz uma página menor ou maior, você vai esconder algo e você vai basicamente fazer algo, ocupar mais espaço, menos espaço, ou escondê-la, ou possivelmente mostrá-lo se ele só deve aparecer no celular. 9. Seu projeto: Seu projeto será com flexbox ou grid. Você pode usar qualquer um, o que você estiver mais familiarizado com. O que eu gostaria que você fizesse é meio que sair dessa última lição. Mas eu quero que você crie algum tipo de layout de página. Use a grade de flexbox ou CSS, qual for, novamente, mais uma vez, você estiver mais familiarizado. E, em seguida, certifique-se de que você tem uma navegação. Você tem uma barra lateral e tem algum conteúdo lá dentro. E, em seguida, quando você torna sua página menor em largura quando você usa desenvolvimento web responsivo ou essa alternância responsiva em seu navegador. Este botão aqui, quando você usa isso e você faz sua página maior ou menor, eu quero que você realmente faça isso para que eu fique maior. Então isso ocupa não 20%, mas um 100% e, em seguida, esconder algo. Basicamente, eu só quero que você jogue com desenvolvimento web responsivo, mas usar este layout como um exemplo é um exemplo muito, muito bom, muito bom uso de desenvolvimento web responsivo. Então vá em frente e dê uma chance e sinta-se livre para fazer referência a qualquer meu código aqui. Você pode pausar este vídeo em qualquer momento e você pode dar uma olhada no que eu escrevi. Vá em frente e dê uma chance. Divirta-se com ele também, e não precisa ser colocado exatamente da mesma maneira que eu fiz. Você pode colocá-lo para fora da maneira que você quiser também. Divirta-se um pouco com ele, faça o seu próprio. Mas, o mais importante, certifique-se de ter um pouco de experiência antes de terminar este curso com consultas de mídia. 10. Resumo: Olá, bem-vindo, e também parabéns por terminar este curso, CSS 301, web design responsivo. Este era um curso bastante pequeno. A maior parte do CSS realmente está aprendendo, você sabe, coisas como exibir nenhum ou fronteira, certo? 0. Estes são chamados de declarações. Tudo o que fizemos com web design responsivo foi que dissemos, hey, adicione este elemento meta lá que diz ao navegador que isso vai ser um tipo responsivo de página com CSS. E então nós dissemos, certo, algum tipo de consulta de mídia, alguma lógica condicional. Então, quando a página tem uma largura máxima de 640, então é 640 ou menor. Aplique o estilo ou, se for para 70 ou menos, aplique este estilo. Isso é realmente tudo o que é. E então isso é um web design responsivo em poucas palavras. Obrigado por dedicar um tempo para fazer este curso. Espero que tenha gostado. Espero que tenha aprendido algo novo. Espero que você tenha se divertido um pouco com web design responsivo. É uma coisa muito, muito importante de se saber. Não se esqueça, você sempre pode pedir ajuda para aprender a codificar grupo Facebook. Você também pode me acompanhar no Instagram em codificação para todos, ou no Caleb Italian, ou no Twitter no Caleb tell. Ou você pode até me seguir aqui em compartilhamento de habilidades. E você pode ir ao meu perfil e clicar em seguir. E então você pode ver sempre que eu tenho um novo curso e eu tenho produzido um monte de cursos ultimamente. Então, espero que você obtenha algum bom valor com isso, a sua participação de habilidades premium. Mais uma vez, obrigado por fazer o meu curso. Meu nome é Caleb Colleen. Foi um prazer ensinar-lhe Web Design Responsive. Espero vê-lo mais um dos meus cursos, mas se eu não ficar feliz codificar e me divertir lá fora.