Intro to HTML, CSS, JS

HTML

1. Create a new folder for this tutorial
2. Create a file called index.html
3. Open a browser and navigate to your file. It should look something like file://Users/akeshavan/Desktop/nha_2018/index.html

Basic Setup

HTML is the content of a site. All HTML is structured like so:

index.html

See the Pen XBVERo by Anisha (@akeshavan) on CodePen.

Tags

HTML content is organzied by tags. See a full list here

index.html

See the Pen oMpqEg by Anisha (@akeshavan) on CodePen.

In chrome, go to View > Developer > Developer Tools to inspect the DOM (document object model).

CSS

CSS is the style of a page. You can edit the style of HTML elements:

index.html

See the Pen some-CSS-classes by Anisha (@akeshavan) on CodePen.

Link to outside CSS files

Usually, we keep CSS in separate files css/style.css. You can also use URLs in in the href portion. For example, to Twitter Bootstrap

index.html // css/style.css

See the Pen CSS-separate-file by Anisha (@akeshavan) on CodePen.

Javascript

Javasript can manipulate the DOM.

index.html // css/style.css

See the Pen JS-Intro by Anisha (@akeshavan) on CodePen.

Here is an example where we add a new element, and remove an existing element

index.html // css/style.css

See the Pen JS-add-dom-elem by Anisha (@akeshavan) on CodePen.

Link to outside JS files

Let's move the javascript to a new file in a folder called js/app.js

index.html // css/style.css // js/app.js

See the Pen JS-add-dom-elem-separate by Anisha (@akeshavan) on CodePen.

Printing & Declaring Variables

js/app.js

See the Pen JS-basics by Anisha (@akeshavan) on CodePen.

Data types

js/app.js

See the Pen JS-data-types by Anisha (@akeshavan) on CodePen.

If/else statements

js/app.js

See the Pen JS-if-else by Anisha (@akeshavan) on CodePen.

js/app.js

For loops

js/app.js

See the Pen JS-for-loops by Anisha (@akeshavan) on CodePen.

Functions

js/app.js

See the Pen JS-functions by Anisha (@akeshavan) on CodePen.

Classes

js/app.js

See the Pen JS-classes by Anisha (@akeshavan) on CodePen.

What about class inheritance? I always forget this, here is a great ref: here

js/app.js

See the Pen JS-class-inheritance by Anisha (@akeshavan) on CodePen.

Interactions

See the Pen JS-interactions-forms by Anisha (@akeshavan) on CodePen.

D3

click here for the D3 tutorial.

Web technologies I like

Front End

Vue.js

Twitter Bootstrap

Back-End

Flask (python)

Eve (python)

Serverless

Firebase

AWS lambda

Cloud Services

Github Pages (hosting)

Firebase (hosting)

Heroku