Académique Documents
Professionnel Documents
Culture Documents
WEB DEVELOPMENT
(lets break it down)
ABOUT GA
GENERAL ASSEMBLY IS AN EDUCATIONAL INSTITUTION THAT TRANSFORMS THINKERS INTO CREATORS THROUGH EDUCATION IN TECHNOLOGY, BUSINESS AND DESIGN AT NINE CAMPUSES ACROSS FOUR CONTINENTS.
ABOUT GA
ABOUT GA
Offices in NYC, Boston, London, Berlin, San Francisco, LA, Sydney, Hong Kong
AGENDA
! ! !
WHY web development? HOW do I get started? WHAT does it all mean?!
! ! !
Front-End (HTML, CSS, JavaScript) Back-End (Ruby/Rails, Python/Django, PHP) Other stuff (APIs, Angular.js .)
WHY
web development?
WHY
!
!
WHY JOBS
FRONT-END " ! ! ! ! RAILS"
WHY JOBS
1800 open jobs in front-end and rails (combined) " " 5-10% are junior positions" " $50-70k starting salaries" " " "
* source: indeed.com/jobs, January 2013!
10
HOW
do I get started?
HOW
11
A web browser (preferably Google Chrome) A text editor (NOT a word processing tool like Microsoft Word)
! ! ! !
HOW
12
HOW
13
Git, a versioning system that lets you (and any collaborators) track changes in your code A GitHub account; GitHub allows you to collaborate and share your code with other people. A Heroku account; Heroku offers free hosting services for small web applications running in Ruby/Rails, Node.js, Python/Django, Java, Scala, and Clojure.
14
WHAT
does it all mean?!
WHAT
Lets start from the top.
! !
15
WHAT
Lets start from the top.
!
16
What is the web? A network of inter-linked documents, located on individual computers, that are visible to other computers around the world through the internet. What is a web page?
WHAT
Lets start from the top.
!
17
What is the web? A network of inter-linked documents, located on individual computers, that are visible to other computers around the world through the internet. What is a web page? A document (consisting of one or several files) designed to be visible on the web through a browser.
WHAT
18
HTML content and structure CSS style and layout JavaScript action and behavior Front-End
WHAT
19
Back-End the part the user doesnt see or directly interact with
WHAT HTML
20
HTML syntax : <tag> </tag> Structure of a typical page: <! DOCTYPE html> <html> <head>Meta-data about the page</head> <body>Content of the page</body> </html>
WHAT HTML
<!DOCTYPE html> <html> <head> <title> This is a Web Page </title> </head> <body> <p> This is a paragraph about web pages. </p> <a href=.> This is a link to another page. </a> <!-- This is a comment for people reading the code --> </body> </html>
21
LETS BUILD
Lets see it in action!
22
WHAT HTML
23
Example: Facebook.com
WHAT HTML
24
In HTML5, all page layout is (supposed to be) done with <div> tags (or their cousins, the <header> and <footer> tags), which divide the page into sections. <body> <header></header> <div></div> <footer></footer> </body>
<header></header>!
<div> </div>!
<footer></footer>!
WHAT CSS
25
CSS cascading style sheets Designed to take styling completely out of HTML. Think of it as a color by numbers for the browser.
WHAT CSS
For the most part, CSS instructions come in three ranks:
!
26
ID instructions
!
Class instructions
!
Tag instructions
WHAT CSS
CSS instructions of the same rank are are executed from the top of the CSS file to the bottom - they cascade. This means that when there are conflicting instructions, earlier ones get overwritten by later ones.
div {background-color: #00FF00;} .blueDivs {background-color: #0000FF;} .redDivs {background-color: #FF0000;} #specialDiv {background-color: #55555;}
27
WHAT CSS
CSS ideally controls all the formatting in the page:
! ! ! !
28
Text color, size, and font List formatting Position, size, and style of all <div> elements And much more.
LETS BUILD
Now, lets add some CSS to our previous project.
29
WHAT JAVASCRIPT
It can be used to execute logical instructions and do things.
30
In particular, JavaScript, like Ruby, Python, and PHP , is a scripting language, which means that it allows you to write scripts, short programs that execute instructions one by one, in order.
WHAT JAVASCRIPT
We can play around with JavaScript using the console, one of Chromes developer tools. 3 ==> 3 hello ==> hello console.log(1) ==> 1
31
WHAT JAVASCRIPT
We can play around with JavaScript using the console, one of Chromes developer tools. var x = 3; ==> undefined x ==> 3 2*x + 1 ==> 7
32
WHAT JAVASCRIPT
Like most programming languages, JavaScript uses variables to store data, and logical tests to make decisions. var x = 3; var y = 7; if (x < y) {console.log(X is smaller than Y);}
33
WHAT JAVASCRIPT
Like most programming languages, JavaScript uses functions to re-use pieces of code.
function addOneTo(x) { return x+1; } var y = 0; y = addOneTo(0); y = addOneTo(1); console.log(y); ==> 2
34
WHAT JAVASCRIPT
JavaScript can also import and use libraries files of functions written by other people so that you dont need to reinvent the wheel. One very commonly used JavaScript library is jQuery; jQuery functions are designed to making writing JavaScript easier by having functions that act like built-in JavaScript functionality, but have simpler syntax.
35
WHAT JAVASCRIPT
36
Unlike most other programming languages, JavaScript can directly interact with and affect HTML elements, using a mini-program inside the browser called the DOM (document object model).
<div onmousedown=doXto(this) onmouseup=doYto(this)> Click Me </div>
WHAT JAVASCRIPT
37
Unlike most other programming languages, JavaScript can directly interact with and affect HTML elements, using a mini-program inside the browser called the DOM (document object model).
<div id=specialdiv></div> ----------------window.onload = function ( ) { var counter = 0; document.getElementById(specialdiv).onclick = function() { document.getElementById(specialdiv).innerHTML = <p> + counter + </p>; } }
LETS BUILD
Lets incorporate some JavaScript into our project.
38
39
Interpreting data it receives from the front-end Data management Processing data to get the result you want (Optionally) Sending data back to the front-end for the browser to display.
40
It has variables, logical tests, and functions (called methods in Ruby). And it also has its own libraries, called gems.
41
Whereas Ruby is a language, Rails is a web application framework, a tool (built in Ruby) that is used to quickly produce relatively sophisticated web applications. Think of Rails as being a template for building everything a web application needs, from data management and processing to frontend interface.
42
View visual readout, in HTML/CSS/JS, that the browser displays Control logic that tells the application how to behave
43
Router!
User actions!
Controllers! Models!
SQL!
Views!
Active ! Record!
Data! Tables!
Browser!
Rails!
44
They also perform back-end operations, but because theyre written in JavaScript, some of those operations can be run in the browser, which can make the application faster/more efficient/more scalable.
45
46
WHERE
can I learn more?
47
! ! ! ! !
48
FWD
Creative Process for Coders Introduction to PHP
49
You will: Build a static template that illustrates the core concepts of HTML and CSS Build a product showcase that expands on the more powerful functions of CSS Make a responsive site that fits both traditional displays and mobile devices
50
You will: Learn programming fundamentals in Ruby Build interactive Rails applications and deploy them to Heroku. Use Ruby gems to add functionality to your project Implement a basic front-end for your application using Twitter Bootstrap
51
http://protected-crag-2848.herokuapp.com/
52
http://shielded-thicket-7569.herokuapp.com/
53
https://polar-dawn-2496.herokuapp.com/
54
55
WHEN
can I start?
56
(now)
WHEN? NOW.
57
Learn more about GAs Front-End Web Development, Back-End Web Development, and Web Development Immersive courses online. Were accepting applications now for the April session of WDI, so if youre interested, apply here. Any other questions? Write us at boston-admissions@ga.co!
FWD