Week 1. Fab Principles and Practices. Project Mangement¶

Week Assignment

Group assignment:

Objectives for Week 1¶

Plan and sketch a potential final project.
Work through a git tutorial.
Build a personal site in the class archive describing you and your final project.
read, sign the student/instructor/lab agreements,and commit to your repos
work through a git tutorial
build a personal site in the class archive
describing you and your final project

Learning outcomes

Communicate an initial project proposal
Identify and utilise version control protocol(s)
Explore and use website development tool(s)

Have you answered these questions?

Sketched your final project idea(s)
Described briefly what it will do and who will use it
Made a website and described how you did it
Created a section about yourself on that website
Added a page with your sketch and description of your final project idea(s)
Documented steps for setting up your Git repository and adding files to it
Pushed to your class GitLab repository
Signed and uploaded Student Agreement

Individual Assignment¶

I started practicing with the Fab Academy tutorial where it has Principles & Practices, Project Management containing the following resources:

Git Simple Cheat Sheet Fast guide to upload and update your repo to the GIT repo of Fab Academy
Git Extended Cheat Sheet Full guide to GIT for Fab Academy
Migrating Git Repository Original tutorial by: Krisjanis Rijnieks
Setting up MkDocs Original tutorial by: Krisjanis Rijnieks
HTML Basics Original tutorial by: Krisjanis Rijnieks
HTML+CSS Here you can find more resources about working with HTML+CSS.
Git vs. Mercurial Summary
Webpage templates Reference Links A collection of simple and beautiful templates, also you can find here useful resources.
Resize Images using Gimp Tutorial for compressing many image files to web siz.

This can be found from the Fab Academy’s gitlab page too.

It is neccessary to download the following resouces:

PowerShell - to Install PowerShell 7 on Windows - PowerShell is a cross-platform task automation solution made up of a command-line shell, a scripting language, and a configuration management framework. PowerShell runs on Windows, Linux, and macOS.

GIT - to Install Git - Git was built to work on the Linux kernel, meaning that it was built to handle repositories with tens of millions of lines of code from the start. Speed and performance has always been a primary design goal of Git.

Visual Studio Code (VS Code) - to Install VS Code - VS Code is the open source AI code editor

Python - to Install Python - Python is a programming language

SETUP on GitLab¶

After installing Git opened command line and added my Git username and set my email as GitLab repo was created, whih informed by the email from FabAcademy. Then the account was created at https://fablabs.io/ which direct to the Fab Academy Project Page - https://gitlab.fabcloud.org/dashboard/home

  git config –-global user.name “YOUR_USERNAME”

and configured my email address for uploading

  git config -–global user.email “yerlan.turgenbayev@yu.edu.kz”

then it was confirmed with the command

  cat ~/.gitconfig

Webpage prohject was located in the fabcloud

In the project folder the student page was located.

The student page appeared.

SETUP the SSH key¶

The SSH key is a personal key that allows to modify data on GitLab.

I created an SSH key using the ssh-keygen command and selected id_ed25519 as the key type. After generating the key, I copied the public key and pasted it into GitLab under Settings → SSH Keys. I adjusted the title and left the expiration date blank.

After setting up the SSH key, I cloned my repository, added a test file, committed it, and pushed it to GitLab to make sure everything worked correctly.

  PS C:\Users\Администратор> ssh-keygen -t ed25519 -C "yerlan.turgenbayev@yu.edu. kz"
  Generating public/private ed25519 key pair.
  Enter file in which to save the key (C:\Users\Администратор/.ssh/id_ed25519):
  Your identification has been saved in C:\Users\Администратор/.ssh/id_ed25519
  Your public key has been saved in C:\Users\Администратор/.ssh/id_ed25519.pub
  The key fingerprint is: SHA256:JsUoAY7OXzhbFbOOMWGoXr4O4JPeZlW6Bz9HoMkaipU yerlan.turgenbayev@yu.edu.kz

  The key's randomart image is:
  +--[ED25519 256]--+
  |  *******        |
  | 0****00         |
  |**********       |
  |o. ...*+         |
  |ooo+******       |
  |o.********       |
  |.**********      |
  |o**********      |
  | .**********     |
  - +----[SHA256]-----+
  PS C:\Users\Администратор> ssh-add ~/.ssh/id_ed25519
  ~/.ssh/id_ed25519:
  PS C:\Users\Администратор> cat ~/.ssh/id_ed25519.pub
  ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBLHLCrPYrnaQsDUo7JYIYEz9EKV5OPUyKyiqLs3/2RZ yerlan.turgenbayev@yu.edu.kz
   -----BEGIN OPENSSH PRIVATE KEY-----
  b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
  QyNTUxOQAAACASxywqz2K52kLA1KOyWCGBM/RCleTj1Misoqi7N/9kWQAAAKDHUa+gx1Gv
  oAAAAAtzc2gtZWQyNTUxOQAAACASxywqz2K52kLA1KOyWCGBM/RCleTj1Misoqi7N/9kWQ
  AAAEAGydMe6W9JmkwEcmougdLZqY475KAmh3hW7KCGK/vFFBLHLCrPYrnaQsDUo7JYIYEz
  9EKV5OPUyKyiqLs3/2RZAAAAHHllcmxhbi50dXJnZW5iYXlldkB5dS5lZHUua3oB
   -----END OPENSSH PRIVATE KEY-----
  1. Test SSH to the real GitLab host
  ssh -T git@gitlab.fabcloud.org
  2. If SSH works, clone the repository
  git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/waag/students/yerlan-turgenbayev.git
  3. Enter the project folder
  cd yerlan-turgenbayev
  4. Open it in VS Code
  code .

These are the essential Git commands:

  git add index.html – Adds a specific file to the staging area. Alternatively, use git add . to stage all modified and new files at once.
  git pull – Downloads the latest version of the repository to ensure you are working with the most updated copy.
  git merge – Integrates changes from different branches into your working copy.
  git commit -m “describe your changes” – Saves your updates with a descriptive message about the modifications made.
  git push – Uploads your committed changes to the remote repository.
  git init - To create a local git repository in our store folder
  git status - To see what is changed since the last commit
  git add - To add a specific list of files
  git log - To check the history of commits

Building Website with MkDocs¶

After having the Git and GitLab setup, building personal website is the next step.

The MkDocswas recomended by Fab Academy to use it as it is a easy and a static site generator designed for project documentation.

Before intalling MkDocs, It is required to have Python.

Python is a programming language used for developing websites, games, applications, artificial intelligence, and automation tools and it helps run MkDocs and handle the behind-the-scenes part of the website.

I used PIP, whiuch is a package manager to install, update, and uninstall external libraries and modules required for your projects for Python. The following I used the following pip commands for installing, uninstalling, and managing packages, as well as installing all dependencies from a requirements.txt file were used to work with Python.

  pip install package_name       # install a package
  pip uninstall package_name     # remove a package
  pip show package_name          # show info about a package
  pip list                       # show all installed packages
  pip freeze                     # list all packages (for requirements.txt)
  pip install -r requirements.txt # install all packages from a file

This page https://github.com/mkdocs/catalog?tab=readme-ov-file#-git-repos–info has MkDocs projects and plugins and its content has the folllowing:

Git
🎨 Theming 31 projects
💻 API documentation building 26 projects
💬 Blogging 7 projects
📊 Charts, Images, Tables & Graphs 40 projects
🤖 Code execution, variables & templating 22 projects
🌲 Git repos & info 12 projects
🌈 HTML processing & CSS styling 16 projects
📎 Integrations with other tools 13 projects
🌍 Internationalization & localization 3 projects
🔗 Links & references 24 projects
🧩 Markdown extensions 28 projects
🧭 Navigation & page building 28 projects
✅ Quality checks (code blocks, spelling, etc.) 6 projects
🔍 Search & tables of content 5 projects
🍱 Site conversion (PDF/ePUB/etc.) 11 projects
🔧 Site building, site management 22 projects
📁 Snippets & includes (reusing contents) 9 projects

The I installed the MkDocs with following commands:

  pip install mkdocs              # install MkDocs

the Material theme installed

  pip install mkdocs-material     # install Material theme (optional)

Then its installed version checked and upgraded.

  mkdocs --version
  mkdocs -h
  pip install --upgrade pip

All required plugins, including the Git-based date localization plugin and the Python modules were installed:

  pip install mkdocs mkdocs-material mkdocs-git-revision-date-localized-plugin
  python -c "import material, mkdocs_git_revision_date_localized"

and then the local development server was launched to preview the site:

  mkdocs serve

Integration of MkDocs to GITLAB on POWERSHELL¶

    Initializing an MkDocs Project

    mkdocs new my-project
    cd my-project

    It created its structure: 
          my-project/
              docs/
                  index.md
              mkdocs.yml
          mkdocs serve It run at http://127.0.0.1:8000/.

        Adding MkDocs to GitLab Repository

    git init
    git add .
    git commit -m "Initial MkDocs commit"
    git branch -M main
    git remote add origin <your-gitlab-repo-url>
    git push -u origin main

    - **Configurating GitLab CI/CD for MkDocs**

    image: python:3.9

    before_script:
      - pip install mkdocs mkdocs-material

    pages:
      script:
        - mkdocs build
        - mv site public
      artifacts:
        paths:
          - public
      only:
        - main

    - **Enabling GitLab Pages**

    https://<your-username>.gitlab.io/<your-repo-name>/

    git status
    git log --oneline --graph --all

Home Welcome to your new Fab Academy site¶ This is an example student blog for the Fab Academy.

    How to edit it¶
    You can edit it on Gitlab. The software used turns simple text files written in Markdown format, into the site you are navigating.

    No worries, you can’t break anything, all the changes you make are saved under Version Control using GIT. This means that you have all the different versions of your page saved and available all the time in the Gitlab interface.

    In short¶
    This website is built automatically by gitlab every time you edit the files in the docs folder
    It does so thanks to Mkdocs a static site generator written in Python
    You must start customizing the file mkdocs.yml with your information
    You can change the looks of your website using mkdocs themes, you can find in the mkdocs.yml the options for the Material Mkdocs theme
    If you want to start from scratch, you can delete everything (using git-rm) in this repository and push any other static website

After all, Student Page’s can be added, edited and updted by the VS Code.

Conclusion¶

I have studied its details of Principles and Practices:

digital fabrication
links
schedule
rights and responsibilities
assignment
plan and sketch a potential final project

Then I have submitted Fab Academy Student Agreement and then I worked on defining my final project idea and started to getting used to the documentation process.

Why Documentation Matters Neil highlighted several crucial reasons why documentation is essential. Here are the key takeaways that resonated with me:

Tracking Progress – Helps evaluate what’s working and what needs improvement.
Learning Reinforcement – Writing things down strengthens understanding and retention.
Portfolio Building – Serves as a structured showcase of work, ideas, and processes.

Learning outcomes¶

For Project Management, I set up my documentation stack and automated deployment. I first cleaned up the site’s HTML/CSS, standardizing structure, fonts, spacing, and a responsive layout. Then I created an MkDocs project locally, initialized a GitLab repository, and configured a CI/CD pipeline (.gitlab-ci.yml) to auto-build and deploy on every push. Using PowerShell and VS Code, I connected the local workspace to GitLab over SSH, resolved merge conflicts, and verified that pages generated correctly from Markdown. After organizing the repo (docs, images, assets, requirements), the pipeline produced a working site, visible at the project’s Pages URL. Key takeaways: keep content modular, commit often with clear messages, protect main with MR reviews, and treat CI/CD logs as your first stop for debugging broken builds.

Additional exercise with HTML and CSS code¶

“HTML and CSS Codes”

    ```
    About.html
    // Changing the design of about page
    html and css code () {
      // <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
            <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Your name - Fab Academy</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="./style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.google.com/specimen/Libre+Baskerville" rel="stylesheet">

        <style> 
        body {
          background-color: antiquewhite;
        }
        h1{color: whitesmoke;
          background-color: darkseagreen;
        }
        h2{
          color: #FAF8F1;
          background-color: #C58940;
        }
        p 
        {
          color: navy;
          margin: 0;
          padding: 0;
          }
          ul
          {
          color: navy;
          margin: 0;
          padding: 0;
          }
        </style>
      </head>
      <body>
        <div class="container"></div>
          <div class="navbar-inner">
            <a href="index.html">Weekly Assignments</a>
            <a href="final-project.html">Final Project</a>
            <a href="about.html">About me</a>
          </div>
        </div>

        <div class="content">
          <h1>About me</h1> 
          <img src="./images/avatar-photo.jpg" alt="Photo of Your name" />
          <!-- While this is an image from the images folder. Never use absolute paths (starting with /) when linking local images, always relative. -->
          <h1>Yerlan Turgenbayev</h1> 
          </div><p>
            Yessenov University <br/>
            District 32<br/>
            Aktau <br/>
            Kazakhstan <br/>
          </a>

            <h2>Academic background</h2>
            <p> I have the following academic degrees </p>
            <ul>
              <li>a Bachelor's degree in Physics Electronics at Al-Farabi Kazakh National University</li>
              <li>a Master's degree in Management of Technology at NYU Poly, USA</li>
              <li> PhD in Public Administration at Yessenov University.</li>
            </ul>

          <h2>Work experience</h2>

        <footer>
          <p>Copyright 2025 &#60;Your name&#62; - Creative Commons Attribution Non Commercial </p>
          <p>Source code hosted at <a href="https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/waag/students/yerlan-turgenbayev" target="_blank">gitlab.fabcloud.org</a></p>
        </footer>
      </body>
    </html>;
    }
   ```

This code represents my practice with updating HTML and CSS codes, which are fundamental technologies for building and styling web pages. The code consists of two main sections: the HTML and CSS code snippet at the top and the rendered webpage output at the bottom.

The first section displays the HTML structure of a simple personal webpage. The document starts with the basic HTML boilerplate, including the DOCTYPE declaration and html, head, and body tags. The head section contains metadata such as the title, character encoding (UTF-8), and linked stylesheets to apply CSS styling to the webpage. The CSS styles, defined within a - style tag, control the page’s appearance, including the background colors, font styles, margins, and alignment. The CSS defines styles for elements such as the header, navigation bar, sections, and footer to create a structured layout.

The body section includes multiple sections, such as a header, navigation bar, main content area, and footer. The header displays the page title and an image, while the main section presents biographical information and educational background. A navigation bar with menu links allows easy access to different sections of the site. The footer contains contact details and copyright information.

The updated HTML and CSS codes gave the visual representation of the webpage based on the HTML and CSS code. The final output consists of a two-column layout, with a sidebar labeled “About me” that includes a placeholder profile image. The main content section displays the user’s name, biography, and educational background. The design follows a simple and structured layout, using different background colors for contrast and readability.

Through this practice, I improved my HTML structuring and CSS styling skills, focusing on layout design, text formatting, and color customization. This exercise helped strengthen my understanding of frontend web development, which is essential for creating personal webpages, portfolios, and structured web layouts.