diff --git a/collections/html/head-basics.yaml b/collections/html/head-basics.yaml index 937c52b84..8e87a83c4 100644 --- a/collections/html/head-basics.yaml +++ b/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 diff --git a/collections/html/index.yaml b/collections/html/index.yaml new file mode 100644 index 000000000..5dd7ae876 --- /dev/null +++ b/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. + diff --git a/collections/js/interviews.yaml b/collections/js/interviews.yaml index 4cca596ed..05cce8156 100644 --- a/collections/js/interviews.yaml +++ b/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 diff --git a/snippets/articles/story-template.md b/snippets/articles/story-template.md index 3f5d8cd08..6a47a87ad 100644 --- a/snippets/articles/story-template.md +++ b/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. diff --git a/snippets/css/story-template.md b/snippets/css/story-template.md index 470c8d3fa..5a1f282fb 100644 --- a/snippets/css/story-template.md +++ b/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 -
-``` - -```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. diff --git a/snippets/git/story-template.md b/snippets/git/story-template.md index fb9e8d508..bb365c4e1 100644 --- a/snippets/git/story-template.md +++ b/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 -
-``` - -```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. diff --git a/snippets/articles/s/8-tips-for-accessible-websites.md b/snippets/html/s/8-tips-for-accessible-websites.md similarity index 98% rename from snippets/articles/s/8-tips-for-accessible-websites.md rename to snippets/html/s/8-tips-for-accessible-websites.md index ec2e02dc7..f22701782 100644 --- a/snippets/articles/s/8-tips-for-accessible-websites.md +++ b/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. diff --git a/snippets/js/s/async-defer.md b/snippets/html/s/async-defer.md similarity index 98% rename from snippets/js/s/async-defer.md rename to snippets/html/s/async-defer.md index eb5caa447..94eb99e84 100644 --- a/snippets/js/s/async-defer.md +++ b/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. diff --git a/snippets/articles/s/custom-file-download-names.md b/snippets/html/s/custom-file-download-names.md similarity index 97% rename from snippets/articles/s/custom-file-download-names.md rename to snippets/html/s/custom-file-download-names.md index 891e5b92a..80e496375 100644 --- a/snippets/articles/s/custom-file-download-names.md +++ b/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. diff --git a/snippets/articles/s/html-head-icons.md b/snippets/html/s/head-icons.md similarity index 98% rename from snippets/articles/s/html-head-icons.md rename to snippets/html/s/head-icons.md index b2a33b62b..7969a2bbe 100644 --- a/snippets/articles/s/html-head-icons.md +++ b/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 `` element. diff --git a/snippets/articles/s/html-head-links.md b/snippets/html/s/head-links.md similarity index 98% rename from snippets/articles/s/html-head-links.md rename to snippets/html/s/head-links.md index 8a4b58ab6..7ab345b60 100644 --- a/snippets/articles/s/html-head-links.md +++ b/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 `` element. diff --git a/snippets/articles/s/html-head-social-tags.md b/snippets/html/s/head-social-tags.md similarity index 98% rename from snippets/articles/s/html-head-social-tags.md rename to snippets/html/s/head-social-tags.md index 3c9b65e9f..ebcfbd798 100644 --- a/snippets/articles/s/html-head-social-tags.md +++ b/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 `` element. diff --git a/snippets/articles/s/lazy-loading-images.md b/snippets/html/s/lazy-loading-images.md similarity index 98% rename from snippets/articles/s/lazy-loading-images.md rename to snippets/html/s/lazy-loading-images.md index a35b29647..89b7be592 100644 --- a/snippets/articles/s/lazy-loading-images.md +++ b/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. diff --git a/snippets/articles/s/password-autocomplete-suggestion.md b/snippets/html/s/password-autocomplete-suggestion.md similarity index 98% rename from snippets/articles/s/password-autocomplete-suggestion.md rename to snippets/html/s/password-autocomplete-suggestion.md index 3c7e0a634..abc5883cb 100644 --- a/snippets/articles/s/password-autocomplete-suggestion.md +++ b/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. diff --git a/snippets/articles/s/prefetching-resources.md b/snippets/html/s/prefetching-resources.md similarity index 98% rename from snippets/articles/s/prefetching-resources.md rename to snippets/html/s/prefetching-resources.md index 0ebe0252a..0dab28b22 100644 --- a/snippets/articles/s/prefetching-resources.md +++ b/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. diff --git a/snippets/articles/s/html-recommended-minimum-head.md b/snippets/html/s/recommended-minimum-head.md similarity index 98% rename from snippets/articles/s/html-recommended-minimum-head.md rename to snippets/html/s/recommended-minimum-head.md index 1adf87622..c5fbb572d 100644 --- a/snippets/articles/s/html-recommended-minimum-head.md +++ b/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 `` element. diff --git a/snippets/articles/s/resource-preloading-cheatsheet.md b/snippets/html/s/resource-preloading-cheatsheet.md similarity index 98% rename from snippets/articles/s/resource-preloading-cheatsheet.md rename to snippets/html/s/resource-preloading-cheatsheet.md index d49765cd3..37541fc01 100644 --- a/snippets/articles/s/resource-preloading-cheatsheet.md +++ b/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. diff --git a/snippets/articles/s/reversed-list.md b/snippets/html/s/reversed-list.md similarity index 98% rename from snippets/articles/s/reversed-list.md rename to snippets/html/s/reversed-list.md index ebe352de7..1e2c08bbe 100644 --- a/snippets/articles/s/reversed-list.md +++ b/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. diff --git a/snippets/js/s/target-blank.md b/snippets/html/s/target-blank.md similarity index 97% rename from snippets/js/s/target-blank.md rename to snippets/html/s/target-blank.md index 3f47c42c9..f0051bccf 100644 --- a/snippets/js/s/target-blank.md +++ b/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. diff --git a/snippets/articles/s/zooming-accessibility-tips.md b/snippets/html/s/zooming-accessibility-tips.md similarity index 97% rename from snippets/articles/s/zooming-accessibility-tips.md rename to snippets/html/s/zooming-accessibility-tips.md index 67f73044c..d75024966 100644 --- a/snippets/articles/s/zooming-accessibility-tips.md +++ b/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. diff --git a/snippets/html/snippet-template.md b/snippets/html/snippet-template.md new file mode 100644 index 000000000..97d2b39d2 --- /dev/null +++ b/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 [--option] +``` + +```shell +git command some-branch --quiet +# Output of running command on `some-branch` +``` diff --git a/snippets/html/story-template.md b/snippets/html/story-template.md new file mode 100644 index 000000000..9fe83ed39 --- /dev/null +++ b/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. diff --git a/snippets/js/story-template.md b/snippets/js/story-template.md index fe25d1010..dd04ecb53 100644 --- a/snippets/js/story-template.md +++ b/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 -
-``` - -```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. diff --git a/snippets/python/story-template.md b/snippets/python/story-template.md index 6d6d47082..5ba500f1c 100644 --- a/snippets/python/story-template.md +++ b/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 -
-``` - -```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. diff --git a/snippets/react/story-template.md b/snippets/react/story-template.md index 06150ce0e..ff2045ec2 100644 --- a/snippets/react/story-template.md +++ b/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 -
-``` - -```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.