Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Wix Studio Foundations: Build Pro Websites From Scratch

Name: Wix Studio Foundations: Build Pro Websites From Scratch
Rating: 4.7 (5 reviews)

Master Wix Studio's interface, responsive design tools, and pre-built templates to create professional websites

Created byNikoleta Angelova

Last updated 11/2025

English

What you'll learn

Build a hero section from scratch using Wix Studio elements.
Use Wix Studio's interface and testing features to build responsive, accessible websites through exercises and workbook activities.
Apply basic web design concepts to troubleshoot common web design issues.
Redesign a predesigned section by applying foundational Wix Studio skills.
Implement interactions and animations to enhance the user experience.
Create a Site Style for your future web design projects. Pick typography and colours correctly.

Course content

8 sections • 8 lectures • 1h 17m total length

Before you start2:15
Here are the key steps before you start the course to ensure an optimal user experience.
This video also mentions the Workbook provided for this course.
After this video and advice, you will get the most out of this course and know how to troubleshoot if any issues with Wix Studio occur.

Dashboard Walkthrough22:09
Complete and thorough walkthrough of the Wix Studio dashboard. Exploring the option of creating a website and the pros and cons of using each option.
In this lecture, I will also cover:
How to change the name of your website.
How to locate your website on the dashboard.
How to delete a website.
How to edit a website.
What are the different elements available on Wix Studio, and why do some sections have a different colour when hovered on?
Troubleshooting example of how to find which elements create issues on your website.
Going over the breakpoints in Wix Studio.
Global page settings.
Understanding what margin and padding are in web design.
New preview options.
How to access the site history of your website.
How to update your Social Share image for your website.
Wix Studio apps.
And many more.

Website page hierarchy18:19
What you’ll learn in this lecture:
Understanding the hierarchy in Wix Studio.
How to use layers.
Example of CMS and dynamic pages.
How you can benefit from using a Site map for a bigger website.
Wix Studio media files and how to use AI Image Creator.
Wix Studio app market and which apps are most used.
How to start code mode in Wix Studio.
Exploring the site checkers.
What is on the right panel of Wix Studio, and what can we do with those settings?
How to override global styles on individual elements?
Changing HTML tags on a page.
How to use an anchor on your web page?

Building a hero section from scratch9:46
What you’ll learn in this lecture:
Exploring the 3 options for creating sections.
Build a section element by element.
Selecting a hero image and adjusting its focal point.
Adding element by element the heading, subheading and call to action button.
How to add all elements to a stack or a group.
Using the alignment settings with docking and margin.
How to use the gridlines to snap and align our content with other elements, like the logo.
Adding item spacing.
How to create a ghost button.
Adding a corner radius to all button corners.
How to change the colour of a button on hover interaction.
Editing the entrance animations for the hero section animations.

How to repurpose predesigned sections in Wix Studio14:47
In this lecture, we are going to use the pre-designed sections from Wix Studio and learn how to redesign.
You will learn how to:
Reorder/swap elements.
Change the background colour of a section.
Picking a different style for the heading.
How to redesign the style of a button.
Adding a hover state to the button.
Applying the Parallax effect.
Learning how to make a web page responsive on smaller breakpoints, like mobile.
How to reach me as an Instructor of Wix Studio Foundations.

Requirements

No coding or design experience needed! Familiarity with drag-and-drop tools like Canva or PowerPoint is helpful but not required for beginners.
A computer or laptop with reliable internet connection and a free Wix Studio account.
Enthusiasm to learn web design and willingness to practice through hands-on exercises. Bring your creativity and curiosity.

Description

Want to build stunning, professional websites without writing a single line of code? Whether you're launching your freelance career, starting a business, or adding a valuable skill to your portfolio, Wix Studio is the modern no-code platform that makes web design accessible to everyone.

What You'll Learn:

In this comprehensive beginner-friendly course, you'll master Wix Studio from the ground up. I'll guide you through the platform's intuitive interface, show you how to leverage responsive design tools, and teach you to create accessible websites that look amazing on any device.

Course Highlights:

Complete Wix Studio interface walkthrough for beginners
Build website sections from scratch with confidence
Customise pre-designed templates like a pro
Use testing features to ensure responsive, mobile-friendly designs
Create a Site Style page for web design consistency
Hands-on exercises and workbook activities for practical learning

Who Am I?

I'm Nikoleta Angelova, a professional no-code developer and UX designer. I limit myself to just 2 clients at a time to ensure quality, and now I'm bringing that same focused attention to teaching you the exact methods I use in my professional work.

Why This Course?

Unlike tutorials, this course combines strategic thinking with foundational and practical skills. You'll learn not just HOW to use Wix Studio, but WHY certain design decisions matter for user experience. By the end, you'll have the foundation to build professional sections (and later websites) for yourself or clients.

What You'll Create:

Through guided exercises, you'll build real website sections, customise templates, and apply responsive design principles, giving you a practice-ready project and the skills to take on your first web design passion project.

Perfect for:

Complete beginners with zero coding experience, small business owners wanting to DIY or tweak their website, aspiring freelancers looking to offer web design services, and anyone ready to launch their web design journey.

Start learning, start building, no coding required!

Who this course is for:

Aspiring web designers who want to build professional websites without coding and launch their freelance career or side business using the Wix Studio platform.
Small business owners and entrepreneurs are seeking to create their own stunning website.
Creative professionals transitioning into web design who want to master no-code tools.
Complete beginners with zero coding experience who desire to build beautiful, responsive websites and start a new career in web development.
Marketing professionals who want hands-on control over their company's website design without depending on developers for every change.

Wix Studio Foundations: Build Pro Websites From Scratch

What you'll learn

Explore related topics

Course content

Before you start1 lecture • 2min

Introduction1 lecture • 3min

Module 1: Dashboard and Interface Walkthrough1 lecture • 22min

Module 2: Site Style Setup1 lecture • 3min

Module 3: Page hierarchy and Wix Studio tour1 lecture • 18min

Module 4: Animations and Interactions1 lecture • 5min

Module 5: Building a hero section from scratch1 lecture • 10min

Module 6: Predesigned Sections1 lecture • 15min

Requirements

Description

Who this course is for: