Onboarding to Velo by Wix
4 min read
The Basics
Welcome to Velo by Wix! Below you’ll find a list of resources we’ve put together to help you onboard and get started creating advanced web applications with Velo. We know people learn in different ways, so we’ve put together a mix of videos, articles, and tutorials for you. For each resource, we also let you know approximately how long it will take to complete, and give you an overview of what you’ll learn. If you like seeing the whole picture and then backing up to learn the details, feel free to look at the more comprehensive material first.
Codecademy Velo Course
Take our online course at Codecademy to learn everything Wix and Velo. In this course you'll:
- Master Wix’s drag-and-drop editor
- Learn foundational JavaScript
- Use JavaScript to power features of your own creation
- Streamline development with Wix’s built-in methods
- Create a backend to store and interact with data
- Make API calls to external resources
- Build a fullstack application on Wix
Coding in Velo
Introducing Velo by Wix (video 2:56)
A quick introduction to the capabilities that Velo adds to Wix sites. This gives you a taste of what you can do without getting into implementation details. After watching this video, you can decide what you want to learn about next.
Velo by Wix (article ~5 min)
Similar to the video above, this article gives you a high-level introduction to all of Velo's capabilities. You get some more technical details here, plus links to all of our learning resources.
"Hello World": Adding Custom Interactivity to Your Site (video 6:27 with accompanying article)
Velo's APIs let you control your Wix site in ways you couldn’t before. This tutorial and video shows you how to add logic to your site so that it responds in specific ways to different user actions. This tutorial is also code-focused and works with:
Working with Databases
About Wix Data (article ~5 min)
Wix Data adds database capabilities to Wix sites. When data is combined with Velo, you’re able to customize your site and create a truly unique user experience that meets you and your visitors’ needs. This article introduces you to creating collections, connecting them to the elements in your site, and creating dynamic pages.
How to Collect & Display User-Generated Content on Your Website (video 3:59)
You really feel the power of Velo when you combine all of its various capabilities to get the most out of your site. In this video, we build a travel site that lets visitors add and view user reviews. It includes the following features:
- Wix Data
- User Input elements
- Datasets (connecting your site elements to data)
- Repeaters (display unlimited content from a collection on a single page)
- The Properties & Events panel
- Code
If you like diving into the deep end when you learn, this video is for you.
Next Steps
Velo API Overview (article ~7 min)
Velo's APIs empower you to take full control of your site’s functionality. You use the APIs to interact with page elements, your site’s database content, and external services. The APIs also give you access to information about your site, its users, and more. This article gives you a high-level introduction to all of Velo's APIs and what they enable you to do.
Advanced Coding "Hello World" (article ~45 min to 2 hrs. depending on code proficiency)
The beauty of Velo is that it lets you get “under the hood” and add your own custom JavaScript to your site. This is how Velo really unlocks the power of Wix. In this tutorial, we walk you through our version of “Hello World,” where we build a currency converter. This tutorial is very code-focused and introduces you to:
- The Properties & Events panel
- The Code panel
- The $w.onReady function (running code when your page loads)
- Code that customizes dropdowns
- The getJSON() function, which retrieves a JSON resource from the network
If you want to cut your teeth on the full development capabilities of Velo, this is the place to start.
Working in the Code Panel (article ~10 min)
The Code panel is where all the coding action happens in Velo, and it will help if you fully understand its capabilities. This article introduces you to:
- Code files
- Properties & Events panel
- Code panel toolbar
- Velo syntax and autocomplete
- How to make sure an element has loaded before you reference it
- Working with your elements
- Warnings and errors
- Media Manager integration
- Testing your code
- Saving versions of your code
Learn More
After you’ve looked at the resources above to help you onboard, we have more recommendations for further learning. Of course you can always browse and search our full list of resources here.
Working with the Velo Sidebar (article ~6 min)
The Velo Sidebar displays all of the files that make up your site, including pages, lightboxes, folders, files, packages, and database collections. Learn more about it here.
Working with the Properties & Events Panel (article ~3 min)
The Properties & Events panel makes it easier to work with the elements in your site with Velo. You can use Velo with the elements on your site, including the page itself, the header and footer, and datasets.
Working in the Mobile Editor (article ~2 min)
If you edit your site in the Mobile Editor with Velo Dev Mode enabled, some capabilities are different than the Desktop Editor. Learn all about it here.
JavaScript Support (article ~3.5 min)
This article explains Velo's support of JavaScript features, including:
- Promises
- Arrow functions
- Destructuring assignments
- let and const declarations
- async/await
- Module support
Velo Examples
We’ve created a lot of examples to demonstrate how you can use Velo to implement custom solutions on your sites. You can browse our examples to find one that matches what you want to do, or one that is close enough so you can easily modify it for your needs. Looking through the examples is also a good way to help you think of creative ways you might want to use Velo that you might not have considered.
Velo Glossary
The Velo Glossary defines all the terms we use when we talk about Velo. It includes Velo-specific terminology as well as basic programming concepts.
Did this help?
|