Manchester | ITP - Jan - 2026 | Mehroz Munir | Sprint 1 | Wireframe to Web Code

[MehrozMunir]

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 have followed the wireframe design and the code already given in the wireframe folder to create three sections just like in wireframe. The display style of the main tag was set to grid to create sections. The three sections were created using semantic tag

in HTML and the first child was set the value of span 2 to cover the whole screen just like shown in the wireframe.
Placeholder images were changed on the page according to the sections. The footer was overlaying and fixed by removing its fixed position in CSS file.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	3315441
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/697118f907c7a30008721da7
😎 Deploy Preview	https://deploy-preview-991--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: 91 (🟢 up 5 from production) PWA: - View the detailed breakdown and full score reports

---

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

[cjyuan]

1

One of the acceptance criteria, "The page footer is fixed to the bottom of the viewport", has not yet been satisfied. Can you make the necessary change? (Suggestion: Ask ChatGPT what that requirement means).

Note: Currently there is no footer on your page.

2

When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. You're off to a solid start, but the main purpose of implementing a wireframe is to translate structure and functionality, not final visual design. Visual design is usually handled by UI/graphic designers after the wireframe phase. To better align with the wireframe, here are a few areas where the layout and appearance could be refined:

• Center the TITLE and the SUBTITLE on the page
• Make the images span the full width of their respective container

Suggestion

After you have made all the changes, try asking AI for possible improvements in terms of semantic, accessibility, typo, and consistency.
It can often help us catch errors, improve consistency, and reinforce best practices.

[cjyuan]

• The footer is not yet fixed at the bottom of the viewport. (Can you address this requirement?)

Your code looks great. If you want to further improve your code, you can try asking AI. When I asked ChatGPT to check for typo and consistency, it gave some good suggestions for possible improvements (minor improvements).

[MehrozMunir]

Sorry, I hadn’t fully understood what “fixed footer” meant earlier, but it should now be working correctly. I’ve also made some improvements to the code. Thanks for your patience and for all the helpful feedback.

[cjyuan]

Changes look good. Well done.

[cjyuan]

You may want to use 26-ITP-Jan as your cohort name in future PRs.