Glasgow | 26-ITP-May | Francesco Romano Monda | Sprint 2 | Wireframe to Web Code by fromonda · Pull Request #1409 · CodeYourFuture/Module-Onboarding

fromonda · 2026-06-03T19:44:14Z

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

Implemented semantic HTML structure using header, main, article, and footer elements.
Created three articles explaining README files, wireframes, and Git branches.
Added unique images, summaries, and links for each article.
Styled the webpage using an external CSS file to match the provided wireframe.
Applied CSS Grid and spacing adjustments to improve layout and readability.
Fixed the footer to the bottom of the viewport.
Added descriptive alt text to support accessibility requirements.
Validated HTML and reviewed content for formatting, grammar, and accuracy.
Used Git for version control with regular commits and pushes to GitHub.

Add footer

netlify · 2026-06-03T19:44:20Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`28ef6ef`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a248a39e2b3420008d9402e
😎 Deploy Preview	https://deploy-preview-1409--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

@fromonda, your codebase structure is currently simple and easy to follow, with files kept in the same root directory.

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

akeren · 2026-06-05T08:51:39Z

    <footer>
      <p>
-        This is the default, provided code and no changes have been made yet.
+        Built using semantic HTML, CSS layout techniques, and version control
+        practices.
      </p>
    </footer>


@fromonda, examine the footer position in the rendered UI. Where should it sit relative to the rest of the page, and what styling might need to change?

The footer was intentionally anchored to the bottom of the viewport using position: fixed. However, based on your comment, I understood that the footer would be better positioned below the page content so that it follows the normal document flow. I have therefore removed the fixed positioning and allowed the footer to sit naturally after the main content.

@fromonda, how about the alignment of the footer position?

From my perspective, the footer was not misaligned with the rest of the content. I understand that it may be preferable to centre it, and I have now made that adjustment.

akeren · 2026-06-05T08:53:06Z

-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Learn about README files, wireframes, and Git branches.</p>
    </header>


@fromonda, when you compare the header with the main body, does the UI alignment look intentional? What CSS change might help align them?

The alignment between the header and the main body was not intentional; it was simply the default behaviour. From your comment, I understood that you were suggesting a more consistent alignment, so I applied the same container styling used for the main body to the header as well.

akeren · 2026-06-05T08:55:23Z

    <title>Wireframe</title>
    <link rel="stylesheet" href="style.css" />
  </head>
+


@fromonda, could you explain why you've added this empty line?

The empty line you mentioned, along with the others I added, is intended to make the code more readable by visually separating the different sections. In this case, it helps distinguish the head snippet from the body snippet, while the others separate the individual article snippets, making the structure easier to read.

@fromonda, you could use the prettier or eslint extension plugins to help with code formatting. It'll be more consistent and automatic.

I used Prettier since the Form Controls assignment, and the empty lines were added on my own initiative. Since I understand they may be considered unnecessary, I have removed them.

… positioning

akeren · 2026-06-06T00:53:43Z

@fromonda, your codebase structure is currently simple and easy to follow, with files kept in the same root directory.

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

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

@fromonda, what about this comment?

fromonda · 2026-06-06T14:29:28Z

@fromonda, your codebase structure is currently simple and easy to follow, with files kept in the same root directory.

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

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

@fromonda, what about this comment?

If my project grows in terms of elements and styles, I would consider adding additional branches rather than changing the file structure in the current branch. However, I have also grouped the images into a dedicated folder.

akeren · 2026-06-06T20:19:13Z

@fromonda, your codebase structure is currently simple and easy to follow, with files kept in the same root directory.

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

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

@fromonda, what about this comment?

If my project grows in terms of elements and styles, I would consider adding additional branches rather than changing the file structure in the current branch. However, I have also grouped the images into a dedicated folder.

Good to know. Similar to images, you'll create subfolders for each distinct content.

Great job.

akeren · 2026-06-06T20:22:32Z

+        <img
+          src="readme.png"
+          alt="Illustration promoting the creation of an effective README file"
+        />
+        <h2>What is a README File?</h2>
+        <p>
+          A README file explains what a project does, how to install it, how to
+          use it, and any important information developers need. It is usually
+          the first file people read when viewing a project.
+        </p>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article>
+        <img src="wireframe.png" alt="Wireframe showing a webpage layout" />
+        <h2>What is a Wireframe?</h2>
+        <p>
+          A wireframe is a digital diagram that shows the skeleton of a website.
+          It strips away visual elements like colors, fonts, and images to focus
+          entirely on where headers and content blocks live.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
+      </article>
+      <article>
+        <img src="git-branch.png" alt="Illustration of branching in Git" />


@fromonda, your images aren't displaying on the UI anymore. Could you debug and correct what's wrong?

As required, I updated image source paths to reflect the new folder structure.

fromonda added 4 commits May 29, 2026 22:57

Add README, wireframe, and Git branch articles with images

bd27467

Update index.html

d16c2f0

Add footer

Footer positioning fix and article spacing adjustment

e8b0bc4

Wireframe layout refinements

acd8a37

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

akeren assigned fromonda Jun 5, 2026

akeren self-requested a review June 5, 2026 08:47

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

Header layout alignment with main content and removal of fixed footer…

bb9b076

… positioning

fromonda added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels Jun 5, 2026

fromonda added 2 commits June 6, 2026 14:52

Code formatting improvements and footer content alignment

50afd61

Creation of a dedicated image folder

f932341

akeren reviewed Jun 6, 2026

View reviewed changes

akeren added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 6, 2026

Image path updates after folder reorganisation

28ef6ef

fromonda added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels Jun 6, 2026

akeren removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 6, 2026

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

Uh oh!

Conversation

fromonda commented Jun 3, 2026

Self checklist

Changelist

Uh oh!

netlify Bot commented Jun 3, 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!

fromonda 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akeren commented Jun 6, 2026

Uh oh!

fromonda commented Jun 6, 2026

Uh oh!

akeren commented Jun 6, 2026

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 3, 2026 •

edited

Loading

fromonda Jun 5, 2026 •

edited

Loading