Webflow Course - Full Syllabus & Session Plan

S2 - Project Settings & Starter Styleguide

• We’ll do: time zone, subdomain, indexing, fonts, assets; start Styleguide page.

• Why: clean setup prevents SEO/meta/font issues.

• Outcome: fonts installed, tokens scaffolded.

• Homework: customize a provided wireframe with your text/buttons/colors.

S3 - HTML/CSS Mental Model (No Code) + Client First Basics

• We’ll do: box model, cascade, inheritance, positioning (visual); Client‑First naming, combo classes, variables/tokens.

• Why: predictable styling → fewer layout surprises.

• Outcome: color/type/spacing tokens; base text & headings.

• Homework: complete Styleguide: text styles, buttons, containers.

S4 - Layout Logic: Flexbox & Spacing Systems

• We’ll do: Flexbox essentials, alignment, gaps; px/rem/%/vh; container & max‑width strategy.

• Why: spacing and alignment are 90% of layout confidence.

• Outcome: reusable section pattern with correct spacing.

• Homework: finish Flexbox Froggy (1-24); rebuild one section from Figma.

S5 - Hero & Above the Fold

• We’ll do: hierarchy, button states, media handling, white space; build the hero.

• Why: first screen = most leverage for clarity.

• Outcome: responsive hero with CTA.

• Homework: refine hero copy; optimize hero imagery.

S6 - Sections & Responsiveness Basics

• We’ll do: breakpoints, mobile IA, image ratios, choreography; build About/Features.

• Why: most traffic is mobile; decisions here prevent later rebuilds.

• Outcome: two sections responsive on all breakpoints.

• Homework: test on 3 devices; list and fix top 5 issues.

S7 - Core Components I: Navbar & Footer

• We’ll do: semantic nav, sticky vs static, skip links; footer IA & legal.

• Why: navigation & footer drive trust, findability, and SEO.

• Outcome: accessible navbar + footer wired to sections.

• Homework: add a simple scroll‑fade interaction with reduced‑motion support.

S10 - Project Cards (Static) & Grid Variants

• We’ll do: card anatomy (image, badge, title, meta, CTA), grid vs masonry, image ratios.

• Why: cards are the portfolio backbone; done once, reused forever.

• Outcome: 3-6 project cards with hover states.

• Homework: standardize card copy; prep 4:3 & 16:9 crops.

S11 - Forms That Don’t Suck

• We’ll do: labels vs placeholders, validation, error/success states, spam basics.

• Why: forms convert interest to leads; clarity = revenue.

• Outcome: fully tested contact form with keyboard nav.

• Homework: field naming & success/thank‑you logic written.

S12 - Navbar, Professionally

• We’ll do: dropdowns, anchor offsets, active states, mobile patterns, sticky subtleties.

• Why: frictionless navigation retains users.

• Outcome: bulletproof nav across breakpoints.

• Homework: QA anchors/dropdowns on mobile; fix 3 issues.

S13 - Logos Strip / Marquee

• We’ll do: horizontal scroller patterns, speed control, pause on hover, reduced‑motion fallback.

• Why: social proof without junk.

• Outcome: smooth logos scroll with a11y safeguards.

• Homework: alt text and logical reading order for brands.

S14 - Testimonials & Social Proof

• We’ll do: single vs slider.

• Outcome: testimonial block (and slider variant) CMS‑ready.

• Homework: source 1-3 quotes; standardize formatting.

S15 - FAQ Accordion & Sticky Elements

• We’ll do: disclosure pattern, keyboard support, ARIA; sticky usage.

• Why: FAQs help with AEO accessible accordions.

• Outcome: FAQ with keyboard nav; one sticky element.

• Homework: write 6 FAQs that remove real objections.

S18 - Rich Text (RTE) & Long Form Styling

• We’ll do: global RTE styles, nested elements, quotes, figure captions, embeds.

• Why: long‑form collapses without standards; RTE saves hours.

• Outcome: elegant, reusable RTE system.

• Homework: convert one case study into structured RTE content.

S19 - Accessibility Review

• We’ll do: alt‑text patterns, focus order, heading structure, color tokens, reduced‑motion.

• Why: ethics + craft + fewer rewrites later.

• Outcome: a11y checklist complete; top pitfalls fixed.

• Homework: screen‑reader spot check; document 3 improvements.

S20 - SEO Essentials

• We’ll do: meta titles/descriptions, OG images, URL structure, sitemap/robots basics.

• Why: findability is money; setup is cheap now.

• Outcome: SEO set for static pages + CMS template defaults; OG assets exported.

• Homework: write metas for all pages; verify with a preview tool.

S21 - Dynamic Templates & Related Lists

• We’ll do: Project Template page, dynamic fields, conditional visibility, Related Projects.

• Why: from one‑off to system.

• Outcome: fully styled Project Template pulling real CMS content.

• Homework: add 2 more CMS items; validate edge cases.

S22 - Filters & Listing UX

• We’ll do: Projects index with tag filters/sort, empty states; simple conditional visibility solution.

• Why: browsing comfort ↑ inquiries.

• Outcome: projects index with working filters; clear empty/error states.

• Homework: usability test: a friend finds X in <60s; capture friction.

S23 — Handoff, Hosting & Client Expectations

• We’ll do: onboarding checklist, backups, asset hygiene; roles/permissions; DNS/hosting; staging vs prod.

• Why: professionalism → referrals.

• Outcome: handoff packet (links, credentials map, processes) + hosting ready.

• Homework: final QA list; plan go‑live window.