Intro to Web Development

85c94dd5fe912308a2503c38fa3cb220?s=47 Frank Wu
February 22, 2014

Intro to Web Development

Workshop given at MIT Blueprint 2014

85c94dd5fe912308a2503c38fa3cb220?s=128

Frank Wu

February 22, 2014
Tweet

Transcript

  1. Introduction to Development Web

  2. Everyone! can do it

  3. rules learn the

  4. tools learn the

  5. language learn the

  6. Request Response

  7. None
  8. None
  9. HTML! HyperText Markup Language

  10. HTML! Is not a programming language

  11. index.html

  12. How does this work?! ! Imagine that you see all

    of this on a website.
  13. HTML <h1>How does this work?</h1>! ! <p>Imagine that you see

    all of this on a website.</p>
  14. <h1>How does this work?</h1> HTML Start Tag End Tag

  15. HTML <b>Bold</b>! ! <i>Italics</i>! ! <h1>Header 1</h1>! ! <h2>Header 2</h2>

    Bold Italics Header 1 Header 2
  16. HTML <html>! ! …! </html>

  17. HTML <html>! ! <head>! ! ! <title>My Website</title>! ! </head>!

    ! …! </html>
  18. HTML <html>! ! <head>! ! ! <title>My Website</title>! ! </head>!

    ! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome!</p>! ! </body>! </html>
  19. HTML

  20. <a href=“http://google.com”>You should check out Google.</a> Most HTML tags can

    have attributes HTML
  21. HTML <html>! ! <head>! ! ! <title>My Website</title>! ! </head>!

    ! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome! <a href=“http://! ! ! ! google.com”>You should check! ! ! ! out Google.</a>! ! ! </p>! ! </body>! </html>
  22. HTML

  23. CSS! Cascading Style Sheets

  24. CSS! Is not a programming language

  25. CSS! Styles your HTML!

  26. HTML <html>! ! <head>! ! ! <title>My Website</title>! ! !

    <link rel="stylesheet" href=! ! ! "styles.css" />! ! </head>! ! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome!</p>! ! </body>! </html>
  27. CSS h1 {! color: red;! } styles.css

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

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

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

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

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

  33. <html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>! <body>!

    <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http:// blueprint.hackmit.org/">Blueprint 2014.</a></p>! </body>! </html> HTML
  34. CSS body {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial,

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

    Sans-serif;! text-align: center;! }! ! h1 {! font-size: 50px;! }
  36. HTML <html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>!

    <body>! <div class="top">! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </div>! </body>! </html>
  37. What is a div? A new foe has appeared!!

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

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

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

    30px 0 0 0;! }
  41. HTML <html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>!

    <body>! <div class="wrapper">! <div class="top">! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </div>! </div>! </body>! </html>
  42. CSS a {! color: #D7E0E6;! }! ! .wrapper {! margin:

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

    0 auto;! width: 900px;! }
  44. HTML <body>! <div class="wrapper">! <div class=“top">! ! ! …! </div>!

    ! <div class="about">! <div class="column" id="column1">! <h2>Feature 1</h2>! </div>! <div class="column" id="column2">! <h2>Feature 2</h2>! </div>! <div class="column" id="column3">! <h2>Feature 3</h2>! </div>! </div>! </div>! </body>
  45. CSS .about {! display: inline-block;! margin: 15px 0 0 0;!

    }
  46. CSS .column {! background-color: #CE4D4F;! color: #263039;! height: 210px;! width:

    260px;! float: left;! padding: 20px 15px;! text-align: center;! }
  47. Padding Margin Div

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

    15px;! }
  49. .class #id vs

  50. None
  51. HTML <div class="column" id="column1">! <h2>Feature 1</h2>! <img src="1.png"><br /><br />!

    Why we are the best.! </div>
  52. None
  53. HTML <body>! <div class="wrapper">! <div class=“top">! …! </div>! <div class=“about">!

    …! </div>! <div class="bottom">! <h2>You'll love our awesome features.</h2>! </div>! </div>! </body>
  54. CSS .bottom {! color: #D7E0E6;! background-color: #092F4B;! padding: 50px;! text-align:

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

    0 0;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;! }
  56. Now what? Dynamic Server side Database Responsive design CSS frameworks

    Buttons Forms Optimization
  57. Frank Wu! frankjwu.com! @frankjwu