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

[pc9801x]

a piece of advice i would give to my 2020 self is:

- PLEASE use an ide, using notepad++ does not give you the coolpoints you think it will - they are just much more convenient!

- please split images into separate directories, and don't just have a directory called "images" which is just a massive dump of images.. it make things stupidly difficult!!

[malice]

to piggyback on what previous people have said, ORGANIZE. EVERYTHING. create folders, subfolders, subsubfolders, maybe even subsubsubfolders if you need it! if a page contains multiple pages (ex: a blog) then keep all of those in a folder, divide images into which page it goes to (for example, and this is a bit extreme but it helps me, for my evanescence graphics collection i have a subfolder for those in my image folder, then subsubfolders for each type of graphic like buttons, avis, blinkies, etc, and in the avi section due to the sheer amount of avis that i have i have more folders for every evanescence album/era), fonts, stylesheets, javascript pages... basically if you think you can put it in a folder, do it. also, run your site through the web accessibility evaluation tool to make sure your site is accessible!

[Mo/Otto]

to piggyback on what previous people have said, ORGANIZE. EVERYTHING. create folders, subfolders, subsubfolders, maybe even subsubsubfolders if you need it! if a page contains multiple pages (ex: a blog) then keep all of those in a folder, divide images into which page it goes to (for example, and this is a bit extreme but it helps me, for my evanescence graphics collection i have a subfolder for those in my image folder, then subsubfolders for each type of graphic like buttons, avis, blinkies, etc, and in the avi section due to the sheer amount of avis that i have i have more folders for every evanescence album/era), fonts, stylesheets, javascript pages... basically if you think you can put it in a folder, do it. also, run your site through the web accessibility evaluation tool to make sure your site is accessible!

this this 1000x this. the earlier you organize & take accessibility into account, the easier it is to keep it up.
i just resorted my images/css on my personal site and there was a lot of going back and forth to make sure nothing broke. it was a bit of a headache, but now it's done & it'll be easier to keep everything in the dedicated folders.

[Memory]

Honestly? When I started (& way past when I started, haha) my code was just way too fucking messy. Instead of making CSS style sheets, I'd just put all of my CSS directly onto my HTML page & it got really confusing & overwhelming really fast. Just making an effort in general to keep your code neat & tidy will save you a lot of trouble later.

This also goes for your site's files. I'd say that having some sort of system in place is necessary & consistent naming is really helpful. For example, sometimes I upload pictures into my site's diary & I have a naming convention for them: Year/Month/Day/Number, so for example I took multiple photos on the seventh, & in naming the third one, it was called: 2023100703. Naming them in this way keeps my photos in order & keeps them manageable.

Moving outside of the practical & more into the ideas of webmaking, I would tell my past self to abandon all convention & just do what you want. Luckily I learned this pretty soon, but I came to the realization a few months ago after seriously & consistently working on my site for a few months that while I really had fun making my site, it wasn't me. Or it wasn't me enough. Personal sites to me are vehicles of self expression, so they don't need to look like what everyone else has.

I would also tell myself that making a site should be fun, first and foremost, & if you're consistently getting annoyed or frustrated with your inability to code, then make a new code! My site's revamp is basically empty & devoid of almost any graphics & it has made keeping my site so much more fun. Instead of trying to do grand, sweeping projects & changes, I'm just going to add to it slowly, when the feeling strikes. I'm treating it like an actual diary: Decoration is fun, but unnecessary, so I'll just do whatever I want.

[Memory]

I wish I knew that it's generally easier to make a website mobile-responsive and accessible from the start rather than going back and overhauling it later, LOL

[lycoseadae]

already replied once but combining elements that have the same properties to easily keep certain parts of the design consistent and easier to edit

so instead of

Code

.box1 {
color:pink;
background:black;
border-radius:5px;
width:150px;}
.box2 {
color:pink;
background:black;
border-radius:5px;
width:100px;}

its combined:

Code

.box1, .box2 {
color:pink;
background:black;
border-radius:5px;}
.box1 {width:150px;}
.box2 {width:100px;}

[Kala]

A tip I wish I could've given myself a year ago would be PLEASE DON'T BUILD WEBSITES ONLY USING TABLES AND REFUSING TO USE DIVS  Idk what was going through my head back then. I'm sure No one else ever does this mistake, but its still something I wish I didn't do.