Get Started inGet Started in Web Development

7/25/2019 Get Started inGet Started in Web Development

1/48

GET STARTED IN

WEB DEVELOPMENT


2/48

ABOUT GA

General Assemblyis an educational institution creating a gcommunity of individuals empowered to pursue work they lo

We offer full and part-time courses, workshops and eve

sought-after 21st-century skills like web development and u

experience design, data science, product management and

digital marketing.


3/48

AGENDA

WHYweb development?

HOWdo I get started?

WHATdoes it all mean?!

Front-End (HTML, CSS, JavaScript)

Back-End (Ruby/Rails, Python/Django, PHP)

Other stuff (APIs, Angular.js .)

WHEREcan I learn more?


4/48

WHYweb development?


5/48

WHY

JOBS that offer professional development

fascinating problems

flexibility

stability

opportunities to utilise your other skill sets


6/48

HOWdo I get started?


7/48

HOW

You will need:

A web browser (preferably Google Chrome)

A text editor (NOT a word processing tool like Microsoft W

TextEdit(in plaintext mode)

Notepad

Notepad++

Sublime Text - free to download plus syntax highlight
http://www.sublimetext.com/http://notepad-plus-plus.org/http://en.wikipedia.org/wiki/Notepad_(software)http://en.wikipedia.org/wiki/TextEdit


8/48

HOW

You may also want:Git, a versioning system that lets you (and any collaboratochanges in your code

A GitHubaccount; GitHub allows you to collaborate and s

code with other people.A Herokuaccount; Heroku offers free hosting services forapplications running in Ruby/Rails, Node.js, Python/Djang

Scala, and Clojure.
https://www.heroku.com/https://github.com/http://git-scm.com/


9/48

WHATdoes it all mean?!


10/48

WHAT

Lets start from the top.

What is the web?

What is a web page?


11/48

WHAT


What is the web?

A network of inter-linked documents, located on individual

that are visible to other computers around the world througinternet.

What is a web page?


12/48

WHAT


What is the web?

A network of inter-linked documents, located on individual

that are visible to other computers around the world througinternet.

What is a web page?

A document consisting of one or several files designed to on the web through a browser.


13/48

WHAT

HTML content and structure

CSS style and layout

JavaScript action and behavior

Front-End


14/48

WHAT

Front-End the part the user interacts with

Back-End the part the user doesnt see or directly inter


15/48

WHAT HTML

HTML syntax (tags) and basic structure:


16/48

LETS BUILD

Lets see it in action!

Wikipedia
http://www.apple.com/


17/48

WHAT HTML

In HTML5, all page layout is done with tags (or their cousins, the < tags), which divide the page into sections.


18/48

WHAT CSS

CSS cascading style sheets

Designed to take styling completely out of HTML.

Think of it as a color by numbers for the browser, but mucpowerful!


19/48

WHAT CSS

For the most part, CSS instructions come in three ranks:

ID instructions#id1 {color : #555555;}

Class instructions

.class1 {color: red;}

Tag instructionsp {color: black;}


20/48

WHAT CSS

CSS instructions of the same rank are executed from the

CSS file to the bottom - they cascade. This means that w

are conflicting instructions, earlier ones get overwritten by


21/48

WHAT CSS


22/48

WHAT CSS

red


23/48

WHAT CSS

CSS ideally controls all the formatting in the page:

Text color, size, and fontList formatting

Position, size, and style of all elements

And much more.


24/48

LETS BUILD

Now, lets add some CSS to our previous project.


25/48

WHAT JAVASCRIPT

Unlike HTML or CSS, JavaScript is a true programming la

It can be used to execute logical instructions and do things

In particular, JavaScript, like Ruby, Python, and PHP, is a

language, which means that it allows you to write scriptsprograms that execute instructions one by one, in order.


26/48

WHAT JAVASCRIPT

We can play around with JavaScript using the console, on

Chromes developer tools.

3

==> 3

hello

==> hello

console.log(1)

==> 1


27/48

WHAT JAVASCRIPT

We can play around with JavaScript using the console, on

Chromes developer tools.

var x = 3;

==> undefined

x

==> 3

2*x + 1

==> 7


28/48

WHAT JAVASCRIPT

Like most programming languages, JavaScript uses variab

store data, and logical tests to make decisions.

var x = 3;

var y = 7;

if (x < y) {console.log(X is smaller than Y);}


29/48

WHAT JAVASCRIPT

Like most programming languages, JavaScript uses functi

use pieces of code.

function addOneTo(x) {

return x+1;

}

var y = 0;

y = addOneTo(0);

y = addOneTo(1);

console.log(y); ==> 2


30/48

WHAT JAVASCRIPT

JavaScript can also import and use libraries files of fun

written by other people so that you dont need to reinven

wheel.

One very commonly used JavaScript library is jQuery; jQufunctions are designed to making writing JavaScript easie

functions that act like built-in JavaScript functionality, but hsimpler syntax.


31/48

WHAT JAVASCRIPT

Unlike most other programming languages, JavaScript can

interact with and affect HTML elements, using a mini-prog

the browser called the DOM (document object model).

Lets incorporate some JavaScript into our project.


32/48

WHAT BACK END

While the front-end runs in the browser, and handles user

the back end runs on a server somewhere else on the web

handles:

-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 bro

display.


33/48

WHAT RUBY & RAILS

Ruby is another programming language, similar to JavaSc

It has variables, logical tests, and functions (called methoRuby). And it also has its own libraries, called gems.


34/48

WHAT RUBY & RAILS

Rails is one such gem.

Whereas Ruby is a language, Rails is a web application f

a tool (built in Ruby) that is used to quickly produce relativsophisticated web applications.

Think of Rails as being a template for building everything a

application needs, from data management and processingend interface.


35/48

WHAT RUBY & RAILS

Rails is an example of an M-V-C framework

Model abstraction of the data that your application store

View visual readout, in HTML/CSS/JS, that the browser

Control logic that tells the application how to behave


36/48

WHAT RUBY & RAILS

In practice, though, it actually looks more like this.

Browser

Controllers

Views

Router

Rails

HTML,CSS, JSfiles

Active

Record

Renderedweb page

Useractions

Models


37/48

WHAT OTHER STUFF

Angular.js, Node.js, Backbone.js, *.js

Angular.js, Node.jsand Backbone.jsare frameworks, simi

ways to Rails, but built in JavaScript.

They also perform back-end operations, but because they

in JavaScript, some of those operations can be run in the which can make the application faster/more efficient/more
http://backbonejs.org/http://nodejs.org/http://angularjs.org/


38/48

WHAT OTHER STUFF

API(application programming interface)

Publicly visible interface to the application that other peop

programs can use.

Some commonly used APIs

Twitter

Facebook

Gmail
https://developers.google.com/google-apps/gmail/https://developers.facebook.com/https://dev.twitter.com/


39/48

WHEREcan I learn more?


40/48

WHERE ONLINE RESOURCES

W3 Schools Codecademy

StackOverflow

CodePen

Dash (General Assembly)
http://dash.generalassemb.ly/http://codepen.io/http://stackoverflow.com/http://www.codecademy.com/http://www.w3schools.com/


41/48

WHERE LIVE CLASSES

FWDPast one-off classes at GA have included:Programming for Non-Programmers (offered in Python an

Creative Process for Coders

Introduction to PHP

And many others, all available at the GA website.
http://generalassemb.ly/


42/48

WHERE INTENSIVE COURSES (PART-TIME)

FEWD

FRONT-END WEB DEVELOPMENT : BUILD A WEBSITE

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


43/48

WHERE INTENSIVE COURSES (PART-TIME)

BACK-END WEB DEVELOPMENT : BUILD A RAILS APP

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

BEWD

S CO S S ( )


44/48

WHERE IMMERSIVE COURSES (FULL-TIME)

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

WEB DEVELOPMENT IMMERSIVE : GO FOR PRO


45/48

WHENcan I start?


46/48

now

WHEN? NOW


47/48

WHEN? NOW.

FWDLearn more about GAsFront-End Web Developmentand

Web Development Immersivecourses.

Questions?
https://generalassemb.ly/education/web-development-immersivehttps://generalassemb.ly/education/front-end-web-development


48/48

T an you.

Documents

Get Started inGet Started in Web Development