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

[Jay99-prog]

Juanita Nwachukwu | Sprint 2 | Wireframe to Web Code

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	942f993
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a2562b713ad370008a1ea5d
😎 Deploy Preview	https://deploy-preview-1415--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: 99 (🔴 down 1 from production) Accessibility: 100 (no change from production) Best Practices: 96 (🔴 down 4 from production) SEO: 86 (no change 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.

[Jay99-prog]

Needs Review

[Jay99-prog]

Needs Review

[cjyuan]

You need to delete the placeholder text, "Briefly explain your PR." from your PR description to pass the Validation Bot check.

[cjyuan]

• You did a good job keeping your code error-free. However, the W3C Validator (https://validator.w3.org/) identifies a warning in your code. Could you revise your code to resolve this warning?

---

• When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. To better align with the wireframe, here are a few areas where the layout and appearance could be refined:

  • The page title and the text beneath it should be centered.
  • Articles 2 and 3 should appear side by side beneath article 1, and the left and right edges of the article 1 should align with the left edge of the article 2 and the right edge of the article 3.
  • The footer content should be centered.

  Could you adjust the CSS to better match the wireframe's appearance and layout?

---

• Current implementation does not yet meet this requirement:

  The articles section contains three distinct articles, each with its own unique image, title, summary, and link.

  The articles should have different images and their links should respectively point to the relevant resource.

[cjyuan]

No new commits on this branch on GitHub yet. If you had committed changes on your computer, you would also need to push (sync) the commits to GitHub.

Also, check if you have committed the changes to the correct branch.

[Jay99-prog]

Updates completed. Please review

[cjyuan]

• The footer looks good.

• According to W3C Validator (https://validator.w3.org/), there is an error and a warning in your code.

• To better match the wireframe, can you update the CSS to ensure

  • The page title and the text beneath are centered on the page.
  • Articles 2 and 3 are placed side by side (horizontally) beneath article 1

• There seems to be some "broken images" on the page.

[cjyuan]

I don't see any new commits pushed to GitHub yet.

Can you address the issues raised in the previous comment: #1415 (review) ?

---

Please note that in CYF courses, the recommended way to inform the reviewer of your changes is to do both of the following:

• Reply to their feedback.
  • In the responses, clarify how each piece of feedback was addressed to demonstrate that you've carefully reviewed the suggestions.
    • You may find the suggestions in this PR Guide useful.
  • Your response may trigger a notification (depending on the reviewer's settings), helping ensure they’re aware of the updates you’ve made.
• Replace the "Reviewed" label by a "Needs review" label (which you have done -- great!)
  • Without this label, the reviewer would not know if your changes is ready to be reviewed.

[Jay99-prog]

Hi @cjyuan, thank you so much for taking time to review and provide feedback on my work.

While trying to workout my assesssment, I realised that there seems to be something wrong with the code on visual studio and I am not sure if this means that I might have to start from over. Please advise

[cjyuan]

You can continue fixing the code on this branch or "start all over" on this branch (or on a new branch and then open a new PR).

[cjyuan]

This is a block of merged code from two conflicting sources. For example, one from the repo on GitHub and one from the local repo on your computer. It is easy to fix.

For each block of merged code, for example,

<<<<<<< HEAD
      <p>
        Code was provided and changed by Juanita Nwachukwu.
      </p>
=======
      <p>This page explains README files, wireframes and Git branches.</p>
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91

all you need to do is decide whether to keep the top part:

      <p>
        Code was provided and changed by Juanita Nwachukwu.
      </p>

or keep the bottom part:

      <p>This page explains README files, wireframes and Git branches.</p>

And then delete the part you do not want to keep, and delete the markers:
<<<<<<< HEAD
=======
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91

[Jay99-prog]

I created a new branch because the cod eon VS looked really damaged, and due to time contraints i made a new one with some updated and hopefully clean changes. The Validator didn't flag any errors, images where reuploaded and fixed, Please help me review it... this is the site:
#1423