📖 Step 4: Design - Research & Process#100 / 291
Above the Fold
Above the Fold
📖One-line summary
The portion of a page visible without scrolling.
✨Example
🌐 Website
Hero banner
CTA button
── Fold line ──
↓ Area below the fold ↓
👆 Above the fold👇 Below the fold
⚡Vibe coding prompt examples
>_
Optimize the above-the-fold area of a landing page. Arrange the hero image, core copy, and CTA button so they are visible without scrolling.
>_
Prioritize loading for above-the-fold content and apply lazy loading for the rest. The goal is improving LCP.
>_
Build a hero section that fills exactly 100vh to match the viewport height for the above-the-fold area. Handle the mobile address bar case too.
Try these prompts in your AI coding assistant!