people think its not possible to make a webpage without taking formal classes or outright paying somebody to do it and that is notttt true at all! 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 (no javascript, no flexboxes, no RSS, etc) but it is "living" proof that its possible to learn basic webbuilding skills and apply them without a formal IT education. theres no true step-by-step instructions to doing this so if thats what you thought this page was going to be, I apologize lol and will explain: it's all up to what you as the webmaster wants. I struggle with "sandbox" games and activities where clear instructions and goals aren't given outside of 'be creative!!' if you're anything like me then hopefully these resources (and my rambly explanations) will give you some clarity on where to start and whats avaliable to you. utimately you are the master of your own web. have fun with it! a personal webpage is just another expression of you and what you want to say/convey to the digital world. theres a section dedicated to 'plug and play' website templates under 'adra's fave free coding resources' but its more rewarding (and dare I say, fun) to do it yourself from scratch! making the transition from social media (where all the coding is done for you) to doing it all yourself can be really intimidating but after you get over the initial 'woah this is alot...' feeling it becomes really fun. like any other hobby you have to be prepared to put some level of work in if you really want to do the shit. If you're somebody who loves customizing your layouts on social media (or if you loved finding cute tumblr themes to use back in the day) you will really enjoy the process of running your very own website. if you don't like doing that sort of thing or just dgaf about how a site looks and you just wanna post then theres nothing wrong with that but thats not really what personal webpages are for and this might not be for you right now. with this being said, lets start learning!!!
it helps to think of 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 giving speeches or writing essays so its best to start really small with your first coding project and then introduce more complex ideas as you get more familiar with basic ones. there are constant learning curves so starting small will also 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 have to memorize anything. 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 singular 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 (ie layout builders) 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.
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 because sometimes you don't want all your edits to be public. 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 as you do them before you implement them on your blog. they have a CSS, HTML, AND Javascript editor that you can use at the same time to see how all the things interact which is really useful!
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.
- 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 for that, in all seriousness). 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. always check if somebody explicitly says don't repost.
- 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
- 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 just 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 any variation of colors)
- 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 and webbuilding (the egg analogy made alot make sense for me personally) 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 if you don't know what you doing leave the javascript part alone lol). my own blog is run with zonelets (although as I write this page I don't have anything up lol. hopefully I can update this note soon)
other/misc.
- theres so many things you can do with a website. a visitor counter, a music player, a video player (I've seen some CUTE ones that look like actual TV's and people make playlists of really fun videos that autoplay - so fun and creative!!!); 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 tools that I use 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 seriously ALOTTTT) 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 didn't post a template code she made on twitter (and put me on to neocities in general, shes great)