$30 off During Our Annual Pro Sale. View Details »

Lecture 8: CSCI E-1 Spring 2013

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

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
740
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
540
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
890
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
330

Other Decks in Education

See All in Education
～キャラ付け考えていますか？～　AI時代だからこそ技術者に求められるセルフブランディングのすゝめ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
7
540
the difficulty into words
Avatar for Hideyuki D ukky86
0
300
Avoin jakaminen ja Creative Commons -lisenssit
Avatar for Matleena Laakso matleenalaakso
0
2k
TeXで変える教育現場
Avatar for doratex doratex
0
2.2k
Ch1_-_Partie_1.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
460
Web Architectures - Lecture 2 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
HCI and Interaction Design - Lecture 2 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.4k
3Dプリンタでロボット作るよ#5_ロボット向け3Dプリンタ材料
Avatar for shiba_8ro shiba_8ro
0
120
Adobe Express
Avatar for Matleena Laakso matleenalaakso
1
8.1k
20250830_MIEE祭_会社員視点での学びのヒント
Avatar for ponponmikan ponponmikankan
1
190
卒論の書き方 / Happy Writing
Avatar for kaityo256 kaityo256
PRO
49
26k
JavaScript - Lecture 6 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
690
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
990
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
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