Skip to content

2. Project management

Introduction

This is the second part of week one, we are required to build a personal site to use for weekly documentation and also for the final project

Fab Academy is a fast-paced, hands-on learning experience where students learn rapid prototyping by planning and executing a new project each week, resulting in a personal portfolio of technical accomplishments.

Because of that, you will have new material to add to your website each week as you improve and expand your knowledge through the academy.

The best way to manage this kind of rapid and continuous change on your files is to use Version control and other tools that support this process.

***What is Version control ?

Version control, also known as source control, is the practice of tracking and managing changes to software code. Version control systems are software tools that help software teams manage changes to source code over time. As development environments have accelerated, version control systems help software teams work faster and smarter.*

In other words, Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.***

Benefits of version control systems:

The primary benefits you should expect from version control are as follows.

  • A complete long-term change history of every file: This means every change made by many individuals over the years.

  • Branching and merging: Creating a “branch” in VCS tools keeps multiple streams of work independent from each other while also providing the facility to merge that work back together.

  • Traceability: Being able to trace each change made to the software.

Version Control Systems (VCS) categories:

  • Local Version Control Systems

It is to copy files into another directory

Figure 1. Local version control

  • Centralized Version Control Systems

These systems have a single server that contains all the versioned files, and a number of users that check out files from that central place.

Figure 2. Centralized version control

  • Distributed Version Control Systems

Users don’t just check out the latest snapshot of the files; rather, they fully mirror the repository, including its full history.

(Figure 3. Distributed version control

Version Control Systems (VCS) have seen great improvements over the past few decades and some are better than others. One of the most popular VCS tools in use today is called Git. Git is a Distributed VCS (DVCS), more on that later. Like many of the most popular VCS systems available today, Git is free and open source.

We are going to focus on Git and learn more about it.

What is Git ?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.*

Step 1: downloading Git

Step by step

Step 2: Gitlab Account

Step by Step

  • This to fork your first project

Step 3: clone the repository

  • create a directory for Git (C:\git) to save all repository
  • As a Fab academy Student you will Have a MKdocs template we will talk more about Mkdocs and Markdown later on
  • to clone the repository you need to configure your user through Git bash using your Email and SSH key

Cloning my remote repository¶ Step1: I created a directory C:\git to save my repository. Step2: From my account in fabcloud in gitlab, I copied the source URL to clone with HTTPS.

Step3: In git command I used cd git to work inside the directory created. Step4: In git command I used git clone copied URL to clone my repository with the name as used in the cloud, which is “zaid_marji”.

then using Git Bach you clone your files

for full tutorial step by step check this playlist

MKdocs and markdown

MkDocs is a fast, simple and downright gorgeous static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file. Start by reading the introduction below, then check the User Guide for more info.

To edit the files of you website you need to edit using mark down and a text editor

you can learn how to use markdown using those useful links

Markdown crash course

Markdown cheat sheet

Example
<!-- Headings -->
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

<!-- Italics -->
*This text* is italic

_This text_ is italic

<!-- Strong -->
**This text** is italic

__This text__ is italic

<!-- Strikethrough -->
~~This text~~ is strikethrough

<!-- Horizontal Rule -->

---
___

<!-- Blockquote -->
> This is a quote

<!-- Links -->
[Traversy Media](http://www.traversymedia.com)

[Traversy Media](http://www.traversymedia.com "Traversy Media")

<!-- UL -->
* Item 1
* Item 2
* Item 3
  * Nested Item 1
  * Nested Item 2

<!-- OL -->
1. Item 1
1. Item 2
1. Item 3

<!-- Inline Code Block -->
`<p>This is a paragraph</p>`

<!-- Images -->
![Markdown Logo](https://markdown-here.com/img/icon256.png)

<!-- Github Markdown -->

<!-- Code Blocks -->
```bash
  npm install

  npm start
  function add(num1, num2) {
    return num1 + num2;
  }
  def add(num1, num2):
    return num1 + num2
Name Email
John Doe john@gmail.com
Jane Doe jane@gmail.com
  • [x] Task 1
  • [x] Task 2
  • [ ] Task 3

preview

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This text is italic

This text is italic

This text is italic

This text is italic

~~This text~~ is strikethrough



This is a quote

Traversy Media

Traversy Media

  • Item 1
  • Item 2
  • Item 3
  • Nested Item 1
  • Nested Item 2
  1. Item 1
  2. Item 2
  3. Item 3

<p>This is a paragraph</p>

Markdown Logo

  npm install

  npm start
  function add(num1, num2) {
    return num1 + num2;
  }
  def add(num1, num2):
    return num1 + num2

text editor : Atom

I used Atom as a text editor

you open a file and then save it as .md and start editing your files

Using CTRL+SHIFT+m you can preview your changes before uploading them into remote directory.

Edit your website

you can edit you .yml file to change you website’s theme ” font “color step by step

git push git pull

Uploading local directory into remote repository¶ I am happy with changes I made, and ready to push everything into my cloud repository. Step1: Using git add . to add changes into staging area. Step2: Using add commit -m” any comment” I saved changes into local directory with a comment for future reference. Step3: Using git push I uploaded local directory into cloud or remote repository. Step4: Using git status I checked the status of local directory and staging area. Everything looks good.

Time management

I usually used this schedule to all weeks with little changes to specific weeks

Theming website

I changed logos , colors and links to theming the website by editing my .yml file

# Replace the text below to customize your site
site_name: Zaid M. Marji | Fab Academy 2021
site_description: Fab Academy documentation site Zaid M. Marji
site_author: Zaid M. Marji
copyright: Copyright 2021 Zaid M. Marji- Creative Commons Attribution Non Commercial

site_url: http://fabacademy.org/2021/labs/techworks/students/zaid-marji

extra:
  social:
    # For other social icons at https://squidfunk.github.io/mkdocs-material/setup/adding-social-links/
    - icon: fontawesome/brands/instagram
      link: https://www.instagram.com/zaid_marji/
    - icon: fontawesome/brands/facebook
      link: https://web.facebook.com/zaidmmarji/
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/zaid_marji
    - icon: fontawesome/brands/linkedin
      link: "https://linkedin.com/in/academany"

theme:
  name: material
  palette:
    # try other colors https://squidfunk.github.io/mkdocs-material/getting-started/#primary-colors
    primary: white
    accent: orange
  font:
    # See available fonts at https://fonts.google.com/
    text: Raleway
    code: Ubuntu Mono

  logo: logo1.png
  favicon: images/favicon1.svg
  features:
    - navigation.tabs
    - navigation.instant

plugins:
  - search
  - git-revision-date-localized:
      fallback_to_build_date: true

markdown_extensions:
  - extra
  - smarty
  - admonition
  - codehilite:
      guess_lang: false
  - toc:
      permalink: true

Make sure to take this part as is and save the images in same file the index.md file is in

icon:
    logo: material/school
  favicon: images/favicon.svg
  features:
    - navigation.tabs
    - navigation.instant

the line Icon: needs to be deleted then you can save new logo , other than that the logo from material theme will automatically be selected

font:
  # See available fonts at https://fonts.google.com/
  text: Raleway
  code: Ubuntu Mono

logo: logo1.png
favicon: images/favicon1.svg
features:
  - navigation.tabs
  - navigation.instant

plugins:
- search

after this I made some visual wising illustrator to fit my personal brand.


Last update: June 21, 2021