Forem: Gustavo Assis

Random topics in HTML.

Gustavo Assis — Thu, 28 Aug 2025 01:19:23 +0000

Description lists

Used to presenting terms and definitions, like a dictionary. Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Quotes

In HTML, quoted elements are used to distinguish quoted text from the surrounding content. You can quote a element using a block or inline.

<blockquote cite="https://www.ThisIsAExample.org">
  <p>Show the world</p>
  <p>your talent</p>
</blockquote>

<p>
  As I said,
  <q cite="https://www.ThisIsAExample.org">
     Show the world your talent.
  </q>
</p>

Just visual:

<p>— I, <cite>Show the world your talent.</cite></p>

Abbreviations and Acronyms

We can use Abbreviations and Acronyms using the tag <abbr>. Ex:

<p><abbr>HTML</abbr> is the foundation of the web.</p>
or
<p><abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.</p>

Address

The contact address element is used to represent contact information for a section on a web page.

<address>
  <h2>Company Name</h2>
  <p>
    1234 Not Exist Street <br/>
    New York <br/>
    United States
  </p>
</address>

Time

The time element is used to represent a specific moment in time.

<p>The reservations are for <time datetime="17:00">17:00 </time></p>
or
<p>
  The graduation will be on <time datetime="2024-06-15T15:00">June 15</time>
</p>

This example was taken of freecodecamp.

Superscript and Subscript

<p>2<sup>2</sup> (2 squared) is 4.</p>

<p>CO<sub>2</sub></p>

Forms and Tables

Gustavo Assis — Thu, 28 Aug 2025 01:16:05 +0000

Forms

The form element in HTML is used to gather user information

<form action="url-goes-here">
  <!-- input elements go here -->
</form>

Action defines where the form data will be sent upon submission.

Input

We can read the data using Inputs:

<form action="">
  <input type="text" />
</form>

We can add a Label too:

<form action="">
  <label>
    Full Name:
    <input type="text" />
  </label>
</form>

The input and the label are linked now. We can do that in a explicit way too:

<form action="">
  <label for="email"> Email Address: </label>
  <input type="email" id="email" />
</form>

You can add a hint to the user too, using the element placeholder:

<form action="">
  <label for="email"> Email Address: </label>
  <input type="email" id="email" placeholder = "Ex: gustavoassis203@gmail.com"/>
</form>

Button

We can have buttons in the forms too:

<form action="">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" />
  <button type="reset">Reset form</button>
  <button type="submit">Submit form</button>
</form>

Or use Input like buttons:

<input type="button" value="Show Alert" />

To submit a form, we can require some information, the form won't be send if the user do not fill the field.

<input required type="email" name="email" id="email" />

In HTML, form controls, like inputs, can be in different stages or conditions like a focused state, readonly state, or disabled state.

<input disabled type="email" name="email" id="email" />

Fieldset

We can group, visually, buttons and inputs, using the tag <fieldset>, and give to it a legend. Example:

<form action = "">
   <fieldset>
      <legend>Here you digit you legend</legend>
      <!--inputs and buttons-->
   </fieldset>
</form>

Tables

We can use tables in HTML using the <table> tag. Here a example from freecodecamp:

<table id="quickfacts">
  <thead>
    <tr>
      <th colspan="2">Quick Facts: Software Developers, Quality Assurance Analysts, and Testers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2023 Median Pay</th>
      <td>
        $130,160 per year
        <br>$62.58 per hour
      </td>
    </tr>
    <tr>
      <th>Typical Entry-Level Education</th>
      <td>Bachelor's degree</td>
    </tr>
    <tr>
      <th>Work Experience in a Related Occupation</th>
      <td>None</td>
    </tr>
    <tr>
      <th>On-the-job Training</th>
      <td>None</td>
    </tr>
    <tr>
      <th>Number of Jobs, 2022</th>
      <td>1,795,300</td>
    </tr>
    <tr>
      <th>Job Outlook, 2022-32</th>
      <td>25% (Much faster than average)</td>
    </tr>
    <tr>
      <th>Employment Change, 2022-32</th>
      <td>451,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>If this table had a footer it would be here.</th>
    </tr>
  </tfoot>
</table>

We can see in this example how we can structurate our table. First, we have a head, a body and a footer (<thead>, <tbody>, <tfoot>). <tr> define a row, and each row can have a header <th> and a data <td>.
My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX

LINKS IN HTML.

Gustavo Assis — Thu, 28 Aug 2025 01:11:54 +0000

Hello friends, like always, my name I's Gustavo Assis and I'm a Computer Engeneering studant. I made this articles to help you, and help me, to learn about HTML and CSS.
Today, we will see more about HTML.

LINKS:
I'm talking about The element <link ...> is used to link the HTML file with external resources like stylesheets, fonts, etc.

<link rel="stylesheet" href="./styles.css" />

Stylesheet in one of several arguments, the possible others are:

1. Style and Appearance
stylesheet → Imports an external CSS file.

alternate stylesheet → An alternative style sheet that the user can choose to apply.

2. Site Navigation and Structure
icon → Specifies an icon for the page (favicon).

shortcut icon → Older variant for favicon (today it’s more common to just use icon).

manifest → A JSON file that describes a web application (PWA).

prefetch → Instructs the browser to fetch a resource in advance.

preload → Preloads resources (CSS, fonts, images, etc.) in a controlled way.

prerender → Pre-renders a page in the background for faster navigation.

prev / next → Links sequential documents (like pages in an article).

canonical → Specifies the canonical URL for SEO purposes.

alternate → Links to an alternate version of the content (e.g., different language).

3. Fonts, APIs, and Data
dns-prefetch → Resolves a domain’s DNS before it’s needed.

preconnect → Establishes an early connection to a server.

modulepreload → Preloads JavaScript modules in advance.

About the fonts, Google provides code with the links in Google Fonts, example:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap" rel="stylesheet">

An example of icons:

<link rel="icon" href="favicon.ico" />

SVG IN HTML.

Gustavo Assis — Fri, 15 Aug 2025 19:08:10 +0000

Image formats like PNG and JPG are classified as raster formats. These formats are made of a matrix of pixels. The problem with these images is that they don't upscale well — in other words, if you make the image larger, its definition will decrease.

An SVG is a different kind of image. It is a Scalable Vector Graphic (SVG) and it uses equations to plot the image. In that way, the definition of the image won't change when we change its scale.

We can use SVG images in HTML with the tag . Example:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
  <circle cx="35" cy="40" r="7" fill="black" />
  <circle cx="65" cy="40" r="7" fill="black" />
  <path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>

This example was taken from the freeCodeCamp website. This code draws a smiling face:

Now that we know what an SVG is, let's see how we can use it. First, the basic structure is:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Here we make the image -->
</svg>

Let's see what means each element:

xmlns – Specifies the namespace (It's required).

width / height – Defines the display size of the image.

viewBox – Defines the internal coordinate system of the image (minX minY width height).

<!--We can have too:>
preserveAspectRatio – Defines the proportion of the SVG when it scales.

Now, to make the image we have:

Line:
<line x1="10" y1="10" x2="100" y2="100"/>

Rectangle:
<rect x="10" y="10" width="100" height="50"/>

Circle:
<circle cx="50" cy="50" r="40"/>

Ellipse:
<ellipse cx="100" cy="50" rx="50" ry="25"/>

Polygon:
<polygon points="50,5 100,100 0,100" fill="orange"/>

Polyline:
<polyline points="0,40 40,40 40,80 80,80"/>

Path:
<path d="M10 80 C 40 10, 65 10, 95 80"/>

The common Attributes for Shapes are:

fill – Sets the fill color of the shape.

stroke – Sets the outline (border) color of the shape.

stroke-width – Defines the outline thickness.

opacity – Controls the transparency of the entire shape (0.0 to 1.0).

fill-opacity – Controls transparency only for the fill.

stroke-opacity – Controls transparency only for the outline.

To plot some text:

x / y – Starting position of the text.

font-family – Font type.

font-size – Text size.

fill – Text color.

text-anchor – Aligns the text (start, middle, end).

Example:
<text x="10" y="50" font-family="Verdana" font-size="20" fill="black">
  Hello SVG!
</text>

We can add an attribute to a group of images with the tag <g>:

<g fill="blue" stroke="black">
  <circle cx="40" cy="40" r="30"/>
  <rect x="80" y="20" width="50" height="50"/>
</g>

And we can do tranformation too:

translate(x, y) – Moves the element.

rotate(angle, cx, cy) – Rotates the element around a point.

scale(sx, sy) – Resizes the element.

skewX(angle) / skewY(angle) – Skews the element horizontally or vertically.

Example:
<rect x="10" y="10" width="50" height="50" transform="rotate(45 35 35)"/>

My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX

MEDIAS IN HTML

Gustavo Assis — Fri, 15 Aug 2025 03:26:23 +0000

Hello again my friends! As always, my name is Gustavo, and I'm a Computer Engineering student. I'm writing these articles to help me learn while teaching you at the same time :).
Today, we will see about medias in HTML.

IMAGES:

To insert an image in HTML, we use:

<img src="path/filename.format">

We can add a description that will be displayed if the image does not load:

<img src="path/filename.format" alt="Description">

We can add a caption to an image too, we do that using the and tags:

<figure>
  <img src="path/filename.format" alt="Description">
  <figcaption>Put your caption here</figcaption>
</figure>

The commands to use in the tag image are:

Basic HTML Attributes

src – Specifies the image file URL.

alt – Provides alternative text for accessibility or when the image cannot be displayed.

width – Sets the image width (in pixels or percentage).

height – Sets the image height (in pixels or percentage).

title – Adds a tooltip text shown when hovering over the image.

loading – Controls lazy loading behavior (lazy, eager).

decoding – Suggests how the browser should decode the image (sync, async, auto).

crossorigin – Handles cross-origin requests for the image (anonymous, use-credentials).

referrerpolicy – Controls the Referer header sent when fetching the image.

Responsive & Advanced Image Features

srcset – Defines multiple image versions for different resolutions or devices.

sizes – Specifies which image size should be used in different layouts (with srcset).

usemap – Links the image to an image map (<map>) for clickable areas.

ismap – Indicates the image is part of a server-side image map.

AUDIOS:

To insert audio in HTML we use:

<audio src = "path/filename.format"></audio>

To display the built-in browser controls:

<audio src = "path/filename.format" controls></audio>

In addition of the controls, we can have other options, they are:

autoplay – Starts playing the audio automatically when the page loads.

loop – Makes the audio start over again after it ends.

muted – Starts the audio with the volume set to silent.

preload – Hints how the browser should load the audio file before playback (none, metadata, auto).

Example:

<audio
  src="audio.mp3"
  loop
  controls
  muted
></audio>

We can also use nested tags inside :

<source> – Specifies multiple audio file formats for browser compatibility.

<track> – Adds timed text tracks like subtitles or captions.

Example:

<audio controls>
  <source src = "audio.ogg" type="audio/ogg">
  <source src = "audio.wav" type="audio/wav">
  <source src = "audio.mp3" type="audio/mpeg">
</audio>

VIDEOS:

For videos, we use the same approach that we used for audio.

<video
  src = "path/filename.format"
  loop
  controls
  muted
></video>

Here a list of the commands to control the video:

controls – Displays the built-in browser video controls (play, pause, volume, seek bar, fullscreen, etc.).

autoplay – Starts playing the video automatically when the page loads.

loop – Restarts the video automatically when it ends.

muted – Starts the video with sound off.

poster – Sets an image to display before the video starts playing.

preload – Hints how the browser should preload the video (none, metadata, auto).

width – Sets the width of the video display area.

height – Sets the height of the video display area.

Example:

<video
  src = "path/filename.format"
  loop
  controls
  muted
  poster = "link"
  width = "620"
></video>

We can add medias from other sites too, we do that using the tag <iframe>. The basic structure of this tag is:

<iframe
  src="video-url"
  width="width-value"
  height="height-value"
  allowfullscreen
></iframe>

Let's see now a list of elements that we can use in it:

Basic <iframe> Attributes

src – Specifies the URL of the page to display inside the iframe.

title – Provides an accessible title for the iframe (important for screen readers).

width – Sets the width of the iframe (in pixels or percentage).

height – Sets the height of the iframe (in pixels or percentage).

name – Assigns a name to the iframe so it can be targeted by links or scripts.

loading – Controls how the iframe is loaded (lazy or eager).

My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX

EVENTS IN JAVASCRIPT

Gustavo Assis — Fri, 15 Aug 2025 00:16:52 +0000

Hello again! Like always, my name is Gustavo Assis and I'm a Computer Engineering student. I'm writing these articles to help you and me learn about JS.
Events are one of the most important things in JavaScript, because they allow us to use our script to control the page. A list of the events is given ahead:

1. Mouse Events:

click → When the element is clicked.

dblclick → Double click.

mousedown → Mouse button is pressed.

mouseup → Mouse button is released.

mousemove → Mouse moves over the element.

mouseover → Mouse enters the element area.

mouseout → Mouse leaves the element area.

contextmenu → Right-click (context menu).

2. Keyboard Events:

keydown → When a key is pressed.

keypress → When a key is pressed and held (deprecated in some browsers).

keyup → When a key is released.

3. Form Events:

submit → When a form is submitted.

reset → When a form is reset.

focus → When a field gains focus.

blur → When a field loses focus.

change → When the value of a field changes.

input → When the value of a field changes (in real time).

4. Window and Document Events:

load → When the page or a resource finishes loading.

DOMContentLoaded → When the HTML is loaded and parsed

resize → When the browser window is resized.

scroll → When the page or an element is scrolled.

unload → When the user leaves the page.

5. Drag & Drop Events:

dragstart → When dragging starts.

drag → While dragging.

dragend → When dragging ends.

dragenter → When entering a drop target area.

dragover → While over a drop target.

dragleave → When leaving a drop target area.

drop → When an element is dropped in a target area.

6. Touch Events (Mobile)

touchstart → When a finger touches the screen.

touchmove → When a finger moves on the screen.

touchend → When a finger is lifted.

touchcancel → When a touch is interrupted.

Now, we will see some examples of how to use them.
Let's suppose that in the body of our HTML we have a button onclick. We want the button to call a function in our script when it is pressed to handle the event. We will name the function "clickEvent", so in our HTML we have:

<button onclick = "clickEvent()">Click here</button>

In our script, we can handle the click:

function clickEvent() {
   alert("Hello World");
   // We can do many other things here.
}

Now, let's see an example where we change the style of an element. In our HTML:

<!-- A blue box in the center of the image-->
<div id = "box" 
     onmouseover = "onmouseoverEvent()" 
     style = "margin: auto; width: 60%; height: 150px; background: blue;">
</div>

In our JavaScript, let's change the color of the background:

function onmouseoverEvent() {
   let div = document.getElementById("box");
   div.style.backgroundColor = "red";
}

Now, when we pass the mouse over the blue box, it becomes red. The box will remain red when the mouse leaves the box, because we only handle when the mouse enters the box, and not when it leaves. So, let's handle when the mouse leaves the box (the box has to become blue again), to do that, we will use the "onmouseout" event, now our HTML becomes:

<div id="box" 
     onmouseover = "onmouseoverEvent()" 
     onmouseout = "onmouseoutEvent()" 
     style="margin: auto; width: 60%; height: 150px; background: blue;">
</div>

And our JavaScript:

function onmouseoverEvent() {
   let div = document.getElementById("box");
   div.style.backgroundColor = "red";
}

function onmouseoutEvent() {
   let div = document.getElementById("box");
   div.style.backgroundColor = "blue";
}

Now, the box turns red when the mouse enters it, and blue when the mouse leaves.
My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX

INTRODUCTION TO HTML, CSS AND JAVASCRIPT

Gustavo Assis — Mon, 11 Aug 2025 21:10:20 +0000

Hello everybody,
My name is Gustavo de Assis, and I'm a Computer Engineering student. I recently started studying HTML, CSS, and JavaScript to improve my skills, and I decided to create this post for two reasons: first, to share my knowledge, and second, to help me learn (yeah, teaching is one of the best ways to study).

WHAT IS HTML & CSS?

Well, in a very simple way, we can say that HTML and CSS are the foundation of web pages. HTML contains the content and structure of the page, while CSS defines how this content is displayed — in other words, the style of the page.

WHAT IS HTML & JAVASCRIPT?

JavaScript is a programming language, like C, C#, or Java. It is the main language used to add interactivity to websites.

HOW JAVASCRIPT IS USED IN WEBSITES?

We already said that HTML and CSS make up the structure and style of a page, but what if we need interaction? Not just simple interactions (which can be done with HTML and CSS alone), but more complex behaviors. For that, we need logic — and that logic is written in JavaScript.

BASIC STRUCTURE:

We can write HTML with inline styles and scripts, but it’s better to keep each part in separate files: one for HTML, one for CSS, and one for JavaScript. The basic HTML structure, which links the other files, looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <!--remaining code-->
</head>
<body>
    <!--remaining code-->
    <script src="script.js"></script>
</body>
</html>

MAIN TAGS (FOR BEGINNERS LIKE ME):

Well, it's not recent news that HTML has hundreds of tags, and probably you or I won't know all of them, then what? I think that we just have to know the basics, if we need to do a specific thing we just have to search on the internet, or just ask an AI. So why learn the basics? Well, you have a base to learn more specific things, we can't just skip stages.
Here are some common tags I use (still very basic, but useful):

<p>: defines a paragraph.
<h1> to <h6>: heading tags, we use them for titles. For example, we can do a title typing: <h1> This is a big title </h1>.
<div> and <section>: well, I won't explain the differences between these two tags. But I can say that both are container tags — in other words, everything inside is grouped together. Containers are one of the most important features of HTML, because with them we can style pages.
<ul>: denotes a list.
<li>: denotes an item of the list

With just these tags, we can already make a simple website. HTML provides the information, but how that information is displayed — centered, aligned, with colors and fonts — is defined in the CSS file.

It's important to say that we can assign classes or IDs to our tags. This allows us to change the style of specific tags in the CSS file. An example:

<div class="class_example"> </div>
<div id="id_example"> </div>

MAIN COMMANDS TO CSS:

To start, we need to know just a few things. In this post, we will see how to change the background color of parts of the site, the color of texts, and how to align texts and boxes (we will see what that is ahead).
To change the style of the pages and your data, we need "select" what we are changing. To do that, we write the name of the tag, id or class and we open a scope with "{}", like in an example below:

h1{
    color: #ffffff;
}

To change the style of specific tag, given by a class or id, we use a . before the name:

.class_example{
    color: #ffffff;
}

To select everything in a page, we use *:

*{
    color: #ffffff;
}

Now, here are some common commands that I use:

color: #ffffff; /* Change the text color */
font-size: 1.5rem; /* Change the font size */
font-family: 'Times New Roman', Times, serif; /* Change the font family */
font-weight: 300; /* Change the font thickness */
text-align: center; /* Align text to the center of its region */ 
background-color: #ffffff; /* Change the background color */

FLEXBOX IN CSS:

One of the most important features of CSS is Flexbox — with it, we can style our site in many ways. It's a complex feature, so I won't discuss it here, but I'm leaving a link to an explanation of how it works: FlexBox.

JAVASCRIPT:

Like we saw before, JavaScript is a programming language we use to make websites. We already saw how to link it to an HTML file. Now, let's see the main commands of this language and how to change HTML & CSS elements with JS code.

Variable declaration:

const a; // Local scope. We can't change its value.
let b;   // Local scope. We can change its value.
var c;   // Function scope. We can change its value, but we really shouldn't use it

It's important to say that JS is not a strongly typed language — we can declare a variable called "a", assign a string to it, and later assign a number, for example.

To print something in the console, we use:

console.log("What do you want to print?");

VECTORS IN JAVASCRIPT:

To start, we need to know that JavaScript doesn't have fixed sizes for arrays, in other words, they can increase or decrease size accordingly to what we need.
When we declare a vector we can start it empty and when we want we add elements in it, or, we can create it with data. First, let's see how we declare it empty:

let names = [];
names[0] = "Gustavo";
names[1] = "Ana";

Now, to declare it with data:

let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];

We can create a vector using a constructor too:

let fruits = new Array("apple", "banana", "orange");

Our vector can have different types too:

let different = [1, "text", true, { name: "Gustavo" }];

To access an element of the vector, we can do:

let a = fruits[1];

The main methods to use in the vector are:

arr.push(4);   // add to the end
arr.pop();     // remove from the end
arr.unshift(0); // add to the beginning 
arr.shift();   // remove from the beginning 
arr.slice(1, 3); // returns [2, 3] (doesn't change original)
arr.concat([4, 5]); // returns merged array
arr.splice(1, 2); // remove 2 elements starting from index 1

OPERATORS IN JAVASCRIPT:

I won't show all operators of JS, because they are very similar to operators from other languages. We just have to pay attention to the equality operator: "==" can return true when comparing different data types. To compare both type and value, use "===".

LOOPS IN JAVASCRIPT:

First, we have the common for:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

We can use this "for" to interact in arrays, like:

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

We here use a property of Arrays, more specifically when we get how many elements are in the array (arr.length).

To interact in arrays, we can use:

let fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
  console.log(fruit);
}

The FOR...IN in JavaScript:

let person = { name: "Gustavo", age: 22 };

for (let key in person) {
  console.log(key, person[key]);
  // name Gustavo
  // age 22
}

And the FOR EACH:

let numbers = [1, 2, 3];

numbers.forEach((value, index) => {
  console.log(index, value);
});

We have many other interesting features in JS to use in Arrays, like "map" and "filter", but, it's more advanced material, so we will see that on another occasion.

FUNCTION IN JS:

Functions are a way to do the same part of a code several times, without having to repeat the code, we just have to call the function. We can make a function in several forms, the most common forms are:

function sum(a, b) {
  return a + b;
}
console.log(sum(2, 3)); // 5

The "best" way to do it(for some reason that I won't discuss here):

const sum = function(a, b) {
  return a + b;
};
console.log(sum(5, 2)); // 7

Or in an arrow form (to do simple functions):

const mul = (a, b) => a * b;
console.log(mul(3, 4)); // 12

CLASSES AND OBJECTS IN JS:

To create a class we use the keyword class:

class Person{

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Methods:
  show() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  // ...
}

And to create an Object of this class and call a method we use:

const person1 = new Person("Gustavo", 22);
person1.show(); 
// Output: Hello, my name is Gustavo and I am 22 years old.

JAVASCRIPT AND HTML & CSS:

Now we already know the basics of JS, but how we use it in our website? Well, with our JS file, we change the DOM, but it's not important right now. We just have to know that we can use commands to change the other commands (in the HTML and CSS files). For example, let's consider that in our HTML file we have:

<p id="message">Text</p>

And in our Script we have:

document.getElementById("message").innerHTML = "Text changed!";

Our site now will show: "Text changed!"
In the same way we can change the color or the font of the site:

<script>
document.getElementById("message").style.color = "red";
document.getElementById("message").style.fontSize = "20px";
</script>

Using that, we can do many things. For example, we can make buttons with HTML and CSS, take the return of them in our Script, and make the changes in the site when they are pressed.

THE END.

Well, I know I didn't show many things, but this is just an introduction to these languages. We can learn so much more from other sources. The truth is I made this page more to help myself than you, because writing helps me study. I’ll probably write about React soon. If you read this far and want to know me more, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX