Kitten

Index › 1. Hello, Kitten!

Your first web page

To create your first Small Web page, you need just two tools, the Terminal app that comes with your system and Kitten.

So let’s get started:

1. Install Kitten

2. Open your terminal app (e.g., on macOS, it’s the app called Terminal).

   You use a terminal app to give your computer commands, pressing Enter after each line.

3. First, let’s navigate to our home folder on our system:

   cd ~
   

   The tilde character (~) is a handy shortcut that takes you to your home folder. If you want to see the full path to your home directory, you can use the print working directory command, pwd, after you’ve issued the cd command in this step.

4. Just so you understand exactly what we’re doing, let’s open the folder we’re in in the graphical file manager app for our system (on macOS, this is the Finder app) by giving the following command:

   open .
   

   On macOS, you should see Finder pop up, showing you the contents of your home directory (we use the terms ‘folder’ and ‘directory’ interchangeably although the former is usually used in graphical contexts and the latter is more common when working in a terminal).

   Keep the Finder open and you should see the folders we’re about to create in the terminal pop up there visually (which is pretty cool).

   The dot (.), like the tilde you saw ealier, is a special directory reference that means ‘the directory you’re currently in’ (or, more precisely, your working directory).

5. Next, create a folder to hold the lesson materials for the course and switch to it.

   mkdir small-web-course
   cd small-web-course
   

   When you see more than one line in a code block, each line is a separate command. Remember to enter them as such by pressing Enter at the end of each line.

   The new command you’ve used here is mkdir, which is short for ‘make directory’.

   If you still have Finder open and showing your home directory, you should see the small-web-course folder appear.

6. Now we’re just going to repeat the same thing to create a hello-kitten folder inside our small-web-course folder:

   mkdir hello-kitten && cd hello-kitten
   

   Oh, look, this time we’re combined two commands onto one line using the and operator (&&). This runs multiple commands in sequence and runs the next command only if the current one succeeds.

   Talking about lines, you will also hear the terminal referred to as the command line and we call the place where you type the commands the command prompt, or just prompt for short.

7. Right, after all that, let’s create a web page in our hello-kitten folder and write some code into it using the basic language of the Web, HyperText Markup Language or HTML, for short.

   echo '<h1>Kitten</h1><p>🐱️</p>' > index.html
   

   The code you passed to the echo command is called Hypertext Markup Language or HTML for short. It is how you mark up regular text to give it meaning (semantics) that a browser can understand.

   In the code above, you do this using the h1 and p tags.

   The h1 tag stands for Heading Level 1 (the topmost heading in a page’s heading hierarchy) and the p tag stands for paragraph text.

   So our page will have a heading of Kitten and a paragraph that just contains a single kitten emoji.

   The echo command simply echoes whatever string you pass it. Normally, it just echoes it back to you.

   Try it:

   echo 'Hello!'
   

   You should see your terminal say “Hello!” to you.

   The magic here is in the greater-than sign, known as the redirection operator, that pipes the result of the preceding command somewher else. In this case, instead of echoing the HTML to the standard output like we just did with our “Hello!”, we tell it to redirect the output to a file called index.html.

   If you want to see exactly what’s in the index.html file, you can use the somewhat unintuitive concatenate (cat) command to list its contents.

   To feel extra cool, press the tab key after typing the first few letters of the file name to have it auto-completed for you (this is called “tab completion” and it will save you lots of typing and prevent mistakes when working in terminal).

   cat index.html
   

   Not surprisingly, you should see the HTML content we wrote into the file, earlier:

   <h1>Kitten</h1><p>🐱</p>
   

   And if you ever want to see what files are in the directory you are currently in, you can use the list (ls) command:

   ls
   

   Which, in this case, will show you the only file we’ve created so far:

   index.html
   

8. Finally, let’s run Kitten (our web server) to serve our new page locally on our machine:

   kitten
   

You should see Kitten launch in your terminal and tell you that it is serving your web site at https://localhost/.

Open up your favourite web browser and navigate to https://localhost and you should see your newly created Hello, Kitten page.

Congratulations, you just made your first web site! :)

Next lesson: Tools of the trade.