Thursday, November 5, 2026 New tutorials published every day
About Contact
Subscribe
Home
Tutorials
Core PHP PHP Course JavaScript React & Next.js Python WordPress Artificial Intelligence
Free Tools
JSON Formatter Base64 Encoder / Decoder Password Generator Text to QR Code Generator Word Counter Case Converter Age Calculator Color Converter Number to Words All Free Tools
Projects
PHP Projects — all projects
Students
Webflow Course Course Registration Download Syllabus Verify Certificate Student Leaderboard
Resources
WordPress Plugins Search tutorials About CodingCush Contact
More
Login
Lesson 01 · Basics · 6:24

What is Webflow? Complete Beginner Guide

What Webflow is, its three parts (Designer, CMS, Hosting), who should learn it, and how to start for free.

✓ Free plan Cheat sheet Quiz · 4 questions
What is Webflow? Complete Beginner Guide video

💡Key ideas

What Webflow is, its three parts (Designer, CMS, Hosting), who should learn it, and how to start for free.

Webflow builds visually, writes real code

You drag elements, style them and see the result right away. Underneath, Webflow writes real HTML, CSS and JavaScript, so it works like real web development, only visual.

Part 1: The Designer

Where you build your website. Canvas in the middle, elements and structure on the left, styles on the right.

Part 2: The CMS

Stores content like blog posts, team members or products. Design one template, and Webflow fills it with each item.

Part 3: Hosting

Click Publish and your site goes live, fast and secure. No separate hosting or server setup.

☕
REAL-WORLD EXAMPLEA café with twenty menu items: design the menu item once in the CMS, then just add content. If a price changes, you update one field and the website updates everywhere.

⏱️Chapters

Click a chapter to jump to that moment in the video.

📋Step-by-step

Tick each step as you build it in your own site. Your ticks are saved.

Start with Webflow for free

⚙️Who is Webflow for?

You are a…Why Webflow helps
DesignerYour design goes live exactly as planned
FreelancerBuild client websites faster, hand over editing safely
Student / beginnerA job-ready skill that also teaches how websites work
FounderLaunch and edit your own website without a developer
MarketerBuild landing pages without waiting for a developer

⚠️Common mistakes

✕Thinking Webflow is a simple drag-and-drop builder. It uses real web ideas: boxes, classes, Flexbox and Grid.
✕Choosing Webflow for a very large online store. Shopify is often the better fit there (Lesson 2).
✕Paying before you need to. The free Starter plan is enough for the whole course.

🧠Recap & quiz

First the recap question from the video, then the quiz. Your best score is saved.

Recap: Can you name the three main parts of Webflow?

The Designer (build and style), the CMS (manage content) and Hosting (publish live).

Q1 of 4 · A café has 20 menu items. What should you use?

Design once, add content, every page updates by itself.

Q2 of 4 · What does Webflow write while you design visually?

That is why Webflow works like real web development.

Q3 of 4 · Where do you build and style pages?

The Designer is the visual editor.

Q4 of 4 · Which plan do you need to start?

Start free; upgrade only for a custom domain or more pages.
Your score 0 / 4 Answer all questions to save your score

🏠Homework

Do this on your own site before the next lesson.

Next lesson →
← PREVIOUS

Course intro & roadmap

❓FAQ & key terms

Do I need to know coding to use Webflow?

No. You can build a complete website without code. Knowing the ideas behind it (classes, box model, Flexbox, Grid) helps, and Lesson 4 teaches them.

Is Webflow free?

You can build and publish a small site free on a webflow.io address. A paid site plan adds a custom domain and more pages.

Is Webflow good for e-commerce?

Webflow can sell products, but for a very large store Shopify is usually better. Lesson 2 compares them.

DesignerCMSHostingwebflow.io

Lesson 01 of 11 · All cheat sheets · Watch on YouTube