Before anything else, go read this webzine about making a webpage from scratch.
It explains a bunch of important stuff right up front and real fast, and in a better order than anywhere else I've seen. I'm a little in love with the authors, now that I've looked around at other introductions. They gave me some good foundations before I knew I had them.
My fairly raw and unfiltered work going through tutorials.
I'm learning to make this website as I go, working from basics up. This page isn't for content per se, it's more a demonstration (for myself) of what I can do. Hopefully it's helpful to you as well, but the purpose of this site is forcing me to demonstrate for myself understanding by making a reference site.
I'm learning to code by working through the tutorial at
Interneting is Hard.
It's got excellent diagrams and images that illustrate how things connect to each other.
I dislike make-work, which “follow along with the steps” sometimes feels like.
The tutorial also sometimes tells you to do the wrong thing, to demonstrate why it's bad.
This irritates me, since I can see it's the wrong thing to do, but still have to follow along before the tutorial tells me the right way to do things.
Walking someone into a ditch as a joke or “teaching technique” pisses me off and teaches me not to trust you.
I hated science “labs” in ˜high school because it wasn't acutally science: there was no exploration, formation of ideas, etc., it was just learning to use lab equiptment and then practice following the directions. Which is important, and writing clear directions so that tests can be repeated to prove their findings is an additional skill, but not one that was taught directly. But not the part of science that interested me enough to make slogging through repitition worth it.
It's also intended for web designers, whereas I'm approaching this as a digital gardener. This is exclusively a hobby/passion project. While yes, these skills do transfer, I intend to be the one making design choices and in control of my website without outside consultation. I might use templates and be inspired by others' ideas and work, but only if I understand what I'm doing (and it's licensed for reuse).
So I'm going to have what I do public and hopefully a bit useful, if anyone should see it and also be in the postion I am right now, of not really knowing how code works. I absolutely recommend going to their site, which is an actual tutorial, but since I'm following the directions anyways, I'm pretending that this page can be useful as well. Try right clicking and opening the "inspector" thingy from developer tools to see what I'm up to.
Form follows function. The medium is the message. Why isn't graphic design your passion as well?
I like having some idea of what I'm making; when I'm writing it's notes for myself, or theoretically an essay or a book. But what does a website look like? What am I making, how does it really work? These and other meta questions just Happen to me when I learn something, and they shape how I think information should be presented in an explanation. I'm not saying this is novel (I literally quoted a bunch of common sayings at the start of this section) and I most certainly don't know anything useful to add to explaining html. But I can structure things in a way that makes sense to me, both for my own future reference and to help anyone in a similar situation to mine. Also, explaining something you're learning is a fantastic way to learn, internalize, practice, and double-check that you know something.
For example, I think the late chapter on semantic html should've happened much sooner, before the CSS or at the same time as the CSS Selectors chapter. Hence why I start talking about it as soon as I can. And even before starting the tutorial, I already skipped to the last chapter, about web typography, to read the bits relevant to putting typography ON the web; I enjoy thinking about typography on the page, so while this won't teach me about what web typography should LOOK like, it does tell me how to do it. So I shifted just that information into my hello style folder.