When you first open a project, you're looking at the Webflow Designer. This is your canvas. It’s a visual way to build with the core technologies of the web: HTML and CSS. Instead of writing code, you add elements and style them directly on the screen.

The Designer is powerful, but you only need to focus on a few key areas to get started. Most of your work will happen using three main panels: the Add panel, the Navigator, and the Style panel. Let's look at the two you'll use most for arranging and styling.

The Navigator panel is on the left side. It shows you the structure of your page as a hierarchical list. Every element you add, from a section to a button, appears here. Think of it like an outline for a document or the layers panel in a design program. It helps you see how elements are nested inside one another, which is crucial for organizing your content.

The Style panel, on the right, is where you control how everything looks. Once you select an element in the Designer or the Navigator, the Style panel updates to show all its properties. Here you can change colors, fonts, sizes, and spacing. It's your visual interface for CSS.

To understand how to space elements using the Style panel, you need to know about the box model. It's a fundamental concept in web design. Every single element on your page—a paragraph, an image, a button—is treated as a rectangular box.

This box is made of four parts, layered like an onion:

1. Content: This is the core of the box. It’s your text, image, or video.
2. Padding: The transparent space around the content, inside the border. Think of it as the matting around a photo in a picture frame. It pushes the content away from the frame.
3. Border: The frame itself. The border goes around the padding and content. You can set its thickness, color, and style.
4. Margin: The transparent space outside the border. Margin pushes other elements away from this box. It’s the space between this picture frame and the next one on the wall.

Understanding these three things—the Designer, the core panels, and the box model—is the first major step. With this foundation, you can start building and styling your first webpage in Webflow.