Scribd
Upload
20 views

Build A Technical Documentation Page

Uploaded by

boobeshkumar6109
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views

Build A Technical Documentation Page

Uploaded by

boobeshkumar6109
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

** start of undefined **

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<nav id="navbar">
<header class="navbar-header">General Coding information</header>
<a class="nav-link" href="#HTML_and_CSS">HTML and CSS</a>
<a class="nav-link" href="#JavaScript">JavaScript</a>
<a class="nav-link" href="#Python">Python</a>
<a class="nav-link" href="#React">React</a>
<a class="nav-link" href="#APIs">APIs</a>
</nav>

<main id="main-doc">

<section id="HTML_and_CSS" class="main-section">


<header>HTML and CSS</header>
<p><span>The HyperText Markup Language or HTML</span> is the standard
markup language for documents designed to be displayed in a web browser. It defines
the meaning and structure of web content. It is often assisted by technologies such
as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>HTML code example: *</p>
<code> < p > this a paragraph element in HTML < /p > </p></code>
<p><span>Cascading Style Sheets (CSS)</span> is a style sheet language
used for describing the presentation of a document written in a markup language
such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS
is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.</p>
<p>CSS code example: *</p>
<code> p { text - align: is the CSS selector applied to align text of
the paragraph element } </code>

</section>

<section id="JavaScript" class="main-section">


<header>JavaScript</header>
<p><span>JavaScript</span>, often abbreviated as JS, is a programming
language that is one of the core technologies of the World Wide Web, alongside HTML
and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for
webpage behavior,[10] often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users'
devices.</p>
<p>JS code example: *</p>
<code> function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
</section>

<section id="Python" class="main-section">


<header>Python</header>
<p><span>Python</span> is a high-level, general-purpose programming
language. Its design philosophy emphasizes code readability with the use of
significant indentation.</p>
<p>Python code example: *</p>
<code> print('Hello, world!') </code>
</section>

<section id="React" class="main-section">


<header>React</header>
<p><span>React</span> (also known as React.js or ReactJS) is a free and
open-source front-end JavaScript library for building user interfaces based on
components. It is maintained by Meta (formerly Facebook) and a community of
individual developers and companies.</p>
<p>React code example: *</p>
<code> const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(< h1 >Hello, world!< /h1 >); </code>
</section>

<section id="APIs" class="main-section">


<header>APIs</header>
<p>An <span>Application Programming Interface (API)</span> is a way for
two or more computer programs to communicate with each other. It is a type of
software interface, offering a service to other pieces of software.[1] A document
or standard that describes how to build or use such a connection or interface is
called an API specification. A computer system that meets this standard is said to
implement or expose an API. The term API may refer either to the specification or
to the implementation. Whereas a system's user interface dictates how its end-users
interact with the system in question, its API dictates how to write code that takes
advantage of that system's capabilities.</p>
<p>Common font API's examples:</p>
<li>Google Fonts</li>
<li>Font Awesome</li>
<li>Mapbox</li>
<li>Adobe</li>
<li>GitHub</li>
</section>

<p><span class="code-caveat">(* lesser and greater than symbols are separated


to show code and not apply it in the example)</span></p>
</main>

</body>
</html>

** end of undefined **

** start of undefined **

@media (prefers-reduced-motion: no-preference) {


* {
scroll-behavior: smooth;
}
}

body {
display: flex;
font-family: Arial, sans-serif;
line-height: 1.3rem;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: white;
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100%;
}

.navbar-header {
font-size: 1.5em;
font-weight: bold;
color: whitesmoke;
margin: 10px 0 10px 10px ;
}

.nav-link {
display: block;
text-decoration: none;
text-transform: uppercase ;
letter-spacing: 0.1rem;
color: white;
transition: background-color 0.3s;
position: relative;
}

a {
border-top: 1px solid white;
padding: 10px
}

a:last-child {
border-bottom: 1px solid white;
}

.nav-link:hover {
background-color: #555;
}

main {
margin-left: 250px;
padding: 20px 40px 0 20px;
}

.main-section {
margin-bottom: 40px;
}

header {
font-size: 2em;
margin-bottom: 20px;
}

p {
line-height: 1.8rem;
margin-bottom: 20px;
}
span {
font-weight: bold;
font-size: 1.1rem;
text-decoration: underline;
}

.code-caveat {
font-weight: normal;
font-size: 0.75rem;
text-decoration: none;
font-style: italic;
}

code {
display: block;
background-color: #f7f7f7;
border-radius: 4px;
margin: 20px;
padding: 15px;
}

li {
margin: 10px 0 5px 20px;
list-style:circle
}

** end of undefined **

You might also like