Chapter 1.2.5
Homework
Now that you know how to create a Git repository and know the basics of HTML, let's get you started with creating the first part of your portfolio website!
Create Your Portfolio Site Repo
For the first step, you will want to create the folder from which you will be editing and pushing your changes to GitHub.
If you are using Mac or Linux, navigate to your Desktop by typing the following into Terminal:
cd ~/Desktop
If you are on Windows, type the following into Command Prompt:
cd \Desktop
Once you have successfully navigated to your Desktop, create a directory and some folders that we will use in the future:
mkdir Portfolio\ Site #the backslash allows you to type a space
cd Portfolio\ Site
mkdir img
mkdir css
mkdir js
Finally, initialize your repo:
git init
Create an HTML Document in the Repo
Open Visual Studio Code and in the Top Left of your screen, select File > Open and select the folder you just created, Portfolio Site.
Once you have successfully opened your folder, create a new file by selecting File > New File. Save it selecting File > Save and name it index.html. This will be the landing page that will come up first when people go to your website.
Copy the code below onto your index.html file. You may modify it as much as you'd like and we will be able to stylize it further in the future using CSS, JavaScript and more advanced HTML tags!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Portfolio Site</title>
<meta name="description" content="This is my Portfolio Site">
<meta name="author" content="YOURNAME">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
Save the file by selecting File > Save.
Push Your Repo
Navigate back to Terminal (or Command Prompt on windows) and add all of the changes you have made to the repo so far by typing:
git add .
Check that there are no "Untracked" documents by typing
git status
If all of the documents are ready to be committed and you have finalized all of your changes, commit your project.
git commit -m "Added index.html and styling subfolders."
Create a new repository on GitHub following the instructions in Chapter 2.3 and push your changes to the cloud. If you can see your files in the site for your repository online, you have done this succesfully! You are ready to start modifying your site.