2a:null 2b:["$","title",null,{"children":"Exercises: HTML and CSS Basics | Steve Oney | Observable"}] 30:T45d,md` ## Exercise: Let's build a simple page Write a webpage with the following tree: - \`html\` - \`head\` - \`title\` - *#text:* U of M Schools - \`body\` - \`main\` - \`h1\` - *#text:* University of Michigan Schools - \`p\` - *#text:* The University of Michigan has 19 schools and colleges. This page will summarize a few. - \`article\` - \`h2\` - *#text:* School of Information - \`p\` - \`em\` - *#text:* The School of Information - *#text:* aims to create and share knowledge so that people will use information with technology to build a better world. - \`article\` - \`h2\` - *#text:* College of Literature, Science, and the Arts - \`p\` - \`em\` - *#text:* LSA - *#text:* is the liberal arts and sciences school. - \`article\` - \`h2\` - *#text:* College of Engineering - \`p\` - \`em\` - *#text:* CoE - *#text:* is the engineering unit of the University of Michigan. The finished page should look like this: `31:[{"id":"39d98cad517bd18603995faeb6e91fd74a1106dd34c3c50465f6b8513fc46cd182c219e0e3a4dcdc6a63e4d26c0f0c24259bca2dcef08f05b10e0f4d1508e3dd","href":"https://static.observableusercontent.com/files/39d98cad517bd18603995faeb6e91fd74a1106dd34c3c50465f6b8513fc46cd182c219e0e3a4dcdc6a63e4d26c0f0c24259bca2dcef08f05b10e0f4d1508e3dd","name":"umsi_home.png","type":"image/png","lastModified":1611601438587.816,"size":988544},{"id":"1d96a194d2ecc0d69495cff59b19ca5dfe6d4e20ba07deaf6ec531165550b097c5c4973202a99ecdd8c07213f7dfe58f4ef6cc149ff06e7f049fa1c1a719410b","href":"https://static.observableusercontent.com/files/1d96a194d2ecc0d69495cff59b19ca5dfe6d4e20ba07deaf6ec531165550b097c5c4973202a99ecdd8c07213f7dfe58f4ef6cc149ff06e7f049fa1c1a719410b","name":"image.png","type":"image/png","lastModified":1630511031051.107,"size":434112}] 2e:{"id":"8ab0d431df2250ba","slug":"si-579-lecture-2","title":"Exercises: HTML and CSS Basics","thumbnail":"133a7e728a63318a1467fc86f6040aa1010ee41238cb235c6025c25c0de07a2c","access_level":"public","create_time":"$D2021-01-25T18:58:19.666Z","update_time":"$D2023-10-02T17:43:14.035Z","view_time":null,"first_public_time":"$D2021-01-25T19:10:11.185Z","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":59,"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: HTML and CSS Basics","cells":[{"id":0,"value":"md`# Exercises: HTML and CSS Basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"![image.png](${await FileAttachment(\"image.png\").url()})\n\nhttps://www.smithsonianmag.com/smart-news/story-real-canary-coal-mine-180961570/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"md`\n## Bad UI of the Day\n\nThis webpage is representative of a problem that **many** web pages have: [http://chanslakeville.com/lunch.html](http://chanslakeville.com/lunch.html)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`\n## [The Basics of HTML](https://observablehq.com/@soney/si-579-the-basics-of-html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"html`\n\n \n U of M Schools\n \n \n

University of Michigan Schools

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

\n\n

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.

\n\n

College of Literature, Science, and the Arts

LSA is the liberal arts and sciences school.

\n\n

College of Engineering

CoE is the engineering unit of the University of Michigan.

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`\n# [Common HTML Elments and Attributes](https://observablehq.com/@soney/common-html-elements)\n# [Firefox Developer Tools](https://observablehq.com/@soney/firefox-developers-tools)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`# Exercise: Using Firefox Dev Tools\n- Open the [UMSI homepage](https://www.si.umich.edu/)\n- Change the first element in the navigation bar from **Programs** to **SI 579**\n- Make the second element in the navigation bar disappear:\n - Delete the second element from the DOM tree\n - Make the second element invisible by changing the CSS display property\n- Make the four elements in the navigation bar the same color\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`\n- [Mixing in CSS](https://observablehq.com/@soney/mixing-in-css)\n- [CSS Basics and Selectors](https://observablehq.com/@soney/css-basics-and-selectors)\n- [Common CSS Attributes](https://observablehq.com/@soney/common-css-attributes)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md`# Exercise: Redoing the Lunch Menu\nLet's redo part of our \"Bad UI of the Day\". 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":35,"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"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"