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.

Practice

1. What is the main purpose of the Webflow Designer?

easy

A. To build websites visually without writing code

B. To write complex backend server code

C. To create mobile apps using drag-and-drop

D. To design logos and graphics only

Solution

1. Step 1: Understand Webflow Designer's core function

   Webflow Designer is a tool that allows users to build websites visually, meaning you do not need to write code manually.

2. Step 2: Compare options with this function

   Options A, B, and D describe tasks unrelated to Webflow Designer's main purpose, which is website building without coding.

3. Final Answer:

   To build websites visually without writing code -> Option A

4. Quick Check:

   Visual website building = To build websites visually without writing code [OK]

Hint: Remember: Webflow Designer = visual website builder [OK]

Common Mistakes:

• Confusing Webflow with coding platforms
• Thinking it builds mobile apps
• Assuming it is for graphic design only

2. Which of the following is a correct way to add an element in Webflow Designer?

easy

A. Typing HTML code manually in a code editor

B. Using command line instructions

C. Writing CSS styles in a separate file

D. Dragging and dropping elements from the Add panel

Solution

1. Step 1: Identify how elements are added in Webflow Designer

   Webflow Designer uses a drag-and-drop interface where you pick elements from the Add panel and place them on the page.

2. Step 2: Eliminate incorrect methods

   Typing HTML, writing CSS files, or using command line are coding methods not used in Webflow Designer's visual interface.

3. Final Answer:

   Dragging and dropping elements from the Add panel -> Option D

4. Quick Check:

   Drag-and-drop = Dragging and dropping elements from the Add panel [OK]

Hint: Add elements by dragging from the panel [OK]

Common Mistakes:

• Thinking you must write code to add elements
• Confusing Webflow with traditional coding
• Assuming command line is needed

3. In Webflow Designer, if you want to make your website look good on phones and tablets, which feature do you use?

medium

A. Adding JavaScript code

B. Manual HTML editing

C. Responsive design controls

D. Using fixed pixel widths only

Solution

1. Step 1: Understand responsive design in Webflow

   Webflow Designer includes responsive design controls that let you adjust how your site looks on different screen sizes like phones and tablets.

2. Step 2: Check other options for relevance

   Manual HTML editing and JavaScript are coding tasks not needed here, and fixed pixel widths prevent responsiveness.

3. Final Answer:

   Responsive design controls -> Option C

4. Quick Check:

   Responsive controls = Responsive design controls [OK]

Hint: Use responsive controls for mobile-friendly sites [OK]

Common Mistakes:

• Thinking fixed widths work for all devices
• Assuming coding is needed for responsiveness
• Ignoring Webflow's built-in responsive tools

4. You tried to style a button in Webflow Designer but the changes don't show on the live site. What is a likely reason?

medium

A. Buttons cannot be customized in Webflow

B. You forgot to publish the site after styling

C. You need to write CSS code manually

D. Webflow Designer does not support button styling

Solution

1. Step 1: Check Webflow's publishing process

   In Webflow, styling changes appear on the live site only after you publish the site. Without publishing, changes stay in the designer preview.

2. Step 2: Evaluate other options

   Webflow supports button styling visually, no manual CSS is needed, and buttons are customizable.

3. Final Answer:

   You forgot to publish the site after styling -> Option B

4. Quick Check:

   Publish changes to see live updates = You forgot to publish the site after styling [OK]

Hint: Always publish after styling to update live site [OK]

Common Mistakes:

• Assuming styling updates live instantly
• Thinking manual CSS is required
• Believing buttons can't be styled

5. You want to create a navigation bar that changes layout on desktop and mobile in Webflow Designer. Which approach is best?

hard

A. Use Webflow's responsive layout tools and style panels for each device

B. Create two separate navbars and hide one on each device

C. Write custom JavaScript to switch navbars based on screen size

D. Use fixed pixel widths so it looks the same everywhere

Solution

1. Step 1: Understand Webflow's responsive design features

   Webflow Designer allows you to adjust layouts and styles for different devices using built-in responsive tools and style panels.

2. Step 2: Compare other approaches

   Creating two navbars is inefficient and can cause maintenance issues. Writing JavaScript is unnecessary in Webflow's no-code environment. Fixed widths prevent proper responsiveness.

3. Final Answer:

   Use Webflow's responsive layout tools and style panels for each device -> Option A

4. Quick Check:

   Responsive tools + style panels = Use Webflow's responsive layout tools and style panels for each device [OK]

Hint: Use responsive tools, avoid duplicate elements [OK]

Common Mistakes:

• Duplicating navbars instead of using responsive styles
• Trying to add custom code unnecessarily
• Using fixed widths that break layouts