Learn Git Training

This assignment has 2 goals: it lets you practice using Git and GitHub, and also gives you practice creating a site.

Create a fork of the this by clicking "Fork" on the top right.

You'll see a screen like the one below while GitHub is forking the repo. Forking creates a copy of the original repo on your own GitHub account. The forked repo is still online only and not on your computer.

Now you have your own copy of the repo! In order to make this a live personal website, we're going to take advantage of GitHub's GitHub pages feature. All we need to do is change the repository name to <fill in your GitHub username>.github.io. Here's how:

Click on the settings tab toward the top of the page:
Find the repository name section and change it to <username>.github.io
Click the rename button.

Go to the website <username>.github.io! You have a web presence now!! It's not perfect, but it will be a work in progress over the whole course and it's an excellent start! If you want to change the content, you're going to need a copy on your own computer to edit and improve.

If your site isn't showing up, that's somewhat normal. You can try going back to the settings tab, and changing the theme of your page, which sometimes works to make the site show up. (Just go back and change the theme back after the page has shown up on github.io.)

Click the clone or download button and copy the "clone URL."

On your own computer, make a wdi directory in your home folder (~). This is where you will put all your work from this class. You can complete this in one command:

➜ mkdir ~/wdi

Use the "clone URL" to clone the repo onto your local machine. Make sure you're in your ~/wdi directory before you clone!

➜  cd ~/wdi
➜  git clone <clone-url>

Change directories into the repo you just cloned (in this example, <username>.github.io).

➜  cd <username>.github.io

Open this project in Atom.

atom .

Back in Atom, open index.html. Take a moment to read through index.html and answer these questions for yourself:

How many stylesheets does this webpage currently have? Where in the project can they be found and edited?

There are two stylesheets, normalize.css and main.css. normalize.css is in the vendor/css folder because it's a file developed by somebody else (a vendor) and you won't be editing it. main.css is in the assets/css folder and is the custom styling that you'll spend time adjusting.

In the head element, change the title of the page. Where can you observe the impact of this change?

On the tab in the browser, your site will display a new name. It used to be "First Training."

If you were to write some Javascript to handle events on this page, what file would be the correct place to write that code?

You'd want to write your custom JS in the assets/js/app.js file. Once this file grows big enough you might want to create new JS files in the assets/js folder.

In the <body> of the document, replace the <h1> tag text with your name and add an image (or gif) of your liking using the <img> tag.
Now that you've changed the repo, it's time to commit your changes. Back in your terminal, type

➜  git status

This shows you the files that have been modified, created, or deleted. Notice that they are listed as untracked.

Now you're ready to add your changes. Type

➜  git add .

Now enter git status. Notice that your new file has gone from untracked to Changes to be committed.

Next step is committing. Type the following:

➜  git commit -m "first edits to index.html"

Now enter git status again. Notice that the new status is Your branch is ahead of 'origin/master' by 1 commit.. This indicates that your the version of the repo on your computer (aka the local version) includes your changes but the version hosted by GitHub (aka the remote version) does not.

To get your changes on to the remote version of the repo, type

➜  git push origin master

Note: origin is the given name of the remote repository hosted on GitHub. master is the name of the main branch within the repository. (Typically master is the branch you update when you're ready to publish changes to the world.)

Now git status will tell you that Your branch is up-to-date with 'origin/master'. !!!

Check back in on your site to see the improvements deployed!
Repeat the git commit workflow each time you want to update your repository. Make sure to include a good commit message!

Deliverables

This Friday, you will be having a feedback session with an instructor on your progress on this Personal Portfolio. By then, we expect to see:

An updated README.md file
- A README is like the cover to the book of code you've written for this site. Don't publish a book without a cover! Describe this project in a few sentences - what are you trying to achieve with this page, what technologies are you using, etc. This is a decent template for the way that a README often looks
- Make sure to link to the live site and include some sort of image (logo or screenshot)
- If you need help writing markdown language (the reason the file ends in .md), check out this guide.
"My work" section
- Includes (or will include) links to all repos that contain homework deliverables.
"Contact me" section
- Includes (at least) a way to email you, a link to your GitHub profile, and a link to your LinkedIn profile.
Some custom HTML, CSS, JS, and images
- Put your own personal flare on the page and add some customizations. These could be really simple changes that add a bit of your aesthetic or they could be larger features like a navbar, a footer, a photo carousel, bootstrap integration, event listeners, or CSS animations. Google for personal websites, find one that you like, and imitate it!
Please submit your assignment in the Project Submission Doc, under the "Personal Portfolio" tab:

We're really looking forward to seeing what you've built by Friday! Please reach out to your peers or instructors if you need help making progress on this project.

sf-wdi-44/personal-portfolio

Learn Git Training

Deliverables