Week 1: Project management

This week I Set up my git repository worked and started to getting used to the documentation process. I also drew up an idea for a final project

Git

I roughly followed this tutorial. to set up my git repository.

I downloaded git from this website.

Then I got to work making syntax errors and learning about the console.

git commands

I set my username using
git config --global user.name Dan.Collins

Then set my email using
git config --global user.email collins_daniel@wheatoncollege.edu

I checked to see if I already had an SSH key:
cat ~/.ssh/id_rsa.pub
It returned “no such file or directory” meaning it couldn’t find one

I then generated an RSA encryption key for my repository
ssh-keygen -t rsa -C $collins_daniel@wheatoncollege.edu
I didn’t give it a passphrase, as this layer of security seems redundant for my purposes.

generating encryption key

I then ran the same command as before to see the generated key
cat ~/.ssh/id_rsa.pub
This outputted a long string of characters which I copied using:
clip < ~/.ssh/id_rsa.pub
I pasted this into my gitlab profile under ssh key.

Next I created a file on my desktop and navigated to it in the console using the ls command to determine my location in the file directory and the cd [fileName] to navigate to the proper file.

Navigating files in the console

I cloned the repository so that I could edit the website files on my computer and submit the changes to the server.

Cloning the repository

To test if everything was working correctly I opened the style.css file and changed the navbar background color to a shade of orange.

Changing the color value

I then saved it and used git add . to add the new version to git, then git commit -m [comment] to add a comment explaining the nature of the change. Finally I used git push to send the changes to the server.

Changing the color value

I used html and css to make my website. Since I had very little experience with html prior to making my website, I started by editing the default website that was already there. I changed up some of the color values in the style.css document, and looked online for ways of arranging the images and text in a more pleasing way.
One of the attributes I found most useful was creating a flex box div. This allows you to display features next to each other instead of vertically.
I also used this site to learn how to put images next to text in my website.

Here is an example div that you can use to display items next to each other:

.container {
  display: flex;
  align-items: center;
  justify-content: center
  padding: 10px;
  max-width: 100%;
  margin:5%;
}