Module-Onboarding/Wireframe/index.html at c67e88a271c25bc463f0f77fcbd6b0738390e499 · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>
    <div class="page">

    <header>
      <h1>Course Work on Wireframe</h1>
      <p>
        A Course Work on Wireframe and How Web Developers Use it to Develop Web
        Codes.
      </p>
    </header>
    <main>
      <section class="readme">
        <img id="svg1" src="./placeholder.svg" alt="" />
        <h2>A README file</h2>
        <article class="article1">
          <p>
            According to wikipedia, a A README file contains descriptive
            information about the content of a directory in which the file is
            located. The scope orientational information about the directory
            content.
          </p>
        </article>
        <details >
          <summary>
            <h3>Summary of README File</h3>

            A README.md is a key document in repositories, especially on GitHub.
            It introduces the project, explains its purpose, setup, and usage,
            and helps users and developers contribute effectively. A
            well-written README is important because: Allows formatted
            documentation. The extension .md stands for markdown. It is meant to
            be the first document to be read by someone starting on the project.
            Gives a high-level description: what this software or project does,
            why it exists, who it is for and how to install / configure. It can
            include code examples, API usage, command-line usage, etc. It states
            the license under which the software is released, gives credit to
            authors or collaborators. Looks polished when hosted as a webpage.
          </summary>
        </details>

        <a
          href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
          >Read more</a
        >
      </section>

      <div class="sub-main">
        <section class="wireframe">
          <img
            id="svg2"
            src="./placeholder.svg"
            alt="placeholder"
          />
          <h3>What is the Purpose of Wireframes</h3>

          <article class="wireframe-article">
            <p>
              Wireframes are skeleton of the <br />

              This skeleton is a two-dimensional depiction of a pages interface
              <br />that shows the spacing of elements on the page, how content
              is prioritized, what functionalities are available, <br />and how
              users will interact with the site <br />

              They also play a vital role in connecting information architecture
              <br />to the visual aspects of the design by showing pathways
              between the various pages.
              <br />

              Wireframes are intentionally void of color, graphics and stylized
              fonts.
            </p>
          </article>
          <details>
            <summary>
              Wireframing is a quick and effective way to identify usability
              issues early on in your design process.
            </summary>
          </details>

          <a
            href="https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611"
            >Read More</a
          >
        </section>
        <section class="branch">
          <img
            id="svg3"
            src="./placeholder.svg"
            alt=" placeholder"
          />
          <h3>What is Branch in Git</h3>
          <article class="branch-article">
            <p>
              A Git branch is a separate workspace used to make changes without
              <br />
              affecting the main project. Once the work is complete, the changes
              <br />can be merged back into the main or master branch.
              <br />Branches make it easy to:
            </p>
            <ul>
              <li>Manage different tasks or features independently</li>
              <li>Test changes without affecting live code</li>
              <li>Collaborate with others efficiently</li>
            </ul>
          </article>
          <details>
            <summary>
              Without branching developers will not have the flexibility of
              <br />making changes and contributing to the main branch after a
              pull request
            </summary>
          </details>

          <a
            href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/"
          >
            Read More</a
          >
        </section>
      </div>
    </main>

    <footer>
      Other Useful Resources follow the Links
      <p>
        <a
          href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
          >ReadMe File</a
        >
        <a
          href="https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611"
          >Wireframe</a
        >
        <a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/">
          Git Branch</a
        >
      </p>
    </footer>
    </div>

  </body>
</html>