In this course
Jumpstart your journey with Velo, Wix’s full-stack web development solution, and see what you can do. You’ll gain insights into how customizable your Wix sites can be with code, and explore Velo’s powerful features. Work with page elements, manage events, explore APIs and see what’s possible with Velo.
Learn how to
Navigate your developer environment to add code and custom functionality
Build the functionality you want using Velo APIs
Create and handle events or interactivity with static and dynamic event handlers
Work with page elements and see them in action
Joshua is a digital creator and developer advocate for Wix.com. He’s passionate and excited about problem solving, creating music and teaching developers how to be successful online.
Wix Developer Advocate
Your instructor
Joshua Alphonse
Who it’s for
Non-developers looking to use Velo to start their coding journey
Developers that are new to Velo and looking to get started
Experienced developers looking to learn a new skill and broaden their offerings
Resources to help you grow
Get helpful articles, practical templates and more to put your skills to work.
-
Loading...
-
Loading...
-
Loading...
-
Loading...
About Velo
Hey, what's up, and welcome to the Velo beginner course.
I'm Joshua, and I'm a Developer Advocate for Velo and I'll be taking you through the basics of Velo by Wix.
So Velo by Wix is a platform that works right on top of Wix and allows you to add some more custom functionality and interactivity to your website using JavaScript.
So this course is intended for developers and non-developers alike, but this is going to be a lot easier if you already have some more JavaScript experience in your arsenal.
So what we'll do is we'll turn on Dev Mode to get started, and this is how we turn on Velo.
So we can add our own JavaScript code, as I mentioned and this works in tandem with Wix, so you're able to use all the same Wix tools, on top of adding some more code.
And we can just turn on Dev Mode here.
And you'll see that our environment starts to change.
So we get our Code Panel on the bottom, and even on the right side here, we have our Properties Panel, which we can control all of our different identifications for our elements on the page that we can drag and drop.
So as you know, with Wix, you can drag and drop elements and what you see is what you get on the Editor.
So as I click different elements on the page, you'll see on the Properties Panel, I'm going to be seeing all the different IDs for what I'm clicking.
Alright, so you see on the left side, on the right side here, we have button is changing to 11, we have this text, "text37".
And we'll go into more detail of how to actually identify these elements on the page a lot easier.
So, in our Code Panel as well, we have some more built-in tools like autocomplete, and even a linter that allows us to see all the errors in our code.
So let's go over to our Velo for Beginners page, and I'll show you what autocomplete looks like.
So let's just take away some of this code here.
And let's start to write an import code statement.
So this is how we're going to import some of our APIs that we already have built into Velo.
And as you see, the autocomplete already shows me some of the other APIs I already have available before I even finish the word.
So we can select whatever API we want and we'll choose wixData, and there you go. That means I didn't even have to finish the sentence.