## Resources ### Tutorials - [[#Emmet Shortcuts In Vscode]] ### Tools - [See what runs a website](https://www.WhatRuns.com) - [Responsive design simultaneous viewing](https://responsively.app/) - [Compress your images](https://compressor.io/) - [Free Vector Image Creation](https://www.drawkit.io/) ### Chrome Extentions - [webdeveloper checklist chrome ext](https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp) - [Edit This Cookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg) ## Meter Vs Progress Tags Meter Tag vs [[#Progress]] progress to mark up the completion rate/degree of progress of an “in progress” task through a progress bar, use progress element. meter to represent a gauge use meter element You can think like that: progress = dynamic ; meter = static --- - Reference: - <https://javascript.plainenglish.io/9-cool-things-you-can-do-with-just-html-3f926455a3c2> ## Emmet Shortcuts In Vscode <center> <iframe width="560" height="315" src="https://www.youtube.com/embed/45eWEO0gRHI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </center> - [6:01](https://youtu.be/45eWEO0gRHI?t=361) type name of tag for auto complete - To next a parent/child use `parent>child` for divs with classes `.parent-class>.child-class` for a parent with sibling children `.parent-class>.child-class+.child-class` or `.parent-class>.child-class*2` - [6:40](https://youtu.be/45eWEO0gRHI?t=400) lorem ipsum text can be indicated with `lorem` and the number of works directly after `lorem20` - [7:19](https://youtu.be/45eWEO0gRHI?t=439) groupings `(p>lorem20)*5` since `p>lorem20*5` just puts 5 lorems in a `p` tag ## Tags ### Top Level - https://youtu.be/iX_QyjdctsQ?list=WL&t=391 meta og tags - resource with this: https://www.metatags.io #### Source `<source>` ### Body #### Block ##### Data List ```html <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <option value="Chicken"> <option value="Cow"> <option value="Pig"> </datalist> <!-- The <datalist> id attribute (see bold items above) must be equal to the list attribute of the <input>, this is what binds them together. --> ``` --- Start typing and it will auto complete <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <option value="Chicken"> <option value="Cow"> <option value="Pig"> </datalist> ##### Fieldset Tag ```html <fieldset> <legend>Test legend</legend> <div><label>color</label></div> <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <option value="Chicken"> <option value="Cow"> <option value="Pig"> </datalist> <br> <div><label>Animals</label></div> <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <option value="Chicken"> <option value="Cow"> <option value="Pig"> </datalist> </fieldset> ``` <fieldset> <legend>Test legend</legend> <div><label>color</label></div> <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <option value="Chicken"> <option value="Cow"> <option value="Pig"> </datalist> <br> <div><label>Animals</label></div> <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <option value="Chicken"> <option value="Cow"> <option value="Pig"> </datalist> </fieldset> ##### Color Picker ```html <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ebdbb2"> ``` <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ebdbb2"> ##### Labels ###### Plain Labels ```html <label>My Label</label> ``` <label>My Label</label> ###### Lables with tooltips <label title="See, this is the tooltip. :)">My Label</label> ##### Ranges and Fractional Values ```html <label for="disk_g">Disk usage G:</label> <meter id="disk_g" value="2" min="0" max="10">2 out of 10</meter> <br> <label for="disk_h">Disk usage H:</label> <meter id="disk_h" value="0.7">70%</meter> ``` <label for="disk_g">Disk usage G:</label> <meter id="disk_g" value="2" min="0" max="10">2 out of 10</meter> <br> <label for="disk_h">Disk usage H:</label> <meter id="disk_h" value="0.7">70%</meter> --- - Reference: - https://javascript.plainenglish.io/9-cool-things-you-can-do-with-just-html-3f926455a3c2 #### Media ##### Audio - [ ] TODO ##### Image `<img src=""/>` - [ ] TODO cover how alt text works and additional info on image tags ##### Picture The most common use of the [[#Picture|⟨picture⟩]] element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport. The [[#Picture|⟨picture⟩]] element contains two tags: one or more [[#Source|⟨source⟩]] tags and one [[#Image|⟨img⟩]] tag. The browser will look for the first [[#Source|⟨source⟩]] element where the media query matches the current viewport width, and then it will display the proper image (specified in the `srcset` attribute). The [[#Image|⟨img⟩]] element is required as the last child of the [[#Picture|⟨picture⟩]] element, as a fallback option if none of the source tags matches. Tip: The [[#Picture|⟨picture⟩]] element works "similar" to [[#Video|⟨video⟩]] and [[#Audio|⟨audio⟩]]. You set up different sources, and the first source that fits the preferences is the one being used. ```html <picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> ``` <picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> - Reference: - https://www.w3schools.com/TAGS/tag_picture.asp ##### Video - [ ] TODO #### Inline ##### Anchor ```html <a href="mailto:[email protected]?subject=mailto%20links">Send Mail</a> ``` - `mailto:` links have additional properties that can be set in [[HTML]] but also with Markdown - [Resource Link](https://css-tricks.com/snippets/html/mailto-links/) - in markdown, to generate an email addressed to someone, with defined subjects line, body, and other addressees you use these pieces of text as part of the links remembering to escape spaces with `$20`: - `?subject=` the subject line of the email. `?subject=My%20Subject` - `?cc=` add carbon copy addressees `[email protected]` - `?bcc=` blind carbon copy someone `[email protected]` - `?body=` your body text remembering to escape spaces with `%20` - `?body=My%20lovely%20email%20body%20message` - If you only use 1 parameter after the email addressee then that parameter will start with a `?` like `?subject=` every parameter used after that will use a `&` such as `&cc=`, or `&bcc=`, etc. ##### Span ###### Tooltips ```html <span title="See, this is the tooltip. :)">Move your mouse over me!</span> ``` <span title="See, this is the tooltip. :)">Move your mouse over me!</span> - Reference: - https://javascript.plainenglish.io/9-cool-things-you-can-do-with-just-html-3f926455a3c2 ##### Sub And Sup Tags ```html <!-- Sub script --> <p>H<sub>2</sub>O</p> <!-- Super script --> <p>H<sup>2</sup>O</p> ``` <p>H₂O</p> <p>H²O</p> ### Other #### Button ```html <button>Button Text</button> ``` <button>Button Text</button> Creates a button that can be styled, have [[event-listeners#Click event]]s added to it so that when it is clicked actions can occur #### Forms [form filler chrome ext](https://chrome.google.com/webstore/detail/web-developer-form-filler/gbagmkohmhcjgbepncmehejaljoclpil) #### Progress ##### Completion Percentage ```html <label for="course">Course completion:</label> <progress id="course" value="67" max="100"></progress> 67% ``` --- <label for="course">Course completion:</label> <progress id="course" value="67" max="100"></progress> 67% --- - Reference: - https://javascript.plainenglish.io/9-cool-things-you-can-do-with-just-html-3f926455a3c2 #### Template ##### What is it and what is it good for Adding lots of little tags can get very cumbersome and error prone in JavaScript, so the less HTML tags we need to write in JavaScript the better. One way to do this is with the Template tag. The content does not render by default but is accessible by JavaScript for modification, Duplication, and more. ```html <ul> <li> <span>Item 1: </span> <span>Content 1</span> </li> <li> <span>Item 2: </span> <span>Content 2</span> </li> </ul> ``` Want to easily add another `<li>` element to the list? Instead of using JavaScript to write the HTML code we can just use the Template: ```html <ul> <li> <span>Item 1: </span> <span>Content 1</span> </li> <li> <span>Item 2: </span> <span>Content 2</span> </li> </ul> <template> <li> <span>Item: </span> <span>Content</span> </li> </template> ``` ##### How to use it Need be able to grab the elements so we assign some classes and id's ```html <ul id="list"> <li> <span>Item 1: </span> <span>Content 1</span> </li> <li> <span>Item 2: </span> <span>Content 2</span> </li> </ul> <button id="add-item">Add Item</button> <template id="list-item-template"> <li> <span class="title">Item: </span> <span class="content">Content</span> </li> </template> ``` Now to access it ```javascript const template = document.getElementById('list-item-template') const list = document.getElementById('list') const button = document.getElementById('add-item') let itemCount = list.children.length button.addEventListener('click', () => { const item = template.content.cloneNode(true) itemCount++ item.querySelector('.title').innerText = `Item ${itemCount}: ` item.querySelector('.content').innerText = `Content ${itemCount}` list.append(item) }) ``` --- - Reference: - https://blog.webdevsimplified.com/2020-06/template-tag/