Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added more content in Docs #4590

Merged
merged 1 commit into from
Jan 11, 2025
Merged

added more content in Docs #4590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 94 additions & 53 deletions docs/html/next-steps-and-resources/advanced-html-topics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,69 +5,110 @@ sidebar_label: Advanced HTML Topics
sidebar_position: 2
tags: [html, web-development, advanced]
description: In this tutorial, we will explore advanced HTML topics such as web components, microdata, and more.
keywords:
[
advanced html,
web components,
microdata,
semantic html,
html5,
html best practices,
]
---

Welcome to a simplified exploration of advanced HTML topics! This guide is designed to make complex concepts more accessible, helping you enhance your web development skills with practical examples.

### Web Components

Web components allow you to create custom, reusable web elements. Think of them as LEGO blocks for web pages, where each block can be used across different projects.

**Custom Elements**

Imagine creating a `<user-profile>` tag that displays user information. Custom elements let you define such new HTML tags, making your code more semantic and easier to read.

**Example:**
```html
<user-profile name="Jane Doe"></user-profile>
In this tutorial, we will explore advanced HTML topics such as web components, microdata, semantic HTML, and more.

<AdsComponent />

## Web Components

Web components are a set of web platform APIs that allow you to create custom, reusable, and encapsulated HTML elements. Web components consist of four main technologies:

- **Custom Elements**: Custom elements allow you to define your own HTML elements with custom behavior and styling.
- **Shadow DOM**: Shadow DOM provides encapsulation for custom elements by hiding their implementation details from the rest of the page.
- **HTML Templates**: HTML templates allow you to define reusable chunks of HTML that can be cloned and inserted into the document.
- **HTML Imports**: HTML imports allow you to include and reuse HTML documents in other HTML documents.
- **ES Modules**: ES modules provide a way to define and load JavaScript modules in the browser.
- **Web Components**: Web components are a set of web platform APIs that allow you to create custom, reusable, and encapsulated HTML elements.
- **Custom Elements**: Custom elements allow you to define your own HTML elements with custom behavior and styling.

Here's an example of how to create a custom element using the Custom Elements API:

```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Element Example</title>
</head>
<body>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = "Hello, World!";
}
}

customElements.define("my-element", MyElement);
</script>
</body>
</html>
```

**Shadow DOM**

The Shadow DOM is like a secret room for your web component, where its styles and scripts are hidden away from the rest of the page. This ensures your component doesn't accidentally change because of other CSS or JavaScript.

**Templates**

Templates are blueprints for parts of your webpage. You can define a chunk of HTML that doesn't get displayed until you need it, making it perfect for repeating structures like comment threads or product listings.

**Example:**
```html
<template id="product-card">
<div class="product">
<p class="name">Name</p>
<p class="price">Price</p>
</div>
</template>
In the above example, we define a custom element called `my-element` that displays the text "Hello, World!" when inserted into the document.

<AdsComponent />

## Microdata

Microdata is a specification that allows you to add machine-readable metadata to your HTML content. Microdata provides a way to annotate HTML elements with additional information that can be used by search engines, web crawlers, and other applications.

Here's an example of how to use microdata to mark up a recipe on a web page:

```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recipe</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/Recipe">
<h1 itemprop="name">Classic Chocolate Chip Cookies</h1>
<img itemprop="image" src="cookie.jpg" alt="Chocolate Chip Cookies" />
<p itemprop="description">A classic recipe for delicious chocolate chip cookies.</p>
<ul>
<li itemprop="recipeIngredient">2 1/4 cups all-purpose flour</li>
<li itemprop="recipeIngredient">1 tsp baking soda</li>
<li itemprop="recipeIngredient">1/2 tsp salt</li>
</ul>
</div>
</body>
</html>
```

### Microdata

Microdata adds extra information to your HTML, making it easier for search engines to understand the content of your pages. It's like adding labels to your website's elements so that search engines know exactly what they're looking at.

**Example:**
```html
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<a href="mailto:[email protected]" itemprop="email">[email protected]</a>
</div>
```

### Other Advanced HTML Topics

**ARIA Attributes**

ARIA attributes make your web pages more accessible to people with disabilities. For example, `role="button"` tells screen readers that an element is a button, even if it's not a `<button>` tag.
In the above example, we use microdata to mark up a recipe for classic chocolate chip cookies. We use the `itemscope` attribute to define the scope of the microdata, and the `itemtype` attribute to specify the type of the item (in this case, a recipe). We then use the `itemprop` attribute to define properties of the recipe, such as the name, image, description, and ingredients.

**HTML5 Server-Sent Events (SSE)**
## Semantic HTML

SSE enables a web page to get updates from a server in real-time. It's like having a chat app where new messages appear automatically without needing to refresh the page.
Semantic HTML is the practice of using HTML elements to convey the meaning and structure of the content on a web page. By using semantic HTML elements, you can improve the accessibility, search engine optimization (SEO), and maintainability of your web pages.

**Web Workers**
Here are some examples of semantic HTML elements and their uses:

Web workers allow you to run JavaScript in the background. This is great for tasks that take a long time to complete, as it won't freeze up the webpage while the task is running.
- `<header>`: Defines a header for a section or page.
- `<nav>`: Defines a navigation menu.
- `<main>`: Defines the main content of a page.
- `<article>`: Defines an article or blog post.
- `<section>`: Defines a section of content.
- `<aside>`: Defines content that is tangentially related to the main content.
- `<footer>`: Defines a footer for a section or page.

**Progressive Web Apps (PWAs)**
By using semantic HTML elements, you can create well-structured and accessible web pages that are easier to understand and navigate for users and search engines.

PWAs are web applications that feel like native apps. They can work offline, send push notifications, and be added to the home screen of a device, providing a seamless user experience.
## Conclusion

By understanding these advanced HTML concepts, you can create more dynamic, efficient, and accessible web applications. Remember, the best way to learn is by doing, so try incorporating these concepts into your projects to see them in action!
In this tutorial, we explored advanced HTML topics such as web components, microdata, and semantic HTML. By mastering these advanced HTML concepts, you can create more interactive, accessible, and search engine-friendly web pages.
41 changes: 26 additions & 15 deletions docs/html/next-steps-and-resources/community-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,38 @@ title: Community Support
sidebar_label: Community Support
sidebar_position: 3
tags: [html, web-development, community, support]
description: In this tutorial, we will explore community support for HTML and web development.
description: In this tutorial, we will explore the community support available for HTML and web development.
---

A vibrant and supportive community is crucial for any web developer, especially those working with HTML. Fortunately, there are numerous online communities and forums dedicated to HTML and web development, offering valuable resources and support.
Now, If you are stuck with a problem or have a question, you can always ask for help from the community. keep in mind that the community is always there to help you.

## Online Forums and Communities
## Our Community

* **Stack Overflow:** https://stackoverflow.com/questions/tagged/html
* **Sitepoint HTML Forum:** https://www.sitepoint.com/community/c/html-css/25
* **HTML Subreddit:** https://www.reddit.com/r/html5/
We have a community of developers who are always ready to help you with your questions and problems. You can ask your questions and get help from other developers.

## User Groups and Events
<GiscusComponent />

* [Meetup.com](https://www.meetup.com/topics/html-development/) - Find local meetups and events related to HTML and web development.
* [HTML Discord Server](hhttps://discord.me/htmlcss) - Ask questions and doubts and connect with other developers.
## Community Support

## HTML and Web Development Resources
There are many ways to get help from the community. Here are some of the most popular ways:

* **Community Support:** https://www.reddit.com/r/webdev/
* **Game Tutorial:** http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/games/default.asp.html#gsc.tab=0
* **FreeCodeCamp HTML & CSS curriculum:** https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/
* **Learn HTML with games:** https://codepip.com/games/sourcery/
### 1. Stack Overflow

Engaging with the HTML and web development community can be immensely beneficial. By asking questions, sharing your knowledge, and learning from others, you can significantly improve your skills and stay updated on the latest trends and best practices. Remember, the web development community is a valuable resource for support, collaboration, and continuous learning.
[Stack Overflow](https://stackoverflow.com/) is a question and answer site for professional and enthusiast programmers. It is a great place to ask questions and get help from other developers.

### 2. GitHub

[GitHub](#) is a code hosting platform for version control and collaboration. You can use GitHub to host your code, contribute to other projects, and ask for help from other developers.

### 3. Reddit

[Reddit](https://www.reddit.com/) is a social news aggregation, web content rating, and discussion website. There are many programming-related subreddits where you can ask questions and get help from other developers.

### 4. Discord

[Discord](https://discord.com/) is a communication platform for communities. There are many programming-related Discord servers where you can ask questions and get help from other developers.


## Conclusion

In this tutorial, we explored the community support available for HTML and web development. If you are stuck with a problem or have a question, you can always ask for help from the community. Keep in mind that the community is always there to help you.
34 changes: 13 additions & 21 deletions docs/html/next-steps-and-resources/further-learning-resources.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,18 @@ sidebar_label: Further Learning Resources
sidebar_position: 1
tags: [html, web-development, resources]
description: In this tutorial, we will explore further learning resources for HTML and web development.
keywords:
[
html resources,
web development resources,
html tutorials,
web development tutorials,
html courses,
web development courses,
html books,
web development books,
]
hide_table_of_contents: true
---
# Further Learning Resources

## Online Courses and Tutorials

* **HTML Fundamentals:** https://www.codecademy.com/learn/learn-html
* **Building Accessible Websites with HTML:** https://www.udemy.com/course/build-your-first-website-in-1-week/
* **How the web works:** https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
* **HTML: The Ultimate Guide:** https://www.freecodecamp.org/news/learn-html-beginners-course/

## Books and Articles

* **HTML cheatsheet:** https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf
* **Best Practices:** https://www.scribd.com/document/232714441/30-HTML-Best-Practices-for-Beginners
* **Virtual-DOM-vs-Shadow-DOM:** https://www.freecodecamp.org/news/virtual-dom-vs-shadow-dom/

## Tools and Resources

* **W3C HTML5 Specification:** https://www.w3.org/TR/html5/
* **Codepen online editor:** https://www.freecodecamp.org/news/how-to-use-codepen/
* **Validator.nu:** https://validator.w3.org/#by-uri

This list provides a starting point for further exploration of semantic HTML. By taking advantage of these resources, you can continue to learn and refine your understanding of this important aspect of web development.
<Comming />
Binary file removed docs/html/responsive-web-design/blue.png
View file
Open in desktop
Binary file not shown.
Loading
Loading