Meet Landing Page with CUBE CSS & Responsive Images

What are you most proud of, and what would you do differently next time?

I’m most proud of treating this project as an architectural exercise rather than just a layout replication. Instead of focusing only on visual accuracy, I implemented a structured CUBE CSS architecture with a clear separation between composition, blocks, and semantic design tokens.

I’m also proud of deeply understanding and correctly implementing responsive images. After measuring real rendered dimensions in DevTools, I recalculated image sizes to reduce oversized downloads and improve Lighthouse performance.

Next time, I would define the responsive image strategy and performance targets at the very beginning of the project. I would also consider automating image optimization to streamline the workflow.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was understanding how browsers actually select images with srcset and sizes. Initially, I assumed image selection was breakpoint-based, but I learned that it depends on rendered width and device pixel ratio.

To overcome this, I:

• Measured real rendered sizes in DevTools
• Calculated retina-safe image variants
• Adjusted sizes values based on actual layout behavior
• Validated results using Lighthouse and Network tools

Another challenge was handling image cropping without distortion in the hero section. I resolved this by relying on container sizing combined with object-fit: cover rather than forcing conflicting dimensions.

What specific areas of your project would you like help with?

I would appreciate feedback on:

• Whether my semantic token system is scalable for larger projects
• My implementation of CUBE CSS and separation of composition vs blocks
• Further performance optimization opportunities (especially LCP improvements)
• Whether introducing container queries would meaningfully improve this layout

I’m particularly interested in improving architectural decision-making and writing CSS that scales beyond small challenges.