Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,483
- Баллы
- 155
? Log Date: 5 June 2025For 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 , 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:
GitHub Repo:
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:
GitHub Repo:
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:
Gradient Text Effects
- Used background-clip, -webkit-background-clip, and -webkit-text-fill-color to create text with a gradient fill.
- Used background-clip, -webkit-background-clip, and -webkit-text-fill-color to create text with a gradient fill.
Grid Background with Gradient Overlay
- Built a custom 3-layer background:
- Horizontal lines
- Vertical lines
- A gradient overlay for depth and style
Emphasis with Pseudo-elements
- Applied a circle pattern image using ::before pseudo-element to highlight key words visually.
- 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!