ahandrewh teaches IAT-339web design & development

Coding quiz exercise (due July 12)

Introduction

To help prepare for the coding quiz we have a sample quiz for you to complete.

This quiz is completed in two parts:

  1. Explaining methods to reproduce the design. You will provide an explanation of two ways you could reproduce this design using only HTML and CSS.
  2. Use one method you explained to reproduce the design. Using one of the methods in the first part, reproduce the design itself.

This gives you a sample of what pieces of the design for replication may look like. The quiz itself will contain a more complex layout. Please remember to review:

  • CSS layout
  • CSS positioning
  • CSS sizing units

The box below indicates the edges of a browser window.

In the illustration above are three boxes that you will be expected to reproduce. You only need to reproduce the boxes and how they behave when the browser window (the container for the boxes) is resized. The 'Play resizing animation' button allows you to see what happens when the window is resized.

Do not reproduce the text (labels).

Box A
  • RGB as the background color.
  • (of the browser window)
  • (of the browser window)
Box B
  • RGB as the background color.
  • (of the browser window)
  • (of the browser window)
Box C
  • RGB as the background color.
  • (of the browser window)
  • (of the browser window)

Part A

Explain two methods of reproducing the design above using HTML and CSS.

For each method, include:

  • Describe how you would reproduce the design. For example: I would use the display: grid property in combination with ... etc.
  • Explain how and why your reproduction works. For example: The display: grid property will allow the layout to ... etc.

This description and explanation must be detailed enough that we could reproduce the design based on your description and explanation.

Part B

Use one method you explained in Part A to reproduce the design using HTML and CSS.

Make sure that this reproduction includes:

  • The size of the boxes as specified
  • The background colour of the boxes as specified
  • The responsiveness of the boxes as show by the animation

Do not reproduce the text (labels).

Submission

Please submit your deliverables for Part A & B in one ZIP file.

Your submission is due before lecture on July 12.

Exercise rules reminder

Please remember that the exercise rules still apply:

  1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
  2. Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
  3. If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.