Task 1: HTML5 Semantic Elements Create a web page layout using HTML5 semantic elements such as: o <header> o <nav> o <section> o <article> o <footer> Structure the content in a meaningful way using these elements. For example, create a blog layout with: o A header that includes the site logo and navigation links. o A main content section that holds multiple articles.o A footer with contact information and copyright notice. Task 2: Advanced Form Validation 1. Create a form with the following input fields:o Name (required, minimum length 3)o Email (required, must follow email format)o Password (required, must have at least 8 characters) o Confirm Password (must match Password field)o Date of Birth (use HTML5 date input) 2. Apply advanced validation techniques using: o The required attribute o The pattern attribute for custom validationo The minlength, maxlength, and type attributes for validation rules. Task 3: HTML5 Anchor Element 1. Add anchor elements (<a>) to link different sections of your website, including: o A link to another page in the same site.o A link that opens in a new tab using the target="_blank" attribute.o Use rel="noopener noreferrer" for links that open in a new tab. o Use rel="nofollow" for external links you don't want search engines to follow. Task 1. Task 1. Task 1. Task 1. Task 1. 4: Meta Charset and Its Types Research different character encodings and create a page that uses:o UTF-8 encoding (<meta charset="UTF-8">)o Include a paragraph explaining when and why you would use other character sets (e.g., ISO-8859-1). 5: Custom Data Attributes Create a div element that holds information about a product:o Use data- attributes to store the product’s ID and category.o Access the data in JavaScript and display it in the console using the dataset property. 6: Responsive Design with HTML and CSS Design a responsive layout:o Use media queries to adjust the layout for different screen sizes. o At widths below 600px, stack all elements vertically.o Above 600px, use a grid layout to display elements side-by-side. 7: HTML5 Web Storage APIs Implement localStorage:o Create a form that allows users to save their username using localStorage.o Upon page load, retrieve the stored username and display it in the form if it exists. 8: HTML5 Drag and Drop API Create a drag-and-drop interface:o Allow users to drag a box element and drop it into a designated drop zone. o Use dragstart, dragover, and drop events to implement the functionality. Task 9: HTML5 Canvas Elements 1. Create a drawing application using the <canvas> element:o Allow users to draw lines on the canvas by clicking and dragging the mouse. o Use the context of the canvas for drawing. Task 10: Custom Elements (Web Components) 1. Create a custom HTML element using Web Components:o Define a new custom element (e.g., <custom-card>).o Use Shadow DOM to encapsulate the styles and content of the custom element.

Task 1: HTML5 Semantic Elements

1. Create a web page layout using HTML5 semantic elements such as: o <header>

   o <nav> o <section> o <article> o <footer>

2. Structure the content in a meaningful way using these elements. For example, create a blog layout with:

o A header that includes the site logo and navigation links. o A main content section that holds multiple articles.
o A footer with contact information and copyright notice.

Task 2: Advanced Form Validation

1. Create a form with the following input fields:
o Name (required, minimum length 3)
o Email (required, must follow email format)
o Password (required, must have at least 8 characters) o Confirm Password (must match Password field)
o Date of Birth (use HTML5 date input)

2. Apply advanced validation techniques using: o The required attribute

o The pattern attribute for custom validation
o The minlength, maxlength, and type attributes for validation rules.

Task 3: HTML5 Anchor Element

1. Add anchor elements (<a>) to link different sections of your website, including: o A link to another page in the same site.
o A link that opens in a new tab using the target="_blank" attribute.
o Use rel="noopener noreferrer" for links that open in a new tab.

o Use rel="nofollow" for external links you don't want search engines to follow.

Task

1.

Task

1.

Task

1.

Task

1.

Task

1.

4: Meta Charset and Its Types

Research different character encodings and create a page that uses:
o UTF-8 encoding (<meta charset="UTF-8">)
o Include a paragraph explaining when and why you would use other character sets

(e.g., ISO-8859-1).

5: Custom Data Attributes

Create a div element that holds information about a product:
o Use data- attributes to store the product’s ID and category.
o Access the data in JavaScript and display it in the console using the dataset

property.

6: Responsive Design with HTML and CSS

Design a responsive layout:
o Use media queries to adjust the layout for different screen sizes. o At widths below 600px, stack all elements vertically.
o Above 600px, use a grid layout to display elements side-by-side.

7: HTML5 Web Storage APIs

Implement localStorage:
o Create a form that allows users to save their username using localStorage.
o Upon page load, retrieve the stored username and display it in the form if it exists.

8: HTML5 Drag and Drop API

Create a drag-and-drop interface:
o Allow users to drag a box element and drop it into a designated drop zone. o Use dragstart, dragover, and drop events to implement the functionality.

Task 9: HTML5 Canvas Elements

1. Create a drawing application using the <canvas> element:
o Allow users to draw lines on the canvas by clicking and dragging the mouse. o Use the context of the canvas for drawing.

Task 10: Custom Elements (Web Components)

1. Create a custom HTML element using Web Components:
o Define a new custom element (e.g., <custom-card>).
o Use Shadow DOM to encapsulate the styles and content of the custom element.