Web Dev Crash Course
Zane Staggs - CodingHouse.co

1
Your instructor
Husband, Father and Developer
Living the dream...
MIS graduate U of Arizona

Coding House

BetterDoctor

2
Coding House
Learn how to code 60 days of Intensive training
Physical activities and food provided
Full time immersion in ...
So you want to be a web/
mobile developer?
Coding languages: html/php/ruby/java/
javascript/c
Design skills: user interfac...
Why would you want to do
this?
Wild West days of the internet
Fun, creative

Technology

Career

Fame and Fortune
Startups...
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 w...
The web browser
Very complicated client software.
Lots of differences between platforms
(os) and rendering engines: gecko
...
How the web works
Client/Server (front vs back end), networking, ip
addresses, routers, ports, tcp/ip = stateless protocol...
Client/Server
Communications
Client requests data from a server, server responds

Cloud based/virtualization = many server...
DNS requests
Browser requests to look up a website address, hits
the closest DNS server says yes I know where that is
it’s...
APIs
API = Application Programming Interface - good for
decoupling your application. Data access.
JSON = Preferred format ...
Databases
Like a big excel sheet, way to organize and retrieve
data through columns and rows (schemas)
Runs on the server ...
Markup Languages
HTML5 - modern html lots of new features, not even an
official approved spec but vendors started
implement...
Example Dom Tree

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

15
HTML
Descendant of xml so it relies on markup
<p>text inside</p>, a few are “self closing” like <img />
Nesting Hierarchy:...
HTML5
Latest spec
New html5 tags: article, section, header, footer, video,
audio, local storage, input types, browser hist...
CSS
Style definitions for look and feel can be inline, in a
separate file, or in the <head> of the document.
Describe color,...
Javascript
(not java)
Most ubiquitous language, also can be inline, in the head, or in
a separate file.
Similar to C syntax...
General coding tips
Good editor with code completion and syntax
highlighting (webstorm or rubymine recommended)
Close all ...
Jquery	
Javascript framework, used everywhere. Free and
open source.
Simplifies common tasks with javascript and the DOM
$ ...
Jquery Plugin Example
Add the jquery language to your code
Add carousel plugin js file
Wire up the necessary components and...
Bootstrap
CSS Framework from Twitter.
Include the CSS file and js file
Use the various components as needed.
Override styles...
Modern front end web
development
HAML and SASS, Compass, Less,
Static site generators: middleman, jekyll
Coffeescript (sim...
Server side
Server sits and wait for requests. It responds with some
data depending on the type of the request and what’s ...
Basic Server Admin
Windows vs Linux
Terminal basics: cp, rm, cd, whoami, pwd
Services need to be running and healthy like ...
Version Control
Git/Github - distributed version control
SVN/CVS - older non distributed
Branching
Merging diffs
Pushing t...
Ruby on Rails
Ruby = another programming language with very nice syntax almost natural sounding and
less code to write
Rai...
29
Ruby
Ruby is "an interpreted scripting language for quick and easy
object-oriented programming" -- what does this mean?
in...
MVC

31
Let’s build a Rails application
rails --version
rails new blog
rails server
Controller: receive specific requests for the a...
Mobile web development
HTML5 vs Native vs Hybrid
PhoneGap
Appgyver - fast way to get an app on the phone and
development
O...
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 attenti...
Questions

Have any questions speak up!

35
Upcoming SlideShare
Loading in...5
×

Crash Course HTML/Rails Slides

3,293

Published on

Coding House presents a Crash Course in HTML/Rails.

Find out more info on Coding House at codinghouse.co

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,293
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Crash Course HTML/Rails Slides

  1. 1. Web Dev Crash Course Zane Staggs - CodingHouse.co 1
  2. 2. Your instructor Husband, Father and Developer Living the dream... MIS graduate U of Arizona Coding House BetterDoctor 2
  3. 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. 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. 5. Why would you want to do this? Wild West days of the internet Fun, creative Technology Career Fame and Fortune Startups 5
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. Example Dom Tree 14
  15. 15. Let’s create a website HTML CSS Javascript General Programming Concepts 15
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29
  30. 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. 31. MVC 31
  32. 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. 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. 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. 35. Questions Have any questions speak up! 35
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×