Webflow designer overview in No-Code - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the main design area in Webflow Designer.

No-Code

Click on the [1] panel to start designing your website.

Drag options to blanks, or click blank then click option'

APages

BSettings

CCanvas

DAssets

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a panel that manages files or pages instead of the design area.

The Canvas panel is the main design area where you visually build your website in Webflow Designer.

2fill in blank

medium

Complete the code to add a new element in Webflow Designer.

No-Code

To add a new element, click on the [1] panel and drag the element onto the Canvas.

Drag options to blanks, or click blank then click option'

AAdd

BNavigator

CStyle

DInteractions

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting the Style panel which is for styling elements, not adding them.

The Add panel contains all the elements you can drag onto the Canvas to build your website.

3fill in blank

hard

Fix the error in the statement about styling elements in Webflow Designer.

No-Code

To change colors and fonts, use the [1] panel.

Drag options to blanks, or click blank then click option'

AStyle

BNavigator

CAdd

DPages

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the Style panel with the Add panel or Navigator panel.

The Style panel is where you adjust colors, fonts, spacing, and other visual properties of elements.

4fill in blank

hard

Fill both blanks to correctly describe the Navigator panel and its function.

No-Code

The [1] panel shows the [2] of all elements on the page.

Drag options to blanks, or click blank then click option'

ANavigator

BStyle

CHierarchy

DAdd

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the Navigator with the Style or Add panels.

The Navigator panel displays the hierarchy, or structure, of all elements on the page, helping you manage nested elements easily.

5fill in blank

hard

Fill all three blanks to complete the statement about publishing a website in Webflow Designer.

No-Code

After designing, click [1] to open the [2] menu, then select [3] to make your site live.

Drag options to blanks, or click blank then click option'

APublish

BSite

CPublish to Selected Domains

DSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Settings with Publish or missing the correct menu options.

To publish your website, you click the Publish button, open the Site menu, and then choose Publish to Selected Domains to make your site live on the web.