Clarify Wireframe specification and submission requirements

[cjyuan]

How should we update the Wireframe spec?

Current spec: https://github.com/CodeYourFuture/Module-Onboarding/blob/main/Wireframe/README.md

(1) Some aspects of the specification are unclear, which leads to different expectations among reviewers and trainees.

Use of placeholder content

• Should trainees use different images for each article, or is it acceptable to use the same placeholder image for all articles?
  • If the same placeholder image is allowed, can the alt attribute be an empty string?
• Can the README link be left empty?
• Does the footer’s placeholder text need to be replaced?

How closely the layout should match the wireframe

There are some of the layout details reviewers have (and have not) focused on:

• The page title and the short description beneath it should be centered.
• The left and right edges of the first article should align with the left edge of the second article and the right edge of the third article.
• Images should span the full width of their respective articles.
• The image heights in the second and third articles should align.
• Article content (title, summary, and "Read More" link) should be left-aligned.
• The "Read More" links should include a border.

---

(2) Requiring trainees to check the boxes in the PR description does not appear to be effective. Many trainees were unaware of these implicit requirements. We could make them explicit by stating that:

• Code should be formatted consistently.
• Code should be free of errors and warnings when checked using https://validator.w3.org/
• Page content should be free of spelling and grammar mistakes.

We could also include some instructions in the top-level README.md (similar to what is done in https://github.com/CodeYourFuture/Module-Structuring-and-Testing-Data/blob/main/readme.md
). For examples,

• How to use VS Code's "Format Document" feature to format code.
• How to enable "Format on Save" in VS Code.
• How to validate HTML using https://validator.w3.org/
  • Note: The W3C CSS Validation Service does not work well with custom properties.