Day 26 - 28: Building my first landing page

✍🏻 Log Date: 5 June 2025

For the past 3 days, I focused entirely on real-world project simulations by building reusable UI component and a full landing page. I referenced design challenges from Frontend Mentor, which helped sharpen my skills with hands-on layout building and responsiveness.

📚 What I Studied:
(Skipped — no new studying this cycle as i focused on building.)

🛠️ What I Coded (Highlights):

Order Summary Component

Live Demo: Link
GitHub Repo: Link

• Chose this component because it’s highly practical — useful for nearly any future eCommerce-related project.

• Practiced modular structuring and styling, following BEM naming convention.
  
  

Landing Page for Tech Book Club
This was my first full landing page build, complete with a Hero section, 2 Feature sections, Testimonial section, etc.

Live Demo: Link
GitHub Repo: Link

Took over 12 hours to complete. Laying out every element and handling media queries (desktop, tablet, mobile) felt tedious — but it gave me deep, practical exposure to responsive design.

I realized that using tools like React or Tailwind CSS later on could streamline this process significantly. Despite the time investment, it laid a strong foundation for future landing page projects.

✨ Things I Learned from the Landing Page Build:

1. Gradient Text Effects

   • Used background-clip, -webkit-background-clip, and -webkit-text-fill-color to create text with a gradient fill.

2. Grid Background with Gradient Overlay

   • Built a custom 3-layer background:
   • Horizontal lines
   • Vertical lines
   • A gradient overlay for depth and style

3. Emphasis with Pseudo-elements

   • Applied a circle pattern image using ::before pseudo-element to highlight key words visually.

💡 Reflection:
I still feel slow when positioning elements and writing responsive CSS, but I remind myself that this is part of the learning curve. I'm sure it will become easier the more I build. Next!