ITP-2025-1 | Daniela Fajardo | week 1 | 01- wireframe to web code

[ldfajardo10-tech]

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

HTML and CSS files edited
tested in lighthouse with 100 score

[tam-fr]

Thank you for the information. All are ok for me...

[tam-fr]

ok

[talmurshidi]

Well done, @ldfajardo10-tech

What You Did Well

• Excellent semantic HTML structure with <header>, <main>, <article>, <section>, and <footer>.
• The header includes a clear title and short description — fully meets the acceptance criteria.
• Used images with descriptive alt text, improving accessibility.
• Each article/section includes a title, summary, and “Read more” link — exactly as required.
• The links are external and relevant to each topic.
• No CSS or JS inline — the file correctly links to the provided style.css.
• Content is meaningful and well-written, showing good understanding of the three concepts.
• Should achieve a high Lighthouse Accessibility score (≈100).

What Needs Improvement

• The structure should consistently use <article> for each topic instead of mixing <article> and <section> — this helps semantic clarity and uniform layout when using the provided CSS grid.
• Add a target="_blank" and rel="noopener noreferrer" to external links for best practice when linking outside sites.
• Minor accessibility improvement: capitalize the final footer sentence or wrap author info in a <small> tag for semantics.
• The class class="container" on <a> elements is unnecessary unless styled — remove or rename it meaningfully.

Example Corrections

<main>
  <article>
    <img src="readme-automatic-toc.png" alt="GitHub README example" />
    <h2>Purpose of a README file</h2>
    <p>
      README files document a project's structure, purpose, and usage
      so others can easily understand and navigate it.
    </p>
    <a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files"
       target="_blank" rel="noopener noreferrer">Read more</a>
  </article>

  <article>
    <img src="wireframe-example-plain.png" alt="Wireframe layout example" />
    <h2>What is a wireframe?</h2>
    <p>
      A wireframe is the skeletal structure of a digital product.
      It defines layout and content placement without focusing on design.
    </p>
    <a href="https://balsamiq.com/blog/what-are-wireframes/"
       target="_blank" rel="noopener noreferrer">Read more</a>
  </article>

  <article>
    <img src="1_K9scAx1Ezd-KJFabaYseCw.png" alt="Git branch visual" />
    <h2>What is a branch in Git?</h2>
    <p>
      A branch in Git is a movable pointer to a specific commit.
      It allows developers to work on features independently before merging.
    </p>
    <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
       target="_blank" rel="noopener noreferrer">Read more</a>
  </article>
</main>

<footer>
  <p><small>Website created as an exercise by HYFBE student.</small></p>
</footer>