London | 25-ITP-September | Maher Abou Albourgol | Sprint 1 | Wireframe

[Maher-A-B]

Learners, PR Template

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 have made the required changes to implement the wireframe task (skeleton HTML and CSS layout).

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	1195d98
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/68ed494773e296000889e4cc
😎 Deploy Preview	https://deploy-preview-852--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: 82 (🔴 down 4 from production) PWA: - View the detailed breakdown and full score reports

---

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

[github-actions]

Your PR description contained template fields which weren't filled in.

Check you've ticked everything in the self checklist, and that any sections which prompt you to fill in an answer are either filled in or removed.

[github-actions]

Your PR description contained template fields which weren't filled in.

Check you've ticked everything in the self checklist, and that any sections which prompt you to fill in an answer are either filled in or removed.

[github-actions]

Your PR description contained template fields which weren't filled in.

Check you've ticked everything in the self checklist, and that any sections which prompt you to fill in an answer are either filled in or removed.

[github-actions]

Your PR description contained template fields which weren't filled in.

Check you've ticked everything in the self checklist, and that any sections which prompt you to fill in an answer are either filled in or removed.

[github-actions]

Your PR description contained template fields which weren't filled in.

Check you've ticked everything in the self checklist, and that any sections which prompt you to fill in an answer are either filled in or removed.

[github-actions]

Your PR description contained template fields which weren't filled in.

Check you've ticked everything in the self checklist, and that any sections which prompt you to fill in an answer are either filled in or removed.

[cjyuan]

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:

• There is no image on your page (you can use the placeholder.svg image on all articles)
• The first article is not laid out on top of the other two articles
• The "Read More" links do not have a border.

Could you update your code to better match the wireframe's appearance and layout?

[cjyuan]

When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations.

Your page layout:

Expected page layout:

They have quite different layouts.

[cjyuan]

Getting closer.

1. The top article is not quite left aligned within its container (see pic).

2. The footer is not fixed at the bottom of the viewport (Suggestion: Look up what "viewport|" means)

Can you address these two issues?

---

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.

[cjyuan]

Looks good. Would be even better if all "Read more" links appear identical; right now the last "Read more" link has different dimension.