ahandrewh teaches IAT-339web design & development

Coding quiz exercise (due November 14)

On this page:

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 two methods by which to replicate the provided layout using HTML and CSS. You will be graded on your ability to explain why the methods you describe will replicate the layout.
  2. Replicate the layout using HTML and CSS. As you describe in the first section replicate the layout using one of the methods you have described.

Instructions

Please remember to review:

The sample layout to replicate for this exercise should behave as the above.

Box A

  • 'Pink' background color.
  • 1/3 of the page width.
  • 1/2 of the page height.

Box B

  • 'Blue' background color.
  • 1/3 of the page width.
  • 1/4 of the page height.

Box C

  • 'Black' background color.
  • 1/4 of the page width.
  • 1/4 of the page height.

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 with...
  • Explain how and why your reproduction works. For example: The display: grid property will allow the layout to ... which is why .... will be sized ... etc.

This description and explanation must be detailed enough that we could reproduce the design based on your description and explanation. Using the same CSS layout property such as display: grid to make both methods work means you are not providing two separate methods.

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

Submission

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

Your submission is due before 8:30am on November 14.

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.