Back to Tutorials
30 min
Intermediate

Building a Modern Landing Page

Create a beautiful, responsive landing page with hero sections, features, testimonials, and a call-to-action. Learn layout techniques and component composition.

Introduction

In this tutorial, you'll build a complete landing page with multiple sections: a hero section, features grid, testimonials, and a call-to-action. You'll learn how to compose complex layouts and make them responsive.

1Set Up Your Project

  1. Create a new project called "Landing Page Tutorial"
  2. Start with a clean canvas

2Create the Hero Section

2.1 Main Container

  1. Drag a Div onto the canvas - this will be your hero container
  2. Select it and in Layout:
    • Width: 100%
    • Min Height: 600px
    • Padding: 80px 40px
    • Display: Flex
    • Flex Direction: Column
    • Align Items: Center
    • Justify Content: Center
  3. In Background, set a dark color or gradient

2.2 Hero Heading

  1. Add a Text element inside the hero container
  2. Set text to: "Build Amazing Websites Faster"
  3. Style it:
    • Font Size: 64px (or 6xl)
    • Font Weight: Bold
    • Text Align: Center
    • Color: White
    • Max Width: 800px
    • Margin Bottom: 24px

2.3 Hero Subtitle

  1. Add another Text element
  2. Set text to: "The visual web builder that generates clean, production-ready code"
  3. Style it:
    • Font Size: 20px
    • Color: #999 (light gray)
    • Text Align: Center
    • Max Width: 600px
    • Margin Bottom: 40px

2.4 CTA Buttons

  1. Add a Div container for buttons
  2. Set Display: Flex, Gap: 16px
  3. Add a Button element:
    • Text: "Get Started"
    • Background: #3b82f6 (blue)
    • Text Color: White
    • Padding: 12px 32px
    • Border Radius: 8px
    • Font Weight: 600
  4. Add another button for "Learn More" with outlined style

3Features Section

3.1 Section Container

  1. Add a new Div below the hero (outside of hero container)
  2. Style it:
    • Width: 100%
    • Max Width: 1200px
    • Margin: 0 auto (centers it)
    • Padding: 80px 40px

3.2 Section Heading

  1. Add a Text element: "Features"
  2. Center align it, Font Size: 48px, Bold, Margin Bottom: 16px
  3. Add a subtitle: "Everything you need to build faster"

3.3 Features Grid

  1. Add a Div container
  2. Set Display: Grid
  3. Grid Template Columns: repeat(3, 1fr)
  4. Gap: 32px
  5. For each feature (3 total):
    1. Add a Div (feature card)
    2. Add padding, border radius, background
    3. Add a heading (Text element)
    4. Add a description (Text element)

4Testimonials Section

  1. Create another section container (similar to features)
  2. Add a heading: "What Users Say"
  3. Create a grid with 2-3 testimonial cards
  4. Each card should have:
    • Quote text
    • Author name
    • Author role/company

5Final CTA Section

  1. Add a final section with background color
  2. Center a heading: "Ready to Get Started?"
  3. Add a button: "Start Building Now"
  4. Style it prominently

6Make It Responsive

For mobile responsiveness:

  1. Select your features grid container
  2. In responsive mode (mobile view), change Grid Columns to 1fr (single column)
  3. Adjust padding on mobile to 40px 20px
  4. Reduce font sizes for mobile (e.g., hero heading to 36px)

7Preview and Refine

  1. Click Preview to see your landing page
  2. Test on different device sizes
  3. Make adjustments as needed

Congratulations!

You've built a complete landing page! You've learned:

  • How to create multiple sections
  • How to use flexbox and grid layouts
  • How to style components consistently
  • Basic responsive design principles

Next Steps

Back to TutorialsBrowse Documentation