├── way.jfif ├── 04-html-cheatSheet └── HtmlCheatSheet.pdf ├── 05-html-Notes ├── 04-html-practice-notes.pdf └── 01-Beginner-html-notes.md ├── 06-html-projects ├── Image Effect │ ├── assets │ │ └── images.jfif │ ├── html │ │ └── index.html │ └── css │ │ └── style.css ├── Image Reflection │ ├── assets │ │ └── images.jfif │ ├── html │ │ ├── index.html │ │ └── ImageReflection.html │ └── css │ │ └── style.css ├── Blog-Preview-Card │ ├── assets │ │ ├── images │ │ │ ├── favicon.png │ │ │ └── profile-image.webp │ │ └── svg │ │ │ └── illustration-article.svg │ ├── css │ │ └── style.css │ └── html │ │ └── index.html ├── Show the input │ ├── js │ │ └── script.js │ ├── html │ │ └── index.html │ └── css │ │ └── style.css ├── GlowingText │ ├── css │ │ └── style.css │ └── html │ │ └── index.html ├── Flipping Word │ ├── html │ │ └── Index.html │ └── css │ │ └── style.css ├── CircularRotation │ ├── html │ │ └── index.html │ └── css │ │ └── style.css ├── Loader Roatation │ ├── html │ │ ├── index.html │ │ └── loader.html │ └── css │ │ └── style.css ├── Calculators │ ├── advance-calculator │ │ ├── css │ │ │ └── style.css │ │ ├── html │ │ │ └── index.html │ │ └── js │ │ │ └── script.js │ ├── BasicCalculator │ │ ├── JS │ │ │ └── script.js │ │ ├── css │ │ │ └── styles.css │ │ └── html │ │ │ └── index.html │ ├── BasicCalculatorWithColor │ │ ├── css │ │ │ └── style.css │ │ └── html │ │ │ └── index.html │ └── Attractive Calculator │ │ ├── html │ │ └── index.html │ │ └── css │ │ └── style.css ├── Loading Effect │ ├── html │ │ ├── index.html │ │ └── LoadingEffect.html │ └── css │ │ └── style.css ├── NameHover │ ├── html │ │ └── index.html │ └── css │ │ └── style.css ├── To Do List │ ├── html │ │ └── index.html │ ├── js │ │ └── script.js │ └── css │ │ └── style.css ├── Quize web page │ ├── html │ │ └── index.html │ ├── css │ │ └── style.css │ └── js │ │ └── script.js └── Rotational │ ├── css │ └── style.css │ └── html │ └── index.html ├── 01-Introduction-to-HTML ├── 02-Basic-HTML-Tags │ ├── assets │ │ └── images │ │ │ ├── nature.jpg │ │ │ ├── example.jpg │ │ │ └── self-closing-tag.png │ ├── examples │ │ └── basic-html-tags.html │ └── documentation │ │ ├── README.md │ │ └── how-to-use-html-tags.md ├── 03-HTML-Structure-and-Syntax │ ├── assets │ │ └── images │ │ │ ├── nature.jpg │ │ │ └── self-closing-tag.png │ ├── examples │ │ └── structure-in-html.html │ └── documentation │ │ ├── html-code-explanation.txt │ │ ├── README.md │ │ └── what-is-html-structure.md ├── 01-Overview-of-html │ ├── examples │ │ └── overview-of-html.html │ └── documentation │ │ ├── explanation-of-overview.html-file.txt │ │ ├── HTML-overview.md │ │ └── README.md ├── 04-HTML-Forms-Basics │ ├── documentation │ │ ├── html-form-tag-usage.md │ │ ├── README.md │ │ └── html-index-code-walkthrough.txt │ ├── examples │ │ └── form-in-html.html │ └── assets │ │ └── styles │ │ └── style.css ├── 06-attributes-of-html-tags │ ├── example │ │ └── tags-with-attributes.html │ └── documentation │ │ ├── README.md │ │ ├── explanation-of-html-attributes-code.md │ │ └── attributes-in-html.md └── 05-html-tags-for-text-formatting │ ├── examples │ └── text-formating-in-html.html │ └── documentation │ ├── README.md │ └── text-formatting-tags-in-html.md ├── 03-Advanced-HTML-Techniques ├── 01-SVG-Introduction │ ├── assets │ │ ├── svg │ │ │ └── external-svg-logo.svg │ │ └── styles │ │ │ └── svg-styles.css │ ├── examples │ │ └── svg-example.html │ └── documentation │ │ ├── html-svg-explanation.md │ │ └── README.md ├── 02-Canvas-Introduction │ ├── examples │ │ └── canvas-in-html.html │ ├── assets │ │ ├── JavaScript │ │ │ └── canvas-script.js │ │ └── CSS │ │ │ └── canvas-styles.css │ └── documentation │ │ ├── html-code-explanation.md │ │ ├── README.md │ │ └── canvas-topic-description.md ├── 03-WebComponents-In-HTML │ ├── assets │ │ ├── CSS │ │ │ └── web-components-styles.css │ │ └── JavaScript │ │ │ └── web-components-script.js │ ├── examples │ │ └── web-components-examples.html │ └── documentation │ │ ├── web-components-html-explanation.md │ │ ├── web-components-css-explanation.md │ │ └── web-components-javascript-explanation.md ├── Canva-and-svg.html ├── Semantic.html └── web-storage.html ├── 02-Intermediate-HTML-Projects ├── 02-Responsive-Design │ ├── assets │ │ ├── images │ │ │ └── responsive-webpage-sample.jpg │ │ └── styles │ │ │ └── responsive-webpage-styles.css │ ├── examples │ │ └── responsive-webpage-example.html │ └── documentation │ │ ├── how-to-create-responsive-webpages-in-html.md │ │ ├── responsive-html-code-detailed-explanation.md │ │ ├── responsive-css-code-detailed-explanation.md │ │ └── responsive-web-design-overview.md ├── 01-Media │ ├── documentation │ │ ├── media-docs-readme.md │ │ ├── understanding-index-html-code.md │ │ └── media-guide-overview.md │ └── examples │ │ └── media-sample-page.html ├── 03-Advanced-Forms │ ├── assets │ │ └── styles │ │ │ └── advanced-html-forms-styles.css │ ├── examples │ │ └── responsive-html-form-example.html │ └── documentation │ │ └── README.md ├── html-symbols-emojis.html ├── tables.html ├── colors-and-layout.html └── forms-and-inputs.html ├── .gitattributes └── README.md /way.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/way.jfif -------------------------------------------------------------------------------- /04-html-cheatSheet/HtmlCheatSheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/04-html-cheatSheet/HtmlCheatSheet.pdf -------------------------------------------------------------------------------- /05-html-Notes/04-html-practice-notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/05-html-Notes/04-html-practice-notes.pdf -------------------------------------------------------------------------------- /06-html-projects/Image Effect/assets/images.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/06-html-projects/Image Effect/assets/images.jfif -------------------------------------------------------------------------------- /06-html-projects/Image Reflection/assets/images.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/06-html-projects/Image Reflection/assets/images.jfif -------------------------------------------------------------------------------- /06-html-projects/Blog-Preview-Card/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/06-html-projects/Blog-Preview-Card/assets/images/favicon.png -------------------------------------------------------------------------------- /01-Introduction-to-HTML/02-Basic-HTML-Tags/assets/images/nature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/01-Introduction-to-HTML/02-Basic-HTML-Tags/assets/images/nature.jpg -------------------------------------------------------------------------------- /06-html-projects/Blog-Preview-Card/assets/images/profile-image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/06-html-projects/Blog-Preview-Card/assets/images/profile-image.webp -------------------------------------------------------------------------------- /01-Introduction-to-HTML/02-Basic-HTML-Tags/assets/images/example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/01-Introduction-to-HTML/02-Basic-HTML-Tags/assets/images/example.jpg -------------------------------------------------------------------------------- /01-Introduction-to-HTML/02-Basic-HTML-Tags/assets/images/self-closing-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/01-Introduction-to-HTML/02-Basic-HTML-Tags/assets/images/self-closing-tag.png -------------------------------------------------------------------------------- /01-Introduction-to-HTML/03-HTML-Structure-and-Syntax/assets/images/nature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/01-Introduction-to-HTML/03-HTML-Structure-and-Syntax/assets/images/nature.jpg -------------------------------------------------------------------------------- /06-html-projects/Show the input/js/script.js: -------------------------------------------------------------------------------- 1 | function abc() { 2 | var heading = document.getElementById('heading'); 3 | var input = document.getElementById('input'); 4 | heading.innerHTML = input.value; 5 | } -------------------------------------------------------------------------------- /01-Introduction-to-HTML/03-HTML-Structure-and-Syntax/assets/images/self-closing-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/01-Introduction-to-HTML/03-HTML-Structure-and-Syntax/assets/images/self-closing-tag.png -------------------------------------------------------------------------------- /03-Advanced-HTML-Techniques/01-SVG-Introduction/assets/svg/external-svg-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02-Intermediate-HTML-Projects/02-Responsive-Design/assets/images/responsive-webpage-sample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayank-Garg7/Html/HEAD/02-Intermediate-HTML-Projects/02-Responsive-Design/assets/images/responsive-webpage-sample.jpg -------------------------------------------------------------------------------- /06-html-projects/GlowingText/css/style.css: -------------------------------------------------------------------------------- 1 | @keyframes glow { 2 | 0% { 3 | text-shadow: 0 0 5px #00f; 4 | } 5 | 50% { 6 | text-shadow: 0 0 20px #00f, 0 0 30px #00f; 7 | } 8 | 100% { 9 | text-shadow: 0 0 5px #00f; 10 | } 11 | } 12 | 13 | h1 span { 14 | animation: glow 2s infinite; 15 | } -------------------------------------------------------------------------------- /01-Introduction-to-HTML/01-Overview-of-html/examples/overview-of-html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Overview of HTML 8 | 9 | 10 | 11 |

Welcome in HTML tutorials

12 |

This is a paragraph of text.

13 | 14 | 15 | -------------------------------------------------------------------------------- /06-html-projects/Flipping Word/html/Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3d Flipping Loader 5 | 6 | 7 | 8 |
9 | L 10 | O 11 | A 12 | D 13 | I 14 | N 15 | G 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /06-html-projects/CircularRotation/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rotating Circle 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /06-html-projects/Loader Roatation/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /03-Advanced-HTML-Techniques/02-Canvas-Introduction/examples/canvas-in-html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Canvas Example 8 | 9 | 10 |

HTML Canvas Example

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /06-html-projects/Calculators/advance-calculator/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | #calculator { 7 | width: 300px; 8 | margin: 0 auto; 9 | padding: 10px; 10 | background-color: #f2f2f2; 11 | border: 1px solid #ccc; 12 | border-radius: 5px; 13 | } 14 | input[type="text"] { 15 | width: 100%; 16 | height: 40px; 17 | margin-bottom: 10px; 18 | } 19 | button { 20 | width: 70px; 21 | height: 50px; 22 | margin: 5px; 23 | font-size: 16px; 24 | } 25 | 26 | 27 | -------------------------------------------------------------------------------- /02-Intermediate-HTML-Projects/01-Media/documentation/media-docs-readme.md: -------------------------------------------------------------------------------- 1 | # Media in HTML 2 | 3 | This folder covers the use of media elements in HTML, such as images, audio, and video. You'll learn how to embed and control media in your web pages with examples. 4 | 5 | ### Topics Covered 6 | - Adding images to a webpage. 7 | - Embedding audio and video. 8 | - Using media attributes (e.g., controls, autoplay, loop). 9 | 10 | ### How to Use 11 | - Refer to the `example.html` file for practical demonstrations. 12 | - Read the `topic-description.txt` file for detailed explanations. 13 | -------------------------------------------------------------------------------- /03-Advanced-HTML-Techniques/03-WebComponents-In-HTML/assets/CSS/web-components-styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f9f9f9; 4 | color: #333; 5 | margin: 0; 6 | padding: 0; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | } 12 | 13 | h1 { 14 | font-size: 2em; 15 | color: #0078d7; 16 | text-align: center; 17 | margin-bottom: 20px; 18 | } 19 | 20 | my-component { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | margin-top: 20px; 25 | } 26 | -------------------------------------------------------------------------------- /06-html-projects/GlowingText/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

10 | M 11 | A 12 | Y 13 | A 14 | N 15 | K 16 | G 17 | A 18 | R 19 | G 20 |

21 | 22 | 23 | -------------------------------------------------------------------------------- /06-html-projects/Show the input/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Letter Lightning 9 | 10 | 11 | 12 |
13 |

14 | 15 |

16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /06-html-projects/Loading Effect/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | M 13 | A 14 | Y 15 | A 16 | N 17 | K 18 | G 19 | A 20 | R 21 | G 22 | 23 | 24 | -------------------------------------------------------------------------------- /06-html-projects/NameHover/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Naming Animation 7 | 8 | 9 |
10 | M 11 | A 12 | Y 13 | A 14 | N 15 | K 16 | G 17 | A 18 | R 19 | G 20 |
21 | 22 | -------------------------------------------------------------------------------- /03-Advanced-HTML-Techniques/02-Canvas-Introduction/assets/JavaScript/canvas-script.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById('myCanvas'); 2 | const ctx = canvas.getContext('2d'); 3 | 4 | // Draw a rectangle 5 | ctx.fillStyle = 'blue'; 6 | ctx.fillRect(50, 50, 200, 100); 7 | 8 | // Draw a gradient 9 | const gradient = ctx.createLinearGradient(0, 0, 500, 0); 10 | gradient.addColorStop(0, 'red'); 11 | gradient.addColorStop(1, 'yellow'); 12 | ctx.fillStyle = gradient; 13 | ctx.fillRect(50, 200, 400, 50); 14 | 15 | // Draw a circle 16 | ctx.beginPath(); 17 | ctx.arc(300, 100, 50, 0, 2 * Math.PI); 18 | ctx.fillStyle = 'green'; 19 | ctx.fill(); 20 | -------------------------------------------------------------------------------- /06-html-projects/Calculators/BasicCalculator/JS/script.js: -------------------------------------------------------------------------------- 1 | let currentInput = ''; 2 | let screen = document.getElementById('screen'); 3 | 4 | function appendToScreen(value) { 5 | currentInput += value; 6 | screen.innerText = currentInput; 7 | } 8 | 9 | function clearScreen() { 10 | currentInput = ''; 11 | screen.innerText = '0'; 12 | } 13 | 14 | function calculate() { 15 | try { 16 | const result = eval(currentInput); 17 | screen.innerText = result; 18 | currentInput = result.toString(); 19 | } catch (error) { 20 | screen.innerText = 'Error'; 21 | currentInput = ''; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /06-html-projects/Image Reflection/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 |

Mayank Garg

16 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt, qui.

17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /01-Introduction-to-HTML/03-HTML-Structure-and-Syntax/examples/structure-in-html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | basic Structure of HTML document 8 | 9 | 10 | 11 | 12 |
13 |

Welcome to HTML Structure

14 |
15 |
16 |

This is an example of a well-structured HTML document.

17 |
18 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /03-Advanced-HTML-Techniques/03-WebComponents-In-HTML/examples/web-components-examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | In the above line lang attribute is optional and it is used to specify the language of the document. It is not a required attribute. 4 | 5 | 6 | 7 | 8 | 9 | Web Components Example 10 | 11 | 12 | 13 |

Custom Web Component Example

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Include Markdown and text files in language stats 2 | *.md linguist-documentation=false 3 | *.txt linguist-documentation=false 4 | 5 | # Include images in language stats 6 | *.jpg linguist-documentation=false 7 | *.jpeg linguist-documentation=false 8 | *.png linguist-documentation=false 9 | *.gif linguist-documentation=false 10 | *.svg linguist-documentation=false 11 | *.jfif linguist-documentation=false 12 | 13 | # Include videos in language stats 14 | *.mp4 linguist-documentation=false 15 | *.mov linguist-documentation=false 16 | *.avi linguist-documentation=false 17 | *.mkv linguist-documentation=false 18 | 19 | # Exclude specific files or directories from language stats (if needed) 20 | # path/to/excluded/file.js linguist-vendored=true 21 | -------------------------------------------------------------------------------- /06-html-projects/To Do List/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | To Do App 9 | 10 | 11 | 12 |
13 |

To-Do List

14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /06-html-projects/Quize web page/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

General Knowledge Quiz

12 |

Test your knowledge with this general knowledge quiz.

13 |
14 |

15 |
16 |
17 | 18 |
19 |

20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /01-Introduction-to-HTML/04-HTML-Forms-Basics/documentation/html-form-tag-usage.md: -------------------------------------------------------------------------------- 1 | **Creating HTML Forms** 2 | 3 | 1. **Form Structure**: 4 | - Use the `
` tag to define a form. 5 | - Include `action` (submission URL) and `method` (GET or POST) attributes. 6 | 7 | 2. **Input Types**: 8 | - Text: `` 9 | - Email: `` 10 | - Password: `` 11 | 12 | 3. **Labels and Accessibility**: 13 | - Use `