Aprenda desenvolvimento web responsivo

1. Introdução: Bem-vindo de volta hoje. Vamos construir esse componente de grade de design responsivo Se você é novo aqui, oi, meu nome é Zoe. Sou engenheiro de software e ex-professor universitário que adora ensinar às pessoas como 2. Projeto de curso: Tudo bem, então sim, como você pode ver, é um componente bem simples que vamos construir aqui, mas vamos fazer isso de forma responsiva Portanto, ele tem a versão para desktop e a versão móvel, e vamos usar o CSS grade, se pudermos. Então, dando uma olhada em nosso componente aqui, na verdade não precisamos usar a grade. Também poderíamos usar o flex. Então, vamos ver no que acontece. Na verdade, pode ser mais fácil para nós usar o Flexbox. Mas vemos como temos nosso tipo individual dessa primeira seção na parte superior aqui, e depois temos nossas duas seções menores na parte inferior. E então, no design móvel, ele simplesmente cai em uma coluna Então, muito direto, muito simples, mas um pouco diferente porque a seção inferior muda em termos de onde está colocada Então, vamos continuar e construir isso. 3. Tutorial: Então, eu já criei o aplicativo inicial. Novamente, isso não é nada. Eu fiz isso há meses, em termos de configuração. Você pode simplesmente usar este kit inicial. É o material que a próxima combinação de texto datilografado já configurou E você pode simplesmente cloná-lo e usá-lo como seu iniciador Você pode usar isso e não precisa necessariamente usar o elemento Typescript Você pode usar JavaScript se preferir. Então, depende totalmente de você se quiser usar isso, mas está vinculado na descrição abaixo. E também, se você quiser acompanhar, tipo, sempre, vou vincular o design. Este é um dos designs gratuitos do front-end mentor. Também vou colocar um link na descrição abaixo. Portanto, temos nosso aplicativo básico desenvolvido aqui. Vou simplesmente excluir todos os tipos de estilos de redefinição existentes e excluí-los de lá E então eu vou realmente inserir a cor de fundo desse design aqui, se eu conseguir pegá-la. Desktop. Vamos ver com qual cor estamos lidando aqui. Acho que é esse tipo de cor azul claro. Então, eu vou dizer que para o corpo e o HTML, a cor de fundo será essa e, sim, isso parece certo. Então, temos nosso conjunto de cores de fundo. Vamos continuar e criar esta página. Então, na página, vamos ter três cartas, uma carta com, tipo, três seções, devo dizer. Então, acho que para essa seção maior, como devemos fazer isso? Vamos fazer três caixinhas. Então, vou criar uma pasta de componentes de componentes. E diremos que o novo arquivo será, hum, cabeçalho do cartão. Eu vou ligar para ele. Novo arquivo. Cabeçalho do cartão. Opa. Cabeçalho TSX E, novamente, você pode usar o JSX se preferir. E então eu vou criar um novo arquivo chamado card container dot TSX E isso só vai conter todas as nossas cartas. Então, usaremos o box para poder estilizar usando XX prop for material UI e, em seguida, vou importar o contêiner do cartão para nossa página inicial Então, contêiner de cartão. Guarde isso aí. Incrível. E então, o recipiente do cartão agora pegará nosso cabeçalho do cartão e, em seguida, também os outros dois componentes menores do cartão . Cabeçalho. Incrível. Legal. Até agora tudo bem. Então, vamos trabalhar no cabeçalho do cartão agora. Então, novamente, vou transformar isso em uma caixa. Hum, guarde isso. E legal. Estamos vendo isso na página. Hum, vamos centralizar o recipiente do cartão na página. Então, sim, no contêiner do cartão vou configurar a exibição da página para flexionar E vamos dizer flex say justify content, sorry, center e line items Center Guarde isso. E acho que preciso definir uma altura. Hum, uma altura para isso é 98 de altura de vista. Acho que provavelmente deveria acabar fazendo isso em CSS, mas vamos cruzar essa ponte um pouco mais tarde. Tudo bem. Então, a próxima coisa que queremos fazer aqui é, sim, construir, construir essas pequenas peças aqui. Então, no cabeçalho do cartão, parece que nos juntamos à nossa comunidade. Então, precisamos de algum tipo de tipografia. Provavelmente precisamos de três elementos tipográficos diferentes, então vamos incluí-los. Vamos dizer tipografia Hum. Legal. E esse será o nosso primeiro. Participe da nossa comunidade. Incrível. Segundo, garantia de devolução do dinheiro sem complicações E então a descrição do que eles estão realmente tentando nos vender. Hum, legal. Então, isso é bem simples. Agora vamos fazer um pouco de silêncio. Parece que há cerca de 40 pixels de M ou preenchimento, devo dizer, preenchimento ao redor dos elementos Vamos dizer 40 pixels, 2,5 Ram. E o que mais precisamos aqui? Acho que talvez devêssemos fazer nosso tamanho de fonte e coisas assim. Então, isso vai ter 24 pixels. Tamanho da fonte. Vai ter um aro 1,5. Um, esse aqui vai fazer 18 anos. E então este aqui vai ser normal, então vamos deixar isso de lado. E então definiremos nossa cor. Então, essa vai ser dessa cor aqui. Apaixonado. Ou apenas cor. Um bom. Uh, isso vai ser , tipo, verde neon. Vamos fazer isso lá. E então essa vai ser um tipo de coisa azulada. Nós diremos. Mas. Legal. Vamos guardar isso aí. Incrível. Até aí tudo bem, temos nossa caixinha lá. A outra coisa que precisamos fazer é definir a cor de fundo. Então, definiremos a cor de fundo da caixa como branca. Guarde isso. E isso parece muito bom. Até agora, tudo bem. A outra coisa que eu quero fazer é definir a largura máxima para esta caixa aqui. Então, parece que a largura é 635. Isso vai ser para este contêiner de cartão. Eu vou dizer que a largura máxima será 635. Opa, pixels. E a altura máxima. Porque deveria ser apenas um componente. Não é como uma página inteira. Vai ser 475. Vamos colocar isso lá. Incrível. Legal. Até agora, tudo bem. Ah, outra coisa. Na verdade, outra coisa que vamos querer fazer é definir o raio do canto Parece que tem cerca de oito pixels. Então, vamos dizer que o raio da borda será de 0,5 ram. E isso apenas curvará todas as bordas. Oh, não, não funcionou. Ok, então, na verdade, temos que colocá-lo no cartão. Tudo bem, então vamos configurá-lo. Em vez disso, colocaremos na carta as peças da carta. Então, vamos definir o raio da fronteira. E deve ser o mesmo de quando você está fazendo no canto superior direito, no canto inferior esquerdo. Então vai ser no topo, hum, o que é no canto superior esquerdo? Digamos, 0,5 Ram, 0,5 Ram e zero e zero, e então podemos modificá-lo se isso não estiver correto. Não. Ok, sim, está correto. Então veja como ele simplesmente curva a parte superior esquerda e direita. Então, isso é só para nos dar uma pequena moldura. Então, vamos deixar isso como está. E eu acho que talvez possamos adicionar um pouco de peso de fonte, apenas um pouco de peso a esta aqui, não muito, talvez 600 de espessura de fonte. E sim, talvez para este também. Nós faremos o mesmo. Vamos guardar isso. Sim, isso parece muito bom. Hum, faça um pouco de espaçamento, talvez 24 pixels. Tudo bem, então digamos que, hum, Margin. Margem. O topo é 1,5. Opa. 1,5 Rm. Hum, certo. E então, como foi 0,75 m e depois zero. Sim, e só nos dá um pouco de margem por aí. E eu acho que isso é muito bom por enquanto. Vamos continuar com isso e vamos construir as próximas duas caixinhas aqui. Então, a primeira caixa aí. O próximo será nosso CTA, vou chamá-lo de nosso CTA call to action Então, o que quer que acabemos fazendo se acabarmos mudando o produto, sempre podemos reutilizar esse componente Então, vamos dizer caixa. Uma caixa. Legal. Até agora tudo bem. E então vamos importá-lo para um cartão, nosso contêiner de cartões. Agora, é aqui que fica interessante. Então foi aqui que eu pensei, poderíamos usar o Griter. Podemos usar o Flex O que acho que fazemos aqui é usar uma caixa e, dentro dessa caixa, temos nossos próximos dois componentes. Então, teremos o CTA e qualquer outro componente YS, você sabe, E então vamos inverter posição deles com base na orientação Usaremos a consulta de mídia para fazer isso. Então, vamos tentar isso, ver se funciona. Então, com nosso CTA, agora vemos que o temos aqui. Vamos seguir em frente e fazer a mesma coisa. Então, vamos adicionar alguns estilos semelhantes. E, honestamente, poderíamos usar, tipo, um carro, tipo, uma força componente e todas essas coisas, mas não é como se pudéssemos criar um cartão preenchimento automático de 2,5 e, em seguida, usar uma cor de fundo como propriedade e usar o raio da borda como uma propriedade raio da borda como Acho que estamos construindo algo maior, definitivamente seria útil fazer isso, especialmente porque mantemos nossa linguagem de design. Mas acho que, como é apenas um componente singular , no momento, podemos simplesmente copiar alguns dos estilos. Então, vamos adicionar um pouco de preenchimento lá. Definiremos a cor de fundo como sendo. Vamos ver o que é. Uh, retângulo Esse retângulo. Mmm mm. Ok, vamos ver. Acho que é dessa cor. Se não for, podemos mudar isso. Então, vamos começar com essa cor. Legal. E então precisamos da mesma coisa, essencialmente, três CTAs diferentes ou três elementos tipográficos diferentes, desculpe Então, vamos começar com a tipografia. E a primeira será uma assinatura mensal. Guarde isso, Cool. Novamente, se eles fossem mais semelhantes em termos do estilo real, faria todo o sentido separá-los em um componente reutilizável Então temos isso, e vou colocar um intervalo aqui por mês, só porque é um pouco diferente em termos de estilo, mas queremos que esteja na mesma linha. E então é mais uma escolha de design do que uma separação de informações E então temos isso e, em seguida, teremos um botão embaixo de tudo isso Opa. Vou guardar isso. Tudo bem, legal. Então, sim, basicamente essa seção do CTA A próxima coisa que queremos fazer é definir a largura máxima. Então, o que é? A altura será 259. A largura máxima será de 318, então diremos que a largura máxima será de 318 pixels Dessa forma, ele não ocupa muito espaço. Hum, legal. Eu acho que isso está correto. Acho que quando adicionarmos o outro, ele meio que ocupará aquele outro espaço. Então, vamos prosseguir agora e queremos definir a cor. Então, vamos dizer, cores para isso. A cor é branca. E vamos pegar isso emprestado para o próximo, também, acho que eles são todos brancos Sim, são todos brancos. Exceto por aquele pequeno giro. Não tenho certeza. Vamos dar uma olhada e ver de que cor é essa. Ok, ainda está branco. Só que a opacidade é menor Então, vamos estilizar isso. Nós diremos, hum, o que é isso? Uh, a cor é RGBA. Opa. Eu coloquei entre aspas. Uh oh, está faltando. Lá vamos nós. Hum, e eu acho que é 100, 100, 100. Em seguida, 0,5. Sim, isso é basicamente, sim. Então eu quero isso, na verdade, desculpe, 255, 255. Sim. OK. Isso é o que eu quero. Eu quero que seja branco, mas um pouco transparente. Isso parece correto. E então vamos definir o tamanho agora Então, serão 18 gritos. Vamos dizer que o tamanho da fonte é 18 pixels. Isso vai ter 32 pixels. E também o peso da fonte, provavelmente também podemos dizer, peso da fonte de 600. Vamos dizer que o tamanho da fonte é dois REM e a espessura da fonte, provavelmente 800. E então, mas a cada mês é diferente. Não queremos que por mês tenha nada disso. Então, vamos dizer que o peso da fonte será 400 e o tamanho da fonte será, uh, 16, então uma RAM. Legal. E acho que provavelmente também precisamos fazer algum tipo de exibição flexível, hum, alinhar itens no centro Sim, dessa forma, há um pouco de espaço lá. OK. Interessante E então nós também faremos a margem esquerda. Só para dar um pouco de espaço, como 0,5 para eles. Incrível. Parece muito bom. E então, o último, acho que ainda não precisamos mudar. É apenas o tamanho normal 16. Outra coisa, vamos adicionar um pouco novamente, basta adicionar um pouco de preenchimento, alguma margem Hum, entre esses dois, acho que há cerca de um RM, digamos, margem superior. Um Ram. E sim, muito bom. E então adicionaremos esse botão na parte inferior. Então, o botão, provavelmente com cerca de 1,5 Rm de preenchimento na parte superior. OK. E então vai ser que vai dizer “inscreva-se”. E a cor de fundo será essa. Então, vamos dizer plano de fundo. A cor é isso. E a cor real do texto será branca. Legal. Ah, e sim, deveria ser isso. Acho que sim, vamos fazer com que seja em toda a largura. Isso é Width whoops. É igual a 100%. A transformação de texto não é nenhuma ; na verdade, está forçando-a entrar em maiúsculas, o que não queremos E então provavelmente faremos com que a espessura da fonte, talvez 600, fique um pouco mais ousada. Hum, em termos de tamanho. Sim, é normal. Talvez até façamos 800. Legal. E acho que talvez haja um pouco mais de acolchoamento na parte superior Cebola. Isso parece muito bom. Então essa é a segunda carta, logo ali. Vamos continuar e criar essa terceira, a terceira peça da carta, devo dizer. E esse será o nosso Y. E, novamente, você provavelmente pode inventar um nome melhor do que Y, mas vamos usar Y para sair Então, isso é, novamente, começando com a caixa de material para você. Usando isso como nossa base. Vamos importá-lo para nosso contêiner de cartão agora, então vamos dizer o porquê. Legal. Então, agora você vê como está se acumulando em linha reta. Na verdade, queríamos ficar de lado. Então é aqui que vamos começar a mexer com nossa tela Então, vamos dizer display flex, e isso deveria simplesmente aparecer para o lado Você vê como ocupa uma quantidade igual nas laterais. Então, isso meio compensa o fato de estar lá A outra coisa que realmente queremos fazer, que eu esqueci completamente, é definir o raio da borda na parte inferior Então, vamos fazer isso bem rápido antes de prosseguirmos completamente. Então, meio que retirando do cabeçalho do cartão, vamos modificar onde está o raio da borda Na verdade, queremos que seja a parte inferior. Então, vamos mudar isso. Ou, não, na verdade, provavelmente apenas o de baixo. Então, serão três zeros e 0,5. Então, só queremos que esse milho seja curvo. Então, hum, sim, nós temos isso aí. E então vamos passar para Y. Agora, para Y, queremos fazer basicamente um estilo similar a este Então, uma cópia, podemos pegar isso emprestado e usar isso como nossa base, e depois mudar para onde vai o zero Então, o zero que queremos desse lado. Então, sim, você verá que a borda externa é curva. Também precisamos pegar essa cor, que é Oh. Que cor é essa? Acho que era a outra cor. Eu não acho que sim. Uh, outra maneira rápida pegar cores é usando esse seletor de cores Sim. Incrível. Super rápido. Uh, a cor de fundo vai ser essa. Perfeito. Perfeito. Tudo bem, legal. Então nós temos isso. Agora, vamos inserir nosso texto, e isso deve ser muito mais simples. Então nós temos o meu ônibus. Uma gota em um elemento tipográfico. Por que a tipografia dos EUA. Legal. E será, novamente, um tamanho 18. E então o peso da fonte será, acho que seria de 600 para a outra. Hum, então deve coincidir. E então a cor será branca. Legal. Incrível. Hum, Max Width, nós temos esse conjunto. Então precisamos dessa lista aqui. Agora, há duas maneiras de fazer isso. Poderíamos fazer isso, tipo, uma espécie de pausa usando pausas, mas acho que a melhor maneira de fazer isso é usando uma lista não ordenada real Então, vamos dizer lista não ordenada. Eles têm um componente de lista? Oh, eles têm. Eu não o usei antes. Vamos experimentar e ver no que vai dar. Hum, então vamos dizer lista. E então o que é isso? Lista? Item da lista, talvez? Sim, item da lista. Ok. E então deixe-me colocar o primeiro e ver se está tudo bem Tutoriais de especialistas do setor. Vamos ver, tipo de elemento, eu pareço mal, tipo de elemento preguiçoso Oh, uh, item. Ok. Mamãe. É indentado. Eu realmente não adoro isso, indente. Hum, eu acho que há uma propriedade que é como o estilo Listyle List Nenhuma? Não. Hum, Listyle CSS. Mamãe. Quadrado por dentro. Nenhuma. Dentro. Ah, interessante. Ok. Eu realmente não amo isso. Como remover o recuo da lista, CSS. Margem de saída esquerda. Margem esquerda. Zero. Vamos ver se isso funcionou. Não. Vamos experimentá-lo aqui. Não. OK. Eu realmente não estou adorando a lista só porque ela não está fazendo o que precisávamos fazer. Então, vamos usar uma caixa e vamos usar elementos de tipografia logo abaixo Então, deixe-me copiar todo esse texto. Largue isso aí. Mm Ok. E vamos simplesmente colocá-los em elementos tipográficos. Então, caramba. Tudo bem. Hum ok. Sim. E uau, na verdade, o número certo. Fantástico. Uh, Opa. Ok, legal. Vamos nos livrar desse pequeno espaço extra lá. Tudo bem, legal. Então, agora temos todos eles alinhados. Hum, outra coisa que eu vou querer fazer. Eu poderia ter criado um componente de estilo para eles, mas não fiz. Novamente, existem maneiras de tornar isso muito mais limpo, você sabe, se você estiver usando isso em seu portfólio. E isso parece bom. A única coisa que eu quero fazer é definir, tipo, uma largura mínima. Então, o que é isso? 318? Acho que vou definir a largura máxima, mas a largura mínima. Ou isso é o mesmo? Isso deveria ser o mesmo, na verdade. Oh, não, isso não está certo. Acho que é por isso que está dizendo use grid. Hum. Então, vamos ao guia de layout de grade CSS Trix Então, dizemos grade de exibição. Vamos tentar isso. Hum, então seria para este contêiner. Então, se dissermos grade de exibição, colunas do modelo de grade, um FR , um FR, elas devem ocupar a mesma quantidade de espaço. Legal. Isso resolveu nosso problema. Nós vamos continuar com isso. Então isso funciona para isso. Para o design do desktop. Portanto, nosso design de desktop está basicamente completo. Estamos prontos para ir. A próxima coisa que queremos analisar é nosso design móvel. Então, eu o abro em uma segunda guia para poder alternar entre os dois Para o design móvel, na verdade, queremos que seja apenas uma opção. Então, se eu disser um FR, sim, é isso que queremos. Tudo bem, então vamos colocar nossa consulta móvel aqui. Então, vamos usar nosso gancho de consulta de mídia do Material UI importá-lo daqui. Acho que talvez precisemos usá-lo. Bem, veja. Talvez o tenhamos usado em alguns locais, e vou aumentá-lo um pouco Eu vou dizer que Cs mobile é igual a min ou desculpe, Max Width, 600 pixels E então eu vou perguntar, se for móvel, faça isso, se não, faça outra coisa. Portanto, se for móvel, queremos que as colunas do modelo de grade sejam apenas uma fração. Caso contrário, queremos que seja uma fração e uma fração. Basicamente, dizendo que é, ou está configurado como um e um ou é um e dois. Então é isso que faremos lá. Ah, e não gosta porque isso precisa ser um componente do cliente. Vamos guardar isso. OK. Incrível. Legal. Então, isso parece bom. E então, sim, está fazendo isso corretamente aqui. A única outra coisa que eu quero mudar são essas coisinhas irritantes, hum, do raio de fronteira E acho que isso faz parte do truque do design. Oh, na verdade, aqui, eles simplesmente não a têm curvatura na parte inferior Interessante Então eu acho que você apenas remove o raio da borda se estiver reto para baixo. Hum, eu não sei se isso é ideal ou se foi apenas um acidente, mas vamos seguir o design conforme descrito Então, raio da fronteira. Sim, vamos ter que fazer mais duas, hum, duas consultas móveis Então, copiaremos essa consulta de mídia para o CTA. E, novamente, não é estritamente necessário, mas não parece cinza. Não parece polido. Então, queremos ter certeza de que fazemos o melhor com o que estamos trabalhando. Então, vamos transformar isso em um componente de cliente e, em seguida, diremos, no celular, o raio da borda é zero, caso contrário, o raio da borda é E então faremos a mesma coisa em nosso Y. Também removeremos algumas dessas importações de não serem usadas apenas para manter as coisas limpas Diremos que, se for móvel, o raio do pedido móvel será zero Caso contrário, funcionará e, sim, parece muito bom. Isso é exatamente o que queremos lá. Então eu acho que , sim, acho que é muito bom ir lá. Então, sim, essa foi uma maneira muito rápida de como podemos usar CSS grid, uma combinação de grid e flexbox, na verdade, para criar um design responsivo Como eu disse, existem maneiras de otimizar isso e torná-lo muito mais limpo. E eu recomendo que, se essa for uma das peças do seu portfólio, você definitivamente dedique alguns minutos para limpá-la. Você sabe, use componentes muito mais razoáveis. Não se repita tanto e, sim, faça dela uma peça de portfólio muito, muito sólida.