Site build: Hero

Now that you have a solid understanding of the box model, HTML, CSS, and the Webflow Designer, let’s start building! Here we’ll walk through a hero section build (typically the top section of a website homepage) and, along the way, we’ll explore flexbox, CSS styling, and how to add and style visual assets.

00:00 — Introduction 00:32 — Hello Sara 00:47 — Assets 01:00 — Content 01:44 — Flexbox 04:30 — Button 10:44 — App image 14:04 — Recap 14:30 — CTA: Share your hero section design using the #webflow101 on Twitter

Video transcript

</summary>

This is part of the Freelancer's Journey site build series, covering the hero section of the Webflow 101 project site. It walks through building and styling the above-the-fold area of the site — the headline, subheadline, CTA, and hero visual — and how to make it responsive across breakpoints.

</details>

Video details

Duration

15:01

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Site build: Hero",
  "description": "Now that you have a solid understanding of the box model, HTML, CSS, and the Webflow Designer, let’s start building! Here we’ll walk through a hero section build (typically the top section of a website homepage) and, along the way, we’ll explore flexbox, CSS styling, and how to add and style visual assets.",
  "url": "https://university.webflow.com/videos/site-build-hero",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b945f1e20b5bcb8926213c_maxresdefault.webp",
  "duration": "15:01",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=Gp8A55gZnBU",
  "embedUrl": "https://www.youtube.com/embed/Gp8A55gZnBU",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}