get started inget started in web development

Download Get Started inGet Started in Web Development

Post on 27-Feb-2018

221 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

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

    1/48

    GET STARTED IN

    WEB DEVELOPMENT

  • 7/25/2019 Get Started inGet 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.

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

    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?

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

    4/48

    WHYweb development?

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

    5/48

    WHY

    JOBS that offer professional development

    fascinating problems

    flexibility

    stability

    opportunities to utilise your other skill sets

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

    6/48

    HOWdo I get started?

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

    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
  • 7/25/2019 Get Started inGet Started in Web Development

    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/
  • 7/25/2019 Get Started inGet Started in Web Development

    9/48

    WHATdoes it all mean?!

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

    10/48

    WHAT

    Lets start from the top.

    What is the web?

    What is a web page?

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

    11/48

    WHAT

    Lets start from the top.

    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?

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

    12/48

    WHAT

    Lets start from the top.

    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.

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

    13/48

    WHAT

    HTML content and structure

    CSS style and layout

    JavaScript action and behavior

    Front-End

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

    14/48

    WHAT

    Front-End the part the user interacts with

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

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

    15/48

    WHAT HTML

    HTML syntax (tags) and basic structure:

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

    16/48

    LETS BUILD

    Lets see it in action!

    Wikipedia

    http://www.apple.com/
  • 7/25/2019 Get Started inGet Started in Web Development

    17/48

    WHAT HTML

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

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

    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!

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

    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;}

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

    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

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

    21/48

    WHAT CSS

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

    22/48

    WHAT CSS

    red

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

    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.

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

    24/48

    LETS BUILD

    Now, lets add some CSS to our previous project.

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

    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.

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

    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

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

    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

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

    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);}

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

    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

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

    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.

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

    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.

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

    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.

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

    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.

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

    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.

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

    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

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

    36/48

    WHAT RUBY & RAILS

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

    Browser