# Lively Onboarding
## Guides
- [TDD for Active Expressions](./reactive/tdd_for_aexprs.md)
## Goals?
- Open applications and tools?
- Workspace
- Browser
- Where to start? Source code in files or working with objects?
- Create and edit a text element? #Objects
- #ContextMenu > Insert > Text | Rectangle | Drawing | Button
- in the body... only locally persisted?
- in a file
- Edit elements with #Halo
- grab | drag | copy | inspect | ..
- Edit a text file #Files
- markdown, html, JavaScript
- create and work together on a lively4 web component
- create and work on a JavaScript module
## ...
- What is a "Web Component"
```html
My Website
This is a standard html element
This node is a child
```
We use Web-components to create tools and applications directly in the Web-browser.
So lets start:
- Create a new component using a ["wizzard"](../../templates/index.html)
- this will create two files:
a) a html file containing a template
b) a js file containing a module exporting a subclass of ``HTMLElement``
# Things we should say somewhere:
- Ctrl-Shift-F - search throughout whole repository.
- F7 switches between .js and .html file of a web component
- `Strg-Drag` on body/background to navigate the lively world
- Persistence indicator, top right corner, when explaining persistence of objects/html elements