Como fazer um footer RESPONSIVO usando HTML e CSS (com FLEXBOX e GRID)
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- 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
![[UNCUT] “บอสณวัฒน์” ลากไส้!! ใครหนุนหลัง "แม่ตั๊ก ป๋าเบียร์" I คนดังนั่งเคลียร์ I 30 ก.ย. 67](http://i.ytimg.com/vi/QlD7mU2KKRk/mqdefault.jpg)
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!!
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.
voltando para dizer que já conseguir muito obrigado!
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.
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😎🤏
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.
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...
vídeo super didático Larissa, eu me confundia com algumas tags, mas vc explicou bem direitinho, agr consigo entender o funcionamento:)
Mulher, você não é FD não, você é fodicima slc, vlw mesmo
Ajudou demais! Muito obrigado...
mais seria possível abaixar as imagens das redes sociais, deixar na pasta images e inserir ? ou tem que sseguir essa logica ?
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
Conteúdo de qualidade, e sua didática é muito boa! Valeu Larissa.
Colega você é sensacional! Mas coda mais devagar ,deixa um tempo para quem vê copiar o codigo . a maioria que busca é iniciante .
se você pudesse só dar um zoom, fica meio difícil de enxergar
qual o nome dessa música de fundo? (a primeira)
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.
Muito obrigada, comentários como o seu me ajudam muito 😊
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!
parabens pela dedicação!
Muito obrigada!!
muito bom, eu fazia sem usar os 2 dava muito trabalho, obrigado.
Fico feliz em conseguir te ajudar 😊
tu? bah, guria 😅😂!!!!
Ñ sei pq mas aqui n apareceu as redes sociais
Muito bom, obrigado
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
P que significa o (rem)?
Exemplo
font-size: 1.5rem
É uma unidade de medida mais responsiva, invés de usar PX, daí usa o REM
Oii, dá uma olhada nesse link aqui, ele explica direitinho: cursos.alura.com.br/forum/topico-em-ou-rem-34821
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....
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
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?
mandou demais parabens, mt bem explicado, ganhou um inscrito
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
Clarooo, pode sim 😁💛
@@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?
Boa explicação, vc só tem que desacelerar, pra quem esta começando pode se perder.
Estou fazendo igual, mas o css não tá funcionando, ele não tá mudando nada no site, alguém sabe oq pode ser?
Confere se a importação tá certa
Cara se tu tá procurando os mesmos icon do vídeo, eu acho que não tem mais
Mt fera ...Parabéns! um dia chego nesse nível!
Muito obrigada! Bons estudos 😊
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
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
@@diesnei8067 falou falou e não disse nada.
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.
Me ajudou muito, graças a Deus !!
Você é um anjo na terra !
Ganhou + 1 inscrito
Muito muito obrigada 😊
MUITO BOM
9:00
Valeu mesmo guerreira
que aula, meus amigos. Muito obrigado
Eu quem agradeço!☺
Me salvou estava precisando de uma aula assim urgente, para por em um site nesse minuto kkk
Se a pessoa tivesse uma front end dessas na vida do cara, eu estaria estudando backend de boa! haha
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
Use o Frontend mentor mas tem muito mais coisa
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
@@larissakich Muito bom, super recomendo, tu é 10, explica super bem nos vídeos, continue assim 💋💋
oi lari, eu preciso customizar minha area de trabalho igual a sua hahaha, faz um video mostrando quais programas tu usa.
Cool.
Oiiiiii Larissa muito bom esse vídeo... Deus te abençoe 🙏
top
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?
ótimo vídeo, qual extensão para dimensões responsivo?
Você explica muito bem, moça! Parabéns!
Obrigado pelo vídeo, me ajudou muito.
Envia esse arquivo aqui pra gente copiar e colar
🥰
5:25
Bha show de bola esse teu vídeo sobre Footer responsivo, já ta salvo na biblioteca! Obrigado pela ajuda!
A didática está cada vez melhor, parabéns! Amei o footer, ficou muito bonito
Muito muito obrigada! Fico feliz que tu tenha gostado ❤️
@@larissakich Oi Larissa! Quanto tempo estuda dev front? Já atua na área?
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!
Muito bom, parabéns por compartilhar seu conhecimento. +1 inscrito
Gostei do vídeo e amei a sua voz 🥺❤
Mano muito obrigado vc salvou meu dia
seus videos me ajudam muita, alem de me motivar todo dia a pratiacar. obrigado!
Eu quem agradeço, seu feedback me ajuda muito ☺️
Obrigado pelo vídeo foi bem útil.
E quase pintar um quadro! Que dom
Incrível, continue por favor aprendi várias coisas novas
Parabéns! Excelente didática. Direta ao ponto.
Estou adorando praticar com seus vídeos. Muito bom!
Obrigado pela ajuda!
Muito bom, me ajudou bastante!
Muito bom, Larissa ! ótimo conteúdo.
que tema você usa no vs code?
Ainda que esse video seja de 5 meses, seu canal ganha mais 1 inscrito hoje... brava Lari
Você fez qual curso pra saber oque você sabe hoje ?
Fiz alguns cursos da Alura e os do b7Web, recomendo bastante
Ó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?
colorize :)
Lari, tu deveria explicar o lado complexo da coisa. tem coisa que a gente não sabe de onde vem kkk
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
explica mt bem 👏
Sensacional! 👏
Faz um vídeo criando uma Landing Page
Muito obrigada pela dica, vou fazer ❤️
qual curso vc recomenda para começar ?
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".
sugestão de video : faça um dashboard :D
Muito obrigada pela sujestão, vou fazer sim 😊❤️
14:19
Show de bola.
Muito obrigada 😊
7:16
muito bom!
Muito muito obrigada 😁
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
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?
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.
Muito bom