Como fazer uma LANDING PAGE responsiva e animada | HTML, CSS e JavaScript (JQUERY)

[@brenocastro8750]

Oii Lari, tudo bom? Não vi a dica aqui sobre o menu mobile, então... Deixa um unico menu e o mobile menu btn, e ai vai trabalhar com as media query, onde, se for pelo mobile first, as Li vao estar com o display flex, flex direction column, e o btn vai estar aparecendo, e o navbar vai estar oculto fixo e tal do jeito que fez, e a partir de uma tela de 980px por exemplo, vai denifir outros estados para o navbar, menu e li, onde a navbar ja vai estar visible, o btn menu vai estar disabled, hidden e invisible, e as li, vao estar com o flex direction row. Recomendo muito ir pelo principio do mobile first e usar a nomeclatura BEM, vai dar um upgrade top nos teus projetos. Parabens pelos videos, ta ajudando muita gente 🥰

[@larissakich]

Oii, muito muito obrigada pela sujestão, vai me ajudar muito

[@soraia09]

Todo mundo da minha sala falava de uma tal de Lari que é uma diva e está salvando todo mundo!! Tenho que reconhecer os elogios, você me ajudou demais! ótima didática, não passa rápido e o processo de escrever o código com você foi muito produtivo, Parabéns Larissa, continue com esse tipo de conteúdo por aqui

[@lucassouza3178]

Vendo esse vídeo n precisa nem fazer curso de html e css kkk, muito bom.

[@paulomrts]

Larissa, você não tem ideia como seus vídeos estão me ajudando! Já sou um analista de dados sênior e desafiei a mim mesmo a aprender novos temas esse ano, começando com HTML, CSS e JS. Muito obrigado pelos vídeos e continue assim, estarei sempre acompanhando aqui e aprendendo.

[@deboraino.6672]

Mana, Muitissimo agradecida por esta iniciativa sen-sa-ci-o-nal. Desde 2023 estou na tentativa de fazer uma landing page similiar como está, tenho falhado mi-se-ra-vel-men-te.

[@larissakich]

Eu quem agradeço! Espero conseguir te ajudar, muito sucesso pra você ☺️

[@deboraino.6672]

@@larissakich Por mais profissionais iguais a você Larissa 👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽

[@Manojovem]

Amém, a menina e um prodígio

[@Felps1z]

Muito bom, não se tem muitos vídeos ensinando a criar landing pages animadas, ainda mais com uma didática tão boa! 👏🏻👏🏻

[@larissakich]

Muitoo obrigada 😊

[@onemidia_the]

Finalizei aqui o projeto seguindo os passos da Lari, cara ficou muito top. valeu Lari pelo conteúdo

[@PauloSantos-yc2fx]

É tão bom ver alguém que ama o que faz e que tem talento pra explicar

[@larissakich]

Muito obrigada 😊

[@canalortegagames]

Te sigo já faz alguns dias e amei esse projeto,usei a base dele para fazer uma landing page para a doceria de uma amiga,muita boa sua forma de apresentar o conteúdo parabéns e muito obrigado

[@larissakich]

Muito obrigada! Fico muito feliz em poder ajudar ☺

[@felipematosodasilva2272]

Salvei pra assistir mais tarde, um dos melhores conteúdos que já localizei aqui no KZbin... Parabéns!

[@NSplay.oficial]

Que incrível, parabéns adorei do início ao fim até me inscrevi, para acompanhar mais ... ❤

[@Dorivan29]

Larissa, sucesso...Parabéns pelo vídeo! Like mais um inscrito.

[@victoreduardo7324]

como que um video incrivel desse so teve 11 mil visualizações?

[@Hamilton-t1p]

Conheci seu canal agora e achei incrível! Continue postando vídeos

[@carlospaixao7532]

Muito bom, você explica muito bem, além de torna tudo tão simples, parabéns!

[@contanatividade6191]

Me ajudou muito. Muito bom conteúdo, criativo e direto. Não é cansativo e nos dar vontade de aprender. Mais uma vez obrigado Lari

[@user-xn2li7dm1c]

Estou refazendo esse projeto aos poucos, esse é o segundo de sua lista; O primeiro foi o do menu sidebar com o Avatar. Como sou iniciante, tem me ajudado bastante, com certeza, e obrigado. Conversando com o professor KZbin rsrsrs, encontrei uma função show, e sinceramente, todos os meus projetos serão baseados nela. Nos permite a responsividade, sem tanta necessidade do @media Eu só testei, texto e imagem. Eles vão redimensionando, conforme o tamanho do navegador. Até certo ponto né!, conforme projeto. propriedade: min(0px, 0vw); a unidade (vw) precisa permanecer, já a (px), pode trocar por "rem", "em". Não testei outras. "rem" tá de bom tamanho. exemplos: font-size: min(4rem, 4.8vw); line-height: min(4.1rem, 4.5vw); width: min(700px, 46vw) height: min(400px, 4.8vw); tem o max(0px, 0vw) mas parece que não funciona bem. kkk

[@marcospaulo-ns3od]

ótima aula, queria ter uma parte maio dedicada ao jquery mas irei pesquisar solo, porem tudo que aprendi foi de grande ajuda

[@PauloHenriqueMusicphm]

Mais um projeto finalizado! Ficou muito toop, parabéns pelo conteúdo. 👏🏻

[@PedroVanova]

Nunca pensei que criar animações fosse assim tão radial. Muito obrigado.

[@darkoo9898]

Que aulão 🎉

[@danielvasconcelosalves969]

ainda nao estou nesse nivel, parabens.

[@investindoemativos8690]

Um dia chegarei nesse seu nivel de trabalhar com front end. Parabéns

[@larissakich]

Muito obrigada 😊

[@diesnei8067]

Amei essas animações! Muito bom, parabéns 👏👏

[@larissakich]

Muito obrigada, fico feliz que tenha gostado, 😊

[@douglasmatos2134]

Oi Larissa, muito bom o vídeo! Sobre o navBar eu particularmente uso uma forma diferente. Eu coloco a estrutura inteira do navBar dentro dele no HTML e uso @midia para transformar "menu" que é a lista em Position Absolute e refaço o style dele, sem a necessidade de criar outro HTML para o mobile pois quando chega a um determinado tamanho de tela Ele sai do fluxo do HTML e fica posicionado fora da tela, coloco o botão de menu como Display flex tornando ele visível, assim some a lista e aparece o botão de menu. Com isso só preciso mudar o style da lista com @midia para ele ficar como eu quero para a versão mobile e JS para ele sair da posição Right - 300px (varia de acordo com o tamanho do elemento de Menu) para a posição Right 0px (aqui ele passa a ficar visível) quando o botão menu e pressionado. Sou iniciante, mas uso este método para fazer o menu hamburguer espero estar certo kkkkk

[@larissakich]

Oii, muito obrigada pela dica, vou tentar fazer assim das próximas vezes

[@rhuanribeiro5428]

O projeto foi todo bem explicado, dá pra usar de base pra fazer muitas landing page diferentes, Muito obrigado, Lari!

[@larissakich]

Muitoo obrigada! Quero trazer aqui pro canal mais landing pages nesse estilo 😁

[@cleristonmarciel4229]

Perfeito! Faça mais.

[@johnlock5585]

Muito legal. Sua fluência é linda. Parabéns.

[@Share408]

Parabéns pelo excelente trabalho! A cada vídeo que assisto me sinto mais motivado a desenvolver sites. Obrigado!😊

[@larissakich]

Eu quem agradeço, bons estudos! ☺

[@fellipethemaia]

Tô tão acostumado com React e Next que é até nostálgico fazer um projeto com JS vanilla ❤ Obrigado!

[@larissakich]

Muito obrigada! Quero trazer aqui pro canal alguns projetos em React também 😁

[@lucianogoncalves6596]

Parabéns pela aula! A cada vídeo que assisto me sinto mais motivado a me torna programador. Obrigado! o vídeo de vinheta, esta no seu e-mail

[@larissakich]

Muito obrigada! ☺

[@douglasmatos2134]

As animações de entrada ficaram muito boa, vou tentar reproduzir no meu projetinho kkkkk Obrigado! vídeo incrível!

[@larissakich]

Muiito obrigada 😊

[@Jonathancorrea-uu2li]

Parabéns, aprovado 😂

[@alexandreandrade5172]

Caramba Larissa... muito massa. Obrigado por compartilhar...

[@Jonathancorrea-uu2li]

Nossa muito bom, você é muito boa

[@josequintin2467]

Muito bom, parabéns!

[@wallacesilva6087]

Ficou massa, assistindo aqui 👏🏻💪🏻

[@larissakich]

Muito obrigada!! 😊

[@wallacesilva6087]

adorei parabéns @larissakich

[@ana-dev]

Esse video ta MUITO bom, muito mesmo!! Obrigada

[@thiagodacosta1055]

Ótimo conteúdo. Parabéns.

[@DatmanGotham]

Video ensinando a criar landing pages animadas, e ainda de GRAÇA???? Estou no paraíso e não percebi? E ainda ensinando direto...

[@SayconX2]

Não manjo muito de front por ser desenvolvedor .Net no back-end, mas estou estudando o Blazor pra mostrar algo para os usuários, esse projeto vai ser bom pra eu converter pra razor. Vlw!

[@wellington_Lacerda]

Eu aprendi a fazer sites com o professor Gustavo Guanabara do curso em vídeo. O único problema é q até hj eu crio sites por um Cll 😢 ent as possibilidades de sites profissionais são baixas

[@WONPpnow2020]

É, meus irmão, estamos sofrendo aqui. Perdi meu PC faz uns dias e estou na mesma luta que você. 😢

[@aquaparalelodigital]

Muito boa aula, always grateful, 💜.

[@larissakich]

Muito obrigada ☺️

[@aquaparalelodigital]

@@larissakich Ok Larissa.

[@kelvynlacerdatose878]

Obrigado pelo seu trabalho! estou aprendendo muito.. s2

[@larissakich]

Eu quem agradeço, fico muito feliz em poder te ajudar 😊

[@WagnerSilva-nn2fp]

ótimo conteúdo 👏👏👏

[@igor.piloto]

Perfeito!! Muito bom como sempre

[@larissakich]

Muitooo obrigada ☺️

[@JoaoCarv30]

Que didática incrível, aprendo muito contigo. Você poderia ensinar a fazer a mesma landing page em react né ?

[@larissakich]

Oii, muito obrigada! Posso fazer sim, assim que der trago aqui pro canal 😁

[@bernardosilva3902]

brigadão guria, ajudou muitoo, didatica unica +1 inscrito

[@larissakich]

Eu quem agradeço haha ☺

[@Isabelly.C]

49:18 quando eu coloquei o display flex, os elementos não se alinharam em uma linha mas sim ficou um em cima do outro e não sei como arrumar, como faço isso???

[@natansantos4280]

tem que ver se quando vc linkou foi certo, eu fiquei ontem o dia todo dai descobri que linkei errado

[@gabrielle5947]

Voce conseguiu?

[@natansantos4280]

@@gabrielle5947 sim

[@OtoniP10]

Parabéns pelo projeto... e ensinamento, ficou muito top e acompanhando da pra aprender muita coisa boa.

[@leaords8538]

Muito obg, ajudou muito

[@teele_la]

Este projecto está ótimo. Para a escolha da imagem gostaria de saber qual tem que ser o tamanho

Lari, pode me dizer que ferramenta foi essa de simular tela em celular ?

[@pedrosouza469]

Mobile simulator - responsive testing tool

[@0202Joe]

Monta um sistema de carrinho de compras interligado nesse projeto aí😁❤️

[@MateusGmmr]

Qual é o nome dessa ferramenta de visualização móvel? Que tem vários dispositivos.

[@NavZeraxX]

Vai em extensão Google e pesquisa mobile simulator

[@WONPpnow2020]

meu amigo, ela falou no vídeo o nome da extensão.

[@Viberwx]

Pelo jeito ele não assistiu kkk​@@WONPpnow2020

[@juliamelo3434]

É uma extensão do Google que se chama "simulador de celular"

[@sergiohenrique6097]

parabens, conhece de mais.

[@CarlosSilva-jy3pv]

Ficou top demais!!

[@larissakich]

Muito obrigada 😊

[@silasvsilva2884]

Baixa o plugin no visual ( live server ) instale La perto do relogio do computador vai aparecer o ( Go live ) clique nele . Pronto tudo que vc fizer ela te mostra em tempo real

[@diegofwful]

Caraca, ta muito lindo!!!

[@hermesfranklin]

Sensacional seu conteúdo! esta cada vez mais difícil encontrar algo sem estar relacionado React

[@larissakich]

Muito obrigada! ☺

[@mayconrocha8723]

Show demais!

[@larissakich]

Muiito obrigada 😁

[@onemidia_the]

Ai voce poderia colocar o #home usando flex-direction colum reverse para quando for para o responsivo em 1170 a imagem ficasse no início ou seja no top focaria lega. Eu fiz assim

[@RogerioGoSantos]

top estou inciando ao 50 anos programção estou amando, há procurei a estação movel, mas não achei qual é nome dela.

[@pedrosouza469]

Mobile simulator - responsive testing tool

[@allananderson658]

como faço pra vender essa landing page auterando algumas coisas nela?

[@henriqueost2976]

Conteúdo top 😊

[@ricardolig-lig7352]

As animaçoes não funcionou no meu codigo, ate copiei o codigo no github para testar tambem não funcionou

[@_raick]

Muito obrigado ! ❤

[@brunoint2021]

Muito bom!

[@bruno.teclas]

Quando vc vai lançar um cruso?

[@rickzalol5810]

Nice vídeo!! poderia me informar o nome do seu tema?

[@maiaffx5717]

gnt, alguem me ajuda!! Na hora que ela coloca no style.css para sumir e deixar apenas pro mobile, o meu não esta sumindo!! Tem algo que eu possa fazer?

[@jamersongomesdasilva6373]

O meu também. Não está sumindo o mobile_menu.

[@lucasreinaldo2]

Na parte do Js não funcionou no meu

[@BRdri]

No meu tbm não, vou fazer a função de outra forma pra ver se dá certo.

[@alissonxzff]

top

[@luuhlly]

Larissa, me tiraa uma duvida, você coda direto ou vc aantes faz o designer no Figma ou em outro programa ?

[@joseluisaldrighi]

Qual nome do app de visualização movel?

[@LaughLoopPSP]

Larissa, onde vc consegue essas imagens com resoluções boas pra treinar front end

[@FelipeGenuino]

ficou legal

[@autotecsolucoes6704]

essa LANDING PAGE tem um painel de gerenciamento ?

[@danielvasconcelosalves969]

Estou aqui so sonhando com esses projeto que tenho na minha cabeça. Como faço para chegar nesse nivel?

[@guilhermeoliveira2380]

Só perguntando ela é responsiva em telas com resolução maiores como qwd 4k 8k?

[@UwodkdBwusokeJulianaRibeiro]

Sempre ouço que div não é semântico, mas comoooo não usar divs se são hiper necessárias, nesse codigo por exemplo se utilizaram varias.

[@diegobezerra8804]

Qual seria a nota de desempenho desse site no page speed do google?

[@athacyrsouzaferreira3529]

Ta lindo

[@leaords8538]

alguém consegue me dizer pq o meu toggLeClass nao ta funcionando? ele nao é sugerido e se eu escrevo ele nao funciona

[@darkoo9898]

tem que por toggleClass o dela ficou toggLeClass devido a fonte dela

[@onemidia_the]

Oi Lari, eu vi aqui, porque você não criou no css para colocar a imagem no responsivo com o #cta

[@gilmattos680]

Qual ou como bota a "visualização movel da pagina" que você mostrou no inicio do video 00:11, valeu pelo ensinamento.

[@ytalomachado3924]

42:20

[@gilmattos680]

valeu mano

[@biancaenrose]

o único erro foi usar divs ao invés de deixar tudo semântico. mas ficou bacana

[@feelipe2885]

Qual curso você fez?

[@natansantos4280]

pq meu mobile menu não some quando coloco none no css

[@hyagoalbuquerque4652]

Larissa, simplesmente não consigo exportar as fontes :(

[@C4mqrg0]

Eu não sei o por que mas a minha navbar não vai de jeito nenhum 😢

[@PedroHenrique-ln3ug]

é alguma extenção que tu usa no chrome para visualizar os modelos moveis ?

[@larissakich]

Oii, sim é simulador de celular o nome, se não me engano

[@kekocardozo8751]

normalmente utilizo o javascript para trocar entre as páginas...

[@samuelfranco6336]

Você usou algum site pra usar como inspiração? Tem algum que a gente possa pegar como inspiração?

[@larissakich]

Oii, gosto de pesquisar no Figma Community exemplos de projetos relacionados com o tema que estou procurando, lá tem vários projetos gratuitos que você pode usar para se inspirar

[@samuelfranco6336]

Obrigado @@larissakich

[@caioalexandre9591]

Como você escolhe a paleta de cores para algum projeto?

[@larissakich]

Eu normalmente vou testando as cores da minha cabeça mesmo, mas gosto de me inspirar nas cores do tailwind

[@nilsonamaral9935]

E projeto de PokeDex, tem alguma previsão de fazer?

[@larissakich]

Oii, ainda não tenho previsão, mas posso trazer sim ☺

[@holisticoraiz5921]

estou tendo problemas na parte mobile... não sei pq o negocio não quer funcionar. Em fim, vida de programador

[@natansantos4280]

comigo tbm não #mobile_menu { display: none; } ele não some

[@eduardamendes5913]

@@natansantos4280 Nossa estou com o mesmo problema!! Vocês conseguiram resolver???

[@jamersongomesdasilva6373]

O meu também. Mesmo problema. Alguém sabe informar pq?

[@natansantos4280]

@@jamersongomesdasilva6373 cara volta no HTML e olha se as DIV estão fechadas corretamente, qualquer coisa vai no codigo que ela deixou na descrição e vê se esta parecido

[@caroolmarcal]

Como coloca imagem em vez do logo?

[@rodrigos2305]

dentro da tag "a" vc pode colocar uma nas aspas vc passa o caminho da sua imagem

[@evertonmartins8075]

E depois como faço para hospedar?

[@araujodev.key87]

usa o vercel

[@williamsnts6500]

Olá! Como posso entrar em contato com você?

[@larissakich]

Oii, você pode mandar um e-mail para [e-mail]

[@williamsnts6500]

@@larissakich Ok! Mandei lá...