front end webdev things i learned the hard way

always use Inspect Element

seriously. it helps you debug your page for any script errors as well as test responsiveness (mobile compatibility).

store your coding locally

you can honestly just use the built in neocities code editor but it's recommended to use Visual Studio Code, Atom, etc. to code your page as they're better for debugging and come with a terminal if you plan to use a CLI or something like a static website generator. that, and you can't be sure your coding is backed up properly on another server.

although to my experience, you will get some funky linking issues if you don't use a website generator and host it on a server. this unfortunately requires you to set up.

reload frames to refresh the data

if your frame code isn't working, that's because they function very oddly with your local data, particularly when it's on a server. try right clicking on it and find an option that says Reload Frame or the like.

position inheriting

position: absolute; will only inherit from the parent element that has a position: relative; in its properties. it has to have a relative position for the child element to inherit or else it will inherit from the document's body. why? because bullshit.

buttons

when making buttons, don't use div, use button. if you use div, you will have to click the content (text, image) instead of the entire element itself if you use button. you then can just surround the button with a hyperlink or do an onclick script.

display: flex;

tables are mostly obsolete by now. display: flex; is a better way to organize items within an element with much more powerful options. a good way to vertically align and center content within an element is to add this in your .css rule:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

apply this class to your elements and then surround each item with an element like p, i, b, or span to separate them. your content should be vertically aligned and be centered in the middle of your element.

alternatively, here's how to space apart your elements evenly:

display: flex;
justify-content: space-between;

i recommend looking it up, it's a bit complicated.

center an element in the middle of the document

here's a hack to put something in the center of your page:

width: (number);
height: (number);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

removing an element on interaction

a simple way to remove something on click (e.g: button or image) is to add onclick="this.remove();" into your element.

reminder this is javascript, so if you have anything blocking it it won't work. you alternatively can use onmouseover in place of onclick to make it trigger on hovering over it.

aligning images to text

if you're tired of images always pushing your text down and being fat, try adding vertical-align to them.

vertical-align: middle;

this will make your image align in the middle.

javascript must always be placed under its dependencies

javascript has some weird scoping. you have to place it underneath any declared variables it depends on or you're gonna get an undeclared value error.

never include your domain in a hyperlink

why? because if you change your domain all your links will break. obvious exception is if you're linking offsite or something that isn't your domain.

do:

/images/filename.png

don't:

https://hellaonwheels.neocities.org/images/filename.png

anyway, that's it for now. feel free to leave your own coding tips in the comments.