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 09 · Projects · 7:14

Build & Publish a Complete Website in Webflow

Add a navbar, about section and footer, link everything, turn navbar and footer into components, write SEO, check mobile and publish Chai Corner live.

✓ Free plan Cheat sheet Quiz · 4 questions
Build & Publish a Complete Website in Webflow video

💡Key ideas

Add a navbar, about section and footer, link everything, turn navbar and footer into components, write SEO, check mobile and publish Chai Corner live.

A site is a restaurant

The navbar is the signboard and the door, sections are rooms, the footer is the address card on the counter. Build the door and card once, use them everywhere.

IDs and anchor links

An ID is a room number. A link to #about jumps straight to that room on the same page.

Components

Build once, use on many pages. Edit the component and every copy updates, like fixing a rubber stamp.

SEO per page

Every page gets its own title tag and meta description. That is your Google search result.

🏷️
REAL-WORLD EXAMPLEA rubber stamp: fix the stamp once and every print is correct. That is a component.

⏱️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.

Structure

Links

Components, SEO, publish

⚙️Link types

NeedLink typeExample
Jump to a section on the same pageURL with ##about
Open another page of the sitePageContact
Open another websiteURLhttps://…
Email / phoneEmail / Phonehello@…

⚠️Common mistakes

✕Dropping a layout inside the selected element (navbar inside the hero). Select Body first.
✕Copy-pasting the navbar to every page instead of a component, then editing it 5 times.
✕Same title tag on two pages. Every page needs its own title and description.

🧠Recap & quiz

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

Recap: Why did we make the navbar and footer into components?

A component is built once and used on many pages. Edit it once and every copy updates, so the navbar and footer stay the same everywhere.

Q1 of 4 · You want the About link to scroll to the about section on the same page. What do you do?

The hash jumps to the element with that ID.

Q2 of 4 · Safest way to link to the Contact page?

If you rename the page, the link still works.

Q3 of 4 · What happens when you edit a component?

Fix the stamp once, every print is correct.

Q4 of 4 · On the free plan you publish to…

A custom domain needs a paid site plan.
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

Animations & Interactions

❓FAQ & key terms

How do I publish a Webflow site for free?

Click Publish, tick the webflow.io domain and publish to selected domains.

What are components in Webflow?

Reusable elements. Edit once, update everywhere.

How do I add SEO titles?

Open Page settings, write a title tag and meta description, and check the Google preview.

NavbarComponentSection IDMeta description

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