London | 26-ITP-Jan | Xuanming Hu | Sprint 1 | Wireframe by Samual-Hu · Pull Request #1048 · CodeYourFuture/Module-Onboarding

Samual-Hu · 2026-01-24T16:09:46Z

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

Fixed alignment issue with Footer
Fixed indentation in HTML

Questions

None for now.

netlify · 2026-01-24T16:09:51Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`b7bb5c1`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/698714b2c19ae1000895a591
😎 Deploy Preview	https://deploy-preview-1048--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

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

cjyuan

I expected updates to both index.html and style.css so that the page elements are styled to match the wireframe.png image.

cjyuan

Code is free of syntax error. Well done.
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. To better align with the wireframe, can you
- Set the images in articles 2 and 3 to have identical height.
- (Optional challenge) Align the positions of the title and the "Read more" link between articles 2 and 3.
There is a gap between the left border of the footer and the viewport, but not on the right (see pic). That means the footer is not quite centered. Can you make the footer "more center"?

cjyuan · 2026-02-05T03:06:26Z

+<main>
+
+      <!-- Article 1: Questions 1 -->
+       <article>


Can you improve the indentation of the code?

Consider using VSCode's "Format Document" feature to auto format the code for better readability and consistency. To use the feature, right-click inside the code editor and select the option.

cjyuan · 2026-02-05T03:10:50Z

+
+       <!-- Article 2: Question 2 -->
+        <article>
+          <img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Wireframe example image" />


What's your rationale for using this URL:

https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress

instead of this

https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg

?

They both "seem" to retrieve the same image.

cjyuan · 2026-02-05T03:11:40Z

+footer {
+position: fixed;
+bottom: 0;
+text-align: center;
+font-weight: 500;
+border: solid black 2px;
+width: 100%;
+background-color: white;
+color: black;
+}


You can also use VSCode "Format Document" feature to auto format CSS code.

cjyuan · 2026-02-05T03:14:45Z

Regarding the "Changelist" section of your PR description. Since you have made more changes than just "Changed the header description", can you update the Changelist section accordingly?

cjyuan · 2026-02-07T14:40:25Z

Changes to the code look good.

Can you also address this request:

Regarding the "Changelist" section of your PR description. Since you have made more changes than just "Changed the header description", can you update the Changelist section accordingly?

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

Samual-Hu · 2026-02-07T15:45:17Z

Hi, @cjyuan , I have addressed your comment

cjyuan · 2026-02-07T18:24:10Z

The Changelist section is supposed to describe the difference between this PR branch and CYF's main in terms of what you have changed. Usually, it describes the features you have implemented.

"Addressed issues in comments" does not quite describe what you have implemented. Can you give more details?

Samual-Hu · 2026-02-07T21:13:32Z

Hi, @cjyuan , I have updated the description with the specific changes.

cjyuan · 2026-02-07T22:51:46Z

All good now. Well done.

illicitonion · 2026-05-04T17:04:49Z

Closing PR because the January ITP run has finished. Feel free to re-open if you're still working on it.

Changed the header

9b80dc5