Build your first web app with friends

Build Your First Web App
with Friends
Presented by:
Abdul Qoyyuum Bin Haji Abdul Kadir
Dated: 05/07/2014
WWW.ANAK.IT

Before We Begin
Download/Install the following applications:
● Brackets.io - www.brackets.io
● Dropbox - www.dropbox.com
While you are downloading these applications
and installing them, let’s move on.
ANAK I.T BRUNEI DARUSSALAM | WWW.ANAK.IT

Short Discussion: Why
Programming?
1. Teaches us how to think logically.
2. Teaches us how to fix (debug)
3. To make money

About Qoyyuum
● Developed and
designed Websites
and Webapps for 5
years in the Web
Industry
● Managed web
projects for 2 years

Objectives
● Turn your CV into an online CV
● Design your online CV pretty!
● Make it interactive.

The Setup
1. Download or copy the setup zip file
2. Put the folder on your desktop (or anywhere
accessible on your machine)
3. Point your Brackets.io to that folder by
“Open Folder” option in the File menu.
4. Resize your Brackets.io screen to the left.
5. Click on the Live Preview button (the
lightning bolt located on the top right of the
Brackets window), and resize to the right.

Workspace Setup
Setup your workspace to something like this.

HTML Tagging: Skeleton

HTML Tagging: Paragraph
<p> is Paragraph tagging

HTML Tagging: Pictures
<img src=... /> is to search for images

HTML Tagging - a
<a href … > is to create hyperlinks

HTML Tagging - Headings
<h1> is the
biggest heading
<h2> is the
second biggest.
<h3>, <h4>, <h5>
and <h6>, are
other big
headings

HTML Tagging - Table (1)
<table>
</table>

Make borders by adding the border=1. And just
to make it look pretty, add cellpadding and
cellspacing to 0.

HTML Tagging - List (1)
<ul>
<li>...</li>
<li>...</li>
</ul>

HTML Tagging - List (2)
<ol>
<li>....</li>
<li>....</li>
</ol>

CSS
CSS stands for
Cascading
StyleSheet.
It makes your CV
pretty.
Let’s start by linking
an existing CSS to
your CV.

CSS (1)

CSS - Page Wrap
Add the following
after the <body>
tag:
<div id= “page-wrap>
And then close it
before the
</body> tag:
</div>

What does id = Page
Wrap do?
1. Click anywhere on the <div id = “page-wrap”>
2. Right-click and select “Quick Edit”. OR
3. Press CTRL+E.
4. To close it, press CTRL+E again or click on
the X icon next to the “style.css” word.

Move Your Picture!
Let’s move it to the right by adding an id to the
pic.
… id = “pic” />

Classing up the Objective
Let’s class up the objective by wrapping the
entire objective paragraph with id= “objective”

Clear both sides
There are 2
kinds of clear
types used in
CSS here. One
in div and one in
dd. dd is a
HTML5 tag
used for
description of an
item.

Table to dt & dd
Let’s try using the dt and dd. Replace all the
table work we did in Experience section of the
CV with dt and dd.
Also at the same time, replace all h2 tags of
each section heading to dt tags.

HTML Tag - Span
<span> tag is used to create a visual effect. It
doesn’t work on its own but together with CSS,
it's beautiful.

Clean-up
Back to using dt and
dd. They are similar
to how tables work
but more towards
article writing.
<dt>Define
Term</dt>
<dd>Define
Description</dd>

End
Result
You
should
have
something
like this.

Intermission
WWW.ANAK.IT
BRB in 15 min

Javascript
Javascript is the core of functionality and
interactivity. It enables visitors/users to interact
with your static page.
So let’s add some interactivity with your CV by
adding a basic AI.

Interview Area
We will need to setup where the Interview area
will be in our CV. Copy the code below
everything in your CV but before the last </div>:

Add JS File
1. Create a new file and name it “interview.js”
2. In your cv.html’s after the Interview section
and before the </div>, add the script.

BIOS
A regular webapp functions just like what a
BIOS would do. BASICally, takes the INPUT,
processes it, then gives the OUTPUT. This
repeats for as long as the SYSTEM is still
working.

Quick Planning
function takeInterview() {
// This will take the questions keyed in for validation.
}
function processInterview(i_question) {
// This will process the question with your list of
// expected questions to match with your answers.
}
function outputInterview(x_answer) {
// This will give the answer correctly through the processed Interview.
}

Ways to store questions
There are 2 ways:
1. Use a database and connect to it
2. Use Javascript and create an Array

Creating Functions(1)
We are going to take this slowly by first
creating a function that takes the question as
an input.
function takeInterview() {
var i_question =
document.getElementById(“question”).value;
}

Creating Functions(2)
Our next function gives the answer.
function answerInterview(x_answer) {
document.getElementByID(“answer”).innerHT
ML = x_answer;
}

It’s a Parrot
Let’s see if you got it. Is it talking like a
parrot?

Creating Functions (3)
Since we only have the question and there’s
nothing processed, it just outputs what we
typed. Let’s create another function that
processes the question. Put this function in the
middle of the Input and Output functions.

Send Question for
Processing
Since our Input goes directly to Output, we
need to redirect it. Back to your takeInterview
function and add this one line of code.

Response Test & Debug
Is it saying our default answer? If not, try
debugging it with console.log.
1. Right-click and “Inspect Element” in your
browser.
2. Select “Console”
3. Type console.log(i_question) and press
Enter.
4. Try console.log(x_answer) and press Enter.

How do we respond to
specific questions?
So you’re input, process and output is working
but how do you process different inputs for
different outputs?
Input1 = “How are you?”
Input2 = “How much is your
rate?”
Input3 = “What’s your
favorite color?”
Input4 = “Can I have your
number?”
??Process??
Output = “I am fine”
Output = “$1,500 please”
Output = “....”

Remember?
Mentioned about storing pre-defined
questions?
Let’s use the Array function to store them
instead of an actual DB.
An array looks like this.
var array = {
“how are you” : “I am fine”,
“how old are you” : “I am 5 years old”,
“etc” : “etc”
};
Question Answer

Q&A Series(1)
Now that we have a working function, let’s think
about some questions and answers. Inside the
Pre-set-up files, there’s a file called “common-questions.
txt”. Open that up and think up of
some answers.
It doesn’t have to be real answers as you can
edit them afterwards. You have 2 minutes.

Q&A Series(2)
Let’s take 3 questions out of all those common
questions and set up our answers next to them.
Create another JS file and name it myDB.js

Q&A Series (3)
Create a
variable
called
“dictionary”
and start
creating an
array of
question and
answers.

Link this dictionary
Since its in a separate js file, we have to link
this into the cv.html file. Add it before the
interview.js.

Question Matching
Back in
interview.js and
inside the
processIntervie
w() and
inbetween
x_answer and
return, add an IF
condition.

But our default answer?
Yeah, it went
missing and
became undefined.
We need to bring
that back by
wrapping our last
“return x_answer”
into the else of the
IF statement.

Our Final Interview.JS

Our Webapp Result

Add MORE!
Go ahead and more
questions to the
myDB.js file and try
more of them out.
If you find something
wrong, debug it!

Save and Upload to
Dropbox!
1. Login/Register to Dropbox
2. Upload your folder to your Dropbox Public
folder.
3. Share the public URL to your
friends/family/potential employers/your
school teacher/etc.
4. Get feedback, improve it and apply for jobs!

What you can do with
HTML5 & CSS3 & JS?
Examples of HTML5 & CSS3:
● Post-it Notes -
http://cdn.tutsplus.com/net/uploads/legacy/77
1_sticky/step5.html?_ga=1.75595793.528516
078.1403958594#
● HTML5 Browser Game -
http://browserquest.mozilla.org/

Build your first web app with friends

More Related Content

Viewers also liked

Similar to Build your first web app with friends

Recently uploaded

Build your first web app with friends

Editor's Notes