Crash Course
Web Development
Go to github.com/hwkr/CrashCourse

Stuff to Talk About

The Internets

How did it start?

A long long time ago Bill Gates and Steve Jobs wanted to send dank memes to each other so they created the internet.

The World Wide Web

Hypertext Transfer Protocol

HTTP Requests

GET, POST, ...

An HTTP GET Request

GET /CrashCourse/ HTTP/1.1
Host: hwkr.github.io
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6
If-Modified-Since: Sat, 24 Sep 2016 22:09:53 GMT

HTTP Response Codes

Let's try it!

HTML & CSS

Hypertext Markup Language

A Basic Webpage

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Hello World</title> 
</head> 
<body> 
    <p>Hello World.</p>
</body> 
</html>

Pretty lame...

HTML Block Elements

<div>...</div>, <p>...</p>, ...

HTML Inline Elements

<a>...</a>, <em>...</em>, ...

Self Closing Elements

<img>, <br>, ...

Element Attributes

<a href="http://www.google.com/">Google</a>

IDs and Classes

<section id="memes">
    <img class="img-contain img-rounded" src="assets/dank-memes.png">
</section>

CSS uses Selectors and Properties

h1 {
    font-family: "Permanent Marker", sans-serif;
    font-size: 96px;
    color: #6A3089;
}

Selectors can be combined

p.big-text {
    font-size: 110px;
    text-align: justify;
    text-transform: uppercase;
    color: #FE4B75;
}

Let's write some code

Go to codepen.io

Git and GitHub

Going Live