Building the Homepage, Part 1: Box Model, Element Families, the Header in Rows, and the Hero Search Bar

Every page is nested boxes; arranging them is the whole skill. Element families: visual (text, button, icon, video, HTML, map), pre-built Components, Containers (group, repeating group, popup, floating group), Input forms, Reusable elements. Each element has Appearance (style, colours, border, shadow), Layout (alignment, width, height, margin, padding) and Conditions (if X then Y, e.g. by screen width). Children inherit the parent's layout; the page is the root. Name every group - 'group header', 'group hero section' - or the element tree is unreadable.

PROCEDURE: 1) Group -> 'group header' -> Layout Row, untick fixed width, remove min width, min height 92 (80 on mobile), fit height to content; 2) padding 10 top/bottom, 20 left/right; 3) 'group internal' (min height 50) holding the logo image (min width 128, height 33-36) and 'group right'; 4) 'group search' = 24 px icon + 'Search' text with 12-20 px margin; 5) Login button: remove style, white background, 1 px primary border, roundness 5-10; 6) right-align and vertically centre 'group right'; 7) 20 px right margin on the search group. Padding is space inside the box, margin outside; gap spacing on the parent can replace per-child margins. Tip: temporary 20%-opacity background colours make boxes visible while you work.

Create 'group menu' (hamburger icon + 'Menu' text). Conditions: on group search and the Login button, 'when current page width < 400 -> visible' unchecked; on group menu, not visible by default and hidden above 400. Tick Collapse when hidden so hidden elements free their space. Test with Chrome's device toolbar or Bubble's Responsive tab.

'group hero section' as Column with Background > Image (hero background image.svg), uncheck scale-to-fit so it fills, min height 900; H1 text (Shift+Enter for a line break - one H1 per page for SEO) and a body text, centred. Search bar: white Row group, max width 50-60% (relative to the parent), roundness 20, top margin ~260; four child Columns (min height 100-120, centred, gap 20) each with a heading and a Dropdown - city/street, property type, budget - and a green round search box with a white icon. Choices are static for now (New York, Washington, San Francisco, Delhi; residential, commercial, industrial, agriculture; budget values) and become dynamic in the Filtering lesson.