WEBDEV FINDS
REMEMBER ▲
quick access things i keep forgetting
- span aria-hidden="true" for accessibility
- background-size: cover; background-attachment: fixed;
- HTML semantics cheat sheet
- JS cheats
- margin/padding: [top] [right] [bottom] [left] OR [top] [right/left] [bottom] OR [top/bottom] [right/left]
- [vertical-align: middle] for baseline icons
- HTML cheat sheet
- box customization ... borders, shadows, outlines
- recommended minimum HTML head
- elements examples
- @media rule
recently used tutorials ▲
- image overlay
- var() element
- hide scrollbar
- how to embed part of yt video, not the whole
- anchor links
- `auto-fill` vs `auto-fit`
- hotlinking (sometimes ok)
- disable text selection
- why nobody said to me about drop shadow option wtf!!
RESOURCES ▲
- MDN Web Docs ... endless source of knowledge
- w3schools ... webdev tutorials, ESSENTIAL SITE
- HTML color map with contrast
- css-tricks ... huuuuuge base of smol tutorials
- sundaysites ... fun webdev jams
- freefrontend ... many smol snippets and tutorials
- list solaria's webmaking guides
- the art of web ... all cool snippets!
- stackoverflow ... i do not recommend to register there
- color-hex ... color HEX codes
- green web ... check if your website runs on green energy, and help make the internet fossil-free
- dafont ... that's right. it's fonts!
- oldschool PC fonts collection
- Website Carbon Calculator ... estimate your web page carbon footprint (with badge!)
- pollcode ... for making polls and implementing them at your html
- Cbox ... live chat for your website
software and tools ▲
- FileZilla for FTP
- [M] acode ... when im goin insane and need to code RIGHT NEAW even if there's fucking no laptop around
- ❤ notepad++ ... code editor
- dither me this ... reduce the file size of an image, but in a stylish old-school way
- dithermark ... same + pixelation
- HTML, JS formatters to make my code readable lmao
- new tinypng ... compress images
- list tiny tools ... small, free, or experimental tools for webdev and everything
- CSS pattern background generator
- image map generator
- table generator
- bradwoods's layout generator
- cssportal's CSS column generator
- chrisnager's responsive grid
hosting ▲
- moe ... domain
- catbox ... 200mb file hosting
- byet.net ... free webhosting, 1GB
- new proboards ... free forum hosting service
- itchi city ... website hosting, only SFW, FTP managing (how many space? i don't see uh)
- codepen ... code hosting, smol code examples
- imgbb ... image hosting. no account needed
- YAYBOO ... free webhosting, 25mb, no folders. for silly smol sites
- lexi's hosting ... 500MB, FTP access and web code editor, kinda social, NSFW is allowed
teacake ... free webhosting, 500mb. you need to write to devs. NSFW isn't allowed- ❤ nekoweb ... webhosting, allows more file types for free users, kinda social. web code editor. NSFW is allowed, 500mb
- file gargen ... to keep your files lol
- pastebin ... store text online for a set period of time
- awardspace ... free webhosting, 1GB
- gitea ... code hosting
- notabug ... code hosting, changelog
- mmm ... webhosting, kinda social
- ❤ leprd ... webhosting, closed?
accessibility ▲
- hiding visible content from screen readers with aria-hidden
- alt text: The Ultimate Guide
- using details element for triggers/content warnings/spoilers
- WCAG ... Web Content Accessibility Guidelines
- Solaria's Readability Tips
- setting up a screen reader testing environment on your computer... and why
- how to make Keyboard Focus and Dialog Behavior (+ testing it)
- how to Write Alt Text and Image Descriptions for the Visually Impaired
- gif speed changer tool
- randoma11y ... accessible color combinations
- accessible color contrast checker
- responsive design checker ... how your site looks from different devices
- implementing a gif toggle in HTML
- day + night themes without scrips
- responsive gallery with full size option and titles
- Responsive Web Directory ... directory for responsive small and personal websites (+resources)
- Accessible Net Directory ... also this (+resources)
SMOL CODES, EXAMPLES, tutorials ▲
- list ribozone's free snippets
- frutiger aero css tutorials
- tooltip with CSS
- transparent textures
- 1px is not enough
- sidebar says ... also as example. sticky side bar
- deconstructed Pancake ... super simple and shows how to make mobile friendly layout
- PHP guestbook
- gradient, combine, color picker for background image!!!
- basic PHP tag system
- audio player tutorial
- responsive blockquote code
- old paper effects with css
- simple playlist with lyrics or notes
- taptroupe's simple tutorial for custom cursors
- how to create folder style in CSS
- image maps
- tabs without scripts
- folder tree view without scripts
- super simple HTML5 playlist code
- list hill house's snippets
- display last update and visitor count on neocities
- webgarden tutorial for sharing cool sites previews
- windows7 scrollbar (some pic links are broken lol)
- You-Dont-Need-JavaScript ... alternatives to java effects without scripts
LAYOUTS ▲
[R] means responsive, (list) means... list of layouts :D
- [R] cheesecake layout by nonkiru.art
- (list) kalechips' layouts
- [R] ribozone's cyanobacteria
- notebook template by doqmeat
- cuddle ... cute! by mypillowfort.net
- (list) [R] owlsroost's templates
- otter layout :3 :3 :3 by xandra.cc
- [R] blue bubbly by cinni
- "stars in our hearts" layout by Almost Sweet
- 1999 style layout with sticky side-bar by Jellyparty
- (list) [R] squidknees' layouts and code
- green, purple and pink garden
- the old forest ... based on the book "The Fellowship of the Ring" by J.R.R. Tolkien.
- (list) teppy's layouts
- metamorph feather ... big header, calendar, yellow base
- metamorph killerwhale ... super simple, but i love it for some reason. maybe it's just orca's charm :D
- the leaf ... i like textures and borders!
- adorable ... adorable!
- thanks for the memories ... i like the overall design and colors
- bliss ... simple, kinda metamorph layout, super wide, but you can edit it
- sleeping panda ... cute smol layout, needs more editing
- floral beauty ... kawaii layout with big header and calendar. need "margin" edits
- It's fun surround by people ... small light brown layout, mostly like a base?
- infatuation ... kinda old paper card layout
- rozen maiden ... fantasy-ish dark brown template
- (list) java2 ... HUGE amoumt of templates. most of them are from 2008, so it's time for metamorph style and not responsive design. but it's a lot of inspiration!
- (list) cepheus's CODEZONE
- grassplane winXP theme by scribblemakes
- [R] windows 98 CSS by jdan
- [R] CClink by debtdeath
- [R] gallery by solaria
- [R] cute journal theme by repth
- [R] cute blog theme by repth
- simple index by repth
- [R] green stentor theme by ribo.zone
- blueberry CSS theme
- (list) templates by EGGRAMEN
- cute layout by windchime
- (list) awhe's templates
- (list) zolonets ... basic blogging templates with jscripts
WEB ART with code ▲
- deep sea
- frutiger aero and solarpunk inspired UI by Solinus
- simurai's brushed metal buttons
- web desktops ... directory of web apps, portfolios and experiments that mimic the appearance and functionality of desktop
- glassmorph code example by Aron
- 8bit snow by Hima Vincent
- ASCII Morph by michelle
- Neil McCallion: interactive display, Procedural canvas cityscape, HTML ART GALLERY and PSX DOOM fire effect :D
- cyberpunk ui by Jane Ori
- by renanpvaz: Neon Genesis Evangelion episode title, Space, hidden text and other things (check them!)
- dust particles, fireslies and another one :3
- 3D room and little bakery by Ricardo Oliva Alonso
- MS Paint :D
- "paper.js" by zessx
- noise gradient by Chris Coyier
- animated gradient border (colorful) by Mike Schultz
- animated black glow effect by George Hastings
- Windows XP-ish loading screen :D by dhondup
- Olivia Ng's ANIMATED MAP OH MY GOD!!!