1.2 Exercise
Hello
Zen and the art of Coding
Please email hello@zenandtheartofcoding.info for a password

Exercise

make a web page!

put everything together so far and with the terminal create a coding folder on your computer for projects, then another folder for your new web page, then inside that folder create an html file, then open that file in VS Code, copy and paste the code from here into your file and view the code in a browser. Also, download VS Code (opens in a new tab).

step by step:

  • in the terminal:
$ # print your current working directory
$ pwd
$ # if for some reason you are not at /Users/<your name>, go home
$ cd ~
$ # make a new folder for coding projects
$ mkdir Coding
$ # change into that new directory (capital letters matter in the terminal)
$ cd Coding
$ # make another folder for this website, name it whatever you want but good habbit is to not use spaces
$ mkdir my-dope-site
$ # change into that directory, try hitting tab to autocomplete the path
$ cd my-dope-site
$ # create that html file, name it anything you want (index.html is pretty standard though) but no spaces and end it with .html,
$ touch index.html
$ # open the finder here so you can see the html file
$ open .
  • theres a setting where you can type code . into the terminal too and it will open that folder directly in VS Code. for now, just open VS Code and drag that new html file in
  • copy the HTML code below (there should be an icon in the top right of the code section when you hover, click it to copy the code)
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>A dope site</title>
    <!-- this is a comment -->
    <!-- this is where you can explain code to humans and hide it from the computer -->
  </head>
  <body>
    <h1>My first web page</h1>
    <p>coding rules</p>
  </body>
</html>
  • paste (command + v) it into your HTML file in VS Code
  • save the file (command + s)
  • open a browser, safari or chrome
  • back to the finder where your html file is and drag the file into the address bar of the browser and hit enter
  • VOILÀ