Front-End Web Development Assignment

Understanding the C.R.A.P. Design Principles

The acronym C.R.A.P. stands for Contrast, Repetition, Alignment, and Proximity. These four principles help designers create visually appealing and easy‑to‑navigate layouts.

Alignment: Guiding the Viewer’s Eye

Among the four principles, Alignment specifically addresses the arrangement of elements along common edges or baselines. By aligning text, images, and navigation items, you create a clear visual hierarchy that naturally guides the viewer’s eye from the most important element to supporting content.

• Use left‑aligned text for readability.
• Align icons and buttons to a grid for consistency.
• Group related navigation links along a horizontal or vertical line.

Applying alignment improves usability and reduces cognitive load, which is essential for front‑end web development.

Semantic HTML5 Elements for Navigation

HTML5 introduced several semantic elements that describe the purpose of page sections. Choosing the right element enhances accessibility, SEO, and maintainability.

The <nav> Element

The <nav> element is specifically designed to contain a set of navigation links. It signals to screen readers and search engines that the enclosed links form the primary navigation for the site.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Other elements such as <section>, <article>, and <aside> serve different purposes and should not be used for main navigation.

Optimizing Images for Web Performance

Large image files can dramatically slow page load times, negatively affecting user experience and search‑engine rankings. The assignment specifies a maximum image size of 800 KB.

Steps to Reduce Image Size

• Resize the image to the exact dimensions needed on the page.
• Choose an appropriate format (JPEG for photographs, PNG for graphics with transparency).
• Compress the image using tools like ImageOptim, TinyPNG, or the mozjpeg library.
• Verify the final file size is under 800 KB before uploading.

Compressing the image, rather than splitting it into tiles or leaving it unchanged, meets the assignment requirements while preserving visual quality.

HTML5 Self‑Closing Tags and Validation

HTML5 treats certain elements as void elements, meaning they cannot have closing tags. The <img> tag is one of these void elements.

Correct Syntax for <img>

To satisfy the validator, write the tag as a self‑closing element:

<img src="photo.jpg" alt="Descriptive text" />

Adding a separate closing tag (</img>) or replacing it with a <picture> element when not needed will cause validation errors. Browsers may render the image despite the error, but clean code ensures cross‑browser consistency and better SEO.

Efficient CSS Selectors for Heading Styles

When you want to apply a single font family to all heading levels, the most concise selector targets each heading element directly.

Best Practice Selector

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
}

This selector avoids unnecessary specificity and reduces the amount of CSS you need to maintain. Using a class on every heading or limiting the rule to a specific container would increase the stylesheet size and complicate future updates.

Writing a Strong Project Rationale

In the planning template, the rationale explains why a particular sustainability topic was chosen. A well‑crafted paragraph should cover personal interest, relevance to the course, and potential impact.

Key Elements of an Effective Rationale

• Personal connection: Describe your motivation or experience with the topic.
• Contextual relevance: Explain how the topic aligns with course objectives.
• Impact potential: Highlight expected outcomes or benefits of addressing the issue.

Using a paragraph rather than a bullet list or image ensures the narrative is clear and searchable, which improves both readability and SEO.

CSS Pseudo‑Classes for Link States

CSS provides pseudo‑classes to style links based on user interaction. To change a link’s appearance after it has been visited, use the :visited pseudo‑class.

Example Usage

a:visited {
  color: #6b8e23; /* Olive drab for visited links */
}

Other pseudo‑classes such as :hover, :focus, and :active serve different interaction states and should be used accordingly.

Late Submission Policy and Grading Impact

University policies often include a penalty for late submissions. For this assignment, a 50 % deduction applies only when the submission is late without an approved leave of absence (LOA).

Scenario: Medical LOA

If a student submits one day late due to a documented medical LOA, the policy states that only the standard late‑submission penalty applies. The student can still earn marks for the work completed, but the 50 % reduction is not waived.

• Submit the assignment with proper documentation.
• Expect a 50 % deduction on the total possible points.
• Grades are still awarded based on the quality of the work.

Putting It All Together: A Mini‑Project Checklist

Use the following checklist to ensure your front‑end assignment meets all technical and pedagogical requirements.

1. Apply the C.R.A.P. principles, especially Alignment, to create a clean layout.
2. Wrap navigation links inside a <nav> element.
3. Compress all images to under 800 KB before uploading.
4. Validate HTML; ensure <img> tags are self‑closed.
5. Use a single CSS rule for all heading levels: h1, h2, h3, h4, h5, h6.
6. Write a concise paragraph explaining the sustainability topic rationale.
7. Style visited links with the :visited pseudo‑class.
8. If submitting late with a medical LOA, attach documentation and understand the 50 % penalty.

Following this checklist not only helps you achieve a high grade but also reinforces best practices that are valued by employers and search engines alike.