Scribd
Upload
2 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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 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
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