{"id":8431,"date":"2025-09-22T05:30:12","date_gmt":"2025-09-22T09:30:12","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=8431"},"modified":"2025-09-17T18:00:30","modified_gmt":"2025-09-17T22:00:30","slug":"cs-discoveries-09-22-2025-lesson-11","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2025\/09\/22\/cs-discoveries-09-22-2025-lesson-11\/","title":{"rendered":"CS Discoveries, 09-22-2025, Lesson 11"},"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\/1lMeXYjMU7QNHS2f775rXfHg61-U7U4Nv\/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 add classes to their websites to better customize their CSS code.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Warm-Up:<\/strong>\n<ol>\n<li>Add the following vocabulary to your notes:\n<ul>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1KuGv9v91lGFLjQ5stnkmk0ZW82WRsCag\/view\"><strong>CSS Class<\/strong><\/a> - An identifier that allows multiple elements in an HTML document to be styled in the same way<\/li>\n<\/ul>\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<\/li>\n<\/ol>\n<ol>\n<li><strong>Computer Setup<\/strong>\n<ol>\n<li><a href=\"https:\/\/docs.google.com\/document\/d\/1EvF79wxrWEadLdYhRnYTkqwSUVcqlIf5pizwSWfJ5HY\/edit?usp=sharing\">VS Codium<\/a><\/li>\n<li><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\">Code.org<\/a><\/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><a href=\"https:\/\/fouloistech.info\/ma\/2025\/08\/26\/cs-discoveries-08-26-2025-week-1\/\"><span data-sheets-root=\"1\">Lesson 1: Exploring Web Pages<\/span><\/a><\/li>\n<li><a href=\"https:\/\/fouloistech.info\/ma\/2025\/08\/28\/cs-discoveries-08-28-2025-intro-to-html\/\"><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:\/\/fouloistech.info\/ma\/2025\/09\/02\/cs-discoveries-09-02-2025-lesson-3-headings-and-lists\/\"><span data-sheets-root=\"1\">Lesson 3: Headings and Lists<\/span><\/a><\/li>\n<li><a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/04\/cs-discoveries-09-04-2025-lesson-4-digital-footprint\/\">Lesson 4: Digital Footprint<\/a><\/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><a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/08\/cs-discoveries-09-08-2025-lessons-5-6-mini-project-css\/\">Lesson 5: Mini-Project: HTML Web Page<\/a><\/li>\n<li><a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/08\/cs-discoveries-09-08-2025-lessons-5-6-mini-project-css\/\">Lesson 6: Styling Text with CSS<\/a><\/li>\n<li><a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/10\/cs-discoveries-09-10-2025-lesson-7-intellectual-property\/\">Lesson 7: Intellectual Property<\/a><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069300\">Week 3 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 4 Assignments Due 09-18<\/strong> (2 days)\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069273\">Lesson 8: Using Images<\/a><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/assignments\/16069273\">Lesson 9: Styling Elements with CSS<\/a> (Same link as Lesson 8)<\/li>\n<li><a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/16\/cs-discoveries-09-16-2025-lesson-8-using-images\/\">These lessons were explained during Tuesday's class.<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ol>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808956\">Week 4 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><span style=\"color: #ff0000;\"><strong>Week 5 Assignments Due 09-25<\/strong> (2 days)<\/span>\n<ol>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808989\">Lesson 10: Mini-Project: Adding Style to a Web Page<\/a>\n<ol>\n<li><a class=\"external\" href=\"https:\/\/docs.google.com\/document\/d\/1gvACwu6hGSPOmq134jkjnsgOOJ1pVbfuYxdsDsUKvYQ\/copy\" target=\"_blank\" rel=\"noreferrer noopener\">This planning guide\u00a0<\/a> will help you, but your work will be <a class=\"external\" 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\" target=\"_blank\" rel=\"noreferrer noopener\">checked in Code.org. <\/a>\n<ul>\n<li>This assignment is assessing the code and copyright, not the content. To that end, even the planning guide suggests you start with the work you did for Lesson 5.\n<ol>\n<li>(You can even copy your code from Lesson 5 in Code.org, assuming it was formatted correctly. A mistake there is still a mistake for this assignment.)<\/li>\n<li>(If you didn't complete Lesson 5, then you have more work to do than those who did.)<\/li>\n<\/ol>\n<\/li>\n<li><span style=\"color: #ff0000;\"><strong>Grading Rubric (2 pts each)<\/strong><\/span>\n<ol>\n<li><strong>Using HTML<\/strong>\n<ul>\n<li>They use HTML to correctly add all given images to the web page, including adding the \u201calt\u201d attribute for all images.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Using CSS<\/strong>\n<ul>\n<li>They use CSS to control <i>the basic appearance of the <strong>five (5) different elements<\/strong> on the page.<\/i><\/li>\n<\/ul>\n<\/li>\n<li><strong>Clean Code<\/strong>\n<ul>\n<li>They use white space and indentation to make the stylesheet code consistently well-formatted and easier to read.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Precision and Syntax<\/strong>\n<ul>\n<li>There are no syntax errors in the added HTML code or the CSS code, and the page renders correctly<i>.<\/i><\/li>\n<\/ul>\n<\/li>\n<li><strong>Respect Copyright<\/strong>\n<ul>\n<li>All images have been cited, and credit is given to the creators.<\/li>\n<li><span style=\"color: #ff0000;\">DO NOT USE THE IMAGES PROVIDED BY CODE.ORG FOR THIS LESSON!<\/span>\n<ul>\n<li>The citations provided say they were made by ChatGPT. ChatGPT was trained by stealing art from creators without providing citation. Crediting an art thief is not the same thing as crediting a creator.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808991\"><span data-sheets-root=\"1\">Lesson 11: CSS Classes<\/span><\/a>\n<ol>\n<li>Grading Rubric:\n<ol>\n<li><strong>6 pts<\/strong>: Screenshot<span style=\"color: #ff0000;\">s<\/span> uploaded showing code on one side and how the code looks in a web browser on the other side. One screenshot should show the HTML code while the other should show the CSS code.<\/li>\n<li><strong>1 pt<\/strong>: Webpage uses a properly formatted CSS class rule set in style.css.<\/li>\n<li><strong>1 pt<\/strong>: Created CSS class modifies <span style=\"color: #ff0000;\">three different tags<\/span> in the HTML document by selective inclusion of the class=\"classname\" code inside selected HTML tags. (Use the sample website in Code.org as an example.)<\/li>\n<li><strong>1 pt<\/strong>: The three different tags are all part of the same section of the web page.<\/li>\n<li><strong>1 pt<\/strong>: Other sections of the web page are not modified by the CSS class.<\/li>\n<li><strong><span style=\"color: #ff0000;\">-10 pts<\/span>:<\/strong> Any screenshot includes an image that was <span style=\"color: #ff0000;\"><strong>not used with permission<\/strong>.<\/span> (A missing citation = a missing grade.)<\/li>\n<\/ol>\n<\/li>\n<li>Permitted image sources (provided a citation is included):\n<ul>\n<li><a href=\"https:\/\/openclipart.org\/\" target=\"_blank\" rel=\"noopener\">OpenClipArt.org<\/a><\/li>\n<li><a href=\"http:\/\/www.pics4learning.com\/\" target=\"_blank\" rel=\"noopener\">Pics4Learning<\/a><\/li>\n<li><a href=\"https:\/\/publicdomainvectors.org\/\" target=\"_blank\" rel=\"noopener\">PublicDomainVectors.org<\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a><\/li>\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/Main_Page\" target=\"_blank\" rel=\"noopener\">Wikimedia Commons<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808957\">Week 5 Exit Ticket<\/a><\/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><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808959\">Week 6 Exit Ticket<\/a><\/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><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808961\">Week 7 Exit Ticket<\/a><\/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><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808963\">Week 8 Exit Ticket<\/a><\/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><a href=\"https:\/\/pgcps.instructure.com\/courses\/921855\/modules\/items\/40808964\">Week 9 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 10 Assignments Due 01-21<\/strong> (3 days)\n<ol>\n<li><span style=\"color: #ff0000;\" 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\/modules\/items\/40808957\"><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 style=\"width: 10%;\">4 pts<\/td>\n<td style=\"width: 90%;\">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","protected":false},"excerpt":{"rendered":"<p>THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY! Objective: Students will add classes to their websites to better customize their CSS code. Warm-Up: Add the following vocabulary to your notes: CSS Class - An identifier that allows multiple elements in an HTML document to be styled in the same way Warm-Ups are <a href=\"https:\/\/fouloistech.info\/ma\/2025\/09\/22\/cs-discoveries-09-22-2025-lesson-11\/\" class=\"more-link\">...continue reading<span class=\"screen-reader-text\"> \"CS Discoveries, 09-22-2025, Lesson 11\"<\/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-8431","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\/8431","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=8431"}],"version-history":[{"count":4,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8431\/revisions"}],"predecessor-version":[{"id":8449,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8431\/revisions\/8449"}],"wp:attachment":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/media?parent=8431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/categories?post=8431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/tags?post=8431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}