ahandrewh teaches IAT-339web design & development

Coding quiz exercise (due November 25)

On this page:

Introduction

To help prepare for the coding quiz we have a sample quiz for you to complete. AI use will not be permitted during the coding quiz.

This quiz is completed in two parts:

  1. Explaining methods by which you will fix up the code to make it semantic and accessible HTML and CSS. You will be graded on your ability to explain why the changes you are making are important.
  2. Make the changes. As you describe in the first section create the improved version of the design as you have specified.

Instructions

Please remember to review:

Part A

Explaining methods by which you will fix up the code to make it semantic and accessible HTML and CSS.

For each part you are fixing up include an explanation of why you are proposing this change reproduction works. For example: The font-size property is set in... which is an issue because... changing it is preferable because ... etc.

This description and explanation must be detailed enough that you are making an effective case for your changes in the context of semantic and accessible code.

HTML for the sample quiz
<!DOCTYPE html>
<html>
<head>
<title>Sample Quiz</title>
<meta charset="utf-8">
<link rel="stylesheet" href="button.css">
</head>
<body>
<header>
<h2>Button to new page</h2><br>
<nav>
<form action="nextpage.html">
<button aria-label="Go to the next page" class="nav-button" onclick="window.location.href='nextpage.html'">
Go to Next Page
</button>
</form>
</nav>
</header>
</body>
</html>
CSS for the sample quiz
body {
font-family: sans-serif;
}

.nav-button {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 6px;
}

.nav-button:hover, .nav-button:focus {
opacity: 0.9;
outline: none;
}

Part B

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

Submission

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

Your submission is due before 4:30pm on November 25.

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.