West Midlands | Jan-2026 | Arunkumar Akilan | Sprint 1 | Wireframe to Web Code

[arunkumarakilan]

Self checklist

• I have titled my PR with the correct format
• My changes meet the requirements of the task
• I have tested my changes locally in the browser
• My changes follow the CYF style guide

---

Changelist

• Converted the provided wireframe into a semantic HTML webpage
• Added a header with a page title and descriptive subtitle
• Created three articles explaining:
  • Purpose of a Wireframe
  • Purpose of a README file
  • What a Git branch is
• Styled the layout using CSS Grid to match the wireframe:
  • First article full width
  • Second and third articles displayed side by side
• Added a footer with navigation links and contact information
• Ensured the page scores 100 for Accessibility using Lighthouse

---

Questions

• I would appreciate feedback on my CSS Grid implementation.
• Any suggestions to further improve accessibility or layout consistency are welcome.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	0cbf4b1
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6979d2dc12376800083b0244
😎 Deploy Preview	https://deploy-preview-995--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

---

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

[cjyuan]

The content in the PR Description is not yet properly formatted using the Markdown syntax. Can you update its format accordingly?

To learn the Markdown syntax, please refer to
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

[cjyuan]

• 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. To better align with the wireframe, can you center the PAGE TITLE and the PAGE SUBTITLE (the part that replace "A SHORT DESCRIPTION")?

• (Optional change) If you are up to some challenge to further improve the layout, leave more space above and below the border of READ ME link, and keep the spacing consistent regardless of the amount of content in the articles.

[cjyuan]

Code looks good to me.

When it comes to CSS, I am afraid AI can probably help you more than I do. Have you tried asking AI about possible improvements on your CSS code?

[cjyuan]

There are two main selectors (lines 57 and 95). It is better to merge them into one. (I know you didn't write them, but that's one possible improvement you can easily do).

There are also a few selectors that are related to main (lines 121-128). It is better to place all the selectors related to main element together.

[illicitonion]

Closing PR because the January ITP run has finished. Feel free to re-open if you're still working on it.