Skip to content

Latest commit

 

History

History
789 lines (592 loc) · 17.4 KB

FE105.md

File metadata and controls

789 lines (592 loc) · 17.4 KB
Raw

HTML

HyperText Markup Language or HTML is the primary format for displaying content on the web. HTML defines elements in a tree structure with the <html> tag at the root. The most basic form of a web page in HTML consists of a <head>, and <body> tag inside the <html> element.

<html>
  <head>
  </head>

  <body>
  </body>
</html>

The only special tag in the above example is the <head> or header tag. The header is invisible and contains meta information about how to present the page in a browser. A common tag like this is the <title> tag which specifies the title of the browser tab.

<html>
  <head>
    <title>Awesome Pisano Web Page</title>
  </head>

  <body>
  </body>
</html>

All other visible content is put inside the <body> tag.

<html>
  <head>
    <title>Awesome Pisano Web Page</title>
  </head>

  <body>
    Welcome to Pisano!
  </body>
</html>

Elements

Elements provide structure to HTML documents and without them Web pages would only consist of text. There are many element types in HTML so we will only go through the most common essentials.

Text Elements

  • Headings and Paragraphs
<h1>Moby Dick</h1>

<h2>Chapter 1 - Loomings<2>

<p>
  Call me Ishmael. Some years ago- never mind how long precisely- having little
  or no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world.
  It is a way I have of driving off the spleen and regulating the circulation.
</p>
  • Emphasis
<strong>This text is IMPORTANT</strong>

<em>This text is emphasized</em>
  • Anchors(links)
<a href="http://pisano.co">Click here to goto Pisano</a>
  • Line Breaks
A line of text.<br>
Another line of text.

Structure Elements

  • Vertical blocks
Some content.
<div>This content is separated vertically from the above.</div>
  • Inline Blocks
Some content. <span>this content is an inline continuation.</span>

Functional Elements

  • Forms & Input
<form action="http://kamp.pisano.co/apply">
  Name:<br>
  <input type="text"><br>
  <input type="checkbox"> I am awesome!<br>

  <input type="radio" name="options"> Option A<br>
  <input type="radio" name="options"> Option B<br><br>

  <input type="submit">
</form>
  • Buttons
<button>Click Me!</button>

Images

<img src="http://kamp.pisano.co/images/pisano-logo.png">

Scripts

<script>
  // This is some JavaScript
  console.log("Hello!");
</script>

or for external files:

<script src="my-awesome-script.js"></script>

Styles

<style>
  /* This is some CSS */
  body {
    background: red;
  }
</style>

or for external files:

<link rel="stylesheet" href="my-awesome-styles.css">

Element Attributes

As seen in the previous examples, elements can have attributes that define and change their behaviour or appearance. Since elements have different attributes and there are so many of them it is a good idea to check when in doubt. An excellent resource on HTML element attributes is Mozilla's MDN Documentation.

There are two special attributes that all HTML elements can have named class and id. These provide ways to interact with the document and change the default styles.

Classes

The class attribute is used to apply custom styling to HTML elements and share styling across pages/sections of web documents.

<style>
  .red {
    color: red;
  }
</style>

This is some text. <span class="red">This is some red text</span>

IDs

The id attribute is used as a unique identifier for elements. This Identifier can be used for linking scroll positions on web pages with the hash parameter on URLs like this or id attributes can be used to access elements from JavaScript.

<button id="myButton">Click Me!</button>

<script>
  // access the DOM via document
  var myButton = document.getElementById("myButton");

  // add a click listener to myButton
  myButton.onclick = () => {
    console.log("Hello");
  };
</script>

CSS

Cascading Style Sheets or CSS is a simple styling language used to specify the appearance of HTML elements. Each section of CSS consist of selectors and rules.

selector1,
selector2 {
  rule1: value;
  rule2: value;
  ...
}

Selectors

CSS selectors provide a way to match or target specific elements in the HTML to apply styles to.

Direct Selectors

/* Select all elements with class red */
.red {
}

/* Select element with id myButton */
#myButton {
}

/* Select all <h1> heading elements */
h1 {
}

/* Select <h1> heading elements with class red */
h1.red {
}

/* Select element with id myButton if it has class red */
#myButton.red {
}

Structural Selectors

CSS also allows for matching based on the structure of elements. Consider the following HTML document;

<div class="content">
  <div class="inner-content">
    <button>Click me!</button>
  </div>

  <button>Click me too!</button>
</div>

<button>Click me three!</button>

The following selector will only match the two <button> elements inside <div class="content">.

/* Select button elements inside anything with .content class */
.content button {
}

While the following will only match the second <button>.

/* Select button elements only one level down inside anything with content class */
.content > button {
}

Another useful selector is the + selector. The following matches the last <button> element:

/* Select button elements preceded by anything with content class */
.content + button {
}

Pseudo Selectors

Pseudo Selectors are used to modify selectors based on a number of structural properties. Just to name a few consider the following HTML:

<div class="list">
  <div class="list-item">Item 1</div>
  <div class="list-item">Item 2</div>
  <div class="list-item">Item 3</div>
  <div class="list-item">Item 4</div>
</div>

The following will match the <div> with the inner text of Item 1 and Item 2 respectively.

/* Select any element with list-item class that is the first child of its parent */
.list-item:first-child {
}

/* Select any element with list-item class that is the last child of its parent */
.list-item:last-child {
}

It is also possible to do more complicated matches with nth-child. The following will match the <div> with the inner text of Item 1 and Item 3.

/* Select any element with list-item class that is the odd numbered child of its parent */
.list-item:nth-child(odd) {
}

Or match the <div> with the inner text of Item 2 and Item 4.

/* Select any element with list-item class that is the even numbered child of its parent */
.list-item:nth-child(even) {
}

Others

There are many other selectors that can be quite useful in certain cases. Be sure to check them regularly because it is quite difficult to keep all of them memorised. A good resource is again Mozilla's MDN Docs.

Rules

CSS rules are for modifying the presentation of the elements in the HTML documents.

Basics

The following are some basic rules for styling content:

  • background: blue;
  • color: red;
  • font-size: 14px;
  • font-weight: bold
  • line-height: 20px;
  • vertical-align: center;
  • text-align: center;

Spacing Rules

Margin, border and padding are the spacing rules. Margin is the space between elements, border is the space between the element and its inner content and it is generally also given a different color. Padding is the space between an elements border and its inner content.

<div>Some content</div>
<div>Some more content</div>
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 11px;
  margin-left: 14px;

  /* vertical horizontal margin shorthand */
  margin: 10px 20px;

  /* all directions */
  margin: 10px;

  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: groove;

  border-top-width: 1px;
  border-right-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 4px;

  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: purple;

  /* directional short form */
  border-left: 1px solid green;

  /* all directions */
  border: 1px solid green;

  padding-top: 10px;
  padding-right: 13px;
  padding-bottom: 12px;
  padding-left: 11px;

  /* vertical horizontal padding shorthand */
  padding: 10px 20px;

  /* all directions */
  padding: 10px;

  /* NOTE: sizing */
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

Layout Rules

Advanced element layout is achieved by using the display: flex; property.

<div class="container">
  <div>First div</div>
  <div>Second div</div>
</div>
.container div {
  background: white;
}

.container {
  display: flex; /* flexible box layout */

  height: 200px;
  background: red;
}

Flex layout operates in two main directions:

.container {
  flex-direction: row;
}

.container {
  flex-direction: column;
}

In order to change the alignment of the children of the flex container, in the direction of flex(row or column), the justify-content rule must be set.

.container {
  justify-content: flex-start;
}

.container {
  justify-content: flex-end;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: center;
}

To change the alignment of the children in the direction perpendicular to the flex direction(also called the cross axis) the align-items rule must be set.

.container {
  align-items: flex-start;
}

.container {
  align-items: flex-end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

To change the sizing of the children of the flex container, the flex-grow, flex-shrink and flex-basis properties must be set on the children.

.container div {
  flex-shrink: 1;
}

.container div {
  flex-grow: 0;
}

.container div {
  flex-basis: 200px;
}

/* shorthand syntax <grow> <shrink> <basis> */
.container div {
  flex: 0 1 200px;
}

CSS Frameworks

In practice most web apps make use of CSS Frameworks to quickly create user interfaces. Bootstrap is one popular framework that provides many pre-defined classes to style content.

Bootstrap Grid System

The Bootstrap grid system is used to create responsive grid layouts. Each section is separated by a row class and each column in the row is indicated via a col-<device width>-<column size> class, where the total size in a row is 12 and devices are one of xs, sm, md, lg.

Note that the container-fluid(or container for non-responsive layouts) class must be provided in the root of the grid.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

The device width of the class specifies the screen width that the column size will be applied. Thus col-xs-6 means make this column half width(6/12) on all devices that are bigger than 0px. Below is the standard widths for the column classes.

Extra small devices Phones Small devices Tablets Medium devices Desktops Large devices Desktops
Device width <768px ≥768px ≥992px ≥1200px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

Bootstrap Utility Classes

Bootstrap provides many utility classes to reuse styling. Below are some common with their sample usage.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

The pull-left and pull-right classes are provided for aligning content to the left or right the quick and dirty way. When using these classes be sure to add clearfix to the parent container so that the sizing doesn't get messed up.

<div class="clearfix">
  <h1>This is a heading.</h1>
  <strong class="pull-right">
    This is some bold text on the right
  </strong>
</div>

Hiding content based on device screen size is another common pattern in responsive web design. Bootstrap provides the following classes.

<div class="hidden-xs">This content is hidden on extra small screens</div>
<div class="hidden-sm">This content is hidden on small screens</div>
<div class="hidden-md">This content is hidden on medium screens</div>
<div class="hidden-lg">This content is hidden on large screens</div>

DOM

The Document Object Model provides a JavaScript interface to the web content or HTML. This interface is exposed by the global document variable.

Intro

As mentioned in the HTML section a common method of accessing document elements is with the document.getElementById() function. But there are also other methods like document.getElementsByTagName().

A more modern approach to selecting elements with JavaScript is the document.querySelector() method, which returns the first element that matches a given selector(same as CSS selectors) string.

var myButton = document.querySelector("#myButton");

Similarly, document.querySelectorAll() returns an array of matching elements.

var buttons = document.querySelectorAll("button");

buttons.forEach((btn) => {
  console.log(btn);
});

The elements returned by querySelector can also be queried. This is called chaining.

var myButton = document.querySelector("#myButton");
var myButtonImage = myButton.querySelector("img");

In order to add content to the document, the document.createElement() method and element.innerHTML property can be used.

var myButton = document.createElement("button");
myButton.innerHTML = "Click Me!!!";

document.querySelector("#myButtonContainer")
  .appendChild(myButton);

Modifying Elements

Classes

Modifying element classes is a common pattern in JavaScript to give visual feedback to users.

.red-border {
  border-color: red;
}
var checkIfValid = (input) => {
  // if input is email check for pisano.co domain
  if (input.type === "email" && !input.value.includes("@pisano.co")) {
    return false;
  } else {
    return true;
  }
};

var formInputs = document.querySelectorAll("#myForm input");

formInputs.forEach((input) => {
  if (checkIfValid(input)) {
    myButton.className = "";
  } else {
    myButton.className = "red-border"; // indicate that the value is invalid
  }
});

Attributes

Another common task is to change attributes like href or disabled.

<a href="http://pisano.co">Goto Pisano!</a>

<button id="myButton">Click Me!</button>
var myLink = document.querySelector("a");

// read an attribute
myLink.getAttribute("href"); // "http://pisano.co"

var myButton = document.querySelector("#myButton");

// disable the button
myButton.setAttribute("disabled", "disabled");

Events

DOM events area used to listen for specific events on the document. The example below shows a common method for triggering initialization code.

document.onload = (event) => {
  console.log("Document loaded");

  // now do application initialization
};

Listening to button clicks to trigger actions:

var myButton = document.querySelector("#myButton");

myButton.onclick = (event) => {
  // event contains data about the click event
  console.log(event);

  // do some action
};

Listening for input changes:

var myInput = document.querySelector("#myInput");

myInput.onchange = (event) => {
  // print input value
  console.log(event.target.value);
};

There are many events provided by the DOM, for a good reference you can check the MDN Docs.