Week 15 — Final Website Presentation and Portfolio Case Study

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Final portfolio website, code handoff, demonstration, reflection, peer critique

Project files and folder structure

Submit final-site/ with index.html, at least two additional meaningful pages, css/styles.css, assets/, README.txt, asset-credits.txt, and testing/.

Syntax to practice

Semantic HTML, CSS selectors/declarations, responsive layout, relative links, file organization, accessible interaction patterns.

Build it

Present a polished responsive site for a creative professional, small business, or organization. Explain design decisions, open the folder in Sublime Text to show its structure and one meaningful code section, and discuss testing and revisions.

Code along: Choose a final-project component and explain how its HTML and CSS work together.

Open in Sublime Text: final-site/index.html and css/styles.css

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

<section class="feature">
  <h2>Featured Project</h2>
  <p>A short description of the project's purpose.</p>
  <a href="work.html">Explore the project</a>
</section>

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: final-site/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Final Portfolio Project</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main>
    <section class="feature">
      <h1>Featured Project</h1>
      <p>A short description of the project's purpose.</p>
      <a href="work.html">Explore the project</a>
    </section>
  </main>
</body>
</html>

CSS file: final-site/css/styles.css

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #172033; }
.feature { max-width: 60rem; margin: 40px auto; padding: 2rem; background: #eef4ff; border-radius: 10px; }
.feature a { display: inline-block; padding: .75rem 1rem; background: #1d4ed8; color: white; border-radius: .4rem; text-decoration: none; }
@media (max-width: 600px) { .feature { margin: 20px; padding: 1rem; } }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Choose a component from your own site. Explain the HTML element, matching CSS selector, responsive behavior, and one revision you made after testing.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• final-site/index.html plus at least two additional meaningful HTML pages — three pages total, consistently navigable.
• final-site/css/styles.css — external stylesheet with responsive rules and consistent design.
• final-site/assets/ and asset-credits.txt — all local assets with credits.
• final-site/README.txt — purpose, audience, page list, folder map, preview/published URL, limitations.
• final-site/testing/ — mobile and desktop screenshots plus completed QA checklist.
• final-presentation.pdf — 5–7 slides on audience/problem, wireframe, visual system, final pages, responsive/accessibility checks, lessons learned.
• final-reflection.txt — 250–400 words on design choices, coding skills, feedback, and next improvements.

Submission checklist

• At least three meaningful pages; responsive and tested; assets credited; code explained; presentation and reflection included.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.