Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Web Development

Frank Wu
February 22, 2014

Intro to Web Development

Workshop given at MIT Blueprint 2014

Frank Wu

February 22, 2014
Tweet

More Decks by Frank Wu

Other Decks in Programming

Transcript

  1. Introduction to
    Development
    Web

    View full-size slide

  2. Everyone!
    can do it

    View full-size slide

  3. rules
    learn the

    View full-size slide

  4. tools
    learn the

    View full-size slide

  5. language
    learn the

    View full-size slide

  6. Request
    Response

    View full-size slide

  7. HTML!
    HyperText Markup
    Language

    View full-size slide

  8. HTML!
    Is not a programming
    language

    View full-size slide

  9. How does this work?!
    !
    Imagine that you see all of this on a website.

    View full-size slide

  10. HTML
    How does this work?!
    !
    Imagine that you see all of this on
    a website.

    View full-size slide

  11. How does this work?
    HTML
    Start Tag
    End Tag

    View full-size slide

  12. HTML
    Bold!
    !
    Italics!
    !
    Header 1!
    !
    Header 2
    Bold
    Italics
    Header 1
    Header 2

    View full-size slide

  13. HTML
    !
    ! !
    ! ! My Website!
    ! !
    ! …!

    View full-size slide

  14. HTML
    !
    ! !
    ! ! My Website!
    ! !
    ! !
    ! ! Main heading!
    ! ! Hi! Welcome!!
    ! !

    View full-size slide

  15. You
    should check out Google.
    Most HTML tags can have attributes
    HTML

    View full-size slide

  16. HTML
    !
    ! !
    ! ! My Website!
    ! !
    ! !
    ! ! Main heading!
    ! ! Hi! Welcome! ! ! ! google.com”>You should check!
    ! ! ! out Google.!
    ! ! !
    ! !

    View full-size slide

  17. CSS!
    Cascading Style
    Sheets

    View full-size slide

  18. CSS!
    Is not a programming
    language

    View full-size slide

  19. CSS!
    Styles your HTML!

    View full-size slide

  20. HTML
    !
    ! !
    ! ! My Website!
    ! ! ! ! "styles.css" />!
    ! !
    ! !
    ! ! Main heading!
    ! ! Hi! Welcome!!
    ! !

    View full-size slide

  21. CSS
    h1 {!
    color: red;!
    }
    styles.css

    View full-size slide

  22. CSS
    h1 {!
    color: red;!
    }
    styles.css

    View full-size slide

  23. CSS
    h1 {!
    color: red;!
    }
    Selector
    Declaration

    View full-size slide

  24. CSS
    h1 {!
    color: red;!
    } Property Value

    View full-size slide

  25. CSS
    h1 {!
    color: red;!
    ! text-align: center;!
    }

    View full-size slide

  26. CSS
    h1 {!
    color: red;!
    ! text-align: center;!
    }

    View full-size slide

  27. !
    !
    My Website!
    !
    !
    !
    Blueprint is awesome!!
    Hi! Welcome, I'm learning HTML and CSS.
    Built by Frank at Blueprint 2014.!
    !

    HTML

    View full-size slide

  28. CSS
    body {!
    background: #d9d9d9;!
    font-family: "Helvetica Neue",!
    Helvetica, Arial, Sans-serif;!
    text-align: center;!
    }!
    !
    h1 {!
    font-size: 50px;!
    }

    View full-size slide

  29. CSS
    body {!
    background: #d9d9d9;!
    font-family: "Helvetica Neue",!
    Helvetica, Arial, Sans-serif;!
    text-align: center;!
    }!
    !
    h1 {!
    font-size: 50px;!
    }

    View full-size slide

  30. HTML
    !
    !
    My Website!
    !
    !
    !
    !
    Blueprint is awesome!!
    Hi! Welcome, I'm learning HTML and CSS. Built by
    Frank at Blueprint
    2014.!
    !
    !

    View full-size slide

  31. What is a div?
    A new foe has appeared!!

    View full-size slide

  32. .wrapper
    .top
    #column2
    #column1 #column3
    .bottom
    body

    View full-size slide

  33. CSS
    .top {!
    color: #D7E0E6;!
    background-color: #0099F8;!
    padding: 50px;!
    margin: 30px 0 0 0;!
    }

    View full-size slide

  34. CSS
    .top {!
    color: #D7E0E6;!
    background-color: #0099F8;!
    padding: 50px;!
    margin: 30px 0 0 0;!
    }

    View full-size slide

  35. HTML
    !
    !
    My Website!
    !
    !
    !
    !
    !
    Blueprint is awesome!!
    Hi! Welcome, I'm learning HTML and CSS. Built by
    Frank at Blueprint
    2014.!
    !
    !
    !

    View full-size slide

  36. CSS
    a {!
    color: #D7E0E6;!
    }!
    !
    .wrapper {!
    margin: 0 auto;!
    width: 900px;!
    }

    View full-size slide

  37. CSS
    a {!
    color: #D7E0E6;!
    }!
    !
    .wrapper {!
    margin: 0 auto;!
    width: 900px;!
    }

    View full-size slide

  38. HTML
    !
    !
    !
    ! ! …!
    !
    ! !
    !
    Feature 1!
    !
    !
    Feature 2!
    !
    !
    Feature 3!
    !
    !
    !

    View full-size slide

  39. CSS
    .about {!
    display: inline-block;!
    margin: 15px 0 0 0;!
    }

    View full-size slide

  40. CSS
    .column {!
    background-color: #CE4D4F;!
    color: #263039;!
    height: 210px;!
    width: 260px;!
    float: left;!
    padding: 20px 15px;!
    text-align: center;!
    }

    View full-size slide

  41. Padding
    Margin
    Div

    View full-size slide

  42. CSS
    #column1 {!
    margin-right: 15px;!
    }!
    !
    #column2 {!
    margin-right: 15px;!
    }

    View full-size slide

  43. HTML
    !
    Feature 1!


    !
    Why we are the best.!

    View full-size slide

  44. HTML
    !
    !
    !
    …!
    !
    !
    …!
    !
    !
    You'll love our awesome features.!
    !
    !

    View full-size slide

  45. CSS
    .bottom {!
    color: #D7E0E6;!
    background-color: #092F4B;!
    padding: 50px;!
    text-align: center;!
    margin: 15px 0 30px 0;!
    }

    View full-size slide

  46. CSS
    .bottom {!
    color: #D7E0E6;!
    background-color: #092F4B;!
    margin: 15px 0 0 0;!
    padding: 50px;!
    text-align: center;!
    margin: 15px 0 30px 0;!
    }

    View full-size slide

  47. Now what?
    Dynamic
    Server side
    Database
    Responsive design
    CSS frameworks
    Buttons
    Forms
    Optimization

    View full-size slide

  48. Frank Wu!
    frankjwu.com!
    @frankjwu

    View full-size slide