Web Development for Dummies

HTML.md

Introduction to HTML

HTML is a simple (Hyper-Text) Markup Language used to describe the structure of user interfaces on the web.

An HTML page is made up of elements, defined with a start tag and an end tag:

<tag>content goes here</tag>

HTML elements can also contain additional information in the form of attributes, defined inside the start tag:

<tag type="a"> content goes here </tag>
<tag type="b"> content goes here </tag>

class and id are common attributes used to distinguish between similar elements.

The browser reads these HTML elements and renders them accordingly. Lets explore a few widely used elements:

heading tag - <h1> to <h6>

These tags are used to show a heading on the page. For example:

<h4>Heading Size 4</h4>

Heading Size 4

<h5>Heading Size 5</h5>

Heading Size 5

<h1> has the biggest font-size, <h6> the smallest.

block tag - <div>

This is essentially a block element used for structuring content. Lets say we want to display a blog post which has four sections - date, title, content, author. We will create a structure like this:

<div class="blog-post">
  <div class="blog-date">19th Jan, 2017</div>
  <div class="blog-title">How to build a web app</div>
  <div class="blog-content">...</div>
  <div class="blog-author">....</div>
</div>

anchor tag - <a>

Structure is fine, but how does one navigate from one web page to another? With the use of anchor tags:

<a href="/register">Register your own app today</a>

href is the attribute used to define the exact url of the page you wish to send the user to.

<a href="http://www.heroku.com" target="_blank">Host your own app on Heroku</a> The target="_blank" attribute allows us to tell the browser to open the link in a new tab.

image tag - <img>

What would the web without visual content, and its most important component - images. You can add images to your web page like this:

<img src="http://wallpapers.com/amazon-rainforest.jgp" height="400" width="300" />

yes you can end a tag like that ;)

src attribute defines the url of the image that needs to be loaded. width and height defines the space to be occupied by the image in pixels.

video tag - <video>

The video tag is more or less like the image tag, except with the option to add multiple sources of content, and other dynamic attributes like autoplay and controls.

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

JS.md

Introduction to JavaScript

JavaScript is the most prominent programming language used on the web today. Besides used to program interactions on the interface, it can be used on your server.

Lets have a run through of some of the fundamental concepts of javascript:

Variables

Variables, if you are new to programming, are the primary way to store temporary data needed by a program. JavaScript variables can contain these 5 type of values: String, Numeric, Boolean, Object and Function. JS also provides us three ways of declaring these variables: var, let, const. var is function-scoped. let & const is block-scoped. const is an immutable variable, whereas the other two are mutable.

An example will clear all this blabber up:

// console.log() is a function used to print output

function demo(){
  var a = 10;
  let b = '20';
  const c = 'Hallelujah';
  if(true){
    let b = 10;
    console.log(a); // 10
    console.log(b); // 10
  }
  c = 'Rock n Roll'; // Type Error
  console.log(b); // 20
}

Arrays

Variables allow us to store temporary data, but what if we have a lot of temporary data and all of it is ordered? Arrays to the rescue!

var primeArray = [3,5,7,11,13];

primeArray[0]; // 3
primeArray[2]; // 7
primeArray.length; // 5
primeArray.push(17);
primeArray; // [3,5,7,11,13,17]

Conditionals

Is it really a programming language if you cannot control behaviour? Probably not. The basic building block of conditionals in JavaScript is if...else if...else.

var num = 5*5;

if(num > 10){
  // inside if block
}

if(num < 10){
}
else{
 // inside else block
}

if(num < 10){
}
else if(num === 25){
  // inside else if block
}
else{
}

Loops

Loops are used to execute a block of code multiple number of times. Lets say we want to find the square of all numbers from 1 to 100. We will not write 100 lines of code, we'll write a for loop.

for(var i=0; i<100; i++){
  console.log('the square of '+i+' is: '+(i*i));
}

// output
the square of 1 is: 1
the square of 2 is: 4
the square of 3 is: 9
...
...