London | ITP-MAY-25 | Mohammad Jafarzadeh(MR_ASH) | Wireframe

[Ashjz]

Learners, PR Template

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	e881618
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/682fb4495cde260008383722
😎 Deploy Preview	https://deploy-preview-437--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: 98 (🔴 down 2 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

---

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

[illicitonion]

This is generally looking good. I left a few comments with things to think about and improve.

Also one visual thing - the problem requirements say the footer should be fixed to the bottom of the screen, but on your page I needed to scroll to see the footer - can you fix this?

Also, your README page doesn't score 100% on lighthouse - please fix this :)

[illicitonion]

Could you think of a way to make it so that you could still read that this is light gray, without needing to write a comment? It's generally better to use semantically meaningful names in code than need to explain them.

[illicitonion]

I think this comment still stands - how could you make it easier to know at a glance what #f5f7fa or #181818 means? And to show that the background of the header and footer are the same?

[illicitonion]

Thanks, the page is now looking great! I just left one comment open about potentially making colours more clear in the CSS, but this is looking great!

[Ashjz]

hey again
i can fix that but honestly there a lot of colors that i just copy pasted their codes and some of them are in different tunes but they look similar and some of them are manually selected in vscode. still if its mandatory i can do it.

Made changes.

All color codes have been replaced with semantic color names (like AliceBlue, MidnightBlue, RoyalBlue, etc.). Cheers :))

[Ashjz]

performance score updated with some changes to 100 :)

[illicitonion]

This is looking great, good job!

On the colour names - using named colours is one way, but another is to use variables. Before your changes, the code had:

  --paper: oklch(7 0 0);
  --ink: color-mix(in oklab, var(--color) 5%, black);

This means you can use var(--paper) as a colour - so you can pick a useful descriptive name, even though the colour isn't one of the existing named ones in the CSS language. This can make it much easier to read and understand what colours you're using :)