After you’re in a Git repository directory, you can start adding files. (If you aren’t in a directory, see the previous section, “Creating a Repository” where we created the best-example directory.)
For this example, you create three files by typing the following code:
$ touch README.md
$ touch index.html
$ mkdir js
$ touch js/script.js
Note that one of the files you create is a README.md file. To find out why every repository should have a README.md file, see Chapter 10.
After running these commands, you have three files:
» README.md
» index.html
» script.js
script.js is in a subdirectory named js. You guessed it. — you’re making a simple website!
You can flesh out the README.md file first. In this example, we use Atom to open and edit the files in the current directory. (If you need any guidance setting up Atom, see Chapter 2.)
If you prefer, you can easily use another editor, such as Visual Studio Code, to edit the file by replacing atom with code in the following example:
$ atom
You can add some simple Markdown text to the README.md document. Markdown is language that offers a simple way to format and style your text. You can check out a guide on Markdown on the GitHub guides https://guides.github.com/ features/mastering-markdown.
Open the README.md in the editor by clicking in in the file tree in Atom. Then add some Markdown relevant to your project. In this example, add the following text:
# The Best Example Ever
Which will be a part of the best commit ever.
Then add the following code to index.html.
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>It is the cod3z</title>
<script src=”js/script.js”></script>
</head>
<body>
<h1>The Best Cod3z!</h1>
</body>
</html>
This HTML file references scripts.js. Open script.js in Atom and add the following code.
document.addEventListener(
“DOMContentLoaded”, function(event) {
alert(‘The page is loaded and the script ran!’)
}
);
Make sure to save your changes to each file. Now test the code by opening index. html in your browser from the terminal.
$ open index.html
The page loads in your default browser, and the alert message, shown in Figure 7-1, appears.
Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.