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

Jan 17

Remake one of the following images using Photoshop and/or Photopea

  • OBJECTIVE: In PhotoShop or Photopea utilize various tools to recreate a given image.
  • The explanation of the assignment can be viewed in here.
  • Starter image files to download are available here as well as in the student_files https://drive.google.com/drive/folders/14FBPZgZN4ju7c1C4dl-dtq2gRUkSGQ2c?usp=sharing
  • Save the images in your codesite assets folder.
  • Match the dimensions of the image.
  • Your cuts must be precise. Use multiple tools and make sure you zoom in.
  • When you are done, export the jpg version and email it to me with the subject Photoshop.
  • Forrest Gump
    • The background is a California Wildfire.
    • Adjust Levels and Hue/Saturation on Forrest.
    • Apply drop shadow.
      Forrest Gump

  • Star Wars
    • Find the C3PO and R2D2 at Lucasfilms
      Star Wars

  • Jaws
    Sloth
    The Production Credits: Co-starring LORRAINE GARY • MURRAY HAMILTON • A ZANUCK/BROWN PRODUCTION
    Screenplay by PETER BENCHLEY and CARL GOTTLIEB • Based on the novel by PETER BENCHLEY • Music by JOHN WILLIAMS
    Directed by STEVEN SPIELBERG • Produced by RICHARD D. ZANUCK and DAVID BROWN • A UNIVERSAL PICTURE
    TECHNICOLOR® PANAVISION®

  • Home Alone
    • Replace Kevin's face with your own. And change the faces of the guys in the window.
    • Try to match skin tones
      Home Alone

Jan 16

Complete final in Google Classroom

Jan 8

https://pathfinder.w3schools.com/

  • Register
  • Complete all activitieis for HTML and CSS

Jan 5

DUE: Create a 3-page website that looks like the image below

Dec 19

Create a 3-page website that looks like the image below

  • Create a folder in your rm305 folder named w3quiz. Save all files in there.
  • Use Visual Studio Code to create three pages.
  • Include content for all areas of the pages.
  • Include an image as a background for the header area (Cities)
  • Include at least three images of each page.
  • Create a CSS stylesheet linked to all pages to control the look and feel of all of the pages.

Dec 6

https://pathfinder.w3schools.com/

  • Register

Dec 5

Complete test in code.org

Dec 2

Complete the Web Site Rubric for your site

Copy your pages from code.org to Visual Studio Code

  • Video of these directions
  • Go to the room305 network directory and create a new folder named codesite. This will hold all of the files from your code.org site.
  • Inside this new folder create an assets folder to hold your images.
  • Open each of your pages in code.org.
  • Copy the code and paste it into a new page in Visual Studio Code.
  • Save the file using the same name you used in code.org and save it to your new codesite folder. If you do not use the same filenames, your links will not work.
  • Make sure you save your stylesheet(s).
  • Download all of your images to your assets folder.
  • Change the code for your images to include the assets folder.
    • If your code is <img src="jeans1.jpg" alt="The best jeans on the market"> it would become <img src="assets/jeans1.jpg" alt="The best jeans on the market">
  • Preview all of your pages and make sure they are working.
  • Make sure all of them have a <title>This is the page Title</title> within the <head></head> tag.
  • Make any other adjustments you would like.

Oct 29

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 15: Exploring Web Pages NOT ASSIGNED
    • Skip
  • Lesson 16: Sources and Research DUE October 31

  • Lesson 17: Linking Pages DUE November 4
    • Step 2: The link to the index must match the one on other pages.
    • Step 6: Name the new page hairtips.html follow the comments in the code.
    • Step 8: Complete all.
    • When you are done, send me an email with the lesson number as the subject saying you are done.
  • Lesson 18: CSS Pseudo-classes DUE November 8
    • Step 6 Complete all
    • Step 9 Complete all
    • When you are done, send me an email with the lesson number as the subject saying you are done.
  • Lesson 19: Planning a Multi-page Website DUE November 15
    • You do not need to complete the lesson in code.org.
    • Project Guide - Website for a Purpose in Google Classroom
  • Lesson 20: Project - Website for a Purpose DUE November
    • You must have at least six pages. Your home page plus five others. These are the pages you described in Lesson 19.
    • Your navigation (menu) must be on each page and you must be able to get to any page from each page.
    • Each page must be full of content. This must include text as well as images.
    • Use at least two images per page but you must have information as well.
      • Do not use copyrighted images. Find images that are free to use.
    • You must have at least 10 different style selectors in your CSS. Each selector must have multiple properties. Meaning to more than just the minimum. The following are required.
      • body, img, p, h1, h2, a, a:hover, a:visited
      • You only have to create two of your own styles.
      • Example
    • When you are done, send me an email with the lesson number as the subject saying you are done.
  • ***************DO NOT PROCEED Assignments not updated after this point ****************
  • Lesson 21: Peer Review and Final Touches NOT ASSIGNED
  • Post-Project TestDUE November

Oct 28

Quarter 1 Posttest

  • Take the postest in Google Classroom.
  • Must be done at school.
  • Do not look up answers.
  • This will also count as your Quarter 2 Pretest.

Aug 21

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
    • Complete all activities in Lesson 1.
    • You are only completing one of the activities in Lessons 2-5.
    • 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 October 11
    • Step 9, only complete A, B, C
    • 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 October 18
    • Only Complete Lessons 1-6
    • 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 October 30
    • Step 1, SKIP
    • Step 2 This should be a continuation from previous activities. You can and should copy your code from those lessons.
    • Step 3, SKIP.
    • When you are done, send me an email with the lesson number (Code Lesson 14) as the subject saying you are done.
    • Example 1 Page
    • Example 2 Page

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