LexHack Start Guide

Introduction

Welcome to LexHack! To get started, first we’ll have to do a little bit of computer set-up. If you have problems doing any of the below, ask a LexHack mentor for assistance.

Table of Contents

top

Part 1: HTML

All web pages are written in HTML, which stands for Hypertext Markup Language. A markup language is a system for annotating text that indicates to a computer how the text should be processed. Specifically, HTML tells a web browser how different content on a web page should be displayed.

HTML consists of tags, which are essentially labels for content. Tags are made up of keywords surrounded by angle brackets <>. For example, <h1> is a tag which indicates when text is a heading. Most tags, such as the <h1> tag, come in pairs that encapsulate the relevant content. You can think of HTML as similar to a set of parenthesis. After this opening tag, fill in the content “inside” the tag, and close it with a "closing tag" (kind of like how you "close" a set of parenthesis), which is same except with a forward slash before the keyword: </h1>. A pair of such tags and the content it describes is together called an HTML element. Thus:

<h1>This is a heading.</h1>

This is an example of a h1 element. Try typing this into your text editor and saving it as a .html file (e.g. index.html). Then open the file in your browser. You should see something like this:

This is a heading.

Great, you've made your first HTML page! Now, every HTML page has a similar basic structure, looking something like this:

Notice that the entire thing is surrounded by <html> tags. Makes sense, right? It's HTML, after all. Inside, there are two main tags.

The first, <head>, is all about the metadata. Stuff like search engine index information, character set, style and script importation, author, and title go here. <title> is pretty straightforward - it's what shows up in the title of the browser tab or window.

The second, <body>, is all about content. It's what shows up in the main display area of the browser. Most of the rest of this HTML tutorial is how to structure this content with more tags, such as the <h1> header tag you saw earlier.

Here are some basic tags and what they do - try them out now! Just copy the example into the <body> of the HTML document, and see what shows up. Modify as you wish.

Tag

Example

Result

<strong> Bolds the text inside.

<strong>Word</strong>: defn

word: defn

<em> Italicizes the text inside.

This is <em>really</em> important.

This is really important.

<p> Forms a paragraph (doesn’t mean it’s indented!)

<p>LexHack is a programming competition.</p>

<p>You should come!</p>

LexHack is a programming competition.

You should come!

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Header tags: used for page titles and such, sized according to number (<h1> is biggest)

<h1>Welcome!</h1>

<h2>Subtitle</h2>

<h3>SubSubTitle</h3>

text

Welcome!

Subtitle

SubSubTitle

text

<br> Line break: puts a line break between content (does not require a closing tag!)

This is some text!

<br><br>

This text is on a different line!

This is some text!


This text is on a different line!

<!-- --> Comment: does absolutely nothing. You can use it to insert annotations explaining your code, or to temporarily remove code you don’t want to delete but which you don’t want to show.

<!-- This is the top of the code. -->

<!-- <p> ahhhhhhhhhhh this needs to be revised</p> -->


<img src=”imageurl"> Image: inserts an image, specified by the URL in quotes. SRC is called an “attribute”; attributes can be used for many things. See below. Also, note how the img tag does not have a closing tag.

<img src="http://goo.gl/hE6opY">

http://images.sodahead.com/polls/000932077/moo_xlarge.jpeg

Did it work? Ask a LexHack mentor now if you weren’t able to see what’s described in the table. For further reference, check out the example application provided with the start guide, called Chirp (download here). Open up index.html in Sublime Text to view the code, and open it up in your browser to run the application. You can “Chirp” messages to our database that will be visible to everyone else at LexHack! Now take a look at the HTML again. You should be able to find some tags you recognize, and most likely a couple new ones. Don’t worry about those too much, but try playing around with the code a little bit.

Suggested Exercise: Try adding some “how-to” text of your choice right below the heading.

top

Part 2: CSS

You may have noticed that Chirp, our example application, and generally most websites, look much better than the plain one you've made so far.

Although a number HTML elements already have some basic formatting, because HTML is a markup language, like we mentioned earlier, its primary use is for labeling different types of webpage content, such as identifying a paragraph or a heading.

Cascading Style Sheets, or CSS, is the language used to apply formatting and appearance to a webpage. To include CSS in an HTML file, we include the CSS code between <style> tags, which should generally be included inside of the <head> element. Let's write that into our file:

CSS Syntax

Despite being closely tied to HTML, CSS syntax looks quite different from that of HTML. CSS is made up primarily of three components: selectors, properties, and values. CSS properties are set to specific values through what is called a declaration, which is a property and value pair. Selectors specify which HTML element(s) the declarations are applied to. Here is a look of the format of CSS (leaving out the HTML):

Keep in mind that this isn't valid CSS, just an example of what CSS looks like. CSS declarations for the HTML elements specified are contained within the brackets: { }. Inside the brackets, we have property: value;, which sets what is called a property, which is a keyword like color, to a value, like red. Finally, we have the semicolon at the end of the declaration in order to separate each declaration. Here's what some actual CSS might look like:

This CSS snippet would take all the <h1> elements, and apply color: red; to each one. color is the text color, and red is the, you guessed it, the color red, so this snippet would turn all of the <h1> elements and turn their text to the color red. Putting this into the <style> tags, we would get:

LexHack!

This is a very empty LexHack website.

Here is a link to an extended list of CSS properties and their different values. We recommend you take a look at several important properties like: color, font-size, height, width, and background-color. HTML Classes

CSS selectors can also select more than just elements. When you don't want to apply a style to all the elements of your site, you use an HTML attribute called classes and ids, which can be named anything. Here is an example of a <p> element with a "important" class:

As you can see, in order to associate the "important" class, inside the <p> tag, there's class="important". Always remember to put the name of the class in the quotation marks! To add additional classes, just separate the class names by a space (such as class="classone classtwo", which would set the HTML element to the classes "classone" and "classtwo").

With classes, we can be more flexible with our CSS, and use selectors to specify more than just a type of HTML element. With a class selector, we can specify styling to all elements associated with a specific class. To write a class selector, we prefix a normal selector with a period. Here's how looks with the "important" class as an example:

This code snippet would make all elements with the "important" class have red text.

Fonts

Typography is an integral part of web design, and fonts being an important choice for any website. Fonts are a complicated business in CSS. Usually you only have access to the local computer's fonts, which generally mean that you have to stick to common fonts like Helvetica or Times, in order for it to render consistently across browser. However, thanks to Google Fonts (hit up that link), fonts are made trivial. Select a few fonts, and follow the steps provided by Google. Here's a full example:


What this is doing is getting the "Raleway" font using Google Fonts. Then, the font-family property in the CSS is applying the font.

top

Part 3: Javascript

Javascript is a programming language that is designed to make websites interactive. Right now, we've shown you the technologies necessary to build a website that displays static (not interactive) content. While cool, this doesn't allow you to build a useful application. Javascript allows you to dynamically change content, interact with data from external sources, and take input from the user.

Before we can talk about using Javascript in your own site, we need to go over some basic programming concepts.

Variables Variables in programming are similar to variables in other branches of science/math. They represent some value that can change over time, and this value can be of a variety of different data types. For example, if you were programming a video game, you might have a numeric variable that stores your health level. When you get hit by an enemy, the program might decrease that variable by 1. In Javascript, to define a variable you use the keyword var, which initializes a variable, followed by a space and the name of the variable. Then you use an = and a value to set the initial value of the variable. For example, this sets the value of "foo" to 2.

var foo = 2;

To change the value of a variable after creating it, you use the equals sign without using the var keyword. For example:

(A quick comment on comments - any code preceded by // is ignored by the Javascript interpreter, just like <!-- --> in HTML - we'll be using this to annotate our examples, and you can do the same in your own code).

Variables don't have to be numbers, either. The other type of variable you might commonly use is called a "string". Strings store text, and work the same way except you define them with quotations surrounding the text. For example,

var greeting = "hello world!"; //sets value of greeting to "hello world"

Mathematical Operations
In Javascript, you can use basic mathematical operations on variables/numbers. This is done in a very intuitive way:

The above code block will set b to 5, because it evaluates a + 3, which is equal to 5 for a = 2.

You can do this for all four of the basic operators: +, -, *, and /. There is one other operator that is seen fairly commonly, the modulo operator, represented by %. a % b is equal to the remainder of dividing a by b. For example:

This block sets c to 1, since the remainder when dividing 4 by 3 is 1.

Control Structures

An important part of programming is the logic that allows your program to interpret and change based on different input. The following are some of the most important control structures in basic programming:

If Statement: Very intuitive, executes the code in curly braces if the statement in parentheses is true.
Example:

** Important note - a single equals sign is reserved for assigning variables. To test for equality like in the example above, use 2 equals signs (==).

Finally, the else-if clause runs a code block if the previous statements are false, but the statement in the if-else clause is true. For example:

You can see here how the cases are checked one at a time, with the code under the else statement used kind of like a "default".
While loops: While loops are kind of like if statements, except they run continuously while the statement is true, instead of running once.
Example:

Since the above while loop runs until the statement is not true (a >= 11), it will print numbers from 1 up to 10. Read it like "while a is less than 11, print out a and increment a."

Functions
Functions are blocks of code that can be executed multiple times in different places. The syntax of a function looks like this:

This defines a function called "printGreeting." When this function is executed, the program outputs "hello world!". To execute the function, do this: printGreeting(); Functions can also take in what are called parameters. Parameters are values that act like a variables "local" to the function. For example
This function outputs the value "passed into" the function added to the number 2. addTwo(3) will output 5, while addTwo(7) will output 9.
Functions can also return values.
This, instead of printing it out like with console.log(), returns the expression, replacing the original function call. Thus:
var result = add(3, 5);
runs and reduces to
var result = 8;
which will make the variable result have a value of 8.

Part 3.5: jQuery

Now that you’ve learned how to create, format, and style content on a webpage, and been exposed to some basic programming concepts, it’s time to practically apply these skills to a web application. Manipulating HTML ("the DOM") can be done entirely in JavaScript, but to make life easier we’re going to be using JQuery, a library of pre-written JavaScript code. jQuery’s slogan is "write less, do more," and might be helpful for you in trying to prototype your application in as little time as possible. You’re technically still writing in JavaScript, though, so all of the above is applicable.

jQuery basics: Selecting HTML -You can select a set of HTML elements just like you would in CSS:

Modifying selected HTML - Once you have selected HTML, you need to be able to manipulate it. Manipulations of HTML include changing its contents, moving things around, adding/removing elements, and changing its CSS. In jQuery, these manipulations are already-included functions that are appended to the HTML "selector" with a period. A basic example might look like this:

Suppose you have some HTML like below:

As you should know at this point, this will display a paragraph that says "Nothing here right now!", with the id "dinosaur-paragraph". It's also possible there might be some CSS applied to that paragraph, but that doesn't matter right now. Now, the following jQuery will change the text of the paragraph: $("#dinosaur-paragraph").html("Dinos are cool!"); Here's how this statement works bit-by-bit: $("#dinosaur-paragraph") Selects the HTML element with the id "dinosaur-paragraph" .html("Dinos are cool!"); Changes the HTML between the tags of the element specified in the previous part (in this case "dinosaur-paragraph") to the text specified between the parentheses. In this case, the text is "Dinos are cool!". Remember - quotes denote a string in JavaScript.

Here's a table of some basic jQuery manipulations:

Function

Description

("#example").html("text here")

Changes content of tag "example" to "text here".

("#example").append("text to append")

Appends "text to append" to the content of tag "example".

("#example").prepend("text to prepend")

Prepends "text to prepend" to the content of tag "example".

("#example").toggle()

Makes element "example" visible if it's currently invisible, or vice-versa.

("#example").css("property", "value")

Modifies the CSS that applies to id "example", setting the value of "property" to "value".

See more DOM manipulation functions at http://api.jquery.com/category/manipulation/.

Getting input with jQuery - So far, we can change how we display things by using jQuery functions. The next step is to get input from the user. For the purposes of the example, we're going to be looking at two types of input - text and button.

To get the value of a text box, simply use a selector that selects the text box with the function .val().
Example:

var myInput = $("#input").val();

The above statement makes myInput represent the value of the text box with the id "input" at the time that function was used. Then, you can use the variable as a value for other functions.
Example:

$("#what-did-i-input").html(myInput);

This will set the text of the element with id "what-did-i-input" to the text you inputted. Remember that myInput is a variable - so don’t put quotes around it!Keep in mind, you don't use quotes with your variable name (otherwise it will literally display as the word "myInput").

Next up is detecting when a user clicks on a button, or some other element on the page. The way we do this is by setting what is called a "callback" to the click event. A callback is a function that gets called when some event occurs. Here's an example:

<button id="click-me">Click me!</button>

Basically, the way that this works is you're calling a function called "click" to a selector, then putting another function in between the parentheses. It's called an "anonymous function," which is a temporary function that is passed to the Click event. When the Click event is triggered, that anonymous function is run. You can also define a function outside of it:

For more info, the following is an excellent reference on using jQuery: http://jqfundamentals.com/chapter/jquery-basics.

Finally, coming back to our example app Chirp, you can look in main.js to see the Javascript that governs the application. Everything is wrapped in the $(document).ready function described in the jQuery link, and it sets a click listener on the selected submit button $("#submit"). However, the majority of this code you won't understand yet - it requires knowledge of Firebase.

top

Part 4: Firebase

The final part of your application is called the "backend" or "server-side" component. This is the part of an application that runs on a server, and deals with things like serving your webpage and interacting with your database. The backend can be enormously complex - like search indexing, file management, email sending and receiving, database (especially user data) management, etc. - but for simplicity, you're going to use a service called Firebase, which handles your backend for you. Using Firebase, you can access data stored on the cloud using Javascript on the "client side" of the application.

First, sign up for Firebase (https://www.firebase.com/signup/). You should see a little box titled "My First App", with a URL kind of like https://flickering-inferno-1483.firebaseio.com/. This URL is your Firebase's URL, and is how you access your data in the code. In Javascript, here is how you "initialize" your Firebase:
var fb = new Firebase('https://your-firebase-0000.firebaseio.com');
This lets you use the variable fb to access the Firebase at that URL.

In Firebase, you can think of your data stored as sort of an online file system. Here's a line that gets run at the very beginning of Chirp:
var postsRef = fb.child('posts');
This sets the variable postsRef to a reference to a "child" of the Firebase called "posts". This essentially narrows down the scope of what you're looking at to data under "posts". You can think of posts as a folder on your online filesystem, and everything you do with postsRef will take place in that folder.

Next, you can see that in Chirp we run a function on postsRef when the submit button is clicked. This function adds data to the filesystem, and looks like this:

The function is called "push", and you can literally think of it as "pushing" more data into the folder. The data is written as a Javascript Object Literal, which for all intents and purposes is a key-value system. "Content" and "date" are keys, and each one corresponds to the value after it. In this case, the current value of the message box is stored as "content", while the current date is stored as "date" (don't worry about the fancy code to get the date for now).

To load data, we use a callback like in jQuery. This callback is called for every single piece of data already stored, as well as data that is entered while the site is loaded (allowing for real-time data transfer - how cool is that!) The code looks like this:

The anonymous function passed into this callback has a parameter called data which contains the data added. To access the data, you first call data.val() and store that in another variable, in this case postData. Next, you can load the stored data using the same keys as the ones you "pushed" with. For example, var content = postData.content; loads the content of the post you're reading into the variable content. Finally, using jQuery we can edit messages to display the date and content.

And that's it for a basic posting app using Firebase! There's a lot more you can do with it, and you can read all about it here - https://www.firebase.com/docs/web/guide/.

Good luck, happy hacking, and don't be afraid to seek out a mentor if you need help!