WEEK 1: Principles and Practice
Brief Introduction
This assignment marks the initial step toward developing my final project for Fab Academy.It involves outlining a potential idea, understanding its scope, and visualizing its basic concept.
As part of this, I read and signed the student agreement, committing to the responsibilities of the course, and pushed it to my repository using Git.
I also worked through a Git tutorial to become familiar with version control workflows. Additionally, I created a personal website in the class archive that introduces who I am and presents an overview of my proposed final project idea, following the lecture guidelines.
Plan and sketch a potential
Articulated cosplay wings are an exciting and ambitious project that merges mechanical engineering, electronic control, and visual design. Since I already have hands-on experience in mechanical fabrication, electronics, and custom-built control systems, I am well-equipped to develop an advanced wing mechanism that offers both functionality and aesthetics. For the wing motion, I have chosen the scissor mechanism due to its simplicity, reliability, and precise linear expansion. The movement will be powered by a DC motor, providing controlled and smooth actuation of the wings. I aim to use lightweight yet strong materials to ensure both durability and comfortable wearability during cosplay.
Student Agreement
Read, sign (add your name to) the and commit it to your repo Work through a git tutorial.
Click for student Agreement
Build a personal website
Git Basics in Fab Academy Context
Git is a free and open-source version control system developed by Linus Torvalds in 2005. Unlike older systems (like SVN or CVS), Git is distributed—meaning every user has a complete copy of the repository, including its full history, on their local machine.
A version control protocol like Git is a system used to track changes in files and coordinate work among multiple people. Git is the most widely used modern version control system and is especially popular for software development, but it's also useful for managing any kind of digital project.
What Git Does:
Tracks changes to files over time, allowing you to review history and revert to earlier versions.
Facilitates collaboration by allowing multiple people to work on the same project without overwriting each other's work.
Creates branches for experimenting or developing features separately from the main project.
Merges changes intelligently when different versions of a file are combined.
Why We Use Git in Fab Academy:
Documentation: In Fab Academy, documenting each weekly assignment and project is crucial. Git helps manage and publish this documentation (usually through GitLab).
Backup: All files are safely stored online, so you can restore work if something goes wrong locally.
Version Tracking: You can go back and see how your work has evolved over time.
Teamwork: For group projects, Git allows everyone to contribute efficiently without confusion.
Web Deployment: GitLab or GitHub Pages can automatically publish your documentation website directly from your repository Build a personal website in the class archive describing yourself and your final project. Refer to the lecture material for examples. Upload parts 1 and 2, to the class archive.
I received the student Git repository link through my email and used my own mail ID to access it. After logging in, I started exploring the structure of the repository and gradually began setting up my personal webpage. This marked the beginning of my journey into understanding web development using GitHub. I learned how to navigate the repository, organize files properly, and make changes using the web editor. I also gained basic experience in editing HTML and markdown files. Publishing the webpage gave me a practical understanding of version control and how content is updated and managed in a cloud environment.
To begin customizing my webpage content, I navigated through the file structure of the repository and located the about.html page, which is typically used to display personal or background information. I selected this file and opened it using the GitHub web editor. This allowed me to view and understand the HTML structure used to build the page. By examining the existing code, I learned how different tags and elements were used to organize content. This gave me the opportunity to edit the page, add my own details, and start shaping it to reflect my personal profile and background.
After locating the about.html file in the repository, I clicked on the Edit option, which opened the file in the GitHub Web IDE. This online integrated development environment made it easier for me to make real-time edits directly in the browser without needing any external software. The Web IDE provided a user-friendly interface where I could clearly see the structure of the HTML code and make necessary changes. This step helped me understand how small modifications in the code reflect on the webpage, and it was a hands-on way to learn basic web development and file handling through GitHub.
Once the about.html file was open in the Web IDE, I made the necessary edits by modifying the text and structure to include my own information, such as my background, interests, and goals. The Web IDE allowed me to see the changes clearly and understand how the HTML tags affected the layout. After completing the edits, I used the Source Control option—accessible from the sidebar or by pressing Ctrl + Shift + G—to stage the changes. This step is essential to prepare the updated file for committing, ensuring that my edits are tracked properly in the version control system
After staging the changes through the Source Control panel, the next step was to save and upload the modifications to the repository. I did this by clicking the Commit and Push to main button. This action commits the changes I made in the about.html file with a message (usually describing the update) and then pushes those changes to the main branch of the GitHub repository.
This ensures that my edits are not only saved locally in the Web IDE but also updated in the live version of the webpage, making the changes visible to anyone who visits my site.
I Once I clicked the Commit and Push to main button, a success message appeared confirming that my changes had been committed successfully. This message reassured me that the updates I made to the about.html file were now saved and synchronized with the online repository. After seeing this confirmation, I proceeded by clicking on the Go to Project button.
After confirming that my changes were successfully committed, the next step was to click on the Build Pipeline option. This action directs me to the pipeline view,where the system automatically builds and deploys the changes I’ve made. The build pipeline processes the latest updates to ensure everything functions properly, from code formatting to ensuring the webpage runs without errors. It is an essential step in the continuous integration and deployment (CI/CD) process, ensuring that all changes are properly tested and deployed to the live environment for public access.
Once I clicked on the Build Pipeline, the system started processing the changes. After a short wait, the status displayed a green tick mark next to "Passed," indicating that the build process was successful. This green tick is a confirmation that the changes I made were tested and deployed without any issues, ensuring that the webpage was functioning as expected. It reassured me that there were no errors in the code or deployment process, and my updates were now live and accessible. This status is a key indicator that everything is running smoothly in the pipeline.
After seeing the green tick mark indicating a successful build, the next step was to click on the Jobs section. This option provides a detailed view of all the individual tasks or steps involved in the build pipeline. Clicking on Jobs allowed me to track the progress of each specific task, such as code compilation, testing, and deployment. It gave me a deeper insight into the entire process, allowing me to check whether each stage completed successfully or if there were any issues. This step is useful for monitoring the detailed execution of the pipeline and troubleshooting if necessary.
After the build pipeline successfully passes and all jobs complete, the changes I made to the about.html file will be reflected in the live version of the webpage. I can now open the webpage in a browser to verify that my updates, such as the new content and layout modifications, are visible. This step ensures that all changes have been properly deployed and are displayed correctly to users who visit the site. It’s an essential part of the process, confirming that the deployment was successful and the site is up-to-date with the latest edits.
While exploring various methods to upload a webpage, I found several options that seemed complicated, but this particular method appeared to be the easiest for me
to follow and implement. Along the way, I also discovered different image and video compression software tools to minimize file sizes, ensuring faster load times
for the webpage. The entire design and layout of the page were created by me from scratch, without using any templates. To achieve this, I learned HTML and CSS
as I went along, adapting them to my specific needs. It has been a very interesting and rewarding learning experience.
Image & Videos Compression
Image Compression
The purpose of image compression in GitLab—especially in contexts like Fab Academy documentation—is to optimize your repository and website performance by reducing image file sizes without significant loss of quality.
I searched on Google for online image compression tools.
I found a website called Image Compressor Online.
It helps reduce image file sizes quickly without losing much quality.
Faster Website Loading: Compressed images load faster on your GitLab Pages website, improving the user experience for mentors, evaluators, and visitors.
Smaller Repository Size: Large, uncompressed images make your Git repository heavy, which can slow down cloning, pushing, or pulling. Compression keeps the repo
lightweight and efficient.Quicker Commits and Uploads: Uploading or committing large images takes more time and bandwidth. Compressed images speed up this process.
Avoiding Quota Limits: GitLab has storage and bandwidth limits (especially for free tiers). Efficient image compression helps you stay within those limits.
Better Version Control: Every time you change a large image, Git stores a new version. Smaller images reduce the storage impact of versioned media.
In Fab Academy, optimizing images is part of maintaining clean, efficient, and accessible documentation—a core part of the evaluation criteria.I searched on Google for online Video compression tools.
i selected
1. Reduce File Size
Raw videos from phones or cameras can be hundreds of MBs or even GBs.
Compression reduces them to a more manageable size (often under 10–20 MB), saving storage space.
2. Faster Uploads and Clones
Git repositories are not designed for large media files.
Compressed videos upload faster and reduce the time needed to clone or pull the repository.
3. Stay Within GitLab Storage Limits
GitLab imposes file size and storage limits per project or group.
Keeping videos small helps you stay within the allowed quota.
4. Web Compatibility
Compressed videos (e.g., in MP4 format using H.264 codec) are more likely to be playable in web browsers, especially when embedded
in GitLab Pages.
5. Easier Evaluation and Sharing
Best Practices for Fab Academy:
Convert videos to .mp4 (H.264) format.
Keep resolution around 720p unless higher clarity is essential.
Target video sizes under 10–30 MB, depending on duration.
Link to YouTube or Vimeo for large videos instead of hosting them in the Git repo.
Mentors and evaluators can view videos quickly without waiting for large files to buffer or download. Video Compressor refers to the process of reducing a video's file size while maintaining as much of its original quality as possible. It's essential for online sharing, storage, and email attachments, according to VEED.IO. Various online tools and software, like VEED.IO, Media.io, and Rotato, offer this functionality.