London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe by ChinweP · Pull Request #1411 · CodeYourFuture/Module-Onboarding

ChinweP · 2026-06-04T00:34:28Z

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

I built a webpage using the provided wireframe and added all the required content. The page includes three articles explaining README files, wireframes and Git branches. I added images, alt texts, summaries, "Read more" links, fixed the footer to the bottom, styled everything with CSS file and then checked accessibility with Lighthouse. I also validated my code using the W3C validator.

netlify · 2026-06-04T00:34:34Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`d6246a3`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a2993c3d852a20008782a07
😎 Deploy Preview	https://deploy-preview-1411--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
🤖 Make changes	Run an agent on this branch

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

akeren

@ChinweP, your codebase is well-structured, simple, and easy to follow, with two files saved in the root directory of your project.

As your projects grow, what might happen if you later add more CSS or JavaScript files?
How could you organise your folders so the project stays easy to navigate, scalable, and maintainable now and in the future?

akeren · 2026-06-05T10:30:51Z

+
+
+
+


@ChinweP, could you explain why you've added these empty lines?

It is as a result of deleting some codes and I didn't think it mattered but I have removed them. I guess it helps with better formatting. @akeren, am I right?

It is as a result of deleting some codes and I didn't think it mattered but I have removed them. I guess it helps with better formatting. @akeren, am I right?

Yes @ChinweP

akeren · 2026-06-05T10:36:17Z

    <footer>
      <p>
-        This is the default, provided code and no changes have been made yet.
+        Footers usually contain contact links and other information about the site overall
      </p>
+
    </footer>


@ChinweP, your footer is fixed throughout, which affects the user experience. Could you explain why it's scrolling above the UI and what CSS style would help fix it?

The footer is scrolling above the UI because I set it to position: fixed, which removes it from the normal page flow. To fix it, I will remove the fixed positioning and use a flexbox layout with margin-top: auto so the footer stays at the bottom without covering any content.

@akeren, I have fixed the footer.

akeren · 2026-06-05T10:41:55Z

+      <!--Top article (full-width)-->
+      <article class="top-article" id="readme-article">
+        <img src="placeholder.svg" alt="Illustration of a README file" />
+        <h2>What is the purpose of a README file?</h2>
+        <p>
+          A README file explains what a project is about, how to use it, and any important information someone needs before working with the project code.
+        </p>
+        <a href="https://www.makeareadme.com/" target="_blank">Read more</a>
+      </article>
+
+      <!--Bottom two articles side -by-side-->
+
+    <section class="bottom-articles">
+
+      <article id="wireframe-article">
+        <img src="placeholder.svg" alt="Example of a webpage wireframe"/>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding.
+        </p>
+
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank">Read more</a>
+      </article>
+
+      <article id="branch-article">
+        <img src="placeholder.svg" alt="Diagram showing Git branches"/>
+        <h2>What is a branch in Git?</h2>
        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in.
        </p>
-        <a href="">Read more</a>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank">Read more</a>
      </article>
+
+    </section>
+
    </main>
    <footer>


@ChinweP, how could you improve the code formatting?

@akeren, I'm not sure how. Please, help me understand

Is it by removing unnecessary slashes from code? for example: This to

@akeren, I'm not sure how. Please, help me understand

@ChinweP, some empty spaces made the code not clean and consistent. You could consider using prettier or eslint to help with consistent code formatting without issues.

@ChinweP, you may follow this guideline to enable that 👉 https://github.com/CodeYourFuture/Module-Onboarding/blob/main/practical_guide.md

Thank you @akeren for your feedback and explanation. I did consistently format document with prettier.

akeren · 2026-06-05T10:46:16Z

+          A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding.
+        </p>
+
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank">Read more</a>


@ChinweP, why is this resource returning a Not Found (404)?

The URL is not complete. I missed adding "-guide" at the end of the URL. The complete URL is: https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

ChinweP · 2026-06-05T20:38:32Z

Thank you @akeren for your review and comment. I will look into all your comments.

ChinweP · 2026-06-09T19:48:08Z

@ChinweP, your codebase is well-structured, simple, and easy to follow, with two files saved in the root directory of your project.

As your projects grow, what might happen if you later add more CSS or JavaScript files?

How could you organise your folders so the project stays easy to navigate, scalable, and maintainable now and in the future?

As my project grows, adding more CSS or JavaScript files in the root directory would make the project messy and harder to navigate. It would become difficult to manage multiple files and maintain the codebase.

To keep the project organised and scalable, I would create separate folders such as css/ for all my stylesheets and js/ for all JavaScript files. This way, when I add more files in the future, each type of file stays in its own folder, making the project easier to maintain and more professional.

akeren · 2026-06-09T20:02:57Z

@ChinweP, your codebase is well-structured, simple, and easy to follow, with two files saved in the root directory of your project.

As your projects grow, what might happen if you later add more CSS or JavaScript files?

How could you organise your folders so the project stays easy to navigate, scalable, and maintainable now and in the future?

As my project grows, adding more CSS or JavaScript files in the root directory would make the project messy and harder to navigate. It would become difficult to manage multiple files and maintain the codebase.

To keep the project organised and scalable, I would create separate folders such as css/ for all my stylesheets and js/ for all JavaScript files. This way, when I add more files in the future, each type of file stays in its own folder, making the project easier to maintain and more professional.

@ChinweP that's it.

akeren · 2026-06-10T07:44:09Z

-        <h2>Title</h2>
+      <!--Top article (full-width)-->
+      <article class="top-article" id="readme-article">
+        <img src="placeholder.svg" alt="Illustration of a README file" />


@ChinweP, could you find an appropriate image that aligns with this article and update it as stated in the acceptance criteria?

@akeren, Thank you for your feedback. I have added the appropriate image.

akeren · 2026-06-10T07:45:08Z

+
+      <section class="bottom-articles">
+        <article id="wireframe-article">
+          <img src="placeholder.svg" alt="Example of a webpage wireframe" />


@ChinweP, could you find an appropriate image that aligns with this article and update it as stated in the acceptance criteria?

@akeren, Thank you for your feedback. I have added the appropriate image.

akeren · 2026-06-10T07:45:47Z

+        </article>
+
+        <article id="branch-article">
+          <img src="placeholder.svg" alt="Diagram showing Git branches" />


@ChinweP, could you find an appropriate image that aligns with this article and update it as stated in the acceptance criteria?

@akeren, Thank you for your feedback. I have added the appropriate image.

ChinweP added 6 commits June 3, 2026 21:16

Added wireframe title

4206a32

Added page title and description

f2277c0

Added full-width README article with image, title, summary and link

02587f9

Added two bottom articles with images and summaries

b7aec1c

Added css to place bottom articles side by side

f7c71a9

Added images from the placeholder.svg folder

faf93fe

ChinweP added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 4, 2026

akeren assigned ChinweP Jun 5, 2026

akeren self-requested a review June 5, 2026 10:23

akeren reviewed Jun 5, 2026

View reviewed changes

akeren added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels Jun 5, 2026

ChinweP added 2 commits June 5, 2026 22:15

URL Not Found (404) error fixed

731dc74

Empty lines in css deleted

51cfd01

ChinweP requested a review from akeren June 9, 2026 19:38

ChinweP mentioned this pull request Jun 9, 2026

26-ITP-MAY | Onboarding | Chinwe Chukwuma ChinweP/My-Coursework-Planner#28

Open

ChinweP added 2 commits June 10, 2026 00:40

Add flexbox layout to body to fix footer overlap issue

30e35da

Replace fixed footer with flexbox sticky footer (margin-top: auto)

8016fca

akeren reviewed Jun 10, 2026

View reviewed changes

Add image for README, wireframe, and git branch

d6246a3

ChinweP requested a review from akeren June 10, 2026 16:45

akeren removed the Reviewed Volunteer to add when completing a review with trainee action still to take. label Jun 10, 2026

akeren added the Complete Volunteer to add when work is complete and all review comments have been addressed. label Jun 10, 2026

Uh oh!

Conversation

ChinweP commented Jun 4, 2026

Learners, PR Template

Changelist

Uh oh!

netlify Bot commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cyf-onboarding-module ready!

Uh oh!

akeren left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChinweP Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChinweP commented Jun 5, 2026

Uh oh!

ChinweP commented Jun 9, 2026

Uh oh!

akeren commented Jun 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Jun 4, 2026 •

edited

Loading

ChinweP Jun 5, 2026 •

edited

Loading