Module-Onboarding/Wireframe/index.html at 380064d2e928deb5ab70bad6974f43e62817e008 · 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
<!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>
    <header>
      <h1>Wireframe</h1>
      <p>
        Wireframe is low-fidelity, Visual Blueprint of a webpage or app
        interface.
      </p>
    </header>
    <main>
      <!-- what is the purpose of README article -->
      <article>
        <img
          src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203"
          alt="README image"
        />
        <h2>README file</h2>
        <details>
          <summary>
            The purpose of README file is to give information about the project
            and how to use it
          </summary>
          <p>
            A README file is the "front door" of your project. it is typically a
            text file (usuallyREADME.md using Markdown) located in the root
            directory of your code
          </p>
        </details>
        <a
          href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
          >Read more</a
        >
      </article>
      <!--purpose of wireframe article-->
      <article>
        <img
          src="https://github.com/Dagim-Daniel/Module-Onboarding/blob/main/Wireframe/wireframe.png?raw=true"
          alt=""
        />
        <h2>Purpose of Wireframe</h2>
        <details>
          <summary>It establish the basic Structure of a page.</summary>
          <p>
            wireframe is the perfect way for the designers to gauge how the user
            would interact with the interface. Before adding visual
            considerations like color or images, they serve as an outline to get
            the team on the same page early.
          </p>
        </details>
        <a href="https://medium.com/design-bootcamp/wireframes-5d63f9d760a8"
          >Read more</a
        >
      </article>
      <!-- what is branch git article -->
      <article>
        <img
          src="https://cdn.iconscout.com/icon/free/png-256/free-git-branch-logo-icon-svg-download-png-1982843.png"
          alt=""
        />
        <h2>Branch in Git</h2>
        <details>
          <summary>
            In Git, branch a pointer to a snapshot of your changes.
          </summary>
          <p>
            Branch is like a separate working copy of your project in Git. It
            allows you to make changes without affecting the main branch (often
            called "main" or "master").
          </p>
        </details>
        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
      </article>
    </main>
    <footer>
      <p>
        Author: Dagim Daniel :
        <a href="mailto:dagimdan19@gmail.com">dagimdan19@gmail.com</a>
      </p>
    </footer>
  </body>
</html>