London | 25-ITP-September | Carlos Abreu | Sprint 1 | Wireframe #906

carlosyabreu · 2025-10-10T13:35:35Z

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

@jenny-alexander
This PR is about the Wireframe project that needs to be included into CYF main project.
I want to add I've deleted the repo you reviewed before, create a new repo that I made a mistake again merging my local feature/wireframe branch with my local main then I push to main GitHub branch.
After talking with another reviewer on #cyf-code-review channel I was advice not to merge in any circumstance my local branch (feature/wireframe) with local repo main branch.
Then I delete again the repo (2nd time) and started it clean.
This repo is the last one and the one I want to be reviewed.
I add the deadline is today as I need it to be complete so I can apply for next stage called trainee.
Thank you for your understanding.

Questions

I think after deleting to time the repo now the PR is correct.

netlify · 2025-10-10T13:35:42Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`74ee279`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/68ec059273e2960008e972b4
😎 Deploy Preview	https://deploy-preview-906--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

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

kohanman · 2025-10-10T18:01:46Z

Hey dude, it's Khogan here👋, I saw you were waiting for your pull requests to be reviewed, have you done everything on here? - https://cyf-programming.netlify.app/onboarding/success/?

Even if the volunteers haven't completed your code review I'm just recommending you submit the pull requests/your coursework on the CYF course portal ASAP: https://application-process.codeyourfuture.io/
I think this needs to be done by tonight or it might automatically lock you out till the next ITP session in 2026.

cjyuan · 2025-10-10T20:43:19Z

Please improve your PR and code according to the PR Guide first.

…n side by side

…howing the two last queries (wireframe and git branch) side by side

…padding

carlosyabreu · 2025-10-11T16:01:52Z

@cjyuan and @jenny-alexander I fixed the mistake and I think it's working as requirement.

cjyuan · 2025-10-11T16:07:24Z

According to W3C validator, there are some errors in your code.
The footer is not yet fixed at the bottom of the viewport as specified in the requirement.
The checkboxes in the PR description are not yet properly checked in Markdown syntax.

Can you address these issues?

Have you tried feeding your code to AI for a second opinion?

jenny-alexander

@carlosyabreu - Your PR is almost complete but there are few things missing. I left a few comments for you to review.
(Sorry for not getting back to you earlier - I am working full time during the day & sometimes I don't have time at night either because of family obligations). 😄

jenny-alexander · 2025-10-11T20:09:34Z

Wireframe/index.html

+      <div class="top">
+        <section class="article">
+          <article>
+            <img src="placeholder.svg" alt="" />


This is the default image - can you update it with an image related to a readme article? The alt tag should have info (for a screen reader).

jenny-alexander · 2025-10-11T20:10:15Z

Wireframe/index.html

+      </div>
    </main>
+
    <footer>


The footer requirements state that it should be 'fixed'. This means that no matter where you scrolls on the page (up, down), the footer will always be visible. Can you make this change?

jenny-alexander · 2025-10-11T20:13:27Z

Wireframe/index.html

+            <p>
+              The readme file is used to explain what are the files uploaded and how it can be installed or used. It allows the owner to upload and add images and videos to help the reader navigate through the project. A well-written readme file is helpful for a new user or developer to get a good understanding about the project, its structure and attract more participants to add new features. 
+            </p>
+            <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Read more about README and its purpose.</a>


I noticed the button labels are a bit different from the wireframe.

Can you review the wireframe requirements here?
https://github.com/CodeYourFuture/Module-Onboarding/tree/main/Wireframe#wireframe

Notice the name of the button? It says 'Read More'.
🌱 Following the wireframe closely shows attention to detail and that you can implement a design as specified!

carlosyabreu · 2025-10-12T15:21:19Z

@jenny-alexander
Thanks for the suggestions.
I updated the README section image as suggested by you and well made the footer fixed.
Thanks

@cjyuan
I change the check-boxes making it properly checked according Markdown syntax as suggested by you.
The footer section has been updated and fixed.

carlosyabreu · 2025-10-12T15:27:35Z

@cjyuan & @jenny-alexander
Add alt attribute to the readme image section.
Thanks

cjyuan

According to https://validator.w3.org/, there are still errors in your HTML code. Can you fix all the errors and warnings in your HTML code?

cjyuan · 2025-10-12T16:10:06Z

Wireframe/index.html

+              <p>
+                A branch in Git allows developers to work on new features or fixes separately from the main codebase. This makes collaboration easier and ensures the main project stays stable while changes are tested.
+              </br>
+                In other words, it could be say a Git branch is an independent line of development that allows developers to work on new features, fixes, or experiments separately from the main codebase without affecting the stable version.
+              </br>
+                Branches enable collaboration, experimentation, and version control by letting multiple developers work simultaneously.
+              </p> 


Why use  ?

If "A branch ..." and "In other words ..." are two separate paragraphs, there is a more appropriate way to encode them as separate paragraphs. If it is a single paragraph, the text might not flow naturally on some screen width.

cjyuan · 2025-10-12T16:14:34Z

Wireframe/index.html

+            <p>
+              The readme file is used to explain what are the files uploaded and how it can be installed or used. It allows the owner to upload and add images and videos to help the reader navigate through the project. A well-written readme file is helpful for a new user or developer to get a good understanding about the project, its structure and attract more participants to add new features. 
+            </p>


Lines 22-24 can be better formatted as:

 The readme file is used to explain what are the files uploaded and how it can be installed or used. It allows the owner to upload and add images and videos to help the reader navigate through the project. A well-written readme file is helpful for a new user or developer to get a good understanding about the project, its structure and attract more participants to add new features. 

To understand why, you can ask ChatGPT these questions:

How HTML treats mutliple whitespace characters in text?

What's the advantage of not writing a long paragraph of text in a single line in HTML?

VSCode's "Format Document" feature can help us format our code for better readability and consistency, including breaking a long line of text into shorter lines of text.
To use the feature, right-click inside the code editor and select the option.

Please note that if there are syntax errors in the code, the "Prettier" extension may not format HTML code properly.

…priate in the context

carlosyabreu · 2025-10-12T16:48:26Z

@cjyuan
Thank you. I changed the lines 22-24 inside tag p as below:

A README file explains the contents of a project and how to install or use it. It often includes images, videos, and instructions to help readers navigate the project easily. A well-written README helps new users or developers understand the project's purpose and structure, and can attract more contributors to add new features.

Again thanks.

carlosyabreu · 2025-10-12T17:00:13Z

@cjyuan
I think after the change you suggested and I implemented it's clean and more readable.
Thanks.

cjyuan · 2025-10-12T17:04:22Z

You still haven't addressed this comment:

W3C validators still shows 3 warnings. Can you address those warnings?
In terms of "breaking a long line of text into multiple shorter lines of text", are there other long lines of text in your code that you could break into multiple lines of text?

carlosyabreu · 2025-10-12T17:18:22Z

@cjyuan
I changed the file adding the necessary elements as suggested by W3 Validator and now it passes the checks without any warning or errors.
Again thanks @cjyuan

cjyuan · 2025-10-12T17:21:48Z

Good job but that only addressed one of my comments. Can you address ALL comments?

cjyuan · 2025-10-12T17:29:20Z

I just noticed the changes you made also affected the layout of the page.

The use of <details> elements is not part of the requirements. When I expanded the details, the layout of the articles no longer matches the wireframe -- the last two articles no longer appear side by side.

carlosyabreu · 2025-10-12T19:49:54Z

@cjyuan
I messed up the code and it screwed up totally.
Now I made the necessary change and finally it's aligned as required.
It's been a great learning experience for me.
Thanks CJ Yuan for your help.

cjyuan · 2025-10-12T19:53:16Z

Changes look good. Well done.

Change: all the files in the folder

76d5ce9

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 10, 2025

carlosyabreu mentioned this pull request Oct 10, 2025

London | 25-ITP-September | Carlos Abreu | Sprint 1 | Wireframe #867

Closed

4 tasks

kohanman added the 📅 Sprint 1 Assigned during Sprint 1 of this module label Oct 10, 2025

cjyuan 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 Oct 10, 2025

carlosyabreu added 5 commits October 11, 2025 14:48

Change style.css file to make the two last images and it's descriptio…

ac5bf87

…n side by side

Made the header and subheader separated

bd42d00

Applied the change for index.html and style.css to make the webpage s…

671a72c

…howing the two last queries (wireframe and git branch) side by side

Reframe the code to make the width and height on the containers same …

c5489fb

…padding

Make the content-flex class hidden and delte the background propriety

d5c2285

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 11, 2025

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 11, 2025

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 11, 2025

jenny-alexander suggested changes Oct 11, 2025

View reviewed changes

carlosyabreu added 3 commits October 12, 2025 16:00

Fixed footer section

63b9936

Fixed Read more button

c7e007d

Deleted placeholder.svg and replace with readme-01 file

2a8fa3e

Add alt comment to the 1st image

2eccf39

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

Fixed and errors

8e94a7e

cjyuan reviewed Oct 12, 2025

View reviewed changes

Fixed summary element putting it inside detail tag as it's more appro…

0f1687c

…priate in the context

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

Change readme to README

8bdec68

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

Change the file so it passes w3validator check

5798088

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

Both images bellow the top are aligned horizontally

74ee279

carlosyabreu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Oct 12, 2025

This was referenced Oct 13, 2025

25-ITP-SEP | Onboarding | Carlos Abreu #914

Closed

25-ITP-SEP | Onboarding | Carlos Abreu carlosyabreu/Module-Onboarding#1

Open

Uh oh!

London | 25-ITP-September | Carlos Abreu | Sprint 1 | Wireframe #906

Are you sure you want to change the base?

London | 25-ITP-September | Carlos Abreu | Sprint 1 | Wireframe #906

Uh oh!

Conversation

carlosyabreu commented Oct 10, 2025 • 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 Oct 10, 2025 • 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!

kohanman commented Oct 10, 2025

Uh oh!

cjyuan commented Oct 10, 2025

Uh oh!

carlosyabreu commented Oct 11, 2025

Uh oh!

cjyuan commented Oct 11, 2025

Uh oh!

jenny-alexander left a comment

Choose a reason for hiding this comment

Uh oh!

jenny-alexander Oct 11, 2025

Choose a reason for hiding this comment

Uh oh!

jenny-alexander Oct 11, 2025

Choose a reason for hiding this comment

Uh oh!

jenny-alexander Oct 11, 2025

Choose a reason for hiding this comment

Uh oh!

carlosyabreu commented Oct 12, 2025

Uh oh!

carlosyabreu commented Oct 12, 2025

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

cjyuan Oct 12, 2025

Choose a reason for hiding this comment

Uh oh!

cjyuan Oct 12, 2025

Choose a reason for hiding this comment

Uh oh!

carlosyabreu commented Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carlosyabreu commented Oct 12, 2025

Uh oh!

cjyuan commented Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carlosyabreu commented Oct 12, 2025

Uh oh!

cjyuan commented Oct 12, 2025

Uh oh!

cjyuan commented Oct 12, 2025

Uh oh!

carlosyabreu commented Oct 12, 2025

Uh oh!

cjyuan commented Oct 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

carlosyabreu commented Oct 10, 2025 •

edited

Loading

netlify bot commented Oct 10, 2025 •

edited

Loading

carlosyabreu commented Oct 12, 2025 •

edited

Loading

cjyuan commented Oct 12, 2025 •

edited

Loading