Birmingham | 26-ITP-May | Ogbemi Mene | Sprint 2 | Wireframe onboarding

[meneogbemi42-bit]

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

I generated this code myself and its a wireframe of a website defining the purpose of readme file and branch in GIt.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	e4b27d0
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a15bb523f892b000852a5f8
😎 Deploy Preview	https://deploy-preview-1305--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: 91 (🟢 up 5 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.

[cjyuan]

You have a folder name "Module-Onboarding" in your repo on this branch.

You need to remove that folder or else the Validation bot will reject your PR.

[cjyuan]

1. According to https://validator.w3.org/, there is an error in your HTML code. Can you fix it?

2. To meet the requirement "The articles section contains three distinct articles, each with its own unique image, title, summary, and link.", can you use distinct images among the articles?

3. There are some inconsistent spellings in the text content. Can you address this issue with the help of an AI tool?

4. The code is not yet consistently formatted. You may want to follow the suggestions in Format Code and Make Logical Commits in VS Code to keep your code consistently formatted.

5. In terms of the page layout, good progress so far! I'd like you to compare your page carefully against the wireframe and identify any differences in alignment and positioning of elements.

   Once you've done that review, revisit your implementation and make adjustments where needed to bring the layout closer to the wireframe.

   You will likely need to make some changes in style.css to achieve this.

[cjyuan]

1. There are still some inconsistencies and spelling mistakes in the text.

   Could you run it through an AI tool to identify any potential improvements, even minor ones, to help ensure the content is fully polished?

2. The code is not yet consistently formatted.

   VS Code formatter could be used to keep our code consistently formatted.

   For more info about enabling "Format on Save" in VS Code or use VS Code's "Format Document" feature,
   please refer to this guide.

3. There is still room to improve the page layout to better match the wireframe. Please compare your implementation carefully against the wireframe and identify any discrepancies in the alignment and positioning of elements and text, as well as the dimensions of images.

[cjyuan]

Here are some areas that can still be improved:

• Do the height of the images in articles 2 and 3 align?
• Do the title and summary of articles 2 and 3 align (start on the same horizontal position)?
• Are the size and padding space of all "READ MORE" links consistent?
• Where does the text of the PAGE TITLE located in the wireframe?
• Where does the text of the subtitle "AND SHORT DESCRIPTION" located?
• Where does the text of the footer located?

[cjyuan]

On a separate note, could you look up the common conventions for writing commit messages?

[cjyuan]

To better match the wireframe, can you keep the title of articles 2 and 3 align (so that they appear on the same row)?

[cjyuan]

Why name this file Untitled-1.css? Why not write the CSS code in style.css?

[cjyuan]

Do you still need this image in your implementation? If not, can you remove it to keep the PR branch clean?

[cjyuan]

Can you walk me through how you chose this RGB value?

[cjyuan]

It is a better practice to control the image dimension in CSS.