Learn Html
HTML ROADMAP
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 document meta data: <base>, <link>, <meta>, <style> elements.
2. SEMANTIC HTML: SECTIONS
Learn the purpose of the following elements:
21 <body>
2.2 <article>
2.3 <section>
24 <nav>
2.5 <aside>
2.6 <h1...h6>
2.7 <header>
2.8 <footer>
2.9 <address>
3. SEMANTIC HTML: GROUPING ELEMENTS
3.0 Learn the purpose of the following elements:
3.1 <main>
3.2 <div>
3.3 <p>
3.4 <hr>
1.5 <ul><ol><li><dl> <dt> <dd>
3.6 <figure>
3.7 <figcaption>
3.8 <pre>
4. SEMANTIC HTML: TEXT LEVEL
4.0 Learn the purpose of the following elements:
4.1 <a>
4.2 <em>
4.3 <strong>
4.4 <time>
4.5 <code>
4.6 <span>
4.7 <br>
4.8 <abbr>
5. LINKS
5.1 Learn href property.
5.2 Learn target property and the difference between possible values.
5.3 Difference between absolute and relative urls.
5.4 Learn how to use the download and rel attribute.
5.5 Learn how to navigate to a specific part of the page.
6. IMAGES
6.1 How to embed an image using the src attribute.
6.2 Learn the supported image formats.
6.3 Learn the importance of the alt attribute.
6.4 How to use the loading attribute to lazy load images.
6.5 How to size an image with the height and width properties.
6.6 Adaptive Images: the picture> and <source> elements.
6.7 Adaptive Images: the srcset attribute for <img> and <source> elements.
7. BASIC FORM ELEMENTS
7.1 Learn the basic input types: button, checkbox, radio, date, email, file, number, password, reset, search.
7.2 How to handle the onchange event.
7.3 Learn the <label> element and how to use the for attribute, how to properly group a <label> with an <input>.
7.4 Learn the <button> element: the different type values. Learn how to handle the onclick event.
7.5 Learn the <textarea> <select>,<optgroup>, <fieldset>, <legend>.
8. FORMS
8:1 How to structure a web form.
8.2 How to configure a form to comunicate with server with attributes: action, enctypes, method, target.
8.3 How Form submission attributes work.
8.4 How to perform client side form validation.
8.5 How to make a button to submit a form
8:6 How to reset a form.
9. EVENTS: PART 1
9.1 Window events:
• onbeforeunload
• onload
• onunload
• onresize
9.2 Keyboard events:
• onkeydown
• onkeypress
• onkeyup
9.3 Mouse events:
• onclick
• ondbclick
• onmousedown
• onmousemove
• onmouseout
10. EVENTS: PART 2
10.0 Common global events:
• onchange
• onclick
• onclose
• onresize
• onsubmit
11. THE WINDOW OBJECT
11.1 How to get inner height and width values.
11.2 Learn pageXOffset and pageYOffset properties.
11.3 Learn setinterval, setTimeout, clearinterval, clearTimeout methods.
11.4 Learn scrollTo method.
11.5 Learn the window.location object.
12. WEB APIS & INTERFACES
12.1 Web storage: Local storage, session storage.
12.2 URLSeachParams interface.
12.3 Geolocation API
12.4 ResizeObserver Api.
12.5 Drag and drop API.
12.6 History API.
12.7 Intersection Observer API.
12.8 Fetch API.
12.9 Web notifications.
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 document meta data: <base>, <link>, <meta>, <style> elements.
2. SEMANTIC HTML: SECTIONS
Learn the purpose of the following elements:
21 <body>
2.2 <article>
2.3 <section>
24 <nav>
2.5 <aside>
2.6 <h1...h6>
2.7 <header>
2.8 <footer>
2.9 <address>
3. SEMANTIC HTML: GROUPING ELEMENTS
3.0 Learn the purpose of the following elements:
3.1 <main>
3.2 <div>
3.3 <p>
3.4 <hr>
1.5 <ul><ol><li><dl> <dt> <dd>
3.6 <figure>
3.7 <figcaption>
3.8 <pre>
4. SEMANTIC HTML: TEXT LEVEL
4.0 Learn the purpose of the following elements:
4.1 <a>
4.2 <em>
4.3 <strong>
4.4 <time>
4.5 <code>
4.6 <span>
4.7 <br>
4.8 <abbr>
5. LINKS
5.1 Learn href property.
5.2 Learn target property and the difference between possible values.
5.3 Difference between absolute and relative urls.
5.4 Learn how to use the download and rel attribute.
5.5 Learn how to navigate to a specific part of the page.
6. IMAGES
6.1 How to embed an image using the src attribute.
6.2 Learn the supported image formats.
6.3 Learn the importance of the alt attribute.
6.4 How to use the loading attribute to lazy load images.
6.5 How to size an image with the height and width properties.
6.6 Adaptive Images: the picture> and <source> elements.
6.7 Adaptive Images: the srcset attribute for <img> and <source> elements.
7. BASIC FORM ELEMENTS
7.1 Learn the basic input types: button, checkbox, radio, date, email, file, number, password, reset, search.
7.2 How to handle the onchange event.
7.3 Learn the <label> element and how to use the for attribute, how to properly group a <label> with an <input>.
7.4 Learn the <button> element: the different type values. Learn how to handle the onclick event.
7.5 Learn the <textarea> <select>,<optgroup>, <fieldset>, <legend>.
8. FORMS
8:1 How to structure a web form.
8.2 How to configure a form to comunicate with server with attributes: action, enctypes, method, target.
8.3 How Form submission attributes work.
8.4 How to perform client side form validation.
8.5 How to make a button to submit a form
8:6 How to reset a form.
9. EVENTS: PART 1
9.1 Window events:
• onbeforeunload
• onload
• onunload
• onresize
9.2 Keyboard events:
• onkeydown
• onkeypress
• onkeyup
9.3 Mouse events:
• onclick
• ondbclick
• onmousedown
• onmousemove
• onmouseout
10. EVENTS: PART 2
10.0 Common global events:
• onchange
• onclick
• onclose
• onresize
• onsubmit
11. THE WINDOW OBJECT
11.1 How to get inner height and width values.
11.2 Learn pageXOffset and pageYOffset properties.
11.3 Learn setinterval, setTimeout, clearinterval, clearTimeout methods.
11.4 Learn scrollTo method.
11.5 Learn the window.location object.
12. WEB APIS & INTERFACES
12.1 Web storage: Local storage, session storage.
12.2 URLSeachParams interface.
12.3 Geolocation API
12.4 ResizeObserver Api.
12.5 Drag and drop API.
12.6 History API.
12.7 Intersection Observer API.
12.8 Fetch API.
12.9 Web notifications.
Learn Html pinned «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…»
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]
Learn Html pinned «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…»
This media is not supported in your browser
VIEW IN TELEGRAM
Replace http://github.com with http://github.dev or just press "."(dot) on any GitHub repo to get access to the online VSCode Editor
#Github #VSCODE
#Github #VSCODE
Payment and address form best practices
#html
https://web.dev/payment-and-address-form-best-practices/
#html
https://web.dev/payment-and-address-form-best-practices/
Top 12 HTML Tags You Had No Idea Existed
https://javascript.plainenglish.io/top-12-html-tags-you-had-no-idea-existed-20e9be5208a8
https://javascript.plainenglish.io/top-12-html-tags-you-had-no-idea-existed-20e9be5208a8
Forwarded from Learn Web Development
HTML elements that are considered deprecated, and new alternatives
https://blog.logrocket.com/deprecated-html-elements-and-what-to-use-instead/
#html #deprecated
https://blog.logrocket.com/deprecated-html-elements-and-what-to-use-instead/
#html #deprecated
We thank this person for supporting us a lot and being a part of us
We wish we get his/her support forever.
We wish we get his/her support forever.
Forwarded from Programming World👨💻
Roadmaps by roadmap.sh
Frontend : https://roadmap.sh/frontend
Backend : https://roadmap.sh/backend
Devops : https://roadmap.sh/devops
Reactjs : https://roadmap.sh/react
Android : https://roadmap.sh/android
Angular : https://roadmap.sh/angular
Python : https://roadmap.sh/python
Golang : https://roadmap.sh/golang
Java : https://roadmap.sh/java
Frontend : https://roadmap.sh/frontend
Backend : https://roadmap.sh/backend
Devops : https://roadmap.sh/devops
Reactjs : https://roadmap.sh/react
Android : https://roadmap.sh/android
Angular : https://roadmap.sh/angular
Python : https://roadmap.sh/python
Golang : https://roadmap.sh/golang
Java : https://roadmap.sh/java
🔰 FREE UDEMY COUPONS 🔰
➼ https://www.discudemy.com
➼ http://Real.discount
➼ https://udemycoupon.learnviral.com
➼ https://couponscorpion.com
➼ https://udemyfreebies.com
➼ http://udemycoupon.discountsglobal.com
➼ comidoc.net
➼ app.real.discount
➼ 100offdeal.online
➼ udemyfreecourses.org
➼ tutsnode.net
➼ smartybro.com
NOTE:
> These Sites Refresh Everyday.
> If any of the coupon doesn't work, use VPN ✈️
➼ https://www.discudemy.com
➼ http://Real.discount
➼ https://udemycoupon.learnviral.com
➼ https://couponscorpion.com
➼ https://udemyfreebies.com
➼ http://udemycoupon.discountsglobal.com
➼ comidoc.net
➼ app.real.discount
➼ 100offdeal.online
➼ udemyfreecourses.org
➼ tutsnode.net
➼ smartybro.com
NOTE:
> These Sites Refresh Everyday.
> If any of the coupon doesn't work, use VPN ✈️
Hello people ,
I found an app to earn money without doing anything .
So here I am with this app which will work on Android , Mac os and windows
You can sign up with my referral and get 5$ without any loss on your side . Or you can simply sign up and get nothing ...
It's upon you .
So what is this app ?
-> The name is honeygain .
It basically uses your leftover internet to do things ( everything is legal so no
worries ) and give you credits in return which you can redeem for real money .
You simply have to turn it on once while using your device . It will automatically earn for you .
Isn't it awesome ?
Sign up : https://r.honeygain.me/PAVAN607D1
( and get free 5$ )
If you have more doubts , you can visit their site . It's 100% real and authentic . Also lots of proofs is available on YouTube .
Best wishes😇❤️
I found an app to earn money without doing anything .
So here I am with this app which will work on Android , Mac os and windows
You can sign up with my referral and get 5$ without any loss on your side . Or you can simply sign up and get nothing ...
It's upon you .
So what is this app ?
-> The name is honeygain .
It basically uses your leftover internet to do things ( everything is legal so no
worries ) and give you credits in return which you can redeem for real money .
You simply have to turn it on once while using your device . It will automatically earn for you .
Isn't it awesome ?
Sign up : https://r.honeygain.me/PAVAN607D1
( and get free 5$ )
If you have more doubts , you can visit their site . It's 100% real and authentic . Also lots of proofs is available on YouTube .
Best wishes😇❤️
Creating page loader animations with Tailwind CSS
https://dev.to/koddr/you-dont-need-svg-creating-animated-loaders-for-content-with-tailwind-css-2cf0
---
Explanation of some properties of Flexbox CSS
https://dev.to/snowbit/flexbox-properties-3nd3
---
Tips for creating the correct HTML page structure
https://javascript.plainenglish.io/structuring-html-pages-the-right-way-3daddbce6320
---
Some HTML elements that are considered deprecated and other alternatives for their replacement
https://blog.logrocket.com/deprecated-html-elements-and-what-to-use-instead/
#tailwind #css #html
https://dev.to/koddr/you-dont-need-svg-creating-animated-loaders-for-content-with-tailwind-css-2cf0
---
Explanation of some properties of Flexbox CSS
https://dev.to/snowbit/flexbox-properties-3nd3
---
Tips for creating the correct HTML page structure
https://javascript.plainenglish.io/structuring-html-pages-the-right-way-3daddbce6320
---
Some HTML elements that are considered deprecated and other alternatives for their replacement
https://blog.logrocket.com/deprecated-html-elements-and-what-to-use-instead/
#tailwind #css #html