Sincerely, resources

Boilerplate HTML Template

HTML boilerplate is a basic, pre-written code template that serves as the foundation for any new web page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title here!</title>
    <link rel="icon" type="image/gif" href="favicon.gif">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <p>My content here!</p>
  </body>
</html>

DIV section

<div>The div tag is used to group block-elements to format them with CSS</div>

Headings

headings are titles or subtitles used to organize content on a webpage.

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Span

<span> is an inline element meaning that it can be placed inside other inline elements or block elements. </span>

Paragraph

Paragraph is preferred for screen readers. You can go into CSS, p { margin: 0; } and it won't have the spacing between it.

<p> Browsers automatically add a single blank line before and after each paragraph element </p>

Links

These are the standard links, clicking one will replace the tab you’re currently viewing.

<a href="https://neocities.org/">neocities.org</a>

Clicking this link will open a new tab instead of replacing the tab you’re currently viewing.

<a href="https://neocities.org/" target="_blank">neocities.org</a>

Links +

This is an anchor link, these links will take you directly to the element with the matching ID.

<a href="#links">Click to jump to section</a>
<div id="links">Welcome to the new section!</div>

Images

<img src="my-image.jpg" alt="desc"/>

Images +

You can also resize using inline styling.

<img src="my-image.jpg" style="width:100px; height:90px;" alt="desc"/>

You can also add a border to your image using inline styling.

<img src="my-image.jpg" style="border:1px solid black; width:100px; height:90px;" alt="desc"/>

Images ++

Cat ipsum dolor sit amet, miaow then turn around and show you my bum murf pratt ungow ungow for reaches under door into adjacent room or intently stare at the same spot.

<p/> <img src="https://file.garden/ad6N8KJMmVnp7wKU/web/hehe/unnamed(2).gif" class="inline-img" style="width:100px; display:inline-block; vertical-align:text-top; margin:4px 6px 0 0;"> </p>

Metadata

These create preview cards when your website is shared on certain platforms, and they also help search engines understand and index your page so it can be found more easily. They go in your

<head> tag.

<meta property="og:title" content="Your Website">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourwebsite.com/">
<meta property="og:image" content="https://yourwebsite.com/images/og-preview.jpg">
<meta property="og:description" content="A brief page description">
<meta property="twitter:card" content="summary_large_image">

Custom cursor

Normally, the custom cursor is set on the body, but when you hover over a link it switches back to the default cursor, so you'd have to customize the link:hover.


body {
  cursor: url("cursor.png"), auto;
}

a:hover {
  cursor: url("cursor.png"), auto;
}

Custom cursor +

Because of that, and me not wanting to customize the hover cursor, I usually apply the cursor globally using *, so it stays consistent even when hovering over links


* {
  cursor: url("cursor.png"), auto;
}

Custom border

Sometimes a border needs less or more "slice" to look decent. Play around with all of it until you're satisfied with the result.
border by rentry.co/mode

border-image-source: url("https://files.catbox.moe/35eezp.png");
border-image-slice: 30% fill;
border-image-width: 27px;
border-image-outset: 8px;
border-image-repeat: round;

Lists

ordered (numbers)

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

unordered lists (bullets)

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<hr> makes a horizontal line, used to indicate a shift in topic within a section.

Last edited status

This goes wherever you want the last edited to display.

<script>document.write(document.lastModified);</script>

Image mask

image mask, works with like any image honestly. mask to see

 <style> .myImageMask {
/* change the w&h however you like, but if you change the other settings 
aside from the mask img it might break lol */

width: 100px;
height: 100px;

object-fit: cover;

-webkit-mask-image: url("https://64.media.tumblr.com/594a6e709b15dcff76d1894018ce68dd/c7e1da2a85dc1750-ca/s400x600/a1b26d42da5afd4a2a88467c44fe86d468ab03fb.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;

mask-image: url("https://64.media.tumblr.com/594a6e709b15dcff76d1894018ce68dd/c7e1da2a85dc1750-ca/s400x600/a1b26d42da5afd4a2a88467c44fe86d468ab03fb.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
                    }
</style>
 <body>
<img src="#" class="myImageMask" alt="">
</body>

Marquee

Marquee that pauses on hover

 
                   <style>              
    .marquee {
        overflow: hidden;
        white-space: nowrap;
    }

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 28s linear infinite;
    }

    .marquee span:hover {
        animation-play-state: paused;
    }

    @keyframes marquee {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-100%);
        }
    } 
                            </style> 
                            
                            <body> <div class="marquee"> 
            <span> Danish chocolate donut sesame snaps liquorice liquorice halvah. Caramels bonbon sesame snaps carrot
                cake
                pastry cookie tootsie roll. Lemon drops cookie liquorice pie biscuit ice cream cake. Gummies gummi bears
                lemon drops sweet roll candy marzipan.</span> 
        </div>