{"id":8264,"date":"2025-09-08T05:30:48","date_gmt":"2025-09-08T09:30:48","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=8264"},"modified":"2025-09-04T13:15:17","modified_gmt":"2025-09-04T17:15:17","slug":"cs-discoveries-09-08-2025-lessons-5-6-mini-project-css","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2025\/09\/08\/cs-discoveries-09-08-2025-lessons-5-6-mini-project-css\/","title":{"rendered":"CS Discoveries, 09-08-2025, Lessons 5 &#038; 6: Mini-Project &#038; CSS"},"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\/1mQegUDm3xGkTItCGhGy0oRmfcjeAJYsY\/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 be able to:\n<ol>\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<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>W<\/strong><strong>arm-Up:<\/strong>\n<ol>\n<li>In your Google Doc from Week 1, paste the following vocabulary under the heading of \"Vocabulary.\"\n<ul>\n<li><strong>CSS<\/strong> - Cascading Style Sheets; a language used to describe how HTML elements should be styled<\/li>\n<li><strong>CSS Selector<\/strong> - the part of a CSS rule-set that defines which HTML elements the style should be applied to<\/li>\n<\/ul>\n<\/li>\n<li>In your Google Doc from Week 1, paste the following code under the heading of \"<span style=\"color: #0000ff;\">CSS Code<\/span>.\" <span style=\"color: #ff0000;\">NOTE THAT THIS IS NOT HTML CODE!<\/span>\n<ul>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/color\"><code class=\"visual-block\">color: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/font-family\"><code class=\"visual-block\">font-family: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/font-size\"><code class=\"visual-block\">font-size: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/text-align\"><code class=\"visual-block\">text-align: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/Text-Dec\"><code class=\"visual-block\">text-decoration: value;<\/code><\/a><\/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<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>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><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><strong><span style=\"color: #ff0000;\">Lesson 5: Mini-Project: HTML Web Page<\/span><\/strong>\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<\/ol>\n<\/li>\n<li><span style=\"color: #ff0000;\"><strong>Lesson 6: Styling Text with CSS<\/strong><\/span>\n<ol>\n<li>You will need to create a new document. We've been using index.html, but now we will need a stylesheet. These are frequently named style.css (the .css part at the end is crucial).CSS code in a stylesheet should be formatted like this:<br \/>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>\n<pre><span style=\"color: #0000ff;\">CSS Selector or Class<\/span> {\r\n     <span style=\"color: #800080;\">element<\/span>: <span style=\"color: #008000;\">value<\/span>;\r\n     <span style=\"color: #800080;\">element<\/span>: <span style=\"color: #008000;\">value<\/span>;\r\n     }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Here's an example of actual CSS code that would change all bold text (made using &lt;strong&gt; and &lt;\/strong&gt; to be dark red.<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>\n<pre><span style=\"color: #0000ff;\">strong<\/span> {\r\n    <span style=\"color: #800080;\">color<\/span>: <span style=\"color: #008000;\">#ba372a<\/span>;\r\n    }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Mr. Smith will be able to show you more about this in class.<\/p>\n<p>If you are trying to find just the right color, you can type in the name of the color for the value OR use a color picker. There's more than one online tool that can be used, though Mr. Smith tends to use the color pickers <a href=\"https:\/\/editor.method.ac\/\">built into image editors<\/a> or the one built into VSCodium. Code.org's editor also has a color picker that can be used.<\/li>\n<li>Grading Rubric\n<ol>\n<li><strong>5 pts<\/strong>: Screenshot uploaded showing <span style=\"color: #ff0000;\">style.css<\/span> on one side and <span style=\"color: #ff0000;\">how the code looks in a web browser<\/span> on the other side.<\/li>\n<li><strong>1 pt<\/strong>: Paragraphs are a different <span style=\"color: #ff0000;\">size<\/span> than default <span style=\"color: #ff0000;\">due to style.css code<\/span>.<\/li>\n<li><strong>1 pt<\/strong>: Paragraphs are a different <span style=\"color: #ff0000;\">color<\/span> than default <span style=\"color: #ff0000;\">due to style.css code<\/span>.<\/li>\n<li><strong>3 pts<\/strong>: Code does not have errors.<\/li>\n<li><strong>1 pt Extra Credit:<\/strong> Page <span style=\"color: #ff0000;\">background<\/span> is a different color that still contrasts well with text colors <span style=\"color: #ff0000;\">due to style.css code<\/span>.<\/li>\n<\/ol>\n<\/li>\n<li>Lesson 7: Intellectual Property<\/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>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\/16069300\"><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<\/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 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\/09\/08\/cs-discoveries-09-08-2025-lessons-5-6-mini-project-css\/\" class=\"more-link\">...continue reading<span class=\"screen-reader-text\"> \"CS Discoveries, 09-08-2025, Lessons 5 &#038; 6: Mini-Project &#038; CSS\"<\/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-8264","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\/8264","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=8264"}],"version-history":[{"count":5,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8264\/revisions"}],"predecessor-version":[{"id":8266,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/8264\/revisions\/8266"}],"wp:attachment":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/media?parent=8264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/categories?post=8264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/tags?post=8264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}