Sheffield | 26-ITP-Jan | Daniel Aderibigbe | Sprint 1 | Wireframe to Web Code

[Dan2Clouted]

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 built the wireframe webcode using semantic HTML and CSS grid layout, Added 3 articles and Achieved a 100 in Lighthouse Accessibility.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	68bbc57
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/69775c7027081e000805f9ca
😎 Deploy Preview	https://deploy-preview-950--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: 98 (🔴 down 2 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]

1

According to https://validator.w3.org/, there are errors in your code. Can you fix them?

2

It's ok to keep the ### Changelist header in the PR description.

3

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).

4

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 to better align with the wireframe, here are a few areas where the layout and appearance could be refined:

• Center the PAGE TITLE and the SHORT DESCRIPTION beneath the title
• Align the height of the images in the 2nd and 3rd articles

---

Optional change:
The spacing in the second article appears to be slightly different from that in the third. In particulars,

• The vertical gap before and after the article title
• The margin/padding size around the "Read More" link
  With the original CSS, this spacing issues appears to be affected by the content length. Can you modify the CSS code to make the spacing more consistent in all articles regardless of content length?

---

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.

[Dan2Clouted]

I’ve made the requested changes and pushed updates to the PR.

1. W3 Validator: Fixed the HTML validation issues.

2. Kept ### Changelist in the PR description.

3. Footer fixed to bottom: Updated the layout so the footer stays to the bottom.

4. Wireframe alignment: Centered the page title + short description, and aligned the image heights in the 2nd and 3rd articles.

[cjyuan]

Currently the page is not scrollable. If the viewport height is low, some of the content will not be visible. Can you make the page scrollable?

[Dan2Clouted]

Fixed the issues - The page is now scrollable.

[cjyuan]

Looks good. Well done.