How to create your first website with HTML, CSS and JavaScript
Creating a website may seem like a daunting task, but it's actually a fun process that can be easily mastered! In this article, we will show you how to create a simple website using three basic technologies: HTML, CSS, and JavaScript. You will understand which file is responsible for what and how these technologies work together. Let's get started! 🚀
What is HTML?
HTML (HyperText Markup Language) is the foundation of any website. It creates the page structure, indicating where text, images, links, and other elements will be located. Imagine that HTML is like the frame of a building that sets the shape of your site. Without this "framework", the site simply will not exist.
HTML does not care about what the page will look like or what actions it will perform. It simply organizes the content and provides the structure for everything else. HTML uses various tags, such as <h1>, <p>, <div>, <a>, which help create content on the page.
Let's look at the most important elements that you will need when creating a site:
<html>: This tag indicates that this is an HTML document. It wraps all the content of the page.
<head>: This section specifies page metadata, such as page title, links to styles and scripts.
<body>: This is where the main content of your site will be displayed to users.
<h1>, <h2>, <h3> and so on: Heading tags that are used to organize the text.
<p>: This tag is used to create paragraphs of text.
<a>: A link that allows the user to go to another page or resource.
Example of a simple HTML code:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт, и я использую HTML, CSS и JavaScript!</p>
</main>
<footer>
<p>© 2025 Все права защищены</p>
</footer>
</body>
</html>This code creates a simple page with a header, text, and footer. This is the basic structure that creates the content of the page. By structuring your site in this way, you create a foundation on which you can build everything else.
What is CSS?
CSS (Cascading Style Sheets) is what turns your site from a simple set of text into a beautiful and convenient page. If HTML is the framework of a building, then CSS is the decoration, colors, fonts, and styles that make your site attractive.
CSS allows you to style the elements you have defined in HTML. For example, you can change the background color of the page, set the font for the text, or add indents between the elements. CSS also helps make your site responsive so that it looks good on any device, whether it's a computer, tablet, or smartphone.
The main ways to use CSS:
Inline CSS: It is applied directly to the HTML element using the
styleattribute.Internal CSS: Styles are placed inside the <style> tag in the <head> section of your HTML file.
External CSS: Styles are stored in a separate file that is connected to the HTML document through the <link> tag.
CSS example for website styling:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}This CSS code changes the appearance of the page: it sets the font for the entire site, sets the colors for the background and text, and also makes the footer fixed at the bottom of the page.
What is JavaScript?
JavaScript is a programming language that adds interactivity to your site. With JavaScript, you can process user actions, create animations, work with data, and much more.
If HTML defines the structure and CSS defines the style, then JavaScript adds "life" to your site. For example, with JavaScript, you can make a button change color when the mouse is hovered over it or open a new window when clicked.
JavaScript allows the site to respond to user actions: clicks, text input, page scrolling, and other events.
JavaScript example for interactivity:
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "You pressed the button!";
};This code allows you to change the text on the page when the user clicks on the button. JavaScript processes this event and performs the desired action, and also allows you to dynamically change the content of the page.
How does it all work together?
Now that we've figured out each component, let's see how HTML, CSS, and JavaScript work together. To do this, we will create three files:
index.html is a file that contains the structure of the site.
styles.css is a file that defines the appearance of the site.
script.js is a file that adds interactivity and actions to the site.
Example of a project structure:
Imagine that we have the following files:
index.html — the main file that will load our website.
styles.css — a file that sets the page style.
script.js — file for adding interactivity.
1. index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт!</p>
<button id="myButton">Нажми меня!</button>
<p id="message"></p>
</main>
<footer>
<p>© 2025 Все права защищены</p>
</footer>
<script src="script.js"></script>
</body>
</html>2. styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}3. script.js
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "You pressed the button!";
};Conclusion
Congratulations! You have just created your first website. Now you understand how HTML, CSS, and JavaScript work together to create a full-fledged web page. This is just the beginning — with this knowledge you will be able to create more complex and interactive projects! 🚀
Don't forget that practice is the key to success. The more you experiment and create, the more experienced a developer you become. Good luck on your web development journey! 😊