Como fazer um footer RESPONSIVO usando HTML e CSS (com FLEXBOX e GRID)

Olá pessoal!
Nesse vídeo vou te mostrar como fazer um Footer responsivo usando HTML e CSS com display GRID e FLEXBOX!
Redes sociais:
LinkedIn: / larissakich
Instagram: @lariikich
GitHub: github.com/Lar...
Tema do VSCode:
Tokyo Night

[@fxpedrinhox464]

quando eu começei a programar a 1 ano mais ou menos eu nao sabia de quase nada de HTML e CSS mais essa moça me ajudou demais com minha carreira muito obrigado Larissa.

[@MatheusHenrique-hd6dw]

Moça, não para de fazer vídeos assim não, eu sempre treino meus estudos com seu canal para fixação, seus projetos são ótimos para lembrar de coisas que eu esqueci do curso e outra, eu sempre aprendo algo mais, parabéns, conteúdo muito top😎🤏

[@ogenio7615]

Não poderia deixar de comentar , de cara já me tornei inscrito e antes de mais nada , já deixo aqui meus parabéns, inteligentíssima você, que conteúdo maravilhoso um dia quando me tornar programador chegarei pelo ao menos 1 % da sua inteligência, continue assim com essa inteligência, forte abraço...

[@lau_dicas]

Conteúdo de qualidade, e sua didática é muito boa! Valeu Larissa.

[@adrijzz]

vídeo super didático Larissa, eu me confundia com algumas tags, mas vc explicou bem direitinho, agr consigo entender o funcionamento:)

[@jonnystwart7832]

Parabéns LARISSA... Muito importante este turorial. Boa ditática, e excelente explanação. Estou impressionado, como uma moça tão jóvem, saiba tanto sobre o assunto. Mais uma vez, meus parabéééénnns, e, desejo êxito em seus empreendimentos.

[@larissakich]

Muito obrigada, comentários como o seu me ajudam muito 😊

[@xattin6124]

Mulher, você não é FD não, você é fodicima slc, vlw mesmo

[@herbertduarte_dev]

Muito bom, uma dica é aumentar a escala de exibição do windows para o vídeo ficar mais legível com fontes e icones maiores. No mais, ótimo vídeo, ótima didática e +1 inscrito!!

[@jhonathandomingos4566]

que aula, meus amigos. Muito obrigado

[@larissakich]

Eu quem agradeço!☺

[@diesnei8067]

A didática está cada vez melhor, parabéns! Amei o footer, ficou muito bonito

[@larissakich]

Muito muito obrigada! Fico feliz que tu tenha gostado ❤️

[@chronos5457]

​​@@larissakich Oi Larissa! Quanto tempo estuda dev front? Já atua na área?

[@leonardoimberti295]

Mt fera ...Parabéns! um dia chego nesse nível!

[@larissakich]

Muito obrigada! Bons estudos 😊

[@wlisses-silva]

Realmente incrível esse vídeo... vou tentar recriar esse footer para deixar como modelo para meus outros projetos. Ficou TOP D+!! Parabéns Larissa!

[@deniellopes6492]

Me ajudou muito, graças a Deus !! Você é um anjo na terra !

[@saiekcim]

seus videos me ajudam muita, alem de me motivar todo dia a pratiacar. obrigado!

[@larissakich]

Eu quem agradeço, seu feedback me ajuda muito ☺️

[@marcusnunes5970]

muito bom, eu fazia sem usar os 2 dava muito trabalho, obrigado.

[@larissakich]

Fico feliz em conseguir te ajudar 😊

[@christianlessa937]

Incrível sua didática, nem na hora de digitar você erra haha, parabéns, excelentes vídeos, sem enrolação, bem direta e rápida, continue assim!

[@dennisfdc468]

Bha show de bola esse teu vídeo sobre Footer responsivo, já ta salvo na biblioteca! Obrigado pela ajuda!

[@alexdiniz5]

Você explica muito bem, moça! Parabéns!

[@luizbarbosa5670]

Parabéns! Excelente didática. Direta ao ponto.

[@NosferStudios]

Me salvou estava precisando de uma aula assim urgente, para por em um site nesse minuto kkk

[@davidandrew6540]

Oiiiiii Larissa muito bom esse vídeo... Deus te abençoe 🙏

[@AlexSantos-zc7wg]

voltando para dizer que já conseguir muito obrigado!

[@luanareinholzPersonal]

Estou adorando praticar com seus vídeos. Muito bom!

[@ericleirosario]

Muito bom, Larissa ! ótimo conteúdo.

[@eduardopaula5225]

mandou demais parabens, mt bem explicado, ganhou um inscrito

[@lucasdasilvanascimento3952]

Incrível, continue por favor aprendi várias coisas novas

[@rouchthiago]

Muito bom, parabéns por compartilhar seu conhecimento. +1 inscrito

[@josedenazaresantos]

Gostaria de deixar minha sugestão, para iniciantes seria muito bom para melhor entendimento se as frases e variaveis fossem em portugues, para diferenciamos do que são "comando" e "variaveis". Não sei que conseguir repassar a minha sugestão de modo que entenda.

[@adryanMelo-n2g]

Muito bom, obrigado

[@diegoalvessantana1219]

Sensacional! 👏

[@kazami4280]

Ajudou demais! Muito obrigado...

[@joaojose4887]

Gostei do vídeo e amei a sua voz 🥺❤

[@BaudoDoppler]

Adorei, eu tentei aplicar um box-shadow nos icones de rede sociais mas ficaram com uma caixa preta atrás, sabe como tirar isso? Tentei colocar background-color: transparent; mas não deu certo.

[@elias_sudan]

Obrigado pelo vídeo, me ajudou muito.

[@odranoeltsu3970]

Mano muito obrigado vc salvou meu dia

[@diego-castro]

E quase pintar um quadro! Que dom

[@ligerinho18]

Muito bom, me ajudou bastante!

[@rafarhcptimao]

Obrigado pelo vídeo foi bem útil.

[@Gamerabrao001]

parabens pela dedicação!

[@larissakich]

Muito obrigada!!

[@TraderMilionário-e3x]

MUITO BOM

[@oFrisks]

Obrigado pela ajuda!

[@OLucasMaisBrabo]

Daora Larissa, eu reproduzi ele posso ti marcar em uma publicação no linkedIn? e usar nos trabalhos que faço pra faculdade? vlwwws topp dms

[@larissakich]

Clarooo, pode sim 😁💛

[@OLucasMaisBrabo]

@@larissakich voce pode me ajudar em uma coisa? quando colocar uma img ao lado do fomulario ele n fica responsivo e some, por q isso?

[@biancagomes2357]

explica mt bem 👏

[@jr10.juninho]

mais seria possível abaixar as imagens das redes sociais, deixar na pasta images e inserir ? ou tem que sseguir essa logica ?

[@valedosipesparaibuna]

Show de bola.

[@larissakich]

Muito obrigada 😊

[@bracana2023]

Cool.

[@rodrigorodrigues596]

top

[@LiherbertArtes]

Ganhou + 1 inscrito

[@larissakich]

Muito muito obrigada 😊

[@crismluz]

oi lari, eu preciso customizar minha area de trabalho igual a sua hahaha, faz um video mostrando quais programas tu usa.

[@thafaelteixeira1562]

🥰

[@Breakervinci]

Ótimo vídeo como sempre Lari. Tenho aprendido muito com seus vídeos. Poderia compartilhar qual extensão você usa para aparecer o "quadradinho" com as cores no CSS?

[@franciscojose5357]

colorize :)

[@webtvhostitatibaweb]

Adorei o seu vídeo e estou seguindo, inclusive fiz o passo a passo e o html e o css juntos no vscode, mas tenho duas duvidas - pq nas cores do background color tanto do footer como do copyright, eles não acompanham o texto e a coluna subscribe qdo, com a extensão do google chrome coloco o windows resize para 320x568 e 375x667, ficando a parte direita da barra de rolagem com fundo branco? A outra duvida seria como ao redor do input do textbox do subscribe colocar uma borda estilo linha fina com cantos arredondados, mas na cor cinza? No aguardo e desde já agradeço

[@burnedplay7510]

Colega você é sensacional! Mas coda mais devagar ,deixa um tempo para quem vê copiar o codigo . a maioria que busca é iniciante .

[@Elldevv]

muito bom!

[@larissakich]

Muito muito obrigada 😁

[@Elldevv]

sugestão de video : faça um dashboard :D

[@larissakich]

Muito obrigada pela sujestão, vou fazer sim 😊❤️

[@speed-vpn7338]

P que significa o (rem)? Exemplo font-size: 1.5rem

[@donato3876]

É uma unidade de medida mais responsiva, invés de usar PX, daí usa o REM

[@larissakich]

Oii, dá uma olhada nesse link aqui, ele explica direitinho: cursos.alura.com.br/forum/topico-em-ou-rem-34821

[@franciscomachado9899]

ele se mede baseado no tamanho da fonte padrao do HTML. Se o html tem uma fonte de 16px e vc botar 2rem, ele vai multiplicar por dois... se botar 3rem ele multiplica por 3 e assim vai....

[@webtvhostitatibaweb]

primeiramente parabéns pelo vídeo, sou iniciante no vscode, como faço para dividir a tela com a segunda no browser do servidor go live server interno na janela do app, já que ele esta rodando fora do app no google maximizado

[@robert-csc]

Parabéns, pelo vídeo. Eu tenho uma dúvida, se em vez de ser 4 forem 3 elementos, o que devo alterar no @media para ficar responsivo?

[@brenofreitas.]

Se a pessoa tivesse uma front end dessas na vida do cara, eu estaria estudando backend de boa! haha

[@gsfenrir3003]

ótimo vídeo, qual extensão para dimensões responsivo?

[@user-sg9jo2cq7m]

Lari, tu deveria explicar o lado complexo da coisa. tem coisa que a gente não sabe de onde vem kkk

[@larissakich]

Oii, quero fazer um vídeo mais detalhado explicando cada coisa, por enquanto ainda não fiz porque o vídeo ficaria muito longo, demoraria muito tempo para fazer e seria um pouco mais complexo

[@lipeluvsu]

qual o nome dessa música de fundo? (a primeira)

[@josimarmiranda9722]

Não entendi porque escolheu dividir as colunas de acordo com a quantidade de h1 e h3. É padrão do grid dividir de acordo com estas tag's? Alguém pode esclarecer essa dúvida?

[@sabrinaaraujo599]

Faz um vídeo criando uma Landing Page

[@larissakich]

Muito obrigada pela dica, vou fazer ❤️

[@AlexSantos-zc7wg]

boa tarde, poderia me ajudar o meu footer_copyright não ficou centralizado na pagina e sim em baixo do subscrible, ja revisei o video varias vezes e ainda não encontrei o erro, alguém poderia me ajudar? estou começando agora na programação e o video dela é incrivel

[@alessandrosilva1015]

Boa explicação, vc só tem que desacelerar, pra quem esta começando pode se perder.

[@TiagoCruz02]

9:00

[@purgenightt]

Ñ sei pq mas aqui n apareceu as redes sociais

[@gabrielpinheiropalitotpere2588]

se você pudesse só dar um zoom, fica meio difícil de enxergar

[@benmoraes5511]

14:19

[@benmoraes5511]

7:16

[@robzenpires3106]

Valeu mesmo guerreira

[@emyzinha6933]

Estou fazendo igual, mas o css não tá funcionando, ele não tá mudando nada no site, alguém sabe oq pode ser?

[@larissakich]

Confere se a importação tá certa

[@umapessoaae2323]

Cara se tu tá procurando os mesmos icon do vídeo, eu acho que não tem mais

[@hashtagdevzones]

Ainda que esse video seja de 5 meses, seu canal ganha mais 1 inscrito hoje... brava Lari

[@nuck477]

que tema você usa no vs code?

[@RodrigoOliveira-gd1zj]

qual curso vc recomenda para começar ?

[@larissakich]

Recomendo as formações de front-end da alura e os cursos da b7web, mas caso você queria um curso gratuito, recomendo os cursos de html e css do canal "curso em vídeo".

[@sensiclipes4391]

Você fez qual curso pra saber oque você sabe hoje ?

[@larissakich]

Fiz alguns cursos da Alura e os do b7Web, recomendo bastante

[@byeel.minuzzi]

COMO TU APRENDEU A PROGRAMAR? SERIA MUITO BOM SE TU ENSINASSE COMO TU APRENDEU E NÃO A COMO FAZER, AINDA TENHO BASTANTE DIFICULDADE APENAS "COPIANDO E COLANDO" O POUCO QUE SEI, APRENDI ASSIM JKKKLJKJKKKJKLKJLKLK ME AJUDA AIIII

[@ruanalexandre9489]

Use o Frontend mentor mas tem muito mais coisa

[@larissakich]

Oii, fiz alguns cursos da Alura e dá b7Web, e também os de lógica de programação do Curso em Vídeo, estou planejando fazer um vídeo aqui no canal mostrando certinho como eu aprendi, e um pouco mais sobre cada curso

[@byeel.minuzzi]

@@larissakich Muito bom, super recomendo, tu é 10, explica super bem nos vídeos, continue assim 💋💋

[@alessandroataide7676]

tu? bah, guria 😅😂!!!!

[@heronlima-vj5ce]

Envia esse arquivo aqui pra gente copiar e colar

[@ancelmoification]

o que estraga é essa mistureba de ingles com port!! Brasileiro mal saber português, mas tudo que vai falar usa termos como by pass, insight, vamos formar uma squad.. kkkk

[@diesnei8067]

Sim, gênio, sai catando termos em português em documentações e vê se tu vai achar alguma resposta. Ainda bem que é gente assim que entra no mercado de trabalho kkkkkk

[@ancelmoification]

@@diesnei8067 falou falou e não disse nada.

[@larissakich]

Bom, falo esses termos em inglês pois são eles que eu uso no dia a dia no meu trabalho, e caso um dia tu entre na área vai precisar saber o que significa, toda a documentação e códigos que você irá escrever vão ser todos em inglês, já falo desse jeito para as pessoas ficarem familiarizada com esses termos.

[@Matheus-rx1wf]

Aqui é notável o apelo ao publico feminino que existe na plataforma, muito conteúdo de homens que já abordaram esse mesmo assunto centenas de vezes das mais diferentes formas não conseguem chegar no mesmo alcance do que um vídeo com uma mulher na capa

[@diesnei8067]

Amigo cê tá simplesmente diminuindo o conteúdo dela porque segundo você, outros criadores já fizeram o mesmo vídeo e não tiveram a mesma repercussão? Se for o caso, por que você está nesse vídeo então? O que tu ganha com isso?

[@larissakich]

Matheus, entendo que você pode ter essa percepção, mas ao colocar minha foto na capa estou apenas mostrando quem é a criadora por trás do conteúdo e dessa forma buscando tornar a área mais acessível e encorajar mais mulheres a se interessarem por programação. O objetivo não é diminuir a importância dos conteúdos já existentes, mas sim ampliar as vozes e perspectivas para que mais pessoas possam se identificar e se sentir representadas.

[@eletrotech51]

Muito bom

[@JapaMitsu]

5:25