links
personal favs
- HTML cheat sheet - SUPER useful and they also have cheatsheets for css and js!
- catipsum - lorem ipsum but cats
- generator.lorem-ipsum - lorem ipsum in other scripts! mostly use it for japanese and korean
- catbox.moe - file sharing site
- coolors - lets you make color palettes from scratch or from a pic. you can also save their URL or PNG
- remove.bg - aka make imgs transparent!
- dither me this and ditherit - dither imgs! i use this A LOT. mostly for backgrounds
- w3schools' color picker - shows you the different hues, contrast, and how the color looks as a background with text!
- emmet cheat sheet - type HTML tags faster!
- time stamp generator / HTML entity encoder - for RSS feed!
- coding cheatsheet by petra
resource bookmarks:
- faegardens333 / hekate / nekonokuni / sadgrl.online
- gifcity / ishiimori / XYZ / codesies
- more sites with resources can be found on my button wall
coding & webdev
linking stuff that has helped me on my web coding journey! do remember that practice is key!
code editors
- codepen - online editor with a live preview, lets you save + share codes with an acc. you can see mine here!
- notepad++ - offline editor, like notepad but with more stuff!
- brackets - offline editor, centered around coding HTML, has extensions support! has an online version as well. this is the one i use!
- visual studio code - offline editor, supported by microsoft, it has a TON of extensions and other options in comparison to brackets.
hosting
the descriptions are all from their free plans.
- neocities - 1gb storage. has a social feed.
- ichi.city - 10mb storage. host a small site! have fun!
- nekoweb - 500mb storage. has a social interface similar to neocities!
- github - 1gb storage. make a repository named (YOURUSERNAME).github.io or use any other repository and enable github pages. add a custom domain.
- cloudflare pages - up to 20,000 files of storage. add a custom domain. files have a limit of 25mb each.
- leprd.space - free hosting for hobbyists websites, supports PHP and MySQL
git / github
- git - a version control system, The Thing that tracks your coding history and does other neat stuff! highly recommend learning how to use it because it is super handy for coding.
some guides/tutorials that have helped me: scarecat's, petrapixel's. i also use git bash as my main terminal. - learn git branching
- ohshitgit - solutions to common git mistakes / problems
- deploy-to-neocities - update your neocities directly from your PC (without the neocities editor) using github actions. a crazy time saver and i really recommend it to everyone who updates their site a lot! here's a tutorial by MissMoss on how to install it.
misc
- dark mode revisited - nice article that explains how to implement a dark mode into your website!
- checklist.design - more in the professional / marketing side of things but it's a website with checklists of what to have on a site.
- roadmap.sh - developer roadmaps! they have one for frontend and backend!
- electron - build desktop apps with html / css / js
- oh my posh - customize your terminal of choice, i use currently use this for mine!
- how to make neocities a billion times more tolerable - a guide on how to use the neocities CLI, with or without github!
HTML, CSS, JS
in my personal experience, i actually learned the basics of HTML and CSS through using and experimenting with templates! but these sites are of huge help as well.
beginner stuff (HTML and CSS focused)
recommended guides
- HTML for people - a very nice guide that shows you that anyone can make a website
- web.dev's html and css courses! they also have other courses and they explain stuff very simply so i highly recommend this site + it has some more modern concepts compared to w3schools (no shade though)
- interneting is hard - beginner friendly web dev tutorials!
- w3schools - super beginner friendly that shows you the basics of webpages with demos but can be a bit outdated.
- developer.mozilla.org - info and references for things used in HTML, CSS, and JS. if you don't know what something does, go here and find out!!
- htmldog - simple and straight forward tutorials and info for HTML, CSS, and JS. they have tutorials for beginners as well as more advanced ones!
- web zine 01 - zine about making a website from scratch!
javascript
- mozilla's learn javascript
- javascript.info
- simple interactivity with jQuery
- a smarter way to learn JS (PDF book)
- freecodecamp - courses and projects for you to learn responsive web design, basic javascript, and much more!
- the odin project
- RV's free JS effects for your site! includes text, cursor, and screen effects!
- JS compressor - compresses file sizes!
- clipboard.js
CSS
- dev mozilla's border-image generator
- specificity calculator
- w3schools CSS reference
- CSS patterns
- animated gradient bg generator
- text stroke generator
- CSS compressor - compresses file sizes!
- hover.css - a collection of neat CSS :hover snippets!
- CSS box shadow generator
- cssgradient.io - gradient bgs CSS generator
- clippy - CSS clip-path maker
- CSS triangle generator
- W3Schools cursor property - all the cursors you can use with CSS!
- custom scrollbar maker
- css-tricks.com
- cssgridgarden - learn about css grids
- :nth tester
- webTUI
- grid by examples
- CSS cursors - keywords for different cursors your OS has.
HTML
- breezyscoolsite - in-depth guide about making websites
- HTML semantics
- www.html.am - html text editor
- HTML validator
- HTML symbol codes and entities
HTML templates
templates made by me! / neothemes / windchime / francelalune / templaterr / REPTH / teppy / cinni / celestial.zanarkand / nenrikido / itinerae / pomelo / john doeuseful sites for webdev
- can i use... - neat site where you can input a CSS or HTML feature and it outputs its compatibility with all browsers
- web accessibility evaluation tools
- ready.mobi - check how your site looks on mobile
- codebeautify.org - makes your code pretty. you can also minimize your code as well
- px-to-rem converter
- pixelsconverter - converts px to rem, em, inches, and more!
- xml-sitemaps - creates a sitemap of your site!
- viewportsizer - tells you your browser's screen size!
- website speed tester - tells you how fast does your website loads! very neat bc it also tells you which file types are taking most of the space in the page
- cursor.cc - turn PNGs into cursors and also edit them!
- convert UTF8 to HTML entities (another encoder!)
eleventy / 11ty
a static site generator of my choice! i built desteny.me with it.
- eleventy - a static site generator! here's a tutorial by whiona on how to get started!
- eleventy guide for blogging
- search on eleventy
tutorials / guides
- my guides & tutorials can be found here!
- flexbox: solaria's simple gallery guide / sadgrl's flexbox guide
- border imgs: solaria's custom CSS border imgs
- status.cafe feed reader!
- solaria's accessibility article
- solaria's pause gif without JS
- how to switch between different stylesheets
- what is REM in CSS? - an article explaining how this size works
- dokode.moe's blog with tutorials
- encode your email address
cool stuff 4 your site
guestbooks / comments / forms
- FC2 webclap button for your site! also lets people comment on the clap page.
- comment widget by ayano
- chattable - free and extremely customizable chatbox by xobyte.dev
- atabook - a 123guestbook replacement by dimden!
- cbox - chatbox
- formsubmit - submits HTML forms to your e-mail with no JS needed
- bravenet contact forms - embed forms into your site!
tools
- sheet sites - from google sheets to HTML
- 22ru's microblog - template. uses a XML file to update your microblogs!
- neoblogtool - a blogging tool with a tagging system and a WYSIWYG editor.
- melon's gallery maker - micro static site generator that let's you share pics into your website easily!
- publii - content manager for your static site! very easy to use and set up
- glightbox - gallery tool with lots of options!
- zonelets - a static blogging tool
calendars / clocks
- calendar.sakura.ne - pastel colors japanese calendar
- timeanddate.com clock - customize it with your timezone
- customizable JS calendar
- timeanddate.com countdown timer
music
- last fm live feed
- last fm last played widget
- webamp - music player / sadness' tutorial on codepen
- goooby's music player
RSS
- RSS feed widget
- RSS 2 HTML - another great rss widget
- feed canary - e-mails you if your RSS ever goes bad!
misc
- project ideas for your site! by sadgrl.online
- FC2 hits & online counter - keeps track of how many people have looked at your site!
- cursors4u - huge library of cursors
- poll code - make a poll for your website!
- moon widget by dimden.dev
- another moon widget
- webneko - have an interactive cat on your page!
- accessibility widget - an easy instillation widget that gives your site pages accessibility
neat codes
- sidebar the same across all pages (w/ js) by templaterr
- JS style switcher
- falling items code by sadness
- multiple modals on a single page
- image grid w/ options
- responsive img grid
- mask-image property
- CSS tooltip
- JS tooltip - i use this one throughout my site!
- toggle a div's class on click with a button
- filter tags with buttons
- pixel jar and gameboy scrollboxes by appledust
- crt display css code - make ur site have a crt effect
- changing gradient bg css
- font shake CSS code
- save textarea as txt file
- CRT TV effect
- scrolling title tag
- tippy.js - another JS tooltip!
- site closer script by melonking
graphics
my graphic collection page
sites with F2U materials
- hsin's f2u pixels
- phosphoricons - icons
- kawaiiscans - scans of cute notepads
- foollovers.com - site with pixels, bgs, dividers, templates, etc
- mothclub's pixels!
- cute.lolipop.jp - cute pixel materials
- sozaiya 405 - a lot of bear themed cute materials!
- sleepysprout - pixels, adopts
- zozai.pooftie - site with transparent deco pngs, pattern bgs, lace dividers, etc
- fancyparts - cute bgs, and web materials
- sozaioukoku - site with cute bgs
- solaria's border imgs
- loves1ck sozai page!
- marsha's graphic garden
- halloween materials by hillhouse
- nya.rose cute pixel icons and wallpapers
backgrounds
- tartan maker - plaid pattern generator, v useful if u want a tiled bg
- backgroundsarchive - old low quality bgs!
- pexels - free bgs / textures
- unsplash - free bgs / textures
- sadgrl.online tiled bgs
- patternico - lets you create tiled bgs!
- transparent textures
- melon's TextureTown - textures
collections
- wioryz - pixels
- gifcities.org - hosted by internet archive, gifs
- cyber.dabamos.de - buttons from the 90's and 2000's
- homuhoard - favicons, pixels, stamps, etc.
- bonnibel's graphic collection - big pixels, containers, dividers
- pixels.crd.co - favicons
- finn's resources - favicons
- pixelsafari - favicons, stamps, blinkies, etc.
- nyaa's stickebook - graphic resources archive + links
- betty's graphics - gifs
- favicons - big pixels, stamps, etc.
- sadthemes' pixel collection - favicons
tumblr blogs with graphic collections
- purinpixel - pixels, bgs, tags available
- fruchtgummi - favicons, tags available
- lostsozai - pixels of all sizes, dividers, gifs
- pixel-soup - pixels of all sizes, bits of codes, tags available
- cutewebgraphics - bgs, pixels, blinkies. tags available
misc
image editing
- hekate2' button maker - a 88x31 button maker
- 80x15 web badge maker
- photopea photoshop but FREE and in your browser. might be slow. might also blow up your computer.
- bulkresizephotos - has lots of options on how you want to edit the pics!
- picresize - online pic editor/resizer + also has the option to do it by bulk!
- convertio.co - let's you convert files. sadly it has a limit to how many files you can convert daily...
- xnconvert - bulk img converter software
- caesium image compressor - online img compressor but it also offers an offline software you can download!
- pixel art editor - online / offline
- libresprite - a free and open source fork of aseprite
- fanlisting button generator
- fromsoft image macro creator
dithering
fonts
fonts i've used can be found on this page!
- dafont - website with tons of free to use fonts!
- pentacom's bitfonts
- other site's font pages! cinni's / scripted's / strawberry-gashe's / solaria's