Web Design Workshop

github.com/nikolaswise/web-design-workshop/

Nikolas Wise

nikolaswise@gmail.com

nikolas.ws

@nikolaswise

What Is The Tech Stack?

function wow () {
  console.log('no way')
}

The Client

The Browser

Resolves a URL. The Browser interprets what it finds at the URL.

HTML, CSS, JS

The Server

The Cloud

Decides what to send to the client.

Works that logic that enables the internet.

Ruby, PHP, Node, Go

"Full Stack"

HTML
CSS
JS
Server Languages

The Front End

HTML

<main>
  <article>
    <section>
      <h1>Real Great Essay</h1>
    </section>
    <section>
      <p>It was a dark and stormy night ...</p>
    </section>
  </article>
</main>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>💻 J608:2016</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- ... -->
    <script src="slides.js" async></script>
  </body>
</html

Markdown

# I am a Header!

Here, take [this](http://stackoverflow.com/).

A way to write **markup** that's _easy._

CSS

.where-bmo-at {
  cursor: url(bmo.gif), crosshair;
}

Where is BMO? Another Demo

Sass / SCSS

$cinnabar: #EA4035;

body {
  color: $cinnabar;
}

JavaScript

var hello = function(name) {
  console.log('hello ' + name );
}

hello('Nikolas');

Where is BMO?

Defines and executes behaviors and interactions.
Mediates between the user and the client.
Mediates between the client and the server.

The Back End

Ruby

$i = 0
$num = 5

while $i < $num  do
  puts("Inside the loop i = #$i" )
  $i +=1
end

Node

var http = require('http');

var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello World\n");
});

server.listen(8000);

Server side languages perform the broader functions of a project that can't happen on the client.

User Logins
Databases
Delivering Content

What Else?

API

Application Programming Interface

Server-side code that lets the client communicate with the server.

Lets servers communicate with each other.

https://api.twitter.com/1.1/friends/
ids.json?cursor=-1&screen_name=nikolaswise&count=5000

Client Library

Packages of code that allow easy implementation of complex functions

twitter.getFollowersList({
  screename: 'nikolaswise',
  count: '5000'
}, errorCallback, successCallback);

So How do I Internet

you have to make a web site, so how do you do that

A Server
A CSS File
A JavaScript File
HTML Files

A Server

Github Pages

nikolaswise.github.io/web-design-workshop

A CSS File

<!-- style.js -->
body {
  background-color: #fefefe;
  color: #333333;
}

A JS File

<!-- script.js -->
window.addEventListener('click', hello);
function hello (e) {
  console.log('hello world');
}

HTML Files

<! index.html>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>My Cool Internet</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a href="./a-cool-page.html"></a>
    <a href="./another-great-page.html"></a>
    <h1>Pretty Great And Cool</h1>
    <script src="script.js"></script>
  </body>
</html>