HTML collections (#1932)

collections/html/head-basics.yaml

@@ -1,11 +1,12 @@
 slug: html/head-basics
 name: HTML Head Basics
+miniName: Head Basics
 featured: true
 snippetIds:
-  - articles/s/html-recommended-minimum-head
-  - articles/s/html-head-social-tags
-  - articles/s/html-head-icons
-  - articles/s/html-head-links
+  - html/s/recommended-minimum-head
+  - html/s/head-social-tags
+  - html/s/head-icons
+  - html/s/head-links
 splash: basics.png
 description: >-
   Learn how to use the HTML head element to improve your site's SEO, social

collections/html/index.yaml

@@ -0,0 +1,14 @@
+slug: html
+name: HTML Snippets
+shortName: HTML
+topLevel: true
+languageMatcher: html
+featured: true
+splash: tram-car-2.png
+description: >-
+  The HTML snippet collection contains tips, tricks and practical code examples
+  to help you master web development. This collection covers elements, tags,
+  links, forms, tables and more.
+shortDescription: >-
+  Master HTML 5 with this collection of tips, tricks and code examples.
+

collections/js/interviews.yaml

@@ -31,7 +31,7 @@ snippetIds:
   - js/s/pure-functions
   - js/s/recursion
   - js/s/use-strict
-  - js/s/async-defer
+  - html/s/async-defer
   - js/s/closures
   - js/s/iife
   - js/s/event-loop-explained

snippets/articles/story-template.md

@@ -10,4 +10,4 @@ excerpt: A short summary of your story up to 140 characters long.
 dateModified: 2021-06-13T05:00:00-04:00
 ---
 
-Write your blog post here.
+Write your story here.

snippets/css/story-template.md

@@ -9,26 +9,4 @@ excerpt: A short summary of your story up to 140 characters long.
 dateModified: 2021-06-13T05:00:00-04:00
 ---
 
-Explain briefly what the snippet does.
-
-- Explain briefly how the snippet works.
-- Use bullet points for your snippet's explanation.
-- Try to explain everything briefly but clearly.
-
-```html
-<div class="my-snippet"></div>
-```
-
-```css
-.my-snippet {
-  background-color: #fff;
-  border: 1px solid #000;
-  border-radius: 4px;
-}
-```
-
-```js
-console.log(
-  "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
-)
-```
+Write your story here.

snippets/git/story-template.md

@@ -9,26 +9,4 @@ excerpt: A short summary of your story up to 140 characters long.
 dateModified: 2021-06-13T05:00:00-04:00
 ---
 
-Explain briefly what the snippet does.
-
-- Explain briefly how the snippet works.
-- Use bullet points for your snippet's explanation.
-- Try to explain everything briefly but clearly.
-
-```html
-<div class="my-snippet"></div>
-```
-
-```css
-.my-snippet {
-  background-color: #fff;
-  border: 1px solid #000;
-  border-radius: 4px;
-}
-```
-
-```js
-console.log(
-  "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
-)
-```
+Write your story here.

snippets/html/s/8-tips-for-accessible-websites.md

@@ -3,7 +3,7 @@ title: 8 tips for accessible websites
 shortTitle: Accessibility tips
 type: story
 language: html
-tags: [accessibility,webdev]
+tags: [accessibility,form,link,metadata]
 author: chalarangelo
 cover: accessibility
 excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.

snippets/html/s/async-defer.md

@@ -2,8 +2,8 @@
 title: What is the difference between async and defer in script loading?
 shortTitle: Async and defer
 type: question
-language: javascript
-tags: [html]
+language: html
+tags: [script,javascript]
 author: chalarangelo
 cover: coworking-space
 excerpt: Understanding how to correctly load your JavaScript files can significantly improve your web application's performance.

snippets/html/s/custom-file-download-names.md

@@ -3,7 +3,7 @@ title: "Tip: Customize the names of downloadable files"
 shortTitle: Customize the names of downloadable files
 type: tip
 language: html
-tags: [webdev,browser]
+tags: [link]
 author: chalarangelo
 cover: hard-disk
 excerpt: Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.

snippets/html/s/head-icons.md

@@ -3,7 +3,7 @@ title: Recommended HTML head icon tags
 shortTitle: HTML favicons template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-3
 excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.

snippets/html/s/head-links.md

@@ -3,7 +3,7 @@ title: Recommended HTML head links
 shortTitle: HTML head links template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-4
 excerpt: Make your HTML documents more SEO-friendly by including these lines in your `<head>` element.

snippets/html/s/head-social-tags.md

@@ -3,7 +3,7 @@ title: Recommended social tags for HTML head
 shortTitle: HTML social tags template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-2
 excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.

snippets/html/s/lazy-loading-images.md

@@ -3,7 +3,7 @@ title: "Tip: Lazy load images in HTML"
 shortTitle: Image lazy loading
 type: tip
 language: html
-tags: [webdev,image]
+tags: [image]
 author: chalarangelo
 cover: bridge
 excerpt: Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.

snippets/html/s/password-autocomplete-suggestion.md

@@ -3,7 +3,7 @@ title: "Tip: Adding autocomplete to a password field"
 shortTitle: Password field autocomplete
 type: tip
 language: html
-tags: [webdev]
+tags: [form]
 author: chalarangelo
 cover: padlocks
 excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields.

snippets/html/s/prefetching-resources.md

@@ -3,7 +3,7 @@ title: "Tip: Prefetching resources in the browser"
 shortTitle: Resource prefetching
 type: tip
 language: html
-tags: [webdev,browser]
+tags: [metadata]
 author: chalarangelo
 cover: playing-fetch
 excerpt: Resource prefetching is a great way to improve perceived page speed on your website and requires little effort. Learn how to use it today.

snippets/html/s/recommended-minimum-head.md

@@ -3,7 +3,7 @@ title: Recommended minimum HTML head
 shortTitle: HTML head template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-1
 excerpt: Ensure your HTML documents are properly structured by including these lines in your `<head>` element.

snippets/html/s/resource-preloading-cheatsheet.md

@@ -2,7 +2,7 @@
 title: Resource Preloading Cheat Sheet
 type: cheatsheet
 language: html
-tags: [webdev,browser]
+tags: [metadata]
 author: chalarangelo
 cover: folded-map
 excerpt: Preloading content is one of many ways to improve your website's performance.

snippets/html/s/reversed-list.md

@@ -3,7 +3,7 @@ title: "Tip: Create a descending list of numbered items"
 shortTitle: Descending list
 type: tip
 language: html
-tags: [webdev]
+tags: [content]
 author: chalarangelo
 cover: ancient-greek-building
 excerpt: Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.

snippets/html/s/target-blank.md

@@ -2,8 +2,8 @@
 title: 'Tip: Protect your users from malicious websites when using target="_blank"'
 shortTitle: 'Safeguarding target="_blank"'
 type: tip
-language: javascript
-tags: [browser,security]
+language: html
+tags: [link,security]
 author: chalarangelo
 cover: laptop-with-code
 excerpt: Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick.

snippets/html/s/zooming-accessibility-tips.md

@@ -3,7 +3,7 @@ title: Why using maximum-scale can harm your page's accessibility
 shortTitle: Accessibility and maximum-scale
 type: story
 language: html
-tags: [webdev]
+tags: [accessibility,metadata,head]
 author: chalarangelo
 cover: camera-zoom
 excerpt: Using the viewport meta tag incorrectly can harm your website's accessibility. Learn how to prevent problems with this handy guide.

snippets/html/snippet-template.md

@@ -0,0 +1,23 @@
+---
+title: Snippet name
+type: snippet
+language: html
+tags: [link]
+cover: image
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Explain briefly what the snippet does.
+
+- Explain briefly how the snippet works.
+- Use bullet points for your snippet's explanation.
+- Try to explain everything briefly but clearly.
+
+```shell
+git command <variable> [--option]
+```
+
+```shell
+git command some-branch --quiet
+# Output of running command on `some-branch`
+```

snippets/html/story-template.md

@@ -0,0 +1,12 @@
+---
+title: My amazing story
+shortTitle: Amazing story
+type: story
+language: html
+tags: [link]
+cover: image
+excerpt: A short summary of your story up to 140 characters long.
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Write your story here.

snippets/js/story-template.md

@@ -9,26 +9,4 @@ excerpt: A short summary of your story up to 140 characters long.
 dateModified: 2021-06-13T05:00:00-04:00
 ---
 
-Explain briefly what the snippet does.
-
-- Explain briefly how the snippet works.
-- Use bullet points for your snippet's explanation.
-- Try to explain everything briefly but clearly.
-
-```html
-<div class="my-snippet"></div>
-```
-
-```css
-.my-snippet {
-  background-color: #fff;
-  border: 1px solid #000;
-  border-radius: 4px;
-}
-```
-
-```js
-console.log(
-  "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
-)
-```
+Write your story here.

snippets/python/story-template.md

@@ -9,26 +9,4 @@ excerpt: A short summary of your story up to 140 characters long.
 dateModified: 2021-06-13T05:00:00-04:00
 ---
 
-Explain briefly what the snippet does.
-
-- Explain briefly how the snippet works.
-- Use bullet points for your snippet's explanation.
-- Try to explain everything briefly but clearly.
-
-```html
-<div class="my-snippet"></div>
-```
-
-```css
-.my-snippet {
-  background-color: #fff;
-  border: 1px solid #000;
-  border-radius: 4px;
-}
-```
-
-```js
-console.log(
-  "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
-)
-```
+Write your story here.

snippets/react/story-template.md

@@ -9,26 +9,4 @@ excerpt: A short summary of your story up to 140 characters long.
 dateModified: 2021-06-13T05:00:00-04:00
 ---
 
-Explain briefly what the snippet does.
-
-- Explain briefly how the snippet works.
-- Use bullet points for your snippet's explanation.
-- Try to explain everything briefly but clearly.
-
-```html
-<div class="my-snippet"></div>
-```
-
-```css
-.my-snippet {
-  background-color: #fff;
-  border: 1px solid #000;
-  border-radius: 4px;
-}
-```
-
-```js
-console.log(
-  "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
-)
-```
+Write your story here.