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?

I reviewed the layout again and noticed the header and main content were not aligned consistently. I adjusted the positioning and spacing so the content aligns properly and the page structure is more consistent.

@YoditE, that's nice.

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

+        <a href="https://www.makeareadme.com/">Read more</a>
      </article>
+      <article>
+        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADDCAMAAACxkIT5AAAAe1BMVEX////q6uoAAADAwMDx8fGwsLCfn5/R0dGampoEBARpaWltbW2Wlpbk5OTLy8v7+/uNjY2qqqp8fHzd3d3FxcXU1NT19fW0tLSHh4eSkpK5ubmxsbGJiYng4OCCgoLHx8d0dHQiIiJTU1NhYWFFRUUXFxcQEBBXV1dJSUkaLMO3AAALYElEQVR4nO2di4KqNhCGhyUEugIh3ImI9uxpe97/CZsAXrgaBQTBv9sjK6Dw7WSSTCYB/vn3r03r6+8v+FfVt6og4D/e9xf8pTN1HjE60xeflbq2ufNOgsFcl2C4JmY4ijSD/4v911/AMfv59r3dnAywu3Pc+OdXtnN3p1kYOL9OJYO5yoKW0WifUoPG1DFmQKA6J9vZCQb/qsFsLulG81wB/8/7+YJ/MtM0arq+09y3MpnGry/4OoQW1W5Fo5D4tNwKI23VUoCXhS/PihUFIaUUUpDnRCp/4TqklM1ipa+SnxYMbIYU63hmIH5xDM4CGybiWwdYsxSnZLBH1u6QWwJC4d7kf33DQg7LdshKDW/uy5xUFwZa6Py4p52qIGN3yn7rnMEh3BGiKFa8FQYYoUwPQ24IKCQmQ16GA0QT6qJDthEGOg6590OlvBAdXMNDoe6HyHK5PyAr1pkBypyEK+ZKM5frtA/cJEkdvkWZg9csExcMCLGqUggJL1uKtWoRweDvn9229Vu0E+f2SzMrLwtzX8TM+v4wuDA4yne6/bmveWyVDMIksA5SsgIDzX3RI+vMQNOOcicEOForAwoakznex6CVDMRpKKBJVPwa8P+Jwt+zFFAIb4SCjhN1osseVVcGoNL7h0caXBicAJieHS0dwPoD4e//VLAcAHv3Y9IdgBF8e1Yw6cWPpBsGYBv3jsbi71oyCPn9siDlPS3+KSfxqxMp4hOOR2BZBOrxBCic9urH0S0D8Jz+gw1d/FsyIL/i0x/F3WUMovjHIjFvbBww38GOEHmppx9/Tpmkk5lXFQZgxX3HJkVD4mwHLgBVXLH5W40iYRY7jxcVsDkDHXaa/T3lhY+oKgNQsu5DU6t4LRlYCd/0Yi3SfQbkRP5TXRZk+Dv4+aGaDuRPsGPR2/kDoTDrKMIkO1eJ57LA6wAC5OjnaAgofIPYB0IQAf4jPsv3lUkvfiTVGdzca0U3bLT1tg8uilv+eCgjl+0tMACn0Ymq+MpNMCjrwKuqdWbJAItxuPeWYeTm3coAcKVe183KzpKBGUg1rpcsPdKEl2tnAFp03VZxbV/BIIGDkTIC7yrdcWyg3XZw23nYR7VdFwZcB8Nhb9EerklPOACuXgagl47RajR3bxlwHfC7YbCT5Ozw+hl0q8aAy+IY3qSyILZp3nh82uUPRMxdqOO2mgygsIbFYyB2UqvyOu3ApkoQeKAyy1A8zwer+kmtDLgs6iw5xESOZr3O72EQ2mzPMCDVVqlKD5kkA1gwBuInRlv/rbMsEMXSaQCBSiyP20OtauxjADmG/cJ6Sl0A4I5PVFo3c/UzECdQR1sMBqImuLsH318vWOUInNXoPNxlwKVoi8DAAfSnT3SWBaFrF6HhSGQYgMCQ0lkxENXB94bQ+uxAvwmv4trAkiQDLjQfBsIcmQSaHgbVMHtUbS3LM+BCNH49BsJiyWy6bgb7Wo/Qr1QNDzEAgeGl1iAsQDqboNMf0EYX4bZoPMwAXlgoQubgR9Ipuuyg2ZqqRlGeYAACg0Ot+4cN0aMAoNMOmpE0ISu9bD7HgAvtJ8SAHgcAXXbQFlHNv+MSVX2agfiUKJkCAwdAn8ooamPQEVkXukTXhzCAAdfb+YHR8+bVUhZCtyc2duYzkAEUdjtSApAyAAC02QFy+8+I828bzgBGwqAMdjANBv0jrkK5vxyFAVco0ZbtEe+SDK9v62UhuDPyLiTiUGMxgAEYeNd0lAZHzQ7uZ2DkJ6ljMoC8Z/NoZvyIDc8qA5lMHCEWRaMyAIEhNaUxCADjhaoqDLAlmaEPFh2bgZAqNV9G4T2wUWN1t/4A6APp7kX9OS4DiUKh0HT04d5bO3hCYzOAIuzTEfcS8bkJorXLYwAd8U8Rp50mXF0pC49rGgbQwDBpvL5iB14gr+L0yRjAzXjI1AMWlXoh1m1ZOVPUCw0RHSfYUSceza22E0NFUmj/EgYHaqg6xi3xnDFVbSOh+3dfMhi3ndgq7zyeT3TTtCf8oqodLIeBVysCU2JYpB14hqM2Yxi6mUyDYXkMvJ4Ep3P2zLhaWFngAFos4FZ5FtW4WpIdtBeBprg1jDodYDEMZAEUCszkOFpG4DIYBEbyAIDLOf44GBbgD56/mQAn/ghtyLntIDDMQX9NjmFwU3pWBrphjlCqvaEY5isLHIA9llsbhmEmOxBN33EzvTmGZ7OF52BgT9T2fzZp+uVl4SZXegI9heG1dmA7UwIoZOE4eqyYvZCB7TiTAyhk4TR6wBpexWDaItDUIxhe4Q+InZgvBVDIwpKh2MntgBzr0wVeKLmI9LQMBICZZzsLDHfGpycsC6Hflyz+Qt2bSTCVHYS92fIvV28K/SR2IAAsbr2lbgzj28HADKMp1YFhZAbheAl300hksdUxdJQFsaxqH5BWBuSpTNmXq5E73mEHmB48VaynqSh6/oIUW7wGIepgQFj6DgAKcQz4iqGVAb9DlWpZ5ESx76UadShx/WyPKWUpO3lNBmK+xMT56GMrvGJotwMbU8+296nPkMK0vUkRZozRiOwdNQlqDIQPeDMAhc4Y+vwBKpbdRiELxRuV987rH5B3BVAoFC5Sql5ovn2xA5GQMu2at9OK1xT+wDaSSh/J51ukKM0TU59nsB59GHwYCA1gcBC1i8JPLqPl6F3XhxnA4BuBruiJDzowG/DBlUr+X6AGMPAoo7pqq4rhJThCRF10j6lHzzMImMpMw8cmYM9Rse3Z22MABwtCj1jENkBRIIBwg/7gLGXKJMpX6FM3fhgIfRgMYaClTl1lWCVu7FimznO7n2dA3YayIA/PnJp7lqnjYTCDrKFdnkTasmOZOhnj24F7st/KDlw8kIFPW5Q3Fdt2LFNqlQFBkgqXuSrcAJUMyE7+oY+791o1874+z6T5MBD6MPgwEPowuDKQn+prl6lmB/kzXicRxvHkD/duGYSp/JTvcr7zA2e8THkSSKZLTmD39LTC4IF24v485ip7xut0FAwMJlm47ePQ/oIpPUv8dfLF3ZuQSkU2kQPmehmQu4tdCbmwZgbgSSx0ZCjrZgD0rkuwGaycAdxZ/S5/0traGdyDUOxeOYN+l2AoW2DQ6xLscvHktTOAuLOVgM75patnQNLGzZ/pnDdWzwACrR3BNaty/Qw6XIJ9XUl9AwxaOw7oJuF+CwzCFpdw+5TOLTBocQmVFOtNMGi4BL3yLIltMICs4hLCaq96IwxI5Sm9p6pVbIRBxSXUZ9xshQFc51rp9adubobBpRsdNhZT3w6Dc3ix+fzu7TAoXULL5KsNMchbCQ1nsDEGEJOmM9gag9Bx2iIqm2IAqDWJalsM2rUtBiz/kWSAqlNbUWOm64gMwtpXDVYng8N/B02aAdI8lk9ttopJzlEY1a5tRAYOC/k32YIzf61/0RPqZBCFKpW3A0aZgalBMxQZJt6bxKRRdDQ07WIo4zGI9YxhmmqqocWMyhfHTo3kDyLFMZnh6FmoYRZpRoipZuBjHJy/ZzwGlopiVawsYEbI8RfEoJjkX5inUsz7r17bqD4x/2ykXFcWGKZWBkbrZj+De5f9ZvXC7TIl1UjaZhhUb7vWb9oGg3o3odp/3gaDrNZNqI44bIJB82mZlbKxBQbBvo6g6iM3wKBtqK3iEjbAoO4MSjJXN7l+Bl3ZOFeXsHoGXSkYN62EtTMIexJ2zy5h7QzanUHJx9kEg/5s3TIfZ90Mup1BocIlrJoBaY6r1eSunkGfMyiUt5/WzOB+6n4x9rZiBvecQSHDWjMDqak8wiXUGISPzv03QfaM18ku5rXJIQCiVtaAIDtTVue5/6n0GS+TcRI1nmtIH5/dMti0Pgw+DIQ+DD4MhD4MPgyEPgwKBm+8cPwo2n3B3z/fm9buD7eDj/4HNhIIDctKIv0AAAAASUVORK5CYII=" 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.

akeren

@YoditE, your codebase structure is currently simple and easy to follow, with index.html ,style.css and images 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 pages? How could you organise your folders so the project stays easy to navigate, scalable and maintainable?

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

+          A Git branch allows developers to work on new features without changing the main version of a project. Changes can be merged later when they are ready.
        </p>
-        <a href="">Read more</a>
+        <a href="https://www.w3schools.com/git/git_branch.asp" target="_blank">Read more</a>


@YoditE, why is this anchor link not having the same experience as the rest?

akeren · 2026-06-05T08:16:07Z

+h1 {
+  color: rgb(47, 159, 174);
+  text-align: center;
+
+}
+
+header p {
+  text-align: center;
+}
+header {
+  margin-bottom: 30px;
+}
+a {
+  background-color: black;
+color: white;
+text-decoration: none;
+border-radius: 8px;
+transition: 0.3s;
+}
+a:hover{
+   background-color: teal;}
+
+
+article {
+  border: var(-- line);
+  padding-bottom: var(--space);
+  text-align: left;
+  display: grid;
+  grid-template-columns: var(--space) 1fr var(--space);
+  border-radius: 12px;
+  overflow: hidden;
+  padding: 16px;
+}
+
+article:hover { transform: scale(1.02);}
+
+body { background-color: #d6d0d0;}
+
+h1 { color: rgb(47, 120, 120); }
+
+p { color:  #333333; }
+a { background-color: black;
+color: white;
+
+}


@YoditE, your styling is good. However, at the moment, many styles are applied directly to HTML elements, and the readability of the style block is a bit difficult.

How might this affect other elements elsewhere on the page that use the same tags? What approach could give you more control over which specific elements receive these styles?

How could you improve the readability and the separation between blocks of code?

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

YoditE requested a review from akeren June 4, 2026 20:45

akeren reviewed Jun 5, 2026

View reviewed changes

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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented May 31, 2026 •

edited

Loading