Do you have to learn HTML, CSS and JavaScript in web design if you can simply create websites with AI-driven tools? That is a question that stopped me in the tracks because there is no simple answer.
For someone whose first taste of web design was at Macromedia Dreamweaver, I will say that it helps to know how websites are put together.
Even if you create the target pages with extended tools like how Drift Kings Medias Ai website generatorYou never know when you have to change the font, layout or the animation of a certain web element manually. And to know the fundamental data from Web – especially HTML, CSS and JavaScript – definitely helps.
In this guide, I will guide you through each of you and explain how any web technology works and why it is important for the development of 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 are able to read this blog, which is presented in an aesthetically appealing layout, and after scrolling into a certain depth, a slide-in-popup is due to all three web technologies.
The best way to understand each of them is to use the house analogy.
- HTML offers structure for a website, just like rays and columns support a house.
- CSS beautifies an otherwise simple website, similar to colors and background images improve the beauty of a house.
- With JavaScript, users can interact with a website by adding the functionality behind the scenes. It is like adding a house to a house sanitary, electricity and the Internet.
If you are not familiar with the coding, you may look similar and confusing. However, if you are trained to examine the details or in particular the syntax and semantics of the individual, you can differentiate them.
What is HTML?
HTML stands for Hypertext Markup Language. It structures a website into logical parts so that the web browser knows where the header, body, paragraphs, tables, pictures and other elements are located. These are, for example, common elements that you can specially indicate in an HTML document.
- Contains metadata of the website.
- consists of visible content that users can see.
- The heading with the largest font size.
- Starts a paragraph.
- Fat the text.
How does HTML work?
When you visit a website, the browser loads the associated HTML document from the web server. An HTML document organizes web content with a number of HTML tags. The browser then creates a document object model (DOM) that understands how different web elements are connected to each other. You can imagine Dom as a blueprint that explains the structure of a house.
Although HTML is not a programming language, I appreciate how to categorize web elements with standard conventions. For example, if you want to underline a sentence, mark it with And .
That is underlined text Use the HTML U -Tags.
Just like an architect uses a blueprint to build a house, a web browser uses the HTML file to render the structure of the web content. Regardless of whether it is a text that is a paragraph or belongs to a numbered list, everything is clearly stated in the HTML file.
This is what the HTML structure looks like for a simple dialog box.
Hello World
Basic HTML content
You can copy the above markup, insert it into a text editor and save it as a .html file. Then open it in a browser and you will see a simple, simple website like this. While you do not see the HTML markup in the browser, you are helpful by the fact that the browser can map information in a way that 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 transform a text into a hyperlink, you can add an attribute to describe the target page.
Here, href Contains the target file to rely on when you click on the content. This is the anchor text.
Understand HTML5 in modern web development
The first version of HTML was invented in 1991. Since then, HTML has undergone several important revisions. Nowadays, many modern websites use HTML5, which is more flexible and supports functions that need modern web development.
For example, HTML5 offers semantic tags that better describe certain web elements. Let us take that what you will find in HTML. Basically, the browser calls on to make a certain text fat. While is still available in HTML5, you can achieve the results . If you use They also inform the browser that the text is significantly important, which is helpful for assistive technologies.
HTML5 also offers better support for audio and video embeds. Do you remember the days when you had to download Flash to render videos on websites? With HTML5 you can embed videos with tags such as And.
Read more information about the many functions that HTML5 offers.
What is CSS?
Cascading Style Sheets (CSS) is a rule -based language with which you can create an aesthetically appealing website. You can change what any web element looks like by using CSS to overwrite the standard style of the browser. For example, if you want a different font, background colors or edge size, you can write CSS code for the HTML document you have created.
How does CSS work?
CSS follows a standardized syntax, which in my opinion is easy to follow for non-kodern. Basically, they write CSS code by specifying the selector and declaration.
- Selector is the web element you want to change. For example, a heading can be a selector.
- One explanation is the new properties that you want to assign to the web element. You use A {} Couple to list the explanation that consists of a real estate pair.
Let’s take the CSS code below as an example.
I have added several changes that overwrite the style of the original element, including the background color, text color and the padding. And this is how the dialog box with the CSS code looks like.
Nice, isn’t it?
But that’s not all. You can style web elements on different levels by placing the CSS code in different parts of your website.
- In harmony: Write the CSS code in the HTML element with the element Attribute to limit the changes to a specific web element.
- Local: Place the CSS in the HTML file, usually in the header, to apply style changes for the entire website.
- Global: Create a separate CSS file and link it from the header of your website to enable global changes for the entire website.
For example, I can use a different font, color and edge for target pages by using local CSS without changing the standard style for blog items.
Responsive web design with CSS
CSS is not only to give your website a nice facelifting. It is also important for activation Responsive design. With CSS, the browser can adapt the automatic adjustment of web elements, including font size, layout and margin, according to the screen size.
I remember the days when smartphones were introduced. At that time, many websites looked uncomfortable on small screens because the reaction -fast design was still in its infancy. Nowadays, the browser can apply various styles based on the device, which you use in a method called CSS Media queries. Essentially, CSS media queries define different sets of attributes for different screen sizes, including desktop, tablet and mobile devices.
Another CSS technology that gives you flexibility is to use properties relatively instead of an absolute scale when declaring properties.
For example instead of saying Width: 200 pxI use Width: 70% In this way, the browser can adapt the width of the web element accordingly. Besides that %You can also use relative units like emPresent remAnd VW With CSS to create reaction -fast weblayouts.
What is JavaScript?
JavaScript is a programming language with which web developers add functions, animation and integration into websites. It transforms a simple, writing -protected website into one with which users can interact. For example, you can move files into a placeholder and display the upload progress in real time.
Since JavaScript has been introduced, it has become a nuclear technology that makes a website “lively”. The automatic scrolling carousel, perfectly coordinated pop-in-dialogue, built-in installment calculator functions-in reason is everything that is not static, mainly driven by JavaScript.
Nevertheless, JavaScript is more encouraged in modern web development. It is also a critical technology that performs many intelligent backend services. For example, websites use JavaScript to send customer information in a form to the backend server that is later saved in a database.
How does JavaScript work?
JavaScript, like many programming languages, has his own rules and syntax. If you share a similar background to me in object -oriented languages such as C#, Java or Python, JavaScript looks familiar.
JavaScript was initially a client -side scripting language, which means that the development of websites of user websites is supported. Nowadays, developers use JavaScript for both customer and backend development. If you use JavaScript for client-side functions, the browser calls the JavaScript file from the server and executes the code in real time.
Let us visit the same example that I used to explain HTML and CSS. If you click on the button on your website, nothing happens. The reason for this is that the button is not assigned a “code”. 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 how the text of the button is changed Click! And the alignment of the dialog has shifted after clicking the dialogue.
While JavaScript was previously associated with animating web objects, his role has developed considerably. Now JavaScript can also perform backend functions. For example, you can create a function that updates the marketing analyzes automatically in real time in your CRM database. (I will not show the entire example here, since it takes more than a few lines of script. It is also better to use Drift Kings Media marketing analysis If you want to do that!)
As with CSS, you can create JavaScript -inline in local or a separate file.
Pro tip: Download my example -html file hereWhat contains CSS and JavaScript implementations. In the actual projects, however, it is better to save HTML, CSS and JavaScript separately. I have spent 10 years in application development, I learned not to mix the user interface and the underlying function code together.
JavaScript and API integration
An application programming interface (API) is a method with which several software components, including web services, can replace data reliably. Developers use an API to make functions accessible to the public so that they do not have to build them up from scratch. Instead, call the API from your website to access these services.
Since JavaScript is popular for web design, you can use the script to access many APIs. This includes browser APIs and APIs of third-party providers.
- Browser -APIs are services that are built in the web browser themselves. For example, you can access geolocation data that control audio volume and take pictures of your camera with browser -APIS.
- With APIs with third -party providers you can integrate external functions into your website. For example, you can stream live video on Facebook, access HubSpot -crm dataAnd use Google Maps with the APIs that offer these platforms.
Let’s take a look at 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 imitates the original draft. In this case, the Google Map object is created.
Then you can use API constructors like Google.maps.Geocoder ()Present Google.maps.marker () And Google.maps.infowindow () by adding them to their JavaScript code.
Below is how I use it Google.maps.marker () API to mark a position on the map.
How to use HTML, CSS and JavaScript for web design
So far I have clarified the roles of every script and programming language. The question now is to combine them together so that they have a beautiful, functional website with an organized code base.
If you use web development tools like Drift Kings Media -website -builderYou don’t have to worry about standardizing, organizing and maintaining the files. The tool carries out strong lifting so that you can concentrate on creating a website that your customers love.
However, if you decide to create your websites manually, you must create separate HTML, CSS and JavaScript files.
As a rule, the project folder of a one -sided website looks like this.
- Index.html
- Style.css
- Script.js
To include the CSS file, place the following line in the the website.
In the meantime, add the following code line for JavaScript to the Label:
Depending on the applications, you can also place the JavaScript in the But for the performance I would propose to use them asynchronous or move Attribute.
Pro tip: When creating websites, I can be quite obsessed with maintaining code, keeping it readable and reusable. That’s why I have not included all HTML, CSS and JavaScript code in a single file.
Design with HTML, CSS and JavaScript.
Now you have learned the basics of HTML, CSS and JavaScript. They are core technologies that promote modern websites. And they create more than beautiful websites -they also enable complex functions that improve everything, from website interactions to business transactions.
To master HTML, CSS and JavaScript in web design, you have to invest time, resources and effort. But also with basic knowledge you can do miracles in your web design, provided you use web development tools that bring you together.
Unfortunately we do not make any other fonts on the blog. So if you can make commands or tags fat, it works perfectly!
Note from the publisher: This post was originally published in November 2018 and updated for completeness.