Learn Html
HTML ROADMAP 👇👇 1. FUNDAMENTALS 1.1 How the browser parses HTML files. 1.2 Syntax of an HTML element: open and closing tag, element name, attributes, content. 1.3 Learn the structure of an HTML document, <html> <head> <title> & <body> elements. 1.4 Learn…
1. Fundamentals:
1.1 [https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#parsing]
1.2 [https://w3schools.com/html/html_elements.asp]
1.3 [https://htmlquick.com/tutorials/document-structure.html]
1.4 [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML]
2. Semantic HTML:
2.1 [https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements]
2.2 [https://freecodecamp.org/news/semantic-html5-elements/]
3. [https://w3.org/TR/2016/REC-html51-20161101/grouping-content.html#the-p-element]
4.1 [https://w3schools.com/html/html_formatting.asp]
4.2 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content]
4.3 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics]
Links:
5. [https://html.com/anchors-links/]
6.Images:
6.1 [https://w3schools.com/html/html_images.asp]
6.2 [https://w3schools.com/tags/tag_img.asp]
6.3 [https://web.dev/lazy-loading-images/]
6.4 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture]
6.5 [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images]
7. Form Elements:
7.1 [https://w3schools.com/html/html_form_elements.asp]
7.2 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event]
7.3 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event]
7.4 [https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault]
7.5 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event]
8.1 [https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form]
8.3 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes_for_form_submission]
8.4. [https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation]
8.5 [https://w3schools.com/tags/att_button_type.asp]
8.6 [https://w3schools.com/tags/att_input_type_reset.asp]
9. Events:
9.1. [https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event]
9.2 [https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload]
9.3 [https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onunload]
9.4 [https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize]
9.5 [https://section.io/engineering-education/keyboard-events-in-javascript/]
9.6
[https://javascript.info/mouse-events-basics]
11. Window Object:
11.1 [https://youtube.com/watch?v=ZJng8ls8uH0]
11.1 [https://youtube.com/watch?]
11.1 [https://youtube.com/watch?v=pIBKyooZrJQ]
11.2 [https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset]
11.3 [https://javascript.info/settimeout-setinterval]
11.4 [https://youtube.com/watch?v=HIWWBHB3xHY]
11.5 [https://samanthaming.com/tidbits/86-window-location-cheatsheet/]
12. APIS:
12.1 [https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API]
12.2 [https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams]
12.3 [https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API]
12.4 [https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API]
12.5 [https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API]
12.6 [https://developer.mozilla.org/en-US/docs/Web/API/History_API]
12.7 [https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API]
12.8 [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API]
12.9 [https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API]
Full list of HTML elements:
[https://developer.mozilla.org/en-US/docs/Web/HTML/Element]
1.1 [https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#parsing]
1.2 [https://w3schools.com/html/html_elements.asp]
1.3 [https://htmlquick.com/tutorials/document-structure.html]
1.4 [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML]
2. Semantic HTML:
2.1 [https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements]
2.2 [https://freecodecamp.org/news/semantic-html5-elements/]
3. [https://w3.org/TR/2016/REC-html51-20161101/grouping-content.html#the-p-element]
4.1 [https://w3schools.com/html/html_formatting.asp]
4.2 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content]
4.3 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics]
Links:
5. [https://html.com/anchors-links/]
6.Images:
6.1 [https://w3schools.com/html/html_images.asp]
6.2 [https://w3schools.com/tags/tag_img.asp]
6.3 [https://web.dev/lazy-loading-images/]
6.4 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture]
6.5 [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images]
7. Form Elements:
7.1 [https://w3schools.com/html/html_form_elements.asp]
7.2 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event]
7.3 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event]
7.4 [https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault]
7.5 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event]
8.1 [https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form]
8.3 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes_for_form_submission]
8.4. [https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation]
8.5 [https://w3schools.com/tags/att_button_type.asp]
8.6 [https://w3schools.com/tags/att_input_type_reset.asp]
9. Events:
9.1. [https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event]
9.2 [https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload]
9.3 [https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onunload]
9.4 [https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize]
9.5 [https://section.io/engineering-education/keyboard-events-in-javascript/]
9.6
[https://javascript.info/mouse-events-basics]
11. Window Object:
11.1 [https://youtube.com/watch?v=ZJng8ls8uH0]
11.1 [https://youtube.com/watch?]
11.1 [https://youtube.com/watch?v=pIBKyooZrJQ]
11.2 [https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset]
11.3 [https://javascript.info/settimeout-setinterval]
11.4 [https://youtube.com/watch?v=HIWWBHB3xHY]
11.5 [https://samanthaming.com/tidbits/86-window-location-cheatsheet/]
12. APIS:
12.1 [https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API]
12.2 [https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams]
12.3 [https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API]
12.4 [https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API]
12.5 [https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API]
12.6 [https://developer.mozilla.org/en-US/docs/Web/API/History_API]
12.7 [https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API]
12.8 [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API]
12.9 [https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API]
Full list of HTML elements:
[https://developer.mozilla.org/en-US/docs/Web/HTML/Element]
Tips and tricks in implementing good Semantic HTML for good HTML structure and SEO
https://www.freecodecamp.org/news/html-best-practices/
#html #seo #semantic
https://www.freecodecamp.org/news/html-best-practices/
#html #seo #semantic
Take a look at some useful but rarely used HTML elements
https://dev.to/eludadev/those-html-elements-you-never-use-16bi
#html #element #semantic
https://dev.to/eludadev/those-html-elements-you-never-use-16bi
#html #element #semantic