2a:null 2b:["$","title",null,{"children":"Exercises: Page Deployment | Steve Oney | Observable"}] 30:T500,html` U of M Schools

University of Michigan Schools

The University of Michigan has 19 schools and colleges. This page will summarize a few.

School of Information

The School of Information aims to create and share knowledge so that people will use information with technology to build a better world.

College of Literature, Science, and the Arts

LSA is the liberal arts and sciences school.

College of Engineering

CoE is the engineering unit of the University of Michigan.

`31:[] 2e:{"id":"f27f6e33e70231da","slug":"si-579-lecture-3","title":"Exercises: Page Deployment","thumbnail":"1cf6b5410fc3da6d79f79116521fab492ca5ccd4d7842f8d8e2f0ea12243dee9","access_level":"public","create_time":"$D2021-01-27T16:01:30.300Z","update_time":"$D2023-10-02T17:46:09.655Z","view_time":null,"first_public_time":"$D2021-01-27T19:13:01.059Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":101,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Exercises: Page Deployment","cells":[{"id":0,"value":"md`# Exercises: Page Deployment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`\n# A Word on \"Semantically Meaningful\"\n\nWe don't always need to avoid \\`

\\` and \\`\\`. Just don't make them your \"default\".\n\nThe problem is that most developers start with what they want the page to **look** like visually and then use elements that fit within their view of their visual result.\n\n[This article](https://alistapart.com/article/meaningful-css-style-like-you-mean-it/) explains it well.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`## *Imperfect* UI of the day\n\n[Totoro of Ann Arbor](https://totoroannarbor.com/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"html`\n \n \n \n \n

CSS Animation Example

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"html`\n \n \n \n \n

CSS Transition example (hover over the box)

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"html`\n \n \n \n \n

CSS Dark/Light Modes

Hello there!

\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"html`\n \n \n \n \n

Basic \"Responsive\" Design

Hello there!

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`# Exercise: Redoing the Lunch Menu\nLet's redo part of our [\"Bad UI of the Day\"](http://chanslakeville.com/lunch.html). Write a webpage that uses HTML and CSS to look like the following:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"html`\n\n \n Lunch Menu\n \n \n \n

Lunch Menu

Beef Broccoli
Sesame Chicken
Chicken Broccoli
Sesame Chicken
Chicken Mixed Vegetables
Kung Pao Chicken

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`\n# [Deploying to GitHub Pages](https://observablehq.com/@soney/deploying-to-github-pages)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`\nNote: GitHub is **much** more than a place to deploy pages. The main purpose of GitHub (and Git) is to enable better collaboration within teams of developers. Hosting pages is just a service GitHub also *happens* to provide.\n - The fact that GitHub does much more than hosting pages is part of the reason that it is a little more complex to use\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`# Exercise: Deployed Lunch Menu\nDeploy the \"lunch menu\" page that you just created to GitHub Pages\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"