Skip to content

Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 1 | Wireframe to Web Code#1038

Closed
mahmoudshaabo1984 wants to merge 5 commits intoCodeYourFuture:mainfrom
mahmoudshaabo1984:feature/wireframe
Closed

Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 1 | Wireframe to Web Code#1038
mahmoudshaabo1984 wants to merge 5 commits intoCodeYourFuture:mainfrom
mahmoudshaabo1984:feature/wireframe

Conversation

@mahmoudshaabo1984
Copy link
Copy Markdown

@mahmoudshaabo1984 mahmoudshaabo1984 commented Jan 24, 2026 •
edited
Loading

I have successfully completed the Wireframe to Web Code assignment for Sprint 1.

Work Done:

  • Created a semantic HTML5 skeleton using header, nav, main, article, and footer tags.
  • Linked the external style.css file to the HTML document.
  • Organized the content structure to match the provided wireframe layout.
  • Verified that the styles are correctly applied to the HTML elements.<!--

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

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 24, 2026 •
edited
Loading

✅ Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 2319955
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/697de6d594398800080e4bf6
😎 Deploy Preview https://deploy-preview-1038--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: 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.

@github-actions

This comment has been minimized.

Sign in to view
@mahmoudshaabo1984 mahmoudshaabo1984 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
@mahmoudshaabo1984 mahmoudshaabo1984 changed the title Sheffield | Wireframe to Web Code | Mahmoud Shaabo Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 1 | Wireframe to Web Code Jan 24, 2026
@mahmoudshaabo1984
Update: Added 3 articles as per wireframe requirements
b03d5d3
@mahmoudshaabo1984
Refactor: Improve wireframe skeleton and CSS variables
1154e97 
- Enhanced CSS Variables with more semantic naming and additional color/spacing options

- Added responsive design with media queries for mobile devices

- Improved accessibility with ARIA labels and proper navigation links

- Added hover effects for better user interaction

- Improved semantic HTML structure with descriptive comments

- Standardized spacing and layout using CSS Variables consistently
@mahmoudshaabo1984
Finalize CSS styles for wireframe
3e74d45
@cjyuan cjyuan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 27, 2026
@cjyuan
Copy link
Copy Markdown
Contributor

cjyuan commented Jan 29, 2026

You have a good start so far. The page looks nice and the code is free of errors.

According to the spec in the README.md file, the content of the three articles on the page should be
explaining:

  • What is the purpose of a README file?
  • What is the purpose of a wireframe?
  • What is a branch in Git?

In addition, the layout of the page should look like what is shown in the image wireframe.png. Can you try uploading the wireframe.png image to an AI tool and ask it to help you understand what the wireframe "looks" like?

The spec also requires that footer to be fixed at the bottom of the viewport. Can you also try using AI to find out what "fixed at the bottom of the viewport" mean?

I strongly encourage you to explore using AI to complete the implementation.

@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 29, 2026
@mahmoudshaabo1984 mahmoudshaabo1984 changed the title Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 1 | Wireframe to Web Code Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 1 | Wireframe to Web Code Jan 31, 2026
@mahmoudshaabo1984 mahmoudshaabo1984 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 31, 2026
@cjyuan
Copy link
Copy Markdown
Contributor

cjyuan commented Jan 31, 2026

The layout looks great!

The footer is not yet fixed at the bottom of the viewport. Viewport refers to the browser's display area. Can you add CSS to make the footer always shown at the bottom of the viewport even when the user scrolls the page?

@cjyuan cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 31, 2026
@mahmoudshaabo1984
Copy link
Copy Markdown
Author

mahmoudshaabo1984 commented Jan 31, 2026

Footer has been correctly fixed

@mahmoudshaabo1984 mahmoudshaabo1984 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 31, 2026
@cjyuan
Copy link
Copy Markdown
Contributor

cjyuan commented Jan 31, 2026

That was quick. Excellent work!

@cjyuan cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Reviewed Volunteer to add when completing a review with trainee action still to take. labels Jan 31, 2026
@mahmoudshaabo1984 mahmoudshaabo1984 mentioned this pull request Feb 11, 2026
Open
@illicitonion
Copy link
Copy Markdown
Member

illicitonion commented May 4, 2026

Closing PR because the January ITP run has finished. Feel free to re-open if you're still working on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mahmoudshaabo1984 @cjyuan @illicitonion