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

Lecture 8: CSCI E-1 Spring 2013

Avatar for Tommy MacWilliam Tommy MacWilliam
April 17, 2013
Education
0
490

Lecture 8: CSCI E-1 Spring 2013

Avatar for Tommy MacWilliam

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
330
Lecture 6: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
480
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
610
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
640
Incorporating Version Control into Programming Courses
Avatar for Tommy MacWilliam tmacwill
1
120
Lecture 4: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
430
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
520
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
860
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
320

Other Decks in Education

See All in Education
今も熱いもの！魂を揺さぶる戦士の儀式：マオリ族のハカ
Avatar for Shuma shubox
0
220
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.1k
Avoin jakaminen ja Creative Commons -lisenssit
Avatar for Matleena Laakso matleenalaakso
0
1.9k
自己紹介 / who-am-i
Avatar for Yohei Yasukawa yasulab
PRO
3
5.3k
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
Avatar for Ezequiel dos Santos ezefranca
1
190
Alumnote inc. Company Deck
Avatar for Alumnote yukinumata
0
810
演習問題
Avatar for リスナビ takenawa
0
10k
Info Session MSc Computer Science & MSc Applied Informatics
Avatar for Beat Signer signer
PRO
0
190
2025年度春学期　統計学　第3回　クロス集計と感度・特異度，データの可視化 (2025. 4. 24)
Avatar for Akira Asano akiraasano
PRO
0
200
2025/06/05_読み漁り学習
Avatar for Ken Nagamine nag8
0
170
【品女100周年企画】Pitch Deck
Avatar for 品川女子学院チェンジエージェントプロジェクト shinagawajoshigakuin_100th
0
3.5k
2025年度春学期　統計学　第10回　分布の推測とは ー 標本調査，度数分布と確率分布 (2025. 6. 12)
Avatar for Akira Asano akiraasano
PRO
0
200

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k

Transcript

  1. Computer Science E-1 Lecture 8: Web Development

  2. Exam II

  3. Review 4/22 7:30-8:30pm

  4. Web Server

  5. None

  6. HTML

  7. <h1>CSCI E-1</h1>

  8. <h1>CSCI E-1</h1>

  9. <h1>CSCI E-1</h1>

  10. <h1>CSCI E-1</h1>

  11. <!doctype html>

  12. <html>

  13. <head>

  14. <title>Page title</title>

  15. <body>

  16. <!doctype html> <html> <head>...</head> <body>...</body> </html>

  17. <p>Paragraph text</p>

  18. <b>Bold text</b>

  19. <i>Italicized text</i>

  20. <b><i>Bold and italic</i></b>

  21. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

  22. <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  23. <table> <tr> <td>table cell</td> </tr> </table>

  24. <a href=“http://google.com”>Google</a>

  25. <img src=“cat.jpg” />

  26. Example

  27. Valid HTML

  28. http://validator.w3.org/

  29. CSS

  30. Selectors

  31. Selectors • p

  32. Selectors • p • #foo • <p id=“foo”>

  33. Selectors • p • #foo • <p id=“foo”> • .bar

    • <p class=“bar”>

  34. Rules

  35. #foo { color: blue; }

  36. #foo { color: blue; }

  37. #foo { color: blue; }

  38. #foo { color: blue; }

  39. #foo { color: blue; }

  40. #foo { color: blue; }

  41. .bar { background: red; width: 300px; }

  42. p { font-size: 18px; }

  43. Box Model

  44. Box Model

  45. #navbar a { margin: 10px; }

  46. h1, p { padding: 10px; }

  47. Block vs. Inline

  48. <style>

  49. Example

  50. <link rel=“stylesheet” href=“...” />

  51. Example

  52. Layout

  53. <div>

  54. <span>

  55. <!-- comments -->

  56. Example

  57. Bootstrap

  58. http://twitter.github.io/bootstrap/

  59. CSS Grid

  60. None
  61. None

  62. Example

  63. Flat UI

  64. http://designmodo.github.io/Flat-UI/

  65. Example

  66. Setting up a Website

  67. Setting up a Website • find a domain name

  68. http://instantdomainsearch.com/

  69. Registrars • GoDaddy • NameCheap • Network Solutions • Name.com

  70. Setting up a Website • find a domain name •

    find a web host

  71. Web Hosts • 1&1 • BlueHost • DreamHost • HostGator

    • Linode

  72. Setting up a Website • find a domain name •

    find a web host • point the domain to the host

  73. Setting up a Website • find a domain name •

    find a web host • point the domain to the host • upload files via FTP/SFTP

  74. Computer Science E-1 Lecture 8: Web Development