Foundational questions

[mindcycle]

hey there, i'm a newbie here. more about me in my introduction post.

i had made a neocities site 7 years ago (may 2, 2018), barebones because i abandoned it after one day. well now i have much greater incentive to make a proper website. i feel like it would be a good hobby for me... or maybe completely overwhelming, who knows. i want to get past the overwhelming part though by gaining a sense of mastery over it and knowing what i'm doing.

right now i have no real foundation, but the online lessons haven't really given me a broader scope overview but their teaching style is a bit lost on me and it still feels too strange. it doesn't answer what i find important about understanding the skeleton and organs a website.

i was writing out a "to do" on my newly revamped website (carrying over the floater code from the last version from 7 years ago). i started writing about where i'm lost and questions so fundamental i haven't been able to properly grasp them or feel satisfied by or gained any understanding from anyone over the years because everyone talks in detail pertaining to a particular project or specific elements but i want the general overview abstracted away from all of that because otherwise these coding languages feel like bottomless eldritch abominations. i see their many undulating tentacles but i don't grasp what they actually are meant for as a whole or what they are limited in. i need to understand this first before i can build a website with any confidence.

these are the questions that i wrote in my to-do:

• how do HTML, CSS, javascript elements depend on one another?
• in what circumstances is one needed over another? i.e. what do these individual types of coding languages generally do for a website?
• in what ways do they overlap and in what ways do they diverge?
• what are some examples/exceptions where one type of code can temporarily override another? an example i'm thinking of is specifying text color for a single line of text in HTML when the default color set in CSS? (...is that how HTML and CSS are supposed to work btw? that's what i picked up by myself.)
• questioning if i want a different site layout with every page or not and how that will play into HTML/CSS/Javascript, also how to optimize my website's code so its less of a hassle to update.
• logistics and organization of the code. how do people typically organize files? do they do it offline too, in their computer files (and what would it look like?) like, what is physically meant by these things. spill the trade secrets because i'm freaking lost here </3
• are there any free programs with interactive code building where you can see your website updated in real time? i don't want to accidentally override something when i update my neocities website. i need immediate feedback for learning

[Melooon]

how do HTML, CSS, javascript elements depend on one another?

in what circumstances is one needed over another? i.e. what do these individual types of coding languages generally do for a website?

in what ways do they overlap and in what ways do they diverge?

HTML is the bones of the site, CSS is the paint (all be it very advanced cyborg paint) and JavaScript is like the utilities being piped around the site (you can have a house with very basic utilities like a tap in the yard, or a house that has crazy advanced utilities like moving walls and TVs in mirrors).

In practicality, when you load a web page you are actually downloading a HTML file, that HTML file can contain links to CSS files and JS files (same as it has links to images and audio etc) - As the browser downloads the HTML file, it will read it top to bottom, and also download any additional files you have linked in it (like CSS and image files).

Once it has downloaded everything it will try to render it all for you! So for example, if you downloaded a CSS file, it will read the CSS file and attempt to "paint" your HTML based on what the CSS file tells it.

From this point on the explanation is a little complex, but in short, behind the scenes your browser converts the HTML from the text you write, into a set of programable virtual "objects" or the more correct term "elements", collectively known as the DOM. E.g. The <body> is an element, an <img> is an element etc. Each element has properties that can be added or modified (such as the source url of an image element, its width, its background color etc).

Elements can have three kinds of names (img, #id, .class) and you use those names to identify an element and modify its properties.

Both CSS and JavaScript use these names to modify the properties of HTML elements - they just have different focuses. CSS is focused on being fast, hard to break, and mainly for visual styling. While JavaScript is slower, very easy to break, but it allows you to do much more advanced things.

So what you see is a bunch of text files, with different syntaxes and styles - but what the browser actually sees is a big complex pile of virtual objects, each with their own properties and features. The connection between HTML, CSS and JavaScript is that they are all different methods of modifying that invisible pile of virtual objects.

what are some examples/exceptions where one type of code can temporarily override another? an example i'm thinking of is specifying text color for a single line of text in HTML when the default color set in CSS? (...is that how HTML and CSS are supposed to work btw? that's what i picked up by myself.)

HTML files are read top to bottom, left to right. What comes after will usually overwrite what came before. So if you have a <style> tag at the top of a page saying make the body text green, and a CSS file at the bottom saying make the body text blue - it will be blue.

After that CSS styles follow whats called the order of "specificity" e.g. how specific is your instruction. "Make images 100px wide" is less specific than "Make the image with id #bob 200px wide" - In this case every image would be 100px wide, except for the image with #id bob, even if you put the 100px rule after the 200px rule, because its more specific. When it comes to inline styling on html elements, those are usually the most specific of all and will overwrite your CSS rules. There is a certain art to knowing how to balance specificity when writing CSS!

So in CSS selector rules, the more specific you are, the more precedence that rule will have "#main > .top ul li" would win out over "#main ul li" ~ every CSS rule will effect the entire page, the only thing that limits it is specificity.

HTML/CSS/Javascript, also how to optimize my website's code so its less of a hassle to update

In general, you want to avoid ever repeating code, because it becomes a big hassle. JavaScript can be used to solve this, but it's not a solution I agree with because JavaScript is fragile and if it breaks it crashes completely. HTML iFrames are a more stable option for neocities sites.

how do people typically organize files?

There's a whole big thread about this one and I think a wiki article too? You can poke around for it!

are there any free programs with interactive code building where you can see your website updated in real time

This is something everyone seems to think they need  Yes you can use VSCode with the LiveEdit plugin - in my own experience I gave up on live render programs years ago because they are more hassle than they are worth, your much better off just using a tiny local webserver, editing your page and reloading it manually with cmd/ctrl-r !

Good luck 

Also HELLO, welcome to the forum   

[sparrowweaver]

Hello! I found your website through the surf. I have some answers for the question about logistics!

For editing, everyone's different obviously, but I have a folder on my hard drive with my whole website on it, like a "master copy". You can easily preview stuff locally: if you open a file that ends in ".html" in your browser, it looks like a real website even though it's totally offline. So I preview files like this while I'm editing them in the master copy (you can hit refresh to see the changes), and then I plop any changed files into my neocities dash when I want to update the actual site.

For the file organisation, here are two opposite strategies that might be useful:

1. Keep all the media in one folder, called something like "/assets", so that if you ever need to search through it, you can easily scroll through it all no matter where the files actually get used on your website. Organise this folder into subfolders based on what type of media it is, like "/assets/icons", "/assets/blog-images", whatever. This is nice if, for example, you run out of neocities storage space and need to go back and squash all your images down a bit.

2. Keep all the media close to the place it's used, so that it's easier to move or delete whole sections if you ever want to. So like if you have a blog, make a folder called "/blog", with a subfolder called "/blog/posts" for your html files and another subfolder called "/blog/blog-images" for the images inside the posts. That way if you ever reorganise your website, you can move the "/blog" folder about without breaking anything.

do whichever of these options sounds the least annoying. I've done a third, even more annoying option, which is to mix them up.

One final tip: especially if you're using a template, don't be afraid to delete things! You can always save a copy of the original template if you're afraid of accidentally deleting something important. When I was starting out, I got mega overwhelmed by all the stuff petrapixel set up, and I found that it really helped to delete a ton of the stuff that I wasn't using or didn't understand.

Feel free to email me if you ever want to talk through some code!