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