Scribd
Upload
4 views

build-a-technical-documentation-page

The document is a technical documentation page that covers key web development topics including HTML, CSS, JavaScript, React JS, and essential web development tools. Each section provides a brief overview, code examples, and lists of important elements or concepts. The layout includes a fixed navigation bar for easy access to different sections.

Uploaded by

mayank.bt17
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
4 views

build-a-technical-documentation-page

The document is a technical documentation page that covers key web development topics including HTML, CSS, JavaScript, React JS, and essential web development tools. Each section provides a brief overview, code examples, and lists of important elements or concepts. The layout includes a fixed navigation bar for easy access to different sections.

Uploaded by

mayank.bt17
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 **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<nav id="navbar">
<header>Technical Documentation</header>
<a href="#HTML_Basics" class="nav-link">HTML Basics</a>
<a href="#CSS_Styling" class="nav-link">CSS Styling</a>
<a href="#JavaScript_Fundamentals" class="nav-link">JavaScript
Fundamentals</a>
<a href="#React_JS" class="nav-link">React JS</a>
<a href="#Web_Development_Tools" class="nav-link">Web Development Tools</a>
</nav>

<main id="main-doc">
<section class="main-section" id="HTML_Basics">
<header>HTML Basics</header>
<p>HTML stands for HyperText Markup Language.</p>
<p>It is used to structure content on the web.</p>
<code>&lt;html&gt;</code>
<code>&lt;head&gt;</code>
<code>&lt;body&gt;</code>
<p>HTML documents are structured with elements that contain tags and
content.</p>
<code>&lt;h1&gt;Header&lt;/h1&gt;</code>
<ul>
<li>&lt;div&gt;: A container element</li>
<li>&lt;p&gt;: A paragraph element</li>
<li>&lt;a&gt;: An anchor element for links</li>
<li>&lt;img&gt;: An image element</li>
<li>&lt;ul&gt;: An unordered list element</li>
</ul>
</section>

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


<header>CSS Styling</header>
<p>CSS stands for Cascading Style Sheets.</p>
<p>It is used to style HTML elements on a webpage.</p>
<code>background-color: #fff;</code>
<code>font-size: 16px;</code>
<code>margin: 0 auto;</code>
<p>CSS has selectors, properties, and values that define the
presentation of a page.</p>
<ul>
<li>color: The text color of an element</li>
<li>border: Defines the borders of an element</li>
<li>padding: The space inside the element</li>
<li>font-family: Specifies the font for an element</li>
<li>display: Defines how the element is displayed</li>
</ul>
</section>
<section class="main-section" id="JavaScript_Fundamentals">
<header>JavaScript Fundamentals</header>
<p>JavaScript is a programming language that allows you to create
dynamic content.</p>
<p>It is primarily used to add interactivity to web pages.</p>
<code>let x = 5;</code>
<code>function greet() { alert("Hello World"); }</code>
<code>document.getElementById("id").innerHTML = "Hello";</code>
<ul>
<li>Variables: Used to store data (e.g., let, const, var)</li>
<li>Functions: A block of code designed to perform a task</li>
<li>Events: Actions that can trigger functions</li>
<li>DOM Manipulation: Interacting with HTML elements via
JavaScript</li>
<li>Loops: Repeating code with conditions</li>
</ul>
</section>

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


<header>React JS</header>
<p>React JS is a JavaScript library for building user interfaces.</p>
<p>It allows for building interactive UI components in a declarative
way.</p>
<code>import React from 'react';</code>
<code>const App = () =&gt; { return &lt;h1&gt;Hello,
World!&lt;/h1&gt; }</code>
<code>ReactDOM.render(<App />, document.getElementById('root'));</code>
<ul>
<li>Components: Reusable building blocks in React</li>
<li>JSX: A syntax extension that combines HTML with JavaScript</li>
<li>State: Data that can change over time in a component</li>
<li>Props: Inputs to a component that help customize its
behavior</li>
<li>useEffect: Hook for side effects in functional components</li>
</ul>
</section>

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


<header>Web Development Tools</header>
<p>Web development tools help developers create and test web pages.</p>
<p>Some essential tools for web development include text editors,
version control systems, and debugging tools.</p>
<code>Visual Studio Code</code>
<code>Git</code>
<code>Chrome Developer Tools</code>
<ul>
<li>Text Editors: VS Code, Sublime Text, Atom</li>
<li>Version Control: Git, GitHub</li>
<li>Build Tools: Webpack, Gulp</li>
<li>Package Managers: npm, Yarn</li>
<li>Preprocessors: Sass, LESS</li>
</ul>
</section>
</main>

</body>
</html>
** end of undefined **

** start of undefined **

/* Basic Layout */
body {
display: flex;
margin: 0;
}

#navbar {
width: 250px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background-color: #333;
color: white;
padding-top: 20px;
box-sizing: border-box;
padding-left: 20px;
}

#navbar header {
font-size: 1.5em;
margin-bottom: 20px;
}

.nav-link {
display: block;
color: white;
margin: 10px 0;
text-decoration: none;
}

.nav-link:hover {
text-decoration: underline;
}

/* Main content */
#main-doc {
margin-left: 260px;
padding: 20px;
}

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

header {
font-size: 1.5em;
color: #333;
}

code {
display: block;
background-color: #f4f4f4;
padding: 10px;
margin: 10px 0;
}

ul {
margin: 10px 0;
}

li {
list-style-type: square;
margin: 5px 0;
}

/* Media Queries */
@media (max-width: 768px) {
#navbar {
width: 100%;
height: auto;
position: relative;
margin-bottom: 20px;
}

#main-doc {
margin-left: 0;
}
}

** end of undefined **

You might also like