Web Fundamentals

HTML · CSS · JS, the DragWeb way
Privacy

field guide

Every block you drag becomes three files.

DragWeb lets you build an web page by snapping blocks together — underneath, it's writing plain HTML, CSS and JavaScript. This guide walks through the three languages, styled the same way DragWeb styles its own block editor.

HTML

Tags & elements

HTML describes the structure of a page. You write it using tags — keywords wrapped in angle brackets. A tag usually comes in a pair: an opening tag and a closing tag, with content sitting in between. Together, an opening tag, its content, and its closing tag form one element.

<button class="cta" id="mainBtn">Click me</button>
Tag name — which kind of element this is (a button, a paragraph, a div…)
Attribute — extra info attached to the tag, written as name=
Attribute value — always in quotes
Content — what's shown between the tags

Some tags never wrap content and don't need a closing tag at all — <img>, <input> and <br> are the common ones. A few frequently-used tags:

TagWhat it's forDragWeb equivalent
div, sectionInvisible containers that group other elementsA "Layout" widget from the palette
p, h1–h6Paragraph text and headingsText / Label widget
button, inputThings the user can click or type intoButton / Input widget
imgAn imageImage widget
ul, liA list, and each item in itList widget

HTML

Parent, child & the DOM tree

Elements can sit inside other elements. Whatever tag an element is written between becomes its parent; the elements inside it are that parent's children. Elements that share the same direct parent are siblings. String enough of these nestings together and the whole page becomes a tree — the browser's internal copy of that tree is called the DOM (Document Object Model).

  • body
    • sectionparent of the card
      • div class="card"a child of section, parent of h2 + p
        • h2sibling of p below
        • psibling of h2 above

HTML

class vs id

Tags describe what an element is. class and id are attributes that let you label a specific element, so CSS and JavaScript can find and style it.

id one-of-a-kind

An id must be unique on the page — only one element can ever have it. Use it to target one exact thing.

<button id="submitBtn">Save</button>

/* CSS */
#submitBtn { background: blue; }

// JavaScript
document.getElementById('submitBtn')

class reusable label

A class can be reused on as many elements as you like, and one element can even carry several classes at once.

<button class="btn primary">Save</button>
<button class="btn">Cancel</button>

/* CSS — styles every .btn at once */
.btn { border-radius: 8px; }

CSS

CSS basics

CSS answers "how should it look?" — you select an element (usually by tag, class, or id) and hand it a list of property: value pairs. Every visible box on a page follows the same layout rule, called the box model: content, wrapped in padding, wrapped in a border, wrapped in margin.

margin
border
padding
content

Drag the sliders — the box redraws live, demonstrating how margins (outer spacing) and padding (inner spacing) define size.

Common properties

DragWeb's Property Panel exposes fields per widget — every one of them maps to a real CSS property that the Style block writes for you.

Property Panel fieldCSS propertyExample value
backgroundbackground#2196F3
colorcolor#FFFFFF
fontSizefont-size16px
padding / marginpadding / margin12px
borderRadiusborder-radius8px
width / heightwidth / height200px, 100%
opacityopacity0.8
textAligntext-aligncenter
zIndexz-index10

JS

JavaScript basics

CSS makes a page look right; JavaScript makes it do things. Three ideas cover most of what you need to start:

Variables

let count = 0;
const name = "Saqib";

A named box to store a value. let can change later; const can't.

Functions

function greet(name) {
  return "Hi " + name;
}

A reusable block of steps you can run by name, as many times as you like.

Events

btn.addEventListener(
  'click',
  () => { /* ... */ }
);

"When this happens, run this." The heart of interactivity.

Stack a few blocks, get real code

This is the same shape as a stack in DragWeb's block editor: an event on top, a condition, then an action.

▾ Button1 . onClick {
☰ if counter < 10
☰ set Label1.text = counter 
button1.addEventListener('click', () => {
  if (counter < 10) {
    label1.textContent = counter;
  }
});

Interactive

Sketchware-to-Web Sandbox

Configure property blocks visually, just like in DragWeb's Style and Logic screens, and see the exact HTML, CSS, and JS generated in real time. Click the custom view to see animations and event listeners run!

Block Editor (Style Blocks)
▾ #myWidget {
☰ background
☰ text-content
☰ padding
px
☰ border-radius
px
☰ font-size
px
▾ when #myWidget . onClick {
☰ increment clickCount++
☰ animate scale(0.92)
Visual Preview (Sketchware Output)
Click Count: 0

Bridge

How it all becomes one export

Put HTML, CSS and JS together and you get DragWeb's export pipeline:

01

Widget tree

Nested JSON — tags, ids/classes, properties.

02

PageCodeGenerator

Walks the tree for HTML, CSS and JS.

03

HTML + CSS + JS

Standards-compliant source files.

04

ExportManager

One file, split files, or a ZIP.

Cheatsheet

HTML

  • Nesting = the DOM tree
  • id unique, class reusable
  • Self-closing: img, input, br

CSS

  • margin → border → padding → content
  • Select by tag, .class, #id
  • Values need units: px, %, em

JS

  • let / const store values
  • addEventListener('click', fn)
  • getElementById(id) grabs one element

DragWeb

  • Widget tag → HTML tag
  • Property Panel field → CSS property
  • Block stack → JS function body