Skip to content

Category: CSDiscoveries, Smith

Published on
  1. Objective:
    1. Students will begin writing simple code to explore the complexity and simplicity of coding HTML.
  2. 11:50-12:00: Start of Class
    1. Warm-Up: Find your assigned seat and log into the desktop computer.
      1. Create a folder in Google Drive named CS Discoveries 2026-2027.
      2. In that folder, create a Google Doc and name it CSD Notes - [Your Name]. The name here is important as it will help Mr. Smith find your work. If you make it hard for him to find YOUR work, you make it easy for you to earn a zero.
      3. In that Google Doc, paste the following vocabulary under a heading of "Vocabulary."
        • HTML - Hypertext Markup Language, a language used to create web pages
        • HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
        • HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type
        • Website Content - the text and images on a website
        • Website Structure - how the content of a website is organized
      4. In that same Google Doc, paste the following code under a heading of "HTML Code."
      5. Use the SHARE button at the top right of your Google Doc to share this document with aaron.smith@pgcps.org.
        1. If you skip this last step you WILL earn a zero, because Mr. Smith will not be able to see your work.
    2. Warm-Ups are usually a 5 point Independent Work grade if a written response is expected, a 5 point Assessment grade if the Warm-Up is a quiz, or part of a 10 point Notebook Check if they include new vocabulary/code to enter into student notes. They are due at the start of class and not eligible for late submission or re-submission.
  3. 12:00-12:55: Instruction & Student Work
    1. Lesson 2: Intro to HTML
      1. Click the folder icon on the bottom of your screen to see your computer's directory. Open your Documents folder.
      2. In your Documents folder, make a new folder (right-click in the empty space, select "New Folder") and name it "Website[YourFirstName]" without any spaces.
      3. Use the Super Key (A.K.A. the WIndows Key) to get a pop-up on your screen and type the word "Text." We will use more complex tools for coding, but today we're starting with the simplest one we have - a basic text editor.
        1. You can make web pages with any text editor. On a Mac you can use TextEdit and on Windows there's Notepad. Never feel you are unable to do the work because you lack fancy software.
      4. Copy/Paste the following code into your text editor.
        <!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Title Goes Here</h1>

<p>Hello, world.</p>

</body>

</html>
    2. At the top of your screen, click on "File," then "Save As."
    3. Change the file type to "All File Types" (if it doesn't already say that) and name your page "index.html" to make sure it will work correctly
    4. Find this file in your new folder and drag it into your web browser to see how it looks!
    5. Add 2 more paragraphs without breaking any of the code.
      1. (Remember: Paragraphs are anything between <p> and </p>. They do NOT need to be multiple sentences.)
    6. Use this space to provide an introduction to yourself and what you want to include on your website.
      1. Frequent choices for web content include:
        1. Sharing special interests
        2. Teaching others
        3. Advertising your business
        4. Showcasing cool things you've made (Media Arts Majors are required to create a portfolio of their work. This CAN be used for that.)
    7. Frequently save your changes! If you see a dot near the file name at the top of the editor window, you have unsaved changes that will be lost if you close the document!
      1. Every time you save your work it's a good idea to refresh your browser window to see how the code renders.
    8. Go to Canvas to upload your saved work as Exit Ticket 1.
    9. Grading Rubric:
      1. 5 pts: A single HTML file named "index.html" has been uploaded to the proper Exit Ticket.
      2. 3 pts: All added text is contained within 3 separate sets of paragraph tags.
      3. 2 pts: None of the sample code has been altered, paragraphs are between the <body> and </body> tags.
  • Deadlines: (Content is subject to change due to various factors including All-Major days and inclement weather days.)
    1. Week 1 Assignments Due 08-27 (2 days) (8/25, 8/27)
      1. Lesson 1: Exploring Web Pages & Lesson 2: Intro to HTML
      2. Week 1 Exit Ticket
    2. Week 2 Assignments Due 09-04 (3 days)
      1. Lesson 3: Headings and Lists
      2. Lesson 4: Digital Footprint
      3. Lesson 5: Mini-Project: HTML Web Page
      4. Week 2 Exit Ticket
    3. Week 3 Assignments Due 09-11 (2 days)
      1. Lesson 6: Styling Text with CSS
      2. Lesson 7: Intellectual Property
      3. Week 3 Exit Ticket
    4. Week 4 Assignments Due 09-18 (2 days)
      1. Lesson 8: Using Images
      2. Lesson 9: Styling Elements with CSS
      3. Week 4 Exit Ticket
    5. Week 5 Assignments Due 09-25 (2 days)
      1. Lesson 10: Mini-Project: Adding Style to a Web Page
      2. Lesson 11: CSS Classes
      3. Week 5 Exit Ticket
    6. Week 6 Assignments Due 10-01 (2 days)
      1. Lesson 12: Organizing Content with Flexbox
      2. Lesson 13: Flexbox Children for More Control
      3. Week 6 Exit Ticket
    7. Week 7 Assignments Due 10-09 (3 days)
      1. Lesson 10: Mini-Project: Adding Style to a Web Page
      2. Lesson 16: Sources and Research
      3. Lesson 17: Linking Pages
      4. Week 7 Exit Ticket
    8. Week 8 Assignments Due 10-15 (2 days)
      1. Lesson 18: CSS Pseudo-classes
      2. Lesson 19: Planning a Multi-Page Site
      3. Week 8 Exit Ticket
    9. Week 9 Assignments Due 10-22 (2 days)
      1. Lesson 20: Project - Website for a Purpose (begin)
      2. Lesson 20: Project - Website for a Purpose (finish)
      3. Week 9 Exit Ticket
    10. Week 10 Assignments Due 10-30 (3 days)
      1. Lesson 21: Peer Review
      2. End of Course Survey
      3. Week 9 Exit Ticket
  • 12:55-1:05: End of Class
    1. Save all work and back it up in Google Drive, as "I couldn't access my project" will not be seen as a valid excuse.
    2. If it's the last A Day of the week, submit the week's Classwork as an Exit Ticket.
    3. Properly shut down your assigned computer and line up, prepared to go to lunch.
    4. Exit Tickets are always 10 point Classwork grades and not eligible for late submission. Exit Tickets handed in on time are eligible for re-submission within 10 calendar days of feedback, with old and new grades averaged. (It is always better to hand in as much as possible on time, even if not complete.) Exit Tickets are due during the last 10 minutes of the last class of the week.