First things first, you need to understand the different files in a Webpage. You have the 3 coding languages and that's all you're going to need to remember. Each one of these languages will be made into files and can be used for different parts of your webpage. Also if you dont have a platform to edit code with, I'd recommend VSCode because it is very useful :D
And if you do use VSCode, I'd recommend getting some of the extensions for HTML. Use whatever you want, the following screenshots are some that I use personally.
First I am going to explain each language briefly. (Click the dropwdown to view)
I've mentioned this a couple of other times but the HTML of your webpage is your foundation, without it all crumbles. It will hold the vital information needed for the browsers as well as hold the smaller things like the text you're reading now.
The CSS of your webpage is the paint on top of the HTML. The name CSS stands for "Cascading Style Sheets" and it will provide the positioning, the colors, and the alignment of your text and images.
jQuery is the code that will update while your code is running. So if you want a dropdown to show on a button click you would use jQuery to display the hidden code.
Like I had stated with the HTML being the foundation of the page, your CSS and jQuery page will both link to your HTML page to begin the webpage. The example on the right is a preview of how your file system would look. Your CSS and jQuery dont require setup at all, but your HTML does require quite a bit, this is why I recommend to have a template yourself so you can copy and paste a file and never have to worry about this process again!
I made a template for you to download up above and preview but now it's time for me to explain the tedious task of setting up your HTML page.
If you have VSCode, you can type a ! on a empty .html page and it will give you some starter code. In the < head > tag you can change the text within the < title > tag. You'll link your CSS here in the < head > tag here as well using the following < link href="styles.css" rel="stylesheet" type="text/css" / > You'll do something similar for your jQuery but because your using something that HTML is not used to, you'll need to import the jQuery form as well. < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" > < /script > and then link your jQuery code < script src="main.js" >< /script >
Sorry if the text goes off the screen, I'm not gonna fix it :P
Finally, once you have everything setup you can open your index.html page in your browser of your choice and this will be the first page of your webpage.
Quick Note: Your code will only update when you reload the webpage. The only code that can be changed while the page is open is a small amount of css and basically everything jQuery.