Hello World!

In this guide, we're going to build a really basic hello world page, just to get familiar with Onwebed and have a beginner-friendly start.

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: https://onwebed.herokuapp.com/pages.

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.

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. 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.

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!

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.