Return To CS 100 Home

Summary of assignment 1 2022

Here is a quick summary and suggested steps for assignment 1:

The goal of the first assignment is to create the pages and come up with a design for a web journal that will answer five questions. You do not need to add style or answer the questions - that is done in assignment 2
  1. Make sure you have all the files
    For this assignment, you should have a total of 9 html pages.
    • index.html, practice.html, design.html, cs100.html are provided
    • You need to create page1.html, page2.html, page3.html, page4.html, page5.html. Creating pages is explained in HTML basics in week two
    • There will also be a stylesheet named default.css. You do not need to do anything with this page yet if you don't want to
  2. Edit your index.html page
    • Change the text on the page. Change the name "John Smith" to your own name. Write a short paragraph introducing yourself somewhere on the page
    • Change the image on the page to one that reflects you. It could be a picture of you, a picture of your pet, a meme, ect. Images are taught in week 3
    • Update the unordered list (ul) on the page to include a link to design.html. The other two links are already there in an unordered list format. Lists are taught in week 2. Links are taught in week 3
    • You do not need to worry about adding colour or style to this page. That is part of assignment 2
  3. On each of page1.html, page2.html, page3.html, ect. Pick one question from the list provided in the assignment and write the prompt on the page. One prompt per page for a total of five. You do not need to answer the prompts yet, that is done in assignment 2.
  4. Edit the cs100.html page
    The cs100.html page acts as a table of contents to give the marker access to the rest of your site.
    • Write a short paragraph about what you are doing in this assignment, such as creating a web journal to answer five questions
    • Create an ordered list (ol) that you will turn into links to the pages. The text is intended to be the questions you are picking to answer on that page. Ordered lists are taught in week 2
    • Modify your ordered list so that each of the questions links to one of the pages that you will answer it on (page1.html, page2.html, ect). Links are taught in week 3
  5. Create a design that you will use in assignment 2
    • Create prototype designs for what your index.html page, cs100.html page, and your answer pages (page 1 to 5) will look like (3 images total)
      A prototype is a low quality image that is used to plan what colours, positioning, and other style decisions you want to use are ahead of time so that you approach the project with a plan. For example, the following prototypes were used to design this website:


      We strongly recommend you keep your prototypes simpler than these designs. Positioning items on an HTML page can get very complicated very quickly.
    • Add the images to the page. Adding images is taught in week 3
    • Write one paragraph that describes how you did the prototyping and overall decisions you made, such as what materials/program you used, colour schemes, ect
    • Alongside each image, write a short explanation of the decisions you made specific to that page (one for each image, 3 total)

Remember that all files need to be uploaded into your repl project for assignment one for the marker to see them, including the images. You can upload files by dragging them into the files tab on the left