Project 03 Tutorial | Step-by-Step Guide

Required Repository Directory Structure

username.github.io (Root Folder)

docs/ (Project Management Folder)

|_ scope.md

|_ plan.md

|_ retrospective.md

|_ about.html

|_ index.html

|_ README.md

|_ style.css

Note: The docs/ folder must contain the Markdown files, while the HTML and CSS stay in the root.

Phase 1: Setup & Documentation

Open your local repository folder in VS Code.

This is the username.github.io folder you used for Project 02.

Create a new folder named "docs".

Inside your project folder, create this directory for your planning files.

Add your 3 Planning Files into the docs folder.

Place scope.md, plan.md, and retrospective.md inside docs/.

Phase 2: Building the Site

Create index.html and about.html in the root folder.

Ensure these are outside the docs folder so GitHub Pages can find them.

Connect your pages with navigation links.

Add a link from about.html back to the home page (index.html), and a link from index.html to your other pages.

Create style.css and link it to BOTH pages.

Use the <link> tag in the <head> of both HTML files.

Use Semantic Tags in your HTML.

Include <header>, <nav>, <main>, and <footer>.

Phase 3: GitHub Narrative (The Grade)

Commit 1: Folder structure and docs.

"Setup docs folder with scope and plan."

Commit 2: HTML structure.

"Added index and about pages with navigation."

Commit 3: Styling and Final Polish.

"Applied final CSS styles and updated README."

Reminder

Commit history is 30% of your grade. Do not push all files at once!

Course Plan HTML Integration: FOR INSTRUCTOR ONLY!

<tr>
    <td>Module 08</td>
    <td>Project 03 Tutorial</td>
    <td><a href="CMPA_3301_COURSE_PLAN/CMPA_3301_PROJ_03_Tutorial.md" class="btn-link">View Tutorial</a></td>
</tr>