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
500

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
620
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
650
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
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 marimari hysmrk
3
130
Transición del Management al Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
210
学びは趣味の延長線
Avatar for uutan1108 ohmori_yusuke
0
100
Open Source Summit Japan 2025のボランティアをしませんか
Avatar for Kujiraitakahiro kujiraitakahiro
0
830
大学院進学について（2025年度版）
Avatar for imash imash
0
120
20250625_なんでもCopilot 一年の振り返り
Avatar for ponponmikan ponponmikankan
0
360
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
1.8k
万博非公式マップとFOSS4G
Avatar for K.Sakanoshita barsaka2
0
1.1k
Online Privacy
Avatar for Takahito Sakamoto takahitosakamoto
0
110
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
4
14k
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
Avatar for NAGATA Hiroaki handlename
0
630
2025/06/05_読み漁り学習
Avatar for Ken Nagamine nag8
0
190

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
520
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.1k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
51
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k

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