Module-Onboarding/Wireframe/index.html at cbf863e7e0a7126e0e2f0c54d5cb8797e9bf802a · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learning Git and Development Tools</title>
  <meta name="description" content="Learn about README files, wireframes, Git branches, and practice with an accessible HTML form." />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Learning Git and Development Tools</h1>
    <p>Understanding README files, wireframes, and Git branches</p>
  </header>

  <main>
    <section class="articles">
      <article class="feature">
        <img src="https://docs.github.com/assets/cb-55933/mw-1440/images/help/repository/readme-links.webp"
             alt="Scrabble tiles spelling out README on top of papers">
        <h2>What is the purpose of a README file?</h2>
        <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>
        <a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Read More</a>
      </article>

      <div class="row">
        <article>
          <img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg"
               alt="Notebook sketch showing a website wireframe layout">
          <h2>What is the purpose of a wireframe?</h2>
          <p>A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.</p>
          <a href="https://www.productplan.com/glossary/wireframe/" target="_blank" rel="noopener noreferrer">Read More</a>
        </article>

        <article>
          <img src="https://media.istockphoto.com/id/876487150/photo/abstract-background-of-source-code-branch-3d-rendering.jpg?b=1&s=612x612&w=0&k=20&c=P5xSmni20OHy5EqfydTFwiCCN_xRzAOGToUKXAPqZ_o="
               alt="3D abstract image representing Git branching">
          <h2>What is a branch in Git?</h2>
          <p>A branch in Git is a separate line of development that allows you
            to work on new features or bug fixes without affecting the main
            codebase. Once changes are ready, branches can be merged back into
            the main branch.</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>
      </div>
    </section>

    <!-- Example form with stricter name validation -->
    <section>
      <h2>Order a T-shirt</h2>
      <form>
        <label for="name">Full Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          minlength="2"
          pattern="^(?!\s*$).+"
          autocomplete="name"
          required
          title="Name must be at least 2 characters and not just spaces."
        />
        <button type="submit" aria-label="Submit T-shirt order">Submit</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 Learning Git and Development Tools | Contact: info@example.com</p>
  </footer>
</body>
</html>