forked from gihantha/-HactoberFest2020-For_All_Beginers-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Technical-Documentation-Page.html
82 lines (82 loc) · 4.15 KB
/
Technical-Documentation-Page.html
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
<html>
<!--This example uses the default bootstrap stylesheet-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--provides a full-width container that can expand or collapse based on the size of viewport-->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-12 col-xs-12">
<nav id="navbar">
<h3>Technical Documentation</h3>
<!--content stacking for smaller screens-->
<ul class="nav nav-pills nav-stacked">
<!--internal linking to the respective sections-->
<a class="nav-link" href="#Introduction" rel="internal">
<li>Introduction</li>
</a>
<a class="nav-link" href="#What_you_should_already_know" rel="internal">
<li>What you should already know</li>
</a>
<a class="nav-link" href="#About_Topic" rel="internal">
<li>About the topic</li>
</a>
<a class="nav-link" href="#Topic_1" rel="internal">
<li>Topic 1</li>
</a>
<a class="nav-link" href="#Topic_2" rel="internal">
<li>Topic 2</li>
</a>
</ul>
</nav>
</div>
<div class="col-md-10 col-sm-12 col-xs-12">
<main id="main-doc">
<section class="main-section" id="Introduction" >
<!--basic styling for the headings, better practice to do the same in a css file as the styling is same for all headers-->
<h3 style = "background: black; color: white">Introduction</h3>
<article>
<p>Some content about the main topic, for example Java documentation introduction about the language
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<h3 style = "background: black; color: white">What you should already know</h3>
<article>
<p>Background information before getting into the topic:</p>
<!--creating list using html-->
<li>Some list content</li>
<li>Prerequisites.</li>
<li>Workings and assumptions</li>
<p>Any other content to be covered before learning this topic</p>
</artice>
</section>
<section class="main-section" id="About_Topic">
<h3 style = "background: black; color: white">About topic</h3>
<article>
<p>More lines about the topic. For example, how the basic functionality works, features etc...</p>
<p>
Technical documentation should be thorough and to the point
</p>
<p>
Write about features, comparisons with other languages etc
</p>
</article>
</section>
<section class="main-section" id="Topic_1">
<h3 style = "background: black; color: white">Topic 1</h3>
<article>
Getting started with the actual documentation content
<code>This would come in a different color and font indicating lines of code
</code>
</article>
</section>
<section class="main-section" id="Topic_2">
<h3 style = "background: black; color: white">Topic 2</h3>
<p>
Another topic about the main topic, for example, if the topic is Java, this could be variables or data types in Java
</p>
</section>
</main>
</div>
</div>
</div>
</html>