Тёмный

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

Larissa Kich
Подписаться 20 тыс.
Просмотров 42 тыс.
50% 1

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/Larissakich
Tema do VSCode:
Tokyo Night

Наука

Опубликовано:

 

22 янв 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 111   
@fxpedrinhox464
@fxpedrinhox464 4 месяца назад
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
@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😎🤏
@dennisfdc468
@dennisfdc468 Год назад
Bha show de bola esse teu vídeo sobre Footer responsivo, já ta salvo na biblioteca! Obrigado pela ajuda!
@luizbarbosa5670
@luizbarbosa5670 Год назад
Parabéns! Excelente didática. Direta ao ponto.
@ogenio7615
@ogenio7615 10 месяцев назад
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
@lau_dicas 17 дней назад
Conteúdo de qualidade, e sua didática é muito boa! Valeu Larissa.
@luanareinholzPersonal
@luanareinholzPersonal Год назад
Estou adorando praticar com seus vídeos. Muito bom!
@christianlessa937
@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!
@wlisses-silva
@wlisses-silva 9 месяцев назад
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!
@alexdiniz5
@alexdiniz5 11 месяцев назад
Você explica muito bem, moça! Parabéns!
@deniellopes6492
@deniellopes6492 Месяц назад
Me ajudou muito, graças a Deus !! Você é um anjo na terra !
@ericleirosario
@ericleirosario Год назад
Muito bom, Larissa ! ótimo conteúdo.
@rouchthiago
@rouchthiago Год назад
Muito bom, parabéns por compartilhar seu conhecimento. +1 inscrito
@lucasdasilvanascimento3952
@lucasdasilvanascimento3952 Год назад
Incrível, continue por favor aprendi várias coisas novas
@davidandrew6540
@davidandrew6540 6 месяцев назад
Oiiiiii Larissa muito bom esse vídeo... Deus te abençoe 🙏
@eduardopaula5225
@eduardopaula5225 3 месяца назад
mandou demais parabens, mt bem explicado, ganhou um inscrito
@ppanda3110
@ppanda3110 Месяц назад
vídeo super didático Larissa, eu me confundia com algumas tags, mas vc explicou bem direitinho, agr consigo entender o funcionamento:)
@AlexSantos-zc7wg
@AlexSantos-zc7wg 4 месяца назад
voltando para dizer que já conseguir muito obrigado!
@herbertduarte_dev
@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!!
@NosferStudios
@NosferStudios 11 месяцев назад
Me salvou estava precisando de uma aula assim urgente, para por em um site nesse minuto kkk
@PensamentoDistopico
@PensamentoDistopico 4 месяца назад
seus videos me ajudam muita, alem de me motivar todo dia a pratiacar. obrigado!
@larissakich
@larissakich 4 месяца назад
Eu quem agradeço, seu feedback me ajuda muito ☺️
@kazami4280
@kazami4280 11 месяцев назад
Ajudou demais! Muito obrigado...
@elias_sudan
@elias_sudan 11 месяцев назад
Obrigado pelo vídeo, me ajudou muito.
@rafarhcptimao
@rafarhcptimao Год назад
Obrigado pelo vídeo foi bem útil.
@ligerinho18
@ligerinho18 Год назад
Muito bom, me ajudou bastante!
@leonardoimberti295
@leonardoimberti295 6 месяцев назад
Mt fera ...Parabéns! um dia chego nesse nível!
@larissakich
@larissakich 6 месяцев назад
Muito obrigada! Bons estudos 😊
@odranoeltsu3970
@odranoeltsu3970 11 месяцев назад
Mano muito obrigado vc salvou meu dia
@joaojose4887
@joaojose4887 11 месяцев назад
Gostei do vídeo e amei a sua voz 🥺❤
@jonnystwart7832
@jonnystwart7832 6 месяцев назад
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
@larissakich 6 месяцев назад
Muito obrigada, comentários como o seu me ajudam muito 😊
@jhonathandomingos4566
@jhonathandomingos4566 5 месяцев назад
que aula, meus amigos. Muito obrigado
@larissakich
@larissakich 4 месяца назад
Eu quem agradeço!☺
@biancagomes2357
@biancagomes2357 9 месяцев назад
explica mt bem 👏
@diego-castro
@diego-castro 11 месяцев назад
E quase pintar um quadro! Que dom
@Gamerabrao001
@Gamerabrao001 Год назад
parabens pela dedicação!
@larissakich
@larissakich Год назад
Muito obrigada!!
@FriskFk
@FriskFk Год назад
Obrigado pela ajuda!
@webtvhostitatibaweb
@webtvhostitatibaweb 8 месяцев назад
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
@diegoalvessantana1219
@diegoalvessantana1219 Год назад
Sensacional! 👏
@gsfenrir3003
@gsfenrir3003 Год назад
ótimo vídeo, qual extensão para dimensões responsivo?
@robertcostasantos7214
@robertcostasantos7214 Год назад
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?
@zelinhozika
@zelinhozika Год назад
oi lari, eu preciso customizar minha area de trabalho igual a sua hahaha, faz um video mostrando quais programas tu usa.
@webtvhostitatibaweb
@webtvhostitatibaweb 8 месяцев назад
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
@diesnei8067
@diesnei8067 Год назад
A didática está cada vez melhor, parabéns! Amei o footer, ficou muito bonito
@larissakich
@larissakich Год назад
Muito muito obrigada! Fico feliz que tu tenha gostado ❤️
@chronos5457
@chronos5457 Год назад
​​@@larissakich Oi Larissa! Quanto tempo estuda dev front? Já atua na área?
@marcusnunes5970
@marcusnunes5970 9 месяцев назад
muito bom, eu fazia sem usar os 2 dava muito trabalho, obrigado.
@larissakich
@larissakich 9 месяцев назад
Fico feliz em conseguir te ajudar 😊
@valedosipesparaibuna
@valedosipesparaibuna Год назад
Show de bola.
@larissakich
@larissakich Год назад
Muito obrigada 😊
@jr10.juninho
@jr10.juninho 2 месяца назад
mais seria possível abaixar as imagens das redes sociais, deixar na pasta images e inserir ? ou tem que sseguir essa logica ?
@josedenazaresantos
@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.
@nuck477
@nuck477 Год назад
que tema você usa no vs code?
@LiherbertArtes
@LiherbertArtes 9 месяцев назад
Ganhou + 1 inscrito
@larissakich
@larissakich 9 месяцев назад
Muito muito obrigada 😊
@Breakervinci
@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
@franciscojose5357 Год назад
colorize :)
@josimarmiranda9722
@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?
@Klenodev
@Klenodev Год назад
muito bom!
@larissakich
@larissakich Год назад
Muito muito obrigada 😁
@lipeluvsu
@lipeluvsu Год назад
qual o nome dessa música de fundo? (a primeira)
@AlexSantos-zc7wg
@AlexSantos-zc7wg 4 месяца назад
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
@rodrigorodrigues596
@rodrigorodrigues596 6 месяцев назад
top
@bracana2023
@bracana2023 4 месяца назад
Cool.
@OLucasMaisBrabo
@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
@larissakich Год назад
Clarooo, pode sim 😁💛
@OLucasMaisBrabo
@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?
@csdiego
@csdiego 8 месяцев назад
Ñ sei pq mas aqui n apareceu as redes sociais
@thafaelteixeira1562
@thafaelteixeira1562 10 месяцев назад
🥰
@sabrinaaraujo599
@sabrinaaraujo599 Год назад
Faz um vídeo criando uma Landing Page
@larissakich
@larissakich Год назад
Muito obrigada pela dica, vou fazer ❤️
@Klenodev
@Klenodev Год назад
sugestão de video : faça um dashboard :D
@larissakich
@larissakich Год назад
Muito obrigada pela sujestão, vou fazer sim 😊❤️
@alessandrosilva1015
@alessandrosilva1015 Год назад
Boa explicação, vc só tem que desacelerar, pra quem esta começando pode se perder.
@RodrigoOliveira-gd1zj
@RodrigoOliveira-gd1zj Год назад
qual curso vc recomenda para começar ?
@larissakich
@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".
@brenofreitas.
@brenofreitas. 11 месяцев назад
Se a pessoa tivesse uma front end dessas na vida do cara, eu estaria estudando backend de boa! haha
@user-sg9jo2cq7m
@user-sg9jo2cq7m Год назад
Lari, tu deveria explicar o lado complexo da coisa. tem coisa que a gente não sabe de onde vem kkk
@larissakich
@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
@emyzinha6933
@emyzinha6933 6 месяцев назад
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
@larissakich 6 месяцев назад
Confere se a importação tá certa
@umapessoaae2323
@umapessoaae2323 6 месяцев назад
Cara se tu tá procurando os mesmos icon do vídeo, eu acho que não tem mais
@TiagoCruz02
@TiagoCruz02 Год назад
9:00
@heronlima-vj5ce
@heronlima-vj5ce Год назад
Envia esse arquivo aqui pra gente copiar e colar
@benmoraes5511
@benmoraes5511 9 месяцев назад
7:16
@JapaMitsu
@JapaMitsu Год назад
5:25
@speed-vpn7338
@speed-vpn7338 Год назад
P que significa o (rem)? Exemplo font-size: 1.5rem
@donato3876
@donato3876 Год назад
É uma unidade de medida mais responsiva, invés de usar PX, daí usa o REM
@larissakich
@larissakich Год назад
Oii, dá uma olhada nesse link aqui, ele explica direitinho: cursos.alura.com.br/forum/topico-em-ou-rem-34821
@franciscomachado9899
@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....
@benmoraes5511
@benmoraes5511 9 месяцев назад
14:19
@gabrielpinheiropalitotpere2588
@gabrielpinheiropalitotpere2588 2 месяца назад
se você pudesse só dar um zoom, fica meio difícil de enxergar
@sensiclipes4391
@sensiclipes4391 Год назад
Você fez qual curso pra saber oque você sabe hoje ?
@larissakich
@larissakich Год назад
Fiz alguns cursos da Alura e os do b7Web, recomendo bastante
@alessandroataide7676
@alessandroataide7676 Год назад
tu? bah, guria 😅😂!!!!
@byeel.minuzzi
@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
@ruanalexandre9489 Год назад
Use o Frontend mentor mas tem muito mais coisa
@larissakich
@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
@byeel.minuzzi Год назад
@@larissakich Muito bom, super recomendo, tu é 10, explica super bem nos vídeos, continue assim 💋💋
@ancelmoification
@ancelmoification 7 месяцев назад
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
@diesnei8067 7 месяцев назад
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
@ancelmoification 7 месяцев назад
@@diesnei8067 falou falou e não disse nada.
@larissakich
@larissakich 7 месяцев назад
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
@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
@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
@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.
@robzenpires3106
@robzenpires3106 10 месяцев назад
Valeu mesmo guerreira
@hashtagdevzones
@hashtagdevzones 10 месяцев назад
Ainda que esse video seja de 5 meses, seu canal ganha mais 1 inscrito hoje... brava Lari
@eletrotech51
@eletrotech51 6 месяцев назад
Muito bom
Далее
5 New AI Tools You Should Try
9:18
Просмотров 16 тыс.
Китайка и Пчелка 4 серия😂😆
00:19
CSS Grid Layout e Flexbox - Quando Utilizar
39:09
Просмотров 636 тыс.
Como fazer três CARDS com HTML5 e CSS3 | GabiCode
13:31
Como fazer um cronômetro com HTML, CSS e Javascript
28:58
CSS GRID na PRÁTICA - Tutorial Completo
25:21
Просмотров 31 тыс.
Куда пропал 3D Touch? #apple #iphone
0:51
Просмотров 993 тыс.