London | 26-ITP-Jan | Oussama Mouggal | Sprint 1| Wireframe by Oussama-Mouggal · Pull Request #1005 · CodeYourFuture/Module-Onboarding

Oussama-Mouggal · 2026-01-21T14:25:22Z

Self checklist

I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
My changes meet the requirements of the task
I have tested my changes
My changes follow the style guide

Changelist

Worked on the wireframe assignment using html and css for styling the page.

Questions

I have deleted my old onboarding repo and created this new one because I confused myself working of different branches of the project.

…thetics

netlify · 2026-01-21T14:25:29Z

❌ Deploy Preview for cyf-onboarding-module failed. Why did it fail? →

Name	Link
🔨 Latest commit	`ba65d30`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/697fdcb411d4f30008a41e2c

Copilot

Pull request overview

This PR completes the wireframe assignment by replacing placeholder content with meaningful articles about development topics (Readme files, wireframes, and Git branches) and styling the footer with a fixed position and custom colors.

Changes:

Updated HTML content with three articles covering development-related topics
Enhanced footer styling with fixed positioning, background color, and full width
Replaced external image sources for article illustrations

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 9 comments.

File	Description
Wireframe/index.html	Replaced placeholder content with three complete articles about README files, wireframes, and Git branches; updated header and footer text
Wireframe/style.css	Added footer styling properties including fixed positioning, width, background color, and text color

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-21T14:28:31Z

+        <h2>What is the purpose of a wireframe?
+        </h2>


The closing h2 tag is on a separate line, which is inconsistent with the formatting of other h2 elements in the file (see line 19 and line 39).

Copilot · 2026-01-21T14:28:31Z

+        <h2>What is a branch in Git?
+        </h2>


The closing h2 tag is on a separate line, which is inconsistent with the formatting of other h2 elements in the file (see line 19).

Copilot · 2026-01-21T14:28:32Z

  position: fixed;
+  left: 0;
  bottom: 0;
+  width: 100%;
+  background-color: #4b3a3a;
+  color: white;
  text-align: center;


The fixed positioning of the footer combined with width: 100% and bottom: 0 will cause the footer to overlay content at the bottom of the page. The main element has bottom margin (calc(var(--space) * 4)), but this may not be sufficient to prevent content from being hidden under the fixed footer. Consider adding padding-bottom to the body or adjusting the main margin to account for the footer height.

Copilot · 2026-01-21T14:28:32Z

+          installation instructions, usage guidelines, and contribution
+          protocols.
+        </p>
+        <a href="">Read more</a>


The anchor tags have empty href attributes, which will cause the links to reload the current page instead of navigating to intended destinations. Either provide valid URLs or use href="#" if these are placeholder links for future implementation.

Copilot · 2026-01-21T14:28:32Z

+        <p>
+          The purpose of a wireframe is to provide a visual guide that represents the skeletal framework of a website or application, helping to plan layout and functionality.
+        </p>
+        <a href="">Read more</a>


The anchor tags have empty href attributes, which will cause the links to reload the current page instead of navigating to intended destinations. Either provide valid URLs or use href="#" if these are placeholder links for future implementation.

Copilot · 2026-01-21T14:28:33Z

+  left: 0;
  bottom: 0;
+  width: 100%;
+  background-color: #4b3a3a;


The hardcoded color value #4b3a3a doesn't follow the design system established in the CSS file. Consider using CSS custom properties (like --ink or --paper) defined in the :root selector to maintain consistency with the design palette.

Copilot · 2026-01-21T14:28:33Z

  bottom: 0;
+  width: 100%;
+  background-color: #4b3a3a;
+  color: white;


The hardcoded color "white" doesn't follow the design system established in the CSS file. Consider using CSS custom properties (like --paper) defined in the :root selector to maintain consistency with the design palette.

Copilot · 2026-01-21T14:28:33Z

+        <p>
+          A branch in Git is a separate line of development that allows multiple people to work on different features or fixes simultaneously without affecting the main codebase.
        </p>
        <a href="">Read more</a>


The anchor tags have empty href attributes, which will cause the links to reload the current page instead of navigating to intended destinations. Either provide valid URLs or use href="#" if these are placeholder links for future implementation.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Oussama-Mouggal · 2026-01-21T14:34:44Z

@copilot open a new pull request to apply changes based on the comments in this thread

…rces

jenny-alexander · 2026-01-29T05:27:02Z

Hi @Oussama-Mouggal - thanks for creating this PR for your wireframe exercise. I reviewed your code and everything looks well done.

One minor fix needed:

Can you review the wireframe and see where the 'title' and 'short description' should be aligned?

I see you requested a review from Copilot. We discourage trainees from using Copilot for PR reviews. Here are some reasons why:
- a CYF volunteer reviewer will ask questions to get you thinking about how you can improve your code. Copilot tells you exactly what to change and this doesn't foster growth as a new developer
- Copilot makes mistakes and as a new developer you might not be able to see these mistakes yet.
- PR reviews between trainees and mentors helps to build community within CYF by learning and discussing together 🙂

We do encourage trainees to use AI (chatGPT, claude, copilot) on their own, while working on CYF exercises. AI can help you find typos, suggest improvements, explain a concept.

…me instructions

Oussama-Mouggal · 2026-01-30T16:08:23Z

Thank you very much, Jenny, for your feedback. I centred the title to match the README page example. Initially, I wasn’t sure about applying Copilot’s suggestions, but after pushing the PR I saw that it recommended some improvements, so I accepted them. However, the original code I uploaded was entirely my own. I did the same for my other formcontrols PR, I will try to undo the suggested changes by copilot. Thank you

github-actions · 2026-01-30T16:08:55Z

The changed files in this PR don't match what is expected for this task.

Please check that you committed the right files for the task, and that there are no accidentally committed files from other sprints.

Please review the changed files tab at the top of the page, we are only expecting changes in this directory: ^Wireframe/

If this PR is not coursework, please add the NotCoursework label (and message on Slack in #cyf-curriculum or it will probably not be noticed).

If this PR needs reviewed, please add the 'Needs Review' label to this PR after you have resolved the issues listed above.

jenny-alexander · 2026-01-31T02:14:53Z

Thank you very much, Jenny, for your feedback. I centred the title to match the README page example. Initially, I wasn’t sure about applying Copilot’s suggestions, but after pushing the PR I saw that it recommended some improvements, so I accepted them. However, the original code I uploaded was entirely my own. I did the same for my other formcontrols PR, I will try to undo the suggested changes by copilot. Thank you

Hi @Oussama-Mouggal - thank you for implementing the suggestion I made to improve your webpage. I that the title and description are nicely centered now.
No problem about Copilot. I figured you didn't know that it's best to leave your PR for a mentor to review. Thanks for your understanding. 🙂

Have you noticed the git action message that is displayed multiple times in your PR?
If you read through the message, it's telling you that you have some files in your PR that shouldn't be there:
"Please review the changed files tab at the top of the page, we are only expecting changes in this directory: ^Wireframe/"
Can you take a look at the files in your PR and ensure only files for the Wireframe exercises are included?
⬇️

jenny-alexander · 2026-02-02T04:51:22Z

@Oussama-Mouggal The reason the PR's GitHub Actions are failing is because there are files in this PR that belong to a different exercise (form controls). Only files pertaining to the wireframe exercise should be included in this PR.
Can you have a look?

Oussama-Mouggal · 2026-02-02T12:06:31Z

Hello Jenny. Thanks for your message. I've just noticed that I messed up the file structure and this maybe be causing issue because I've cloned the repo inside the actual original repo. So, I'll have to delete this whole repo and start from scratch again. Thanks for your understanding.

Oussama-Mouggal added 6 commits January 21, 2026 13:54

modified the header

0a56ce9

created the first wireframe using html

ba2adca

created the seconde wireframe and add urls

f35b9aa

added footer

286e5db

fix: update footer styles for better visibility and layout

d7062c1

fix: update image source and footer background color for improved aes…

1833cd4

…thetics

Copilot AI review requested due to automatic review settings January 21, 2026 14:25

Oussama-Mouggal added 📅 Sprint 1 Assigned during Sprint 1 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Onboarding The name of the module. labels Jan 21, 2026

Copilot started reviewing on behalf of Oussama-Mouggal January 21, 2026 14:25 View session

Copilot AI reviewed Jan 21, 2026

View reviewed changes

Update Wireframe/index.html

805dea8

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix: update "Read more" links for articles to point to relevant resou…

1ea6b67

…rces

Oussama-Mouggal mentioned this pull request Jan 28, 2026

26-Jan-ITP | Onboarding | Oussama Mouggal Oussama-Mouggal/My-Coursework-Planner#50

Open

jenny-alexander self-requested a review January 28, 2026 14:05

jenny-alexander added Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 28, 2026

jenny-alexander added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels Jan 29, 2026

fix: correct header alignment by adding center tags to match the read…

9d26811

…me instructions

Oussama-Mouggal added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 30, 2026

github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 30, 2026

fix: simplify header alignment by removing unnecessary center tags

69792fe

fix: correct footer text for improved readability

ba65d30

Oussama-Mouggal closed this by deleting the head repository Feb 2, 2026

Uh oh!

Conversation

Oussama-Mouggal commented Jan 21, 2026

Changelist

Questions

Uh oh!

netlify Bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for cyf-onboarding-module failed. Why did it fail? →

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Oussama-Mouggal commented Jan 21, 2026

Uh oh!

jenny-alexander commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Oussama-Mouggal commented Jan 30, 2026

Uh oh!

github-actions Bot commented Jan 30, 2026

Uh oh!

jenny-alexander commented Jan 31, 2026

Uh oh!

jenny-alexander commented Feb 2, 2026

Uh oh!

Oussama-Mouggal commented Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Jan 21, 2026 •

edited

Loading

jenny-alexander commented Jan 29, 2026 •

edited

Loading