London | 26-ITP-January | Karla Grajales | Sprint 1 | Wireframe by Grajales-K · Pull Request #920 · CodeYourFuture/Module-Onboarding

Grajales-K · 2026-01-03T00:27:22Z

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

The purpose of this project is to understand the fundamentals of wireframing and how to develop a page structure.
We used semantic HTML specifically one

and two tags to organize the content. The

introduces the core foundations, while the tags provide detailed information on specific topics that can stand on their own. This approach improves both SEO and readability for all users

Implemented CSS Grid to maintain a consistent layout across all containers. I also prioritized accessibility by using descriptive aria-labels and semantic tags to improve readability for all users, including those using assistive technologies

Questions

Regarding images: how can I address the problem of large images, especially if Lighthouse indicates that they should be prevented from downloading? I resized the images to ensure they fit equally within the containers. Is this considered a good practice? Thank you.

- Added meta description for better SEO indexing. - Added descriptive alt text to all images for screen readers. - Standardized image dimensions to prevent layout shifts and improve rendering.

-aria-label - target: to open a new tab

-href in each anchor

-hover to the anchor -effects before and after

netlify · 2026-01-03T00:27:28Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`b272786`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6982557537936a0008f422e5
😎 Deploy Preview	https://deploy-preview-920--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: 99 (🔴 down 1 from production) Accessibility: 99 (🔴 down 1 from production) Best Practices: 96 (🔴 down 4 from production) SEO: 91 (🟢 up 5 from production) PWA: - View the detailed breakdown and full score reports

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

Grajales-K · 2026-01-14T13:20:00Z

I check the accessibility on my side and it's 100.

image accesibiliy

jenny-alexander

This is solid work @Grajales-K! Your wireframe matches the exercise requirements almost perfectly.
I appreciate the extra effort you put into making your buttons have extra styling 👌

I left a few comments for you to review.

jenny-alexander · 2026-01-15T03:55:00Z

Wireframe/index.html

+        <a href="" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+      </div>
+    </div> 
+    <div class="botton-bar">


There is a small typo here in your class name.

Thank you very much for your kind and helpful review. I will address all the comments you left for me, and I appreciate your time.

I fixed the typo. thanks

jenny-alexander · 2026-01-15T03:55:31Z

Wireframe/index.html

+      </ul>
+    </div>
+    <div class="footer-content">
+      <h3>Follow Us</h3>


You might consider adding an href value to your social links. Currently, clicking on them brings me nowhere.

thank you for your suggestion. I added the CYF link to my social footer.

jenny-alexander · 2026-01-15T03:55:54Z

Wireframe/index.html

+      <h3>Contact Us</h3>
+      <p>Email: info@example.com</p>
+      <p>Phone: +44 020484 800084</p>
+      <p>Adresss: Threadneedle Street, London, EC2R 8AH</p>


Typo in Address

Thank you! I have corrected the typo in the address.

jenny-alexander · 2026-01-15T04:06:25Z

Wireframe/index.html

+    </p>
+  </header>
+  <main>
+    <section>


💡 You have the README card defined as a <section>, while the other two topics are defined as an <article>. This is okay, however, it can be improved by making all 3 cards as <article>.
The reason being is that they are each a self-contained topic on their own.
If you wanted to use <section> and <article> in index.html, you could consider using the <section> as a container wrapper for the 3 <article> tags.

<section>  <article>...</article>  <article>...</article>  <article>...</article>  </section>

@jenny-alexander, thank you for the clarification regarding the section and articles. I will change it to have three articles. 3 articles

jenny-alexander · 2026-01-15T04:07:10Z

Wireframe/notes.md

Since the exercise requirements do not list adding a notes.md file, I suggest to remove it from the PR completely.

jenny-alexander · 2026-01-15T04:19:34Z

Wireframe/index.html

+      <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" class="a-button" aria-label="Read More about uses of git branches (will redirect to another page)" target="_blank" >Read more</a>
+    </article>
+  </main>
+  <footer>


Nit: Your footer takes up approximately 30% of the the page. In future, consider having the footer a bit smaller in order to maximize space for website content.

Hi @jenny-alexander, I adjusted some sizes in the footer layout. Please let me know if it takes up less space now. or still bigger. Thank you!

jenny-alexander · 2026-01-17T22:33:18Z

@Grajales-K, thanks for addressing my comments. Everything looks good now. 🙌

Grajales-K added 19 commits December 29, 2025 22:41

tick the check list in the PR

9100029

added a new section and 2 articles

d510d37

added border to visualize the how clamp works in main

db40dd0

added some blue style and center the header

9b30f12

update the var --space to make more smooth the transition

4920811

added title and a paragraph in the header

bdf22cb

added img for section and article

1dbaa49

changed the color of h3

1ee5ade

added information, titles and href in the buttons

4362903

updated and organized the code following the structure of its html

a2e4d09

added some options for wireframe img tag

9714b8e

update text in the main section and first article

7121945

update stylish of buttons and text

eb79083

resized images to fit in its containers

00cc5df

refactor: improve SEO and accessibility for onboarding page

5f6b40d

- Added meta description for better SEO indexing. - Added descriptive alt text to all images for screen readers. - Standardized image dimensions to prevent layout shifts and improve rendering.

added to the tag anchor

6152f4b

-aria-label - target: to open a new tab

fixed

19546d9

-href in each anchor

added

46ba5d8

-hover to the anchor -effects before and after

briefly explanation of the project

b0dfa1a

This comment has been minimized.

Sign in to view

Grajales-K added 🏕 Priority Mandatory This work is expected 📅 Sprint 1 Assigned during Sprint 1 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Onboarding The name of the module. labels Jan 3, 2026

This comment has been minimized.

Sign in to view

github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 9, 2026

Grajales-K added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 9, 2026

This comment has been minimized.

Sign in to view

github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 9, 2026

This file was redo it because is not causing problems

abc60d7

Grajales-K added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 9, 2026

jenny-alexander self-requested a review January 14, 2026 13:14

jenny-alexander added Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 14, 2026

Grajales-K added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 14, 2026

jenny-alexander reviewed Jan 15, 2026

View reviewed changes

Grajales-K added 5 commits January 16, 2026 18:33

removed notes.md

a1fc9f2

update error typo in the address and class bottom-bar

82479df

fix: update footer links to point to correct URLs

24cca99

refactor: change section to article for semantic HTML improvement

e0972a5

fix: adjust footer styles for improved layout and readability

c802cf1

Grajales-K added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 16, 2026

Grajales-K requested a review from jenny-alexander January 16, 2026 21:17

Grajales-K added 3 commits January 30, 2026 11:42

recover: recoveing a pic from my commit 1dbaa49

0fee70d

deleted picture, testing the recovery command

0987492

recovered a img from the hash 1dbaa49

b272786

Uh oh!

Conversation

Grajales-K commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Learners, PR Template

Changelist

Questions

Uh oh!

netlify bot commented Jan 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!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Grajales-K commented Jan 14, 2026

Uh oh!

jenny-alexander 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!

jenny-alexander commented Jan 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Grajales-K commented Jan 3, 2026 •

edited

Loading

netlify bot commented Jan 3, 2026 •

edited

Loading