This document provides an overview of a web development course. It introduces key concepts like the client-server model, HTML, CSS, JavaScript, and tools like Git, GitHub, and Heroku. The goals of the course are to take students from having an idea to building a prototype to developing a full application, with a focus on practical skills over theory. Important technologies covered include HTML for content, CSS for styling, JavaScript for interactivity, and languages like Python and Ruby for backend development. Deployment options like GitHub for hosting code and Heroku for deploying applications are also discussed.
4. WHO WE ARE
Will Gaybrick
• Currently: Thrive Capital / YLS ’12
• Previously: Harvard ’07 (math) => finance (Blackstone) =>
startups (hunch.com, jumo.com, milewise.com)
Bay Gross
• Currently: BlueFusion / Yale ’13
• Previously: Various web apps, magnum opus =>
isitchickentendersday.com
5. WHY HACKYALE?
Good ideas + good developers => good
tech companies
• Yale ⊃ many students with good ideas
• Yale ⊅ many students who can implement those ideas
8. GOALS
Focus on processes and psychology of web
development more than content
• Learn by doing; learn by immersion
• Memorization as the emergent byproduct of experience
• We can’t make you successful developers
• We can equip you with kernel of knowledge and key
resources with which to makes yourselves successful
developers
10. GOALS
80% of web development is knowing where
to look
Most common answer => Google
• Things to Google:
--Error messages
--Syntax
--Entire problems. Ex: “javascript dropdown menu”
12. TERMINOLOGY
Client-server model
• Client == (you and your) browser
• Server == machine sending (or “serving”) you the
data and files you request
“Host” ~== “server”
• “to host” (code, files, applications) ~== “to serve”
“Local” => hosted on the machine in question
“Remote” => hosted on a different machine
13. REQUEST-RESPONSE CYCLE
(1) Client (browser) makes a “request”
• “Request” == textual message whose syntax and
semantics are defined by HyperText Transfer Protocol
(“HTTP”)
(2) Server issues a “response”
• “Response” == textual message whose syntax and
semantics are defined by HTTP
• Contains status code. Ex: 404 (“Not Found”), 200
(“Okay”), 500 (“Internal Server Error”)
(3) Cycle repeats itself
14. THE CLIENT-SERVER MODEL
REQUEST FOR
- html, css, js
- image
- document
- etc…
RESPONSE FROM
CLIENT SERVER
- requested
content… or
- some other
reasonable response
based on context (ex.
404 Not Found)
16. ON THE CLIENT SIDE
REQUEST FOR
- html, css, js
- image
- document
- etc…
RESPONSE FROM
CLIENT SERVER
- requested
HTML content… or
CSS - some other
JAVASCRIPT reasonable response
based on context (ex.
404 Not Found)
17. ON THE SERVER SIDE
REQUEST FOR
- html, css, js
- image
- document
- etc…
RESPONSE FROM
CLIENT SERVER
- requested
PYTHON
HTML content… or
RUBY (ON RAILS)
CSS - some other
JAVASCRIPT reasonable response JAVA
based on context (ex.
404 Not Found)
18. JAVASCRIPT ON BOTH!
REQUEST FOR
- html, css, js
- image
- document
- etc…
RESPONSE FROM
CLIENT SERVER
- requested
PYTHON
HTML content… or
RUBY (ON RAILS)
CSS - some other
JAVASCRIPT reasonable response JAVA
based on context (ex. JAVASCRIPT
404 Not Found)
20. OPERATING SYSTEMS
Operating systems sit between application
software and computer hardware
• Examples: Mac OSX, Linux (UNIX), Windows 7
{
memory
operating system CPU
hard disk
21. OPERATING SYSTEMS
“System calls” are the interface by which a
program communicates with an OS
• Ex: open, read, write, close, fork, kill
Applications consist of code:
• (1) “Lower level” languages (C, for example)
making such calls directly; or
• (2) “Higher level” languages (Python, for example)
making such calls indirectly via “compilation” into
lower level languages
22. THE COMMAND LINE
• The command line is a program that provides a text-only
interface to communicate dynamically with the operating system
• Several different command line programs or “shells”: BASH
(most common), sh (Bourne shell)
{
memory
operating system CPU
hard disk
BASH, sh
23. THE COMMAND LINE
• On OSX, the command line program is “Terminal” (in Utilities), a
BASH implementation
• On Windows7, cmd.exe (native) or “Cygwin” (open source
BASH implementation)
26. Front-End Development
An interaction between three “languages”
• HTML - the content of the internet
• CSS - the style of the internet
• Javascript - the logic and action of the internet
30. Coding in HTML
Tags delineate ‘code’ from content.
• <div> I’m inside a tag! </div>
• Tags have “properties,” and these
properties are then passed on to the
content within the tags
31. Popular Tags
• <div> the delineating blocks of html
<div>This content will be in an div block!</div>
• <a> links
<a href=”http://www.hackyale.com”>Home</a>
• <img> images
<img src=”http://www.hackyale.com/logo.png” />
• <p> paragraphs
<p>This text will be in a nice paragraph</p>
39. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
40. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
<p style=”color:red” > Paragraphs are great! </p>
41. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
<p style=”color:red” > Paragraphs are great! </p>
<p style=”color:red” > Totally </p>
42. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
<p style=”color:red” > Paragraphs are great! </p>
<p style=”color:red” > Totally </p>
43. Meh. Now make them blue.
But I just changed them all!
44. Meh. Now make them blue.
But I just changed them all!
<p style=”color:blue”> Hello World! </p>
45. Meh. Now make them blue.
But I just changed them all!
<p style=”color:blue”> Hello World! </p>
<p style=”color:blu” > Paragraphs are great! </p>
46. Meh. Now make them blue.
But I just changed them all!
<p style=”color:blue”> Hello World! </p>
<p style=”color:blu” > Paragraphs are great! </p>
<p style=”color:red” > Totally </p>
47. Meh. Now make them blue.
But I just changed them all!
<p style=”color:blue”> Hello World! </p>
<p style=”color:blu” > Paragraphs are great! </p>
<p style=”color:red” > Totally </p>
62. Overview
Javascript introduces logic into the client side
• Ex: If page element A is clicked, make page element
B disappear
• Ex: When a person submits their name to this box
(“input”), hide the input and display “Thank you!”
63. Brief History of Javascript
See: this excerpt from Metafilter
• Created by Brendan Eich at Netscape in less than
two weeks => a little rough around the edges
• Has almost nothing to do with Java
• During the web 1.0 days, was much derided /
blocked
• Web 2.0 was really all about Javascript
• Currently the most important language in existence
64. Javascript
A general purpose programming language
• Unlike HTML / CSS, which are domain specific
• Contains variables & logical statements
• “Event driven” => structured around “callbacks”
• A “callback” is a function or code snippet executed
upon the occurrence of some specified event
65. Server Side Javascript
Thanks to Google & Joyent, Javascript is now
commonly used server side
• Google’s V8 engine => Javascript lightning fast
• Joyent => Node.js, a web application framework
based on V8
67. ESSENTIAL ASIDE: GIT
“Git” is a document version control tool
• Created by Linus Torvalds & team to manage
distributed development of Linux kernel
• Consists of (1) a command line executable, and (2) a
domain specific language (“DSL”) (“add,” “commit,”
“push,” “pull,” “merge,” “checkout,” etc.)
• Maintains a local repository of “diffs” allowing you to
reconstruct the state of your code at the moment of
any “git commit [file or directory]” command
68. ESSENTIAL ASIDE: GIT
“Git” will be confusing at first
• Don’t get frustrated
• Don’t start by reading a Git reference
• You will grasp the basic commands quickly via
example
• Then feel free to supplement your knowledge by
reference to resources section of HackYale.com
71. GITHUB
As the name suggests, Github is integrated
with the git utility
• Genius customer acquisition strategy => slip
seamlessly into existing workflow
• Send your code to github: git push [remote] [branch]
• Get some code from github: git pull [remote] [branch]
75. HEROKU
Cloud based service that hosts applications
• Hosting code != hosting applications
• A “front end” to Amazon EC2
• HackYale.com lives on Heroku
77. HEROKU
Fantastic business
• Integrated with Github => genius customer
acquisition strategy
• Free to host an app. Pay for “add-ons” and scale =>
another genius customer acquisition
• Targeted Rails apps at outset => a third genius
customer acquisition strategy
• Hosted on Amazon’s servers => no Capex or server
maintenance costs => high margins
• Sold to Salesforce.com for $200mm after [X months]
78. HEROKU
We will use Heroku
• Supports both Node.js and Rails
• More broadly, supports Rack middleware based
applications
• Part of this week’s homework is to create an account
on Heroku and deploy a “static” page