Module-Onboarding/Wireframe/index.html at 75cc4ab0d68f71a54243bfd04c4d9c3fd18019ec · CodeYourFuture/Module-Onboarding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wireframe</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <!-- Page Header -->
  <header class="page-header">
    <h1>Featured Articles</h1>
    <p>Explore our most recent and highlighted articles in one place.</p>
  </header>

  <!-- Main Content -->
  <main class="content">
    <!-- Featured Article -->
    <article class="featured">
      <div class="image">
        <img src="ReadMeImages.png"
          alt="Read me Article image" />
      </div>
      <div class="text">
        <h2>What is the purpose of a README file?</h2>
        <p>
          A README file serves as the main introduction to a project and helps users and developers quickly understand
          what it is, what it does, and how to use it. It typically explains the project’s purpose and key features,
          provides basic instructions for installation or usage, and offers important details such as dependencies or
          setup requirements. A README may also include contribution guidelines, licensing information, and contact
          details, making it easier for others to collaborate and maintain the project. Overall, the purpose of a README
          file is to clearly communicate essential information so the project is easy to understand, use, and contribute
          to.
        </p>
        <a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read
          more</a>
      </div>
    </article>

    <!-- Two-column Articles -->
    <section class="grid">
      <article class="card">
        <div class="image">
          <img
            src="WireFrameImage.png"
            alt="Wire Frame Article image" />
        </div>
        <div class="text">
          <h3>What is the purpose of a wireframe?</h3>
          <p>
            The purpose of a wireframe is to provide a visual blueprint of a website or application before it is fully
            designed or built. It outlines the layout, structure, and placement of elements such as headers, content
            areas, images, and navigation without focusing on colors or detailed styling. Wireframes help designers,
            developers, and stakeholders understand how content will be organized, identify usability issues early, and
            plan functionality efficiently.
          </p>
        <a href="https://www.geeksforgeeks.org/websites-apps/purpose-of-wireframing-in-web-design-process/">Read
          more</a>
      </div>
    </article>


      <article class="card">
        <div class="image">
          <img
            src="GitBranchesImage.png"
            alt="Git Branches Article image" />
        </div>
        <div class="text">
          <h3>What is a branch in Git?</h3>
          <p>
            A branch in Git is a separate line of development that allows you to work on changes without affecting the
            main codebase. It lets you create and test new features, fix bugs, or experiment with ideas independently
            from the main branch (often called main or master). Branches make it easy to manage multiple versions of a
            project at the same time and safely merge completed work back into the main code when it is ready.
          </p>
          <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
        </div>
      </article>
    </section>
  </main>

  <!-- Footer -->
  <footer class="footer">
    <p>
      © 2026 Featured Articles. All rights reserved.
    </p>
  </footer>
</body>

</html>