Web layouts share every tool covered so far, but the canvas is wider and the content usually scrolls, which changes a few habits from app design.
Just like the mobile screen lesson, start from a real preset — "Desktop" at 1440×900 is the most common starting width. Unlike a phone screen, the Frame's height is really just a starting canvas; the actual page keeps going as long as the content does, since a real webpage scrolls.
A nav bar is one of the clearest real-world uses for Auto Layout with a Left + Right constraint on its parent: the logo stays pinned left, the menu links stay pinned right, and the whole bar can stretch to any browser width without anything drifting out of place.
The "hero" is the large heading and single call-to-action right below the nav — it's the first thing a visitor reads, so it carries the biggest type size in the whole page (using the type scale from earlier in this course) and the one button that matters most, exactly like the mobile screen's single clear CTA.
Where a mobile screen is basically one vertical stack, a website landing page is usually a series of horizontal sections stacked vertically — nav, hero, a features row, a footer — each one its own Auto Layout frame with Fill container width, so the whole page reflows correctly if content in any one section changes.
Looking ahead
Build the nav bar and hero section as their own reusable Components once they're final — most websites repeat the exact same header across every page, and a Component means editing it once updates it everywhere.