Jan 21, 2026

Prev Next

Week 1

AI prompt: “The first week requires a picture where this grandmother studies the following topic: Principle and practice, project management, this implies the creation of a personal web page (html, css), gitlab settings”

Principles and Practices

Before moving on to the description of my final project, I would like to share the ideas I had during the past month. I also want to mention that I discussed my ideas with ChatGPT to generate visual concepts of my projects, which helped me better understand and refine them.

Idea 1

At first, I wanted to design a smart flower pot using 3D printing, where I would integrate electronics to measure the soil moisture and display the data on a small screen embedded in the pot. Additionally, it would show the room temperature and the current time. The main purpose of this smart flower pot was to remind me when it is time to water the plant.

Below is an AI-generated concept image of this idea, along with the prompt that was used to generate it.:

AI prompt: “Generate a concept image of a smart plant pot with sensors and a display showing moisture percentage, time, and watering notification.”

Idea 2

Considering the political situation in the region, a new idea came to my mind. I wanted to include a model inspired by Mount Ararat in my project. Initially, I planned to create a decorative Mount Ararat model with sensors: when touched, lights would turn on and Armenian music (such as Aram Khachaturian, Komitas, etc.) would start playing. Here is one example of the AI-generated concept image:

AI prompt: “Generate a concept image of a decorative Mount Ararat model that turns on lights and plays Armenian music when touched.”

Idea 3

Due to the ongoing political tension, the concept of Mount Ararat still remained part of my final project ideas. I wanted to design and create a chair using MDF, where the backrest would have the shape of Mount Ararat. The chair would be smart: it would detect when a person sits on it and start playing Armenian music(Sayat-Nova, Tigran Mansuryan, etc).

AI prompt: “Generate an image for smart chair which looks like mount Ararat, It will be have a display temperature, humidity, time, music, and sensor when a human is set his feel.”

In any case, I really like this idea, and I hope that one day I will be able to bring it to life:

Final Project Idea

Finally, coming back to the present day, I now feel confident about what my final project will be. After realizing that politics is not something I want to focus on, I decided to create a game that helps people relax and think about positive things. Below is an AI-generated image of the game concept:

AI prompt: “Generate a photorealistic image of a tabletop maze game made from wood, featuring a small robotic car collecting glowing coins, obstacles, and walls. Include a digital display showing coins collected and time left, and a joystick controller held by a human hand.”

The game will be built on an MDF board, featuring a robot that will be controlled using a joystick. The goal is to collect a predefined number of coins within a limited time.

The coins will be implemented using light sensors, and each time the robot passes over a sensor, the collected coin count will be displayed on a screen. If all the coins are collected within the given time, the screen will display “Win”, otherwise “Game Over.”

I hope I will be able to bring this idea to completion, and that together with the FabLab team, we will have a new game.

Project Management

Before starting my documentation, I followed the general structure and documentation guidelines using the documentation of Onik Babajanyan, who is also my husband 😄
Thank you both for being my husband and for the great documentation.

To proceed in an organized and structured way, I first created the necessary folders on my desktop. I organized them as follows:

• input_images — a folder where I store all the images needed for the website (before size compression),
• mariam-daghbashyan — the main folder containing the entire website content,
• compress_images.py — a Python script used to compress and save images from the input_images folder into the appropriate subfolders inside the website directory.

After downloading Git from the official website and completing the installation process, right-click on the folder where we need to install my project we see a context menu option for Git Bash Here. Selecting this option will open Git Bash with my current directory.

Several initial configuration steps are required. First, we need to define our username and email address in Git. This is important because every Git commit uses this information, and it is permanently included in the commit history.

 config --global user.name "Mariam Daghbashyan" 
 config --global user.email "mardaghbash@gmail.com"

To verify that the configuration was applied correctly, I used:git config --listThis command allows us to check whether the correct settings are in place before moving forward.

SSH Key Generation

Git servers identify users using SSH public keys. To generate a public key, I executed the following command in the terminal (Git Bash on Windows / Terminal on Linux or macOS):ssh-keygen

After generating the key, it needs to be copied and added to the Git servers account. The SSH key is located in the following directories: Windows (Git Bash): /c/Users/USERNAME/.ssh/ Linux / macOS: /home/USERNAME/.ssh/ or /Users/USERNAME/.ssh/

After this step, my local machine was successfully authenticated with the remote Git server, allowing secure cloning, pushing, and pulling operations without repeatedly entering a username and password.

Now, using screenshots, I will demonstrate how I added the SSH key to my gitlab.

Now I can clone (with SSH) repository from Git account to my local machine using the following command git clone [repository-url]. Before doing so, I first navigate to the desired directory where I want to clone the project.

I decided to work with Visual Studio Code, as I already have experience using this environment. First, I visited the official VS Code website and downloaded the installer.

I had already cloned my project repository from Git, the project was available on my local machine as mariam-daghbashyan.

then opened it in Visual Studio Code using:File → Open Folder → select project folder

The Git Workflow Explained

In our workflow, the following Git commands are required to transfer local changes to the Git repository. This process involves moving changes through the main stages: the working directory, the staging area, the local repository, and finally the remote repository.

• git add: This command adds changes from your working directory to the staging area. It tells Git which specific file modifications you want to include in the next commit.
• git commit: This command takes the snapshot of the changes currently in the staging area and permanently records it in your local repository history as a new commit object with a unique ID.
• git push: This command uploads the committed changes from your local repository to a remote repository (such as GitHub, GitLab, or Bitbucket), making them visible to others and providing a remote backup.

Below is an example of executing these commands in my project.

After pushing the changes, the new commit will appear in the Commits section with a success status icon, indicating that the update was completed successfully. At this point, we can already check and preview our website.

HTML/CSS Workflow and Template Usage

I also downloaded an HTML template (Massively), as I planned to work with pure HTML and CSS. This template helped me organize the layout and structure of my website more quickly and efficiently.

A minimal, valid HTML document for HTML5 requires specific tags to ensure proper structure and rendering by web browsers. The required components are:

• <!DOCTYPE html>: This declaration is the very first line of any HTML5 document and is an instruction to the web browser about the version of HTML being used. It is not an HTML tag itself.
• <html>: This is the root element of the HTML document. All other elements are nested inside this container.
• <head>: This section contains metadata about the document that is not displayed on the web page itself, such as the page title, links to stylesheets, and script definitions.
• <title>: This tag defines the title of the document, which appears in the browser's title bar or page tab and is important for bookmarks and search engine results.
• <body>: This section contains all the visible content of the web page that users interact with, including text, images, links, etc.

To become more familiar with HTML and CSS structure and to improve skills in building web pages, I recommend the following resources: L I N K S

In addition, I used Bootstrap via CDN links in my website. The steps were:

1. Go to the official Bootstrap website and click on Getting Started. There, I found the required CDN links.
2. Copy both the CSS and JavaScript CDN links.
• CSS: https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css
• JS: https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js
3. Insert the links into the HTML document:
• Paste the CSS link inside the <head> tag, before any other stylesheets
• Paste the JavaScript link before the closing </body> tag

Website Structure

For every new page of the website, it is necessary to create a new .html file.

This is how I organized the overall structure of my project:

I would like to mention the main tags that I frequently used while creating my web page.

I mainly used <h1></h1>, <h2></h2>, and <h3></h3> tags for headings. These tags automatically increase the text size and make it bold. However, when I wanted the text to be bold but not appear as a heading, I used the <b></b> tag.

I placed regular text inside the <p></p> tag. When creating blocks or sections, I used the <div></div> tag.

Now I will provide an example of a block that I frequently used when I wanted to place an image. First, I should mention that I insert images using the <img></img> tag by linking to the appropriate image directory. This example also demonstrates my use of Bootstrap classes. I simply assign a class with the appropriate name, which replaces the need to write additional CSS code.

When I want to include code snippets on my webpage, I use the <code></code> tag. For longer code sections, I use the <pre></pre> and <code></code> tags together to preserve formatting and structure.

Since there is a limitation that each commit should not exceed 10 MB, I generated a Python script to compress images while preserving acceptable visual quality.

I initially asked GitHub Copilot (AI pair programmer) to generate a compression script and then modified the code to match my specific folder structure and workflow. The script processes images from a source directory and saves the compressed versions into the public/images directory of my project in an organized way.

Before compressing the images, I stored all the required raw images in an input-images folder located at the same directory level as the project. Inside this folder, I created separate subfolders for each week, in order to maintain a clean and well-organized workflow.

The Python script automatically:

• Reads images from each weekly subfolder inside input-images
• Creates the corresponding folders inside public/images
• Compresses and resizes the images
• Saves them in the target directory with sequential numbering

Below is the Python code used for image compression:

import os
from PIL import Image

input_folder = "input_images"
output_base_folder = "mariam-daghbashyan/public/images"
base_name = "image"
quality = 60  # JPEG quality
max_size = (1024, 1024)  # resize images if larger than this

# Supported image formats
supported_formats = (".jpg", ".jpeg", ".png")

count = 1

for folder_name in os.listdir(input_folder):
	input_subfolder = os.path.join(input_folder, folder_name)
	if not os.path.isdir(input_subfolder):
		continue

	output_subfolder = os.path.join(output_base_folder, folder_name)
	os.makedirs(output_subfolder, exist_ok=True)

	for index, file_name in enumerate(os.listdir(input_subfolder), start=1):
		if not file_name.lower().endswith(supported_formats):
			continue

		input_path = os.path.join(input_subfolder, file_name)
		img = Image.open(input_path)

		# Resize if image is too big
		img.thumbnail(max_size, Image.LANCZOS)

		# Convert PNG with transparency to RGB
		if img.mode in ("RGBA", "P"):
			img = img.convert("RGB")

		# new_name = f"{base_name}_{index}.jpg"
		output_path = os.path.join(output_subfolder, file_name)

		try:
			img.save(output_path, "JPEG", quality=quality, optimize=True)
			print(f"Saved: {output_path}")
			count += 1
		except Exception as e:
			print(f"Error saving {output_path}: {e}")

print("✅ Image compression completed!")
									

AI prompt: ”Can you provide me with Python code for image compression, without changing image quality”

To run the script, I opened the VS Code terminal, navigated to the directory containing the compress-images.py file, and executed the following command: python compress-images.py or py compress-images.py.

import os
from moviepy import VideoFileClip

input_folder = "input_videos"
output_base_folder = "mariam-daghbashyan/public/videos"
base_name = "video"

# Compression settings
target_bitrate = "1000k"  # Lower is smaller/lower quality (e.g., 500k to 2000k)
max_width = 1024          # Max width to keep files small

# Supported video formats
supported_formats = (".mp4", ".mov", ".avi", ".mkv")

for folder_name in os.listdir(input_folder):
    input_subfolder = os.path.join(input_folder, folder_name)
    if not os.path.isdir(input_subfolder):
        continue

    output_subfolder = os.path.join(output_base_folder, folder_name)
    os.makedirs(output_subfolder, exist_ok=True)

    for index, file_name in enumerate(os.listdir(input_subfolder), start=1):
        if not file_name.lower().endswith(supported_formats):
            continue

        input_path = os.path.join(input_subfolder, file_name)
        # new_name = f"{base_name}_{index}.mp4"
        output_path = os.path.join(output_subfolder, file_name)

        try:
            # Load video
            clip = VideoFileClip(input_path)

            # Resize if width is larger than max_width (maintains aspect ratio)
            if clip.w > max_width:
                clip = clip.resized(width=max_width)

            # Compress and Save
            clip.write_videofile(
                output_path, 
                codec="libx264", 
                audio_codec="aac",
                temp_audiofile="temp-audio.m4a", # Helps avoid audio permission issues
                remove_temp=True,
                fps=24, # Standardize frame rate to save space
                ffmpeg_params=['-crf', '24', '-preset', 'slow'] 
            )
            
            clip.close()  # Critical to release the file handle
            print(f"✅ Saved: {output_path}")

        except Exception as e:
            print(f"❌ Error processing {file_name}: {e}")

print("🚀 Video compression completed!")

During Week 1, I set up my development environment and built a solid foundation for the upcoming assignments. I installed and configured all the required software tools, including Visual Studio Code and Git, and successfully cloned and organized my project repository. I also reviewed the website structure, practiced basic Git workflows, and ensured everything was functioning correctly.

This week helped me refresh essential skills in version control and development workflows, which will be critical for efficient documentation and project development throughout the course.

AI prompt: “And when finished first week”