{"id":8200,"date":"2025-09-02T05:30:23","date_gmt":"2025-09-02T09:30:23","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=8200"},"modified":"2025-08-29T08:31:06","modified_gmt":"2025-08-29T12:31:06","slug":"cs-discoveries-09-02-2025-lesson-3-headings-and-lists","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2025\/09\/02\/cs-discoveries-09-02-2025-lesson-3-headings-and-lists\/","title":{"rendered":"CS Discoveries, 09-02-2025, Lesson 3: Headings and Lists"},"content":{"rendered":"<ol>\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-8129\" src=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD1-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD1-300x169.png 300w, https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD1.png 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><a href=\"https:\/\/drive.google.com\/file\/d\/1lJeDCMCNCShNyswBTaIzMa_RKtsOLp9b\/view?usp=drive_link\">THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY!<\/a><\/li>\n<li><strong>Objective:<\/strong>\n<ol>\n<li>Students will begin writing simple code to explore the complexity and simplicity of coding HTML.<\/li>\n<\/ol>\n<\/li>\n<li><strong>W<\/strong><strong>arm-Up:<\/strong>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>In your <a href=\"https:\/\/drive.google.com\/\">Google Doc from Week 1<\/a>, paste the following vocabulary under the heading of \"Vocabulary.\"\n<ul>\n<li><strong>Heading<\/strong> - A title or summary for a document or section of a document.<\/li>\n<li><strong>List<\/strong> - allows web developers to group a set of related items<\/li>\n<\/ul>\n<\/li>\n<li>In that same Google Doc, paste the following code under the heading of \"HTML Code.\"\n<ul>\n<li>\n<div>\n<p><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/h\"><code class=\"visual-block\">&lt;h1&gt;&lt;\/h1&gt;<\/code><\/a><\/p>\n<\/div>\n<\/li>\n<li>\n<div>\n<p><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/li\"><code class=\"visual-block\">&lt;li&gt;&lt;\/li&gt;<\/code><\/a><\/p>\n<\/div>\n<\/li>\n<li>\n<div>\n<p><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/ol\"><code class=\"visual-block\">&lt;ol&gt;&lt;\/ol&gt;<\/code><\/a><\/p>\n<\/div>\n<\/li>\n<li>\n<div>\n<p><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/ul\"><code class=\"visual-block\">&lt;ul&gt;&lt;\/ul&gt;<\/code><\/a><\/p>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li>You should have already shared your Google Doc with aaron.smith@pgcps.org so no additional work needs to be done to hand this in.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><em>Warm-Ups are usually a 5 point Independent Work grade if a written response is expected, or a 5 point Assessment grade if the Warm-Up is a quiz. They are due at the start of class and not eligible for late submission or re-submission.<\/em><\/li>\n<\/ol>\n<ul>\n<li><strong>Computer Setup<\/strong>\n<ol>\n<li>There is a lot of useful software on the lab computers, but today we will only be covering the most relevant ones for this class.\n<ol>\n<li>Firefox\n<ol>\n<li>(You will need <a href=\"http:\/\/ckreporter1.pgcps.org\/ckroot\/\">this link<\/a> for an important step. It will not work outside of the PGCPS intranet, but if it doesn't work, you probably\u00a0 don't need it.)<\/li>\n<li>(As much as Mr. Smith likes Firefox, Google Chrome will work better for much of what we do. Firefox, however, will let you see the web pages you've created locally on your computer.)<\/li>\n<\/ol>\n<\/li>\n<li>VS Codium\n<ol>\n<li>(We will be using this industry standard program for coding when we are not using Code.org. <a href=\"https:\/\/docs.google.com\/document\/d\/1EvF79wxrWEadLdYhRnYTkqwSUVcqlIf5pizwSWfJ5HY\/edit?usp=sharing\">Use this link to get it installed on your computer<\/a>.)<\/li>\n<\/ol>\n<\/li>\n<li>Code.org\n<ol>\n<li>(Do not go directly to Code.org to complete assignments! Instead, <a href=\"https:\/\/clever.com\/oauth\/authorize?channel=clever&amp;client_id=4c63c1cf623dce82caac&amp;confirmed=true&amp;district_id=5238c83b5cd6af6a6300156a&amp;redirect_uri=https%3A%2F%2Fclever.com%2Fin%2Fauth_callback&amp;response_type=code&amp;state=5a8aa0dc345e2ac00eb717d9bc5a417afd752343b29364af3ae72acf3dcdff12\">bookmark the Clever login page<\/a> and use that to connect to Code.org.)<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>Deadlines: <\/strong>(Content is subject to change due to various factors including All-Major days and inclement weather days.)<strong><br \/>\n<\/strong><\/p>\n<ol>\n<li>Warm-Ups: Due daily<\/li>\n<li><strong>Week 1 Assignments Due 08-28<\/strong>\u00a0(2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 1: Exploring Web Pages<\/span><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069264\"><span data-sheets-root=\"1\">Lesson 2: Intro to HTML<\/span><\/a><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069295\">Week 1 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 2 Assignments Due 09-04<\/strong> (2 days)\n<ol>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069265\"><span data-sheets-root=\"1\">Lesson 3: Headings and Lists<\/span><\/a>\n<ol>\n<li>Open your index.html file from Lesson 2 in VS Codium. (If you're struggling with this step, check the video tutorial.)<\/li>\n<li><strong>All the work done today should be between the <span style=\"color: #0000ff;\">&lt;body&gt;&lt;\/body&gt;<\/span> tags<\/strong>. Don't work outside of them unless you are fixing a mistake from Lesson 2.<\/li>\n<li>If you copied the sample from Lesson 2, you already have a set of h1 tags for your page title, Change the title if you've thought of something better, but leave the tags as they are.<\/li>\n<li>Add a subheading or two to your page. These should NOT be h1, save that for your page title.\n<ol>\n<li>The higher the number, the smaller the heading text.<\/li>\n<li>h4 will have the text be the same size as standard text, just bold. Use this sparingly. h2 and h3 are far more commonly used.<\/li>\n<li>A heading beginning with &lt;h2&gt; MUST end with &lt;\/h2&gt;. If the numbers don't match, the heading doesn't end.<\/li>\n<\/ol>\n<\/li>\n<li>Add a list using the code shared for your notes today.\n<ol>\n<li>Lists begin and end with <span style=\"color: #0000ff;\"><strong>ol<\/strong> <\/span>or <span style=\"color: #0000ff;\"><strong>ul<\/strong><\/span> tags, for ordered (numbered) lists or unordered (bullet point) lists. These tags are only used once per list.<\/li>\n<li>Each line item of a list begins and ends with <span style=\"color: #0000ff;\"><strong>li<\/strong> <\/span>(line item) tags. These are used regardless of if it's an ordered or unordered list.<\/li>\n<li><span style=\"color: #ff0000;\">Don't use <span style=\"color: #0000ff;\">&lt;li&gt;<\/span> where you're supposed to use <span style=\"color: #0000ff;\">&lt;ol&gt;<\/span> or <span style=\"color: #0000ff;\">&lt;ul&gt;<\/span>!<\/span> This is the most common mistake made in this lesson.<\/li>\n<li><span style=\"color: #ff0000;\">Every line item needs to end with <span style=\"color: #0000ff;\">&lt;\/li&gt;<\/span>, and an ordered list needs to end with <span style=\"color: #0000ff;\">&lt;\/ol&gt;<\/span> while an unordered list needs to end with <span style=\"color: #0000ff;\">&lt;\/ul&gt;<\/span>!<\/span> This is the 2nd most common mistake made in this lesson.<\/li>\n<\/ol>\n<\/li>\n<li>Use the Print Screen (Often abbreviated to \"Prnt Scrn,\" may\u00a0 require the Function (Fn) button to be pressed depending on the keyboard) key to create a screenshot of your work as it is displayed in Firefox and in VSCodium.\n<ol>\n<li>This file will be saved in your \"Screenshots\" folder, which will be in your Pictures folder.<\/li>\n<\/ol>\n<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069265?module_item_id=40808975\">Go to Canvas to hand this in.<\/a>\n<ol>\n<li><span style=\"color: #ff0000;\">If you did Lesson 2, you'll have more than one screenshot in this folder! Make sure you're uploading the correct one!<\/span><\/li>\n<\/ol>\n<\/li>\n<li>Grading Rubric\n<ol>\n<li><strong>5 pts<\/strong>: Single screenshot shows both the index.html file displayed in VSCodium and Firefox, nothing is cropped out of the shot.<\/li>\n<li><strong>3 pts<\/strong>: Code includes more than one heading size and at least one list (numbered or bullet points).<\/li>\n<li><strong>2 pts<\/strong>: All content is contained in tags and is between the &lt;body&gt;&lt;\/body&gt; tags.<\/li>\n<li>Lesson 4: Digital Footprint<\/li>\n<\/ol>\n<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069298\">Week 2 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 3 Assignments Due 09-12<\/strong> (3 days)\n<ol>\n<li><span style=\"color: #ff0000;\">Lesson 5: Mini-Project: HTML Web Page<\/span><\/li>\n<li>Lesson 6: Styling Text with CSS<\/li>\n<li>Lesson 7: Intellectual Property<\/li>\n<li>Week 3 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 4 Assignments Due 09-18<\/strong> (2 days)\n<ol>\n<li>Lesson 8: Using Images<\/li>\n<li>Lesson 9: Styling Elements with CSS<\/li>\n<li>Week 4 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 5 Assignments Due 09-25<\/strong> (2 days)\n<ol>\n<li><span style=\"color: #ff0000;\">Lesson 10: Mini-Project: Adding Style to a Web Page<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 11: CSS Classes<\/span><\/li>\n<li>Week 5 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 6 Assignments Due 10-01<\/strong> (2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 12: Organizing Content with Flexbox<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 13: Flexbox Children for More Control<\/span><span data-sheets-root=\"1\"><br \/>\n<\/span><\/li>\n<li>Week 6 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 7 Assignments Due 10-10<\/strong> (3 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 14: Chapter 1 Project<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 16: Sources and Research<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 17: Linking Pages<\/span><\/li>\n<li>Week 7 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 8 Assignments Due 10-16<\/strong> (2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 18: CSS Pseudo-classes<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 19: Planning a Multi-Page Site<\/span><\/li>\n<li>Week 8 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 9 Assignments Due 10-23<\/strong> (2 days)\n<ol>\n<li><span data-sheets-root=\"1\"><span style=\"color: #ff0000;\">Lesson 20: Project - Website for a Purpose (begin)<\/span><br \/>\n<\/span><\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 10 Assignments Due 01-21<\/strong> (3 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (finish)<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 21: Peer Review and Final Touches<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069295\"><strong>Exit Ticket<\/strong><\/a>\n<ol>\n<li>This week's exit ticket will not \"go live\" today, because how are you going to say what you did all week when it's the first day?<\/li>\n<li>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>4 pts<\/td>\n<td>Proofread your work.<\/td>\n<\/tr>\n<tr>\n<td>3 pts<\/td>\n<td>What did you accomplish in CS Discoveries this week?<\/td>\n<\/tr>\n<tr>\n<td>3 pts<\/td>\n<td>What did you learn in CS Discoveries this week?<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>NOTE: If you do not describe WHAT you did, saying you worked on it is not enough information to earn credit.\n<ol>\n<li><span style=\"color: #ff0000;\">Bad Example<\/span>: \"I completed Unit 2 Lesson 1\" says nothing about what you did or learned. Describe what you did and what you learned as if to someone who does not have access to the course materials.<\/li>\n<\/ol>\n<\/li>\n<li><em>Exit Tickets are always 10 point Classwork grades and not eligible for late submission or re-submission. They are due during the last 10 minutes of the last class of the week.<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY! Objective: Students will begin writing simple code to explore the complexity and simplicity of coding HTML. Warm-Up: In your Google Doc from Week 1, paste the following vocabulary under the heading of \"Vocabulary.\" Heading - A title or summary for a document or section <a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/02\/cs-discoveries-09-02-2025-lesson-3-headings-and-lists\/\" class=\"more-link\">...continue reading<span class=\"screen-reader-text\"> \"CS Discoveries, 09-02-2025, Lesson 3: Headings and Lists\"<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,30],"tags":[],"class_list":{"0":"post-8200","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-csd-smith","7":"category-smith","8":"h-entry","9":"hentry","10":"h-as-article"},"_links":{"self":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/comments?post=8200"}],"version-history":[{"count":2,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8200\/revisions"}],"predecessor-version":[{"id":8209,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8200\/revisions\/8209"}],"wp:attachment":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/media?parent=8200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/categories?post=8200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/tags?post=8200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}