Week 1. Project management

Project definition

Making a decision on what my final project would be, proved to be quite hectic, as much as I want to achieve a lot with the implementation of the anticpated skillset, time is of the essence. In Week 1, I was planning on taking up the challenge of a Smart Energy Monitoring and Optimization Hub, but decided in Week 2 to start with the TickTime Pomodoro. The sketches are on the page Final Project.

Signed student agreement

Every student of Fab Academy is required to read and sign an agreement, as we have obligations as students. See below a copy of my signed agreement:

Build the webpage

The journey of creating a personal website for Fab Academy was both challenging and rewarding. Initially, I was given a basic template, which, while functional, lacked the design and responsive features necessary to showcase my work effectively. Thus began the process of tailoring the site to better represent my learning, experiences, and progress throughout the Fab Academy program. As I continued refining my website, I found the balance between functionality, aesthetics, and a seamless user experience to be key in building the site.

Technologies and Tools Used

To begin with, I chose to build the site using a combination of modern web technologies, all aimed at creating a responsive, clean, and easily navigable experience. The main technologies I employed included:

• Bootstrap 5: I decided to use Bootstrap 5 due to its versatility and responsive grid system. I took inspiration from Net Ninja's Bootstrap 5 Crash Course Tutorial, which provided in-depth coverage of Bootstrap’s core components, such as the navbar, grid system, and layout utilities. The course helped me get up to speed and use these tools effectively to design a site that adapts beautifully to different screen sizes.
• Font Awesome: To enhance the user interface, I incorporated Font Awesome icons, which added visual clarity to the website’s navigation and layout, helping the user to easily identify sections or actions.
• Custom CSS: I crafted custom styles in a custom.css file to further personalize the template and fine-tune the layout beyond the default Bootstrap styles. This allowed me to incorporate personal branding and Fab Academy's color scheme, making the website feel professional and aligned with the program's ethos.
• Text Editors: For editing HTML, CSS, and JavaScript, I used Notepad++ and IntelliJ IDEA, both of which offered a good balance of lightweight functionality and powerful features for coding. They also provided quick ways to preview changes and iterate on the design efficiently.
• Google Chrome Developer Tools: These tools proved invaluable, allowing me to inspect and tweak the site’s layout and performance in real-time. This ensured a smooth user experience across all devices.

Responsive Layout Using Bootstrap's Grid System

The first major hurdle I tackled was ensuring that the website was responsive—that is, it should look great on desktops, tablets, and smartphones. I knew that Bootstrap’s grid system would be a perfect fit, so I dove into learning how to structure the page with rows and columns that would adjust to the screen size.

The grid system works by dividing the page into 12 columns, which can be flexibly resized across different breakpoints (from small screens like phones to large screens like desktops). This made it easy to achieve a balanced layout without needing to resort to complex media queries or custom CSS hacks.

Website Structure Overview

The next step was mapping out the website’s structure. The goal was to design something that was not only visually appealing but also easy to navigate and logical in its flow. The final design consists of two main sections:

1. Sidebar Navigation: The sidebar serves as a map to the different sections of the documentation. It’s a persistent feature that remains visible as you scroll down the page, providing quick access to other sections without losing the user’s place on the page. This makes the navigation smooth and intuitive.
2. Main Content Area: This is where the documentation, project details, and additional content are displayed. The design allows for easy reading and interaction, with appropriate headings and subheadings guiding the user’s journey through the material. It is the heart of the website where users can engage with the content in a structured, organized manner.

Personalizing the Template

After settling on the overall structure, the fun part began—personalizing the template! The default template was clean, but I wanted it to reflect the Fab Academy ethos—modern, functional, and easy to navigate. I made several adjustments to bring it to life:

• Customizing the color scheme to match the Fab Academy branding, making the website look professional and in harmony with other Fab-related projects.
• Refining the sidebar with CSS to ensure it was both aesthetically pleasing and easy to use, with clear fonts and properly sized icons for navigation.
• Integrating Font Awesome icons into the sidebar and main content for intuitive, visual guidance through the pages.

Challenges and Solutions

As with any design process, there were a few challenges along the way. The main issue I faced was ensuring that the layout remained functional across different screen sizes. There were times when the layout components wouldn’t adjust properly on smaller devices. However, Bootstrap’s responsive classes made it easy to fix these issues:

• Challenge: The layout didn't scale well on mobile devices.
• Solution: By using Bootstrap’s grid system and applying the appropriate column classes like col-md- and col-sm-, I ensured that the website’s content rearranged itself according to the screen width.
• Challenge: The sidebar was overlapping with the main content on narrower screens.
• Solution: I recalculated the containers of the sidebar and main content, ensuring they matched 12 grid.

Testing the Website

Once the initial design was in place, testing was the next critical step. I tested the website on various devices—smartphones, tablets, and desktops—using Chrome Developer Tools to simulate different screen sizes. This allowed me to make adjustments in real-time, ensuring the site maintained its integrity across all platforms. Cross-browser testing was also essential, and I ensured the site looked and worked well on all modern browsers like Chrome, Firefox, and Edge.

Feedback from peers was invaluable, as it provided insights into potential usability improvements. I made sure to adjust the site according to this feedback to ensure the best possible user experience.

Conclusion

Creating this website was an immensely satisfying process, blending creativity with technical skills. The use of Bootstrap 5 allowed me to create a responsive site that could scale across multiple devices, while custom CSS added a personal touch. By continually testing and refining the site, I was able to create a seamless user experience. Moving forward, I plan to further enhance the website by adding additional sections and features to better showcase my Fab Academy journey. This project has given me an opportunity to explore both the technical and creative aspects of web development, which will undoubtedly aid me in future projects.

Inspiration and Learning Resources

Along the way, I found valuable resources that helped me learn and grow in my web development journey. One such resource was Ivan Sanchez Milara’s Fab Academy page, whose site served as a pilot template. Using the google chrome developer tool, I explored his site and built upon it. Ivan’s journey through Fab Academy gave me practical insights into the whole process and motivated me to push my design and documentation skills further. I also explored other Fab Academy alumni pages, gathering insights on how they structured their websites and incorporating ideas into my own design process.

Git and Upload to Class Archive

My journey with the Global Fablab community began with the boot camp, followed by an introduction to Neil and the warm, collaborative network of Fab Academy participants worldwide.

Our first onsite meeting was with Ivan Sanchez Milara, our instructor for Principles and Practices / Project Management. Although I had prior experience with Git, Ivan provided deeper insights into the rationale behind our workflow and best practices from an advanced user’s perspective.

What is Git and GitLab?

Git is a distributed version control system that allows developers to track changes, collaborate on projects, and maintain code history efficiently. GitLab, on the other hand, is a web-based DevOps platform that provides Git repository management along with CI/CD pipelines and issue tracking.

Setting Up Git

We were introduced to different ways of creating and managing our Fab Academy website. Below is the workflow I followed:

1. I already had Git Bash installed on my computer. If you need Git, you can download it from the official webpage.

   

2. I had previously created an account on GitLab FabCloud.

3. Generating an SSH Key

   Since SSH keys are the only way to authenticate Git operations in FabCloud, I generated one using:

   ssh-keygen -t rsa -b 4096 -C "samaechi22@student.oulu.fi"

   This command creates two files in the ~/.ssh/ directory:

   • id_rsa (the private key, which should never be shared)
   • id_rsa.pub (the public key, which we copy and add to GitLab)

   

4. Adding the SSH Key to GitLab

   After generating the SSH key, I copied the contents of id_rsa.pub using:

   cat ~/.ssh/id_rsa.pub

   Then, I added it to GitLab under User settings → SSH Keys.

   

5. Testing the SSH Connection

   To verify if GitLab recognized my SSH key, I used:

   ssh -T git@gitlab.fabcloud.org

   A successful setup returns a welcome message.

   

Git Workflow

Once the SSH key was set up, I followed this workflow for managing my repository:

1. git pull – Fetches and merges changes from the remote repository.
2. git add . – Stages all modified and new files for the next commit.
3. git commit -m "Descriptive message" – Saves the staged changes with a meaningful message.
4. git push – Uploads local commits to the remote repository.
5. git status – Displays the current state of the working directory and staging area.

Resizing Images for Documentation

To keep my repository lightweight, I used ResizePixel. ResizePixel is an online tool that allows users to resize, compress, crop, and optimize images without losing quality. I used it specifically to reduce the file size of my documentation images before uploading them to my repository, ensuring faster loading times and efficient storage use.

GitLab CI/CD Pipeline

My repository contained a .gitlab-ci.yml file, which is used for automating deployment and other tasks. Since I followed the standard Fab Academy setup, I did not need to modify it. This file ensures that my site is built and deployed automatically whenever I push changes.