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

Lecture 8: CSCI E-1 Spring 2013

Tommy MacWilliam
April 17, 2013
Education
0
460

Lecture 8: CSCI E-1 Spring 2013

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
tmacwill
0
320
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
460
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
540
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
600
Incorporating Version Control into Programming Courses
tmacwill
1
110
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
410
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
500
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
810
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
320

Other Decks in Education

See All in Education
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.5k
いにしえの国産データベース～桐～って知っていますか？
masakiokuda
2
130
Sanapilvet opetuksessa
matleenalaakso
0
32k
AI 時代軟體工程師的持續升級
mosky
1
2.5k
教員向け生成AI基礎講座（2025年3月28日 東京大学メタバース工学部 ジュニア講座）
luiyoshida
0
120
今から始める8bits CPU アセンブラ言語
sapi_kawahara
0
210
Ch4_-_Partie_2.pdf
bernhardsvt
0
110
AWS Well-Architected Labを活用してつよつよAWSエンジニアになろう！！！ #jawsug_tokyo
masakiokuda
0
320
教員向け生成AI講座 ～基礎から応用まで～
luiyoshida
0
300
プログラミング教育する大学、ZEN大学
sifue
1
350
1216
cbtlibrary
0
290
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.4k

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Done Done
chrislema
183
16k
Building Your Own Lightsaber
phodgson
104
6.3k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Visualization
eitanlees
146
15k
Scaling GitHub
holman
459
140k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k

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