CAO BA VU

Visual Web Design Guide

This visual guide will walk you through important responsive web design concepts and how to implement them visually inside Webflow.

#1 The box model

Understanding website structure

All the elements on this page are all blocks inside of other blocks (aka “Box Model”). When dragging web elements, you drag them from one block and drop them into another. That’s how HTML works!

try it yourself

Drag this paragraph...

All the features without the limitations. All you can eat. (This is a paragraph element)

TIP: Click and drag the Paragraph element above and drop it under the price on the right. You can also use shortcuts like copy and paste(ctrl+c, ctrl+v), copy while dragging (holding alt), and delete (delete key).

Into the purple block...

INFO: This is how HTML and web structure works - elements stack under each other or inside of each other. That’s the best way to build a fluid and responsive website.

Button Text