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
520

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
340
Lecture 6: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
490
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
640
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
710
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
440
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
530
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
880
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
320

Other Decks in Education

See All in Education
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
2
3k
Web Application Frameworks - Lecture 3 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
DIP_1_Introduction
Avatar for Mohammed Hachama hachama
0
270
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
2.6k
[Segah 2025] Gamified Interventions for Composting Behavior in the Workplace
Avatar for Ezequiel dos Santos ezefranca
0
180
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
5
14k
GOVERNOR ADDRESS：2025年9月29日合同公式訪問例会：2720 Japan O.K. ロータリーEクラブ、2025年10月6日卓話：藤田 千克由 氏（国際ロータリー第2720地区 2025－2026年度 ガバナー・大分中央ロータリークラブ・大分トキハタクシー（株）顧問）
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
650
相互コミュニケーションの難しさ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
280
【品女100周年企画】Pitch Deck
Avatar for 品川女子学院チェンジエージェントプロジェクト shinagawajoshigakuin_100th
0
8.1k
探査機自作ゼミ2025スライド
Avatar for sksat sksat
3
820
あなたの言葉に力を与える、演繹的なアプローチ
Avatar for Takuto Nagami logica0419
1
200
(2025) L'origami, mieux que la règle et le compas
Avatar for Roger Mansuy mansuy
0
150

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
300
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
115
20k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
Side Projects
Avatar for Sacha Greif sachag
455
43k

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