Coding House presents a Crash Course in HTML/Rails. Find out more info on Coding House at codinghouse.co

1. Web Dev Crash Course
Zane Staggs - CodingHouse.co
1

2. Your instructor
Husband, Father and Developer
Living the dream...
MIS graduate U of Arizona
Coding House
BetterDoctor
2

3. Coding House
Learn how to code 60 days of Intensive training
Physical activities and food provided
Full time immersion in coding environment
Hands on mentorship and career placement
Accessible to bart
First class in January
3

4. So you want to be a web/
mobile developer?
Coding languages: html/php/ruby/java/
javascript/c
Design skills: user interface, photoshop,
illustrator, optimizing graphics
Business skills: communication, group/
team dynamics,
Everything else: optimization, seo, sem,
marketing, a/b testing, unit testing, bugs,
debugging, operating systems, browser
bugs/quirks, devices, responsiveness, speed,
4

5. Why would you want to do
this?
Wild West days of the internet
Fun, creative
Technology
Career
Fame and Fortune
Startups
5

6. It’s actually not that hard
Today we will do a high level overview so you are at
least familiar with the concepts that a web developer
must deal with on a daily basis.
It’s the bigger picture that matters when dealing with
business people and engineers.
I’m here to show you the quick and dirty.
6

7. The web browser
Very complicated client software.
Lots of differences between platforms
(os) and rendering engines: gecko
(firefox), webkit (safari/chrome)
Reads markup, css, and js to
combine to a web page
IE is the underdog now, always a pain
for web devs but getting better slowly
http://en.wikipedia.org/wiki/
Comparison_of_web_browsers
7

8. How the web works
Client/Server (front vs back end), networking, ip
addresses, routers, ports, tcp/ip = stateless protocol
Request/Response Life Cycle
DNS (translates readable requests to map to servers)
API’s (rest, xml, json, etc)
Databases (mysql, mssql, mongodb)
Markup languages (html, xml, xhtml) Doctypes
8

9. Client/Server
Communications
Client requests data from a server, server responds
Cloud based/virtualization = many servers on one box
sharing resources through software virtualization
9

10. DNS requests
Browser requests to look up a website address, hits
the closest DNS server says yes I know where that is
it’s at this IP address.
Cacheing, propagation
Nameservers
10

11. APIs
API = Application Programming Interface - good for
decoupling your application. Data access.
JSON = Preferred format for describing and transferring
data native js object, nested attributes and values
XML = brackets and tags, old school and heavier
REST = (REpresentational State Transfer) - url scheme
for getting and updating/creating data based on http
requests
HTTP Requests: GET, POST, UPDATE, DELETE
Error codes: 200, 404, 500, etc
11

12. Databases
Like a big excel sheet, way to organize and retrieve
data through columns and rows (schemas)
Runs on the server responds to requests for data using
specified syntax like SQL, JSON
Example SQL: “select type from cars where color =
blue”
Mysql, MSSQL = traditional relational database
MongoDB = schema-less, nosql database
12

13. Markup Languages
HTML5 - modern html lots of new features, not even an
official approved spec but vendors started
implementing them anyway.
W3C/standards
Doctype tells the browser what spec to adhere to.
DOM = Document Object Model: tree of elements in
memory, accessible from javascript and the browser
13

14. Example Dom Tree
14

15. Let’s create a website
HTML
CSS
Javascript
General Programming Concepts
15

16. HTML
Descendant of xml so it relies on markup
<p>text inside</p>, a few are “self closing” like <img />
Nesting Hierarchy: html, head, body - DOM
Can have values inside the tag or as attributes like this:
<p style=”....”>some value inside</p>
http://www.w3schools.com/html/html_quick.asp
16

17. HTML5
Latest spec
New html5 tags: article, section, header, footer, video,
audio, local storage, input types, browser history,
webrtc
http://www.creativebloq.com/web-design-tips/
examples-of-html5-1233547
http://www.html5rocks.com/en/
17

18. CSS
Style definitions for look and feel can be inline, in a
separate file, or in the <head> of the document.
Describe color, size, font style and some interaction
now blurring the lines a bit
Media queries = responsive
Paths can be relative or absolute
Floating, scrolling, and centering stuff.
Modern stuff, table layout, flexbox, not supported yet
everywhere
18

19. Javascript
(not java)
Most ubiquitous language, also can be inline, in the head, or in
a separate file.
Similar to C syntax lots of brackets
Actually a lot of hidden features and very flexible
Scope is important concept, window object, event propagation
Console, debugging with developer tools or firebug
Polyfills for patching older browsers to give them support
19

20. General coding tips
Good editor with code completion and syntax
highlighting (webstorm or rubymine recommended)
Close all tags first then fill it in.
Test at every change in all browsers if possible. Get a
virtual box and free vm’s from ms: modern.ie
Get a simulator, download xcode and android simulator
Minimize the tags to only what you need.
Semantics: stick to what the tags are for
20

21. Jquery
Javascript framework, used everywhere. Free and
open source.
Simplifies common tasks with javascript and the DOM
$ = get this element or group of elements using a
selector
Plugins
$.ready = when document (DOM) is completely loaded
and ready to be used
21

22. Jquery Plugin Example
Add the jquery language to your code
Add carousel plugin js file
Wire up the necessary components and start the plugin
http://jquery.malsup.com/cycle2/
22

23. Bootstrap
CSS Framework from Twitter.
Include the CSS file and js file
Use the various components as needed.
Override styles as necessary
http://getbootstrap.com/
Available themes: wrapbootstrap.com (paid),
bootswatch.com (free)
23

24. Modern front end web
development
HAML and SASS, Compass, Less,
Static site generators: middleman, jekyll
Coffeescript (simpler syntax for javascript)
Grunt and Yeoman (build anddependency management)
Node JS (back end or server side javascript)
MVC frameworks: backbone js, angular js
http://updates.html5rocks.com/2013/11/TheLandscape-Of-Front-end-Development-AutomationSlides
24

25. Server side
Server sits and wait for requests. It responds with some
data depending on the type of the request and what’s in it.
Port 80 is reserved for website traffic so anything coming
on that port is routed to the webserver on the machine.
Apache, Nginx
The server says oh this is a request for a rails page so let’s
hand this off to rails let it do its thing then respond with the
result.
Rails runs some logic based on the request variables,
session values and checks the database if needed to look
up more data
25

26. Basic Server Admin
Windows vs Linux
Terminal basics: cp, rm, cd, whoami, pwd
Services need to be running and healthy like mail, bind
(dns), os level stuff disk space etc
Security
Backups
http://community.linuxmint.com/tutorial/view/100
26

27. Version Control
Git/Github - distributed version control
SVN/CVS - older non distributed
Branching
Merging diffs
Pushing to master
https://www.atlassian.com/git/workflows
27

28. Ruby on Rails
Ruby = another programming language with very nice syntax almost natural sounding and
less code to write
Rails = framework for developing web applications
Model = data & business logic
View = html, erb, haml
Controller = decides where to go, where to get data, and view
Gems = packages of ruby code for reuse, easy management system.
Active Record, Rake: DB Migrations
MVC = model (data), view (view), controller (routing)
Development process: Bundler
Write once, convention over configuration
28

29. 29

30. Ruby
Ruby is "an interpreted scripting language for quick and easy
object-oriented programming" -- what does this mean?
interpreted scripting language:
ability to make operating system calls directly
powerful string operations and regular expressions
immediate feedback during development
quick and easy:
variable declarations are unnecessary
variables are not typed
syntax is simple and consistent
memory management is automatic
object oriented programming:
everything is an object
classes, methods, inheritance, etc.
singleton methods
"mixin" functionality by module
iterators and closures
http://www.rubyist.net/~slagell/ruby/index.html
30

31. MVC
31

32. Let’s build a Rails application
rails --version
rails new blog
rails server
Controller: receive specific requests for the application
Model: encapsulates the data access and business logic
View: displays the collected information in a human readable format: ERB,
Haml
Routes: mapping urls to controllers and actions
http://guides.rubyonrails.org/getting_started.html#creating-a-new-railsproject
32

33. Mobile web development
HTML5 vs Native vs Hybrid
PhoneGap
Appgyver - fast way to get an app on the phone and
development
Objective C/xcode - Native Iphone
Android: Java
33

34. Key Takeaways
Don’t give up the more you see it the more it will sink in
Do free/cheap work until you get good
Pay attention to the minor details
User experience is paramount
Always do what it takes to meet goals while managing
the tradeoffs and complete as fast as possible
Stay on top of new tech
34

35. Questions
Have any questions speak up!
35