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

Olá, pessoal!

Neste vídeo, vou te mostrar como criar uma landing page responsiva e com animações usando HTML, CSS e JavaScript, com foco em JQuery.

Vamos explorar o uso da biblioteca Scroll Reveal para adicionar animações de rolagem à nossa página, tornando-a mais dinâmica e atrativa para os usuários.

Além disso, vou ensinar como implementar um menu com troca de abas que se ajusta conforme você rola pela página, facilitando a navegação entre as seções.

E, é claro, vou demonstrar como utilizar o Flexbox para garantir que nossa landing page seja totalmente responsiva em diferentes dispositivos, desde desktops até smartphones.

Links usados no vídeo:

Repositório GitHub:

Redes sociais:
Instagram: @dev_em_dev

Capítulos:
00:00:00 - Introdução
00:01:00 - Criação do projeto
00:03:00 - Header - HTML
00:08:08 - Configurando estilos padrões
00:10:35 - Header - CSS
00:16:00 - Header - Responsividade
00:22:36 - Home - HTML
00:28:25 - Home - CSS
00:39:25 - Home - Responsividade
00:42:55 - Menu - HTML
00:47:25 - Menu - CSS
00:53:50 - Menu - Responsividade
00:57:27 - Fixando o Header
00:58:32 - Testimonials - HTML
01:02:40 - Testimonials - CSS
01:06:50 - Testimonials - Responsividade
01:11:00 - Footer - HTML
01:14:05 - Footer - CSS
01:16:52 - Footer - Responsividade
01:17:40 - Criando variáveis
01:25:00 - Animações no header
01:33:38 - Animações - ScrollReveal
01:37:54 - Conclusão

[brenocastro]

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 🥰

[soraia]

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 <3

[lucassouza]

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.]

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.

[Felpsz]

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

[onemidia_the]

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

[PauloSantos-ycfx]

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

[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 <3

[felipematosodasilva]

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

[NSplay.oficial]

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

[Dorivan]

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

[victoreduardo]

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

[Hamilton-tp]

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

[carlospaixao]

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

[contanatividade]

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

[xnlidmc]

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 Youtube 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-nsod]

ó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.