67,675 views
Hello everyone! In this video, I'll show you how to create a responsive, animated landing page using HTML, CSS, and JavaScript, with a focus on JQuery. We'll explore using the Scroll Reveal library to add scrolling animations to our page, making it more dynamic and engaging for users. I'll also teach you how to implement a tab-switching menu that adjusts as you scroll through the page, making it easier to navigate between sections. And of course, I'll demonstrate how to use Flexbox to ensure that our landing page is fully responsive across a variety of devices, from desktops to smartphones. Links used in the video: Icons: https://fontawesome.com/ Generate wave: https://www.softr.io/tools/svg-wave-g... Animation Library: https://scrollrevealjs.org/api/reveal... GitHub Repository: https://github.com/Larissakich/landin... Social Networks: LinkedIn: /larissakich Instagram: @dev_em_dev Chapters: 00:00:00 - Introduction 00:01:00 - Project creation 00:03:00 - Header - HTML 00:08:08 - Setting default styles 00:10:35 - Header - CSS 00:16:00 - Header - Responsiveness 00:22:36 - Home - HTML 00:28:25 - Home - CSS 00:39:25 - Home - Responsiveness 00:42:55 - Menu - HTML 00:47:25 - Menu - CSS 00:53:50 - Menu - Responsiveness 00:57:27 - Fixing the Header 00:58:32 - Testimonials - HTML 01:02:40 - Testimonials - CSS 01:06:50 - Testimonials - Responsiveness 01:11:00 - Footer - HTML 01:14:05 - Footer - CSS 01:16:52 - Footer - Responsiveness 01:17:40 - Creating variables 01:25:00 - Header animations 01:33:38 - Animations - ScrollReveal 01:37:54 - Conclusion