Intro to Web Development

Workshop given at MIT Blueprint 2014

Transcript

1. Introduction to
   Development
   Web
   

   View Slide

2. Everyone!
   can do it
   

   View Slide

3. rules
   learn the
   

   View Slide

4. tools
   learn the
   

   View Slide

5. language
   learn the
   

   View Slide

6. Request
   Response
   

   View Slide

7. View Slide

8. View Slide

9. HTML!
   HyperText Markup
   Language
   

   View Slide

10. HTML!
    Is not a programming
    language
    

    View Slide

11. index.html
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. HTML
    !
    ! …!
    
    

    View Slide

17. HTML
    !
    ! !
    ! ! My Website!
    ! !
    ! …!
    
    

    View Slide

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

    View Slide

19. HTML
    

    View Slide

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

    View Slide

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

    View Slide

22. HTML
    

    View Slide

23. CSS!
    Cascading Style
    Sheets
    

    View Slide

24. CSS!
    Is not a programming
    language
    

    View Slide

25. CSS!
    Styles your HTML!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. Padding
    Margin
    Div
    

    View Slide

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

    View Slide

49. .class
    #id
    vs
    

    View Slide

50. View Slide

51. HTML
    !
    Feature 1!
    
    
    !
    Why we are the best.!
    
    

    View Slide

52. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. Frank Wu!
    frankjwu.com!
    @frankjwu
    

    View Slide