Web Dev Breakdown: HTML, CSS, JS & More

1
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 .)
WHERE can I learn more?
WHY
web development?
WHY
!
!
WHY JOBS
FRONT-END " ! ! ! ! RAILS"
* source: indeed.com/jobtrends, January 2013!
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
You will need:

!
A web browser (preferably Google Chrome) A text editor (NOT a word processing tool like Microsoft Word)
! ! ! !
TextEdit (in plaintext mode) Notepad Notepad++ Sublime Text
HOW
12
You will also (probably) need:

!
A web server or framework

! ! !
Apache Rails Django
A command line or terminal program
HOW
13
You may also want:

!
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 is the web? What is a web page?
WHAT
!
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
!
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
Front-End the part the user interacts with
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>  </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
!
#id1 {color : #555555;}
Class instructions
!
.class1 {color: red;} p {color: black;}
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
Unlike HTML or CSS, JavaScript is a true programming language.
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>
<script> function doXto(obj) {obj.style.backgroundColor=#000000; </script> } function doYto(obj) {obj.style.backgroundColor=#FFFFFF; }
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
WHAT BACK END

While the front-end runs in the browser, and handles user interaction, the back end runs on a server somewhere else on the web, and handles:
-! -! -! -!
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.
WHAT RUBY & RAILS

Ruby is another programming language, similar to JavaScript.
40
It has variables, logical tests, and functions (called methods in Ruby). And it also has its own libraries, called gems.
WHAT RUBY & RAILS

Rails is one such gem.
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.
WHAT RUBY & RAILS

Rails is an example of an M-V-C framework Model abstraction of the data that your application stores
42
View visual readout, in HTML/CSS/JS, that the browser displays Control logic that tells the application how to behave
WHAT RUBY & RAILS

In practice, though, it actually looks more like this.
JSON!
43
Router!
User actions!
Controllers! Models!
SQL!
Rendered web page! ! HTML, CSS, JS les!
Views!
Active ! Record!
Data! Tables!
Browser!
Rails!
WHAT OTHER STUFF

Angular.js, Node.js, Backbone.js, *.js Angular.js, Node.js and Backbone.js are frameworks, similar in some ways to Rails, but built in JavaScript.
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.
WHAT OTHER STUFF

API (application programming interface) Publicly visible interface to the application that other peoples programs can use. Some commonly used APIs Twitter Facebook Gmail
45
46
WHERE
can I learn more?
WHERE ONLINE RESOURCES
47
! ! ! ! !
W3 Schools Codecademy StackOverflow CodePen Dash (General Assembly)
WHERE LIVE CLASSES
48
Programming for Non-Programmers (offered in Python and Ruby)
FWD
Creative Process for Coders Introduction to PHP
And many others, all available at the GA website.
WHERE GA INTENSIVE COURSES
49
FRONT-END WEB DEVELOPMENT : BUILD A WEBSITE

FEWD
GOAL: Learn to build a dynamic, interactive web page
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
Next Session Begins: Wednesday, February 5
WHERE GA INTENSIVE COURSES
50
BACK-END WEB DEVELOPMENT : BUILD A RAILS APP

BEWD
GOAL: Learn to build a fully functional application in Rails
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
Next Session Begins: Tuesday, March 4
51
http://protected-crag-2848.herokuapp.com/
52
http://shielded-thicket-7569.herokuapp.com/
53
https://polar-dawn-2496.herokuapp.com/
WHERE GA IMMERSIVE COURSES
54
WEB DEVELOPMENT IMMERSIVE : GO FOR PRO

WDI
GOAL: Develop the skills necessary to become a junior web developer. You will: Learn HTML5, CSS3, Ruby, Rails, Javascript, AJAX, jQuery, Git/Github, and more. Build a portfolio of projects individually and in small groups that are ready to present to employers Learn how to integrate external APIs Deploy your code to Heroku
Next Session Begins: Monday, April 21
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

Web Dev Breakdown: HTML, CSS, JS & More

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Dev Breakdown: HTML, CSS, JS & More

Transféré par

Droits d'auteur :

Formats disponibles

1

WHERE can I learn more?

* source: indeed.com/jobtrends, January 2013!

You will need:

TextEdit (in plaintext mode) Notepad Notepad++ Sublime Text

You will also (probably) need:

A web server or framework

Apache Rails Django

A command line or terminal program

You may also want:

What is the web? What is a web page?

Front-End the part the user interacts with

#id1 {color : #555555;}

.class1 {color: red;} p {color: black;}

Unlike HTML or CSS, JavaScript is a true programming language.

<script> function doXto(obj) {obj.style.backgroundColor=#000000; </script> } function doYto(obj) {obj.style.backgroundColor=#FFFFFF; }

WHAT BACK END

WHAT RUBY & RAILS

WHAT RUBY & RAILS

WHAT RUBY & RAILS

WHAT RUBY & RAILS

Rendered web page! ! HTML, CSS, JS les!

WHAT OTHER STUFF

WHAT OTHER STUFF

WHERE ONLINE RESOURCES

W3 Schools Codecademy StackOverflow CodePen Dash (General Assembly)

WHERE LIVE CLASSES

Programming for Non-Programmers (offered in Python and Ruby)

And many others, all available at the GA website.

WHERE GA INTENSIVE COURSES

FRONT-END WEB DEVELOPMENT : BUILD A WEBSITE

Next Session Begins: Wednesday, February 5

WHERE GA INTENSIVE COURSES

BACK-END WEB DEVELOPMENT : BUILD A RAILS APP

Next Session Begins: Tuesday, March 4

WHERE GA IMMERSIVE COURSES

WEB DEVELOPMENT IMMERSIVE : GO FOR PRO

Next Session Begins: Monday, April 21

Vous aimerez peut-être aussi