Beginner's webmaking mistakes - things you wish you knew?

[pinkvampyr]

oh and this is a small thing but don't wrap buttons in <a> tags! did that all the time when i was starting and i haven't even gone back through all my code to fix all that yet. on most browsers it works but it's not valid HTML and could cause problems. if you really want to use a button as a hyperlink, better to set an onclick event instead!!

HUH. i did not know this. On every persons code i've studied I've seen them use a <a> tag for buttons. Well, good to know now I guess.

[kiki & ayano]

HUH. i did not know this. On every persons code i've studied I've seen them use a <a> tag for buttons. Well, good to know now I guess.

i didn't know either until i tossed my code into the w3c markup validation service and got a laundry list of every single button on the page i tried to validate, since i really like buttons as links... been trying to keep that in mind ever since. point is i don't think it's very common knowledge, at least not within neocities

- kiki

[BananaBoots]

Add alt text as you go! Not a mistake necessarily but if you don't add alt text when you first use the image on your site then you'll end up with god knows how many images that need to have alt text added and no clue of where to start. (Guess who had that realisation )

Luckily, I ended up rebuilding my site from the ground up so I'm adding alt text as I go this time.

[owlhari]

not really a mistake, more of a time-saving option that we didn't know about when we first started making websites.

css variables are a thing!! if you wanna have pages with a different "theme" than the rest. it's much easier to change variables in a :root instead of manually changing every link color, font, etc. and even if your whole site uses one style! instead of find-and-replacing the color you used twelve times to update it... make it a variable and change it in the root. less clicks that way.

[Memory]

css variables are a thing!!

Although to be fair, they have only been for some time, and they will completely break on older browsers, which may be important for some:

https://medium.com/dev-channel/css-variables-no-really-76f8c91bd34e

[andou]

mine is very simple: i wish i knew that using a stylesheet would make my life easier and code more organized. right now all the CSS for my site is at the top of my code, and i'm scared that transferring it over to a css sheet will break the site somehow... (i'm still very new LOL)

[brisray]

@andou - some of your pages use different CSS to others, but some use common styles. Concentrate on those for the time being. Copy those styles to a plain text CSS file and start using that. You don't have to do every page at once. When I do things like this, I do it as a new page is created or when I am editing an old one.

As a bonus, copy the CSS to https://www.minifier.org/ and minify it. All that does is remove the white space from it. Suppose you call your CSS file mycss.css copy the text that the minifyer give you to a new file called mycss-min.css and use that.

As minified files are difficult to edit, any changes can be made to mycss.css and then reminified. Don't worry, you're not doing anything that hasn't already been done on your site. Your page at  https://oekaki.andou.gay/ is already using both minified CSS and JS files.

[brisray]

My first mistake making webpages was not realizing how different servers and the operating systems they sit on may or not be case sensitive.

Domain names are never case sensitive, anything after that, may be, or maybe not.

[starbreaker]

My first mistake making webpages was not realizing how different servers and the operating systems they sit on may or not be case sensitive.

Domain names are never case sensitive, anything after that, may be, or maybe not.

Man, I remember the culture shock of case-sensitivity when I first encountered a UNIX system in college after dealing with DOS in high school. It was kinda rough at first.

[bingus_baby]

Biggest pain for me was not realizing that you can link images and files through file directories and not just links. Like "graphics/catsquish.gif" instead of "https://c04x14l.net/graphics/catsquish.gif". I had quite some dead links when I'd change a site name, move domains, or something of the like. Also, CSS is friend not enemy. I was SO scared for the longest time of CSS, but as it turns out... It's worth learning lmao, I still can't "speak" CSS but I at least know what it is and why it exists! Last learning experience I had was learning that working offline can be nice when making a lot of little changes, and then dragging that into Neocities once I'm done.

Bonus, but not necessary, naming all your files something coherent helps!! A LOT!!!! Because who wants to work with "73598272_9263836289_by_387387_on_deviantart.gif" instead of "Fortnite_stamp.gif"? Nobody.

[Nickolox]

COMPRESS YOUR IMAGES !!!!!!!!!!!!
AND ALSO SORT THINGS BEFORE YOU UPLOAD THEM
I've had to learn these the hard way after putting together my art pages, I realized that all of my artworks uncompressed took up the entire 1gb of space... I uh... make a LOT of art lol
I had to trim down the selection anyways, but after that I went and compressed everything into jpgs/low colour pngs...
Now my site only takes up 10mb, compression is really like magic!
Sorting things is also v important lol, my site's files tends to be a big ol mess while I'm working on it and sometimes I forget to clean it up until after I've uploaded everything... going through and fixing all those mistakes takes sooo long, and there's also things tend to break a lot during that fixing time, so I might as well get it right the first time...

[lycoseadae]

i wish i knew about using <p> tags around text instead of <Ꮟr><Ꮟr> to make new paragraphs

and flexboxes to evenly make items fill and adjust inside a container instead of forcing them to line up with inflexible sizes that easily broke alignment

[technomage]

God, so many...

JavaScript is not the enemy people make it out to be, and will save your sanity... But only when and if you learn when its appropriate. At the very least, learn how to use a JS include (or PHP if your host allows it) for repeat stuff like navigation.

Learn what a CSS reset is, and use them. A couple lines of code at the start of your CSS can save you so much headache (and code) in trying to undo all the weird things browsers do differently from each other.

Nail down your CSS for basic elements at the top, and then only change them when you need to. Give a "standard" style to things like links, bold/italics/underline/struck out, headings, etc instead of doing dumb stuff like ".div-a h1" ".div-b h1" etc when they all have the same h1 styles to them.

ORGANIZE YOUR GOT DANG HTML. Its so much simpler to just... Group HTML elements that are supposed to be near each other on the page, instead of wrangling them with position: absolute; and float garbage.

Don't code blind... Ever! Use CodePen so you can see how your code renders as you're writing it.

[pinkvampyr]

Don't code blind... Ever! Use CodePen so you can see how your code renders as you're writing it.

i personally use vscode/vscodium with the live server extension so i see how my website looks as i'm writing. i think other software might have similar things but i swear by the live server extension.

[jadefyre]

As has been said before, definitely the consistent file names and organization. Originally I started putting my images in the main folder on neocities and then it got super messy. Now I have probably a couple dozen pages that all reference at least one of those images, which means I have to go through and update (BY HAND  ) every single page to include the name of the folder I've moved the images to, lol.

That, and for some reason instead of creating page-specific classes within the main style.css document, I created a separate page-style.css for specific kinds of pages. I'm currently working my way through consolidating everything back to style.css. *sigh*

So, in summary:

• Put your images in a folder to start with. Subfolders too if you plan to have a lot!
• Keep your CSS in one place and simply create reusable classes instead of separate CSS files
• Prepare to spend a lot of time fixing/updating your site if you don't follow points 1 and 2