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

[arunkumarakilan]

#Self checklist

[x] I have titled my PR with
West Midlands | Jan-2026 | Arunkumar Akilan | Wireframe to Web Code

[x] My changes meet the requirements of the task

[x] I have tested my changes locally in the browser

[x] My changes follow the CYF style guide

##Changelist

Converted the provided wireframe into a semantic HTML webpage

Added header with page title and description

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 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 usage and overall semantic structure.

Any suggestions to further improve accessibility or layout consistency are welcome.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	f1416d5
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/696fa33217917c00080edf03
😎 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]

Can you improve the indentation of this code?

[cjyuan]

Line 13 can be better formatted as:

    <p>
       This page explains the basics of Git, the purpose of a README file, and how wireframes 
       help developers plan and structure a webpage before writing code. It gives a clear overview 
       of how these tools are used together in real-world web development.
    </p>

To understand why, you can ask AI these questions:

• How HTML treats multiple whitespace characters in text?
• What's the advantage of not writing a long paragraph of text in a single line in HTML?

VSCode's "Format Document" feature can help us format our code for better readability and consistency, including breaking a long line of text into shorter lines of text.
To use the feature, right-click inside the code editor and select the option.
Please note that if there are syntax errors in the code, the "Prettier" extension may not format HTML code properly.