90-Day Webflow Web editing tool study plan

 

Welcome to the course! As your web design and development instructor, I've transformed your 90-Day Webflow study plan into an actionable lecture guide. Webflow translates visual layouts directly into clean HTML, CSS, and JavaScript.

Every single day below includes step-by-step instructions details—what canvas controls to click, which Style panel properties to adjust, and the exact design mechanics at play.

Phase 1: Foundations (Days 1–20)

Day 1: Interface Basics

Visualizing Webflow as a visual engine over standard HTML/CSS helps demystify the UI. Today, you'll master navigation across Webflow's four core panels.

Step-by-Step Instructions

1. Access Webflow Dashboard:

   • Log into webflow.com and click + New Site.

   • Select Blank Site, name your project Webflow-Foundations, and click Create Site.

2. Explore Primary Panels:

   • Left Sidebar:

     • Add Elements (A): Holds HTML structure elements (Sections, Containers, Div Blocks, Text, Forms).

     • Navigator (Z): The DOM tree showing nested parent-child visual relationships.

     • Pages (P): Manage site routes and dynamic template settings.

     • Assets (J): Upload manager for images, SVGs, Lottie, and documents.

   • Right Sidebar:

     • Style Panel (S): Visual CSS editor for layouts, typography, backgrounds, and positions.

     • Element Settings (D): Adjust attributes, link settings, and component configurations.

     • Style Selectors: Manage CSS classes and combo classes.

     • Interactions (H): Create triggers, keyframes, and scroll animations.

3. Master Navigation & Shortcuts:

   • Click anywhere on the central Canvas.

   • Hold Spacebar and drag to Pan across the canvas.

   • Hold Ctrl (or Cmd) and scroll your mouse wheel to Zoom in and out.

   • Press Ctrl + Shift + P (or Cmd + Shift + P) to toggle preview mode and test live hover/click states.

Day 2: Pages

Webflow allows you to manage static page routing and site structure right from the sidebar.

Step-by-Step Instructions

1. Open Pages Panel:

   • Press P on your keyboard to open the Pages panel.

2. Create New Pages:

   • Click the Create New Page icon (top right of the Pages panel).

   • Under Page Name, type About. Notice Webflow auto-generates the URL slug (/about). Click Create.

   • Repeat the process: Click Create New Page, type Contact (slug: /contact), and click Create.

3. Reorder Page Hierarchy:

   • Inside the Pages panel, click and drag the About and Contact pages to reorder them under Home.

   • Hover over the Home page, click the gear icon (Page Settings), and inspect title tags, open graph settings, and custom code areas before closing.

Day 3: Sections

A <section> is a structural block spanning the full width of the viewport, acting as a container for major page areas (e.g., Hero, Features, Footer).

Step-by-Step Instructions

1. Insert a Section:

   • Open the Add Elements panel (A).

   • Under Structure, drag a Section element directly onto the blank canvas.

2. Assign CSS Class & Dimensions:

   • With the Section selected, click into the Selector field in the Style panel (S).

   • Type Section Hero and press Enter.

   • Scroll to Size in the Style Panel and set Min-H (Minimum Height) to 100vh (100% of Viewport Height).

3. Apply Visual Backgrounds:

   • Scroll down to the Backgrounds section in the Style panel.

   • Click + next to Image & Gradient.

   • Choose Color and set a dark slate tone (#0F172A).

Day 4: Containers

A Container keeps your main content centered on screen with fixed side margins, preventing content from stretching endlessly on ultra-wide displays.

Step-by-Step Instructions

1. Nesting a Container:

   • Select your newly created Section Hero in the Navigator panel (Z).

   • Open the Add Elements panel (A) and drag a Container into the section.

2. Understand Layout Constraints:

   • Webflow's default Container comes pre-styled with a Max-Width of 940px (or 1200px depending on your canvas settings) and Auto left/right margins.

3. Custom Container Styling:

   • In the Style panel, create a new class called Container Main.

   • Set Max Width to 1200px.

   • Go to Spacing and add 20px padding to the Left and Right sides to prevent content from touching edge boundaries on smaller displays.

Day 5: Text Elements

HTML relies on semantic text elements for readability and search engine optimization (SEO).

Step-by-Step Instructions

1. Insert Headings and Paragraphs:

   • Select Container Main in the Navigator.

   • Press A and drag an H1 Heading into the Container.

   • Drag a Paragraph below the Heading.

   • Drag a Text Link below the Paragraph.

2. Apply Semantic & Typographic Hierarchy:

   • Double-click the Heading and change the text to Master Visual Web Development.

   • In the Style panel, assign the class Heading Primary.

   • Adjust Typography settings:

     • Font: Inter (or System UI)

     • Size: 56px

     • Height (Line Height): 1.1em

     • Weight: 700 - Bold

     • Color: #FFFFFF

3. Style Paragraph Text:

   • Give the Paragraph the class Text Lead. Set Size to 18px, Line Height to 1.6em, and Color to #94A3B8. Add 24px margin to the bottom.

Day 6: Buttons

Buttons trigger visual navigation or form submits while signaling interactive intent to site visitors.

Step-by-Step Instructions

1. Add and Style a Button Element:

   • Select Container Main and press A. Drag a Button element below your text link.

   • In the Style panel, name the class Button Primary.

2. Apply Layout and Spacing:

   • Set Padding: Top/Bottom 14px, Left/Right 28px.

   • Under Backgrounds, set Background Color to #3B82F6 (Electric Blue).

   • Under Borders, set Radius to 8px.

3. Configure Hover States:

   • At the top of the Style panel, click the state dropdown arrow next to the class name (labeled States).

   • Select Hover.

   • Change the Background Color to #2563EB (a slightly darker blue shade).

   • Switch back to the None state. Scroll to Effects > Transitions, add a transition for Background Color over 200ms ease. Click preview mode (Ctrl + Shift + P) and test the smooth color change on mouse hover.

Day 7: Images

Proper asset handling ensures fast asset delivery without sacrificing visual clarity.

Step-by-Step Instructions

1. Upload Assets:

   • Press J to open the Assets panel.

   • Click the Upload button and select a high-resolution image file (PNG/JPEG/WebP) from your device.

2. Place Image Element:

   • Drag an Image element into your Container.

   • In the Image Settings panel that automatically opens, click Choose Image and select your uploaded asset.

3. Optimize Asset Properties:

   • Under Image Settings, check Responsive to allow auto-scaling.

   • In the Alt Text dropdown, select Custom and enter a descriptive text string (e.g., Developer working on Webflow design canvas).

   • Give the image a class Hero Image. Set Width to 100%, Max Width to 800px, and Border Radius to 12px.

Day 8: Backgrounds

Background options allow you to layer solid colors, multi-stop gradients, or full-width visual assets behind page components.

Step-by-Step Instructions

1. Add Background Layer:

   • Select Section Hero on the canvas.

   • Scroll down to Backgrounds in the Style Panel (S).

2. Create Linear Gradient Overlays:

   • Click + to add a new background layer. Choose Linear Gradient.

   • Set the Gradient Angle to 180deg.

   • Set Stop 1 (0%) to #0F172A at 100% opacity.

   • Set Stop 2 (100%) to #1E293B at 100% opacity.

3. Add Background Image Texture:

   • Click + again to add a second layer below the gradient. Choose Image.

   • Pick an abstract grid pattern SVG asset from your library.

   • Set sizing to Contain or Cover, alignment to Center, and Tile mode to Tile. Reduce layer opacity to 10% for a subtle pattern overlay.

Day 9: Navigator

The Navigator panel displays the HTML DOM hierarchy, making it easy to track complex nested elements.

Step-by-Step Instructions

1. Open and Dock Navigator:

   • Press Z to open the Navigator.

2. Re-parent Nested Elements:

   • Drag and drop elements inside the tree to reorder or re-parent them (e.g., move the Hero Image above your text elements inside Container Main).

3. Clean Up Structure:

   • Select any redundant or empty div blocks and press Delete.

   • Expand all parent branches using the Right Arrow key, and collapse them using the Left Arrow key to maintain a clean workspace.

Day 10: Style Panel

The Style panel gives you control over box model properties: margins, padding, border radii, and drop shadows.

Step-by-Step Instructions

1. Box Model Configuration:

   • Select your Button Primary element.

   • In the Spacing diagram, click and hold on the Margin controls. Hold Shift while dragging to apply equal margin values to all four sides simultaneously.

2. Border and Shadow Configuration:

   • Scroll down to Borders. Set Border Style to Solid, Width to 1px, and Color to rgba(255, 255, 255, 0.2).

   • Scroll to Effects > Box Shadows. Click +.

   • Configure shadow parameters:

     • Angle: 180deg

     • Distance: 10px

     • Blur: 20px

     • Color: rgba(59, 130, 246, 0.3) (creates a subtle colored glow effect under the button).

Days 11–15: Build a 3-Page Static Website

Now, put Phase 1 into practice by building a 3-page marketing site for a personal portfolio or startup agency.

Project Requirements

1. Pages Required: Home, About, Contact.

2. Structure Each Page:

   • Include a Navbar Section, Hero Section, Features/Content Section, and Footer Section.

3. Execution Steps:

   • Use semantic structure (Section > Container > Div Block / Text / Image).

   • Create consistent design rules across pages using shared classes (e.g., Section Baseline, Heading Primary, Button Primary).

   • On the Contact page, structure a basic layout ready to hold form components later.

Days 16–20: Practice Styling

Refine your design system using typography rules, structured color scales, and consistent spacing variables.

Exercises & Setup

1. Global Style Guide Page:

   • Create a page named Style Guide (slug: /style-guide).

   • Insert H1, H2, H3, Paragraph, Button, and Color Swatch blocks on this page.

2. Style Base Tags (HTML Tag Selectors):

   • Click an H1 element, select the Selector field, and click All H1 Headings.

   • Define baseline font properties globally so every new H1 tag inherits these styles automatically across your site.

   • Repeat for All Paragraphs and All Body Pages (setting baseline global font families and background colors).

Phase 2: Core Web Design (Days 21–40)

Day 21: CSS Classes

Classes let you apply a single set of style rules across multiple elements. Combo classes build on those base styles to introduce slight visual variations.

Step-by-Step Instructions

1. Create Base Class:

   • Drag a Div Block onto the canvas. Name the class Card.

   • Style Card: Background #1E293B, Padding 32px, Border Radius 16px, Border 1px solid #334155.

2. Apply Combo Classes:

   • Duplicate the Card block (Ctrl + D).

   • Click into the Selector field directly next to Card, type Featured, and hit Enter.

   • With the combo selector active (Card + Featured), change the Border Color to #3B82F6 and set the Background to #0F172A.

3. Observe Inheritance:

   • Modify the padding on base Card to 40px. Notice how Card Featured inherits this update while retaining its unique border and background colors.

Day 22: Flexbox

Flexbox is a 1D layout model designed to arrange child elements horizontally in rows or vertically in columns.

Step-by-Step Instructions

1. Setup Flex Container:

   • Create a Div Block named Flex Row.

   • In the Style panel under Layout, set Display to Flex (Flex Layout).

2. Configure Flex Controls:

   • Direction: Set to Row (Horizontal Axis).

   • Justify (Main Axis): Select Space-Between to push elements to opposite ends.

   • Align (Cross Axis): Select Center to vertically align items.

   • Gap: Set Row/Column Gap to 24px to space child items consistently without using manual margins.

3. Nested Flex Layouts:

   • Inside Flex Row, place an Icon and a Text block. Turn their parent wrapper into a Flex layout set to Direction: Column to stack them neatly.

Day 23: Grid

CSS Grid is a 2D layout engine built to handle row-and-column arrangements simultaneously.

Step-by-Step Instructions

1. Create Grid Layout:

   • Add a Div Block to your container and assign it the class Grid Gallery.

   • In the Style panel under Layout, set Display to Grid.

2. Configure Rows, Columns, and Gaps:

   • In the layout popup, click + Add Column so you have 3 equal columns (1fr 1fr 1fr).

   • Click + Add Row to set up 2 rows (1fr 1fr).

   • Set Column and Row Gaps to 32px. Click Done.

3. Position Child Items:

   • Drag 6 Card blocks into the Grid layout.

   • Select the first Card block. In the Style Panel under Grid Child, set Column Span to Span 2. Notice how the card expands across two columns while the surrounding cards reflow around it automatically.

Day 24: Responsive Design

Webflow uses cascading media queries based on a desktop-first workflow. Styles flow down to smaller devices and up to larger breakpoints.

[ Large Screens ] <-- [ Desktop (Base) ] --> [ Tablet ] --> [ Mobile Landscape ] --> [ Mobile Portrait ]

Step-by-Step Instructions

1. Switch Breakpoints:

   • Locate the Breakpoint Bar at the top of the canvas: Desktop (Base), Tablet (768px), Mobile Landscape (567px), Mobile Portrait (320px).

2. Adjust Tablet Styles (768px):

   • Click the Tablet breakpoint icon.

   • Select your Grid Gallery. Change the grid layout configuration from 3 columns to 2 columns (1fr 1fr).

3. Adjust Mobile Portrait Styles (320px):

   • Switch to Mobile Portrait.

   • Select Grid Gallery and change the grid setup to 1 column (1fr).

   • Select your Heading Primary and decrease the Font Size from 56px to 32px.

   • Click back to Desktop (Base) to confirm desktop font size remains 56px.

Day 25: Components (Formerly Symbols)

Components let you turn recurring elements (like headers, navigation bars, and footers) into master templates that update site-wide when edited.

Step-by-Step Instructions

1. Create a Component:

   • Build a navigation layout: Insert a Section (Section Nav), a Container, a Logo Image, and link blocks.

   • Select Section Nav in the Navigator.

   • Right-click and choose Create Component (or press Ctrl + K and type Create Component).

   • Name the component Main Navbar.

2. Override Instance Properties:

   • Double-click the component instance to enter edit mode.

   • Select an internal Text Link element, right-click, and select New Property Override. Name it Link Text.

   • Exit component editing mode. You can now change the button text on individual instances without breaking the master layout link across pages.

Day 26: Interactions Basics

Webflow's Interactions panel handles custom hover states, animations, and visual transitions using visual keyframes.

Step-by-Step Instructions

1. Setup Element Trigger:

   • Select a Card block. Open the Interactions panel (H).

   • Under Element Trigger, click + and choose Mouse Hover.

2. Configure Hover Animation:

   • Under On Hover, click the Select an Action dropdown and choose Start an Animation.

   • Click + next to Timed Animations and name it Card Hover In.

   • Click + next to Actions to add keyframes:

     • Move: Set Y position to -8px.

     • Box Shadow: Increase blur radius and opacity.

     • Set Easing curve to Ease Out (Cubic) and Duration to 0.3s.

3. Configure Hover Out Animation:

   • Under On Hover Out, add a new animation named Card Hover Out.

   • Add keyframes resetting Move Y back to 0px and returning the shadow to its default value over 0.3s.

Day 27: Scroll Animations

Scroll animations trigger keyframe sequences based on an element's position within the user's viewport.

Step-by-Step Instructions

1. Set Up Scroll Trigger:

   • Select a Heading Primary element.

   • Open the Interactions panel (H). Under Element Trigger, select Scroll Into View.

2. Build Reveal Animation Sequence:

   • Under When Scrolled Into View, choose Start an Animation > + Timed Animation. Name it Fade In Up.

3. Add Keyframes:

   • Keyframe 1 (0%):

     • Select Opacity -> Set to 0%.

     • Select Move -> Set Y to 40px.

     • Check Set as initial state.

   • Keyframe 2 (100%):

     • Select Opacity -> Set to 100%.

     • Select Move -> Set Y to 0px.

     • Set Duration to 0.8s with an Ease Out curve. Preview the reveal sequence by scrolling the canvas.

Day 28: Navigation Menus

Webflow includes a built-in Navbar component pre-configured with mobile breakpoint menus.

Step-by-Step Instructions

1. Insert Navbar Element:

   • Open the Add panel (A). Scroll down to Components and drag a Navbar onto the canvas.

2. Style Navigation Links:

   • Select the Nav Menu container inside the navbar.

   • Style the individual Nav Link items using custom margins, hover states, and dynamic typography adjustments.

3. Configure Mobile Menu Toggle:

   • Switch to the Tablet breakpoint view.

   • Select the Menu Button element inside the Navbar.

   • Open Element Settings (D). Under Navbar Settings, click Open Menu to show the dropdown panel on the canvas.

   • Select Nav Menu and assign a dark background color (#0F172A), vertical flex column direction, and 100% width.

Day 29: Forms

Forms collect user input directly on site pages without requiring external backend code.

Step-by-Step Instructions

1. Insert Form Block:

   • Press A, scroll to Forms, and drag a Form Block into your container.

2. Style Input Elements:

   • Select Input Field. Create a class named Form Input.

   • Set Background to #1E293B, Border to 1px solid #334155, Radius to 6px, and Text Color to #FFFFFF.

   • Set State Focus: Change Border Color to #3B82F6 and remove the default outline.

3. Configure Success & Error Message States:

   • In the Navigator, select Form Block. Open Element Settings (D).

   • Under Form Settings, toggle state choices between Normal, Success, and Error.

   • Select the Success wrapper on the canvas to style custom confirmation message text.

Day 30: CMS Basics

Webflow's Content Management System (CMS) uses dynamic Collections to structure and power content across your site.

Step-by-Step Instructions

1. Create CMS Collection:

   • Click the CMS icon on the left toolbar (or press M).

   • Click + Create New Collection. Name it Blog Posts.

2. Define Schema Fields:

   • By default, Name and Slug are included. Click + Add New Field to add custom fields:

     • Rich Text: Post Body

     • Image: Main Thumbnail

     • Plain Text: Summary

     • Date/Time: Publish Date

3. Generate Sample Content:

   • Click Create Collection.

   • Click Add Sample Items (top toolbar) and choose 5 Items to populate your collection with dummy data for testing.

Days 31–35: Build a Responsive 5-Page Website with a CMS Blog

Put Phase 2 into practice by building a complete responsive production site.

Project Requirements

1. Pages Required: Home, About, Services, Blog (CMS Collection Template), Contact.

2. Key Capabilities:

   • Responsive Navigation: Working mobile drawer nav built on components.

   • Dynamic CMS Engine: Integrate a Blog Posts collection that populates listing grids on the Blog page and feeds individual /blog/{slug} pages automatically.

   • Form Processing: Working contact form styled across all layout breakpoints.

Days 36–40: Add Interactions & Animations

Enhance user engagement by layering micro-interactions over your project layout.

Exercises & Implementation Steps

1. Page Load Stagger Sequence:

   • Create a Page Load interaction on the Home page.

   • Target hero headings, body copy, and primary action buttons to fade in upwards sequentially using 0.15s delay steps.

2. Interactive FAQ Accordion:

   • Build a custom accordion element using nested Div Blocks (Accordion Item > Accordion Header + Accordion Content).

   • Set Accordion Content height to 0px with Overflow: Hidden.

   • Create a Mouse Click interaction on Accordion Header that expands Accordion Content height to Auto while rotating a companion dropdown arrow icon 180deg.

Phase 3: Advanced Development (Days 41–65)

Day 41: Advanced CMS

Filter rules and sorting configurations allow you to display targeted subsets of your CMS data.

Step-by-Step Instructions

1. Insert Collection List:

   • Drag a Collection List element into a container on your page.

   • In Element Settings (D), connect the list source to your Blog Posts collection.

2. Configure Filtering Criteria:

   • Under Collection List Settings, click + Filter.

   • Set Filter Condition: Featured (Switch Field) Equals On.

3. Configure Sorting Criteria:

   • Click + Sort Order.

   • Choose Publish Date set from Newest to Oldest.

   • Under Limit Items, check the limit box and set Show 3 Items Starting at 1 to showcase a featured post trio on the homepage.

Day 42: Multi-Reference Fields

Multi-reference fields connect entries across separate CMS collections (e.g., assigning multiple Authors or Categories to a Blog Post).

Step-by-Step Instructions

1. Create Related Collection:

   • Open CMS (M). Create a new collection named Categories. Add fields: Color Accent (Color picker). Click Create.

2. Link Collections via Reference Field:

   • Open settings for the Blog Posts collection.

   • Click + Add Field and select Reference (or Multi-Reference).

   • Label the field Category. Select Categories as the source collection. Click Save Collection.

3. Assign Item References:

   • Open an individual blog post item. Choose a entry under the Category dropdown menu and save your changes.

Day 43: Dynamic Lists & Template Pages

CMS Template Pages are dynamically generated layouts that render unique content for each entry in a collection.

Step-by-Step Instructions

1. Access Collection Template Page:

   • Open Pages (P). Scroll down to CMS Collection Pages and select Blog Posts Template.

2. Bind Visual Elements to CMS Fields:

   • Drag an H1 Heading onto the template canvas.

   • Select the heading, click the small purple setting dot (or open Element Settings D), check Get Text From Blog Posts, and pick Name.

   • Insert an Image element. Check Get Image From Blog Posts and set the source to Main Thumbnail.

   • Add a Rich Text block and map its content source to Post Body.

Day 44: E-commerce Basics

Webflow E-commerce lets you manage products, inventory, payments, and fulfillment workflows directly within the visual designer.

[ Product Collection ] ---> [ Add To Cart Button ] ---> [ Shopping Cart Drawer ] ---> [ Checkout Page ]

Step-by-Step Instructions

1. Enable E-commerce:

   • Click the E-commerce shopping cart icon on the left toolbar.

   • Click Enable E-commerce. Select your store currency and address settings.

2. Add Products:

   • Under E-commerce, select Products. Click + New Product.

   • Name: Custom Design Concept. Price: $199.00.

   • Upload product images, configure SKU numbers, and click Save.

3. Add Cart Component:

   • Open your navigation bar component. Press A, scroll to E-commerce, and drag a Cart widget into your navbar. Customize its badge colors and drawer opening animations.

Day 45: Checkout Flow

Customizing checkout pages ensures your brand experience remains seamless during transaction steps.

Step-by-Step Instructions

1. Locate Checkout Templates:

   • Open Pages (P). Scroll down to E-commerce Pages and select Checkout.

2. Style Checkout Components:

   • Select the Order Summary wrapper and apply custom class styles (Card, background colors, drop shadows, and custom typography).

   • Select form input fields under the Billing Info and Payment Info sections, applying your unified Form Input class styles to keep form designs consistent across the site.

3. Customize Order Confirmation:

   • Open the Order Confirmation page template and style payment receipt blocks and order summary details.

Day 46: SEO Basics

Engine optimization controls help search engines index and rank your pages accurately.

Step-by-Step Instructions

1. Configure Static Page Metadata:

   • Open Pages (P). Click the gear icon next to the Home page.

   • Under SEO Settings:

     • Title Tag: Custom Visual Web Design & Development Services

     • Meta Description: Build high-performance, accessible visual web applications with Webflow.

2. Configure Dynamic CMS Metadata Templates:

   • Open Page Settings for Blog Posts Template.

   • Under Title Tag, click + Add Field and choose Name. Type | Agency Blog after it.

   • Under Meta Description, click + Add Field and choose Summary.

3. Configure Asset Alt Text:

   • Inspect every image element across the site to ensure valid descriptive alt tags exist.

Day 47: Custom Code

Custom code allows you to expand Webflow's visual editor using custom HTML structures, CSS style rules, and JavaScript snippets.

HTML

<!-- Example Custom Code Embed Block Structure -->
<style>
  .glass-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
</style>

Step-by-Step Instructions

1. Page-Level Code Injection:

   • Open Page Settings for Home. Scroll down to Custom Code.

   • Inside the <head> section, add custom CSS properties (e.g., -webkit-font-smoothing: antialiased;).

   • Inside the </body> tag section, add custom JavaScript libraries via script tags.

2. In-Page Embed Element:

   • Open Add Elements (A). Drag an Embed element onto your canvas.

   • Paste custom HTML, CSS <style> blocks, or JavaScript <script> blocks inside the editor window. Click Save & Close.

Day 48: Integrations

Integrations connect your site to analytics platforms and automation workflows.

Step-by-Step Instructions

1. Google Analytics Setup:

   • Go to Site Settings (top left menu > Site Settings).

   • Click the Apps & Integrations tab.

   • Scroll to Google Analytics, paste your Measurement ID (G-XXXXXXXXXX), and click Save Changes.

2. Webhook Automation via Zapier:

   • In Site Settings, navigate to Integrations > Webhooks.

   • Click + Add Webhook. Select Trigger: Form Submission.

   • Paste the target Webhook URL provided by Zapier/Make to automatically push form lead inputs into a Google Sheet or CRM pipeline.

Day 49: Site Search

Search functionality lets users query site pages and CMS records using indexed text terms.

Step-by-Step Instructions

1. Add Search Component:

   • Press A, scroll to Advanced, and drag a Search widget into your navbar or section layout.

2. Configure Indexing Rules:

   • Select the Search input block. Open Element Settings (D).

   • Select which pages or CMS collections to include or exclude from site index sweeps.

3. Style Search Results Template Page:

   • Open Pages (P). Select the automatically generated Search Results template page.

   • Bind search result entries to title links, summary snippets, and category tags to format returned query lists cleanly.

Day 50: Performance Optimization

Optimizing assets and output files speeds up page loads, improves UX, and boosts search rankings.

Step-by-Step Instructions

1. Convert & Compress Assets:

   • Open Assets (J). Select image assets and click Convert to WebP to reduce file sizes without sacrificing image quality.

2. Minify Output Files:

   • Open Site Settings > Publishing.

   • Scroll down to Advanced Publishing Options.

   • Check Minify HTML, Minify CSS, and Minify JavaScript.

3. Set Up Responsive Images:

   • Press Ctrl + Shift + O to open Webflow's image auto-scaler tool, ensuring assets generate responsive image source sets across devices.

Days 51–55: Build a Dynamic Blog Site with CMS & SEO

Build a high-performance content engine combining Phase 3 workflows.

Project Requirements

1. CMS Collections: Blog Posts, Categories, Authors.

2. Page Architecture:

   • Custom dynamic template layout /blog/{slug} with nested author profiles and multi-reference category tags.

   • Filtered index page featuring sorting controls and pagination.

3. SEO Integration: Automated dynamic meta tags, dynamic OpenGraph image mappings, and clean asset structure.

Days 56–60: Add E-commerce Features

Expand your project by integrating a custom online store.

Features & Setup Tasks

1. Products Setup: Configure 6 unique product items with dynamic gallery variants, category categories, and stock numbers.

2. Custom Cart Experience: Style sliding cart overlays, empty state graphics, and action buttons.

3. Checkout Customization: Customize single-page checkout flows with clear order steps, input focus styles, and order confirmation pages.

Days 61–65: Optimize Site for SEO & Performance

Run diagnostic sweeps to resolve performance bottlenecks and audit site accessibility.

Diagnostic Tasks

1. Run Audits: Open Chrome DevTools and run a Lighthouse Audit across desktop and mobile views.

2. Optimize Asset Delivery: Target large media files, convert graphics to WebP formats, and verify explicit image width/height dimensions exist to prevent Cumulative Layout Shifts (CLS).

3. Audit Headings: Ensure each page contains a single structural H1 tag, followed by properly ordered, non-skipping H2 and H3 subheadings.

Phase 4: Professional Workflow (Days 66–90)

Day 66: Version Control

Backups and restore points protect project history and allow you to safely rollback changes when needed.

Step-by-Step Instructions

1. Create Manual Backups:

   • Press Ctrl + Shift + S (or click the bottom-left status bar settings icon and choose Backups).

   • Enter a backup description: Pre-animation setup baseline. Click Save Backup.

2. Restore Historical Versions:

   • Open the Backups menu tab.

   • Hover over a saved snapshot instance, click the settings gear, and select Preview or Restore.

   • Confirm the rollback action to restore your site to that exact prior point in time.

Day 67: Collaboration

Team controls allow multiple workspace users to edit content simultaneously without overwriting design changes.

[ Workspace Owner ] ---> Full Control (Design + CMS + Settings + Publishing)
[ Contributor ]       ---> Content Only (CMS Data + Static Text Updates)

Step-by-Step Instructions

1. Invite Team Members:

   • Go to your Webflow Dashboard > Workspace Settings > Members.

   • Click Invite Member, assign access roles (e.g., Admin, Designer, Content Editor), and send the invitation email.

2. Manage Content Editor Access:

   • Invite non-designers via Content Editor mode. This allows clients or copywriters to update text, manage CMS records, and swap images directly on the published site without accidentally breaking visual layout rules in the Designer.

Day 68: Accessibility (WCAG Compliance)

Building accessible sites ensures your content can be navigated by users relying on screen readers and keyboard inputs.

Step-by-Step Instructions

1. Open Accessibility Audit Panel:

   • In the left sidebar, click the Audit panel icon (exclamation check icon).

2. Fix WCAG Violations:

   • Color Contrast: Check text color against background colors. Ensure contrast ratios meet WCAG AA standards (minimum 4.5:1 for standard text).

   • Alt Text: Add missing alt tags across visual element references.

   • Form Labels: Ensure every input field links to an explicit form label.

   • Tab Order: Set up structured focus states and logical keyboard navigation paths across interactive links and controls.

Day 69: Testing

Cross-browser and device testing ensures your designs render consistently for all visitors.

Step-by-Step Instructions

1. Cross-Browser Verification:

   • Test your published site URL across modern browsers: Chrome, Safari, Firefox, and Edge.

2. Cross-Device Hardware Testing:

   • Test layout rendering on physical iOS and Android devices to verify touch event behavior, scrolling performance, and dropdown responsiveness.

3. Test Interactive Elements:

   • Submit test entries through contact forms, trigger cart drawer workflows, and verify all external link targets work as expected.

Day 70: Hosting & Custom Domains

Webflow relies on a global Tier-1 CDN network to host and serve sites securely with ultra-fast page speeds.

Step-by-Step Instructions

1. Add Custom Domain:

   • Go to Site Settings > Publishing.

   • Scroll to Custom Domains. Click Add Custom Domain.

   • Enter your domain name (e.g., yourdomain.com).

2. Configure DNS Records at Domain Registrar:

   • Log into your domain registrar (e.g., Namecheap, GoDaddy, Cloudflare).

   • Add DNS Records provided by Webflow:

     • A Records: Point @ to 75.2.70.75 and 99.83.190.102.

     • CNAME Record: Point www to proxy-ssl.webflow.com.

3. Publishing Your Site:

   • Click the Publish button (top right of the Designer or Site Settings).

   • Check both your Webflow staging domain (.webflow.io) and your custom production domain, then click Publish to Selected Domains.

Day 71: Security Basics

Built-in security capabilities keep your site protected automatically without requiring manual server management or security plugins.

Step-by-Step Instructions

1. Configure SSL Encryption:

   • Open Site Settings > Publishing > Advanced Publishing.

   • Verify Enable SSL is toggled ON (enforces HTTPS protocols site-wide using auto-renewing SSL certificates).

2. Form Spam Protection:

   • Go to Site Settings > Forms.

   • Enable reCAPTCHA validation to protect contact forms from spam bots.

3. Asset Protection:

   • Restrict access to staging environments during development using password protection controls under Site Settings > Access Control.

Day 72: Advanced Interactions

Advanced interactions use multi-step keyframes and scroll-position triggers to create complex visual experiences.

Step-by-Step Instructions

1. Parallax Scrolling Effect:

   • Select a background visual element. Open Interactions (H).

   • Add a While Scrolling in View trigger.

   • Create a Smooth Scrolling Animation:

     • At 0% Viewport Position: Set Move Y to -50px.

     • At 100% Viewport Position: Set Move Y to 50px.

2. Multi-Step Animation Sequence:

   • Create a button animation that transforms background fills, shifts text labels upward, and scales icon elements simultaneously across a unified timeline.

Day 73: Advanced E-commerce

Configure custom shopping rules to support complex e-commerce logic.

Step-by-Step Instructions

1. Configure Discounts & Promo Codes:

   • Go to E-commerce > Discounts. Click + New Discount.

   • Set Code: LAUNCH20. Select Percent Discount: 20% Off.

2. Configure Complex Shipping Rules:

   • Go to Site Settings > E-commerce > Shipping.

   • Add Shipping Zones (e.g., Domestic vs. International) and define flat-rate or weight-based calculation tiers.

3. Setup Automated Tax Calculation:

   • Enable automatic tax calculations to capture appropriate state and regional sales taxes at checkout based on the customer's shipping address.

Day 74: API Integrations

Webflow's REST API allows you to programmatically create, update, and manage CMS items from external applications.

Step-by-Step Instructions

1. Generate API Token:

   • Go to Site Settings > Apps & Integrations.

   • Scroll to API Access. Click Generate New Token. Name it External Automation. Copy the token key securely.

2. Trigger API Requests (cURL / Postman):

   • Make authenticated requests to read or publish collection items directly to your site:

     Bash

     curl -X GET "https://api.webflow.com/v2/collections/YOUR_COLLECTION_ID/items" \
          -H "Authorization: Bearer YOUR_API_TOKEN" \
          -H "accept: application/json"
     

Day 75: Portfolio Site Setup

Your portfolio site showcases your technical skills, visual projects, and client capabilities.

Step-by-Step Instructions

1. Define Site Architecture:

   • Build a modern layout highlighting your services, technical skills, case studies, and contact options.

2. Setup Work Case Studies Collection:

   • Create a Case Studies CMS collection with fields for problem statements, design systems, interactive prototypes, and client results.

3. Build Modern Landing Page:

   • Combine custom animations, clean typography, interactive components, and responsive grid layouts to create an engaging homepage experience.

Days 76–80: Build a Full E-commerce Prototype

Combine all course concepts to build a production-ready web application prototype.

Capstone E-commerce Prototype Requirements

1. Product Architecture: 8 SKU items with dynamic variant pickers, custom categories, and stock status indicators.

2. Interactive UI:

   • Custom slide-out shopping cart drawer.

   • Micro-interaction hover states across product cards.

   • Dynamic product search and category filtering.

3. Checkout Experience: Fully styled checkout and confirmation flow.

Days 81–85: Conduct Usability Testing & Accessibility Audit

Audit your capstone project to fix UX issues, broken links, and accessibility bugs.

Evaluation Checklist

1. Usability Review: Invite 3 users to test your site on mobile and desktop. Observe how easily they complete tasks (e.g., finding products, reading posts, submitting forms).

2. Accessibility Sweep: Run the Webflow Audit Panel to identify and resolve contrast issues, missing alt text tags, or invalid heading structures.

3. Keyboard Navigation Sweep: Navigate through your entire site using only the Tab key to confirm focus states and interactive elements behave cleanly without getting stuck.

Days 86–89: Final Polish

Fine-tune performance metrics, optimize assets, and complete final site configurations before deployment.

Final Verification Checklist

• [ ] SEO Validation: Verify all meta titles, descriptions, and OpenGraph tags are configured across static and dynamic pages.

• [ ] Performance Pass: Ensure assets are compressed to WebP formats and code minification toggles are enabled under Site Settings.

• [ ] Domain & Security Checks: Verify custom SSL protocols are active, primary domain redirects are set up cleanly, and forms include spam protection.

Day 90: Final Project — Portfolio Showcase

Congratulations on completing the 90-day plan! Today, you'll publish and launch your capstone portfolio showcase.

Portfolio Showcase Features

• Responsive Layout: Optimized across mobile, tablet, and desktop viewports.

• CMS Case Studies: Structured case studies powered by dynamic collections.

• E-commerce Capabilities: Functional product listings, custom shopping cart drawer, and styled checkout flow.

• Advanced Interactions: Scroll animations, hover effects, and micro-interactions.

• SEO & Accessibility: WCAG compliance, optimized images, fast load times, and custom metadata.

• Live Deployment: Connected to a custom domain with SSL protection enabled.