Skip to content

Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 1 | Wireframe#1046

Open
Darkidd77 wants to merge 4 commits intoCodeYourFuture:mainfrom
Darkidd77:feature/wireframe
Open

Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 1 | Wireframe#1046
Darkidd77 wants to merge 4 commits intoCodeYourFuture:mainfrom
Darkidd77:feature/wireframe

Conversation

@Darkidd77
Copy link

@Darkidd77 Darkidd77 commented Jan 24, 2026 •
edited
Loading

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

  • Changed the main header title to "Github Learning" and updated the introductory text.
  • Added a new section with articles explaining GitHub, including images and descriptions for "What is GitHub?", "Branching" and "Commits".
  • Updated the footer text to reflect copyright for 2026.

Questions

Please, can you let me what you think?

@Darkidd77
Update index.html and style.css for GitHub Learning project
3aad5d9 
- Changed the main header title to "Github Learning" and updated the introductory text.
- Added a new section with articles explaining GitHub, including images and descriptions for "What is GitHub?", "Branching", and "Commits".
- Updated the footer text to reflect copyright for 2026.
@netlify
Copy link

netlify bot commented Jan 24, 2026 •
edited
Loading

✅ Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 775e6d8
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/69874e5d3aebc30008478dd9
😎 Deploy Preview https://deploy-preview-1046--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
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.

@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

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

This comment has been minimized.

Sign in to view
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

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

This comment has been minimized.

Sign in to view
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

Sign in to view
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 29, 2026
cjyuan
cjyuan reviewed Jan 30, 2026
View reviewed changes
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the wireframe image, the images in articles 2 and 3 have the same height. Can you also align the height of the images in articles 2 and 3 in your implementation?

Wireframe/index.html Outdated
<main>
<section>
<article >
<img src="data:image/png;base64,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" alt="picture shows GitHub logo" />
Copy link
Contributor

@cjyuan cjyuan Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Embedding an image as base64-encoded string in HTML makes reading and editing the HTML code difficult.
A better practice is to save the images as an external files.

Can you save all three images as external file? Alternatively, you can just use placeholder.svg in all three articles. Since this is a wireframe implementation, it does not matter much what images you use as the placeholders.

Copy link
Author

@Darkidd77 Darkidd77 Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted! Will start doing the fixes now, much appreciated CJ.

@cjyuan 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 Jan 30, 2026
@Darkidd77
Add CSS reset and new images for GitHub wireframe
81ee296 
- Updated style.css to include margin, padding, and min-height for body to ensure proper layout.
- Added new images: to the assets/images directory.
@Darkidd77
Refine image alt text and enhance CSS styles for layout and responsiv…
3b741ec 
…eness
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 7, 2026
@cjyuan
Copy link
Contributor

cjyuan commented Feb 7, 2026

Page looks good, but according to https://validator.w3.org/, there are errors in your code. Can you fix them?

@cjyuan cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 7, 2026
@cjyuan
Copy link
Contributor

cjyuan commented Feb 7, 2026

Please note that in CYF courses, the recommended way to inform the reviewer of your changes is to do both of the following:

  • Reply to their feedback.
    • In the responses, clarify how each piece of feedback was addressed to demonstrate that you've carefully reviewed the suggestions.
      • You may find the suggestions in this PR Guide useful.
    • Your response may trigger a notification (depending on the reviewer's settings), helping ensure they’re aware of the updates you’ve made.
  • Replace the "Reviewed" label by a "Needs review" label (which you have done -- great!)
    • Without this label, the reviewer would not know if your changes is ready to be reviewed.

@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 7, 2026
@cjyuan
Copy link
Contributor

cjyuan commented Feb 7, 2026

According to https://validator.w3.org/, there is still one warning in your code. Can you fix it?

@cjyuan cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cjyuan cjyuan cjyuan left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

Reviewed Volunteer to add when completing a review with trainee action still to take.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Darkidd77 @cjyuan