Beginner6 min readShare
Was this chapter helpful?
Share
Try these free tools
Common page layouts you'll build with AI. Know the structure, know the sections, and describe them precisely.
The classic marketing page. Designed to convert visitors into users.
"Create a landing page with a hero section, 3-column features grid, testimonials carousel, pricing table with 3 tiers, FAQ accordion, and footer."
Admin or app dashboard with sidebar navigation and data panels.
"Create a dashboard layout with a collapsible sidebar on the left, a top bar with search and user avatar, stat cards, a data table, and a chart section."
Content-focused layout optimized for reading.
"Create a blog post layout with a centered article (max-w-3xl), table of contents sidebar on desktop, author bio card at bottom, and related posts grid."
Product listing and shopping experience.
"Create an e-commerce product listing page with a filter sidebar on the left, product cards in a 3-column grid, each with image, name, price, and Add to Cart button."
Showcase your work and skills.
"Create a personal portfolio with a hero showing my name and title, an about section, skills badges, project cards with screenshots, and a contact form."
Software application with authentication and user flows.
"Create a SaaS app layout with a top navbar, sidebar navigation, main content area, and a settings page with tabs for Profile, Billing, and Notifications."
Technical docs with searchable sidebar navigation.
"Create a documentation site layout with a searchable sidebar on the left, main content with code blocks in the center, and on-page nav (table of contents) on the right."
Content feed with posts, likes, and comments.
"Create a social media feed layout with a navigation bar, a centered feed of post cards (max-w-2xl), and a right sidebar with trending topics and suggested users."
Copy-paste these prompts into your AI tool to apply what you just learned.
CREATE A PAGE LAYOUT
"Create a responsive page layout with a [sidebar / header / grid] using CSS Grid or Flexbox. It should work on mobile, tablet, and desktop. On mobile, stack everything vertically. On desktop, show the full layout."
BUILD A DASHBOARD LAYOUT
"Build a dashboard layout with a fixed sidebar on the left (240px wide), a top header bar (64px tall), and a scrollable main content area. The sidebar should collapse to icons on tablet and become a hamburger menu on mobile."
BUILD A LANDING PAGE
"Create a landing page layout with these sections in order: navbar, hero with headline and CTA button, 3-column features grid, testimonials, pricing table with 3 tiers, FAQ accordion, and a footer. Make it fully responsive."
