Lesson 2: Work with page elements | Start coding with Velo - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Website Builder Wix.com Video: Lesson 2: Work with page elements | Start coding with Velo.
In this lesson, you'll learn how to work with and add functions to page elements on your site with Velo.
We'll cover naming elements, using $w, and adding element properties.

Timestamps:

00:00 Intro
01:12 Naming elements on the page
02:13 Using $w
03:12 Adding properties to an element
05:26 Creating a Read More function

There’s more where this came from. Watch the full course here:
https://www.wix.com/learn/online-course/coding-with-velo/start-coding-with-velo

And check out all of our courses and lessons on Wix Learn: https://www.wix.com/learn

Published: Thursday, July 14, 2022 9:24 PM
Category: Website Builder Wix.com

23 Views

Related Videos

Lesson 3: Get your page ready | Start coding with Velo

by Best Webhosting Added 1 year ago 24 Views / 0 Likes

In this lesson, you'll learn how to use events, including how to load elements on a page before it's presented to site visitors. We'll go over ways to work with the onReady function, and more ways to use $w. Timestamps: 00:00 Intro 01:08 Getting the element labels ready 03:07 Outside the onReady function 04:20 Invoking the onReady function 05:41 Creating a constant variable 06:38 Using the $w selector API 09:33 Setting a ternary operator There’s more
Lesson 3: Select and use elements | Coding with Velo: Frontend

by Best Webhosting Added 1 year ago 21 Views / 0 Likes

In this lesson, you'll learn different situations for the $w select function in the Velo frontend. We'll cover using $w with the onReady function, with the whole page acting as an element, as well as the wixAnimations API to show how to use a Velo Package for frontend help. Timestamps: 00:00 Intro 01:09 Using $w to interact with elements 02:15 Using the wixAnimations API 03:53 Using the zoom function with a static event handler There’s more where this
Lesson 1: About Velo | Start coding with Velo

by Best Webhosting Added 1 year ago 20 Views / 0 Likes

In this lesson, you'll get to know Velo by turning on Dev Mode. We'll give you an overview of the workspace so you can find everything you need to code with Velo. Timestamps: 00:00 Intro 00:40 Turning on Dev Mode 01:52 Utilizing Autocomplete 02:24 Overview of the sidebar 03:40 Searching code There’s more where this came from. Watch the full course here: https://www.wix.com/learn/online-course/coding-with-velo/start-coding-with-velo And check out all o
Lesson 5: API reference | Start coding with Velo

by Best Webhosting Added 1 year ago 22 Views / 0 Likes

In this lesson, you'll learn how to use the API reference, which is where you'll find everything you need to create your dynamic website. We'll cover searching site elements in the API reference, and we'll change some functions of a slideshow using the API reference. Timestamps: 00:00 Intro 00:54 API Overview 02:11 Site elements using API reference 03:00 Interacting with a slideshow element using API reference 04:21 Working with currentIndex 05:04 Cha
Lesson 6: Get a glimpse beyond $w | Start coding with Velo |

by Best Webhosting Added 1 year ago 22 Views / 0 Likes

In this lesson, you'll learn how to import and use an API into your site code. We'll create a promo code using wix-window and copyToClipboard function. Timestamps: 00:00 Intro 00:51 Importing an API into your site code 01:31 Opening wix-window 01:56 Understanding copyToClipboard function 03:08 Importing wix-window 03:39 Creating a copyToClipboard function 06:16 Creating an event handler 07:53 Using .then to return a promise for the element 09:53 Creat
Lesson 4: Respond to element-based events | Start coding with Velo

by Best Webhosting Added 1 year ago 18 Views / 0 Likes

In this lesson, you'll learn how to create and handle events dynamically with your website. We'll go through events and event handlers by creating an expandable and collapsable element. Timestamps: 00:00 Intro 00:48 Event handlers in the Properties Panel 02:44 Creating a dynamic event 04:59 Changing the default event 06:09 Adding an event handler dynamically for onClick There’s more where this came from. Watch the full course here: https://www.wix.com
Lesson 8: Test & debug with Velo tools | Coding with Velo: Frontend

by Best Webhosting Added 1 year ago 25 Views / 0 Likes

In this lesson, you'll learn how to test and monitor versions of your site using the developer console. We'll cover the ins and outs of checking event responses, checking to see if something is undefined, checking errors, and testing your code with console.log. Timestamps: 00:00 Intro 00:31 Understanding testing code in the developer console 00:56 Creating a simple console.log in the onReady function 01:55 Touring the Release Manager 03:14 Editing exp
Lesson 6: Use Velo packages | Coding with Velo: Backend

by Best Webhosting Added 1 year ago 21 Views / 0 Likes

In this lesson, you'll learn how to use Velo packages, pre-built code bundles that allow you to jumpstart your coding right away without having to recreate any of the code in the package. We'll cover choosing, installing and using an animation Velo package, as well as importing it into the frontend file. Timestamps: 00:00 Intro 00:36 Choosing Velo packages 01:16 Installing a Velo package 02:01 Using the Velo package on your site 04:05 Understanding ho
Lesson 1: Take a tour | Coding with Velo: Backend

by Best Webhosting Added 1 year ago 20 Views / 0 Likes

In this lesson, you'll get to know code files using the Velo backend, including Velo Packages, web modules that help you jumpstart your coding right away. Timestamps: 00:00 Intro 00:56 Accessing JS with the Public folder 02:56 Searching your code There’s more where this came from. Watch the full course here: https://www.wix.com/learn/online-course/coding-with-velo/velo-backend And check out all of our courses and lessons on Wix Learn: https://www.wix.
Lesson 2: Hello world | Coding with Velo: Frontend

by Best Webhosting Added 1 year ago 22 Views / 0 Likes

In this lesson, you'll learn what the Velo frontend is and is not used for by creating a Hello World element. We'll cover some exceptions and limitations, as well as benefits and frontend APIs. Timestamps: 00:00 Intro 00:52 Understanding the language differences 01:27 Changing the value of text 02:02 Using the text property 02:23 Previewing the changes 02:53 Adding a button 04:16 Customizing the button 05:22 Adding an event handler There’s more where
Lesson 5: Use npm packages | Coding with Velo: Backend

by Best Webhosting Added 1 year ago 22 Views / 0 Likes

In this lesson, you'll learn how to use npm modules, the world's largest registry for JavaScript packages. We'll cover the differences using npm with Velo, including recommendations and limitations. Timestamps: 00:00 Intro 00:50 Looking at recommended npm packages 01:16 Understanding limitations 01:37 Using the READMEs 02:00 Managing your packages There’s more where this came from. Watch the full course here: https://www.wix.com/learn/online-course/co
Lesson 5: Use Location API | Coding with Velo: Frontend

by Best Webhosting Added 1 year ago 24 Views / 0 Likes

In this lesson, you'll learn about Velo frontend APIs, specifically wixLocation, which allows you to get information about your URL and helps you navigate to new URLs across the web. Timestamps: 00:00 Intro 00:47 Importing wixLocation to the top of the frontend page 01:07 Navigating to a new page with a button 02:34 Adding an onClick function 04:20 Checking the published version 07:17 Capturing the input value There’s more where this came from. Watch