<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>
<h1>Responsive Webdesign</h1></header>
<ul>
<li><a class="nav-link" href="#html-forms">Introduction to HTML Forms</a></li>
<li><a class="nav-link" href="#form-elements">HTML Form Elements</a></li>
<li><a class="nav-link" href="#css-basics">Basic CSS</a></li>
<li><a class="nav-link" href="#colors">CSS Colors</a></li>
<li><a class="nav-link" href="#box-model">CSS Box Model</a></li>
<li><a class="nav-link" href="#css-flexbox">CSS Flexbox</a></li>
<li><a class="nav-link" href="#typography">Typography</a></li>
<li><a class="nav-link" href="#accessibility">Accessibility</a></li>
<li><a class="nav-link" href="#pseudo-selectors">Pseudo-selectors</a></li>
<li><a class="nav-link" href="#intermediate-css">Intermediate CSS</a></li>
<li><a class="nav-link" href="#responsive-web-design">Responsive Web Design</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="html-forms">
<header>
<h2> Introduction to HTML Forms</h2>
</header>
<p>
HTML forms are used to collect user data and send it to a server. They consist of various form elements that allow users to input information, such as text, choices, buttons, and more.
</p>
<p>
An HTML form is created using the <code><form></code> element. The form contains different input elements like <code><input></code>, <code><textarea></code>, <code><select></code>, and <code><button></code> that users interact with.</p>
<h3><strong>Basic structure of an HTML form:</strong></h3>
<pre><code>
<form action="submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form></code>
</pre>
<p>
In this example:
<ul>
<li>The form has an <code>action</code> that determines where the data will be sent.</li>
<li>The <code>method</code> specifies how the data is transmitted (POST or GET).</li>
<li>The input elements (<code><input></code>) include a <code>type</code> to indicate what kind of data is being entered, such as text or email.</li>
</ul></p>
</section>
<section class="main-section" id="form_elements">
<header><h2>HTML Form Elements</h2></header>
<p>HTML offers various elements for user input. Below are the most commonly used ones:</p>
<h3><strong>1. Text Input</strong></h3>
<pre><code><input type="text" name="username" placeholder="Enter your name"></code></pre>
<p>A basic text field for short input.</p>
<h3><strong>2. Email Input</strong></h3>
<pre><code><input type="email" name="email" placeholder="Enter your email"></code></pre>
<p>Automatically validates if the input is a valid email address.</p>
<h3><strong>3. Password Input</strong></h3>
<pre><code><input type="password" name="password"></code></pre>
<p>Masks the input with dots or asterisks.</p>
<h3><strong>4. Textarea</strong></h3>
<pre><code><textarea name="message" rows="4" cols="30"></textarea></code></pre>
<p>Used for longer text input such as messages or comments.</p>
<h3><strong>5. Checkbox</strong></h3>
<pre><code><label><input type="checkbox" name="newsletter"> Subscribe to newsletter</label></code></pre>
<p>Lets users select or deselect an option.</p>
<h3><strong>6. Radio Buttons</strong></h3>
<pre><code><label><input type="radio" name="color" value="red"> Red</label>
<label><input type="radio" name="color" value="blue"> Blue</label></code></pre>
<p>Allows users to select only one option from a set.</p>
<h3><strong>7. Select Dropdown</strong></h3>
<pre><code><select name="language">
<option value="en">English</option>
<option value="nl">Dutch</option>
</select></code></pre>
<p>Used to create a dropdown menu with multiple options.</p>
</section>
<section class="main-section" id="#css-basics">
<header><h2>Basic CSS</h2></header>
<p>CSS (Cascading Style Sheets) is used to style and layout web pages. It helps control the appearance of HTML elements, such as text, images, and layout.</p>
<h3><strong>1. Changing Text Color</strong></h3>
<pre><code>h1 { color: blue;}</code></pre>
<p>This changes the text color of all <code><h1></code> elements to blue, making the heading stand out more.</p>
<h3><strong>2. Setting Background Color</strong></h3>
<pre><code>body { background-color: lightgray;}</code></pre>
<p>This sets the background of the whole page to light gray, giving the page a neutral tone.</p>
<h3><strong>3. Changing Font Size</strong></h3>
<pre><code>p {font-size: 16px;}</code></pre>
<p>This sets the font size of all paragraphs to 16 pixels, ensuring readability for the text.</p>
<h3><strong>4. Adding Borders</strong></h3>
<pre><code>img {border: 2px solid black;}</code></pre>
<p>This adds a solid black border around images, which can help make them visually distinct on the page.</p>
<h3><strong>5. Adding Padding</strong></h3>
<pre><code>div {padding: 10px;}</code></pre>
<p>This adds space inside the <code><div></code> element, around its content, preventing it from touching the edges of the element.</p>
<ul>
<li>CSS controls the look and feel of the website, making it more visually appealing.</li>
<li>CSS uses selectors to target HTML elements and apply styles to them.</li>
<li>Values like <code>px</code>, <code>%</code>, and <code>em</code> control size, spacing, and layout.</li>
<li>CSS can be written inline within an HTML element, in a <code><style></code> tag within the document head, or in an external stylesheet.</li>
<li>Basic properties include color, background-color, font-size, border, margin, and padding.</li>
</ul>
</section>
<section class="main-section" id="colors">
<header><h2>CSS Colors</h2></header>
<p>CSS allows you to add color to your webpage elements. There are several ways to define colors in CSS:</p>
<h3><strong>1. Named Colors</strong></h3>
<p>You can use common color names like <code>red</code>, <code>blue</code>, <code>green</code>, etc.</p>
<pre><code>h1 { color: red; }</code></pre>
<p>This will change the text color of the <code><h1></code> element to red.</p>
<h3><strong>2. Hexadecimal Colors</strong></h3>
<p>Hex codes start with <code>#</code> followed by 6 characters, usually representing RGB values.</p>
<pre><code>p { color: #00FF00; }</code></pre>
<p>This applies a green color to the text, using its hexadecimal representation.</p>
<h3><strong>3. RGB Colors</strong></h3>
<p>Use <code>rgb()</code> to define red, green, and blue values, where each value ranges from 0 to 255.</p>
<pre><code>div { background-color: rgb(255, 0, 0); }</code></pre>
<p>This sets the background color of the <code><div></code> element to red using the RGB model.</p>
<h3><strong>4. HSL Colors</strong></h3>
<p><code>hsl()</code> uses hue, saturation, and lightness to define colors. Hue is the color itself, saturation determines the intensity, and lightness sets the brightness.</p>
<pre><code>span { color: hsl(240, 100%, 50%); }</code></pre>
<p>This sets the color to a shade of blue with full saturation and medium lightness.</p>
<h3><strong>5. Opacity with RGBA</strong></h3>
<p>Add transparency using <code>rgba()</code>, which includes an alpha value for opacity, where <code>1</code> is fully opaque and <code>0</code> is fully transparent.</p>
<pre><code>.box { background-color: rgba(0, 0, 255, 0.5); }</code></pre>
<p>This creates a semi-transparent blue background for the <code><div></code> with an opacity of 50%.</p>
<ul>
<li><code>color</code> sets the text color.</li>
<li><code>background-color</code> sets the background color of elements.</li>
<li>CSS supports color definitions using names, hex, rgb, hsl, and rgba formats.</li>
</ul>
</section>
<section class="main-section" id="box_Model">
<header><h2>CSS Box Model</h2></header>
<p>In CSS, every element is represented as a box — this is called the box model. It describes how the width and height of elements are calculated.</p>
<p>The box model consists of four parts: content, padding, border, and margin.</p>
<ul>
<li><strong>Content:</strong> the actual content (text or images).</li>
<li><strong>Padding:</strong> space between the content and the border.</li>
<li><strong>Border:</strong> the edge around the element.</li>
<li><strong>Margin:</strong> space between this element and others.</li>
</ul>
<p>Understanding the box model helps you control exactly how an element appears on the page.</p>
<pre><code>div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}</code></pre>
<p>The total width is: 200 + 10*2 (padding) + 2*2 (border) = 224px.</p>
<p>Use <code>box-sizing: border-box</code> to include padding and border within the specified width.</p>
<pre><code>* {
box-sizing: border-box;
}</code></pre>
</section>
<section class="main-section" id="css_flexbox">
<header>CSS Flexbox</header>
<p>Flexbox is a CSS layout model that makes it easier to design flexible and responsive layout structures.</p>
<p>It allows elements within a container to automatically adjust based on screen size and available space.</p>
<p>To use Flexbox, you set the container's <code>display</code> property to <code>flex</code>.</p>
<p>You can then use properties like <code>justify-content</code> and <code>align-items</code> to control alignment.</p>
<p>Flexbox is useful for both horizontal and vertical layouts.</p>
<ul>
<li><code>display: flex;</code> – activates flex context.</li>
<li><code>justify-content</code> – aligns items horizontally.</li>
<li><code>align-items</code> – aligns items vertically.</li>
<li><code>flex-direction</code> – sets the direction (row, column).</li>
<li><code>flex-wrap</code> – allows items to wrap onto multiple lines.</li>
</ul>
<pre><code>display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
</code></pre>
</section>
<section class="main-section" id="typography">
<header>Typography</header>
<p>Typography in CSS controls how text appears on a webpage, including font style, size, spacing, and alignment.</p>
<p>Good typography improves readability and user experience.</p>
<p>You can set the font using the <code>font-family</code> property.</p>
<p>The size of the text is adjusted with <code>font-size</code>.</p>
<p>Other properties like <code>line-height</code> and <code>letter-spacing</code> fine-tune text appearance.</p>
<ul>
<li><code>font-family</code> – sets the typeface.</li>
<li><code>font-size</code> – controls text size.</li>
<li><code>line-height</code> – controls space between lines.</li>
<li><code>letter-spacing</code> – controls space between letters.</li>
<li><code>text-align</code> – aligns the text (left, center, right).</li>
</ul>
<pre><code>font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.5px;
text-align: center;
</code></pre>
</section>
<section class="main-section" id="accessibility">
<header>Accessibility</header>
<p>Accessibility makes websites usable for everyone, including people with disabilities who rely on screen readers or keyboard navigation.</p>
<p>Semantic HTML elements help assistive technologies interpret content correctly.</p>
<p>Tags like <code><label></code>, <code><button></code>, and <code><nav></code> improve accessibility and structure.</p>
<p>Ensure all interactive elements are keyboard-accessible and that focus indicators are visible.</p>
<p>Always use descriptive <code>alt</code> text for images to convey their purpose or meaning.</p>
<ul>
<li>Use semantic tags like <code><header></code>, <code><main></code>, and <code><footer></code></li>
<li>Link <code><label></code> to form inputs using the <code>for</code> attribute</li>
<li>Make sure focus is clearly visible when tabbing</li>
<li>Use meaningful link text (e.g., "Read more about pricing" instead of "Click here")</li>
<li>Add captions or transcripts for audio and video content</li>
</ul>
<code><label for="name">Name:</label></code><br>
<code><input id="name" type="text"></code><br>
<code><img src="photo.jpg" alt="Smiling cat"></code><br>
<code><nav>...</nav></code><br>
<code><button>Submit</button></code>
</section>
<section class="main-section" id="pseudo-selectors">
<header>Pseudo-selectors</header>
<p>Pseudo-selectors let you style elements based on their state or position, even if they don’t have a class or ID.</p>
<p>They start with a colon (<code>:</code>) and can be combined with regular selectors.</p>
<p>Common pseudo-selectors include <code>:hover</code>, <code>:focus</code>, <code>:first-child</code>, and <code>:nth-child()</code>.</p>
<p>They are useful for interactivity and more precise targeting in CSS.</p>
<p>You can style form elements, lists, or any element differently depending on user interaction.</p>
<ul>
<li><code>:hover</code> — when the mouse is over an element</li>
<li><code>:focus</code> — when an element (like an input) is selected</li>
<li><code>:first-child</code> — targets the first child of a parent</li>
<li><code>:nth-child(2)</code> — targets the second child</li>
<li><code>:active</code> — when an element is being clicked</li>
</ul>
<code>button:hover { background-color: blue; }</code><br>
<code>input:focus { border-color: green; }</code><br>
<code>li:first-child { font-weight: bold; }</code><br>
<code>p:nth-child(2) { color: gray; }</code><br>
<code>a:active { color: red; }</code>
</section>
<section class="main-section" id="intermediate-css">
<header>Intermediate CSS</header>
<p>Intermediate CSS concepts dive deeper into styling techniques that help create responsive and well-structured websites.</p>
<p>Common intermediate concepts include <code>CSS Grid</code>, <code>CSS Flexbox</code>, <code>transitions</code>, and <code>animations</code>.</p>
<p>These techniques allow you to create more dynamic layouts and interactive user interfaces.</p>
<p>Mastering these concepts will help you build modern web applications.</p>
<ul>
<li><code>CSS Grid</code> — allows you to create complex two-dimensional layouts</li>
<li><code>CSS Flexbox</code> — used for creating flexible, one-dimensional layouts</li>
<li><code>Transitions</code> — enable smooth changes in style properties</li>
<li><code>Animations</code> — used for creating keyframe-based animations in CSS</li>
<li><code>Media Queries</code> — to adapt your website to different screen sizes</li>
</ul>
<code>.container { display: grid; grid-template-columns: repeat(3, 1fr); }</code><br>
<code>.flex-container { display: flex; justify-content: center; }</code><br>
<code>button { transition: background-color 0.3s ease; }</code><br>
<code>@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }</code><br>
<code>@media (max-width: 600px) { .container { grid-template-columns: 1fr; } }</code>
</section>
<section class="main-section" id="responsive-web-design">
<header>Responsive Web Design</header>
<p>Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.</p>
<p>It ensures that websites work across different devices such as desktops, tablets, and mobile phones.</p>
<p>Key concepts in responsive design include <code>fluid grids</code>, <code>flexible images</code>, and <code>media queries</code>.</p>
<ul>
<li><code>Fluid Grids</code> — use percentage-based widths to create flexible layouts</li>
<li><code>Flexible Images</code> — images that scale based on the viewport size</li>
<li><code>Media Queries</code> — CSS rules that apply based on device characteristics like screen width</li>
<li><code>Viewport Units</code> — use of units like <code>vw</code>, <code>vh</code> for responsive design</li>
<li><code>Mobile-first Approach</code> — designing for smaller screens first and then scaling up</li>
</ul>
<code>body { max-width: 100%; margin: 0; }</code><br>
<code>img { max-width: 100%; height: auto; }</code><br>
<code>@media (max-width: 768px) { .container { flex-direction: column; } }</code><br>
<code>html { font-size: 2vw; }</code><br>
<code>@media (min-width: 600px) { .container { display: grid; grid-template-columns: 1fr 1fr; } }</code>
</section>
</main>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
#navbar h1 {
font-size: 1rem;
margin-bottom: 20px;
background-color: grey;
padding: 10px;
}
#navbar ul {
list-style-type: none;
}
#navbar a {
color: white;
text-decoration: none;
display: block;
padding: 10px;
background-color: red;
font-size: 1rem;
}
#navbar a:hover {
background-color: lightyellow;
color: black;
}
#navbar {
width: 250px;
background-color: pink;
color: white;
padding: 20px;
}
/* Main content rechts */
#main-doc {
height: 100vh;
margin-top: 40px;
margin-left: 10px;
padding: 20px;
}
#main-doc h2 {
margin-bottom: 16px;
}
#main-doc ul {
padding-left: 60px;
}
section {
background-color: #e2ffe2;
margin-bottom: 30px;
padding: 10px;
border-radius: 15px;
}
@media (max-width: 769px) {
}
css
