Cape Town | 2026-ITP-May | Juanita Nwachukwu | Sprint 2 | Wireframe to Web Code (2)

[Jay99-prog]

##Juanita | Wireframe PR 2

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 updated the webpage by replacing placeholder content with structured semantic HTML. I added three articles as required, each including an image, title, summary, and link. I improved accessibility by adding alt text to images and ensured the layout followed the wireframe requirements.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	435a587
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a26d5796b0bc900087b7fc0
😎 Deploy Preview	https://deploy-preview-1423--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
🤖 Make changes	Run an agent on this branch

---

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

[cjyuan]

• When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. To better match the wireframe, can you update the CSS to ensure

  • The page title and the text beneath it are centered on the page.
  • Articles 2 and 3 are placed side by side (with article 2 to appear on the left of article 3) beneath article 1
  • The footer content is centered
  • Article title is placed beneath the article image

• 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 AI what that requirement means).

[cjyuan]

Code is not yet consistently indented.

Could you look up the benefits of using a code formatter? I strongly recommend following this guide
to enable VS Code's "Format on Save" option or use its "Format Document" command. This will help ensure your code is consistently formatted and easier to read and maintain.

[Jay99-prog]

I cleaned up the indentation throughout the HTML and CSS files to make the code more consistent and easier to read as suggested. But for now, I am currently setting the code to Format on save.

Thank you for this tip

[Jay99-prog]

I have updated the HTML and CSS to match the wireframe closely by centring the header text, fixing the grid layout so Article 1 spans full width with Articles 2 and 3 side by side underneath, placing each article title below its image, centring the footer text, and ensuring the footer stays fixed at the bottom of the viewport.

[cjyuan]

Changes look good.

• The layout would match the wireframe better if the height of the image in articles 2 and 3 can align.

• Your formatting is already very good, but they do not look like they are formatted by Prettier. There are good reason why enabling "Format on save" is important. (So please ensure you enabled the option in VS Code).

[Jay99-prog]

Hi CY,
thanks for the feedback. I struggled to install Prettier, but after this review i have since installed and enabled it in my VS code. I have been using a borrowed laptop and still learning what I am allowed install and not, hence the reason why I simply tried to clean the code as best as I could. I will try to play around with the extention so I fully grasp what you are highlighting.

Thanks again for the work you do... it's really appreciated