Module-Onboarding/Wireframe/index.html at 0e5962a8ea9c4f6d8712aac2c4a21adfd47637f8 · 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">
            <h3> Definition </h3>
            <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">
              <h3> Definition </h3>
              <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>
                <h3>Summary of Wireframe</h3>
                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">
              <h3> Definition </h3>
              <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>
                 <h3>Summary of Branching</h3>
                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>
    </div>
    <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>
  </body>
</html>