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

Google Meet

Google meet-real time help (Not an assignment)

Classes will be streamed using the Meet link in Google Classroom. In addition, a video of the class will be posted on this page for notes, explanations, demonstrations etc. Class Meet: go to Google Classroom.

Aug 29

DUE: Your home page

Aug 24-25

Extensions to install for VSC

  • HTML Hint
  • Auto close tag
  • HTML CSS support
  • Live Server
  • Javascript ES code snippets
  • CSS peek
  • Path Intelligence

Start your own site

  • Open Video Studio Code and then click File and Open Folder.
  • Open your index page and add the code below.
  • For the image, find your own image and save it to your assets folder with an appropriate name.
    Code for body

Build your index page in Visual Studio Code

Aug 23

Notes on code for your home page

Start your own site

  • Always use lower case file names without spaces or special characters. Underscore_ and dash- are OK.
  • Go to File Explorer. Navigate to your network folder and create the folders below for your site.
  • Create a folder called mysite within the new folder create another new folder named assets. Your folder will look like the one below.

Build your index page in Visual Studio Code

Below is a a preview of the page and the code.


Objective: Create pages using html and CSS.

  • This will be completed step-by-step.
  • Visual Studio Code can be found under Start.
  • Save the file in the folder with your name in your mysite folder as index.html.
  • The following code is the two first lines of each of your pages. Please try to match the lines of code that I am using.
  • <!DOCTYPE html>
    <html lang="en-US">
  • Type
  • Type
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • Type
    <title>The name of your Page</title>
  • Copy and paste the following code.

    Style Code

  • Type
  • Type

Aug 22

Course requirements/expectations

Digital Assignment:

  • Complete registration for websites below.
  • Student Syllabus Verification

Join Google Classroom

Join Quizlet

Quizlet Digital Assignment:

  • You must complete the Learn section before taking the test.
  • This means to receive a grade for the test you must show that you covered ALL of the items in the Learn area. All items must all be listed under Familiar or Known Well. Or, put another way, there must be 0 in Remaining.
  • Complete the form in Google Classroom when you are done with all of it so I can check your score.
  • DO NOT submit this until you have completed the Learn Section, meaning you have in 0 Remaining.


    Quizlet completed areas

  • quizlet grades

Join code.org

  1. This will be used later for Digital Learning.
  2. Create a Code.org account with your school email address. If you already have a Code.org account, skip this step.
  3. Visit this link to join your section: https://studio.code.org/join/KWDDZL Use you real name for your display name.
  4. Signing in with Personal Login
    1. Go to www.code.org and click the 'sign in' button.
    2. Sign in using the email and password you created.