Webflow designer overview in No-Code - Mini Project: Build & Apply

Webflow Designer Overview

📖 Scenario: You are learning how to use Webflow Designer to build a simple webpage layout. Webflow Designer lets you visually create websites without writing code by arranging elements and setting their styles.

🎯 Goal: Build a basic webpage structure in Webflow Designer with a header, main content area, and footer using the Designer's visual tools.

📋 What You'll Learn

Create a container element named page to hold the webpage content

Add a header section with the text Welcome to My Website

Add a main content section with a paragraph describing the site

Add a footer section with the text © 2024 My Website

💡 Why This Matters

🌍 Real World

Webflow Designer is used by designers and marketers to build websites quickly without coding, making it easier to launch and update sites.

💼 Career

Knowing Webflow Designer helps in roles like web design, digital marketing, and content management where visual website building is needed.

1

Create the main container

Create a container element called page that will hold all other elements of the webpage.

No-Code

# Create a container element named 'page'
# Your code here

Need a hint?

Use a div element with the id attribute set to page.

2

Add the header section

Inside the page container, add a header element with the text Welcome to My Website.

No-Code

  
  # Your code here

Need a hint?

Use the header tag inside the page container and add the exact text.

3

Add the main content section

Below the header, add a main element with a paragraph containing the text This is a simple website built with Webflow Designer.

No-Code

  Welcome to My Website
  
  # Your code here

Need a hint?

Use a main tag with a p tag inside it containing the exact text.

4

Add the footer section

Below the main section, add a footer element with the text © 2024 My Website inside the page container.

No-Code

  Welcome to My Website
  
    This is a simple website built with Webflow Designer.
  
  
  # Your code here

Need a hint?

Use the footer tag inside the page container with the exact text.