Web Design 1 Assignments (subject to change)

All assignments and your personal web page must be saved to your network folder in order to be graded. This is the folder for this class, not the one provided by the school district. Your site must be saved in the folder named mysite. You must show assignments to me in class for grading. Video: Working from home using Google Drive

 

Go to https://studio.code.org/home

  • Join the class
    • Create your own accounts and join your section at: 
    • email me when you have joined the class.
  • Lesson 1: Exploring Web Pages DUE August 23
  • Lesson 2: Intro to HTML DUE August 24
    • When you are done, send me an email with the lesson number as the subject saying you are done.
    • If there is a reflection assignment just type in a word and submit it.
    • Skip Part D of Step 9
  • Lesson 3: Headings and Lists DUE August 26
    • When you are done, send me an email with the lesson number as the subject saying you are done.
    • If there is a reflection assignment just type in a word and submit it.
    • On Step 8, complete all activities. 
    • Lesson 9 should look like this.
    • On Step 11, complete A, B, and C. Complete one of D, E F.
  • Lesson 4: Digital Footprint DUE August 29
  • Lesson 5: Mini-Project: HTML Web Page DUE September 10
    • Project Guide 1 Google Classroom
    • For Step 2, your page must meet the requirements in the directions.
    • Follow this example.
  • Lesson 6: Styling Text with CSS DUE September  6
    • When you are done, send me an email with the lesson number as the subject saying you are done.
    • For Step 12, skip Activity F.
  • Lesson 7: Intellectual Property DUE September 13
  • Lesson 8: Using Images DUE September 18
    • For step 7 of this lesson, complete A, B, C, and D. You can complete E, F, or G for extra credit. Please tell me if you do so.
    • For step 8 of add a picture of something you're interested in.
    • For Step 10 only complete A and B.
    • When you are done, send me an email with the lesson number (Code Lesson 8) as the subject saying you are done.
  • Lesson 9: Styling Elements with CSS DUE September 24
    • When you are done, send me an email with the lesson number (Code Lesson 9) as the subject saying you are done.
    • Step 4: You must add text-align, color, and at least one other property to the body rule
    • Step 8: Add at least two other rules to the css with appropriate properties for both. Use hexadecimal color codes for these.
    • Step 10: Complete activities A, B, C, D,
      • Any of the last items can be done for extra credit but you must email me to tell me you did it.
  • Lesson 10 Adding Style to a Webpage DUE September 27
    • Lesson 10 Project Guide - Adding Style to a Webpage complete in Google Classroom
      • For the drawing of your site, keep it simple. You can make a wireframe sketch using the Draw tool in Google Docs.
      • Examples
    • When you are coding the page in steps 2-5 of the lesson use the code you created from Lesson 5. Just copy and paste it from one lesson to the other. Include the following rules in the CSS. (My example)
      • body: change the background color and the text color
      • h1, h2, h3: change the font family, font size and text color for all
      • p: change the font family and font size
      • ol: change the text color
      • ul: change the text color
  • Lesson 11: CSS Classes DUE September 30
    • Step 8, only complete A and B
    • When you are done, send me an email with the lesson number (Code Lesson 11) as the subject saying you are done.
  • Lesson 12: Organizing Content with Flexbox DUE September
    • Step 9, skip F
    • When you are done, send me an email with the lesson number (Code Lesson 12) as the subject saying you are done.
  • Lesson 13: Flexbox Children for More Control DUE September
    • Step 9, skip D
    • When you are done, send me an email with the lesson number (Code Lesson 13) as the subject saying you are done.
  • Lesson 14: Chapter 1 Project DUE September
    • Step 1, only complete Activity A for Angelina.
    • Step 2 should be a continutation from previous activities. You can and should copy your code from those lessons.
    • Step 3, only complete activities A-D.
    • When you are done, send me an email with the lesson number (Code Lesson 14) as the subject saying you are done.
  • ***************DO NOT PROCEED Assignments not updated after this point ****************
  • Lesson 12: Your Web Page - Prepare DUE September 29
    • Personal Web Page - Prepare - Project GuideGoogle Classroom
    • For the drawing of your site, you can use the one from Lesson 7. Make sure you update it to reflect changes.
      • Lesson 13: Project - Personal Web Page DUE October 2
      • Personal Web Page - Reflect - Project Guide Google Classroom
      • When you are coding your page use the code you created from Lesson 7. Just copy and paste it from one lesson to the other. Example.
      • Step 3: Upload at least three images for your page.
      • Step 4:
        • Add font-family, font-size and line-height to your body rule.
        • Add an img rule with at least three properties. One of the properties must be a border.
      • All previous requirements remain since this should be a continuation from previous lessons.
      • Not Assigned:
        • Personal Web Page - Peer Review
        • Personal Web Page - Rubric
        • Computer Science Practices - Reflection
      • Together, we will add the following code to your html and css.

        figure {
        float: right;
        width: 400px;
        height: auto;
        text-align: center;
        font-style: italic;
        font-size: smaller;
        text-indent: 0;
        display: block;
        border: double red 5px;
        margin: 0.25em;
        }

        figcaption{
        font-family: Verdana,Script, sans-serif;
        font-weight: bold;
        background-color: rgb(175, 175, 175);
        margin-top: -5px;  
        }
        figure img {
        width: 100%;
        height: auto;
        }

        <figure>
        <img src="2022-10-10.png"
        width="136" height="200"
        alt="Eiffel tower">
        <figcaption>Scale model of the
        Eiffel tower in
        Parc Mini-France</figcaption>
        </figure>

      Aug 20

      Pretest

      • Take the pretest in Google Classroom.
      • Must be done at school.
      • Do not look up answers.

      Aug 19

      Course requirements/expectations

      Assignment:

      • Complete registration for websites below.
      • Student Syllabus Verification

      Join Google Classroom Join code.org

      1. You must sign in with your Google Classroom account.
      2. Go to www.code.org and click the 'sign in' button.
      3. Choose 'Continue with Google'.
      4. Sign in via the Google sign-in dialog.
      Join Quizlet