01 / The Challenge

Throughout the first seven weeks, we have practiced writing HTML, organizing content, creating links and lists, adding images, choosing colors, styling typography, and controlling spacing. Your midterm is an opportunity to demonstrate that you can use these skills together to communicate an idea visually.

You are not expected to be a professional web designer yet. I am looking for a thoughtful, organized, functional page that shows your understanding of the techniques we have covered and your willingness to make design decisions independently.

02 / Choose Your Topic

Your website can focus on almost any subject that gives you something interesting to communicate. Choose a topic that makes it easier to develop a clear visual identity and meaningful content.

Tip: Keep the subject manageable. One strong page with clear sections is better than a huge idea with unfinished content.

03 / Required Website Elements

Your finished page must include all of the following. Use this list to plan your work before you start coding.

• A clear title and introduction. Use one main heading and a short introduction that tells visitors what the page is about.
• At least three content sections. Organize the page into distinct areas with meaningful headings.
• Working navigation links. Include at least three links that move visitors to sections of your own page using in-page anchors.
• At least two relevant images. Use images that support your topic, and provide descriptive alt text.
• Lists or organized information. Include at least one ordered or unordered list where it makes sense.
• External links. Include at least two useful links to outside websites or resources.
• A consistent color palette. Choose a small set of colors that work together and support your subject.
• Intentional typography. Establish a readable relationship between headings, body text, and any supporting text.
• Thoughtful spacing. Use margins, padding, and borders where appropriate to create separation and visual hierarchy.
• A footer. Finish the page with a closing detail, such as a credit, short note, or copyright line.

04 / Plan Before You Code

Do not begin by randomly adding code. Take a little time to decide what your page needs to communicate and how a visitor will move through it.

1. Write down your idea.
   In two or three sentences, explain the subject of your page, who might visit it, and what you want them to learn or experience.
2. Sketch a simple wireframe.
   Draw the page as a series of rectangles: title area, navigation, content sections, images, and footer. Your sketch does not need to be beautiful; it needs to show the order of information.
3. Choose your visual direction.
   Select two or three main colors and one or two typefaces. Decide whether your page should feel playful, editorial, minimal, energetic, elegant, or something else.
4. Gather your content.
   Prepare your headings, paragraphs, links, and images before you build. Make sure you have permission to use the images and provide credit when appropriate.
5. Build the HTML first.
   Create the content and page sections. Check that the headings, links, lists, and images make sense before concentrating on visual styling.
6. Apply your CSS.
   Style your colors, typography, widths, margins, padding, and borders. Make deliberate changes and preview them as you work.
7. Test and refine.
   Click every link, check every image, correct mistakes, and review the page at different browser widths.

05 / A Simple Starting Structure

This example is a starting point, not a finished design. Adapt the structure to your own topic, replace the sample text, and write the CSS that expresses your visual direction.

<header>
  <h1>Your Website Title</h1>
  <p>A short introduction to your topic.</p>
</header>

<nav>
  <a href="#about">About</a>
  <a href="#gallery">Gallery</a>
  <a href="#resources">Resources</a>
</nav>

<main>
  <section id="about">
    <h2>About the Subject</h2>
    <p>Introduce your subject here.</p>
  </section>

  <section id="gallery">
    <h2>Selected Images</h2>
    <img src="image.jpg"
         alt="Describe what the image shows">
  </section>

  <section id="resources">
    <h2>Learn More</h2>
    <p>Add links and useful resources here.</p>
  </section>
</main>

<footer>
  <p>Created by Your Name</p>
</footer>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f3f1eb;
  color: #202638;
}

header, main, footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

nav {
  padding: 16px 24px;
  background-color: #202638;
}

nav a {
  color: white;
  margin-right: 16px;
}

section {
  margin: 24px 0;
  padding: 24px;
  background-color: white;
  border-radius: 12px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Use the starter structure as a reference while you work. You are encouraged to change the layout, colors, type, and spacing to match your own concept. You do not need to copy this example exactly.

06 / What You Should Demonstrate

07 / Midterm Schedule and Milestones

Use these milestones to manage your time. You do not need to complete everything in one sitting.

1. Milestone 1 — Concept and wireframe
   Choose your topic, identify your intended audience, sketch the page layout, and select your images.
2. Milestone 2 — HTML content
   Build the page structure and add your headings, paragraphs, lists, images, navigation, and links. Test the navigation before moving on.
3. Milestone 3 — CSS design
   Apply your color palette, typography, spacing, borders, and other styling. Refine the page until it feels cohesive.
4. Milestone 4 — Quality check and submission
   Test the entire page, review the requirements checklist, capture a screenshot of the finished page, and submit your work with a brief reflection.

08 / How Your Midterm Will Be Graded

Your midterm is worth 20% of your final course grade. The project itself will be evaluated using the following rubric.

09 / Final Quality Check

Before submitting, go through the checklist below. Treat it like a preflight check before sending a design to a client.

• My website has a clear title and introduction.
• I have at least three distinct content sections.
• My navigation links lead to the correct sections.
• I have at least two relevant images with descriptive alt text.
• I included at least one list and two external links.
• My color palette and typography are consistent.
• I used margins and padding to create intentional spacing.
• My text is readable, and I corrected spelling and grammar errors.
• I tested my links and checked that my images load.
• I previewed the page at a narrower browser width and corrected obvious layout problems.
• I saved my work, copied the correct project link, and captured a screenshot.
• I completed my written reflection.

10 / Your Reflection

Along with your website, submit a short reflection of approximately 150–250 words. Use the questions below to guide your response.

• What is the subject of your website, and who did you design it for?
• What choices did you make with color, typography, imagery, and spacing? Why?
• Which HTML or CSS technique did you use most successfully?
• What was the most challenging part of building the page, and how did you address it?
• If you had another day to work on the project, what would you improve?

11 / Submission Instructions

Submit the following items through the course’s designated submission area in D2L:

• Your CodePen project link: Make sure it opens the finished midterm website.
• A screenshot: Capture the finished page so your overall layout and visual design are visible.
• Your reflection: Submit your 150–250-word response as text or in the requested document format.

Before you submit, check that your project is saved and that your shared link is accessible. If you are unsure how to share your CodePen correctly, revisit the instructions provided in class.