Wix Studio Web Design Course

Lesson 1 • Setting Up Your Account

Guides students through account creation, workspace configuration, and billing basics. Establishes a working environment required for all subsequent hands-on exercises.

Lesson 2 • Creating Your First Site

Walks through template selection, blank canvas setup, and initial publish. Produces a live URL students use as a sandbox throughout the course.

Lesson 3 • What Is Wix Studio

Covers Wix Studio's identity as a professional web creation platform distinct from classic Wix. Sets context for the entire course by clarifying target users and use cases.

Lesson 1 • Images, Icons, and Media

Demonstrates uploading, optimising, and placing visual assets within the editor. Proper media handling prevents performance issues addressed in advanced chapters.

Lesson 2 • Working with the Canvas and Grid

Explains the responsive canvas, grid system, and snap behaviour. Proper grid use is the foundation for consistent layouts built in later chapters.

Lesson 3 • Colour Palettes and Themes

Teaches colour palette creation, theme application, and global colour tokens. Changes to the theme propagate site-wide, reinforcing efficient design workflows.

Lesson 4 • Typography and Font Management

Covers font pairing, text styles, and custom font uploads. Consistent typography directly supports the brand identity work introduced in Chapter 1.

Lesson 1 • Adapting Layouts for Mobile

Covers stacking, hiding, and resizing elements for small screens. Techniques here directly apply to every project built in subsequent chapters.

Lesson 2 • Understanding Responsive Design Principles

Introduces fluid layouts, relative units, and mobile-first thinking. This conceptual grounding prevents common layout errors encountered in breakpoint editing.

Lesson 3 • Wix Studio Breakpoint System

Maps the built-in breakpoints and explains how styles cascade between them. Students learn to switch breakpoints and understand inheritance rules.

Lesson 1 • Dynamic Pages and URL Routing

Introduces dynamic page templates driven by CMS collections. This section bridges static design skills to the data-driven content covered in Chapter 5.

Lesson 2 • Building Navigation Menus

Demonstrates creating header menus, dropdowns, and anchor links. Navigation design directly affects usability and is referenced in the UX supplementary chapter.

Lesson 3 • Headers and Footers

Explains global header and footer creation, sticky behaviour, and scroll effects. Consistent headers and footers unify the site identity established in Chapter 2.

Lesson 1 • Introduction to Wix CMS

Defines collections, fields, and the CMS panel within Wix Studio. Understanding the data model is essential before connecting content to any design element.

Lesson 2 • Forms and Data Collection

Teaches form widget setup, field validation, and submission routing to CMS or email. Forms are the primary lead-capture tool for business sites built in Chapter 7.

Lesson 3 • Repeaters and Gallery Widgets

Covers repeater configuration and gallery widgets for displaying collection lists. These components are the primary output mechanism for CMS-driven content.

Lesson 4 • CMS Permissions and Roles

Explains read, write, and admin permissions on collections and who can submit content. Proper permissions protect client data and enable member-generated content.

Lesson 1 • Entrance and Exit Animations

Demonstrates fade, slide, and scale entrance animations triggered on scroll or load. Purposeful animation guides attention and supports storytelling on landing pages.

Lesson 2 • Scroll Effects and Parallax

Explains parallax, sticky elements, and reveal effects tied to scroll position. These effects add depth to hero sections and long-form pages built in Chapter 7.

Lesson 3 • Custom CSS for Advanced Styling

Introduces the custom CSS panel for overrides beyond the visual editor's scope. CSS knowledge here prepares students for the Velo coding chapter that follows.

Lesson 1 • Working with Wix Data API

Demonstrates querying, inserting, and updating CMS collection records via code. Programmatic data access unlocks dynamic features impossible with the visual editor alone.

Lesson 2 • Third-Party API Integration

Shows how to call external REST APIs from Velo backend functions using fetch. Students build a working integration that demonstrates real-world extensibility.

Lesson 3 • Introduction to Velo Development

Explains the Velo IDE, file structure, and the difference between frontend and backend code. This orientation prevents common scoping errors in subsequent coding exercises.

Lesson 4 • Backend Functions and HTTP Functions

Teaches web modules, backend functions, and exposing HTTP endpoints. Secure server-side logic protects API keys and enables third-party service integration.

Lesson 1 • Technical SEO in Wix Studio

Explains sitemaps, robots.txt, canonical tags, and structured data markup. Technical SEO ensures search engines crawl and index the site correctly.

Lesson 2 • Pre-Launch Checklist and Publishing

Provides a systematic review of links, forms, mobile views, and analytics before going live. A structured launch process prevents post-publish errors that damage client trust.

Lesson 3 • Connecting a Custom Domain

Walks through domain purchase, DNS configuration, and SSL activation. A custom domain is required for professional client delivery and brand credibility.

Lesson 4 • Site Performance Optimisation

Teaches image compression, lazy loading, and Core Web Vitals improvement strategies. Fast-loading sites rank higher and convert better than slow competitors.