{"id":3129,"date":"2025-09-11T11:00:00","date_gmt":"2025-09-11T11:00:00","guid":{"rendered":"http:\/\/www.zoomlavilin.com\/?p=3129"},"modified":"2025-09-11T13:10:24","modified_gmt":"2025-09-11T13:10:24","slug":"how-html-css-and-javascript-work-together-in-web-design","status":"publish","type":"post","link":"http:\/\/www.zoomlavilin.com\/index.php\/2025\/09\/11\/how-html-css-and-javascript-work-together-in-web-design\/","title":{"rendered":"How HTML, CSS, and JavaScript work together in web design"},"content":{"rendered":"
Do you need to learn HTML, CSS, and JavaScript in web design when you can easily create websites with AI-powered tools? That\u2019s a question that stopped me in the tracks because there\u2019s no easy answer.<\/p>\n
Still, for someone whose first taste of web design was with Macromedia Dreamweaver, I\u2019ll say it helps to know how websites are put together.<\/p>\n Even if you\u2019re creating landing pages with advanced tools like HubSpot\u2019s AI website generator<\/a>, you never know when you\u2019ll need to manually change the font, layout, or animate a particular web element. And knowing the web fundamentals \u2014 specifically HTML, CSS, and JavaScript \u2014 definitely helps.<\/p>\n In this guide, I\u2019ll walk you through each of them, explaining how each web technology works and why it\u2019s important for developing modern websites.<\/p>\n Table of Contents<\/p>\n <\/a> <\/p>\n Almost every modern website uses HTML, CSS, and JavaScript. The fact that you\u2019re 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.<\/p>\n The best way to understand each of them is to use the house analogy.<\/p>\n If you\u2019re not familiar with coding, they might look similar and confusing. But when you\u2019re trained to look into the details, or specifically the syntax and semantics of each, you\u2019ll be able to differentiate them.<\/p>\n <\/a> <\/p>\n 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.<\/p>\n 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\u2019s structure.<\/p>\n 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><\/em> and <\/u><\/em>.<\/p>\n <p>This is <u>underlined text<\/u> using the HTML u tag.<\/p><\/strong><\/p>\n Just like how an architect uses a blueprint to construct a house, a web browser uses the HTML file to render the web content\u2019s structure. Whether a text is a heading, paragraph, or belongs to a numbered list, it\u2019s all clearly stated in the HTML file.<\/p>\n Here\u2019s what the HTML structure looks like for a simple dialog box.<\/p>\n <div class=\u201cdemo-box\u201d><\/strong><\/p>\n <h3>Hello World<\/h3><\/strong><\/p>\n <p>Basic HTML content<\/p><\/strong><\/p>\n <button>Click me<\/button><\/strong><\/p>\n <\/div><\/strong><\/p>\n 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\u2019ll see a simple, plain web page like this. While you won\u2019t see the HTML markup on the browser, they\u2019re helpful for the browser to map information in ways the web designer intended.<\/p>\n 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.<\/p>\n <a href=\u201cinfo.html\u201d>Content<\/a><\/strong><\/p>\n Here, href<\/strong> contains the destination file that you will be directed to when you click Content, which is the anchor text.<\/p>\n The first version of HTML was invented in 1991<\/a>. 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.<\/p>\n For example, HTML5 provides semantic tags that better describe specific web elements. Let\u2019s take the <b><\/strong>, which you\u2019ll find in HTML. Basically, it tells the browser to render a particular text bold. While <b> <\/strong>is still available in HTML5, you can achieve the results with <strong>.<\/strong> When you use <strong><\/strong>, you\u2019re also telling the browser the text is significantly important, which is helpful for assistive technologies.<\/p>\n 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><\/strong> and<video><\/strong>.<\/p>\n For more on the many features that HTML5 offers, read this article<\/a>.<\/p>\n <\/a> <\/p>\n 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\u2019s 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.<\/p>\n 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.<\/p>\n Let\u2019s take the CSS code below as an example.<\/p>\n I\u2019ve added several changes that override the original element\u2019s style, including the background color, text color, and the padding. And here\u2019s what the dialog box looks like with the CSS code.<\/p>\n Prettier, isn\u2019t it?<\/p>\n But that\u2019s not all. You can style web elements at different levels by placing the CSS code in different parts of your website.<\/p>\n 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.<\/p>\n CSS isn\u2019t only for giving your website a beautiful facelift. It\u2019s also important for enabling responsive design<\/a>. CSS allows the browser to automatically adjust web elements, including font size, layout, and margin, according to the screen size.<\/p>\n 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\u2019re 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.<\/p>\n Another CSS technique that gives you flexibility is to use relative instead of absolute scale when declaring properties.<\/p>\n For example, instead of stating width: 200 px<\/strong>, I use width:70%<\/strong> so the browser can adjust the web element\u2019s width accordingly. Besides %<\/strong>, you can also use relative units like em<\/strong>, rem<\/strong>, and vw<\/strong> with CSS to create responsive web layouts.<\/p>\n <\/a> <\/p>\n 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.<\/p>\n Since JavaScript was introduced, it has become a core technology that makes a website \u201clivelier.\u201d The automatic scrolling carousel, perfectly-timed pop-in dialogs, built-in rate calculator functions \u2014 basically anything that isn\u2019t static is powered mostly by JavaScript.<\/p>\n That said, JavaScript is more than animating objects in modern web development. It\u2019s 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Let\u2019s 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\u2019t a \u201ccode\u201d assigned to the button. With JavaScript, you can add a function to the button.<\/p>\n For example, what happens if I add the following JavaScript code to the button?<\/p>\n The result? You will see the button\u2019s text changed to Clicked!<\/em> and the dialog\u2019s orientation shifted after you click it.<\/p>\n 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\u2019t be showing the entire example here because it takes more than a few lines of script to do that. Also, it\u2019s better to use HubSpot Marketing Analytics<\/a> if that\u2019s what you want to do!)<\/p>\n Like CSS, you can include JavaScript inline, locally, or create a separate file.<\/p>\n Pro tip:<\/strong> Download my example HTML file here<\/a>, which contains the CSS and JavaScript implementations. However, in actual projects, it\u2019s 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.<\/p>\n An application programming interface (API)<\/a> 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\u2019t have to build them from scratch. Instead, you call the API from your website to access those services.<\/p>\n 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.<\/p>\n Let\u2019s check out the JavaScript below. It creates a Google Maps object with the google.maps.Map()<\/strong> constructor. A constructor is code that creates a new object that mimics the original blueprint. In this case, it creates the Google Map object.<\/p>\n Then, you can use API constructors like google.maps.Geocoder()<\/strong>, google.maps.Marker()<\/strong> and google.maps.InfoWindow()<\/strong> by including them in your JavaScript code.<\/p>\n Below is how I use the google.maps.Marker()<\/strong> API to mark a position on the map.<\/p>\n<\/a><\/p>\n
\n
HTML, CSS, and JavaScript at a Glance<\/h2>\n
\n
What is HTML?<\/h2>\n
\n
How does HTML work?<\/strong><\/h3>\n
<\/p>\n
Understanding HTML5 in Modern Web Development<\/strong><\/h3>\n
What is CSS?<\/h2>\n
How does CSS work?<\/strong><\/h3>\n
\n
<\/p>\n
<\/p>\n
\n
Responsive Web Design With CSS<\/strong><\/h3>\n
What is JavaScript?<\/h2>\n
How does JavaScript work?<\/strong><\/h3>\n
<\/p>\n
<\/p>\n
JavaScript and API Integration<\/strong><\/h3>\n
\n
<\/p>\n
<\/p>\n