How HTML, CSS, & JavaScript Work (For Beginners)

Are you starting an online business but quickly find yourself in over your head with code? Well, the good news is that it’s never been easier to start a website with very little coding experience. Content management systems such as WordPress, Drupal, Wix, Squarespace, Joomla, Shopify, and many others offer visual editing tools that help you customize as you see fit. However, it never hurts to have some basic markup and coding experience. In fact, it may not only save money, but help you communicate more effectively when working with developers. With that said, here’s how HTML, CSS, and JavaScript work.

What is HTML?

HTML stands for Hyper Text Markup Language and can be considered the structure of your website. Elements are the building blocks of HTML pages and take the form of headers, paragraphs, tables, etc. These elements are blocked out using specific “tags” enclosed by the less than and greater than signs. For example, here’s the breakdown of an “H1” tag, which is used for important headings.

 

While there are a number of HTML tags, you will most likely only need to become familiar with a small number of them. I would suggest becoming familiar with a few of the following:

• <div>: div tags define division or a section/block of html
• <h1-h6>: h tags are used for section headings, h1 being the most important
• <p>: p tags are used for paragraphs, simple as that
• <a>: a, or anchor tags, are used to create hyperlinks
• <img>: img tags are used to include pictures in your content

Now, these are just a few elements to remember, but there are plenty more. Thankfully, you don’t need to memorize every single one. The important thing to remember is that HTML is responsible for page structure and you can reference which HTML tag is needed for your specific case. To help you better visualize the role of HTML, here’s a screenshot of Succeed at Scale strictly using HTML. It’s not pretty, but that’s where CSS comes in and what we’ll cover next.

 

What is CSS?

CSS stands for Cascading Style Sheets and gives styling to your webpage, directing how HTML elements are to be displayed on screen. Consider CSS the paint and decoration of your website. It styles elements such as fonts, colors, alignment, placement, spacing, shadows, animations, and a number of others. For example, let’s give some style to the h1 tag above using css.

 

Now, there are a huge number of CSS styles and it will take time to discover and understand how they all work. However, you don’t need to memorize everything and will likely only use a small portion of what’s available. Personally, I’ve come across enough CSS to understand what’s available to me, but have to Google formatting and other uncertainties at times. The important thing is to understand how it works and what it can do for your website/brand identity.

What is JavaScript?

JavaScript breathes life into your website by adding interactivity. Have you ever encountered a popup? This is JavaScript at work. Take my subscribe form for example, when clicked, a subscribe form is triggered and presented using JavaScript (feel free to subscribe!). Another example is when submitting an online form, you receive an immediate message saying, “message sent!”… or something along those lines.

HTML and CSS are fairly simple, but JavaScript is a bit more challenging. Scripts are triggered by certain actions being taken by the user and you need to understand how to capture that action and trigger a reaction. Here’s an example of a very simple alert box with an h1 heading(the JavaScript enclosed in the “script” tags).

<h1>JavaScript Alert</h1>

<button onclick=”myFunction()”>Try it</button>

<script>
function myFunction() {
alert(“I am an alert box!”);
}
</script>

Now, at this point I’m sure your eyes have glazed over, but it’s really not that bad! It’s basically saying, when the button is clicked, it will trigger the “myFunction” script that results in a popup alert box. Easy right?! Well, easier said than done I’m sure, but what’s important to understand here is what JavaScript does.

HTML, CSS, and JavaScript and Your Business

If you’ve made it this far through the article, I commend you! Many people are frightened at the mention of code, but having a solid understanding will be of benefit. You will have better communication with your developers and possibly gain the knowledge to make adjustments yourself.

In my experience, I’ve found knowing HTML and CSS to be an invaluable skillset. I can make adjustments and solve problems without the need for a developer. I’ve found JavaScript to be fascinating and enjoyed learning it to a degree, but don’t find much use for it in my day to day tasks.

So, as an aspiring online business owner, you may want to spend some time becoming familiar with code. If interested, I highly recommend codecademy.com. It’s completely free and I guarantee you will learn a ton while having fun. I’ve used it a number of times to brush up on new code and haven’t come across a free option near as good. If you’re looking to get your website started, I also recommend Bluehost as your web host as I’ve been with them for years and they have been awesome!

Well, what are your thoughts, does this help with your understanding of code? Clear as mud perhaps? Leave any questions or comments below!