We Need HTML
“If software engineering is in demand, why is it so hard to center a <div>?”
One of the people (Javier Alvarado) I met at a FreeCodeCamp meetup launched a paid tutorial website called SimpleDev — I have not checked out the HTML section, but he gave a short talk on it. One of the things I learned about was the Live Preview extension in VSCode; I can’t get it to work for Vue.js, but it does work fine for your typical index.html.
Every programmer seems to love mocking HTML, so much so that a comic on Reddit used HTML “coders” as the punchline with a joke so specific, I thought maybe they were referencing an obscure HTTP status code instead of simply making fun of people who say they “code in HTML.” HTML is not technically a programming language, but it is still completely necessary. I feel that we skipped some steps. First, we were learning how to use npm. Then, we were learning how to use Vuetify. The next thing we knew, we were dealing with things like Vuex and promises before ever really learning the basics of HTML.
Last week I wrote about promises, async/await, and REST APIs. Maybe I should have started here, with HTML. I still want to start a series specifically about Splunk, so stay tuned for that (hopefully two weeks from today), but there is a lot of ground to cover in frontend world.
Begin at the Beginning
In the beginning, Tim Berners Lee created the protocol and the markup language…
Had this been a programming language tutorial, we probably would have opened up repl.it, started with “hello world,” then talked about functions. From there we could go into classes, if the language used those, and then things like data structures…if the language used those. HTML is, in my opinion, fundamentally different in the sense that topics do not really build on each other in the same way. Rather, it has a huge number of tags, and the tags are often unrelated and do different things like the spells characters memorize in Harry Potter.
- h1: Heading tag. There are six, with h1 serving as the largest. In HTML, you use an opening tag and a closing tag
- p: Paragraph tag
- head: Head tag
- body: Body tag
I know, that was very helpful. Glad I could be of service (a better, more comprehensive resource).
I threw something new up on GitHub. The project is called “VanillaCorgis,” but there really is not a whole lot there. This file is called index.html. This file uses h1 as its heading, it uses p for each individual paragraph, and it features incredible poetry that should win me the Pulitzer prize.
Do poets win that?
So yeah, that is pretty much it. We could easily save this onto Github pages because no custom backend is necessary, and the format is perfect.
Wait…no it’s not.
First of all, I do not really like the spacing. This guy on Medium helps. Second, I really want to center the <div>. Or so I thought. Actually, this apparently is not the common “how to center a div” problem. This is a “how to center text within a div” problem.
This needed a little bit of CSS. Every <p> tag is now wrapped in a <div>, which is a tag for separating components. The aforementioned <div> used both center and adjust-line-height, in the CSS file, to reduce the space between each paragraph and to text-align the poetry content itself.
Great. Amazing. This is boring.
Moving On From This
If you have visited the Citrus Heights Kiwanis website lately, you will notice that the Facebook integration stopped working, so the right is just an empty feed. If you think this is an issue, shut up. The website is perfect, it cannot possibly be improved, and the Facebook issue may or may not relate to my weird habit of trying to disable Facebook and then caving and getting back on to check on…never mind.
Speaking of improving on the website, the thing on the top left is supposed to be font awesome icons. What gives? Well, if you inspect element, you will notice that the fa does not appear at all. We understand classes now, since we understand CSS. In just this tiny bit of “coding,” we now have a much better idea how real websites work!