Website Help

I've moved most of my site-related documentation over to learn.sadgrl.online. It's much quicker to format my posts with code, plus it allows for comments so I can help y'all!

You can also subscribe to the RSS feed here


(Try my layout generator!)

Guides

I made these guides to help with building your own website!

The single most helpful thing to learn when building your own website is how to use the Inspect tool. I made a short video (<5 mins) explaining how to use it to figure out how to fix your site.

How to make your own webring
The easiest way to make a blog on Neocities
How to connect your static site to RSS
How to use CodePen
How to add an image when you share your site on Discord
HTML 101 for beginners
Centering Content with CSS
Absolute beginner's guide to Neocities
Flexbox for beginners
Using custom fonts with CSS
Using root variables with CSS
How to load an element on every page
Integrating a website form with Discord

Snippets

These are bits of code you can use that do cool stuff on your website!

(Click on 'Edit on CodePen' logo to see a larger version).

One-page Blog Template (no JS)

See the Pen Simple Blog Template by Sadness (@sadness97) on CodePen.

Filter a list on button click

See the Pen Tag Sorting by Sadness (@sadness97) on CodePen.

Resize an image when width changes

See the Pen by Sadness (@sadness97) on CodePen.

Add custom bullets to a list

See the Pen Heart bullets by Sadness (@sadness97) on CodePen.

Add a retro SNES border to your div

See the Pen retro snes border css by Sadness (@sadness97) on CodePen.



More borders available here: http://www.robin64.co.uk/customborders/

Generate text at random when the user clicks a button

See the Pen click 4 facts by Sadness (@sadness97) on CodePen.

Create a never-ending marquee

See the Pen forever marqueeeeeeeee by Sadness (@sadness97) on CodePen.

Change target of a frame with a link without JS

See the Pen Change Frame Target with Click (NO JS) by Sadness (@sadness97) on CodePen.

Add falling items to your page

See the Pen Snowflakes by Sadness (@sadness97) on CodePen.



Load an image at random from a list on refresh
Click on "rerun" to reload the environment.

See the Pen Load image on random from list. by Sadness (@sadness97) on CodePen.



Notes: Make sure to include the jQuery script in your head tags. Note that you provide the image file names separately from the image path.

Layout with different backgrounds when you scroll

See the Pen Different backgrounds when scrolling by Sadness (@sadness97) on CodePen.

Play a song at random from list on refresh
Click rerun to change the song.

See the Pen Refresh 2 change song by Sadness (@sadness97) on CodePen.



Notes: To make the song autoplay, add the word autoplay to the audio tag in the Javascript. To make the song loop, add the word loop.
Add a transparent pixel border to a div

See the Pen Img border on div by Sadness (@sadness97) on CodePen.

Set HTML5 audio volume with JS

See the Pen Set a volume on autoplay with JS by Sadness (@sadness97) on CodePen.

Use the WebAMP app on your website with a custom theme & songs

See the Pen Put winamp on your page with a custom skin & custom songs! (AND ITS DRAGGABLE) by Sadness (@sadness97) on CodePen.



Questions on anything I'm missing or you'd like to see?