Most resources for first-time web developers seem to assume that you know how to code and that you know how a website is "physically" constructed. A special shout out should be made to Mozilla's tutorials for starting at the very bottom and assuming you don't know how to use a computer. Here’s what I learned.
This page is a living document, a first draft, and a work in progress.
a website is a collection of files, typically held on a server somewhere. Your domain name is like the flag you put up over your stack of files, and so anyone can type in the name of your website and go there and see your INDEX file. This is the home page of your website, the page that doesn't have any slashes after it in the URL. People from all over the world can connect to your website and see the files on it. Pretty cool, right?
Hey wait a second Throcky - what’s the deal with these files? What are you talking about? What? Websites are made out of PAGES. Not files.
You see, each page on your website IS a file! It’s a file that contains webpage content and instructions for how a web browser should display that content. And your browser - Firefox, Chrome, edge, opera, whatever - does the heavy lifting of looking at the file, taking instructions on how to show it to you, and then showing it to you. Webpages typically contain links to each other so that you can navigate around all the pages of a website, but there’s no reason they HAVE to. I have a handful of dead-end (dead-beginning?) pages on my website that are completely inaccessible without knowing the direct URL or going behind the scenes. (As far as I know.)
The most common files that make pages are going to be html files, which stands for HyperText Markup Language. Other “page” files can be .php, .asp, etc.. I’m not too familiar with these. They typically are used for dynamic sites, which can accept input like forms and change with user input. Think gmail or - where things change on the page without the url changing.
You can also have non-page files in your website, like images or separate bits of code that can be invoked in your html to do stuff like show images in a lightbox (href lightbox) format, or other things. One very important non-page file is going to be your stylesheet (ends with .css). More on this later.
Your hands may have to learn a slightly new muscle memory. Remember these eyebrows? >:) they are very important for coders, but they’re not always easy to reach. Don’t worry - finding them instinctively will get easier. It may be frustrating to feel like a hunt and peck typist. It’ll get easier.
Surrounding content with certain tags tells your browser what something is and how to display it.This text is inside paragraph tags, so it says to the browser - display this text as you would display a paragraph.
This is a very simple example, but everything is based around this concept. You can tag up your words to mean “this set of words should be displayed like a paragraph, and when clicked they should send the browser to THIS url” or “instead of words, please show HERE the image that can be found at THIS url, and when you’re showing that image please make sure it doesn’t ever get wider than 500 pixels wide. And if anyone clicks on it, send them to THIS url”. And that’s just the tip of the iceberg!
CSS stands for Cascading Style Sheets. When it comes to CSS you may find it useful, if you have ever played DnD, to think of the way that broader rules prevail unless there is a more specific rule. (That’s the cascading part.) According to my stylesheet, all text should be displayed in my chosen font of Courier (and if there’s nowhere to find that font, which backup to use, and if THAT font can’t be found, use THIS one...all the way back to times new roman).
SIDEBAR - If you’ve ever downloaded and installed a font on your computer, something similar applies for websites. Computers have a set of fonts that ship with the operating system, and your computer’s operating system will always have access to them. These fonts are generally referred to as “web safe”, since you can use them on a website and no one’s browser will have to download an extra font to display your site properly. My chosen font, Courier, is a web safe font. (check this) Most fonts you can purchase or download from the internet will come with restrictions on how you can use the font on your website, depending on the license you purchase.
Web development is full of bullshit nondescriptive names like this. (link post about spiders deployment and gumbies). Less and Sass are CSS preprocessors to make it easier for larger companies with complicated websites run by teams to style their big sites. Basically, you write your code in LESS or SASS’s syntax and then feed it to the processor and it turns it into CSS. It’s my opinion that you should learn CSS first. As a one-person webmaster, I don’t think there’s much need for you to learn LESS or SASS - but I could be wrong.
On most browsers, you can right click most places on a webpage and hit “view source” to view the source code. Sometimes it’ll be what they call “minified” - all the spaces will be taken out and it’ll be one whole codeblock. Impossible for a human to read, but shaves a tiny bit of size off the size of the file. Some (most) coding software and interfaces will have a built-in function to automatically format and indent all your code, saving you a lot of time and trouble. This is known as “pretty printing”.
Neocities does not have a pretty-print feature, but If you can find a site that will do it for you, it can be fun to “pretty” a modern website and take a look at the code. Due to the way that most modern sites are built, most of the time these sites are not easy to parse, even when prettified. I read an interesting blog post about this, but I can’t seem to find it. If I do I’ll update this page.
If you come across an old web 1.0 site, or a site that looks like it was handmade, I recommend popping open the “view source” tab and seeing what’s what. Sometimes you’ll find fun notes or even things that were commented out but still remain in the code. You can do it on my site too.
If you want, you can copy and paste this code into your own website. It generally doesn’t function like it should, but it’s fun to make a copy, right? Create your own. Personal. Google.
You can also use the inspector to change bits of the page you’re on. These changes won’t affect the version of the page stored on the website’s host server - in other words, you can’t change someone else’s website, you can only tweak the version of it that you’re looking at. You can change the spelling of a word or add new pictures to a page. Take a screenshot and amaze your friends! Use this trick for small mischief only.