Get Started inGet Started in Web Development

  • Published on
    27-Feb-2018

  • View
    221

  • Download
    0

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

    Controllers

    Views

    Router

    Rails

    HTML,CSS, JSfiles

    Active

    Record

    Renderedweb page

    Useractions

    Models

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

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

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

    39/48

    WHEREcan I learn more?

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

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

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

    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

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

    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 ( )

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

    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

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

    45/48

    WHENcan I start?

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

    46/48

    now

    WHEN? NOW

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

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

    48/48

    T an you.