Skip to content

1. Project management

In this week, I learned how to modify my Fab academy website using some applications such as Git Bash, and Atom. I have also used a program called Greenshot to take screenshots and edit them. To compress the picture, I used a software called Mass Image Compressor.

What I did to edit my website offline.

A. Downloading and installing Git Bash.

Git software can help us to do changes to our website’s files and keeping the previous files as a backup which is very useful incase we made a mistake and wanted to get the original code. It can record your changes.

1. I created a folder in my user directory.

2. I downloaded Git and installed it.

3. I used PWD code to check the current path.

pwd

4. I copied the HTTPS of my page using clone.

5. I used git clone code to get all my website’s files into my device. It asked for my username and password so I entered both.

git clone HTTPS URL



B. Downloading and installing Atom.

Atom is a text editor which will help us to edit the codes of our website’s files.

1. I downloaded and installed atom.

2. I added my folder using add a project folder.

3. I edited the text (Hello Hussain Jaffar) and saved it using CTRL + S.

4. Preparing the file to be uploaded using Git, then clicking on stage All.

5. I typed a commit message to make it easy for me when I want to check my editing or if I make a mistake and wanted to reverse back to the previous changes. Then, I clicked on push. It asked for my username and password and I entered both.



C. Editing (mkdocs.yml) file.

MkDocs is used to build project documentation easily. The files that are written in Markdown can be configured with a YAML configuration file (mkdocs.yml).

3. I changed the icon of the tab and of the header.

logo: images/Edu.png

favicon: images/Edu.png

4. I changed the LinkedIn icon to Reddit icon.

5. I changed the font from Ubuntu to Cantata One

text: Cantata One
code: Cantata One Mono

6. I changed the color of the header from indigo to blue grey and I changed the color of the hover of the text to light blue.

primary: blue grey
accent: light blue

D. Restoring the theme of the page.

I tried to change the theme of my page but the new template did not have the social media links, and since I wanted to add my social media links I had to return the original theme.


Last update: March 21, 2022