{"id":9166,"date":"2025-11-19T05:30:45","date_gmt":"2025-11-19T10:30:45","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=9166"},"modified":"2025-11-13T12:24:55","modified_gmt":"2025-11-13T17:24:55","slug":"cs-discoveries-11-19-2025-lesson-5-mini-project-html-web-page","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2025\/11\/19\/cs-discoveries-11-19-2025-lesson-5-mini-project-html-web-page\/","title":{"rendered":"CS Discoveries, 11-19-2025, Lesson 5: Mini-Project: HTML Web Page"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-8130\" src=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD2-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD2-300x169.png 300w, https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD2.png 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><a href=\"https:\/\/drive.google.com\/file\/d\/1OYVxmx8hDlqSsVLh9vxEcva-sBNCK2cl\/view?usp=drive_link\">THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY!<\/a><\/p>\n<ol>\n<li><strong>Objective:<\/strong>\n<ul>\n<li>Students will be able to:\n<ul>\n<li>Build a webpage using HTML<\/li>\n<li>Design a webpage based on user needs<\/li>\n<li>Write readable code<\/li>\n<li>Explain the differences between HTML and CSS in both use and syntax.<\/li>\n<li>Link to an external style sheet.<\/li>\n<li>Use CSS selectors to style HTML text elements.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>W<\/strong><strong>arm-Up:<\/strong>\n<ol>\n<li><a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSeNJ0p557HuLeV0tolN3uDh3XqPVXABm-sRcZ9s09lXN1l6Fg\/viewform?usp=header\">With your notes open, complete this Google Form Quiz.<\/a>\n<ol>\n<li>THIS IS A <span style=\"color: #ff0000;\">PROOFREADING<\/span> QUIZ!<\/li>\n<li>You will have ONE chance per question to find the answer that is written correctly.<\/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<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<\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1XIsACnyeOd6HZ95pyYfwgXXecLT8IMgD\/view?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<\/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.)\n<ol>\n<li>Warm-Ups: Due daily<\/li>\n<li><strong>Week 3 Assignments Due 11-21<\/strong>\u00a0(3 days)\n<ol>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/961716\/assignments\/17934332\"><strong>Lesson 6: Styling Text with CSS<\/strong><\/a><\/li>\n<li><span style=\"color: #ff0000;\">Lesson 5: Mini-Project: HTML Web Page<\/span>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><a href=\"https:\/\/docs.google.com\/document\/d\/1pSAdhkoWTilNrOjrQiMSTR8F_ATxiOxb4lU-21z9Rbs\/copy\">You'll need a copy of this Project Guide.<\/a><\/li>\n<li><a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSe2dLPIcr32cscQI2kMvNU7lHB9hKEKXyBGSQ48Pl2TspOucQ\/viewform?usp=dialog\">Use this link to hand in your Project Guide.<\/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\">Your coding work, <strong>unlike previous assignments<\/strong>, must be in Code.org's Lesson 5.<\/a><\/li>\n<li>Grading Rubric\n<ol>\n<li><strong>2 pts: Modularity and Abstraction - Content vs Structure<\/strong><br \/>\nTheir project guide contains a design sketch that distinguishes content from structure (i.e., all content is labeled with corresponding tags)<\/li>\n<li><strong>1 pt: <span class=\"description description_title\">Creating a Digital Artifact - User Needs<br \/>\n<\/span><\/strong>The page is formatted in a logical way that is fairly consistent with their plan in the project guide and meets the user\u2019s needs.<\/li>\n<li><strong>3 pts: <span class=\"description description_title\">Creating a Digital Artifact - Using HTML<\/span><\/strong><br \/>\nThey use HTML to create a web page with at least 3 hierarchical heading tags, 3 paragraph tags, and at least 3 lists.<\/li>\n<li><strong>1 pt: Clean Code and Documentation - Readability<\/strong>\n<div class=\"long_description small_description\">They use white space and indentation to make code consistently well formatted, with nested tags aligned vertically to make them easier to read.<\/div>\n<\/li>\n<li><strong>1 pt: Clean Code and Documentation - Comments<\/strong><br \/>\nComments are used throughout the page to make their code more readable.<\/li>\n<li><strong>2 pts: <span class=\"description description_title\">Using Computer Languages - Precision and Syntax<\/span><\/strong><br \/>\nThere are no syntax errors and the page renders correctly. All content is contained inside elements which are inside the &lt;body&gt; tag.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Lesson 7: Intellectual Property<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/961716\/assignments\/17934360\">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>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 11-25<\/strong> (1 day)\n<ol>\n<li><span style=\"color: #ff0000;\">Lesson 10: Mini-Project: Adding Style to a Web Page<\/span><\/li>\n<li><del>Week 5 Exit Ticket<\/del><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 6 Assignments Due 12-04<\/strong>\u00a0(2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 11: CSS Classes<\/span><\/li>\n<li><span style=\"color: #ff0000;\">Lesson 10: Mini-Project: Adding Style to a Web Page<\/span><\/li>\n<li>Week 6 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 7 Assignments Due 12-12<\/strong>\u00a0(2 days)\n<ol>\n<li><span style=\"color: #ff0000;\">12-08 is an All Major Day<\/span><\/li>\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><\/li>\n<li>Week 7 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 8 Assignments Due 12-18<\/strong>\u00a0(2 days)\n<ol>\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 8 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 9 Assignments Due 01-09<\/strong> (3 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><span data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (begin)<br \/>\n<\/span><\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 10 Assignments Due 01-15<\/strong> (2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (finish)<\/span><\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 11 Assignments Due 01-23<\/strong>\u00a0(2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 21: Peer Review<\/span><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 12 Assignments Due 01-26<\/strong>\u00a0(1 day)\n<ol>\n<li>End of Course Survey<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul>\n<li><strong>Exit Tickets<\/strong>\n<ol>\n<li>Exit Tickets \"go live\" during the last 10 minutes of our last class of the week, except when we only meet once during that week, it's the last week of the Quarter, or Mr. Smith screwed up.<\/li>\n<li>Scroll up for the information for this week to see the link to the Exit Ticket.<\/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.<br \/>\n<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Previous Lessons: <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/04\/cs-discoveries-11-04-2025-week-1\/\">11\/04<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/06\/cs-discoveries-11-06-2025-intro-to-html\/\">11\/06<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/10\/cs-discoveries-11-10-2025-lesson-3-headings-and-lists\/\">11\/10<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/13\/cs-discoveries-11-13-2025-lesson-4-digital-footprint\/\">11\/13<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/17\/cs-discoveries-11-17-2025-lesson-6-styling-text-with-css\/\">11\/17<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY! Objective: Students will be able to: Build a webpage using HTML Design a webpage based on user needs Write readable code Explain the differences between HTML and CSS in both use and syntax. Link to an external style sheet. Use CSS selectors to style <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/19\/cs-discoveries-11-19-2025-lesson-5-mini-project-html-web-page\/\" class=\"more-link\">...continue reading<span class=\"screen-reader-text\"> \"CS Discoveries, 11-19-2025, Lesson 5: Mini-Project: HTML Web Page\"<\/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":["post-9166","post","type-post","status-publish","format-standard","category-csd-smith","category-smith","h-entry","hentry","h-as-article"],"_links":{"self":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/9166","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=9166"}],"version-history":[{"count":8,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/9166\/revisions"}],"predecessor-version":[{"id":9180,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/9166\/revisions\/9180"}],"wp:attachment":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/media?parent=9166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/categories?post=9166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/tags?post=9166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}