CodeX
Published in

CodeX

We Need HTML

“If software engineering is in demand, why is it so hard to center a <div>?”

Photo by Pankaj Patel on Unsplash. Oh wow, HTML tags. Oh wow, we are so legit

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…

At the bottom of this post, I will show you a fantastic parody of this video

Here, I found a pretty good FreeCodeCamp Medium post called, “Learn HTML in 5 Minutes.” The analogy they go with is that HTML is the skeleton, CSS is the skin, and JavaScript is the brains. CORGICorporation is brainless.

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.

Wait, what?

  • 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

Source: https://k07015.site.kiwanis.org

Back to the real world. It would be very beneficial to keep reading through the Codecademy for HTML and add to VanillaCorgi, but I think it may be more beneficial to go back to existing projects. CorgiPomodoro is just vanilla JavaScript, but just from the tiny bit of knowledge I gained today I now know that its use of the <center> tag is bad practice because center is deprecated. I think the best way to improve on that site is simply to redo all the HTML/CSS from the ground up. The JavaScript can probably remain the same.

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!

Closing Thoughts

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

gotcha! wireframes and the power of intuitively grasping css.

Distributed Computing for Beginners

Originally written on the That's a Bug blog.

The Ancient Egyptian Scribe

Difference between a struct and a class in Swift.

Cairo — Welcome On Board

New features updated in TestFlight

Presale

Configuring Apache web-server and python on Docker Container

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Evan SooHoo

Evan SooHoo

A software engineer who writes about software engineering. Shocking, I know.

More from Medium

Why Typescript Won’t Save Your Project

Leaky Abstraction — What Is It?

A Seasoned Security Specialist Reviewed My Code. These 3 Lessons Proved to be Invaluable.

Structural Control Flow with Object-Oriented Programming (Part 2)