** 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><html></code>
<code><head></code>
<code><body></code>
<p>HTML documents are structured with elements that contain tags and
content.</p>
<code><h1>Header</h1></code>
<ul>
<li><div>: A container element</li>
<li><p>: A paragraph element</li>
<li><a>: An anchor element for links</li>
<li><img>: An image element</li>
<li><ul>: 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 = () => { return <h1>Hello,
World!</h1> }</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 **
