Do you need to learn HTML, CSS, and JavaScript in web design when you can easily create websites with AI-powered tools? That’s a question that stopped me in the tracks because there’s no easy answer.
Still, for someone whose first taste of web design was with Macromedia Dreamweaver, I’ll say it helps to know how websites are put together.
Even if you’re creating landing pages with advanced tools like HubSpot’s AI website generator, you never know when you’ll need to manually change the font, layout, or animate a particular web element. And knowing the web fundamentals — specifically HTML, CSS, and JavaScript — definitely helps.
In this guide, I’ll walk you through each of them, explaining how each web technology works and why it’s important for developing modern websites.
Table of Contents
HTML, CSS, and JavaScript at a Glance
Almost every modern website uses HTML, CSS, and JavaScript. The fact that you’re able to read this blog, presented in an aesthetically pleasing layout, and see a slide-in pop-up after scrolling to a certain depth is due to all three web technologies.
The best way to understand each of them is to use the house analogy.
- HTML provides structure to a website, just like how beams and pillars support a house.
- CSS beautifies an otherwise plain web page, much like paints and wallpapers enhance the beauty of a house.
- JavaScript allows users to interact with a website by adding behind-the-scenes functionality. It’s like adding plumbing, electricity, and internet to a house.
If you’re not familiar with coding, they might look similar and confusing. But when you’re trained to look into the details, or specifically the syntax and semantics of each, you’ll be able to differentiate them.
What is HTML?
HTML stands for HyperText Markup Language. It structures a web page into logical parts so the web browser knows where the header, body, paragraphs, tables, images, and other elements are. For example, these are common elements that you can specifically state in an HTML document.
- <head> contains metadata of the web page.
- <body> consists of visible content that users can see.
- <h1> the heading with the largest font size.
- <p> starts a paragraph.
- <b> bolds the text.
How does HTML work?
When you visit a webpage, the browser loads the associated HTML document from the web server. An HTML document organizes web content with a series of HTML tags. Then, the browser creates a Document Object Model (DOM), which it uses to understand how various web elements relate to each other. You can think of DOM as a building blueprint that explains a house’s structure.
Although HTML is not a programming language, I appreciate how it categorizes web elements with standard conventions. For example, if you want to underline a sentence, you mark it with <u> and </u>.
<p>This is <u>underlined text</u> using the HTML u tag.</p>
Just like how an architect uses a blueprint to construct a house, a web browser uses the HTML file to render the web content’s structure. Whether a text is a heading, paragraph, or belongs to a numbered list, it’s all clearly stated in the HTML file.
Here’s what the HTML structure looks like for a simple dialog box.
<div class=“demo-box”>
<h3>Hello World</h3>
<p>Basic HTML content</p>
<button>Click me</button>
</div>
You can copy the markup above, paste it into a text editor, and save it as an .html file. Then, open it in a browser and you’ll see a simple, plain web page like this. While you won’t see the HTML markup on the browser, they’re helpful for the browser to map information in ways the web designer intended.
Another important feature of HTML is that you can add attributes to the HTML elements. For example, if you want to turn a text into a hyperlink, you can add an attribute that describes the destination page.
<a href=“info.html”>Content</a>
Here, href contains the destination file that you will be directed to when you click Content, which is the anchor text.
Understanding HTML5 in Modern Web Development
The first version of HTML was invented in 1991. Since then, HTML has gone through several major revisions. Today, many modern websites use HTML5, which is more flexible and supports features that modern web development needs.
For example, HTML5 provides semantic tags that better describe specific web elements. Let’s take the <b>, which you’ll find in HTML. Basically, it tells the browser to render a particular text bold. While <b> is still available in HTML5, you can achieve the results with <strong>. When you use <strong>, you’re also telling the browser the text is significantly important, which is helpful for assistive technologies.
HTML5 also provides better support for audio and video embedding. Remember the days when you had to download Flash to render videos on websites? With HTML5, you can embed videos with tags like <audio> and<video>.
For more on the many features that HTML5 offers, read this article.
What is CSS?
Cascading Style Sheets (CSS) is a rule-based language that lets you create an aesthetically pleasing webpage. You can change how every web element looks by applying CSS to override the browser’s default style. For example, if you want a different font, background colors, or margin size, you can write CSS code for the HTML document you created.
How does CSS work?
CSS follows a standardized syntax, which, in my opinion, even for non-coders, is easy to follow. Basically, you write CSS code by specifying the selector and declaration.
- Selector is the web element you want to modify. For example, a heading can be a selector.
- A declaration is the new properties that you want to assign to the web element. You use a { } pair to list the declaration, which consists of a property-value pair.
Let’s take the CSS code below as an example.
I’ve added several changes that override the original element’s style, including the background color, text color, and the padding. And here’s what the dialog box looks like with the CSS code.
Prettier, isn’t it?
But that’s not all. You can style web elements at different levels by placing the CSS code in different parts of your website.
- Inline: Write the CSS code within the HTML element using the <style> attribute to limit the changes to one specific web element.
- Local: Place the CSS within the HTML file, usually in the header, to apply style changes for the entire web page.
- Global: Create a separate CSS file and link to it from your website’s header to enable global changes for the entire website.
For example, I can use a different font, color, and margin for landing pages by using local CSS without changing the default style for blog articles.
Responsive Web Design With CSS
CSS isn’t only for giving your website a beautiful facelift. It’s also important for enabling responsive design. CSS allows the browser to automatically adjust web elements, including font size, layout, and margin, according to the screen size.
I remember the days when smartphones were introduced. Back then, many websites looked awkward on small screens because responsive design was still in its infancy. These days, the browser can apply different styles based on the device you’re using in a method called CSS media queries. Essentially, CSS media queries define distinct sets of attributes for various screen sizes, including desktop, tablet, and mobile devices.
Another CSS technique that gives you flexibility is to use relative instead of absolute scale when declaring properties.
For example, instead of stating width: 200 px, I use width:70% so the browser can adjust the web element’s width accordingly. Besides %, you can also use relative units like em, rem, and vw with CSS to create responsive web layouts.
What is JavaScript?
JavaScript is a programming language that web developers use to add functions, animation, and integration into websites. It turns a plain, read-only web page into one that users can interact with. For example, it allows you to drag and drop files into a placeholder and view the upload progress in real time.
Since JavaScript was introduced, it has become a core technology that makes a website “livelier.” The automatic scrolling carousel, perfectly-timed pop-in dialogs, built-in rate calculator functions — basically anything that isn’t static is powered mostly by JavaScript.
That said, JavaScript is more than animating objects in modern web development. It’s also a critical technology that performs many intelligent backend services. For example, websites use JavaScript to send customer information submitted in a form to the backend server, which is later stored in a database.
How does JavaScript work?
JavaScript, like many programming languages, has its own rules and syntax. If you share a similar background with me in object-oriented languages like C#, Java, or Python, JavaScript will look familiar.
Initially, JavaScript was a client-side scripting language, which means it supports developing user-facing websites. These days, developers use JavaScript for both client and backend development. When you use JavaScript for client-side functions, the browser retrieves the JavaScript file from the server and runs the code in real time.
Let’s revisit the same example I used to explain HTML and CSS. If you click the button on your webpage, nothing happens. The reason is that there isn’t a “code” assigned to the button. With JavaScript, you can add a function to the button.
For example, what happens if I add the following JavaScript code to the button?
The result? You will see the button’s text changed to Clicked! and the dialog’s orientation shifted after you click it.
While JavaScript used to be associated with animating web objects, its role has significantly evolved. Now, JavaScript can also run backend functions. For example, you can create a function that automatically refreshes marketing analytics in real time from your CRM database. (I won’t be showing the entire example here because it takes more than a few lines of script to do that. Also, it’s better to use HubSpot Marketing Analytics if that’s what you want to do!)
Like CSS, you can include JavaScript inline, locally, or create a separate file.
Pro tip: Download my example HTML file here, which contains the CSS and JavaScript implementations. However, in actual projects, it’s better to store HTML, CSS, and JavaScript separately. Spending 10 years in application development taught me not to mix the user interface and the underlying function code together.
JavaScript and API Integration
An application programming interface (API) is a method that allows multiple software components, including web services, to reliably exchange data. Developers use an API to expose functions to the public, so you don’t have to build them from scratch. Instead, you call the API from your website to access those services.
Because JavaScript is popular for web design, you can use the script to access many APIs. And this includes browser APIs and third-party APIs.
- Browser APIs are services that are built onto the web browser itself. For example, you can access geolocation data, control audio volume, and capture images from your camera with browser APIs.
- Third-party APIs let you integrate external functions into your website. For example, you can stream live video to Facebook, access HubSpot CRM data, and use Google Maps with the APIs that these platforms provide.
Let’s check out the JavaScript below. It creates a Google Maps object with the google.maps.Map() constructor. A constructor is code that creates a new object that mimics the original blueprint. In this case, it creates the Google Map object.
Then, you can use API constructors like google.maps.Geocoder(), google.maps.Marker() and google.maps.InfoWindow() by including them in your JavaScript code.
Below is how I use the google.maps.Marker() API to mark a position on the map.
How to Use HTML, CSS, and JavaScript Together for Web Design
So far, I’ve clarified the roles of each scripting and programming language. The question now lies in combining them together so that you have a beautiful, functional website with an organized codebase.
If you’re using web development tools like HubSpot’s website builder, you don’t need to worry about unifying, organizing, and maintaining the files. The tool does the heavy lifting so you can focus on creating a website your customers love.
However, if you decide to build your sites manually, you’ll need to create separate HTML, CSS, and JavaScript files.
Typically, the project folder of a single-page website looks like this.
- Index.html
- Style.css
- Script.js
To include the CSS file, place the following line in the <Head> of the webpage.
<link rel=“stylesheet” href=“style.css”>
Meanwhile, for JavaScript, include the following line of code in the <Body> tag:
<script src=”https://blog.hubspot.com/marketing/script.js“></script>
Depending on the use cases, you can also place the JavaScript in the <Head>, but for performance, I’d suggest using the async or defer attribute.
<script src=”https://blog.hubspot.com/marketing/script.js” defer ></script>
Pro tip: When building websites, I can be quite obsessive in keeping code maintainable, readable, and reusable. That’s why I don’t put all the HTML, CSS, and JavaScript code in a single file.
Design with HTML, CSS, and JavaScript.
Now, you’ve learned the basics of HTML, CSS, and JavaScript. They’re core technologies that drive modern websites. And they do more than create beautiful sites – they also enable complex functions that enhance everything from website interactions to business transactions.
To master HTML, CSS, and JavaScript in web design, you’ll need to invest time, resources, and effort. But even with basic knowledge, you can still do wonders in your web design, provided that you’re using web development tools that bring them together.
Unfortunately, we don’t render other fonts on the blog, so if you can make commands or tags in bold, that works fine!
Editor’s note: This post was originally published in November 2018 and has been updated for comprehensiveness.