Manchester | 26-ITP-May | Abid Akhtar | Sprint 2 | Wireframe

[AbidAkhtar-tech]

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

This PR completes the Wireframe task by creating a webpage that matches the provided wireframe layout. I used semantic HTML elements such as header, main, article, section, and footer.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

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

---

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

[cjyuan]

• The footer and the article content could overlap, making the text difficult to read. Could you find a way to prevent the text from overlapping?

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

• 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?

• Could you restore the "Changelist" header in your PR description? It should be a level 2 header that looks like this:

Changelist

[AbidAkhtar-tech]

I have made the required changes. Your review is appreciated. Thanks

[cjyuan]

• Can you position articles 2 and 3 side by side (With article 2 on the left of article 3)?
• When the screen size change, there is still a chance the footer content and the article content can overlap. Can you find a better way to prevent their text content from overlapping?

[AbidAkhtar-tech]

Thanks for the feedback. I updated the layout so that Articles 2 and 3 are displayed side-by-side using a grid container.

[cjyuan]

• The footer should remain fixed at the bottom of the viewport (to meet a requirement)
• Its text should not overlap the article content (to be user friendly)

These requirements do not need to be treated as mutually exclusive.

Can you find a way to ensure that both conditions are satisfied simultaneously?

[AbidAkhtar-tech]

Thanks for the feedback. I restored the fixed footer to meet the assignment requirements and added additional spacing to the main content area so that the article content remains visible and does not overlap with the footer on smaller screen sizes.

[cjyuan]

Looks good. Well done.

[AbidAkhtar-tech]

Thank You!