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

[morrysillusion]

nooot sure if this topic exists in some form, but i was thinking about this as some random people i follow elsewhere try to dive into website making. and i see a lot of things people are doing that is making them struggle a lot, things that i did too. of course the journey to website making and learning it all yourself is quite a journey, and not exactly a smooth one! and i dont regret where i got. but i do wish i stopped myself from making some mistakes that hindered my progress quite a lot lol. getting ahead of myself, being overly confident and thinking "nah, i dont need to learn this" only to circle back and learn it because without it my website was a broken mess...

what are things you wish you were able to tell yourself earlier on to d:ha:not to do? what mistakes did you make, and inform others to consider when making a website?

my advice to myself and others is: dont use a site template if you seriously know nothing of setting up a webpage... no matter how easy it is made to use- if you dont know html or whatever, youre probably going to break it, and when you do, you wont have any clue why or how to fix it lol... i tried to use templates after doing some insanely basic html but didnt get css and all the settings. any attempt to customize it past colors broke it, and i didnt know why! and when i asked for help i didnt know enough to really understand the potential solutions i was being offered either.

i think templates are great actually but, boy is it good to know some stuff if you want to do anything more wish them. its been much more beneficial to understand at least some of it, so that i can fix the errors or at the very least pin down where i went wrong.

[TheFrugalGamer]

Totally agree about the site template! I've spent more time trying to untangle someone else's spaghetti code than it would have taken to make my own version from scratch in the past!

This can apply to programming in general as well as webmastering, but I wish I had understood that it's okay to not reinvent the wheel, and you don't have to have everything memorized in order to be good at making webpages. Copying and pasting is a perfectly ok way to learn and make things work, and having to search how to do things is not bad at all. Half the time, in fact, just knowing enough to be able to properly phrase your questions makes you more proficient than most folks who don't know anything about coding.

I realize that opinion may be a bit controversial, since there are all sorts of opinions people have about stealing code, but they do say that we learn first by imitation. I have a sentence or two on my About Site page about looking at my code. Feel free to copy mine and use it to learn!

[morrysillusion]

very much agree with your addition! its funny because after i learned by error in trying to use themes i had no understanding in reding, i went off on my own and im glad for that. but in some ways i fell into the error you describe to- i wanted to do *everything* from scratch now and decided i would not give into copy/pasting other people's bits of code.

but youre very right i think- you shouldnt get caught in the idea that everything you make needs to be 100% unique and new. so much code out there is the same thing and if you see something interesting theres no harm in grabbing it to take a look and use it. but truly, after learning what things meant its made my journey far easier. i can go use themes and understand generall how they work, i can look at other people's codes and see what they do and actually kinda understand it. thats the important part more than anything, knowing the general idea so you can explore further even if it means googling things randomly when you dont know how to do them.

[Pepyogurt]

This isn't a mistake I made (cuz I have Amazing Foresight (that is a joke)), but something I would tell newer webmasters, especially with art-based sites, is to have consistent file naming conventions. This makes it soooo much easier to find things within your own site.

To further explain what I mean by this: I've made it one of my objectives to make sure every file name on my site that usually has a space instead have dashes (so 'one two three. html' becomes 'one-two-three.html':wink:. Really cuts out on second-guessing whether or not a file used spaces, dashes, underscores, or whatever in the file name.

Adding a keyword to a file/folder name helps too. For an example, if I have a bunch of related folders, it might help to add a keyword that unites them all so they get sorted alphabetically together (so instead of having 'blinkies' '88x31' and 'stamps', you'd have 'img-blinkes' 'img-88x31' and 'img-stamps':wink:. If you don't care about alphabetical sorting, adding a keyword to the end of a filename to associate different files works too (like 'artwork.png' and 'artwork-icon.png':wink:

Maybe what I'm saying is just basic webmastery, but I feel that just naming your files willy-nilly is a pitfall some new webmasters could fall into.

[PurpleHello98]

Backgrounds are good and too much white space is not. My first Web site from a few years ago didn't have any special background, just white, and had way too much white space, making it hard to read and just plain ugly.

[Memory]

Beginners hurdle (not so much a mistake): Tapping around in the dark for not having enough clues about the possibilities of HTML.

Light up a torch instead. For me, this was an old book being humbly called "HTML 4", costing 3 Euros. I've read through all the tags, that were described there and that got some ideas going. Things I never imagined the HTML overlords have put into the specifications!

[debleb]

saying it’s fine, i can fix it later. about your messy code/unorganised pages/randomly named images. by the time it gets bad enough for you to want to fix it chances are the only cure is going to be building your entire site again from the ground up!

trust me, i know this one from experience… 

[Cele]

Put the navigation in an iframe so if you want to add a new link to it, you don't have to edit 30 pages to get it to appear everywhere on the site *head in hands*

[Memory]

Put the navigation in an iframe so if you want to add a new link to it, you don't have to edit 30 pages to get it to appear everywhere on the site *head in hands*

On the other hand, older browsers won't work with iframes. :( I still do my navigation statically per site, but I only have like five "hub sites" which every other site just linking back to its hub, so changes in navigation are easy.

My first web making mistake was not using external CSS and instead putting all styling in the document itself - simply because I thought it'd be easier since every document had its own style to an extent. Turns out that there was more in common than I thought, and changing it around on each page was a terrible, terrible experience; just import the stylesheet and then override the specifics!

Oh, and scope is a big one. Keep your scope small, otherwise it's going to feel like you're just filling out what you "need" for a minimum viable product instead of adding new things.

[Skykristal]

pretty good stuff that was already brought up here!

I'm going to add something that I see very very commonly done. And it's something I myself did at first because I wasn't thinking much about it.

And that is using full size image files
One of the biggest mistakes, especially on image-heavy sites such as art and photo galleries. In 9 cases out of 10, half of the images even break in the process of loading. Can be fixed with a simple re-fresh, but it's still very unpleasant. Make thumbnails when doing galleries & link to the full, or scale down your graphics and keep them small but still in good quality. (for example, exporting as 8bit, 24bit etc. in most cases the image still looks perfectly fine and also doesn't need a higher resolution)

[Memory]

A lot of super useful insights have already been said but I want to add something based on my own experience:
Not studying enough and simply trying to guess things out.

Of course that the best way to learn is to actually try and make it and if you wait until you are good enough that is never going to happen but there's a sweet spot where you have learned sufficiently to at least know what you are doing. When helping newbies with their codes a lot of times it is very obvious that they guessed what things do rather than spending 3 minutes to read the documentation on w3c to actually learn in details, then in the future they wish to make a change and they cannot get it to work because they guessed how the code works only in a very specific scenario and have to guess all over again.

Figuring things out as you make them can be pleasing as you see results faster but I personally found out that I acquire a deeper comprehension of what I am doing if I study first to have a general grasp of the subject. I understand people function differently and this may not be a valid tip for everyone but it was worth mentioning since I noticed more positive outcomes once I started doing this myself.

[Mayflower]

I think the biggest piece of advice I have for myself is to just keep up consistency while making something

Theres quite a few things on my site like the css that for no real reason just change things like the unit they use, say sw on one div and then suddenly rem on the other

Keeping them consistent makes it so much easier to account for people not using your computer to view your site (i keep forgetting this one)

[Nullcasting]

i sidestepped a huge bullet when i first made my guestbook, and only realized after my friend peter tried to inject malicious html data into it as a joke.

there's a bunch of data in this entry that isn't being displayed bc i deleted it lmfao but if it worked, it would have changed all the site's images and added in some modal elements.
if i just let the guestbook entry get added in as 'innerhtml' instead of using 'innerText', a more malicious person (not peter) could have injected anything they'd want into my site. lesson here, make sure you are properly sanitizing any user inputted data - give it as little power as possible, and everything'll be okay!

[Memory]

Writing a long blog post in plain text first and then converting it manually into (X)HTML after you're done,... will burn you out.

Write in (X)HTML from the start, will save you headaches later down the line because it will save you like half an hour of copying <p> and </p> from A to B.

[kiki & ayano]

Writing a long blog post in plain text first and then converting it manually into (X)HTML after you're done,... will burn you out.

Write in (X)HTML from the start, will save you headaches later down the line because it will save you like half an hour of copying <p> and </p> from A to B.

i really feel this one because i just re-did the code for my journal page and i had to go back and edit all my old entries to work with the new format... it is SO draining to add tags around everything after the fact good lord. and on that note, the only reason i had to redo it is because i made that journal code while sleep deprived, only to realize a while later it was so janky it was practically unusable. don't code while you feel super sick or exhausted! you'll probably just be kicking yourself later and redoing all your hard work. don't be like me LOL

also, for the love of god, have a proper file directory with clearly labeled folders and everything! we had to do a massive revamp of a website once because it was our first project and we didn't set up a proper directory and spaces for everything to go... basically all the site pages were in one folder, plus their stylesheets and javascript files, it was terrible. naming conventions are good too as mentioned like... a whole year ago in this thread lol

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!!
- kiki