Snippets Collections
href=”url” -------------Provides the url of the hypertext link

target=(_blank|_parent|_self|_top) --------------Specifies where to open the linked document

download=”filename” ------------Indicates that the link should be downloaded as
a file, where filename is the name given to the
downloaded file [HTML5]

rel=”type” ---------Provides the relationship between the linked
document and the current page

hreflang=”lang” --------------Indicates the language of the linked document

type=”mime-type” -------------Indicates the media type of the linked document
tel:phone
Call: <a href=”tel:+17045551151”>(704) 555-1151</a>
<a href=”mailto:curbside.thai@example.com”>
 curbside.thai@example.com
</a>
<a href=”ct_start.html”><img src=”ct_logo2.png”
alt=”Curbside Thai” /></a>
<dl>
 <dt>term1</dt>
 <dd>description1</dd>
 <dt>term2</dt>
 <dd>description2a</dd>
 <dd>description2b</dd>
 ...
</dl>
<img src=”file” alt=”text” />
<body>
 <header>
 </header>
 <nav>
 </nav>
 <article>
 </article>
 <aside>
 </aside>
 <footer>
 </footer>
</body>
<article>
   <h1>PB&J Sandwiches</h1>
   <p>Here's how to make this snack staple.</p> 
   
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li>Peanut Butter</li>
         <li>Jelly</li>
         <li>Bread</li>
      </ul>
   </section>

   <section>
      <h2>Instructions</h2>
      <ol>
         <li>Get two slices of bread.</li>
         <li>Spread peanut butter on one side of both slices.</li>
         <li>Spread jelly over the peanut button on one slice of bread.</li>
         <li>Press bread slices together.</li>
      </ol>
   </section>
</article>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Chili Recipe</title>
</head>
<body>
   <h1>Recipe Book</h1>
   <nav>
      <ul>
         <li><a href="recipes.html">Recipes</a></li>
         <li><a href="tips.html">Tips</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </nav>
   
   <main>
      <h2>Recipe for Chili</h2>
      <p>Instructions...</p>
   </main>
   
   <footer>Copyright, me</footer>
   
</body>
</html>
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>
				
<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sticky Position Example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      .placeholder-example {
        background: lavender;
        height: 100vh;
        padding: 1em;
      }

      .sticky-example {
        background: cornflowerblue;
        padding: 1em;
      }

      .sticky {
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="sticky-example sticky">Sticky</div>
    <div class="placeholder-example">Placeholder</div>
  </body>
</html>
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>
  <meta name="description" content="A simple HTML5 Template for new projects.">
  <meta name="author" content="SitePoint">

  <meta property="og:title" content="A Basic HTML5 Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
  <meta property="og:description" content="A simple HTML5 Template for new projects.">
  <meta property="og:image" content="image.png">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body>
  <!-- your content here... -->
  <script src="js/scripts.js"></script>
</body>
</html>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
        
<div class="container text-center mt-5">

  <p>Window width: <strong>{{ getScreenWidth }}</strong></p>
  <p>Window height: <strong>{{ getScreenHeight }}</strong></p>

</div>
<svg viewport-fill="fb-cyan">
  <g id="mins" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-4" y="-110" width="8" height="110" fill="#e0e0e0" />
  </g>
  <g id="hours" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-6" y="-75" width="12" height="75" fill="#ffffff" />
  </g>
  <g id="secs" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-2" y="-120" width="4" height="120" fill="#ff0000" />
  </g>
  <circle cx="50%" cy="50%" r="10" fill="#444444" />
</svg>
<svg viewport-fill="fb-cyan">
  <text id="clock-label" x="50%" y="50%+15"
      fill="black" font-size="32" font-family="System-Regular"
      text-anchor="middle" text-length="20">00:00:00</text>
</svg>
<svg viewport-fill="#222">
  <mask id="mask">
    <rect x="50%+15" y="50%"  width="60" height="10" />
    <rect x="$-160"  y="$-10" width="60" height="10" />
    <rect x="$+15"   y="$-85" width="10" height="60" />
    <rect x="$-10"   y="$+40" width="10" height="60" />
  </mask>
  <svg mask="#mask" width="100%" height="100%">
    <gradientRect width="100%" height="100%" fill="cyan"
      gradient-type="bilinear"
      gradient-x1="10%" gradient-y1="10%"
      gradient-x2="80%" gradient-y2="80%"
      gradient-color2="yellow"
      gradient-color3="magenta"
      gradient-color4="green" />
  </svg>
</svg>
<svg>
  <gradientRect x="0" y="0" width="100%" height="100%"
    gradient-type="bilinear"
    gradient-x1="30" gradient-y1="30"
    gradient-x2="100%-60" gradient-y2="100%-60"
    gradient-color1="cyan"
    gradient-color2="white"
    gradient-color3="magenta"
    gradient-color4="green" />
</svg>
<custom-menu id="menu">
  <span slot="title">Candy menu</span>
  <li slot="item">Lollipop</li>
  <li slot="item">Fruit Toast</li>
</custom-menu>

<script>
customElements.define('custom-menu', class extends HTMLElement {
  items = []

  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `<div class="menu">
      <slot name="title"></slot>
      <ul><slot name="item"></slot></ul>
    </div>`;

    // triggers when slot content changes
    this.shadowRoot.firstElementChild.addEventListener('slotchange', e => {
      let slot = e.target;
      if (slot.name == 'item') {
        this.items = slot.assignedElements().map(elem => elem.textContent);
        alert("Items: " + this.items);
      }
    });
  }
});

// items update after 1 second
setTimeout(() => {
  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Cup Cake</li>')
}, 1000);
</script>
<div class="a-class" id="an-id">Edit me!</div>
star

Thu Aug 11 2022 15:00:36 GMT+0000 (UTC)

#markup #link #stylesheet
star

Thu Aug 11 2022 14:59:15 GMT+0000 (UTC)

#markup #link #stylesheet
star

Thu Aug 11 2022 14:47:30 GMT+0000 (UTC)

#markup #link #stylesheet
star

Thu Aug 11 2022 14:44:13 GMT+0000 (UTC)

#markup #link #stylesheet
star

Thu Aug 11 2022 14:31:14 GMT+0000 (UTC)

#markup #link #stylesheet
star

Thu Aug 11 2022 14:27:45 GMT+0000 (UTC)

#markup
star

Wed Aug 03 2022 17:37:36 GMT+0000 (UTC) http://web.simmons.edu/~grovesd/comm244/notes/week3/structural-elements

#markup
star

Wed Aug 03 2022 17:37:09 GMT+0000 (UTC) http://web.simmons.edu/~grovesd/comm244/notes/week3/structural-elements

#markup
star

Wed Jul 20 2022 07:50:16 GMT+0000 (UTC) https://kenwheeler.github.io/slick/

#markup
star

Wed Jun 22 2022 15:23:36 GMT+0000 (UTC) https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data

#markup
star

Thu May 19 2022 12:33:29 GMT+0000 (UTC) https://www.digitalocean.com/community/tutorials/how-to-build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4

#markup
star

Sun Mar 13 2022 12:56:14 GMT+0000 (UTC) https://www.sitepoint.com/a-basic-html5-template/

#markup
star

Sat Nov 20 2021 05:23:27 GMT+0000 (UTC) https://irando.co.id/articles/how-to-remove-ssl-in-centos-and-cyberpanel

#markup
star

Wed Oct 27 2021 18:44:15 GMT+0000 (UTC) https://materializecss.com/navbar.html

#markup
star

Fri Sep 17 2021 07:08:24 GMT+0000 (UTC) https://www.positronx.io/angular-detect-width-and-height-of-screen-tutorial/

#markup
star

Wed Sep 01 2021 08:01:43 GMT+0000 (UTC) https://laravelarticle.com/laravel-8-authentication-tutorial

#markup #انشئ #مشرو
star

Sun Jun 27 2021 16:31:21 GMT+0000 (UTC) https://dev.fitbit.com/build/guides/clockfaces/

#markup
star

Sun Jun 27 2021 16:31:16 GMT+0000 (UTC) https://dev.fitbit.com/build/guides/clockfaces/

#markup
star

Wed Jun 23 2021 18:24:48 GMT+0000 (UTC) https://dev.fitbit.com/build/guides/user-interface/svg/

#markup
star

Wed Jun 23 2021 18:24:33 GMT+0000 (UTC) https://dev.fitbit.com/build/guides/user-interface/svg/

#markup
star

Wed Apr 28 2021 08:50:06 GMT+0000 (UTC) https://javascript.info/slots-composition

#markup
star

Sun Feb 28 2021 05:07:44 GMT+0000 (UTC) https://emmet-playground.now.sh/

#markup

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension