London | 26-ITP-Jan | Kris Oldrini | Sprint 1 | Wireframe

[XiaoQuark]

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

This PR updates the existing webpage to meet the assignment requirements based on the provided wireframe and acceptance criteria.

HTML

• Added two new articles, so the page now contains three articles in total.
• For each article, included:
  • An image
  • A title
  • A short summary
  • A “Read more” link to an external resource
• Ensured the content explains:
  • The purpose of a README file
  • The purpose of a wireframe
  • What is a Git branch
• Used semantic HTML elements.

CSS

• Customised the site colour palette using CSS variables.
• Styled articles as card components with:
  • Rounded corners
  • Consistent internal spacing
• Implemented a responsive layout:
  • Two-column grid on larger screens
  • Single-column layout on smaller screens
• Inverted the colour variables for the header and footer to improve visual contrast and make them stand out.
• Aligned the header and footer text to the centre and increased the h1 font size.

Accessibility & Testing

• Updated link text to be more descriptive so each link makes sense on its own.
• Added meaningful alt text to all images.
• Added a meta description to the page.
• Converted images to WebP format to reduce file size.
• Ran Lighthouse and achieved a score of 100 for Accessibility.

Git & Workflow

• Worked on a separate feature branch.
• Committed changes regularly with clear commit messages.
• Used rebase to keep the branch up to date with the latest main before opening this PR.

Questions

I updated the “Read more” links to include more descriptive visible text to improve accessibility and pass the Lighthouse audit.

Is this the preferred approach, or would it be a better practice to keep the shorter visible text and use an additional accessibility attribute or visually hidden text specifically for screen readers instead?

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	564119e
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/698456b751947900085b2fc0
😎 Deploy Preview	https://deploy-preview-1137--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: 95 (🟢 up 9 from production) PWA: - View the detailed breakdown and full score reports

---

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