Scribd
Upload
17 views

Build A Technical Documentation Page

Uploaded by

boobeshkumar6109
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views

Build A Technical Documentation Page

Uploaded by

boobeshkumar6109
Copyright
© © All Rights Reserved
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