I promised to teach my baby sister how to create websites.
This is the first email I sent her.
Prologue
Saray,
It was June 17th, 2005 when I received the call.
“José,” said my father, “your mother just gave birth to your baby sister.”
I got mad!
A couple of months earlier I told my mom not to dare to give birth to you while I’m on my senior class trips.
“Don’t worry, José. We will wait for you”, she told me back then. But, nature had a different plan.
My lousy teenage temper soon began disappearing as happiness started taking its place.
But I still had to wait two full days to meet you.
While I was returning to the capital, I asked my teachers to leave me near the clinic.
It was 5 o’clock in the afternoon when I arrived. The sun was setting, painting the sky apricot orange.
While getting off the bus, I watched as my euphoric classmates screamed with joy. We lived through three wondrous days of enjoying the beach, delicious food, and good company.
I said goodbye to them, knowing that I would never see most them again.
Walked down the bus’ stairs, went to the luggage compartment, took my suitcase and walked towards meeting you.
As I entered the clinic, my heart jumped with joy, and I was able to reach.
I saw you.
Then I carried you for the first time. I swear to God you opened your big, beautiful, pitch-dark onyx eyes and smiled at me.
What a day!
This is the first memory I have of you – thank you for that, my pretty girl –.
I want to continue to see your smile. And that’s why I agreed to teach you how to create web pages.
You’ll love it.
So let’s start this new journey!
First things First
Let’s download a text editor.
A text editor is a software for writing code.
I suggest you use the Visual Studio Code editor – who we’ll call VS Code from now on.
Let’s open https://code.visualstudio.com on our web browser and download VS Code.
Done? Let’s install our new friend then.
Bear in mind that VS Code is available for Mac, PC, and Linux. Therefore, we can use it on different computers and operating systems.
Installed? Yes!
Let’s open it
Black interface?
I imagine that this is somewhat weird for you.
But believe me when I tell you that this will make the time in front of your screen more pleasant. Also, your eyes will thank you.
New File
We have VS Code opened. So, let’s create our first file.
Click on the File menu and choose the New File option.
By doing this, VS Code will create a new file called Untitled-1.
If you wonder why it’s called like that, here’s your answer: we have not saved the file yet, and it has no name.
Notice that the interface changed a bit. We’ll see a new tab with the ugly Untitled-1 name. It will also have a column with the number 1.
I want you to know that text editors assign a number to each row of the file. This is only for reference. Your code will not have those numbers attached.
Therefore, each time we press the enter key within our file, the text editor will add a new row.
Let’s try this out.
Place the cursor on row 1 and click on it. Then, press the enter key five times. Now, our file has six rows.
We will now save the file by pressing the key combination Cmd + S (or Ctrl + S if you are using Windows). Click on the File menu and then on the Save option to continue.
Let’s name it index.html and save the file into some folder.
Why do we use the name index.html?
HTML is the language of web pages.
Internet browsers – such as Chrome or Safari – read the HTML code that lives within .html files. Bear in mind that .html a file extension. A file extension is a suffix at the end of the file name that indicates what type of file it is.
Other file types accept HTML code as well. But, for the moment, I prefer to keep things simple.
Another reason to use the name index.html is that this is the default name of the home page of a web page.
The home page is the page that the internet browser will open when we enter a web page.
For example, if we enter www.rosa.do, our browser will load index.html and show the home page that I created for my site.
On the other hand, if we go to https://rosa.do/about/, the browser will load a different web page.
Keep in mind that a web page is hosted (lives within) on a server.
A server is a very powerful computer. In it, we can store different types of information and files, such as our new index.html.
Servers usually know that index.html is the main page. For this reason, we named our first file index.html.
I will talk more about this topic soon enough. If you want to learn more about it, read the article “Understanding the Index.html Page on a Website.”
Your first webpage
We already save the file and name it index.html.
Let us take a closer look at the interface.
Notice that the Untitled-1 tab now says index.html. This means that we saved the file successfully.
So, what can we do now?
Let’s write the ! (exclamation point) sign on line 1 of our index.html.
As soon as we add the exclamation point, VS Code will show us the following snippet.
What is a Snippet?
A snippet is a programming term for a small, re-usable code.
VS Code has many shortcuts and snippets to help us create web pages.
When we write the ! sign within a .html file, VS Code will know that it has to look for the snippet that we saw in the previous image.
Each snippet has its own shortcut, which is usually a sign, a word or a combination of characters.
Note: snippets are linked to the file type. The snippet that VS Code looks for when we write ! in a .html file will be different from a .css file. In fact, a .css file will not have a snippet assigned to the exclamation point. By the way, we’ll talk more about CSS later on.
Open the Gates!
Let’s click on the snippet (or press the enter key).
Puff! Magic.
We now have our first HTML code.
Let’s change some things.
Let’s replace the code on line 7 with the following one.
<title>My First Website</title>
Then, we’ll add this to line 10.
<h1>My First Title</h1>
Press the enter key and insert this code on line 11:
<p>This is my first paragraph. I am very happy. This is my first website.</p>
Press Cmd + S to save the changes.
Opening our webpage
Let’s find our index.html file.
To speed up the search, right click on the index.html tab. Then, click Reveal in Finder (or Reveal in Explorer if you’re in Windows).
VS Code offers us this option so that we don’t have to search the file on our computer.
Open the file with Google Chrome (if you do not have Chrome, download it here).
Double click the index.html file.
NOTE: The file might open in Safari if you are using Mac or in Internet Explorer if you are using PC. It’s may also open in VS Code.
If the file opens in VS Code or another program that is not a browser, proceed to open the browser (use Chrome) and click and drag the file over it. Chrome will be kind enough to open it.
WELL DONE!
We have just created our first web page.
We’ll talk more about HTML in our next encounter.
I’ll explain in depth all the weird terms we saw during this tutorial (<title>, <h1>, <p>, etc).
For the moment, let’s relax and treasure our new achievement!
I’m proud of you.
