Briefly about HTML, CSS, and JS

[ ui testing ]

Every web page is made of code.

HTML, CSS, and JavaScript are the key technologies used to build websites:

HTML (HyperText Markup Language) defines the structure and content of a page.
CSS (Cascading Style Sheets) define the visual look of the page — colors, fonts, spacing, sizes, and more.
JS (JavaScript) make pages dynamic and interactive.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js">
</head>
<body>
    <h1>Heading</h1>
    <p>And this is a paragraph</p>
    <button>Button</button>
</body>
</html>

How the browser processes code

1. Building the element tree

The browser loads the HTML page, analyzes its structure, and builds a hierarchical representation of elements — the DOM (Document Object Model)

2. Applying styles

After building the DOM, the browser applies CSS styles to define how the elements should look to the user

3. Executing scripts

Then it runs the JavaScript code, which can modify the content, add animations, and handle user actions

Before browser processing

<body>
    <h1 style="color: blue">Heading</h1>
    <p style="border: dashed">And this is a paragraph</p>
    <button style="width: 50px">Button</button>
</body>

After browser processing

Heading

And this is a paragraph

Interface elements in HTML code

Interface elements are described using HTML tags.

Tag is a special markup used to define the structure of a page. Tags are enclosed in angle brackets and often come in pairs: an opening tag <tag> and a closing tag </tag>. You can view the full list of tags here.

Inside the opening tag, you can define attributes — element properties: id (a unique identifier of the element), type, name, style and others.

HTML code before browser processing	After browser processing
`<input type="radio" name="answer" value="Yes"> Yes <input type="radio" name="answer" value="No"> No`	Yes No
`<input type="checkbox" name="toppings" value="Nuts"> Nuts <input type="checkbox" name="toppings" value="Caramel"> Caramel`	Nuts Caramel
`<input type="text" name="field-name" placeholder="Enter text">`
`<textarea name="textarea-name" placeholder="Enter text"></textarea>`
`<button>Click me!</button>`

From plain text to HTML + CSS + JS step by step

Let’s build a web calculator.

0. First, prepare the page content — the text that will appear on the buttons.

1. Let’s turn the plain text into a HTML page. We’ll group the content logically and describe the elements using tags:

<button>C</button>, <button>+</button>, <button>7</button>...
<input type="text" placeholder="0" readonly>

2. Next, add CSS: set the font, element sizes, and color scheme.

3. Then write JS : now the calculator can respond to user actions and perform calculations.

0. TEXT

C / X - 7 8 9 + 4 5 6 = 1 2 3 0

1. TEXT + HTML

2. TEXT + HTML + CSS

3. TEXT + HTML + CSS + JS

You can inspect the HTML structure and CSS styles of each of the four calculator prototypes using DevTools Elements, and view the JavaScript files loaded additionally in DevTools Sources.

Task