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.

Newbie Guides
HTML/CSS Guides
Javascript Guides
Neocities / Static Website Guides
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.

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 new

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 new

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 new

See the Pen Auto-Updating Count of List Items [Javascript] by Sadness (@sadness97) on CodePen.

Easy drag & drop code new

See the Pen [Javascript + InteractJS] Easy Drag & Drop Demo by Sadness (@sadness97) on CodePen.

Change background to image upon hover new

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.

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.