HTML for Humans: My Attempt to Understand What Developers Actually Do

Think a website is cheap? For major companies like Apple, a custom site can run anywhere from $100,000 to $250,000 and that’s before you factor in the ongoing cost of updates, content edits, and bug fixes that send the price soaring even higher. I am no coding expert. In fact the idea of coding has always seemed more difficult than learning a foreign language. But today, on my quest to become a full-stack marketer, I’m finally dipping my toes into HTML. I’m starting with beginner courses from w3schools.com and Codecademy to see which one can actually teach someone who feels like he’s trying to decipher the Matrix every time he looks at a page of code. But before we begin our coding journey let’s take a quick look at some of the basics

Article content
Me attempting to understand a basic line of code (Credit: Warner Bros)

Overview of HTML, CSS, and JavaScript

When building the front end of a website, developers typically use three languages to create everything the visitor sees and interacts with. Those languages are:

  • HTML: HyperText Markup Language this is the most basic building block of your website, it allows you to add words and images to your page.
  • CSS: Cascading Style Sheets changes the appearance of HTML elements by adding colors, fonts, layout, spacing, and more. As my digital marketing professor Mark Staton puts it, “it’s the skin of your website.”
  • JavaScript: This allows for dynamic interaction on your webpage, think dropdown menus or popups and you got javascript.

With that quick overview out of the way, let’s do some coding.

Codecademy

As mentioned earlier, my coding experience is basically non-existent so upon opening the Codecademy introductory lesson and seeing the interface, I was pleasantly surprised. The interface is very intuitive, and it’s clear that a lot of effort went into the UX and UI design of the site. Great job, Codecademy!

Article content
Into lesson (Credit: Codecademy)

I started by following their lesson and learning how to create basic elements, like sections. You do this by typing <section> in the interface, adding any content inside it, and then closing it with </section> so it displays properly on the front end. Next, I learned how to create forms using the <form> element, along with <input> to make an active text box where users can enter information. This involved setting up an action attribute in the form to define what happens when the form is submitted, and adding a type=”text” attribute to the input to specify that it accepts text, along with a label to describe the text box (See Image below for final result).

Article content
Credit: Codecademy

W3Schools

Shortly after my session with Codecademy, I explored W3Schools introductory program and started experimenting. At first, it reminded me of an instructional site from 2015, but once I began the lessons, I found W3Schools layout and instruction to be much more helpful. Each step came with a clear guide, and every element was described in detail, making it easier to follow along.

Article content
Credit: W3Schools

It went so well in fact that I was able to code my very first webpage. I started by adding a <head> element, which creates a separate section from the main content. Inside it, I added a title by typing <title> followed by the text I wanted for my header (in this case, “Page Title”), and then closed it with </title>. Finally, I closed the head section with </head>. The <body> section followed a similar process: using <body> to mark the main content area, adding elements inside it, and closing it with </body>.

Article content
Yes I made this (Credit: W3Schools)

Now, for all those Fortune 500 CEOs reading this and seeing my website, the answer is yes, I am up for hire and no you can’t copy my site. But in all seriousness, W3Schools had a great program, laying out the lessons simply and without any clutter.

Which is better

So, which one should you use? Both have their strengths and weaknesses, and ultimately the choice is yours. Personally, I found W3Schools to be less cluttered and easier to follow, so congratulations, W3Schools!

Conclusion

While I’m nowhere near creating an enterprise-level website, or stopping bullets like Neo in The Matrix, diving into HTML has given me a new understanding on web development. As a beginner, Codecademy’s guided exercises and W3Schools clear, detailed lessons gave me a sense of how HTML works to create what users see and interact with. Personally, I found W3Schools easier to follow, but the best platform is the one that helps you learn. These lessons have shown me why developers are so valued and why even simple websites can cost thousands of dollars.

If you found this helpful and want to learn more about digital marketing strategies, check out my other posts here!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *