Scribblemakes Code
This page is a collection of code and assets that you can use on your website for free (), along with a collection of if you want to make your own code. You can also find development that automate or assist the web-development process. There are 3 types of script packs on this page:
- : Full website layouts, skins, and scripts
- : Interactive elements that are added to pages, such as games and galleries
- : Scripts that affect pre-exiting elements on your page
This site is hosted by Neocities, so all code is compatible with its hosting service. This means all code consists of HTML, CSS, or Javascript, with no PHP or SQL.
If you'd like to see some of the code that inspired me, check out my Webgarden.
Accessibility note: The menu to the left is made with radio buttons, use the arrow keys to navigate it once focused on the currently open label. Some links on this page (such as 'Themes' and 'Widgets') are labels disguised as links, making them unselectable with a keyboard. Navigate the left menu instead.
Licensing
Most themes and scripts on this page are under one, or both, of these licenses:
You're free to use them to build your own works for distribution (as long as they're under a similar license). You can use them on your site if you're selling something, feel free to use them on your commission or store pages, as long as you do not sell the individual, original, files provided by this page.
If any theme or script is under a different license it will be listed beside the item's information.
Tools
Tools can be used to make web development easier, such as generating HTML text, and are all kept on my Tools page. You can go directly to my Tools page to use them, or view a list of my tools below.
Full Tool List
HTML Editor
A tool that helps generate HTML text from plain text. This is mostly helpful for beginners or for developers translating large amounts of plain text into HTML.
To use this tool, enter your plain text into the box on the left and you'll see it appear in the box on right. You can then select text and then use format buttons to turn it into a link, paragraph, bold text, and more.
Go to the HTML Editor
Tutorials
You can use the tutorials below to add elements to, or change aspects of, your websites. The tutorials assume you have a basic understanding of HTML, CSS, and Javascript, showing the majority of the code you'll need but not explaining topics such as HTML classes and CSS rules.
If you're a complete beginner, check out Neocities' tutorial page to get started.
HTML || CSS || Javascript
HTML (Writing your page)
CSS (Styling your page)
Animating elements on your page:
CSS creates animations through @keyframes and the animation-name property. W3Schools has a page about using these animation functions: W3Schools site.
This is an example of how it can be used with multiple properties:@keyframes animation {
0% {background-color: red; border-radius: 0;}
50% {background-color: red; border-radius: 50%;}
100% {background-color: red; border-radius: 0;}
}
.animate {
animation-name: animation;
animation-duration: 5s;
animation-timing-function: linear; /*ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)*/
animation-iteration-count: infinite;
}
Below are some common ways to animate an element:
- - Transform: translate(n, n); /* n is how much to move it by */
- - Transform: scale(n, n); /* n is how much to scale it by */
- - Transform: rotate(ndeg); /* n is the degree amount to turn */
- - Transform: rotate(ndeg) scale(n, n) translate(n, n); /* Combines multiple transform effects */
Javascript (Interacting with your page)
Themes
Themes are collections of code that affect a whole site's style, function, and layout. Some are layout-only, relying entirely on CSS and HTML, while some rely heavily on Javascript to create effects like opening windows, image maps, etc.
Themes usually have installation instructions included in their files and on their example page.
All themes are tested on Firefox and Safari browsers, and on mobile screen sizes. If a theme isn't working on your browser or device, please send a message through the 'contact' button in the top right of the screen. I'll do my best to make it compatible!
Categories
Free Themes || Operating Systems || Stationary || Technology
Free Themes
Operating Systems
🪟 Glasspane Mana V1.0
Stationary
🗀 Folder Files (Manual) V1.0
Technology
📺 TV Static V1.0
Widgets
Widgets are visible and interactive elements that can go on your webpage, such as a collection of buttons or a script that allows you to build a game. Out of the three categories on this page (themes, widgets, and plugins) they require the most input from you to install correctly, since they are usually very complex. Every widget includes an installation guide however, so code can easily be copied or edited with the guide if you're not confident in your coding abilities.
All widgets are tested on Firefox and Safari browsers, and on mobile. If a widget isn't working on your browser or device, please send a message through the 'contact' button in the top right of the screen. I'll do my best to make it compatible!
Categories
Free Widgets || Blogs, Writing, and Updates || Images and Galleries
Free Widgets
Blogs, Writing, and Updates
📰 Blog Pages Widget V1.01
Images and Galleries
⧉ Artist's Portfolio V1.0
🖼 Interactive Map Widget V1.0
Plugins
Plugins are scripts that affect the pre-existing code on your HTML page, such as adding additional event listeners to elements or dynamically resizing size-restricted functions. Plugins are the easiest to install, usually only requiring one line of code near the bottom of your HTML page to function, and often are only one Javascript file.
All plugins are tested on Firefox and Safari browsers, and on mobile. If a plugin isn't working on your browser or device, please send a message through the 'contact' button in the top right of the screen. I'll do my best to make it compatible!
Categories
Free Plugins || Images and Galleries
Free Plugins
Images and Galleries
🖼 Image Click to Enlarge Plugin V1.0
⌛ Image Preloader Plugin V1.0
🖼 Responsive Image Maps Plugin V1.0
Comments
Leave a comment or review below and I'll be notified when you submit it. If I reply to your comment you won't be notified, so if you want me to answer a question then please use the instead.
Comment Widget by ayano
Contact
Fill in the form below and hit 'send' to contact me with questions or feedback. I'll be able to reply to questions through your email, so make sure it's correct!
Contact Form Widget by Sadness
Finding More Code
Want code in a full ready-to-use package or on a different platform? You can find my code on my Patreon and on my itch.io. You can also support me on ko‑fi.
I release one script a month on my Patreon, which can be anything from a full theme to a plugin. These posts are initially for patrons only, but become free a week after posting. Alongside the monthly scripts, there may also be a patron-only script or package. A package is designed to add multiple code files to a site and make set-up as easy as possible, for example: One package might be called the 'Artist's Portfolio Pack' which could include 3 scripts: an image preloader plugin, a HTML page that automatically formats images, and an enlarge-image plugin.
Patron-only scripts and packages can also be bought on my itch.io, if you're only looking for a specific script or package. Free scripts are also uploaded to itch.io after they become public on Patreon.