you will have a HELL of a time coding a website on a phone, so this page is best viewed on a computer
back to class
back to main page
back to neocities.org
when you look at websites on neocities it's easy to think that you'll never be able to make a page without paying for an automated service or taking formal classes - this isn't true! I went from knowing nothing about coding aside from copy and pasting tumblr themes back in the day to building all this. now to be fair, my website isn't complex at all (no javascript, no flexboxes, no RSS, etc) but it's tangible proof that its possible to learn basic webbuilding without training.
theres no true step-by-step instructions to making a website so if thats what you thought this page was going to be I apologize and will explain: it's all up to what you want. for some this is thrilling but for me this is intimidating! I find "sandbox games" hard as hell like I don't understand how The Sims or Animal Crossing is fun lowkey. when people say 'fill a website with what you like' I'm like 'aw shit what do I even like' so if you're anything like me, hopefully these resources (and my rambly explanations) will give you some clarity on where to start or whats possible for free.
the infinite potential in a webpage can be alot to work with when you're making the transition from social media (where all the coding is done for you automatically) to doing it yourself. nobody can do this for you. I mean... technically they can (theres a section dedicated to this if you scroll further, actually) but its more fun and rewarding to do it yourself! like any other hobby you have to be prepared to put some level of work in if you really want to learn it
coding!!!
what the heck is it?!
it helps to think of coding/code as the language computers, apps, and websites speak. learning coding concepts is just like learning a new language if I can compare it to anything. toddlers don't start out writing essays so its best to start really small with your first project and then introduce more complex ideas as you get more familiar. there are constant learning curves so starting small will save you frustration. don't get stuck on having to know all things code before you get started either, I learned (and still am learning) everything as I went (go?) along. html has existed since 1993 so theres countless resources for information out there, you just have to find one that you can understand. I wanna say I searched something like 'html/css cheat sheets' and then I was off from there. the great part about coding is that you never really have to memorize anything! like if you get stuck you can just search 'how ___ in html/css'. the only way to learn how to do this on your own is to review answers from others. theres no ONE resource that can teach you everything, you'll be reviewing different solutions and trying them until one makes sense to you. I know reading this you might be like 'damn wtf idk if I really want to commmit to this shit rn' 1) you can do this! it sounds so much more complicated than what it actually is I promise you lol. and 2) MOST IMPORTANTLY these are only instructions if you want to make a site from scratch - you literally do not have to. I'll go over ways to make a website that involve minimal coding BUT even with minimal coding options it really helps to have a bit of knowledge if you run into problems or irregularities with your site.
some of my favorite free coding resources
none of these are partnerships or endorsements btw I just found these useful and want to pass them along to you.
if you're more of a 'plug-my-preferences-and-make-it-for-me' kind of person (you'll struggle to make a truly customized website because nothing can plug and play for you that much) BUT fret not! sadgrl.online has a layout builder here if you wanted something quick and easy. there are alot of other layout builders for neocities if you search around on neocities (tip: some good tags to search would be 'layouts, themes, html' just to give you some ideas. think tumblr themes its pretty much the same concept)
- my html and css bible, really fantastic free resource for learning basic concepts. they've helped me solve sooooo many problems with my website. theres even little 'test' pages for each concept they teach you where you can plug and play your preferences. this is probably my #1 recommended resource, they taught me nearly everything just from being able to read what they're describing and then test the code yourself all in the same place. CANNOT recommend them enough like this is literally how I did everything for my site myself.
- css grids will save you if you're trying to create your own webpage from scratch. personally, I don't have enough IT knowledge to explain to you how every webpage uses these but when you start fiddling with it you'll see how every webpage has some sort of box model involved. this is my personal favorite gridbuilder generator because its simple but they can be incredibly complex if you're wanting alot of customization of grid areas. googling 'css grid generator' will bring up several. theres also a css grid guide here that explained how grids work and common issues with them. I reference this page ALOT when things aren't looking or lining up how I'm trying to make them.
fun fact from twitter oomf: you can have a more centered look in your grid if you use an odd number of columns and even number of rows.
- to be honest honest.... I mostly do all my html/css stuff straight out of neocities these days but thats not best practice because people see every single edit of mine lol. I recently made a testing page so that nobody following me on here can see all that stuff on my main activities page lol. BUT I did used to use liveweave alot for my testing and its a really great free resource for wanting to see what changes will look like before you implement them on your blog. I really like that they have a CSS, HTML, AND Javascript editor that you can use at the same time to see how all the things interact!!!
if you go on any given neocities page you'll wonder 'hey where is everybody finding these cute ass little gif thingies??? I want cute gif thingies...' I'm here to help! I used to have a 'sources' page on my website so that people can see exactly where I found things but keeping that updated became very tedious, so I'm gonna give you a rod and teach you how to fish. graphics are the biggest (and imo most fun) part about building a website. images are everywhere! people have had personal webpages for a long chunk of time and have left us many treasures we're allowed to borrow from their virtual libraries. figuring the Internet Archive and Wayback Machine sites out when you're just starting your page can be a monumental task in and of itself (at least it was for me cause I still really don't know what I'm doing with it tbh) so I'll give different resources and tips.
graphics: where to find
- thanks to the tireless efforts of wonderful people who work with the Internet Archive Wayback Machine theres we have access to graphics that people were using on myspace and geocities back in the day. fun fact: geocities was the "old" version of the site that we're on now ((hence the name neocities)) it was run by yahoo from the 90s until they pulled the plug on it in 2010. this was how people had social media before social media existed - personal webpages best and easiest to use resource for all graphics even hyperspecific interests. pretty basic search engine - embed the gifs you want with html or download them and upload them to your website specifically if you wanna do that.
- really awesome resource right here on neocities. these are gifs the archivist found and arranged by category. you can also search 'graphics' on neocities and it will pull up several other websites on here that do pretty much the same thing as bettys archive; bettys is my favorite and imo the most comprehensive
- tumblr is still a great resource for graphics and pictures (it actually never fell off in all seriousness, tumblr is dope). you do have to have an account to search around on there these days and the tag system has always been a bit of a mess but 'pixels' 'transparent' 'graphics' will all bring up cute little gifs and icons.
- very similar to gifcities; a media search platform. all the images on here are free use which is nice because you don't have to worry about copyrighted material. I will say, though, the search kinda brings up random shit so be ready to comb lol
graphics: fair use, DMCA, and creative commons
I can't tell you about using graphics and images without giving you this warning: you will run into legal troubles trying to profit off of a personal webpage with copyrighted material on it. fair use doesn't mean that you can use copyrighted images for profit but it does mostly cover you as far as using these images for noncommercial reasons like commentary, criticism, reporting, research, and/or teaching. I would argue personal webpages fall under 'commentary and criticism'. (I would also argue that major copyright holders def aren't combing through personal webpages to issue DMCA takedowns but please don't take legal advice from me, it can happen and thats why I'm writing this). its best practice to give credit to copyright holders somewhere on your webpage (full name and link back to the page when possible)((yes I just said keeping this up was a pain in earlier paragraphs lol but it is best legal practice)). if you're scared of DMCA punishments there are workarounds like using stock photos/paying for them or using works that are from the public domain only. typically if you haven't made any money from it, all the DMCA asks of you is for you to take the copyrighted material down. so don't feel too scared, lol.
enough code and pictures... what fun stuff can I put on there?
- cbox is a really cool 'live chat' option for your blog. they have paid subscription options that give you more features but I think the free version works fine, they let you edit the appearance of the chat box on their website (I have mine set to be transparent so that it can go anywhere on my site but you can make it anything)
- zonelets is a REALLY REALLY cool free resource if you want to use your neocities website to write long blog posts and keep them organized in one place. I really love the way the creator writes and talks about coding so just clicking through their website is well worth your time - they even compare their service to other paid and free alternatives to explain how they have the best option for what you're looking for. the codes are in a zip file and you just upload them to your dashboard on neocities. you don't have to know javascript but it does help a little bit to be familiar (I 'broke' my javascript code trying to do too much and had to reupload it once so speaking from experience). my own blog is run with zonelets (although as I write this I don't have anything up lol).
other/misc.
- theres other things you can do like a website hit counter, a music player, a video player (I've seen some CUTE ones that look like actual TV's); take a look around other sites on here to see what other people are doing! you'll be both shocked and inspired
I hope this helped you get a basic idea of how all this *gestures vaguely to the digital room in the digital building that we're talking in* is made and what to do to build your own.
with all the building blocks I used at my disposal organized on this page I want to kind of backtrack by saying: you dont actually have to build your own website from scratch. In fact, you can have a website on neocities without knowing any computer skills outside copy and paste and I would actually argue thats the best way to begin your journey of building a website if you're like me and had no prior coding knowledge.
there are alot (I mean like, ALOT) of people who make neocities layouts that you can use. Most are free but some do ask that you give them credit or a tip if you're able so be sure to be courteous and read all their instructions. I wouldn't be capable of making my own website if my wonderful friend chrissy(link here) didn't post a template code she made (link here).