Skip to content

Commit 6d293c8

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #65 from CodeHarborHub/dev-2
HTML Tutorials All Setup and Templates for easy to write code for all
2 parents 6a8c019 + d1db35c commit 6d293c8

File tree

63 files changed

+483
-4
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+483
-4
lines changed

‎community/team.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ If you are interested in joining the team, or would like to contribute to the Op
2121

2222
## Contributors {#contributors}
2323

24-
<img src="https://opencollective.com/codeharborhub/contributors.svg?width=890&button=false" />
24+
[![contributors](https://opencollective.com/codeharborhub/contributors.svg?button=false)](https://opencollective.com/codeharborhub/contributors.svg?button=false)

‎docs/html/best-practices-and-optimization/Performance-optimization.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: performance-optimization
3+
title: Performance Optimization
4+
sidebar_label: Performance Optimization
5+
sidebar_position: 2
6+
tags: [html, best-practices, optimization]
7+
description: In this tutorial, we will learn about performance optimization in HTML.
8+
---

‎docs/html/best-practices-and-optimization/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Best Practices and Optimization",
3+
"position": 16,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn about best practices and optimization in html. You will learn about the importance of using semantic html, how to optimize images, and how to minify html."
7+
}
8+
}

‎docs/html/best-practices-and-optimization/accessibility-best-practices.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: accessibility-best-practices
3+
title: Accessibility Best Practices
4+
sidebar_label: Accessibility Best Practices
5+
sidebar_position: 3
6+
tags: [html, best-practices, accessibility]
7+
description: In this tutorial, we will learn about accessibility best practices in HTML.
8+
---

‎docs/html/best-practices-and-optimization/writing-clean-html-code.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: writing-clean-html-code
3+
title: Writing Clean HTML Code
4+
sidebar_label: Writing Clean HTML Code
5+
sidebar_position: 1
6+
tags: [html, best-practices, optimization]
7+
description: In this tutorial, we will learn about writing clean HTML code.
8+
---

‎docs/html/elements-and-tags-html.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
id: elements-and-tags-html
33
title: Introduction of HTML Tags and Elements
44
sidebar_label: HTML Tags and Elements
5-
sidebar_position: 2
6-
tags: [html, introduction, web development, markup language, hyper text, web pages, career opportunities, personal growth, web-development, web design, web pages, websites, career opportunities, contribute to the web, stay relevant, express yourself, learn other technologies, have fun, how to use html, steps to start using html, set up your development environment, create your first html document, learn html syntax and structure, explore html elements and-attributes]
5+
tags: [html, elements, tags, web-development, front-end-development, web-design]
76
description: In this tutorial, you will learn about HTML Elements and HTML Tags and about their differences
87
---
98

‎docs/html/forms/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Forms",
3+
"position": 10,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn how to create forms in html. You will learn how to create text fields, radio buttons, checkboxes, and more."
7+
}
8+
}

‎docs/html/forms/building-forms.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: building-forms
3+
title: Building Forms in HTML
4+
sidebar_label: Building Forms
5+
sidebar_position: 1
6+
tags: [html, web-development, forms, building-forms]
7+
description: In this tutorial, you will learn how to build forms in HTML. Forms are used to collect user input on web pages, such as login forms, contact forms, and search forms.
8+
---

‎docs/html/forms/form-attributes.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: form-attributes
3+
title: Form Attributes in HTML
4+
sidebar_label: Form Attributes
5+
sidebar_position: 3
6+
tags: [html, web-development, form-attributes, forms]
7+
description: In this tutorial, you will learn about form attributes in HTML. Form attributes define the appearance, behavior, and structure of forms on web pages.
8+
---

‎docs/html/forms/form-input-elements.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: form-input-elements
3+
title: Form Input Elements in HTML
4+
sidebar_label: Form Input Elements
5+
sidebar_position: 1
6+
tags: [html, web-development, forms, form-input-elements]
7+
description: In this tutorial, you will learn about form input elements in HTML. Form input elements are used to collect user input on web pages, such as text fields, radio buttons, checkboxes, and more.
8+
---

‎docs/html/forms/form-validation.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: form-validation
3+
title: Form Validation in HTML
4+
sidebar_label: Form Validation
5+
sidebar_position: 4
6+
tags: [html, web-development, forms, form-validation]
7+
description: In this tutorial, you will learn how to validate forms in HTML using built-in form validation attributes and JavaScript.
8+
---

‎docs/html/how-html-works.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: how-html-works
3+
title: How HTML works with web browsers
4+
sidebar_label: How HTML works
5+
sidebar_position: 2
6+
tags: [html, web-development, front-end-development, web-design, web-browsers, web-technology, web-pages]
7+
description: In this tutorial, you will learn about How HTML works with web browsers and how web browsers render HTML content.
8+
---

‎docs/html/html-basics/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "HTML Basics",
3+
"position": 4,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content."
7+
}
8+
}

‎docs/html/html-basics/attributes-and-values.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: attributes-and-values
3+
title: HTML Attributes and Values
4+
sidebar_label: Attributes and Values
5+
sidebar_position: 3
6+
tags: [html, web-development, attributes, values]
7+
description: In this tutorial, you will learn about HTML attributes and values. HTML attributes are used to provide additional information about HTML elements, and values are the data that is assigned to attributes.
8+
---

‎docs/html/html-basics/document-structure.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: document-structure.md
3+
title: HTML Document Structure
4+
sidebar_label: Document Structure
5+
sidebar_position: 4
6+
tags: [html, web-development, document-structure]
7+
description: In this tutorial, you will learn about the structure of an HTML document and how to create a basic HTML document.
8+
---

‎docs/html/html-basics/elements-and-tags.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: elements-and-tags
3+
title: HTML Elements and Tags
4+
sidebar_label: Elements and Tags
5+
sidebar_position: 2
6+
tags: [html, web-development, elements, tags]
7+
description: In this tutorial, you will learn about HTML elements and tags. HTML elements are the building blocks of HTML pages, and tags are used to define the structure of the content.
8+
---

‎docs/html/html-basics/syntax-and-structure.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: syntax-and-structure
3+
title: HTML syntax and structure
4+
sidebar_label: HTML syntax and structure
5+
sidebar_position: 1
6+
tags: [html, web-development, syntax-and-structure]
7+
description: In this tutorial, you will learn about the syntax and structure of HTML.
8+
---

‎docs/html/html-validation-and-debugging/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "HTML Validation and Debugging",
3+
"position": 15,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn how to validate your HTML code and debug common HTML errors."
7+
}
8+
}

‎docs/html/html-validation-and-debugging/common-html-errors-and-fixes.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: common-html-errors-and-fixes
3+
title: Common HTML Errors and Fixes
4+
sidebar_label: Common HTML Errors and Fixes
5+
sidebar_position: 3
6+
tags: [html, web-development, html-validation, debugging]
7+
description: In this tutorial, you will learn about common HTML errors and how to fix them to create valid and well-structured HTML documents.
8+
---

‎docs/html/html-validation-and-debugging/importance-of-validating-html-code.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: importance-of-validating-html-code
3+
title: Importance of Validating HTML Code
4+
sidebar_label: Importance of Validating HTML Code
5+
sidebar_position: 1
6+
tags: [html, web-development, validation, debugging]
7+
description: In this tutorial, you will learn about the importance of validating HTML code and how to use HTML validators to check for errors and ensure your code is well-formed and standards-compliant.
8+
---

‎docs/html/html-validation-and-debugging/using-w3c-validator.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: using-w3c-validator
3+
title: Using the W3C HTML Validator
4+
sidebar_label: Using the W3C Validator
5+
sidebar_position: 2
6+
tags: [html, web-development, validation, debugging]
7+
description: In this tutorial, you will learn how to use the W3C HTML Validator to check your HTML code for errors and ensure it is well-formed and standards-compliant.
8+
---

‎docs/html/html5-apis/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "HTML5 APIs",
3+
"position": 13,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn about the new HTML5 APIs that are available to you in the browser. These APIs allow you to do things like access the user's camera, microphone, and location, as well as store data on the user's device."
7+
}
8+
}

‎docs/html/html5-apis/canvas-and-svg-graphics.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: canvas-and-svg-graphics
3+
title: Canvas and SVG Graphics in HTML
4+
sidebar_label: Canvas and SVG Graphics
5+
sidebar_position: 3
6+
tags: [html, web-development, canvas, svg, graphics]
7+
description: In this tutorial, you will learn how to use the Canvas and SVG graphics APIs in HTML to draw shapes, images, and animations on a web page.
8+
---

‎docs/html/html5-apis/geolocation-api.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: geolocation-api
3+
title: Geolocation API in HTML
4+
sidebar_label: Geolocation API
5+
sidebar_position: 1
6+
tags: [html, web-development, geolocation-api]
7+
description: In this tutorial, you will learn how to use the Geolocation API to get the user's current location in a web page.
8+
---

‎docs/html/html5-apis/local-storage-and-session-storage.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: local-storage-and-session-storage
3+
title: Local Storage and Session Storage in HTML
4+
sidebar_label: Local Storage and Session Storage
5+
sidebar_position: 2
6+
tags: [html, web-development, local-storage, session-storage]
7+
description: In this tutorial, you will learn how to use the Local Storage and Session Storage APIs in HTML to store data locally in the browser.
8+
---

‎docs/html/images/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Images",
3+
"position": 8,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn how to work with images in your web pages."
7+
}
8+
}

‎docs/html/images/image-attributes.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: image-attributes
3+
title: Image Attributes in HTML
4+
sidebar_label: Image Attributes
5+
sidebar_position: 2
6+
tags: [html, web-development, image-attributes, images]
7+
description: In this tutorial, you will learn about image attributes in HTML. Image attributes define the appearance, behavior, and alignment of images on web pages.
8+
---

‎docs/html/images/image-formats-and-optimization.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: image-formats-and-optimization
3+
title: Image Formats and Optimization
4+
sidebar_label: Image Formats and Optimization
5+
sidebar_position: 3
6+
tags: [html, web-development, image-formats, image-optimization]
7+
description: In this tutorial, you will learn about image formats and optimization techniques for web development. Image formats like JPEG, PNG, and GIF are commonly used for displaying images on websites. Optimizing images can help improve website performance and reduce loading times.
8+
---

‎docs/html/images/inserting-images.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: inserting-images
3+
title: Inserting Images in HTML
4+
sidebar_label: Inserting Images
5+
sidebar_position: 1
6+
tags: [html, web-development, images, inserting-images]
7+
description: In this tutorial, you will learn how to insert images in HTML. Images are used to enhance the visual appeal of web pages and provide additional information to users.
8+
---

‎docs/html/intro-html.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: intro-HTML
33
title: Introduction of HTML
4-
sidebar_label: Introduction ofHTML
4+
sidebar_label: Introduction of HTML
55
sidebar_position: 1
66
tags: [html, introduction, web development, markup language, hyper text, web pages, career opportunities, personal growth, web-development, web design, web pages, websites, career opportunities, contribute to the web, stay relevant, express yourself, learn other technologies, have fun, how to use html, steps to start using html, set up your development environment, create your first html document, learn html syntax and structure, explore html elements and-attributes]
77
description: In this tutorial, you will learn about HTML, its importance, what is HTML, why learn HTML, how to use HTML, steps to start using HTML, and more.

‎docs/html/links-and-anchors/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Links and Anchors",
3+
"position": 7,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn how to create links and anchors in your HTML document."
7+
}
8+
}

‎docs/html/links-and-anchors/creating-hyperlinks.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: creating-hyperlinks
3+
title: Creating Hyperlinks in HTML
4+
sidebar_label: Creating Hyperlinks
5+
sidebar_position: 1
6+
tags: [html, web-development, hyperlinks, links]
7+
description: In this tutorial, you will learn how to create hyperlinks in HTML. Hyperlinks are used to link one web page to another, or to link to a specific section within the same web page.
8+
---

‎docs/html/links-and-anchors/link-attributes.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: link-attributes
3+
title: Link Attributes in HTML
4+
sidebar_label: Link Attributes
5+
sidebar_position: 2
6+
tags: [html, web-development, link-attributes, links]
7+
description: In this tutorial, you will learn about link attributes in HTML. Link attributes define the behavior, appearance, and target of hyperlinks in web pages.
8+
---

‎docs/html/lists/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Lists",
3+
"position": 6,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you learn how to create and manage lists in your app. for example, you can create an ordered list, unordered list, or definition list. You can also create a list with a custom icon or a list with a custom bullet."
7+
}
8+
}

‎docs/html/lists/definition-lists.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: definition-lists
3+
title: Definition Lists in HTML
4+
sidebar_label: Definition Lists
5+
sidebar_position: 3
6+
tags: [html, web-development, definition-lists, lists]
7+
description: In this tutorial, you will learn about definition lists in HTML. Definition lists are used to display a list of terms and their definitions.
8+
---

‎docs/html/lists/list-item-attributes.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: list-item-attributes
3+
title: List Item Attributes in HTML
4+
sidebar_label: List Item Attributes
5+
sidebar_position: 4
6+
tags: [html, web-development, list-item-attributes, lists]
7+
description: In this tutorial, you will learn about list item attributes in HTML. List items can have attributes that define the value, type, and style of the list item.
8+
---

‎docs/html/lists/ordered-lists.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: ordered-lists
3+
title: Ordered Lists in HTML
4+
sidebar_label: Ordered Lists
5+
sidebar_position: 1
6+
tags: [html, web-development, ordered-lists, lists]
7+
description: In this tutorial, you will learn about ordered lists in HTML. Ordered lists are used to display a list of items in a specific order, such as numerical or alphabetical order.
8+
---

‎docs/html/lists/unordered-lists.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: unordered-lists
3+
title: Unordered Lists in HTML
4+
sidebar_label: unordered Lists
5+
sidebar_position: 2
6+
tags: [html, web-development, unordered-lists, lists]
7+
description: In this tutorial, you will learn about unordered lists in HTML. Unordered lists are used to display a list of items in no particular order.
8+
---

‎docs/html/multimedia/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Multimedia",
3+
"position": 12,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn how to use the multimedia in html. You will learn how to add images, videos, and audio to your web pages."
7+
}
8+
}

‎docs/html/multimedia/adding-audio-and-video.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: adding-audio-and-video
3+
title: Adding Audio and Video in HTML
4+
sidebar_label: Adding Audio and Video
5+
sidebar_position: 1
6+
tags: [html, web-development, multimedia, audio, video]
7+
description: In this tutorial, you will learn how to add audio and video to your HTML documents.
8+
---

0 commit comments

Comments
 (0)