London | 26-ITP-May | Yodit Kasu | Sprint 2 | Wireframe by YoditE · Pull Request #1384 · CodeYourFuture/Module-Onboarding

YoditE · 2026-05-31T21:58:17Z

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

Created a webpage explaining:

The purpose of a README file
The purpose of a wireframe
What a Git branch is
Added images, links, HTML structure, CSS styling, and completed Lighthouse and validation checks.

…rding

netlify · 2026-05-31T21:58:21Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`3940bb8`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a21de67e867a2000844e388
😎 Deploy Preview	https://deploy-preview-1384--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: 93 (🔴 down 7 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 · 2026-06-03T12:46:01Z

    <header>
      <h1>Wireframe</h1>
      <p>
-        This is the default, provided code and no changes have been made yet.
+        This webpage explains the purpose of README files, wireframes, and Git branches in web development.
      </p>
    </header>


@YoditE, when you compare the header with the main body, what CSS change might help align them?

@akeren Looking at it again, I think matching the spacing and margins between the header and the main content would help make the layout more consistent. I could review the padding and margin values so both sections align better.

@akeren Looking at it again, I think matching the spacing and margins between the header and the main content would help make the layout more consistent. I could review the padding and margin values so both sections align better.

Yes, that's fine. @YoditE, what about the position?

akeren · 2026-06-03T12:50:37Z

    <main>
      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="data:image/png;base64,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" alt="" />


@YoditE, can you explain your choice of using a Base64 image and leaving alt value empty here?

@akeren I searched for images that matched my topics and copied the image sources without realising some were Base64 encoded. I also left the alt attribute empty by mistake and should have added descriptive alt text for accessibility.

@akeren I searched for images that matched my topics and copied the image sources without realising some were Base64 encoded. I also left the alt attribute empty by mistake and should have added descriptive alt text for accessibility.

@YoditE, that's noted. However, embedding large images as Base64 data URIs in an img tag is not a best practice. When it's an icon or a very tiny UI asset, that works. Could you think of an alternative solution to this current approach that has minimal tradeoffs?

akeren · 2026-06-03T12:52:02Z

+        <a href="https://www.makeareadme.com/">Read more</a>
      </article>
+      <article>
+        <img src="data:image/png;base64,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" alt="" />


@YoditE, can you explain your choice of using a Base64 image and leaving alt value empty here?

@akeren I searched for images that matched my topics and copied the image sources without realising some were Base64 encoded. I also left the alt attribute empty by mistake and should have added descriptive alt text for accessibility.

akeren · 2026-06-03T12:52:20Z

+      </article>
+
+      <article>
+        <img src="data:image/png;base64,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" alt="" />


@YoditE, can you explain your choice of using a Base64 image and leaving alt value empty here?

@akeren I searched for images that matched my topics and copied the image sources without realising some were Base64 encoded. I also left the alt attribute empty by mistake and should have added descriptive alt text for accessibility.

akeren · 2026-06-03T12:56:53Z

 main {
  max-width: var(--container);
  margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 80px; 
 }
 footer {
  position: fixed;
  bottom: 0;
+  left: 0;
+  width: 100%;
  text-align: center;
+  background-color: white;
+  padding: 10px;
+


@YoditE, how could you improve the separation between blocks of code more clean and clearer?

@akeren Good point. I could make the stylesheet clearer by adding more spacing between sections and using comments to separate different groups of styles.

@YoditE, that makes sense.

akeren · 2026-06-03T13:00:07Z

@@ -48,11 +48,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
  max-width: var(--container);
  margin: 0 auto calc(var(--space) * 4) auto;


@YoditE, could you explain why you decided to go with this calculation and it potential use case?

@akeren I don't remember adding this calculation myself. My understanding is that it adds spacing below the main content and helps separate the content from the footer.

@akeren I don't remember adding this calculation myself. My understanding is that it adds spacing below the main content and helps separate the content from the footer.

@YoditE, this works, but can you make the margin declaration easier to read? Consider whether all four values are necessary, and rewrite it so the intent is clearer to future maintainers.

YoditE added 7 commits May 22, 2026 17:48

complete wireframe practice

7ee9e02

Merge branch 'main' of https://github.com/CodeYourFuture/Module-Onboa…

2a1af61

…rding

complete form controls exercise

947b473

Update wireframe html and css

540cf9c

Fix CSS validation issue

3ad3bca

Complete wireframe project

6c309a8

complete wireframe project

4438783

YoditE added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 31, 2026

YoditE mentioned this pull request Jun 2, 2026

26-ITP | Onboarding | Yodit Kasu YoditE/My-Coursework-Planner#1

Open

akeren assigned YoditE Jun 3, 2026

akeren self-requested a review June 3, 2026 12:41

akeren reviewed Jun 3, 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 3, 2026

YoditE added 2 commits June 4, 2026 17:30

Fix review comments and update images

83bc6f9

Fix accessibility and address review feedback

3940bb8

YoditE force-pushed the feature/wireframe branch from 5878f13 to 3940bb8 Compare June 4, 2026 20:21

Uh oh!

Conversation

YoditE commented May 31, 2026

Learners, PR Template

Uh oh!

netlify Bot commented May 31, 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!

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!

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 May 31, 2026 •

edited

Loading