# Hello World! ## 0. Introduction This guide is meant to introduce someone who is a total beginner to Onwebed. We're going to be building a really basic page which is equivalent to writing a "hello world" program when someone is starting out with a programming language for the first time. The guides are here to give you examples, showing how to do things step-by-step, while the docs explain concepts. > The reader is assumed to be a total beginner to Onwebed, but is expected to have basic idea of web development - which includes HTML, and CSS. ## 1. The Page Manager To manage pages, you must enter the page manager, which can be done by visiting `your-site/pages` where `your-site` is simply going to be the base url of the Onwebed installation. Example: . After you get there, you'll be prompted to login if you haven't already done so already. Make sure your account has permission to manage pages, otherwise you won't be able to proceed through the following steps.

## 2. Creating a Page After you enter the page manager, you'll be presented with the list of pages by default. Since we want to create a new page, we need to click on `Create New Page` button to access the form for creating one. Then, we'll be presented with a form that requires the `title` and `name` of the new page. In this guide, we're going to enter `Basic Page` and `basic_page` for `title` and `name` respectively. Click the `Create` button to finally create the page. > For details on name, and title of a page, read the [docs on pages](https://onwebed.gitbook.io/onwebed/pages).

## 3. Creating Contents of the Page ### I. Introduction Since we want to create a "Hello World" page, we can get away with simply creating a page which displays the message "Hello World" to the viewer. Before you proceed with creating contents of the page, make sure you understand the [concept of boxes](https://onwebed.gitbook.io/onwebed/box). You don't need to be a master, but at least having some idea of what boxes are will suffice. ### II. Editing the Page To edit the contents of the newly created page (which is empty by default), click on the button `Edit` on the row of the page in the list of pages. To display the "hello world" message, we need to create a box which will hold the text. A liquid box will be perfect for this, since it holds text. However, it can't exist on its own - it needs a solid box as parent. So, without any question, we need to create a solid box first.

Entry from the list of pages, which includes the edit, and delete button.

### III. Adding a Solid Box To add the solid box, click on the button `+ solid box`, which stands for "add solid box." Since there was no box when we clicked the button, it won't ask about the placement of the new box. Instead, it'd be placed automatically at the root of the page. By default, the label of the newly created solid box would be `div`, and would have no content. We'd want a simple `div` to hold the "Hello World" text, so it's perfect for us.

### IV. Adding a Liquid Box We need to create a liquid box inside the newly created solid box, in which we'll put the text "Hello World." To do so, click on `+ liquid box`, and since there is already at least one existing box, we'll be asked about its placement. Since, we need to put it inside the solid box, we'll just click on either `+ inside (first)` or `+ inside (last)` which stands for "add inside as the first child" and "add inside as the last child" respectively. Either one would suffice since there was no box already inside in the solid box. It'd simply place the newly created liquid box inside the solid box. The liquid box would hold the text `Hello!` as its content by default.

### V. Editing the Liquid Box To change the text, we need to edit it - which can be done by clicking on `edit box` button from the menu (shortcut is `e`), and selecting the liquid box. A modal would popup, where you can edit the label and the content of the selected box. Set the content to "Hello World", click `Apply Changes`, and we should be good to go!

Liquid box with its text set to "Hello World".

### VI. Exiting the Edit Modal If you ever want to exit this modal, or any other modal, simply hit `escape` on your keyboard. It'll ask if you want the changes to be discarded, where you can reply "yes" by hitting the `escape` key once again. Continue as usual with the editing, if you want to reply "no."

### VII. Saving and Viewing the Page After you're done with your work on the page, and before you want to view the page, you must save it. To do so, click `save` from the menu. Click the `view` button to view the page, which should open the new in a new tab or window.