5 Minute Tutorial

Quick Start Guide

Build a working calculator app in just 5 minutes. No prior experience needed—follow along step by step.

Prerequisites

Just a modern web browser (Chrome, Firefox, Safari, or Edge). That's it—no downloads, no installation, no account required.

Open WebVB Studio

Navigate to app.webvbstudio.com in your browser. You'll see the IDE load with a blank form ready for design.

Tip: First load may take 10-15 seconds as the IDE initializes. Subsequent visits will be much faster.

The IDE Interface

📦 Toolbox

Left panel with draggable controls

🎨 Form Designer

Center canvas for visual layout

⚙️ Properties

Right panel for control settings

Add Controls to Your Form

We'll create a simple calculator. Add the following controls by dragging them from the Toolbox onto the form:

📝

TextBox

Name it txtNumber1 — for the first number

📝

TextBox

Name it txtNumber2 — for the second number

🔘

CommandButton

Name it cmdAdd — set Caption to "Add"

🏷️

Label

Name it lblResult — to display the result

Important: Set control names in the Properties panel on the right. Names are case-sensitive!

Write the Event Handler

Double-click the "Add" button to open the code editor. This automatically creates a click event handler. Add the following code:

Visual Basic 6

Private Sub cmdAdd_Click()
    Dim num1 As Double
    Dim num2 As Double
    Dim result As Double
    
    num1 = Val(txtNumber1.Text)
    num2 = Val(txtNumber2.Text)
    result = num1 + num2
    
    lblResult.Caption = "Result: " & result
End Sub

Python

def cmdAdd_Click():
    num1 = float(txtNumber1.Text)
    num2 = float(txtNumber2.Text)
    result = num1 + num2
    
    lblResult.Caption = f"Result: " + str(result)

Understanding the Code

txtNumber1.Text — Gets the text from the first textbox
Val() or float() — Converts text to a number
lblResult.Caption — Sets the label's display text

Run Your Application

Press F5 or click the Run button in the toolbar.

Preview Window

Result: 42

Success! Enter numbers in both textboxes and click Add to see the result.

Extend Your Calculator

Now let's add more operations! Add three more buttons for Subtract, Multiply, and Divide:

Complete Calculator Code (VB6)

Private Sub cmdAdd_Click()
    lblResult.Caption = Val(txtNumber1.Text) + Val(txtNumber2.Text)
End Sub

Private Sub cmdSubtract_Click()
    lblResult.Caption = Val(txtNumber1.Text) - Val(txtNumber2.Text)
End Sub

Private Sub cmdMultiply_Click()
    lblResult.Caption = Val(txtNumber1.Text) * Val(txtNumber2.Text)
End Sub

Private Sub cmdDivide_Click()
    If Val(txtNumber2.Text)  0 Then
        lblResult.Caption = Val(txtNumber1.Text) / Val(txtNumber2.Text)
    Else
        lblResult.Caption = "Cannot divide by zero!"
    End If
End Sub

🎉 Congratulations!

You've built your first WebVB Studio application! Here's what you learned:

Adding controls to a form

Setting control properties

Writing event handlers

Running and testing your app

Continue Learning

📦

Ready for More?

Explore our example gallery with 26+ ready-to-run projects.

View Examples

Introduction Control Reference