London | 26-ITP-Jan| Daniel Solomon| Sprint 1 | Wireframe

[danisoloo]

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 have cahnged the given default html by my own code to make it work as recquired

I moified the Cs code by my own and improved the light house test to 100

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

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

---

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

[cjyuan]

• The Changelist section should include a brief description of the changes you made in this PR. Can you make the description more informative?

• According to https://validator.w3.org/, there is a warning in your code.
  Can you address the warning?

[cjyuan]

Why is there a form element in the wireframe implementation?

[danisoloo]

The

element is included because it provides the functional logic for the interaction. Even in a wireframe, it serves three main purposes:

Native Validation: It enables the browser to enforce the required, minlength, and pattern rules automatically.

Accessibility: It tells screen readers that these elements are related, and it allows users to submit by pressing the "Enter" key.

Data Handling: It acts as a container that captures the input data to be sent to a server or processed by a script.

[cjyuan]

Line 22 can be better formatted as:

    <p>
      A README file introduces and explains a project. It usually contains 
      instructions on how to install, use, and contribute to the project. It 
      helps others quickly understand the purpose and usage of your code.
    </p>

To understand why, you can ask AI these questions:

• How HTML treats multiple 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.

[danisoloo]

I have updated line 22

[cjyuan]

Did you forget to push your changes to GitHub?

[cjyuan]

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.