Frontend Mentor - Bookmark Landing Page Solution

This is a solution to the Bookmark landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size 📱💻
• See hover states for all interactive elements on the page 🖱️
• Receive an error message when the newsletter form is submitted if:
  • The input field is empty ❌
  • The email address is not formatted correctly 📧

Screenshot

Links

• Solution
• Live Site

My process

Built with

• Semantic HTML5 Markup 🏷️
• Tailwind CSS - For styling effortlessly 💅
• JavaScript - For interactive elements ✨
• Webpack - To bundle my assets 📦
• GSAP for animations 🎨💥

What I learned

This project was so much fun! 🎉 I learned a lot about GSAP animations and how to make them interactive and responsive. Here are some cool snippets:

gsap.to(".disp-img", {
  scrollTrigger: {
    trigger: ".disp-img",
    scrub: 0.1,
    start: "top 240px",
  },
  yPercent: 33,
  scale: 1.1,
});

I also got better at using Intersection Observer API for lazy loading sections and adding animations. Check this out:

const reveal = (entries, observer) => {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  entry.target.classList.remove("section--hidden");
  observer.unobserve(entry.target);
};
const revealSectionObserver = new IntersectionObserver(reveal, {
  threshold: 0,
});
allRevealSection.forEach((sect) => revealSectionObserver.observe(sect));

I also implemented cool scroll-triggered animations like text trick using the Intersection Observer API and many more. 🌟

Continued Development

Moving forward, I want to focus on:

• Enhancing my animation skills using GSAP 🎥
• Improving my understanding of responsive design principles for - better layouts on all devices 📐
• Digging deeper into accessibility to make my websites more user-friendly ♿
• I am also yet to implement the animated carousel i wish to implement

Author

Feel free to reach out if you have any questions or suggestions. I’d love to hear from you! 😊

• Email: [email protected]
• LinkedIn: Abdullah Saleeman
• GitHub: My GitHub Profile
• Twitter: @naijadevgamer
• Instagram: @naijadevgamer

Acknowledgments

I extend my gratitude to the Almighty ALLAH for guiding me through this project.

These resources were invaluable during my project:

• GSAP Documentation - This helped me understand how to use GSAP for animations. It's very detailed and easy to follow.
• Tailwind CSS Documentation - A great reference for using Tailwind CSS. It made styling so much easier!