Week 01 — Principles & Practices / Project Management

Goal for Week 01: set up a clean documentation workflow (website + Git) and make my first real edits/commits. This page is written as a documentation log: steps, commands, problems, and fixes.

Checklist

· Install Git on macOS
· Understand the GitLab workflow (edit → commit → push → website updates)
· Clone my repository locally
· Set up VS Code for editing
· Prepare SSH key for GitLab (recommended)

Git and Version Control

In the Fab Academy program, version control is an essential tool for managing projects and documentation.
I explored multiple ways of working with Git, including local setup and online editing,
and ultimately chose the method that best suits my workflow with Visual Studio Code.

Attempting Local Deployment

To better understand the principles of version control, I first experimented with a local Git environment. Here are the steps I followed:

1. I installed Visual Studio Code as my local text editor.

What I Learned and Reflections

By trying both approaches, I not only learned the practical use of Git but also understood the differences and advantages of each method:

· Local tools (VS Code + Git Bash) are ideal for large-scale or complex development;
· The GitLab Web IDE is perfect for frequent, smaller updates and easy access from any device;
· Regardless of the method, the core principles of version control remain the same — every change should be tracked, documented, and reversible.

This experience helped me appreciate Fab Academy’s “learning by doing” philosophy. More importantly, it allowed me to choose a workflow that keeps me productive and focused while still respecting good version control practices.

Building a Personal Website

First, I decided to use HTML+CSS as the website's tech stack and deploy it via GitLab Pages. After consulting ChatGPT, I finalized the website file structure as follows: index.html: The homepage, including a navigation bar, personal introduction and project showcase section about.html: The About Me page, used to introduce my personal background and interests style.css: The global stylesheet, covering style settings for the navigation bar, card layouts and more script.js: Handles the logic for interactive animation effects ChatGPT also provided me with standardized coding guidelines.

Conclusion

With the assistance of ChatGPT, I successfully completed the Week 1 assignment for Fab Academy, with the following key deliverables:

· Built a personal website using GitLab Pages
· Implemented a clean flat design style
· Optimized the website's interactive experience
· Adjusted the font styles and image layout of the website
· Completed the full deployment of the website on GitLab Pages

ChatGPT's specific support for this assignment included:

· Code assistance: Provided complete HTML, CSS and JavaScript code templates
· Design optimization: Helped select a tech-style UI, refine the page layout and enhance the visual effects of buttons
· Debugging: Resolved the issue of the margin-top property not functioning properly in the style.css file
· Deployment guidance: Provided detailed steps for deploying the website on GitLab Pages

Throughout the entire web development process, ChatGPT saved me a great deal of time and enabled me to build a high-quality personal website for Fab Academy!

This is my complete documentation of designing a Fab Academy personal website with the help of ChatGPT.
If you have a similar task to complete, I highly recommend giving ChatGPT a try—it’s incredibly efficient!