London | ITP - Jan -26 | MOHSEN ZAMANI | Sprint 1 | Wireframe to Web Code

[mohsenzamanist]

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

Added side menu to the wireframe
Created new page and answered following questions:

1. What is the purpose of a README file?
2. What is the purpose of a wireframe?
3. What is a branch in Git?

Questions

No questions for this PR.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	78cb57a
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/69709078143da20007d028ae
😎 Deploy Preview	https://deploy-preview-931--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: 91 (🟢 up 5 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

You should update index.html instead of preparing a separate HTML file.

Can you apply changes to index.html and delete explain.html?

2

One of the key objectives of this exercise is, "Check a webpage against a wireframe layout"

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

• The PAGE TITLE, SUBTITLE, and the footer should be centered
• The second and the third articles should have the same width, and appear side by side beneath the first article
• Each article should have a "READ MORE" link surrounded by a border.
• etc.

Can you update your page so that its structure matches the layout shown in the wireframe?

Suggestion

After you have made all the changes, try asking AI for possible improvements in terms of semantic, accessibility, typo, and consistency.
It can often help us catch errors, improve consistency, and reinforce best practices.

[cjyuan]

Page looks good; it matches the wireframe nicely.

There seem to be some unused CSS code. Can you remove them to keep the code clean?

[cjyuan]

Please note that in ITP, 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.

[mohsenzamanist]

Page looks good; it matches the wireframe nicely.

There seem to be some unused CSS code. Can you remove them to keep the code clean?

Deleted unused CSS code.

[mohsenzamanist]

Please note that in ITP, 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.

Thank you and PR guide was read and will be taken into action.

[cjyuan]

Great work!