Start coding with 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.

I can actually have the code there and ready to go.

So let's go over to our Velo Sidebar on the side here.

And this takes us through all of our main pages here for our page code.

And this is going to be where we can control our frontend code.

So we have Home, Velo for Beginners, Hello Velo, a few different pages that we have on the site already.

But as you notice, within the Code Panel, it starts to change, so this helps us organize our code and know which page we're on at the time.

Then we also have Global on the bottom here.

And this also shows our masterpage.js.

So this is the code that allows us to work with our entire website instead of just a particular page.

So a good example for this would be a sticky header that we want to follow us all the way from when we scroll from the top to the bottom of the page.

On the left side here as well, we have our Code Files option.

So Code Files allows us to work with our backend code.

So you can see when I go and click on some more code files on the side here, it opens up some more tabs alongside of our frontend code, just to help us organize some more as well.

So we also have a course on backend, this is going to be focusing a lot more code files, so I encourage you to check that out as well.

Next up, we have a way for us to search our code.

So as you see here, I already have something already written, just to find out which page I can find wixData being used on.

So I use this sometimes when I forget where I left off, or where to find some code that I made, or maybe the name of a function that I'm not sure which page that's on. This is great for complex websites that I'm building.

And then next up, we have our Databases our Content Manager, and this is where we can store all of our data that we want on our websites without having to go anywhere externally.

So having it internally helps boost the velocity of our developers, and it helps you find out exactly where your data is at all times.

And there's plenty of other tools for you actually to interact with, like our data sets, so you can connect different page elements to the database without having to write any code at all.

Velo Tools, this is a little bit beyond the scope of this course, but I'll talk about it a little bit now.

So we have a Release Manager which allows you to release different percentages of your website to visitors that come to your site.

So if I want 50% of my users to see some type of change, I can manage that with our Release Manager.

Our Secrets Manager is another place for you to store all your hidden API keys so you don't expose them to the public.

We also have Logs and Monitoring as well, just so you can monitor your website and check for different errors that are happening.

The next option we have on the Velo Sidebar is Velo Help.

And Velo Help contains all the resources that we need to interact with our community and learn about Velo.

So we have our forum, which allows you to interact with the community, have a conversation, and then we also have our API Reference as well.

And our API Reference is great and details all of our different APIs that we have built into Velo from frontend and backend.

There's even APIs in there that help you connect to other external third-party services as well, like our http-functions API.

Our documentation goes into even more detail and gives you examples of how to use Velo with all different types of scenarios.

So this lesson, we showed you how to use the environment and, in the next lesson, we're going to show you how to code with Velo and add some more interactivity to your site.