ah teaches web design & development (More Code than Design lecture)

More Code than Design

Lecture outline

Thinking further about web development. Lecture slides will be made available on the day of the lecture (November 7).

In preparation for lecture...

Please close up any laptops, cellphones, Oculus Rifts, Xbox 360's and other 'beep-boop' devices.

Coding Quiz

We will be holding the coding quiz during our lecture time on November 14.

For the quiz you will be presented with a layout that you have to replicate using HTML and CSS. There are two parts to this quiz:

1. Text describing your two methods of reproducing the design and explanations of how and why they work (worth 7/10 marks).
2. Recreating the layout using one of your methods using HTML and CSS (worth 3/10 marks).

Coding Quiz

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 will be worth 7 of 10 points. Part marks are possible.

Coding Quiz

Part B

Recreating the layout using one of the methods you have described using HTML and CSS.

This will be worth 3 of 10 points. Part marks are possible.

What do I review for the quiz?

I highly recommend reviewing anything we have covered with regards to HTML markup, CSS styling and layout and developer/debugging tools in preparation for the quiz.

Coding quiz rules and requirements

• You will need your student ID to participate.
• You will need a laptop to complete the coding quiz.
• You may use the internet to look things up during the quiz.
• You may use the code validator during the quiz.
• AI use will not be permitted.
• You are not permitted to discuss the quiz with anyone inside or outside the classroom.

What if I cannot attend?

If you have any concerns about being able to attend, please contact Andrew before the lecture. We will arrange another time to have you complete the quiz.

For today's code tutorial

We will be covering code pre-processing, for which we will need prepros.io

Once you have that installed, take a look at pugjs.org and sass-lang.com