├── LICENSE
├── HTML Fundamentals
    ├── 01 Basic Structure
    │   ├── 01 Document Type Declaration
    │   │   └── document_type_declaration.html
    │   ├── 04 Character Encoding
    │   │   └── character_encoding.html
    │   ├── 02 HTML Head and Body Tags
    │   │   └── html_head_body_tags.html
    │   ├── 03 Meta Tags
    │   │   └── meta_tags.html
    │   └── 05 Viewport Settings
    │   │   └── viewport_settings.html
    ├── 02 Semantic Elements
    │   ├── 01 header
    │   │   └── header_element.html
    │   ├── 04 article
    │   │   └── article_element.html
    │   ├── 06 aside
    │   │   └── aside_element.html
    │   ├── 03 main
    │   │   └── main_element.html
    │   ├── 07 footer
    │   │   └── footer_element.html
    │   ├── 02 nav
    │   │   └── nav_element.html
    │   ├── 08 figure and figcaption
    │   │   └── figure_figcaption_elements.html
    │   └── 05 section
    │   │   └── section_element.html
    ├── 10 Embedding Content
    │   ├── 03 SVG Integration
    │   │   └── svg_integration.html
    │   ├── 01 iframe
    │   │   └── iframe_external_content.html
    │   ├── 02 embed and object
    │   │   └── embed_object_plugins.html
    │   └── 04 MathML
    │   │   └── mathml_expressions.html
    ├── 08 Accessibility (a11y)
    │   ├── 04 Alt Text for Images
    │   │   └── alt_text_images.html
    │   ├── 05 Focus Management
    │   │   └── focus_management.html
    │   ├── 01 ARIA Roles and Attributes
    │   │   └── aria_roles_attributes.html
    │   ├── 03 Keyboard Navigation
    │   │   └── keyboard_navigation.html
    │   └── 02 Semantic HTML for Screen Readers
    │   │   └── semantic_html_screen_readers.html
    ├── 03 Forms and Input
    │   ├── 01 form Element
    │   │   └── form_element.html
    │   ├── 03 Form Attributes
    │   │   └── form_attributes.html
    │   ├── 04 Validation Attributes
    │   │   └── validation_attributes.html
    │   ├── 05 label select textarea button
    │   │   └── label_select_textarea_button.html
    │   └── 02 Input Types
    │   │   └── input_types.html
    ├── 04 Multimedia
    │   ├── 01 img
    │   │   └── img_element.html
    │   ├── 02 audio
    │   │   └── audio_element.html
    │   ├── 03 video
    │   │   └── video_element.html
    │   └── 04 source and track
    │   │   └── source_and_track.html
    ├── 05 Hyperlinks and Navigation
    │   ├── 04 Email and Telephone Links
    │   │   └── email_telephone_links.html
    │   ├── 03 Downloadable Resources
    │   │   └── downloadable_resources.html
    │   ├── 02 Internal and External Links
    │   │   └── internal_external_links.html
    │   └── 01 a Tag Basics
    │   │   └── anchor_attributes.html
    ├── 06 Tables
    │   ├── 01 table tr td th
    │   │   └── basic_table_elements.html
    │   ├── 02 Headers and Captions
    │   │   └── table_headers_captions.html
    │   ├── 04 Accessibility with scope
    │   │   └── table_accessibility_scope.html
    │   └── 03 thead tbody tfoot
    │   │   └── table_sections.html
    ├── 09 Responsive Design
    │   ├── 01 Meta Viewport Tag
    │   │   └── meta_viewport.html
    │   ├── 03 Picture Element
    │   │   └── picture_element.html
    │   ├── 02 Responsive Images (srcset sizes)
    │   │   └── responsive_images.html
    │   └── 04 Media Queries Integration
    │   │   └── media_queries.html
    └── 07 HTML5 APIs
    │   ├── 07 Fetch API
    │       └── fetch_api.html
    │   ├── 06 History API
    │       └── history_api.html
    │   ├── 02 Geolocation API
    │       └── geolocation_api.html
    │   ├── 01 Canvas API
    │       └── canvas_api.html
    │   ├── 04 Drag and Drop API
    │       └── drag_and_drop_api.html
    │   ├── 03 Web Storage (localStorage sessionStorage)
    │       └── web_storage.html
    │   └── 05 Web Workers
    │       └── web_workers.html
├── README.md
└── HTML Interview Questions
    └── README.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License  
 2 | 
 3 | Copyright (c) 2025 rohanmistry231
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy  
 6 | of this software and associated documentation files (the "Software"), to deal  
 7 | in the Software without restriction, including without limitation the rights  
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
 9 | copies of the Software, and to permit persons to whom the Software is  
10 | furnished to do so, subject to the following conditions:  
11 | 
12 | The above copyright notice and this permission notice shall be included in all  
13 | copies or substantial portions of the Software.  
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
21 | SOFTWARE.


--------------------------------------------------------------------------------
/HTML Fundamentals/01 Basic Structure/01 Document Type Declaration/document_type_declaration.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <title>Document Type Declaration Example</title>
44 | </head>
45 | <body>
46 |     <h1>Document Type Declaration Example</h1>
47 |     <p>This HTML file starts with the &lt;!DOCTYPE html&gt; declaration to indicate it is an HTML5 document.</p>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/01 Basic Structure/04 Character Encoding/character_encoding.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <title>Character Encoding Example</title>
45 | </head>
46 | <body>
47 |     <h1>Character Encoding Example</h1>
48 |     <p>This file uses &lt;meta charset="UTF-8"&gt; to specify the character encoding, ensuring proper display of special characters like © or é.</p>
49 |     <p>Example: Copyright © 2025</p>
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/01 Basic Structure/02 HTML Head and Body Tags/html_head_body_tags.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <title>HTML, Head, and Body Tags Example</title>
44 | </head>
45 | <body>
46 |     <h1>HTML, Head, and Body Tags Example</h1>
47 |     <p>This file demonstrates the basic structure with &lt;html&gt;, &lt;head&gt;, and &lt;body&gt; tags.</p>
48 |     <p>The &lt;head&gt; contains metadata, while the &lt;body&gt; contains visible content.</p>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/01 header/header_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Header Element Example</title>
46 | </head>
47 | <body>
48 |     <header>
49 |         <h1>Welcome to My Website</h1>
50 |         <p>This is the header section of the page, often used for branding or introductory content.</p>
51 |     </header>
52 |     <p>Content outside the header.</p>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/10 Embedding Content/03 SVG Integration/svg_integration.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>SVG Integration Example</title>
46 | </head>
47 | <body>
48 |     <h1>SVG Integration Example</h1>
49 |     <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
50 |         <circle cx="100" cy="100" r="50" fill="blue" />
51 |     </svg>
52 |     <p>This is an inline SVG graphic of a blue circle.</p>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/04 article/article_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Article Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>My Blog</h1>
49 |     <article>
50 |         <h2>Blog Post Title</h2>
51 |         <p>This is an <article> element, representing a self-contained piece of content, like a blog post.</p>
52 |     </article>
53 |     <p>Other content outside the article.</p>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/06 aside/aside_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Aside Element Example</title>
46 | </head>
47 | <body>
48 |     <main>
49 |         <h1>Main Content</h1>
50 |         <p>This is the main content of the page.</p>
51 |     </main>
52 |     <aside>
53 |         <h2>Sidebar</h2>
54 |         <p>This is an <aside> element, often used for supplementary content like a sidebar.</p>
55 |     </aside>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/08 Accessibility (a11y)/04 Alt Text for Images/alt_text_images.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Alt Text for Images Example</title>
46 | </head>
47 | <body>
48 |     <h1>Alt Text for Images Example</h1>
49 |     <img src="https://via.placeholder.com/150" alt="A placeholder image with the text '150x150'">
50 |     <p>The image above includes an alt attribute for accessibility, describing its content for screen readers.</p>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/03 main/main_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Main Element Example</title>
46 | </head>
47 | <body>
48 |     <header>
49 |         <h1>My Website</h1>
50 |     </header>
51 |     <main>
52 |         <h2>Main Content</h2>
53 |         <p>This is the <main> section, which contains the primary content of the page.</p>
54 |     </main>
55 |     <footer>
56 |         <p>Footer content</p>
57 |     </footer>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/03 Forms and Input/01 form Element/form_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Form Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>Form Element Example</h1>
49 |     <form>
50 |         <p>This is a basic <form> element.</p>
51 |         <label for="name">Name:</label>
52 |         <input type="text" id="name" name="name">
53 |         <br><br>
54 |         <input type="submit" value="Submit">
55 |     </form>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/01 Basic Structure/03 Meta Tags/meta_tags.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <title>Meta Tags Example</title>
44 |     <meta name="description" content="A simple HTML page demonstrating meta tags for SEO and page information.">
45 |     <meta name="keywords" content="HTML5, meta tags, SEO, interview preparation">
46 |     <meta name="author" content="Your Name">
47 | </head>
48 | <body>
49 |     <h1>Meta Tags Example</h1>
50 |     <p>This file includes &lt;meta&gt; tags in the &lt;head&gt; section for description, keywords, and author information.</p>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/04 Multimedia/01 img/img_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Image Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>Image Element Example</h1>
49 |     <img src="https://via.placeholder.com/300" alt="Placeholder image" loading="lazy">
50 |     <p>This image uses the <img> element with src, alt, and loading="lazy" attributes.</p>
51 |     <p>The loading="lazy" attribute defers loading until the image is near the viewport.</p>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/01 Basic Structure/05 Viewport Settings/viewport_settings.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Viewport Settings Example</title>
46 | </head>
47 | <body>
48 |     <h1>Viewport Settings Example</h1>
49 |     <p>This file includes &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; to ensure the page is responsive on different devices.</p>
50 |     <p>Try resizing your browser or viewing on a mobile device to see the effect.</p>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/07 footer/footer_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Footer Element Example</title>
46 | </head>
47 | <body>
48 |     <main>
49 |         <h1>Main Content</h1>
50 |         <p>This is the main content of the page.</p>
51 |     </main>
52 |     <footer>
53 |         <p>© 2025 My Website. All rights reserved.</p>
54 |         <p>This is a <footer> element, typically used for copyright or contact information.</p>
55 |     </footer>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/02 nav/nav_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Nav Element Example</title>
46 | </head>
47 | <body>
48 |     <nav>
49 |         <ul>
50 |             <li><a href="#home">Home</a></li>
51 |             <li><a href="#about">About</a></li>
52 |             <li><a href="#contact">Contact</a></li>
53 |         </ul>
54 |     </nav>
55 |     <h1>Navigation Example</h1>
56 |     <p>The <nav> element contains navigation links for the website.</p>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/08 figure and figcaption/figure_figcaption_elements.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Figure and Figcaption Elements Example</title>
46 | </head>
47 | <body>
48 |     <h1>Image with Caption</h1>
49 |     <figure>
50 |         <img src="https://via.placeholder.com/150" alt="Placeholder image">
51 |         <figcaption>This is a caption for the image, inside a <figure> element.</figcaption>
52 |     </figure>
53 |     <p>Content outside the figure.</p>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/02 Semantic Elements/05 section/section_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Section Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>My Website</h1>
49 |     <section>
50 |         <h2>Section Title</h2>
51 |         <p>This is a <section> element, used to group related content, such as a chapter or topic.</p>
52 |     </section>
53 |     <section>
54 |         <h2>Another Section</h2>
55 |         <p>This is another section of content.</p>
56 |     </section>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/05 Hyperlinks and Navigation/04 Email and Telephone Links/email_telephone_links.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Email and Telephone Links Example</title>
46 | </head>
47 | <body>
48 |     <h1>Email and Telephone Links Example</h1>
49 |     <p>Email Link: <a href="mailto:example@example.com">Send an Email</a></p>
50 |     <p>Telephone Link: <a href="tel:+1234567890">Call Us</a></p>
51 |     <p>The mailto: protocol opens the user's email client, and the tel: protocol initiates a call on supported devices.</p>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/05 Hyperlinks and Navigation/03 Downloadable Resources/downloadable_resources.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Downloadable Resources Example</title>
46 | </head>
47 | <body>
48 |     <h1>Downloadable Resources Example</h1>
49 |     <p>Click the link to download a resource:</p>
50 |     <a href="https://www.example.com/sample.pdf" download>Download Sample PDF</a>
51 |     <p>The download attribute prompts the browser to download the file instead of navigating to it.</p>
52 |     <p>Note: In a real scenario, replace the href with a valid file URL.</p>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/05 Hyperlinks and Navigation/02 Internal and External Links/internal_external_links.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Internal and External Links Example</title>
46 | </head>
47 | <body>
48 |     <h1>Internal and External Links Example</h1>
49 |     <p>External Link: <a href="https://www.example.com">Visit Example.com</a></p>
50 |     <p>Internal Link: <a href="#section">Jump to Section Below</a></p>
51 |     <br><br><br><br><br><br><br><br><br><br>
52 |     <h2 id="section">Section</h2>
53 |     <p>This is the section you jumped to using an internal link.</p>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/04 Multimedia/02 audio/audio_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Audio Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>Audio Element Example</h1>
49 |     <audio controls autoplay loop muted>
50 |         <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3">
51 |         Your browser does not support the audio element.
52 |     </audio>
53 |     <p>This audio element uses controls, autoplay, and loop attributes.</p>
54 |     <p>Note: Autoplay requires muted in many browsers to work without user interaction.</p>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/04 Multimedia/03 video/video_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Video Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>Video Element Example</h1>
49 |     <video controls poster="https://via.placeholder.com/300" muted>
50 |         <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
51 |         Your browser does not support the video element.
52 |     </video>
53 |     <p>This video element uses controls, poster, and muted attributes.</p>
54 |     <p>The poster attribute displays a placeholder image before the video plays.</p>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/06 Tables/01 table tr td th/basic_table_elements.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Basic Table Elements Example</title>
46 | </head>
47 | <body>
48 |     <h1>Basic Table Elements Example</h1>
49 |     <table>
50 |         <tr>
51 |             <th>Name</th>
52 |             <th>Score</th>
53 |         </tr>
54 |         <tr>
55 |             <td>Alice</td>
56 |             <td>85</td>
57 |         </tr>
58 |         <tr>
59 |             <td>Bob</td>
60 |             <td>92</td>
61 |         </tr>
62 |     </table>
63 |     <p>This table uses <table>, <tr>, <td>, and <th> elements to display a simple dataset.</p>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/10 Embedding Content/01 iframe/iframe_external_content.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>IFrame External Content Example</title>
46 |     <style>
47 |         iframe { width: 100%; height: 300px; border: 1px solid black; }
48 |     </style>
49 | </head>
50 | <body>
51 |     <h1>IFrame External Content Example</h1>
52 |     <iframe src="https://www.wikipedia.org" title="Wikipedia Page">
53 |         Your browser does not support iframes.
54 |     </iframe>
55 |     <p>This <iframe> embeds an external webpage from Wikipedia.</p>
56 |     <p>Note: Some websites may block embedding due to security restrictions.</p>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/09 Responsive Design/01 Meta Viewport Tag/meta_viewport.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Meta Viewport Tag Example</title>
46 |     <style>
47 |         body { font-family: Arial, sans-serif; }
48 |         .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; }
49 |     </style>
50 | </head>
51 | <body>
52 |     <div class="container">
53 |         <h1>Meta Viewport Tag Example</h1>
54 |         <p>This page uses the meta viewport tag to ensure proper scaling on mobile devices.</p>
55 |         <p>Resize your browser or view on a mobile device to see the responsive behavior.</p>
56 |     </div>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/05 Hyperlinks and Navigation/01 a Tag Basics/anchor_attributes.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Anchor Attributes Example</title>
46 | </head>
47 | <body>
48 |     <h1>Anchor Attributes Example</h1>
49 |     <p>This demonstrates the <a> element with href, target, and rel attributes:</p>
50 |     <ul>
51 |         <li><a href="https://www.example.com" target="_blank" rel="noopener">Open Example.com in a new tab</a></li>
52 |         <li><a href="https://www.example.com" target="_self" rel="nofollow">Open Example.com in the same tab</a></li>
53 |     </ul>
54 |     <p>The target="_blank" opens the link in a new tab, and rel="noopener" enhances security.</p>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/09 Responsive Design/03 Picture Element/picture_element.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Picture Element Example</title>
46 | </head>
47 | <body>
48 |     <h1>Picture Element Example</h1>
49 |     <picture>
50 |         <source media="(min-width: 1200px)" srcset="https://via.placeholder.com/1200">
51 |         <source media="(min-width: 600px)" srcset="https://via.placeholder.com/800">
52 |         <img src="https://via.placeholder.com/400" alt="A responsive placeholder image using picture element">
53 |     </picture>
54 |     <p>The <picture> element serves different images based on screen size: 1200px for large screens, 800px for medium, and 400px for small.</p>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/08 Accessibility (a11y)/05 Focus Management/focus_management.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Focus Management Example</title>
46 |     <style>
47 |         input:focus { outline: 2px solid blue; }
48 |     </style>
49 | </head>
50 | <body>
51 |     <h1>Focus Management Example</h1>
52 |     <button onclick="setFocus()">Set Focus to Input</button>
53 |     <input type="text" id="myInput" placeholder="Type here">
54 |     <p>Click the button to programmatically set focus on the input field, or use Tab to navigate to it.</p>
55 |     <script>
56 |         function setFocus() {
57 |             document.getElementById('myInput').focus();
58 |         }
59 |     </script>
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/03 Forms and Input/03 Form Attributes/form_attributes.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Form Attributes Example</title>
46 | </head>
47 | <body>
48 |     <h1>Form Attributes Example</h1>
49 |     <form action="#" method="post" autocomplete="on">
50 |         <p>This form uses attributes: action, method, and autocomplete.</p>
51 |         <label for="username">Username:</label>
52 |         <input type="text" id="username" name="username">
53 |         <br><br>
54 |         
55 |         <label for="email">Email:</label>
56 |         <input type="email" id="email" name="email">
57 |         <br><br>
58 |         
59 |         <input type="submit" value="Submit">
60 |     </form>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/08 Accessibility (a11y)/01 ARIA Roles and Attributes/aria_roles_attributes.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>ARIA Roles and Attributes Example</title>
46 | </head>
47 | <body>
48 |     <h1>ARIA Roles and Attributes Example</h1>
49 |     <div role="alert" aria-live="assertive" id="alert">
50 |         This is an alert message for screen readers.
51 |     </div>
52 |     <button onclick="updateAlert()">Update Alert</button>
53 |     <script>
54 |         function updateAlert() {
55 |             document.getElementById('alert').innerHTML = 'Alert updated! New message for screen readers.';
56 |         }
57 |     </script>
58 |     <p>The <div> uses role="alert" and aria-live="assertive" to announce changes to screen readers.</p>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/09 Responsive Design/02 Responsive Images (srcset sizes)/responsive_images.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Responsive Images Example</title>
46 | </head>
47 | <body>
48 |     <h1>Responsive Images Example</h1>
49 |     <img src="https://via.placeholder.com/400" 
50 |          srcset="https://via.placeholder.com/400 400w, https://via.placeholder.com/800 800w, https://via.placeholder.com/1200 1200w" 
51 |          sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" 
52 |          alt="A responsive placeholder image">
53 |     <p>This image uses srcset and sizes to serve different image sizes based on viewport width.</p>
54 |     <p>Small screens get a 400px image, medium screens a 800px image, and large screens a 1200px image.</p>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/07 Fetch API/fetch_api.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Fetch API Example</title>
46 | </head>
47 | <body>
48 |     <h1>Fetch API Example</h1>
49 |     <button onclick="fetchData()">Fetch Data</button>
50 |     <p id="result">Click the button to fetch data.</p>
51 |     <script>
52 |         async function fetchData() {
53 |             try {
54 |                 const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
55 |                 const data = await response.json();
56 |                 document.getElementById('result').innerHTML = `Title: ${data.title}`;
57 |             } catch (error) {
58 |                 document.getElementById('result').innerHTML = 'Error fetching data.';
59 |             }
60 |         }
61 |     </script>
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/10 Embedding Content/02 embed and object/embed_object_plugins.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Embed and Object Plugins Example</title>
46 |     <style>
47 |         embed, object { width: 100%; height: 300px; }
48 |     </style>
49 | </head>
50 | <body>
51 |     <h1>Embed and Object Plugins Example</h1>
52 |     <h2>Using <embed></h2>
53 |     <embed src="https://www.example.com/sample.pdf" type="application/pdf">
54 |     <h2>Using <object></h2>
55 |     <object data="https://www.example.com/sample.pdf" type="application/pdf">
56 |         <p>Your browser does not support this object.</p>
57 |     </object>
58 |     <p>The <embed> and <object> elements are used to embed a PDF file (placeholder URL).</p>
59 |     <p>In a real scenario, replace the src/data with a valid PDF URL.</p>
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/06 Tables/02 Headers and Captions/table_headers_captions.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Table Headers and Captions Example</title>
46 | </head>
47 | <body>
48 |     <h1>Table Headers and Captions Example</h1>
49 |     <table>
50 |         <caption>Student Scores</caption>
51 |         <tr>
52 |             <th>Name</th>
53 |             <th>Math Score</th>
54 |             <th>Science Score</th>
55 |         </tr>
56 |         <tr>
57 |             <td>Alice</td>
58 |             <td>85</td>
59 |             <td>90</td>
60 |         </tr>
61 |         <tr>
62 |             <td>Bob</td>
63 |             <td>92</td>
64 |             <td>88</td>
65 |         </tr>
66 |     </table>
67 |     <p>The <caption> element provides a title for the table, and <th> elements define the headers.</p>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/04 Multimedia/04 source and track/source_and_track.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Source and Track Example</title>
46 | </head>
47 | <body>
48 |     <h1>Source and Track Example</h1>
49 |     <video controls>
50 |         <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
51 |         <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
52 |         <track src="https://www.w3schools.com/html/subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
53 |         Your browser does not support the video element.
54 |     </video>
55 |     <p>This video uses <source> to provide multiple video formats and <track> for subtitles.</p>
56 |     <p>The browser will choose the first supported format, and subtitles can be toggled in the controls.</p>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/03 Forms and Input/04 Validation Attributes/validation_attributes.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Validation Attributes Example</title>
46 | </head>
47 | <body>
48 |     <h1>Validation Attributes Example</h1>
49 |     <form>
50 |         <label for="name">Name (required):</label>
51 |         <input type="text" id="name" name="name" required>
52 |         <br><br>
53 |         
54 |         <label for="phone">Phone (pattern):</label>
55 |         <input type="text" id="phone" name="phone" pattern="[0-9]{10}" placeholder="10-digit number">
56 |         <br><br>
57 |         
58 |         <label for="age">Age (min/max):</label>
59 |         <input type="number" id="age" name="age" min="18" max="100">
60 |         <br><br>
61 |         
62 |         <input type="submit" value="Submit">
63 |     </form>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/08 Accessibility (a11y)/03 Keyboard Navigation/keyboard_navigation.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Keyboard Navigation Example</title>
46 |     <style>
47 |         a:focus, button:focus { outline: 2px solid blue; }
48 |     </style>
49 | </head>
50 | <body>
51 |     <h1>Keyboard Navigation Example</h1>
52 |     <nav>
53 |         <a href="#section1" tabindex="1">Go to Section 1</a>
54 |         <a href="#section2" tabindex="2">Go to Section 2</a>
55 |     </nav>
56 |     <button onclick="alert('Button clicked!')" tabindex="3">Click Me</button>
57 |     <h2 id="section1">Section 1</h2>
58 |     <p>This section is accessible via keyboard navigation.</p>
59 |     <h2 id="section2">Section 2</h2>
60 |     <p>Another section reachable by tabbing.</p>
61 |     <p>Use the Tab key to navigate through links and buttons. The tabindex attribute controls the order.</p>
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/06 Tables/04 Accessibility with scope/table_accessibility_scope.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Table Accessibility with Scope Example</title>
46 | </head>
47 | <body>
48 |     <h1>Table Accessibility with Scope Example</h1>
49 |     <table>
50 |         <caption>Student Scores by Subject</caption>
51 |         <tr>
52 |             <th scope="col">Name</th>
53 |             <th scope="col">Math</th>
54 |             <th scope="col">Science</th>
55 |         </tr>
56 |         <tr>
57 |             <th scope="row">Alice</th>
58 |             <td>85</td>
59 |             <td>90</td>
60 |         </tr>
61 |         <tr>
62 |             <th scope="row">Bob</th>
63 |             <td>92</td>
64 |             <td>88</td>
65 |         </tr>
66 |     </table>
67 |     <p>The scope attribute (scope="col" and scope="row") helps screen readers understand the table structure.</p>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/06 Tables/03 thead tbody tfoot/table_sections.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Table Sections Example</title>
46 | </head>
47 | <body>
48 |     <h1>Table Sections Example</h1>
49 |     <table>
50 |         <thead>
51 |             <tr>
52 |                 <th>Name</th>
53 |                 <th>Score</th>
54 |             </tr>
55 |         </thead>
56 |         <tbody>
57 |             <tr>
58 |                 <td>Alice</td>
59 |                 <td>85</td>
60 |             </tr>
61 |             <tr>
62 |                 <td>Bob</td>
63 |                 <td>92</td>
64 |             </tr>
65 |         </tbody>
66 |         <tfoot>
67 |             <tr>
68 |                 <td>Average</td>
69 |                 <td>88.5</td>
70 |             </tr>
71 |         </tfoot>
72 |     </table>
73 |     <p>This table uses <thead> for headers, <tbody> for the main content, and <tfoot> for summary data.</p>
74 | </body>
75 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/03 Forms and Input/05 label select textarea button/label_select_textarea_button.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Label, Select, Textarea, Button Example</title>
46 | </head>
47 | <body>
48 |     <h1>Label, Select, Textarea, Button Example</h1>
49 |     <form>
50 |         <label for="name">Name:</label>
51 |         <input type="text" id="name" name="name">
52 |         <br><br>
53 |         
54 |         <label for="country">Country:</label>
55 |         <select id="country" name="country">
56 |             <option value="usa">USA</option>
57 |             <option value="canada">Canada</option>
58 |             <option value="uk">UK</option>
59 |         </select>
60 |         <br><br>
61 |         
62 |         <label for="message">Message:</label>
63 |         <textarea id="message" name="message" rows="4" cols="30"></textarea>
64 |         <br><br>
65 |         
66 |         <button type="submit">Submit</button>
67 |         <button type="reset">Reset</button>
68 |     </form>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/08 Accessibility (a11y)/02 Semantic HTML for Screen Readers/semantic_html_screen_readers.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Semantic HTML for Screen Readers Example</title>
46 | </head>
47 | <body>
48 |     <header>
49 |         <h1>My Website</h1>
50 |     </header>
51 |     <nav>
52 |         <ul>
53 |             <li><a href="#home">Home</a></li>
54 |             <li><a href="#about">About</a></li>
55 |         </ul>
56 |     </nav>
57 |     <main>
58 |         <article>
59 |             <h2 id="home">Home</h2>
60 |             <p>This is the main content, structured with semantic elements for screen readers.</p>
61 |         </article>
62 |         <article>
63 |             <h2 id="about">About</h2>
64 |             <p>Learn more about us in this section.</p>
65 |         </article>
66 |     </main>
67 |     <footer>
68 |         <p>© 2025 My Website</p>
69 |     </footer>
70 |     <p>Semantic elements like <header>, <nav>, <main>, and <footer> help screen readers navigate the page.</p>
71 | </body>
72 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/10 Embedding Content/04 MathML/mathml_expressions.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>MathML for Mathematical Expressions Example</title>
46 | </head>
47 | <body>
48 |     <h1>MathML for Mathematical Expressions Example</h1>
49 |     <p>Quadratic Formula:</p>
50 |     <math xmlns="http://www.w3.org/1998/Math/MathML">
51 |         <mi>x</mi>
52 |         <mo>=</mo>
53 |         <mfrac>
54 |             <mrow>
55 |                 <mo>-</mo>
56 |                 <mi>b</mi>
57 |                 <mo>±</mo>
58 |                 <msqrt>
59 |                     <msup><mi>b</mi><mn>2</mn></msup>
60 |                     <mo>-</mo>
61 |                     <mn>4</mn>
62 |                     <mi>a</mi>
63 |                     <mi>c</mi>
64 |                 </msqrt>
65 |             </mrow>
66 |             <mrow>
67 |                 <mn>2</mn>
68 |                 <mi>a</mi>
69 |             </mrow>
70 |         </mfrac>
71 |     </math>
72 |     <p>This MathML renders the quadratic formula. Note: MathML support may vary by browser (best in Firefox).</p>
73 | </body>
74 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/03 Forms and Input/02 Input Types/input_types.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Input Types Example</title>
46 | </head>
47 | <body>
48 |     <h1>Input Types Example</h1>
49 |     <form>
50 |         <label for="text">Text:</label>
51 |         <input type="text" id="text" name="text">
52 |         <br><br>
53 |         
54 |         <label for="email">Email:</label>
55 |         <input type="email" id="email" name="email">
56 |         <br><br>
57 |         
58 |         <label for="password">Password:</label>
59 |         <input type="password" id="password" name="password">
60 |         <br><br>
61 |         
62 |         <label for="checkbox">Checkbox:</label>
63 |         <input type="checkbox" id="checkbox" name="checkbox">
64 |         <br><br>
65 |         
66 |         <label for="radio1">Radio Option 1:</label>
67 |         <input type="radio" id="radio1" name="radio" value="option1">
68 |         <label for="radio2">Radio Option 2:</label>
69 |         <input type="radio" id="radio2" name="radio" value="option2">
70 |         <br><br>
71 |         
72 |         <input type="submit" value="Submit">
73 |     </form>
74 | </body>
75 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/06 History API/history_api.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>History API Example</title>
46 | </head>
47 | <body>
48 |     <h1>History API Example</h1>
49 |     <button onclick="pushState()">Add State</button>
50 |     <button onclick="goBack()">Go Back</button>
51 |     <p id="state">Current State: Initial</p>
52 |     <script>
53 |         let stateCount = 0;
54 | 
55 |         function pushState() {
56 |             stateCount++;
57 |             const state = { page: stateCount };
58 |             history.pushState(state, '', `#page${stateCount}`);
59 |             document.getElementById('state').innerHTML = `Current State: Page ${stateCount}`;
60 |         }
61 | 
62 |         function goBack() {
63 |             history.back();
64 |         }
65 | 
66 |         window.onpopstate = (event) => {
67 |             const state = event.state;
68 |             if (state) {
69 |                 document.getElementById('state').innerHTML = `Current State: Page ${state.page}`;
70 |             } else {
71 |                 document.getElementById('state').innerHTML = 'Current State: Initial';
72 |             }
73 |         };
74 |     </script>
75 | </body>
76 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/02 Geolocation API/geolocation_api.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Geolocation API Example</title>
46 | </head>
47 | <body>
48 |     <h1>Geolocation API Example</h1>
49 |     <button onclick="getLocation()">Get My Location</button>
50 |     <p id="location">Click the button to get your location.</p>
51 |     <script>
52 |         function getLocation() {
53 |             if (navigator.geolocation) {
54 |                 navigator.geolocation.getCurrentPosition(showPosition, showError);
55 |             } else {
56 |                 document.getElementById('location').innerHTML = 'Geolocation is not supported by this browser.';
57 |             }
58 |         }
59 | 
60 |         function showPosition(position) {
61 |             const lat = position.coords.latitude;
62 |             const lon = position.coords.longitude;
63 |             document.getElementById('location').innerHTML = `Latitude: ${lat}, Longitude: ${lon}`;
64 |         }
65 | 
66 |         function showError(error) {
67 |             document.getElementById('location').innerHTML = 'Error: Unable to retrieve location. Permission may be required.';
68 |         }
69 |     </script>
70 | </body>
71 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/01 Canvas API/canvas_api.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Canvas API Example</title>
46 | </head>
47 | <body>
48 |     <h1>Canvas API Example</h1>
49 |     <canvas id="myCanvas" width="400" height="200" style="border:1px solid black;"></canvas>
50 |     <p>This canvas draws a static rectangle and an animated circle using the Canvas API.</p>
51 |     <script>
52 |         const canvas = document.getElementById('myCanvas');
53 |         const ctx = canvas.getContext('2d');
54 | 
55 |         // Draw a static rectangle
56 |         ctx.fillStyle = 'blue';
57 |         ctx.fillRect(50, 50, 100, 50);
58 | 
59 |         // Animate a circle
60 |         let x = 200, y = 100, radius = 20, dx = 2;
61 |         function animate() {
62 |             ctx.clearRect(150, 0, 250, 200); // Clear the animation area
63 |             ctx.beginPath();
64 |             ctx.arc(x, y, radius, 0, Math.PI * 2);
65 |             ctx.fillStyle = 'red';
66 |             ctx.fill();
67 |             x += dx;
68 |             if (x + radius > 400 || x - radius < 150) dx = -dx; // Bounce off walls
69 |             requestAnimationFrame(animate);
70 |         }
71 |         animate();
72 |     </script>
73 | </body>
74 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/04 Drag and Drop API/drag_and_drop_api.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Drag and Drop API Example</title>
46 |     <style>
47 |         #dragItem { width: 100px; height: 100px; background: blue; color: white; text-align: center; line-height: 100px; }
48 |         #dropZone { width: 200px; height: 200px; border: 2px dashed black; margin-top: 20px; text-align: center; line-height: 200px; }
49 |     </style>
50 | </head>
51 | <body>
52 |     <h1>Drag and Drop API Example</h1>
53 |     <div id="dragItem" draggable="true">Drag Me</div>
54 |     <div id="dropZone">Drop Here</div>
55 |     <script>
56 |         const dragItem = document.getElementById('dragItem');
57 |         const dropZone = document.getElementById('dropZone');
58 | 
59 |         dragItem.addEventListener('dragstart', (e) => {
60 |             e.dataTransfer.setData('text/plain', 'Dragged Item');
61 |         });
62 | 
63 |         dropZone.addEventListener('dragover', (e) => {
64 |             e.preventDefault();
65 |         });
66 | 
67 |         dropZone.addEventListener('drop', (e) => {
68 |             e.preventDefault();
69 |             dropZone.innerHTML = 'Dropped!';
70 |         });
71 |     </script>
72 | </body>
73 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/03 Web Storage (localStorage sessionStorage)/web_storage.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Web Storage Example</title>
46 | </head>
47 | <body>
48 |     <h1>Web Storage Example</h1>
49 |     <input type="text" id="inputText" placeholder="Enter some text">
50 |     <button onclick="saveData()">Save Data</button>
51 |     <button onclick="retrieveData()">Retrieve Data</button>
52 |     <p>localStorage: <span id="localStorageOutput"></span></p>
53 |     <p>sessionStorage: <span id="sessionStorageOutput"></span></p>
54 |     <script>
55 |         function saveData() {
56 |             const text = document.getElementById('inputText').value;
57 |             localStorage.setItem('myLocalData', text); // Persists across sessions
58 |             sessionStorage.setItem('mySessionData', text); // Cleared when tab closes
59 |         }
60 | 
61 |         function retrieveData() {
62 |             const localData = localStorage.getItem('myLocalData') || 'No data';
63 |             const sessionData = sessionStorage.getItem('mySessionData') || 'No data';
64 |             document.getElementById('localStorageOutput').innerHTML = localData;
65 |             document.getElementById('sessionStorageOutput').innerHTML = sessionData;
66 |         }
67 |     </script>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/07 HTML5 APIs/05 Web Workers/web_workers.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Web Workers Example</title>
46 | </head>
47 | <body>
48 |     <h1>Web Workers Example</h1>
49 |     <button onclick="runWorker()">Run Background Task</button>
50 |     <p id="result">Result will appear here.</p>
51 |     <script>
52 |         function runWorker() {
53 |             // Simulate Web Worker behavior (normally a separate .js file is used)
54 |             const workerCode = `
55 |                 self.onmessage = function(e) {
56 |                     let sum = 0;
57 |                     for (let i = 0; i < 1000000000; i++) sum += i;
58 |                     self.postMessage(sum);
59 |                 };
60 |             `;
61 |             const blob = new Blob([workerCode], { type: 'application/javascript' });
62 |             const workerURL = URL.createObjectURL(blob);
63 |             const worker = new Worker(workerURL);
64 | 
65 |             worker.onmessage = (e) => {
66 |                 document.getElementById('result').innerHTML = `Sum: ${e.data}`;
67 |                 URL.revokeObjectURL(workerURL);
68 |             };
69 | 
70 |             worker.postMessage('start');
71 |         }
72 |     </script>
73 |     <p>Note: Normally, Web Workers use a separate .js file. This example embeds the code for simplicity.</p>
74 | </body>
75 | </html>


--------------------------------------------------------------------------------
/HTML Fundamentals/09 Responsive Design/04 Media Queries Integration/media_queries.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 |         var gk_isXlsx = false;
 3 |         var gk_xlsxFileLookup = {};
 4 |         var gk_fileData = {};
 5 |         function filledCell(cell) {
 6 |           return cell !== '' && cell != null;
 7 |         }
 8 |         function loadFileData(filename) {
 9 |         if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10 |             try {
11 |                 var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12 |                 var firstSheetName = workbook.SheetNames[0];
13 |                 var worksheet = workbook.Sheets[firstSheetName];
14 | 
15 |                 // Convert sheet to JSON to filter blank rows
16 |                 var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17 |                 // Filter out blank rows (rows where all cells are empty, null, or undefined)
18 |                 var filteredData = jsonData.filter(row => row.some(filledCell));
19 | 
20 |                 // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21 |                 var headerRowIndex = filteredData.findIndex((row, index) =>
22 |                   row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23 |                 );
24 |                 // Fallback
25 |                 if (headerRowIndex === -1 || headerRowIndex > 25) {
26 |                   headerRowIndex = 0;
27 |                 }
28 | 
29 |                 // Convert filtered JSON back to CSV
30 |                 var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31 |                 csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32 |                 return csv;
33 |             } catch (e) {
34 |                 console.error(e);
35 |                 return "";
36 |             }
37 |         }
38 |         return gk_fileData[filename] || "";
39 |         }
40 |         </script><!DOCTYPE html>
41 | <html lang="en">
42 | <head>
43 |     <meta charset="UTF-8">
44 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
45 |     <title>Media Queries Integration Example</title>
46 |     <style>
47 |         body { font-family: Arial, sans-serif; text-align: center; }
48 |         .box {
49 |             background-color: lightblue;
50 |             padding: 20px;
51 |             margin: 20px;
52 |         }
53 |         @media (max-width: 600px) {
54 |             .box {
55 |                 background-color: lightgreen;
56 |                 font-size: 14px;
57 |             }
58 |         }
59 |         @media (min-width: 601px) and (max-width: 1200px) {
60 |             .box {
61 |                 background-color: lightcoral;
62 |                 font-size: 18px;
63 |             }
64 |         }
65 |         @media (min-width: 1201px) {
66 |             .box {
67 |                 background-color: lightgoldenrodyellow;
68 |                 font-size: 22px;
69 |             }
70 |         }
71 |     </style>
72 | </head>
73 | <body>
74 |     <h1>Media Queries Integration Example</h1>
75 |     <div class="box">
76 |         <p>Resize your browser to see the background color and font size change.</p>
77 |         <p>Small screens (≤600px): Light green, 14px font.</p>
78 |         <p>Medium screens (601px-1200px): Light coral, 18px font.</p>
79 |         <p>Large screens (≥1201px): Light yellow, 22px font.</p>
80 |     </div>
81 | </body>
82 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🌐 HTML5 Interview Preparation
  2 | 
  3 | <div align="center">
  4 |   <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5 Logo" />
  5 |   <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3" />
  6 |   <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript" />
  7 |   <img src="https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white" alt="Bootstrap" />
  8 |   <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" />
  9 | </div>
 10 | <p align="center">Your comprehensive guide to mastering HTML5 for web development interviews</p>
 11 | 
 12 | ---
 13 | 
 14 | ## 📖 Introduction
 15 | 
 16 | Welcome to my HTML5 prep for web development interviews! 🚀 This repository is your ultimate guide to mastering HTML5, the foundation of modern web development, with hands-on coding and interview-focused practice. From core elements to advanced APIs, it’s designed to help you excel in technical interviews and web projects with confidence and clarity.
 17 | 
 18 | ## 🌟 What’s Inside?
 19 | 
 20 | - **Core HTML5 Mastery**: Deep dive into semantic elements, forms, and multimedia.
 21 | - **Modern APIs**: Explore Canvas, Geolocation, Web Storage, and more.
 22 | - **Hands-on Practice**: Solve curated coding challenges with detailed solutions.
 23 | - **Interview Question Bank**: Tackle common HTML5 questions with concise answers.
 24 | - **Performance Optimization**: Learn best practices for clean, efficient code.
 25 | 
 26 | ## 🔍 Who Is This For?
 27 | 
 28 | - Front-end developers prepping for technical interviews.
 29 | - Web developers strengthening HTML5 foundations.
 30 | - UI/UX designers transitioning to development roles.
 31 | - Software engineers exploring web development.
 32 | - Anyone mastering HTML5 for modern web applications.
 33 | 
 34 | ## 🗺️ Comprehensive Learning Roadmap
 35 | 
 36 | ---
 37 | 
 38 | ### 🏗️ Core HTML5 Foundations
 39 | 
 40 | #### 📝 Basic Structure
 41 | - Document Type Declaration (`<!DOCTYPE html>`)
 42 | - HTML, Head, and Body Tags
 43 | - Meta Tags
 44 | - Character Encoding
 45 | - Viewport Settings
 46 | 
 47 | #### 🏷️ Semantic Elements
 48 | - `<header>`
 49 | - `<nav>`
 50 | - `<main>`
 51 | - `<article>`
 52 | - `<section>`
 53 | - `<aside>`
 54 | - `<footer>`
 55 | - `<figure>` and `<figcaption>`
 56 | 
 57 | #### 📋 Forms and Input
 58 | - `<form>` Element
 59 | - Input Types (`text`, `email`, `password`, `checkbox`, `radio`, etc.)
 60 | - Form Attributes (`action`, `method`, `autocomplete`)
 61 | - Validation Attributes (`required`, `pattern`, `min`, `max`)
 62 | - `<label>`, `<select>`, `<textarea>`, `<button>`
 63 | 
 64 | #### 🖼️ Multimedia
 65 | - `<img>` (Attributes: `src`, `alt`, `loading`)
 66 | - `<audio>` (Attributes: `controls`, `autoplay`, `loop`)
 67 | - `<video>` (Attributes: `controls`, `poster`, `muted`)
 68 | - `<source>` and `<track>`
 69 | 
 70 | #### 🔗 Hyperlinks and Navigation
 71 | - `<a>` (Attributes: `href`, `target`, `rel`)
 72 | - Anchor Tags for Internal and External Links
 73 | - Downloadable Resources
 74 | - Email and Telephone Links
 75 | 
 76 | #### 📑 Tables
 77 | - `<table>`, `<tr>`, `<td>`, `<th>`
 78 | - Table Headers and Captions
 79 | - `<thead>`, `<tbody>`, `<tfoot>`
 80 | - Accessibility with `scope` Attribute
 81 | 
 82 | #### 🛠️ HTML5 APIs
 83 | - **Canvas API**: Drawing graphics and animations
 84 | - **Geolocation API**: Accessing user location
 85 | - **Web Storage**: `localStorage` and `sessionStorage`
 86 | - **Drag and Drop API**: Interactive drag-and-drop functionality
 87 | - **Web Workers**: Running scripts in the background
 88 | - **History API**: Managing browser history
 89 | - **Fetch API**: Making HTTP requests
 90 | 
 91 | #### ⚙️ Accessibility (a11y)
 92 | - ARIA Roles and Attributes
 93 | - Semantic HTML for Screen Readers
 94 | - Keyboard Navigation
 95 | - Alt Text for Images
 96 | - Focus Management
 97 | 
 98 | #### 📱 Responsive Design
 99 | - Meta Viewport Tag
100 | - Responsive Images (`srcset`, `sizes`)
101 | - Picture Element
102 | - Media Queries Integration
103 | 
104 | #### 🧩 Embedding Content
105 | - `<iframe>` for External Content
106 | - `<embed>` and `<object>` for Plugins
107 | - SVG Integration
108 | - MathML for Mathematical Expressions
109 | 
110 | ---
111 | 
112 | ## 💡 Why Master HTML5 for Web Development?
113 | 
114 | HTML5 is the cornerstone of web development, and here’s why:
115 | 1. **Universal Standard**: Powers every modern website and web app.
116 | 2. **Rich Features**: Supports multimedia, APIs, and interactivity natively.
117 | 3. **Accessibility**: Ensures inclusive web experiences.
118 | 4. **Industry Demand**: A must-have skill for 6 LPA+ front-end roles.
119 | 5. **Evolving Ecosystem**: Integrates seamlessly with CSS3, JavaScript, and frameworks.
120 | 
121 | This repo is my roadmap to mastering HTML5 for technical interviews and web development careers—let’s build that skill set together!
122 | 
123 | ## 📆 Study Plan
124 | 
125 | - **Week 1-2**: Core HTML5 Fundamentals
126 | - **Week 3-4**: Semantic Elements, Forms, and APIs
127 | 
128 | ## 🤝 Contributions
129 | 
130 | Love to collaborate? Here’s how! 🌟
131 | 1. Fork the repository.
132 | 2. Create a feature branch (`git checkout -b feature/amazing-addition`).
133 | 3. Commit your changes (`git commit -m 'Add some amazing content'`).
134 | 4. Push to the branch (`git push origin feature/amazing-addition`).
135 | 5. Open a Pull Request.
136 | 
137 | ---
138 | 
139 | <div align="center">
140 |   <p>Happy Learning and Good Luck with Your Interviews! ✨</p>
141 | </div>


--------------------------------------------------------------------------------
/HTML Interview Questions/README.md:
--------------------------------------------------------------------------------
   1 | # HTML Interview Questions for AI/ML Roles
   2 | 
   3 | This README provides **170 HTML interview questions** tailored for AI/ML students preparing for technical interviews, focusing on HTML’s role in web development for AI/ML applications (e.g., building dashboards, model deployment interfaces, and data visualizations). The questions are categorized into **HTML Basics**, **Semantic HTML**, **Forms and Validation**, **Multimedia**, **HTML APIs**, **Accessibility**, **Performance Optimization**, and **Integration with AI/ML**. Each category is divided into **Basic**, **Intermediate**, and **Advanced** levels, with practical code snippets to illustrate concepts. This resource supports candidates aiming for roles that combine web development with AI/ML workflows, such as creating interactive interfaces for model outputs or deploying ML models via web applications.
   4 | 
   5 | ## HTML Basics
   6 | 
   7 | ### Basic
   8 | 1. **What is HTML, and how is it used in web development?**  
   9 |    HyperText Markup Language structures web content.  
  10 |    ```html
  11 |    <!DOCTYPE html>
  12 |    <html>
  13 |    <body>
  14 |        <h1>Hello, World!</h1>
  15 |    </body>
  16 |    </html>
  17 |    ```
  18 | 
  19 | 2. **How do you create a basic HTML document structure?**  
  20 |    Uses `<!DOCTYPE>`, `<html>`, `<head>`, and `<body>`.  
  21 |    ```html
  22 |    <!DOCTYPE html>
  23 |    <html lang="en">
  24 |    <head>
  25 |        <meta charset="UTF-8">
  26 |        <title>My Page</title>
  27 |    </head>
  28 |    <body>
  29 |        <p>Content here</p>
  30 |    </body>
  31 |    </html>
  32 |    ```
  33 | 
  34 | 3. **What is the purpose of the `<!DOCTYPE html>` declaration?**  
  35 |    Specifies HTML5 standard.  
  36 |    ```html
  37 |    <!DOCTYPE html>
  38 |    <html>
  39 |    <body>
  40 |        <p>HTML5 page</p>
  41 |    </body>
  42 |    </html>
  43 |    ```
  44 | 
  45 | 4. **How do you add a comment in HTML?**  
  46 |    Uses `<!-- -->` syntax.  
  47 |    ```html
  48 |    <!-- This is a comment -->
  49 |    <p>Visible content</p>
  50 |    ```
  51 | 
  52 | 5. **What are HTML attributes, and how are they used?**  
  53 |    Provide additional information to elements.  
  54 |    ```html
  55 |    <img src="image.jpg" alt="Description">
  56 |    ```
  57 | 
  58 | 6. **How do you visualize HTML structure?**  
  59 |    Plots element hierarchy (mock example).  
  60 |    ```python
  61 |    import matplotlib.pyplot as plt
  62 |    def plot_html_structure():
  63 |        plt.figure(figsize=(8, 6))
  64 |        plt.plot([1, 2, 3], [3, 2, 1], 'o-', label='DOM Tree')
  65 |        plt.title('HTML Structure')
  66 |        plt.savefig('html_structure.png')
  67 |    ```
  68 | 
  69 | #### Intermediate
  70 | 7. **Write a function to generate a dynamic HTML list.**  
  71 |    Creates a list dynamically.  
  72 |    ```html
  73 |    <ul id="dynamic-list"></ul>
  74 |    <script>
  75 |    function createList(items) {
  76 |        const ul = document.getElementById('dynamic-list');
  77 |        items.forEach(item => {
  78 |            const li = document.createElement('li');
  79 |            li.textContent = item;
  80 |            ul.appendChild(li);
  81 |        });
  82 |    }
  83 |    createList(['Item 1', 'Item 2']);
  84 |    </script>
  85 |    ```
  86 | 
  87 | 8. **How do you link an external CSS file in HTML?**  
  88 |    Uses `<link>` tag.  
  89 |    ```html
  90 |    <head>
  91 |        <link rel="stylesheet" href="styles.css">
  92 |    </head>
  93 |    ```
  94 | 
  95 | 9. **Write a function to validate HTML attributes.**  
  96 |    Checks attribute presence.  
  97 |    ```html
  98 |    <img id="my-image" src="image.jpg">
  99 |    <script>
 100 |    function validateAttributes(elementId, attribute) {
 101 |        const element = document.getElementById(elementId);
 102 |        return element.hasAttribute(attribute);
 103 |    }
 104 |    console.log(validateAttributes('my-image', 'alt')); // False
 105 |    </script>
 106 |    ```
 107 | 
 108 | 10. **How do you embed JavaScript in HTML?**  
 109 |     Uses `<script>` tag.  
 110 |     ```html
 111 |     <script>
 112 |         console.log("Hello, JavaScript!");
 113 |     </script>
 114 |     ```
 115 | 
 116 | 11. **Write a function to toggle visibility of an HTML element.**  
 117 |     Changes display style.  
 118 |     ```html
 119 |     <button onclick="toggleVisibility()">Toggle</button>
 120 |     <div id="content">Content</div>
 121 |     <script>
 122 |     function toggleVisibility() {
 123 |         const div = document.getElementById('content');
 124 |         div.style.display = div.style.display === 'none' ? 'block' : 'none';
 125 |     }
 126 |     </script>
 127 |     ```
 128 | 
 129 | 12. **How do you create a hyperlink in HTML?**  
 130 |     Uses `<a>` tag.  
 131 |     ```html
 132 |     <a href="https://example.com">Visit Example</a>
 133 |     ```
 134 | 
 135 | #### Advanced
 136 | 13. **Write a function to parse HTML content.**  
 137 |     Extracts element data.  
 138 |     ```html
 139 |     <div id="data">Model Output: 0.95</div>
 140 |     <script>
 141 |     function parseHTMLContent(elementId) {
 142 |         const element = document.getElementById(elementId);
 143 |         return element.innerHTML;
 144 |     }
 145 |     console.log(parseHTMLContent('data')); // Model Output: 0.95
 146 |     </script>
 147 |     ```
 148 | 
 149 | 14. **How do you optimize HTML file size?**  
 150 |     Minifies HTML code.  
 151 |     ```html
 152 |     <!-- Before -->
 153 |     <html>
 154 |         <body>
 155 |             <p>  Content  </p>
 156 |         </body>
 157 |     </html>
 158 |     <!-- After -->
 159 |     <html><body><p>Content</p></body></html>
 160 |     ```
 161 | 
 162 | 15. **Write a function to dynamically update HTML attributes.**  
 163 |     Modifies attributes at runtime.  
 164 |     ```html
 165 |     <img id="dynamic-img" src="old.jpg">
 166 |     <script>
 167 |     function updateAttribute(elementId, attribute, value) {
 168 |         const element = document.getElementById(elementId);
 169 |         element.setAttribute(attribute, value);
 170 |     }
 171 |     updateAttribute('dynamic-img', 'src', 'new.jpg');
 172 |     </script>
 173 |     ```
 174 | 
 175 | 16. **How do you implement HTML5 data attributes?**  
 176 |     Uses `data-*` attributes.  
 177 |     ```html
 178 |     <div data-model-id="123">Model Data</div>
 179 |     <script>
 180 |     const div = document.querySelector('[data-model-id]');
 181 |     console.log(div.dataset.modelId); // 123
 182 |     </script>
 183 |     ```
 184 | 
 185 | 17. **Write a function to measure HTML rendering time.**  
 186 |     Logs rendering performance.  
 187 |     ```html
 188 |     <script>
 189 |     function measureRenderTime() {
 190 |         const start = performance.now();
 191 |         document.body.innerHTML += '<p>Test</p>';
 192 |         return performance.now() - start;
 193 |     }
 194 |     console.log(measureRenderTime());
 195 |     </script>
 196 |     ```
 197 | 
 198 | 18. **How do you handle HTML entities?**  
 199 |     Encodes special characters.  
 200 |     ```html
 201 |     <p>Copyright &copy; 2025</p>
 202 |     ```
 203 | 
 204 | ## Semantic HTML
 205 | 
 206 | ### Basic
 207 | 19. **What is semantic HTML, and why is it important?**  
 208 |    Uses meaningful tags for structure.  
 209 |    ```html
 210 |    <header>
 211 |        <nav>
 212 |            <ul>
 213 |                <li><a href="#home">Home</a></li>
 214 |            </ul>
 215 |        </nav>
 216 |    </header>
 217 |    ```
 218 | 
 219 | 20. **How do you use the `<article>` element?**  
 220 |    Represents independent content.  
 221 |    ```html
 222 |    <article>
 223 |        <h2>AI Model Results</h2>
 224 |        <p>Accuracy: 95%</p>
 225 |    </article>
 226 |    ```
 227 | 
 228 | 21. **What is the purpose of the `<section>` element?**  
 229 |    Groups related content.  
 230 |    ```html
 231 |    <section>
 232 |        <h2>Data Visualization</h2>
 233 |        <canvas id="chart"></canvas>
 234 |    </section>
 235 |    ```
 236 | 
 237 | 22. **How do you use the `<nav>` element?**  
 238 |    Defines navigation links.  
 239 |    ```html
 240 |    <nav>
 241 |        <a href="/dashboard">Dashboard</a>
 242 |    </nav>
 243 |    ```
 244 | 
 245 | 23. **What is the `<footer>` element used for?**  
 246 |    Contains footer content.  
 247 |    ```html
 248 |    <footer>
 249 |        <p>Contact: ai@example.com</p>
 250 |    </footer>
 251 |    ```
 252 | 
 253 | 24. **How do you visualize semantic structure?**  
 254 |    Plots semantic hierarchy.  
 255 |    ```python
 256 |    import matplotlib.pyplot as plt
 257 |    def plot_semantic_structure():
 258 |        plt.plot([1, 2, 3], [3, 2, 1], 'o-', label='Semantic DOM')
 259 |        plt.title('Semantic HTML Structure')
 260 |        plt.savefig('semantic_structure.png')
 261 |    ```
 262 | 
 263 | #### Intermediate
 264 | 25. **Write a function to validate semantic HTML usage.**  
 265 |     Checks for semantic tags.  
 266 |     ```html
 267 |     <main>
 268 |         <article>Content</article>
 269 |     </main>
 270 |     <script>
 271 |     function validateSemantic() {
 272 |         return document.querySelectorAll('main, article, section, nav').length > 0;
 273 |     }
 274 |     console.log(validateSemantic()); // True
 275 |     </script>
 276 |     ```
 277 | 
 278 | 26. **How do you use the `<aside>` element?**  
 279 |     Represents supplementary content.  
 280 |     ```html
 281 |     <aside>
 282 |         <h3>Model Metadata</h3>
 283 |         <p>Version: 1.0</p>
 284 |     </aside>
 285 |     ```
 286 | 
 287 | 27. **Write a function to dynamically add semantic elements.**  
 288 |     Appends semantic tags.  
 289 |     ```html
 290 |     <main id="container"></main>
 291 |     <script>
 292 |     function addSemanticElement(tag, content) {
 293 |         const main = document.getElementById('container');
 294 |         const element = document.createElement(tag);
 295 |         element.textContent = content;
 296 |         main.appendChild(element);
 297 |     }
 298 |     addSemanticElement('section', 'New Section');
 299 |     </script>
 300 |     ```
 301 | 
 302 | 28. **How do you use the `<figure>` and `<figcaption>` elements?**  
 303 |     Represents captioned media.  
 304 |     ```html
 305 |     <figure>
 306 |         <img src="chart.png" alt="Model Accuracy">
 307 |         <figcaption>Accuracy over epochs</figcaption>
 308 |     </figure>
 309 |     ```
 310 | 
 311 | 29. **Write a function to extract semantic content.**  
 312 |     Retrieves content from semantic tags.  
 313 |     ```html
 314 |     <article id="model-data">Accuracy: 95%</article>
 315 |     <script>
 316 |     function getSemanticContent(selector) {
 317 |         return document.querySelector(selector).textContent;
 318 |     }
 319 |     console.log(getSemanticContent('#model-data')); // Accuracy: 95%
 320 |     </script>
 321 |     ```
 322 | 
 323 | 30. **How do you combine semantic HTML with CSS?**  
 324 |     Styles semantic elements.  
 325 |     ```html
 326 |     <style>
 327 |         header { background: #f0f0f0; padding: 10px; }
 328 |     </style>
 329 |     <header>
 330 |         <h1>AI Dashboard</h1>
 331 |     </header>
 332 |     ```
 333 | 
 334 | #### Advanced
 335 | 31. **Write a function to enforce semantic HTML structure.**  
 336 |     Validates required semantic tags.  
 337 |     ```html
 338 |     <main><section>Content</section></main>
 339 |     <script>
 340 |     function enforceSemantic(tags) {
 341 |         return tags.every(tag => document.querySelector(tag));
 342 |     }
 343 |     console.log(enforceSemantic(['main', 'section'])); // True
 344 |     </script>
 345 |     ```
 346 | 
 347 | 32. **How do you optimize semantic HTML for SEO?**  
 348 |     Uses semantic tags and metadata.  
 349 |     ```html
 350 |     <head>
 351 |         <meta name="description" content="AI Model Dashboard">
 352 |     </head>
 353 |     <main>
 354 |         <h1>Model Results</h1>
 355 |         <article>Accuracy: 95%</article>
 356 |     </main>
 357 |     ```
 358 | 
 359 | 33. **Write a function to generate a semantic dashboard.**  
 360 |     Creates a dynamic dashboard layout.  
 361 |     ```html
 362 |     <main id="dashboard"></main>
 363 |     <script>
 364 |     function createDashboard(data) {
 365 |         const main = document.getElementById('dashboard');
 366 |         const section = document.createElement('section');
 367 |         section.innerHTML = `<h2>Model: ${data.model}</h2><p>Accuracy: ${data.accuracy}</p>`;
 368 |         main.appendChild(section);
 369 |     }
 370 |     createDashboard({ model: 'BERT', accuracy: '95%' });
 371 |     </script>
 372 |     ```
 373 | 
 374 | 34. **How do you implement microdata in semantic HTML?**  
 375 |     Adds structured data.  
 376 |     ```html
 377 |     <article itemscope itemtype="http://schema.org/AIModel">
 378 |         <h2 itemprop="name">BERT</h2>
 379 |         <p itemprop="description">Accuracy: 95%</p>
 380 |     </article>
 381 |     ```
 382 | 
 383 | 35. **Write a function to audit semantic HTML compliance.**  
 384 |     Checks semantic best practices.  
 385 |     ```html
 386 |     <main><article>Content</article></main>
 387 |     <script>
 388 |     function auditSemantic() {
 389 |         const hasSemantic = document.querySelectorAll('main, article, section').length;
 390 |         return hasSemantic > 2 ? 'Compliant' : 'Non-compliant';
 391 |     }
 392 |     console.log(auditSemantic());
 393 |     </script>
 394 |     ```
 395 | 
 396 | 36. **How do you integrate semantic HTML with JSON-LD?**  
 397 |     Embeds structured data.  
 398 |     ```html
 399 |     <script type="application/ld+json">
 400 |     {
 401 |         "@context": "http://schema.org",
 402 |         "@type": "AIModel",
 403 |         "name": "BERT",
 404 |         "description": "Accuracy: 95%"
 405 |     }
 406 |     </script>
 407 |     ```
 408 | 
 409 | ## Forms and Validation
 410 | 
 411 | ### Basic
 412 | 37. **How do you create an HTML form?**  
 413 |    Uses `<form>` and input elements.  
 414 |    ```html
 415 |    <form>
 416 |        <input type="text" name="username">
 417 |        <button type="submit">Submit</button>
 418 |    </form>
 419 |    ```
 420 | 
 421 | 38. **What is the purpose of the `action` attribute in a form?**  
 422 |    Specifies form submission URL.  
 423 |    ```html
 424 |    <form action="/submit" method="POST">
 425 |        <input type="text" name="data">
 426 |        <button type="submit">Send</button>
 427 |    </form>
 428 |    ```
 429 | 
 430 | 39. **How do you use the `<input>` element?**  
 431 |    Captures user input.  
 432 |    ```html
 433 |    <input type="number" name="model-epoch" min="1">
 434 |    ```
 435 | 
 436 | 40. **What is the `required` attribute in forms?**  
 437 |    Enforces input before submission.  
 438 |    ```html
 439 |    <input type="text" name="email" required>
 440 |    ```
 441 | 
 442 | 41. **How do you create a dropdown menu?**  
 443 |    Uses `<select>` and `<option>`.  
 444 |    ```html
 445 |    <select name="model">
 446 |        <option value="bert">BERT</option>
 447 |        <option value="gpt">GPT</option>
 448 |    </select>
 449 |    ```
 450 | 
 451 | 42. **How do you visualize form submission metrics?**  
 452 |    Plots submission counts.  
 453 |    ```python
 454 |    import matplotlib.pyplot as plt
 455 |    def plot_form_metrics(submissions):
 456 |        plt.plot(submissions, label='Submissions')
 457 |        plt.title('Form Submission Metrics')
 458 |        plt.savefig('form_metrics.png')
 459 |    ```
 460 | 
 461 | #### Intermediate
 462 | 43. **Write a function to validate form inputs.**  
 463 |     Checks input values.  
 464 |     ```html
 465 |     <form id="model-form">
 466 |         <input type="number" name="epochs" id="epochs">
 467 |         <button type="submit">Submit</button>
 468 |     </form>
 469 |     <script>
 470 |     function validateForm() {
 471 |         const epochs = document.getElementById('epochs').value;
 472 |         return epochs > 0 ? true : alert('Invalid epochs');
 473 |     }
 474 |     document.getElementById('model-form').addEventListener('submit', validateForm);
 475 |     </script>
 476 |     ```
 477 | 
 478 | 44. **How do you use HTML5 validation attributes?**  
 479 |     Enforces input patterns.  
 480 |     ```html
 481 |     <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
 482 |     ```
 483 | 
 484 | 45. **Write a function to handle form submissions.**  
 485 |     Processes form data.  
 486 |     ```html
 487 |     <form id="data-form">
 488 |         <input type="text" name="model-name">
 489 |         <button type="submit">Submit</button>
 490 |     </form>
 491 |     <script>
 492 |     function handleSubmit(event) {
 493 |         event.preventDefault();
 494 |         const formData = new FormData(event.target);
 495 |         console.log(formData.get('model-name'));
 496 |     }
 497 |     document.getElementById('data-form').addEventListener('submit', handleSubmit);
 498 |     </script>
 499 |     ```
 500 | 
 501 | 46. **How do you create a file upload form?**  
 502 |     Uses `<input type="file">`.  
 503 |     ```html
 504 |     <form enctype="multipart/form-data">
 505 |         <input type="file" name="model-file">
 506 |         <button type="submit">Upload</button>
 507 |     </form>
 508 |     ```
 509 | 
 510 | 47. **Write a function to reset a form.**  
 511 |     Clears form inputs.  
 512 |     ```html
 513 |     <form id="reset-form">
 514 |         <input type="text" name="data">
 515 |         <button type="button" onclick="resetForm()">Reset</button>
 516 |     </form>
 517 |     <script>
 518 |     function resetForm() {
 519 |         document.getElementById('reset-form').reset();
 520 |     }
 521 |     </script>
 522 |     ```
 523 | 
 524 | 48. **How do you use radio buttons in forms?**  
 525 |     Allows single selection.  
 526 |     ```html
 527 |     <input type="radio" name="model" value="bert"> BERT
 528 |     <input type="radio" name="model" value="gpt"> GPT
 529 |     ```
 530 | 
 531 | #### Advanced
 532 | 49. **Write a function to implement custom form validation.**  
 533 |     Validates complex rules.  
 534 |     ```html
 535 |     <form id="custom-form">
 536 |         <input type="number" id="learning-rate" name="lr">
 537 |         <button type="submit">Submit</button>
 538 |     </form>
 539 |     <script>
 540 |     function customValidate() {
 541 |         const lr = document.getElementById('learning-rate').value;
 542 |         if (lr < 0.0001 || lr > 0.1) {
 543 |             alert('Learning rate out of range');
 544 |             return false;
 545 |         }
 546 |         return true;
 547 |     }
 548 |     document.getElementById('custom-form').addEventListener('submit', customValidate);
 549 |     </script>
 550 |     ```
 551 | 
 552 | 50. **How do you integrate forms with Fetch API?**  
 553 |     Submits form data asynchronously.  
 554 |     ```html
 555 |     <form id="api-form">
 556 |         <input type="text" name="model-name">
 557 |         <button type="submit">Submit</button>
 558 |     </form>
 559 |     <script>
 560 |     document.getElementById('api-form').addEventListener('submit', async (e) => {
 561 |         e.preventDefault();
 562 |         const formData = new FormData(e.target);
 563 |         const response = await fetch('/api/submit', {
 564 |             method: 'POST',
 565 |             body: formData
 566 |         });
 567 |         console.log(await response.json());
 568 |     });
 569 |     </script>
 570 |     ```
 571 | 
 572 | 51. **Write a function to serialize form data.**  
 573 |     Converts form to JSON.  
 574 |     ```html
 575 |     <form id="serialize-form">
 576 |         <input type="text" name="model" value="BERT">
 577 |         <button type="submit">Submit</button>
 578 |     </form>
 579 |     <script>
 580 |     function serializeForm(formId) {
 581 |         const form = document.getElementById(formId);
 582 |         const data = {};
 583 |         new FormData(form).forEach((value, key) => data[key] = value);
 584 |         return JSON.stringify(data);
 585 |     }
 586 |     document.getElementById('serialize-form').addEventListener('submit', () => console.log(serializeForm('serialize-form')));
 587 |     </script>
 588 |     ```
 589 | 
 590 | 52. **How do you implement autocomplete in forms?**  
 591 |     Uses `datalist`.  
 592 |     ```html
 593 |     <input list="models" name="model">
 594 |     <datalist id="models">
 595 |         <option value="BERT">
 596 |         <option value="GPT">
 597 |     </datalist>
 598 |     ```
 599 | 
 600 | 53. **Write a function to monitor form submission performance.**  
 601 |     Logs submission latency.  
 602 |     ```html
 603 |     <form id="perf-form">
 604 |         <input type="text" name="data">
 605 |         <button type="submit">Submit</button>
 606 |     </form>
 607 |     <script>
 608 |     async function monitorSubmission() {
 609 |         const start = performance.now();
 610 |         const response = await fetch('/api/submit', { method: 'POST' });
 611 |         return performance.now() - start;
 612 |     }
 613 |     document.getElementById('perf-form').addEventListener('submit', async (e) => {
 614 |         e.preventDefault();
 615 |         console.log(await monitorSubmission());
 616 |     });
 617 |     </script>
 618 |     ```
 619 | 
 620 | 54. **How do you secure HTML forms?**  
 621 |     Uses CSRF tokens and validation.  
 622 |     ```html
 623 |     <form method="POST">
 624 |         <input type="hidden" name="csrf_token" value="token123">
 625 |         <input type="text" name="data">
 626 |         <button type="submit">Submit</button>
 627 |     </form>
 628 |     ```
 629 | 
 630 | ## Multimedia
 631 | 
 632 | ### Basic
 633 | 55. **How do you embed an image in HTML?**  
 634 |    Uses `<img>` tag.  
 635 |    ```html
 636 |    <img src="model-output.png" alt="Model Output">
 637 |    ```
 638 | 
 639 | 56. **How do you add a video to an HTML page?**  
 640 |    Uses `<video>` tag.  
 641 |    ```html
 642 |    <video controls>
 643 |        <source src="demo.mp4" type="video/mp4">
 644 |    </video>
 645 |    ```
 646 | 
 647 | 57. **What is the `<audio>` element used for?**  
 648 |    Embeds audio content.  
 649 |    ```html
 650 |    <audio controls>
 651 |        <source src="podcast.mp3" type="audio/mpeg">
 652 |    </audio>
 653 |    ```
 654 | 
 655 | 58. **How do you use the `<canvas>` element?**  
 656 |    Renders graphics dynamically.  
 657 |    ```html
 658 |    <canvas id="chart" width="200" height="200"></canvas>
 659 |    <script>
 660 |    const ctx = document.getElementById('chart').getContext('2d');
 661 |    ctx.fillRect(50, 50, 100, 100);
 662 |    </script>
 663 |    ```
 664 | 
 665 | 59. **How do you add alternative text to media?**  
 666 |    Uses `alt` attribute.  
 667 |    ```html
 668 |    <img src="chart.png" alt="Accuracy Chart">
 669 |    ```
 670 | 
 671 | 60. **How do you visualize multimedia rendering?**  
 672 |    Plots rendering times.  
 673 |    ```python
 674 |    import matplotlib.pyplot as plt
 675 |    def plot_multimedia_metrics(times):
 676 |        plt.plot(times, label='Render Time')
 677 |        plt.title('Multimedia Rendering')
 678 |        plt.savefig('multimedia_metrics.png')
 679 |    ```
 680 | 
 681 | #### Intermediate
 682 | 61. **Write a function to dynamically load images.**  
 683 |     Adds images via JavaScript.  
 684 |     ```html
 685 |     <div id="image-container"></div>
 686 |     <script>
 687 |     function loadImage(src, alt) {
 688 |         const img = document.createElement('img');
 689 |         img.src = src;
 690 |         img.alt = alt;
 691 |         document.getElementById('image-container').appendChild(img);
 692 |     }
 693 |     loadImage('model.png', 'Model Output');
 694 |     </script>
 695 |     ```
 696 | 
 697 | 62. **How do you implement responsive images?**  
 698 |     Uses `srcset` and `sizes`.  
 699 |     ```html
 700 |     <img src="small.png" srcset="large.png 1024w, small.png 640w" sizes="(max-width: 600px) 640px, 1024px" alt="Model">
 701 |     ```
 702 | 
 703 | 63. **Write a function to control video playback.**  
 704 |     Manages video controls.  
 705 |     ```html
 706 |     <video id="demo-video" controls>
 707 |         <source src="demo.mp4" type="video/mp4">
 708 |     </video>
 709 |     <button onclick="toggleVideo()">Play/Pause</button>
 710 |     <script>
 711 |     function toggleVideo() {
 712 |         const video = document.getElementById('demo-video');
 713 |         video.paused ? video.play() : video.pause();
 714 |     }
 715 |     </script>
 716 |     ```
 717 | 
 718 | 64. **How do you draw on a canvas for data visualization?**  
 719 |     Renders a simple chart.  
 720 |     ```html
 721 |     <canvas id="data-chart" width="300" height="200"></canvas>
 722 |     <script>
 723 |     const ctx = document.getElementById('data-chart').getContext('2d');
 724 |     ctx.beginPath();
 725 |     ctx.moveTo(0, 100);
 726 |     ctx.lineTo(300, 50);
 727 |     ctx.stroke();
 728 |     </script>
 729 |     ```
 730 | 
 731 | 65. **Write a function to preload multimedia content.**  
 732 |     Improves loading performance.  
 733 |     ```html
 734 |     <link rel="preload" href="model.mp4" as="video">
 735 |     <script>
 736 |     function preloadMedia(src, type) {
 737 |         const link = document.createElement('link');
 738 |         link.rel = 'preload';
 739 |         link.href = src;
 740 |         link.as = type;
 741 |         document.head.appendChild(link);
 742 |     }
 743 |     preloadMedia('chart.png', 'image');
 744 |     </script>
 745 |     ```
 746 | 
 747 | 66. **How do you embed SVG in HTML?**  
 748 |     Uses `<svg>` tag.  
 749 |     ```html
 750 |     <svg width="100" height="100">
 751 |         <circle cx="50" cy="50" r="40" fill="blue" />
 752 |     </svg>
 753 |     ```
 754 | 
 755 | #### Advanced
 756 | 67. **Write a function to animate a canvas chart.**  
 757 |     Animates data visualization.  
 758 |     ```html
 759 |     <canvas id="anim-chart" width="300" height="200"></canvas>
 760 |     <script>
 761 |     function animateChart(data) {
 762 |         const ctx = document.getElementById('anim-chart').getContext('2d');
 763 |         let x = 0;
 764 |         function draw() {
 765 |             ctx.clearRect(0, 0, 300, 200);
 766 |             ctx.fillRect(x, 100, 10, data[x % data.length]);
 767 |             x += 5;
 768 |             if (x < 300) requestAnimationFrame(draw);
 769 |         }
 770 |         draw();
 771 |     }
 772 |     animateChart([50, 100, 75, 120]);
 773 |     </script>
 774 |     ```
 775 | 
 776 | 68. **How do you optimize multimedia loading?**  
 777 |     Uses lazy loading.  
 778 |     ```html
 779 |     <img src="placeholder.png" data-src="model.png" loading="lazy" alt="Model">
 780 |     <script>
 781 |     document.querySelectorAll('img[loading="lazy"]').forEach(img => {
 782 |         img.src = img.dataset.src;
 783 |     });
 784 |     </script>
 785 |     ```
 786 | 
 787 | 69. **Write a function to handle video streaming.**  
 788 |     Manages video chunks.  
 789 |     ```html
 790 |     <video id="stream-video"></video>
 791 |     <script>
 792 |     async function streamVideo(url) {
 793 |         const video = document.getElementById('stream-video');
 794 |         const response = await fetch(url);
 795 |         video.src = URL.createObjectURL(await response.blob());
 796 |         video.play();
 797 |     }
 798 |     streamVideo('/stream.mp4');
 799 |     </script>
 800 |     ```
 801 | 
 802 | 70. **How do you implement WebGL with canvas?**  
 803 |     Renders 3D graphics.  
 804 |     ```html
 805 |     <canvas id="webgl-canvas"></canvas>
 806 |     <script>
 807 |     const canvas = document.getElementById('webgl-canvas');
 808 |     const gl = canvas.getContext('webgl');
 809 |     gl.clearColor(0, 0, 1, 1);
 810 |     gl.clear(gl.COLOR_BUFFER_BIT);
 811 |     </script>
 812 |     ```
 813 | 
 814 | 71. **Write a function to monitor multimedia performance.**  
 815 |     Logs rendering latency.  
 816 |     ```html
 817 |     <canvas id="perf-canvas"></canvas>
 818 |     <script>
 819 |     function monitorCanvasRender() {
 820 |         const start = performance.now();
 821 |         const ctx = document.getElementById('perf-canvas').getContext('2d');
 822 |         ctx.fillRect(0, 0, 100, 100);
 823 |         return performance.now() - start;
 824 |     }
 825 |     console.log(monitorCanvasRender());
 826 |     </script>
 827 |     ```
 828 | 
 829 | 72. **How do you integrate multimedia with AI/ML outputs?**  
 830 |     Displays model visualizations.  
 831 |     ```html
 832 |     <canvas id="ml-chart"></canvas>
 833 |     <script>
 834 |     function renderMLChart(data) {
 835 |         const ctx = document.getElementById('ml-chart').getContext('2d');
 836 |         data.forEach((val, i) => ctx.fillRect(i * 20, 200 - val, 15, val));
 837 |     }
 838 |     renderMLChart([50, 100, 75]); // Model accuracy
 839 |     </script>
 840 |     ```
 841 | 
 842 | ## HTML APIs
 843 | 
 844 | ### Basic
 845 | 73. **What is the DOM, and how is it accessed in HTML?**  
 846 |    Document Object Model for manipulation.  
 847 |    ```html
 848 |    <p id="text">Hello</p>
 849 |    <script>
 850 |    document.getElementById('text').textContent = 'World';
 851 |    </script>
 852 |    ```
 853 | 
 854 | 74. **How do you use the History API?**  
 855 |    Manages browser history.  
 856 |    ```html
 857 |    <button onclick="goBack()">Back</button>
 858 |    <script>
 859 |    function goBack() {
 860 |        history.back();
 861 |    }
 862 |    </script>
 863 |    ```
 864 | 
 865 | 75. **What is the Fetch API used for?**  
 866 |    Makes HTTP requests.  
 867 |    ```html
 868 |    <script>
 869 |    fetch('https://api.example.com/data')
 870 |        .then(response => response.json())
 871 |        .then(data => console.log(data));
 872 |    </script>
 873 |    ```
 874 | 
 875 | 76. **How do you use the Geolocation API?**  
 876 |    Retrieves user location.  
 877 |    ```html
 878 |    <button onclick="getLocation()">Get Location</button>
 879 |    <script>
 880 |    function getLocation() {
 881 |        navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords));
 882 |    }
 883 |    </script>
 884 |    ```
 885 | 
 886 | 77. **What is the purpose of the Web Storage API?**  
 887 |    Stores data locally.  
 888 |    ```html
 889 |    <script>
 890 |    localStorage.setItem('model', 'BERT');
 891 |    console.log(localStorage.getItem('model')); // BERT
 892 |    </script>
 893 |    ```
 894 | 
 895 | 78. **How do you visualize API response times?**  
 896 |    Plots API latency.  
 897 |    ```python
 898 |    import matplotlib.pyplot as plt
 899 |    def plot_api_metrics(times):
 900 |        plt.plot(times, label='API Latency')
 901 |        plt.title('API Response Times')
 902 |        plt.savefig('api_metrics.png')
 903 |    ```
 904 | 
 905 | #### Intermediate
 906 | 79. **Write a function to fetch AI model data.**  
 907 |     Retrieves model outputs via API.  
 908 |     ```html
 909 |     <div id="model-output"></div>
 910 |     <script>
 911 |     async function fetchModelData(url) {
 912 |         const response = await fetch(url);
 913 |         const data = await response.json();
 914 |         document.getElementById('model-output').textContent = data.accuracy;
 915 |     }
 916 |     fetchModelData('/api/model');
 917 |     </script>
 918 |     ```
 919 | 
 920 | 80. **How do you use the WebSocket API?**  
 921 |     Enables real-time communication.  
 922 |     ```html
 923 |     <script>
 924 |     const ws = new WebSocket('ws://example.com');
 925 |     ws.onmessage = event => console.log(event.data);
 926 |     </script>
 927 |     ```
 928 | 
 929 | 81. **Write a function to store ML metadata locally.**  
 930 |     Uses Web Storage.  
 931 |     ```html
 932 |     <script>
 933 |     function storeMetadata(metadata) {
 934 |         localStorage.setItem('ml-metadata', JSON.stringify(metadata));
 935 |     }
 936 |     storeMetadata({ model: 'BERT', accuracy: 0.95 });
 937 |     </script>
 938 |     ```
 939 | 
 940 | 82. **How do you implement drag-and-drop with HTML5?**  
 941 |     Uses Drag and Drop API.  
 942 |     ```html
 943 |     <div draggable="true" ondragstart="drag(event)">Model</div>
 944 |     <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 945 |     <script>
 946 |     function allowDrop(e) { e.preventDefault(); }
 947 |     function drag(e) { e.dataTransfer.setData('text', e.target.textContent); }
 948 |     function drop(e) {
 949 |         e.preventDefault();
 950 |         e.target.textContent = e.dataTransfer.getData('text');
 951 |     }
 952 |     </script>
 953 |     ```
 954 | 
 955 | 83. **Write a function to use the Clipboard API.**  
 956 |     Copies text to clipboard.  
 957 |     ```html
 958 |     <button onclick="copyText()">Copy</button>
 959 |     <script>
 960 |     async function copyText() {
 961 |         await navigator.clipboard.writeText('Model: BERT');
 962 |         console.log('Copied!');
 963 |     }
 964 |     </script>
 965 |     ```
 966 | 
 967 | 84. **How do you use the Notification API?**  
 968 |     Displays browser notifications.  
 969 |     ```html
 970 |     <button onclick="showNotification()">Notify</button>
 971 |     <script>
 972 |     function showNotification() {
 973 |         Notification.requestPermission().then(perm => {
 974 |             if (perm === 'granted') new Notification('Model Trained!');
 975 |         });
 976 |     }
 977 |     </script>
 978 |     ```
 979 | 
 980 | #### Advanced
 981 | 85. **Write a function to stream ML model outputs.**  
 982 |     Uses Server-Sent Events.  
 983 |     ```html
 984 |     <div id="stream-output"></div>
 985 |     <script>
 986 |     function streamModelOutput(url) {
 987 |         const source = new EventSource(url);
 988 |         source.onmessage = event => {
 989 |             document.getElementById('stream-output').textContent = event.data;
 990 |         };
 991 |     }
 992 |     streamModelOutput('/api/stream');
 993 |     </script>
 994 |     ```
 995 | 
 996 | 86. **How do you implement Web Workers for ML tasks?**  
 997 |     Runs tasks in background.  
 998 |     ```html
 999 |     <script>
1000 |     const worker = new Worker('ml-worker.js');
1001 |     worker.postMessage({ model: 'BERT' });
1002 |     worker.onmessage = e => console.log(e.data);
1003 |     </script>
1004 |     <!-- ml-worker.js -->
1005 |     <!-- self.onmessage = e => self.postMessage({ result: 'Processed' }); -->
1006 |     ```
1007 | 
1008 | 87. **Write a function to use the Intersection Observer API.**  
1009 |     Detects element visibility.  
1010 |     ```html
1011 |     <div id="model-section">Model Data</div>
1012 |     <script>
1013 |     function observeElement(elementId) {
1014 |         const element = document.getElementById(elementId);
1015 |         const observer = new IntersectionObserver(entries => {
1016 |             if (entries[0].isIntersecting) console.log('Visible');
1017 |         });
1018 |         observer.observe(element);
1019 |     }
1020 |     observeElement('model-section');
1021 |     </script>
1022 |     ```
1023 | 
1024 | 88. **How do you integrate the WebRTC API for video?**  
1025 |     Enables real-time video.  
1026 |     ```html
1027 |     <video id="local-video" autoplay></video>
1028 |     <script>
1029 |     async function startVideo() {
1030 |         const stream = await navigator.mediaDevices.getUserMedia({ video: true });
1031 |         document.getElementById('local-video').srcObject = stream;
1032 |     }
1033 |     startVideo();
1034 |     </script>
1035 |     ```
1036 | 
1037 | 89. **Write a function to monitor API performance.**  
1038 |     Logs API call metrics.  
1039 |     ```html
1040 |     <script>
1041 |     async function monitorAPICall(url) {
1042 |         const start = performance.now();
1043 |         await fetch(url);
1044 |         return performance.now() - start;
1045 |     }
1046 |     monitorAPICall('/api/model').then(time => console.log(time));
1047 |     </script>
1048 |     ```
1049 | 
1050 | 90. **How do you implement the Service Worker API?**  
1051 |     Enables offline functionality.  
1052 |     ```html
1053 |     <script>
1054 |     if ('serviceWorker' in navigator) {
1055 |         navigator.serviceWorker.register('/sw.js');
1056 |     }
1057 |     </script>
1058 |     <!-- sw.js -->
1059 |     <!-- self.addEventListener('fetch', e => e.respondWith(fetch(e.request))); -->
1060 |     ```
1061 | 
1062 | ## Accessibility
1063 | 
1064 | ### Basic
1065 | 91. **What is web accessibility in HTML?**  
1066 |    Ensures content is usable by all.  
1067 |    ```html
1068 |    <img src="model.png" alt="Model Accuracy Chart">
1069 |    ```
1070 | 
1071 | 92. **How do you use ARIA attributes?**  
1072 |    Enhances accessibility.  
1073 |    ```html
1074 |    <button aria-label="Run Model">Run</button>
1075 |    ```
1076 | 
1077 | 93. **What is the purpose of the `alt` attribute?**  
1078 |    Provides image descriptions.  
1079 |    ```html
1080 |    <img src="chart.png" alt="Accuracy over epochs">
1081 |    ```
1082 | 
1083 | 94. **How do you create accessible links?**  
1084 |    Uses descriptive text.  
1085 |    ```html
1086 |    <a href="/dashboard" aria-label="View AI Dashboard">Dashboard</a>
1087 |    ```
1088 | 
1089 | 95. **What is the `role` attribute in ARIA?**  
1090 |    Defines element purpose.  
1091 |    ```html
1092 |    <div role="alert">Model training complete!</div>
1093 |    ```
1094 | 
1095 | 96. **How do you visualize accessibility metrics?**  
1096 |    Plots accessibility scores.  
1097 |    ```python
1098 |    import matplotlib.pyplot as plt
1099 |    def plot_accessibility_metrics(scores):
1100 |        plt.plot(scores, label='Accessibility Score')
1101 |        plt.title('Accessibility Metrics')
1102 |        plt.savefig('accessibility_metrics.png')
1103 |    ```
1104 | 
1105 | #### Intermediate
1106 | 97. **Write a function to check for alt attributes.**  
1107 |     Validates image accessibility.  
1108 |     ```html
1109 |     <img src="model.png" id="model-img">
1110 |     <script>
1111 |     function checkAltAttributes() {
1112 |         const images = document.querySelectorAll('img');
1113 |         return Array.from(images).every(img => img.hasAttribute('alt'));
1114 |     }
1115 |     console.log(checkAltAttributes()); // False
1116 |     </script>
1117 |     ```
1118 | 
1119 | 98. **How do you make forms accessible?**  
1120 |     Uses `<label>` and ARIA.  
1121 |     ```html
1122 |     <form>
1123 |         <label for="model-name">Model Name</label>
1124 |         <input id="model-name" type="text" aria-required="true">
1125 |     </form>
1126 |     ```
1127 | 
1128 | 99. **Write a function to add ARIA landmarks.**  
1129 |     Enhances navigation.  
1130 |     ```html
1131 |     <div id="main-content"></div>
1132 |     <script>
1133 |     function addAriaLandmark(elementId, role) {
1134 |         const element = document.getElementById(elementId);
1135 |         element.setAttribute('role', role);
1136 |     }
1137 |     addAriaLandmark('main-content', 'main');
1138 |     </script>
1139 |     ```
1140 | 
1141 | 100. **How do you ensure keyboard navigation?**  
1142 |      Uses `tabindex`.  
1143 |      ```html
1144 |      <button tabindex="0">Run Model</button>
1145 |      ```
1146 | 
1147 | 101. **Write a function to test focus management.**  
1148 |      Checks focusable elements.  
1149 |      ```html
1150 |      <button id="focus-btn">Click</button>
1151 |      <script>
1152 |      function testFocus() {
1153 |          const btn = document.getElementById('focus-btn');
1154 |          btn.focus();
1155 |          return document.activeElement === btn;
1156 |      }
1157 |      console.log(testFocus()); // True
1158 |      </script>
1159 |      ```
1160 | 
1161 | 102. **How do you make multimedia accessible?**  
1162 |      Adds captions and descriptions.  
1163 |      ```html
1164 |      <video controls>
1165 |          <source src="demo.mp4" type="video/mp4">
1166 |          <track src="captions.vtt" kind="captions" srclang="en" label="English">
1167 |      </video>
1168 |      ```
1169 | 
1170 | #### Advanced
1171 | 103. **Write a function to audit accessibility compliance.**  
1172 |      Checks ARIA and alt attributes.  
1173 |      ```html
1174 |      <img src="model.png" alt="Model">
1175 |      <script>
1176 |      function auditAccessibility() {
1177 |          const images = document.querySelectorAll('img');
1178 |          const aria = document.querySelectorAll('[role]');
1179 |          return images.length > 0 && aria.length > 0 ? 'Compliant' : 'Non-compliant';
1180 |      }
1181 |      console.log(auditAccessibility());
1182 |      </script>
1183 |      ```
1184 | 
1185 | 104. **How do you implement dynamic ARIA states?**  
1186 |      Updates ARIA attributes.  
1187 |      ```html
1188 |      <button id="toggle-btn" aria-expanded="false">Toggle</button>
1189 |      <script>
1190 |      function updateAriaState() {
1191 |          const btn = document.getElementById('toggle-btn');
1192 |          btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');
1193 |      }
1194 |      document.getElementById('toggle-btn').addEventListener('click', updateAriaState);
1195 |      </script>
1196 |      ```
1197 | 
1198 | 105. **Write a function to enhance screen reader support.**  
1199 |      Adds ARIA live regions.  
1200 |      ```html
1201 |      <div id="live-region" aria-live="polite"></div>
1202 |      <script>
1203 |      function updateLiveRegion(message) {
1204 |          document.getElementById('live-region').textContent = message;
1205 |      }
1206 |      updateLiveRegion('Model training complete');
1207 |      </script>
1208 |      ```
1209 | 
1210 | 106. **How do you test accessibility with automated tools?**  
1211 |      Simulates tool output (mock).  
1212 |      ```html
1213 |      <script>
1214 |      function simulateA11yTest() {
1215 |          const issues = document.querySelectorAll('img:not([alt])').length;
1216 |          return issues === 0 ? 'Pass' : 'Fail';
1217 |      }
1218 |      console.log(simulateA11yTest());
1219 |      </script>
1220 |      ```
1221 | 
1222 | 107. **Write a function to manage focus for modals.**  
1223 |      Traps focus in modal.  
1224 |      ```html
1225 |      <div id="modal" role="dialog" aria-hidden="true">
1226 |          <button id="close-btn">Close</button>
1227 |      </div>
1228 |      <script>
1229 |      function trapFocus(modalId) {
1230 |          const modal = document.getElementById(modalId);
1231 |          const focusable = modal.querySelectorAll('button');
1232 |          focusable[0].focus();
1233 |      }
1234 |      trapFocus('modal');
1235 |      </script>
1236 |      ```
1237 | 
1238 | 108. **How do you ensure color contrast for accessibility?**  
1239 |      Uses high-contrast colors.  
1240 |      ```html
1241 |      <style>
1242 |          .high-contrast { background: #000; color: #fff; }
1243 |      </style>
1244 |      <div class="high-contrast">Model Results</div>
1245 |      ```
1246 | 
1247 | ## Performance Optimization
1248 | 
1249 | ### Basic
1250 | 109. **How do you optimize HTML loading?**  
1251 |      Minifies HTML and uses async.  
1252 |      ```html
1253 |      <script async src="script.js"></script>
1254 |      ```
1255 | 
1256 | 110. **What is lazy loading in HTML?**  
1257 |      Delays loading of non-critical resources.  
1258 |      ```html
1259 |      <img src="placeholder.png" loading="lazy" alt="Model">
1260 |      ```
1261 | 
1262 | 111. **How do you reduce HTTP requests in HTML?**  
1263 |      Combines resources.  
1264 |      ```html
1265 |      <link rel="stylesheet" href="combined.css">
1266 |      ```
1267 | 
1268 | 112. **What is the purpose of the `defer` attribute?**  
1269 |      Defers script execution.  
1270 |      ```html
1271 |      <script defer src="script.js"></script>
1272 |      ```
1273 | 
1274 | 113. **How do you preload critical resources?**  
1275 |      Uses `<link rel="preload">`.  
1276 |      ```html
1277 |      <link rel="preload" href="model.css" as="style">
1278 |      ```
1279 | 
1280 | 114. **How do you visualize performance metrics?**  
1281 |      Plots page load times.  
1282 |      ```python
1283 |      import matplotlib.pyplot as plt
1284 |      def plot_performance_metrics(times):
1285 |          plt.plot(times, label='Load Time')
1286 |          plt.title('Page Performance')
1287 |          plt.savefig('performance_metrics.png')
1288 |      ```
1289 | 
1290 | #### Intermediate
1291 | 115. **Write a function to lazy load images.**  
1292 |      Loads images on scroll.  
1293 |      ```html
1294 |      <img data-src="model.png" class="lazy" alt="Model">
1295 |      <script>
1296 |      function lazyLoadImages() {
1297 |          document.querySelectorAll('.lazy').forEach(img => {
1298 |              if (img.getBoundingClientRect().top < window.innerHeight) {
1299 |                  img.src = img.dataset.src;
1300 |              }
1301 |          });
1302 |      }
1303 |      window.addEventListener('scroll', lazyLoadImages);
1304 |      </script>
1305 |      ```
1306 | 
1307 | 116. **How do you optimize CSS delivery?**  
1308 |      Uses critical CSS.  
1309 |      ```html
1310 |      <style>
1311 |          .critical { font-size: 16px; }
1312 |      </style>
1313 |      <link rel="stylesheet" href="styles.css">
1314 |      ```
1315 | 
1316 | 117. **Write a function to measure page load time.**  
1317 |      Logs load performance.  
1318 |      ```html
1319 |      <script>
1320 |      function measurePageLoad() {
1321 |          const loadTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
1322 |          console.log(loadTime);
1323 |      }
1324 |      window.addEventListener('load', measurePageLoad);
1325 |      </script>
1326 |      ```
1327 | 
1328 | 118. **How do you implement browser caching?**  
1329 |      Sets cache headers (mock).  
1330 |      ```html
1331 |      <meta http-equiv="Cache-Control" content="max-age=3600">
1332 |      ```
1333 | 
1334 | 119. **Write a function to defer non-critical scripts.**  
1335 |      Dynamically loads scripts.  
1336 |      ```html
1337 |      <script>
1338 |      function deferScript(src) {
1339 |          const script = document.createElement('script');
1340 |          script.src = src;
1341 |          script.defer = true;
1342 |          document.head.appendChild(script);
1343 |      }
1344 |      deferScript('non-critical.js');
1345 |      </script>
1346 |      ```
1347 | 
1348 | 120. **How do you optimize font loading?**  
1349 |      Uses `font-display`.  
1350 |      ```html
1351 |      <style>
1352 |          @font-face {
1353 |              font-family: 'Custom';
1354 |              src: url('font.woff2') format('woff2');
1355 |              font-display: swap;
1356 |          }
1357 |      </style>
1358 |      ```
1359 | 
1360 | #### Advanced
1361 | 121. **Write a function to implement code splitting.**  
1362 |      Loads scripts dynamically.  
1363 |      ```html
1364 |      <script>
1365 |      async function loadModule(module) {
1366 |          const { default: mod } = await import(module);
1367 |          mod.init();
1368 |      }
1369 |      loadModule('./module.js');
1370 |      </script>
1371 |      ```
1372 | 
1373 | 122. **How do you optimize critical rendering path?**  
1374 |      Prioritizes above-the-fold content.  
1375 |      ```html
1376 |      <style>
1377 |          .hero { display: block; }
1378 |      </style>
1379 |      <div class="hero">AI Dashboard</div>
1380 |      ```
1381 | 
1382 | 123. **Write a function to monitor resource loading.**  
1383 |      Logs resource timings.  
1384 |      ```html
1385 |      <script>
1386 |      function monitorResources() {
1387 |          const resources = performance.getEntriesByType('resource');
1388 |          return resources.map(r => ({ name: r.name, duration: r.duration }));
1389 |      }
1390 |      window.addEventListener('load', () => console.log(monitorResources()));
1391 |      </script>
1392 |      ```
1393 | 
1394 | 124. **How do you implement progressive enhancement?**  
1395 |      Ensures core functionality.  
1396 |      ```html
1397 |      <form action="/submit">
1398 |          <input type="text" name="data">
1399 |          <button type="submit">Submit</button>
1400 |      </form>
1401 |      <script>
1402 |      document.querySelector('form').addEventListener('submit', e => {
1403 |          e.preventDefault();
1404 |          fetch('/submit', { method: 'POST' });
1405 |      });
1406 |      </script>
1407 |      ```
1408 | 
1409 | 125. **Write a function to reduce DOM reflows.**  
1410 |      Minimizes layout changes.  
1411 |      ```html
1412 |      <div id="content"></div>
1413 |      <script>
1414 |      function optimizeDOM() {
1415 |          const fragment = document.createDocumentFragment();
1416 |          for (let i = 0; i < 100; i++) {
1417 |              const p = document.createElement('p');
1418 |              p.textContent = 'Data';
1419 |              fragment.appendChild(p);
1420 |          }
1421 |          document.getElementById('content').appendChild(fragment);
1422 |      }
1423 |      optimizeDOM();
1424 |      </script>
1425 |      ```
1426 | 
1427 | 126. **How do you use Resource Hints?**  
1428 |      Optimizes resource fetching.  
1429 |      ```html
1430 |      <link rel="dns-prefetch" href="https://api.example.com">
1431 |      <link rel="preconnect" href="https://cdn.example.com">
1432 |      ```
1433 | 
1434 | ## Integration with AI/ML
1435 | 
1436 | ### Basic
1437 | 127. **How do you display ML model outputs in HTML?**  
1438 |      Renders predictions in DOM.  
1439 |      ```html
1440 |      <div id="prediction">Loading...</div>
1441 |      <script>
1442 |      fetch('/api/predict').then(res => res.json()).then(data => {
1443 |          document.getElementById('prediction').textContent = data.prediction;
1444 |      });
1445 |      </script>
1446 |      ```
1447 | 
1448 | 128. **How do you create a dashboard for ML metrics?**  
1449 |      Uses semantic HTML and canvas.  
1450 |      ```html
1451 |      <section>
1452 |          <h2>Model Metrics</h2>
1453 |          <canvas id="metrics-chart"></canvas>
1454 |      </section>
1455 |      ```
1456 | 
1457 | 129. **What is the role of HTML in ML deployment?**  
1458 |      Provides user interface for models.  
1459 |      ```html
1460 |      <form action="/predict">
1461 |          <input type="text" name="input">
1462 |          <button type="submit">Predict</button>
1463 |      </form>
1464 |      ```
1465 | 
1466 | 130. **How do you embed TensorFlow.js in HTML?**  
1467 |      Runs ML models in browser.  
1468 |      ```html
1469 |      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
1470 |      <script>
1471 |      tf.ready().then(() => console.log('TensorFlow.js ready'));
1472 |      </script>
1473 |      ```
1474 | 
1475 | 131. **How do you display data visualizations in HTML?**  
1476 |      Uses `<canvas>` for charts.  
1477 |      ```html
1478 |      <canvas id="data-vis"></canvas>
1479 |      <script>
1480 |      const ctx = document.getElementById('data-vis').getContext('2d');
1481 |      ctx.fillRect(0, 0, 100, 50);
1482 |      </script>
1483 |      ```
1484 | 
1485 | 132. **How do you visualize ML integration metrics?**  
1486 |      Plots model performance.  
1487 |      ```python
1488 |      import matplotlib.pyplot as plt
1489 |      def plot_ml_metrics(accuracies):
1490 |          plt.plot(accuracies, label='Accuracy')
1491 |          plt.title('ML Model Performance')
1492 |          plt.savefig('ml_metrics.png')
1493 |      ```
1494 | 
1495 | #### Intermediate
1496 | 133. **Write a function to render ML predictions.**  
1497 |      Updates DOM with predictions.  
1498 |      ```html
1499 |      <div id="ml-output"></div>
1500 |      <script>
1501 |      async function renderPrediction(url) {
1502 |          const response = await fetch(url);
1503 |          const data = await response.json();
1504 |          document.getElementById('ml-output').textContent = `Prediction: ${data.result}`;
1505 |      }
1506 |      renderPrediction('/api/predict');
1507 |      </script>
1508 |      ```
1509 | 
1510 | 134. **How do you integrate HTML with Flask for ML?**  
1511 |      Serves ML model via Flask.  
1512 |      ```html
1513 |      <form action="/predict" method="POST">
1514 |          <input type="text" name="input">
1515 |          <button type="submit">Predict</button>
1516 |      </form>
1517 |      ```
1518 | 
1519 | 135. **Write a function to visualize ML model outputs.**  
1520 |      Renders chart with model data.  
1521 |      ```html
1522 |      <canvas id="ml-chart"></canvas>
1523 |      <script>
1524 |      function visualizeModelOutput(data) {
1525 |          const ctx = document.getElementById('ml-chart').getContext('2d');
1526 |          data.forEach((val, i) => ctx.fillRect(i * 20, 200 - val, 15, val));
1527 |      }
1528 |      visualizeModelOutput([0.5, 0.9, 0.7]);
1529 |      </script>
1530 |      ```
1531 | 
1532 | 136. **How do you use HTML to display real-time ML results?**  
1533 |      Uses WebSocket for updates.  
1534 |      ```html
1535 |      <div id="real-time"></div>
1536 |      <script>
1537 |      const ws = new WebSocket('ws://example.com/ml');
1538 |      ws.onmessage = event => {
1539 |          document.getElementById('real-time').textContent = event.data;
1540 |      };
1541 |      </script>
1542 |      ```
1543 | 
1544 | 137. **Write a function to load ML model in browser.**  
1545 |      Uses TensorFlow.js.  
1546 |      ```html
1547 |      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
1548 |      <script>
1549 |      async function loadModel(url) {
1550 |          const model = await tf.loadLayersModel(url);
1551 |          console.log('Model loaded');
1552 |      }
1553 |      loadModel('/model.json');
1554 |      </script>
1555 |      ```
1556 | 
1557 | 138. **How do you create an interactive ML interface?**  
1558 |      Uses forms and canvas.  
1559 |      ```html
1560 |      <form id="ml-input">
1561 |          <input type="number" name="input">
1562 |          <button type="submit">Predict</button>
1563 |      </form>
1564 |      <canvas id="result-chart"></canvas>
1565 |      ```
1566 | 
1567 | #### Advanced
1568 | 139. **Write a function to integrate ML with Web Workers.**  
1569 |      Runs model inference in background.  
1570 |      ```html
1571 |      <script>
1572 |      const worker = new Worker('ml-worker.js');
1573 |      worker.postMessage({ input: [1, 2, 3] });
1574 |      worker.onmessage = e => console.log(e.data.prediction);
1575 |      </script>
1576 |      <!-- ml-worker.js -->
1577 |      <!-- self.onmessage = async e => {
1578 |          const model = await tf.loadLayersModel('model.json');
1579 |          const prediction = model.predict(tf.tensor(e.data.input));
1580 |          self.postMessage({ prediction });
1581 |      }; -->
1582 |      ```
1583 | 
1584 | 140. **How do you deploy ML models with HTML interfaces?**  
1585 |      Uses Flask and HTML.  
1586 |      ```html
1587 |      <form action="/predict" method="POST">
1588 |          <input type="file" name="image">
1589 |          <button type="submit">Classify</button>
1590 |      </form>
1591 |      ```
1592 | 
1593 | 141. **Write a function to stream ML predictions.**  
1594 |      Uses Server-Sent Events.  
1595 |      ```html
1596 |      <div id="ml-stream"></div>
1597 |      <script>
1598 |      function streamPredictions(url) {
1599 |          const source = new EventSource(url);
1600 |          source.onmessage = event => {
1601 |              document.getElementById('ml-stream').textContent = event.data;
1602 |          };
1603 |      }
1604 |      streamPredictions('/api/predict-stream');
1605 |      </script>
1606 |      ```
1607 | 
1608 | 142. **How do you optimize ML model rendering in HTML?**  
1609 |      Uses WebGL for fast rendering.  
1610 |      ```html
1611 |      <canvas id="ml-render"></canvas>
1612 |      <script>
1613 |      const canvas = document.getElementById('ml-render');
1614 |      const gl = canvas.getContext('webgl');
1615 |      gl.clear(gl.COLOR_BUFFER_BIT);
1616 |      </script>
1617 |      ```
1618 | 
1619 | 143. **Write a function to monitor ML interface performance.**  
1620 |      Logs rendering metrics.  
1621 |      ```html
1622 |      <canvas id="ml-perf"></canvas>
1623 |      <script>
1624 |      function monitorMLRender(data) {
1625 |          const start = performance.now();
1626 |          const ctx = document.getElementById('ml-perf').getContext('2d');
1627 |          ctx.fillRect(0, 0, data, 100);
1628 |          return performance.now() - start;
1629 |      }
1630 |      console.log(monitorMLRender(100));
1631 |      </script>
1632 |      ```
1633 | 
1634 | 144. **How do you secure ML model interfaces?**  
1635 |      Uses authentication and validation.  
1636 |      ```html
1637 |      <form method="POST">
1638 |          <input type="hidden" name="csrf_token" value="token123">
1639 |          <input type="text" name="input">
1640 |          <button type="submit">Predict</button>
1641 |      </form>
1642 |      ```
1643 | 
1644 | ## Security
1645 | 
1646 | ### Basic
1647 | 145. **How do you prevent XSS in HTML?**  
1648 |      Sanitizes user input.  
1649 |      ```html
1650 |      <div id="output"></div>
1651 |      <script>
1652 |      function sanitizeInput(input) {
1653 |          return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
1654 |      }
1655 |      document.getElementById('output').textContent = sanitizeInput('<script>alert("XSS")</script>');
1656 |      </script>
1657 |      ```
1658 | 
1659 | 146. **What is a CSRF token, and how is it used?**  
1660 |      Prevents cross-site request forgery.  
1661 |      ```html
1662 |      <form method="POST">
1663 |          <input type="hidden" name="csrf_token" value="token123">
1664 |          <button type="submit">Submit</button>
1665 |      </form>
1666 |      ```
1667 | 
1668 | 147. **How do you secure file uploads in HTML?**  
1669 |      Validates file types.  
1670 |      ```html
1671 |      <input type="file" accept=".png,.jpg" name="upload">
1672 |      ```
1673 | 
1674 | 148. **What is the `rel` attribute for links?**  
1675 |      Prevents phishing attacks.  
1676 |      ```html
1677 |      <a href="https://example.com" rel="noopener noreferrer">Link</a>
1678 |      ```
1679 | 
1680 | 149. **How do you use Content Security Policy (CSP)?**  
1681 |      Restricts resource loading.  
1682 |      ```html
1683 |      <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
1684 |      ```
1685 | 
1686 | 150. **How do you visualize security metrics?**  
1687 |      Plots security incidents.  
1688 |      ```python
1689 |      import matplotlib.pyplot as plt
1690 |      def plot_security_metrics(incidents):
1691 |          plt.plot(incidents, label='Incidents')
1692 |          plt.title('Security Metrics')
1693 |          plt.savefig('security_metrics.png')
1694 |      ```
1695 | 
1696 | #### Intermediate
1697 | 151. **Write a function to sanitize HTML inputs.**  
1698 |      Prevents injection attacks.  
1699 |      ```html
1700 |      <input id="user-input">
1701 |      <script>
1702 |      function sanitizeHTML(input) {
1703 |          const div = document.createElement('div');
1704 |          div.textContent = input;
1705 |          return div.innerHTML;
1706 |      }
1707 |      document.getElementById('user-input').addEventListener('input', e => {
1708 |          console.log(sanitizeHTML(e.target.value));
1709 |      });
1710 |      </script>
1711 |      ```
1712 | 
1713 | 152. **How do you implement secure form submissions?**  
1714 |      Uses HTTPS and tokens.  
1715 |      ```html
1716 |      <form action="https://api.example.com/submit" method="POST">
1717 |          <input type="hidden" name="csrf_token" value="token123">
1718 |          <input type="text" name="data">
1719 |          <button type="submit">Submit</button>
1720 |      </form>
1721 |      ```
1722 | 
1723 | 153. **Write a function to validate file uploads.**  
1724 |      Checks file extensions.  
1725 |      ```html
1726 |      <input type="file" id="file-upload">
1727 |      <script>
1728 |      function validateFile() {
1729 |          const file = document.getElementById('file-upload').files[0];
1730 |          return /\.(png|jpg)$/i.test(file.name) ? 'Valid' : 'Invalid';
1731 |      }
1732 |      document.getElementById('file-upload').addEventListener('change', () => console.log(validateFile()));
1733 |      </script>
1734 |      ```
1735 | 
1736 | 154. **How do you prevent clickjacking?**  
1737 |      Uses X-Frame-Options.  
1738 |      ```html
1739 |      <meta http-equiv="X-Frame-Options" content="DENY">
1740 |      ```
1741 | 
1742 | 155. **Write a function to log security events.**  
1743 |      Tracks suspicious activity.  
1744 |      ```html
1745 |      <script>
1746 |      function logSecurityEvent(event) {
1747 |          console.log(`Security event: ${event}`);
1748 |          // Send to server
1749 |      }
1750 |      window.addEventListener('error', () => logSecurityEvent('Script error'));
1751 |      </script>
1752 |      ```
1753 | 
1754 | 156. **How do you secure API calls from HTML?**  
1755 |      Uses authentication tokens.  
1756 |      ```html
1757 |      <script>
1758 |      fetch('/api/secure', {
1759 |          headers: { 'Authorization': 'Bearer token123' }
1760 |      }).then(res => res.json()).then(data => console.log(data));
1761 |      </script>
1762 |      ```
1763 | 
1764 | #### Advanced
1765 | 157. **Write a function to implement input validation.**  
1766 |      Prevents malicious inputs.  
1767 |      ```html
1768 |      <input id="secure-input">
1769 |      <script>
1770 |      function validateInput(input) {
1771 |          const regex = /^[a-zA-Z0-9\s]*$/;
1772 |          return regex.test(input) ? input : '';
1773 |      }
1774 |      document.getElementById('secure-input').addEventListener('input', e => {
1775 |          e.target.value = validateInput(e.target.value);
1776 |      });
1777 |      </script>
1778 |      ```
1779 | 
1780 | 158. **How do you implement secure session management?**  
1781 |      Uses secure cookies.  
1782 |      ```html
1783 |      <meta http-equiv="Set-Cookie" content="session=abc123; HttpOnly; Secure">
1784 |      ```
1785 | 
1786 | 159. **Write a function to monitor XSS attempts.**  
1787 |      Logs suspicious inputs.  
1788 |      ```html
1789 |      <input id="xss-input">
1790 |      <script>
1791 |      function monitorXSS(input) {
1792 |          if (/[<>\"\';]/.test(input)) {
1793 |              console.log('Potential XSS detected');
1794 |          }
1795 |      }
1796 |      document.getElementById('xss-input').addEventListener('input', e => monitorXSS(e.target.value));
1797 |      </script>
1798 |      ```
1799 | 
1800 | 160. **How do you secure WebSocket connections?**  
1801 |      Uses wss:// protocol.  
1802 |      ```html
1803 |      <script>
1804 |      const ws = new WebSocket('wss://example.com');
1805 |      ws.onmessage = event => console.log(event.data);
1806 |      </script>
1807 |      ```
1808 | 
1809 | 161. **Write a function to enforce CSP dynamically.**  
1810 |      Applies security policies.  
1811 |      ```html
1812 |      <script>
1813 |      function setCSP(policy) {
1814 |          const meta = document.createElement('meta');
1815 |          meta.httpEquiv = 'Content-Security-Policy';
1816 |          meta.content = policy;
1817 |          document.head.appendChild(meta);
1818 |      }
1819 |      setCSP("default-src 'self'");
1820 |      </script>
1821 |      ```
1822 | 
1823 | 162. **How do you integrate OAuth2 in HTML interfaces?**  
1824 |      Uses redirect for authentication.  
1825 |      ```html
1826 |      <a href="https://example.com/oauth2/authorize">Login with OAuth2</a>
1827 |      ```
1828 | 
1829 | ## Testing and Validation
1830 | 
1831 | ### Basic
1832 | 163. **How do you test HTML structure?**  
1833 |      Validates DOM elements.  
1834 |      ```html
1835 |      <div id="test">Content</div>
1836 |      <script>
1837 |      function testStructure() {
1838 |          return document.getElementById('test') ? 'Valid' : 'Invalid';
1839 |      }
1840 |      console.log(testStructure());
1841 |      </script>
1842 |      ```
1843 | 
1844 | 164. **How do you validate HTML code?**  
1845 |      Uses W3C validator (mock).  
1846 |      ```html
1847 |      <!DOCTYPE html>
1848 |      <html lang="en">
1849 |      <body>
1850 |          <p>Valid HTML</p>
1851 |      </body>
1852 |      </html>
1853 |      ```
1854 | 
1855 | 165. **How do you test form functionality?**  
1856 |      Simulates form submission.  
1857 |      ```html
1858 |      <form id="test-form">
1859 |          <input type="text" name="data">
1860 |          <button type="submit">Submit</button>
1861 |      </form>
1862 |      <script>
1863 |      function testForm() {
1864 |          const form = document.getElementById('test-form');
1865 |          return form.checkValidity() ? 'Valid' : 'Invalid';
1866 |      }
1867 |      console.log(testForm());
1868 |      </script>
1869 |      ```
1870 | 
1871 | 166. **How do you test multimedia rendering?**  
1872 |      Checks media load.  
1873 |      ```html
1874 |      <img id="test-img" src="model.png">
1875 |      <script>
1876 |      function testMedia() {
1877 |          const img = document.getElementById('test-img');
1878 |          return img.complete ? 'Loaded' : 'Not loaded';
1879 |      }
1880 |      console.log(testMedia());
1881 |      </script>
1882 |      ```
1883 | 
1884 | 167. **How do you mock API responses for testing?**  
1885 |      Simulates API data.  
1886 |      ```html
1887 |      <script>
1888 |      function mockAPI() {
1889 |          return Promise.resolve({ data: 'Mocked response' });
1890 |      }
1891 |      mockAPI().then(res => console.log(res));
1892 |      </script>
1893 |      ```
1894 | 
1895 | 168. **How do you visualize test results?**  
1896 |      Plots test pass rates.  
1897 |      ```python
1898 |      import matplotlib.pyplot as plt
1899 |      def plot_test_results(passes):
1900 |          plt.plot(passes, label='Pass Rate')
1901 |          plt.title('Test Results')
1902 |          plt.savefig('test_results.png')
1903 |      ```
1904 | 
1905 | #### Intermediate
1906 | 169. **Write a function to test DOM manipulation.**  
1907 |      Verifies element changes.  
1908 |      ```html
1909 |      <div id="dynamic">Initial</div>
1910 |      <script>
1911 |      function testDOM() {
1912 |          const div = document.getElementById('dynamic');
1913 |          div.textContent = 'Updated';
1914 |          return div.textContent === 'Updated';
1915 |      }
1916 |      console.log(testDOM());
1917 |      </script>
1918 |      ```
1919 | 
1920 | 170. **How do you test accessibility compliance?**  
1921 |      Checks ARIA and alt attributes.  
1922 |      ```html
1923 |      <img src="model.png" alt="Model">
1924 |      <script>
1925 |      function testAccessibility() {
1926 |          const images = document.querySelectorAll('img');
1927 |          return Array.from(images).every(img => img.hasAttribute('alt'));
1928 |      }
1929 |      console.log(testAccessibility());
1930 |      </script>
1931 |      ```


--------------------------------------------------------------------------------