Hello World Lab

Hello World project for Quips

Before we start

Get yourself familiar with the packages used in the Hello World app.

Generally, you should be familiar with the following basic scripting elements we use in all apps:

  • JADE A clean, whitespace-sensitive template language for writing HTML
  • JavaScript A high-level, dynamic, untyped, and interpreted programming language.
  • Cascading Style Sheets (CSS) A stylesheet language used for describing the presentation of a document written in HTML/JADE.

The list below contains all libraries and frameworks loaded and used in the app.

  • BOOTSTRAP A sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • JQUERY The Write Less, Do More, JavaScript Library

Prepare your environment

We recommend you have at least 2 browser windows open: one displaying this tutorial, and the other displaying the project development page. Like this, you can look at both and switch from one to another..

This lab should not take you more than 10 minutes to finish.

Now, let's get started.

Step 1: Create a new project

This step will create a new blank project in your MyProjects list. We will use this project to create our app.

Instructions

  1. Sign in to Quips. If you have no account, register first
  2. Go to My Projects in the upper navigation bar.
  3. Click on NEW

Results

You will be redirected to the project page of your new project. The default name of the project is "NewProject". The project will also appear in the list of your projects under My Projects.

Troubleshooting

Make sure to be registered and signed-in in order to see the My Projects tab at the right in the upper navigation bar.

Step 2: Setup your new project

This step consists of changeing the name of the project and understanding the main properties and set-up of a project.

The project contains sections:

  • Section 1: Name and description of the project and instructions to share. Also contains information about the last deployment
  • Section 2: Content of the project in terms of javascript, jade, css and data
  • Section 3: HTML preview of the app

All changes, additions, deletions made are syncronised in real time with the Quips server and saved. Jo need to look for a save button.

Instructions

  1. Locate the name of the project as the heading of the first section
  2. Click on the dashed-underlined link
  3. Enter the new name of the project in the input box which popped up
  4. Validate the v changes
  5. Proceed identically with other elements you want to change in section 1

Results

Your project will have a new name. When reloading the page, the new name will show. In My Projects, the new name will also show.

Troubleshooting

Be sure to have internet connection when working on a project, otherwise all your changes will not save.

Be sure to be signed-in to work on your project.

 

Step 3: Add Bootstrap to your project

Packages are javascript and style (CSS) libraries which will ne loaded automatically before your app is executed. In the Packages section, a number of packages are listed. For our project, we want to use the Bootstrap styles so we need the Bootstrap package.

Instructions

  1. In the Packages section, click on the Bootstrap button

Results

The Bootstrap button is highlighted in blue.

Troubleshooting

Make sure to be signed-in and to be under your project in My Projects, otherwise the buttons will be disabled.

Step 4: Write Hello World in heading style inside a Jumbotron

This step consists of entering content in JADE styled as as big heading.

bootstrap has so-called Jumbotrons which styles boxes for introduction messages. Jumbotron is the name of a class, so in JADE this will simply be written as a dot (.) after the HTML heading h1.

We will write the JADE code directly in the online code editor.

JADE has a very picky syntax, especially with respect to spaces. Make sure you have no unnessecary leading or lagging spaces.

Instructions

  1. Go to the JADE section
  2. Click inside the code editor
  3. Write
    • h1.jumbotron Hello World
  4. Click Render

Results

In the HTML Preview, a bootstrap styles jumbotron box should show "Hello World" in big and bold.

Troubleshooting

If the project did not render, check the console box for errors. If there are syntax errors in your Jade code, they will be mentioned in the console as errors.

Step 5: Render your project

Now that you wrote all the code and did all the setup, you need to generate the HTML, meaning the Jade needs to be rendered (compiled). That is done one the server.

Instructions

  1. Verify your code and setup is correct
  2. Click Render

Results

The rendered HTML is displayed in the HTML Preview box. If the app is bigger than the box, there will be scrollbars. Open in a new window if needed.

Troubleshooting

Make sure you have internet connection.

Be patient. The rendering may take some time, up to 10 seconds, depending on the size of your code and the speed of your internet connection. A spinning wheel is displayed to indicate that the app is loading.A spinning wheel is displayed to indicate that the app is loading.

Rendering errors are displayed in the console. Look at the Jade documentation and our blog to know more about common errors.

Bravo! You finished the lab!

If you followed all the steps, your project should look like this