Manchester | 26-ITP-May | Yee Man Tsang | Sprint 2 | Wireframe to Web Code by lintsang · Pull Request #1349 · CodeYourFuture/Module-Onboarding

lintsang · 2026-05-24T11:43:21Z

Learners, PR Template

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

I finished this exercise by updating the html and css files provided by following all requirements and wireframe.

netlify · 2026-05-24T11:43:25Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`746f7a9`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a1f1289a810c0000895c159
😎 Deploy Preview	https://deploy-preview-1349--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 86 (no change from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

LonMcGregor

Good start on this task. There are a few things left to have another look at - see my comments.

LonMcGregor · 2026-05-30T09:30:45Z

-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+    <div id="wrapper">


What is the purpose of this wrapper div?

Thanks for your reminder and it has been improved.

LonMcGregor · 2026-05-30T09:31:06Z

+      <main>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="" />


Should the alt attribute in these images be empty?

Thanks for your reminder and it has been modified.

LonMcGregor · 2026-05-30T09:31:37Z

-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <div id="wrapper">


What is this wrapper div here doing?

Thanks for your reminder and it has been improved.

LonMcGregor · 2026-05-30T09:31:59Z

-      </p>
+      <div id="wrapper">
+        <p>
+          By Lin Tsang. This webpage serves as a test environment. Some images and media displayed on this site are sourced from external websites for demonstrative and educational purposes. All copyrights, trademarks, and intellectual property regarding these images remain the property of their respective owners. https://iconscout.com/


Are you sure this footer is fixed to the bottom of the viewport?

Thanks for your reminder and it has been fixed.

…in and footer

LonMcGregor

Thanks. The rest of the issues are fixed now. But the footer is still not fixed to the bottom of the viewport. Can you find out what that means?
Also, the footer is now wider than the page so it creates an unnecessary scrollbar. Can you figure out why that happens and resolve it?

lintsang · 2026-06-02T07:11:03Z

Thanks. The rest of the issues are fixed now. But the footer is still not fixed to the bottom of the viewport. Can you find out what that means? Also, the footer is now wider than the page so it creates an unnecessary scrollbar. Can you figure out why that happens and resolve it?

Thanks for the comments! I have fixed the footer issue and hope it works.

LonMcGregor · 2026-06-02T12:18:14Z

The issue with the scrollbar is gone now, great!

There is still the other problem: Your footer is fixed to the bottom of the page right now. The viewport is the part of the screen that the browser shows, and we want to see the footer always visible at the bottom of the viewport (and ensuring you can scroll to see anything it might be hiding).

(Hint: To see an example of what this means, if you scroll this current github PR page down, you always see a header fixed to the top of the viewport. We want to achieve the same effect with the footer at the bottom)

lintsang · 2026-06-02T17:29:23Z

The issue with the scrollbar is gone now, great!

There is still the other problem: Your footer is fixed to the bottom of the page right now. The viewport is the part of the screen that the browser shows, and we want to see the footer always visible at the bottom of the viewport (and ensuring you can scroll to see anything it might be hiding).

(Hint: To see an example of what this means, if you scroll this current github PR page down, you always see a header fixed to the top of the viewport. We want to achieve the same effect with the footer at the bottom)

Thanks for your explanation. I understood and fixed it.

lintsang added 4 commits May 24, 2026 08:00

change the html and css to look same to wireframe

2af122a

add questions, answer and images

7dfbf5b

add links to each article

4466770

fine tune all interface to wireframe requirenment

dec48eb

lintsang added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 24, 2026

LonMcGregor reviewed May 30, 2026

View reviewed changes

LonMcGregor added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 30, 2026

lintsang added 2 commits May 31, 2026 15:49

remove all unneccessary div by simpliy adding css into the header, ma…

a57c081

…in and footer

add alt text to all images

e366ccd

lintsang added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 31, 2026

LonMcGregor reviewed Jun 1, 2026

View reviewed changes

LonMcGregor removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 1, 2026

lintsang added 2 commits June 1, 2026 19:54

Add breathing line in after every element in css

21d7708

fixed footer issue and undo checkbox in readme.md

c06f400

lintsang added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 2, 2026

LonMcGregor removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 2, 2026

lintsang added 3 commits June 2, 2026 18:23

fixed the footer at the page all the time

0d0fc95

Clean unneccesary space in line

10ff6b8

Final clean unnecessary space line

746f7a9

lintsang added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 2, 2026

Uh oh!

Conversation

lintsang commented May 24, 2026

Learners, PR Template

Changelist

Uh oh!

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

Uh oh!

✅ Deploy Preview for cyf-onboarding-module ready!

Uh oh!

LonMcGregor left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LonMcGregor left a comment

Choose a reason for hiding this comment

Uh oh!

lintsang commented Jun 2, 2026

Uh oh!

LonMcGregor commented Jun 2, 2026

Uh oh!

lintsang commented Jun 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented May 24, 2026 •

edited

Loading