#image_title
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
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.
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.
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.
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 and .
This is underlined text using the HTML u tag.
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.
Basic HTML content
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.
Content
Here, href contains the destination file that you will be directed to when you click Content, which is the anchor text.
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 , which you’ll find in HTML. Basically, it tells the browser to render a particular text bold. While is still available in HTML5, you can achieve the results with . When you use , 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 and.
For more on the many features that HTML5 offers, read this article.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
To include the CSS file, place the following line in the of the webpage.
Meanwhile, for JavaScript, include the following line of code in the tag:
Depending on the use cases, you can also place the JavaScript in the , but for performance, I’d suggest using the async or defer attribute.
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.
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.
When I started in content marketing in 2013, my digital marketing analytics strategy was refreshing…
Whenever I work on branding with companies, I see everyone light up about the tactics.…
There’s a challenge brewing for businesses everywhere. Content is becoming virtually indistinguishable online, and it…
There’s a challenge brewing for businesses everywhere. Content is becoming virtually indistinguishable online, and it…
Social media SEO is a hot topic right now, as it should be. Conversations around…
When I set out to build an email list from scratch for MarketingIdeas.com, I didn’t…