Forwarded from Learn CSS™
1. CSS FUNDAMENTALS 1.0
1.1 How the browser parses HTML/CSS?.
1.2 How to add CSS to a web page.
1.3 Syntax: selector, declaration block, peroperty, declared value.
1.4 Basic selectors: universal, type, class, id, attribute.
1.5 Cascade & Specificity: how to resolve conflicting CSS declarations?
1.6 Inheritance..
2. CSS FUNDAMENTALS 2.0
2.1 How the box model works. Learn the different box types.
2.2 How to size CSS elements? Learn padding, margin, width, height and border properties.
2.3 How to style text?
2.4 Relative units.
2.5 CSS Variables..
3. CSS FUNDAMENTALS 3.0: LAYOUT
3.1 Learn flexbox, grid, floats.
3.2 Learn the difference between position properties: absolute, relative, fixed, static and sticky.
3.3 Practice: start building smaller layouts like navigation bars, and build up your skills
4. CSS FUNDAMENTALS 4.0: ADVANCED SELECTORS
4.1 Grouping selector: selector list.
4.2 Combinator selectors: descendant, child, general sibling, adjacent sibling, column.
4.3 Pseudo selectors: pseudo classes, pseudo elements.
5. CSS INTERMEDIATE: TRANSITIONS & ANIMATIONS
5.1 Learn transition properties.
5.2 How to apply transitions in pseudo classes.
5.3 Learn from examples.
5.4 Build basic animations (e.g. change bg color on hover, add styles to input when focus etc.)
5.5 Learn transform property.
6. CSS INTERMEDIATE: MEDIA QUERIES
6.1 Learn the media types.
6.2 Understand min-width & max-width.
6.3 Learn Mobile first approach.
6.4 How to find and set screen breakpoints.
6.5 Practice: Create a responsive navigation.
7. CSS ADVANCED: PREPROCESSORS - SASS
7.1 Variables.
7.2 Nesting.
7.3 Partials.
7.4 Mixins.
7.5 Imports.
7.6 Operators.
7.7 Functions.
8. CSS ADVANCED: METHODOLOGIES - BEM
8.1 Learn why you should consider BEM
8.2 Learn what is a block, element and modifier.
9. CSS ADVANCED: ARCHITECTURE
9.1 Learn 7-1 architecture.
• Abstracts.
• Vendors.
• Base.
• Layouts.
• Components.
• Pages.
• Themes.
10. CSS FRAMEWORKS:
10.1 Tailwind CSS
10.2 Bootstrap
1.1 How the browser parses HTML/CSS?.
1.2 How to add CSS to a web page.
1.3 Syntax: selector, declaration block, peroperty, declared value.
1.4 Basic selectors: universal, type, class, id, attribute.
1.5 Cascade & Specificity: how to resolve conflicting CSS declarations?
1.6 Inheritance..
2. CSS FUNDAMENTALS 2.0
2.1 How the box model works. Learn the different box types.
2.2 How to size CSS elements? Learn padding, margin, width, height and border properties.
2.3 How to style text?
2.4 Relative units.
2.5 CSS Variables..
3. CSS FUNDAMENTALS 3.0: LAYOUT
3.1 Learn flexbox, grid, floats.
3.2 Learn the difference between position properties: absolute, relative, fixed, static and sticky.
3.3 Practice: start building smaller layouts like navigation bars, and build up your skills
4. CSS FUNDAMENTALS 4.0: ADVANCED SELECTORS
4.1 Grouping selector: selector list.
4.2 Combinator selectors: descendant, child, general sibling, adjacent sibling, column.
4.3 Pseudo selectors: pseudo classes, pseudo elements.
5. CSS INTERMEDIATE: TRANSITIONS & ANIMATIONS
5.1 Learn transition properties.
5.2 How to apply transitions in pseudo classes.
5.3 Learn from examples.
5.4 Build basic animations (e.g. change bg color on hover, add styles to input when focus etc.)
5.5 Learn transform property.
6. CSS INTERMEDIATE: MEDIA QUERIES
6.1 Learn the media types.
6.2 Understand min-width & max-width.
6.3 Learn Mobile first approach.
6.4 How to find and set screen breakpoints.
6.5 Practice: Create a responsive navigation.
7. CSS ADVANCED: PREPROCESSORS - SASS
7.1 Variables.
7.2 Nesting.
7.3 Partials.
7.4 Mixins.
7.5 Imports.
7.6 Operators.
7.7 Functions.
8. CSS ADVANCED: METHODOLOGIES - BEM
8.1 Learn why you should consider BEM
8.2 Learn what is a block, element and modifier.
9. CSS ADVANCED: ARCHITECTURE
9.1 Learn 7-1 architecture.
• Abstracts.
• Vendors.
• Base.
• Layouts.
• Components.
• Pages.
• Themes.
10. CSS FRAMEWORKS:
10.1 Tailwind CSS
10.2 Bootstrap
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