2b:null 2c:["$","title",null,{"children":"PSET 0 | Calvin Zhong | Observable"}] 31:[] 2f:{"id":"d127fdb746d9e017","slug":null,"title":"PSET 0","thumbnail":"1e9fe6ef32197f729bb89f74f0647e3330a93da2a6ba583315bff01e2a4c7c82","access_level":"public","create_time":"$D2023-02-12T21:16:39.613Z","update_time":"$D2023-02-12T21:26:05.041Z","view_time":null,"first_public_time":"$D2023-02-12T21:16:39.613Z","has_unpublished_edits":null,"fork":{"id":"d4eb19230897a259","slug":"4-182-pset-0","title":"PSET 1","owner":{"id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6135c01b13b00ca8","login":"calvinzhong","name":"Calvin Zhong","avatar_url":"https://avatars-next.observableusercontent.com/e025ef3532dc9648e3a971956b760780f6bb3cc2d1b93122f54559183415ae25","tier":"starter_2024"},"version":61,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37df61879ecdf4e5","login":"calvinzhong","name":"Calvin Zhong","avatar_url":"https://avatars-next.observableusercontent.com/e025ef3532dc9648e3a971956b760780f6bb3cc2d1b93122f54559183415ae25","tier":null}],"members":[{"type":"individual","id":"37df61879ecdf4e5","login":"calvinzhong","name":"Calvin Zhong","avatar_url":"https://avatars-next.observableusercontent.com/e025ef3532dc9648e3a971956b760780f6bb3cc2d1b93122f54559183415ae25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"PSET 0","cells":[{"id":0,"value":"md`# PSET 0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`## Make a Personal Page on Observable\nThis problem set is straightforward and designed to get you started, and has a goal of helping you set up a website and becoming more familiar with Observable. For your deliverable, you are going to create a simple notebook that says Hello World. You can customize it and add your bio, a couple of links, whatever you want.\n\n## Submission Instructions\nSubmit the link of your assignment on Stellar. \\n\n**Remember to publish your notebook so it is publicly accesible!** \\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## 1. Create your Observable Notebook\nFollowing the instructions found in the in-class tutorial, create your Observable notebook. On this page, include at least the following:\n\n1. Heading with your name\n2. Paragraph containing a short text bio or introduction\n3. An image and link to a visualization project you find inspiring\n\nThis is your Observable notebook that you can use as your own website. You can set this up however you like. In class, we will revisit this page later in the course when we work to expand our knowledge of HTML, CSS, and JavaScript, and it can ultimately be used to host your final project. You can then customize it further, add more content, and do some design and styling.\n\nNext week, we will **DIVE INTO PROGRAMMING**!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## 2. Create a new collection for your class material.\nOn your Observable user page, create a new collection, where3 you will be saving all the class material!\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## 3. Styling HTML\n\nCreate an HTML element that lists your **five** favorite colors, and styles the background of the color name with that color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"

Blue
Blue
Blue
Blue
Blue

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"## 4. Styling Markdown\n\nCreate a markdown element that displays the current time and date. Style the current time and date as bold, and italics. \n\n**Hint:** You will have to use a javascript library such as [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) to display the current time and date. You can combine markdown and JS in the same cell!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"This should be the time: ${new Date(now).toLocaleTimeString()}; and this should be the date: ${(new Date(now).toLocaleDateString())}\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## 5. HTML Image Elements and Links \n\nFind an online image related to a migration issue that you might be interested in exploring. Show it as an HTML element, and add a link to the image that redirects to a page that has information related to the image and your migration issue\n\nMake sure that the link is part of the image, so when you click the image, it redirects to the link","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"