Sheffield | 26-Jan-ITP | Karim Mhamdi | Sprint 1 | Wireframe to Web Code

[KKtech06]

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

Changelist

I created a webpage using HTML and CSS with three articles explaining what a README file is, what a wireframe is, and what a Git branch is. I tested the page using Lighthouse and achieved a score of 100.

Questions

N/A

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	23d0dc6
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/696d24814d874f0008583e68
😎 Deploy Preview	https://deploy-preview-982--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: 95 (🔴 down 5 from production) Accessibility: 100 (no change from production) Best Practices: 96 (🔴 down 4 from production) SEO: 77 (🔴 down 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.

[cjyuan]

1

When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. You're off to a solid start, but the main purpose of implementing a wireframe is to translate structure and functionality, not final visual design. Visual design is usually handled by UI/graphic designers after the wireframe phase. To better align with the wireframe, here are a few areas where the layout and appearance could be refined:

• The first article is expected to be as wide as the combined width of the 2nd and 3rd articles. The left and right edges of the first article should aligned with the left edge of the second article and the right edge of the third article.
• The width of the 2nd and the 3rd articles are not quite the same.
  • Also, the right margin seems to be wider than the left margin

• The article content should be left-aligned.
• The "Read More" links are missing a border.
• All articles should have a visible border.

2

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

3

According to https://validator.w3.org/, there are errors in your code. Can you fix them?

4

There are duplicated headers in the PR description.

5

After you have made all the changes, try asking AI for possible improvements in terms of semantic, accessibility, typo, and consistency. It's a good way to learn.