how to add comments to my (spaghetti) code for future ref?

[red-night]

Hey everyone! As I'm coding my website right now, I find myself wanting to add comments for future me/others who stumble across my little webcorner. Problem is, my code is a massive pile of spaghetti held together with tape and dreams I'm worried too that if I change anything it'll break the already precarious font system (as happened earlier today, when I changed the font size on a link element and then had to import the fonts inside the html itself )

Any tips on how to un-spaghetti my code and/or add comments would be greatly appreciated!!

Almost forgot, but here's the site itself!

[Adam]

Leaving comments in your code is definitely a good habit to get into. Depending on how you're creating your site, those comments might be visible to visitors who view your source code, though, so don't get too spicy with them! That said, they can also serve as an Easter-egg of sorts for anyone who looks. Some of my pages have entire paragraphs hidden in the comments, just in case someone stumbles onto them.

If you're just writing normal HTML, comments go like this: <!-- This is an HTML comment -->.

As for the spaghetti-ness, your site won't load past the first page for me (standing in the woods), so I can't comment on your specific code. Using CSS can help, though, since you only need to define things like fonts and colors once, then just reference that CSS file on your individual pages. If you decide you want to use a different font for your hyperlinks, for example, you just make the change once in the CSS and all the pages will magically update!     

[pepper]

Spaghetti isn't a huge hazard for HTML/CSS compared to other programming languages, you should see my Python code!  but it can definitely get out of hand. Your code looks fine so far, but it's good that you're thinking about what your organization will look like. Like Adam said above, making use of stylesheets is great! I have all my styles in one CSS file, and I kinda wish I split them up into at least a couple different files instead, as my CSS file is getting pretty unwieldy. Alas I am too lazy to make that change at the moment 

I use comments in three ways in my code
(and here is a link to my index page as an example :3 to see my source code, right click -> "view page source")

1. reminders for myself: my memory is terrible! I tend to put little reminders to myself so when I'm reading it back and adding things later I remember why I did certain things, or how a JS script works or whatever.

2. organization reminders: I'll keep little "headers" throughout the code to section off each bit. In HTML this naturally happens as it's all markup with tags, but having titles in comments helps me keep it all more organized in my head so I can more easily find things (for example my little "end header" comment tells me where the actual page's content begins)

3. deactivating code without deleting it! In my text editor (Sublime Text gang), but this is true with most text editors, I can highlight a block of code and use the keyboard shortcut `ctrl+/` to turn the whole thing into a "comment", or turn it back to active code. This is a quick and easy way to test features and I use it constantly when debugging.

Comments are there to aid development, so they are pretty much up to you in terms of content, these are just my own examples and some ideas to share :3 There are style guidelines that professionals need to worry about when working in software engineering, and OOP languages often have specifically formatted comments that can be used to automatically generate documentation, but for a personal site its all up to you! It's your code, comment it however you want 

I look forward to seeing what you do with your site 

[red-night]

As for the spaghetti-ness, your site won't load past the first page for me (standing in the woods), so I can't comment on your specific code.     

Noooo I thought I fixed that !!! I'm sorry, I'll do what I can to get that back up and running.

As to your guys' advice, thanks! I think that I've been splitting up my CSS across too many different files haha, it's made it hard to change something without breaking something else. TBH I might just rehaul my whole file management system, as I'm sure that's causing a lot of the issues I'm facing.
On the topic of comments, I really appreciate both of yall's advice! Using comments as a way to communicate reasoning to future me and leave Easter Eggs? Awesome

Thanks!!! Any more advice is also greatly appreciated!!

[Adam]

Oh!  Might be worth mentioning: you can make comments in the CSS files, too!

My main CSS file is split into different sections, using comments as "headers" of sorts:

Code

/* General Layout */
(All the layout related stuff goes here)

/* Table Styles */
(All my table stuff goes here)

/* Input and Forms */
(All my styling for forms and input stuff goes here)  

I think I'd actually like to break some of it off into separate files, but for now it's just one big file using comments for some semblance of organization.   

[armxnd.io]

It's funny reading this because I have been actually questioning the opposite. I have made so many comments in my code just to try to keep track of everything, I've started to wonder if it's too much.

Honestly it's whatever helps you!! And like mentioned, little easter eggs are always cute to find when sifting through somebody's code.

I used to just put major section indicator comments, but lately I've started just getting in the habit of labeling almost everything just because when scrolling through hundreds of lines it's a little easier. Might end up cleaning it up later, but when it's all just one big mass I get overwhelmed...  until I realize I can just press ctrl+F