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
480

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
320
Lecture 6: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
470
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
580
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
630
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
420
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
510
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
830
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
320

Other Decks in Education

See All in Education
技術文章を書くための執筆技術と実践法（パラグラフライティング）
Avatar for Hisashi Ishihara hisashiishihara
17
6k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
410
i-GIP 2025 中高生のみなさんへ資料
Avatar for i-GIP KYUSHU 202200
0
320
計算情報学研究室 （数理情報学第７研究室）紹介スライド (2025)
Avatar for Tomohiko Yokoyama tomonatu8
0
310
探究的な学び：Monaca Educationで学ぶプログラミングとちょっとした課題解決
Avatar for アシアル情報教育研究所 asial_edu
0
360
America and the World
Avatar for Spiro Bolos oripsolob
0
460
SARA Annual Report 2024-25
Avatar for SARA Institute sara2023
1
130
SkimaTalk Tutorial for Students
Avatar for SkimaTalk skimatalk
0
1.7k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.3k
日本電子専門学校ネットワークセキュリティ科_学科紹介.pdf
Avatar for 日本電子専門学校 ネットワークセキュリティ科 ccyc
0
860
演習問題
Avatar for リスナビ takenawa
0
170
Prógram La Liberazione
Avatar for Ólafur Sverrir Traustason olafurtr90
0
190

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
33
6.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
940
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.8k

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