HTML/CSS/JS Help
Hello and welcome to my help page! This page is mainly focused on providing assistance to aspiring webmasters!
My guides are a little scattered right now, but one of my goals is to organize them in an order that someone could work through to learn web development.
Click a section title to expand it.
Neocities / Static Website Guides
- How to set up a redirect on your website
- Show a thumbnail when you share your site
- Integrating a website form with Discord
- How to load an element on every page
- The easiest way to make a blog on Neocities
- How to add an image when you share your site on Discord
- How to connect your static site to RSS
- How to make your own webring
- How to use custom fonts on your webpage
- How to sign up for your own free webserver
- How to display 'last updated' and 'visitor count' on your website.
- How to make a custom 404 page on Neocities
- How to position images or text anywhere you like inside an area
leprd.space Guides
leprd.space is free hosting available for hobby servers. It differs from Neocities because you have access to server-side scripting languages like PHP.
- Joining tables with SQL
- PHP 101 Project: Building a Guestbook
- Introduction to Databases
- How to make a static website on cPanel
- How to import a database schema into phpMyAdmin
- How to password protect a webpage with .htaccess
- Create a user and database on Leprd
- How to set up Commentics on Neocities
- Import a database schema into phpMyAdmin
- Create a user and a database on leprd
- Mount your leprd site on PC
- Set up a custom domain with leprd
- How to sign up with leprd
Steal my code!
These are demos of code you can use that do cool stuff on your website! Click on 'Edit on CodePen' logo to see a larger version. I've heavily commented many of these to explain how they work, so I hope they can help you learn along the way! ♥
Allow viewers to download an area of the page as an image 
See the Pen [Javascript + dom-to-image] Allow viewers to download a div as an image (no GIFs) by Sadness (@sadness97) on CodePen.
Load # of links from larger list at random
See the Pen Load X number of links to a webpage on your site at random by Sadness (@sadness97) on CodePen.
Dynamically show number of items in a list
See the Pen Auto-Updating Count of List Items [Javascript] by Sadness (@sadness97) on CodePen.
Easy drag & drop code
See the Pen [Javascript + InteractJS] Easy Drag & Drop Demo by Sadness (@sadness97) on CodePen.
Change background to image upon hover
See the Pen Change background to image on hover [Javascript] by Sadness (@sadness97) on CodePen.
Add a tooltip when a word is clicked
See the Pen Simple Tooltip on Click by Sadness (@sadness97) on CodePen.
Simple flexbox image gallery
See the Pen Gallery by Sadness (@sadness97) on CodePen.
Button with copy-able textarea
See the Pen Button with copyable textarea by Sadness (@sadness97) on CodePen.
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.
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.