1. Project Management

Research

During the first week, two tools were used: Git and Visual Studio Code. Git was employed to track progress, save changes, and maintain a record of the project’s development. At the same time, Visual Studio Code was used as the main workspace to write, organize, and document the information related to the week’s activities and the final project.

VS Code

Visual Studio Code

Download
Git

Git

Download

Configuring Git

Git Commands

Command Purpose 
git clone
 Cloned the repository from the Fab Academy server. 
git status
 Checked the current state of the repository. 
git add
 Staged all changes in the repository for commit. 
git commit -m "msg"
 Saved changes locally with a descriptive message. 
git push
 Pushed the committed changes to the remote repository.

Git Installation and Complete Workflow

Let's start by setting up Git. We'll see how to download the code, create your working folder, and easily track every change you make to the project.

1

Navigate to Documents Directory

cd Documents
2

Create Fab Academy Working Folder

mkdir fab
3

Enter the Fab Folder

cd fab
Creating and navigating Fab folder
Fig 1. Creating and accessing the Fab working directory.
4

Clone the Repository

git clone <repository-url>
Repository cloning demonstration
Fig 2. Repository cloning demonstration.
5

Enter the Cloned Repository

cd repository-name
6

Modify Project Files

Edit project files using your preferred editor (VSC) before staging changes.

7

Check Status Before Staging

git status
Git tree showing files in red
Fig 3. File tree in red before staging changes.
8

Stage Changes and Verify

git add .
git status
Git tree showing files in green
Fig 4. File tree in green after staging changes.

Visual Studio Code: HTML and CSS

To document my weekly progress, I’m building my site using HTML and CSS. I use HTML to establish the structural foundation organizing headings, detailed paragraphs, and process images into a logical flow. Then, I use CSS to refine the presentation.

How to Create an HTML Page

1

Install Visual Studio Code

Download it from the official website and install it. Install the Live Server extension to auto-refresh the browser on save.

Visual Studio Code Download
2

Create a Working Folder

  • Create a new folder named my_web_page.
  • Inside, create index.html as the main entry point.
Creating index.html file
Fig 5. Create index.html.
3

Heading Hierarchy in HTML

HTML provides heading tags <h1> to <h5> to structure content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Heading Example</title>
</head>
<body>
    <h1>My Web Page</h1>
    <h2>Section Title</h2>
</body>
</html>
Heading hierarchy example
Fig 6. Example of heading hierarchy.

How to Use CSS

1

Write Your First CSS Rules

CSS rules are written as selectors followed by a block of properties:

body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

h2 {
  color: steelblue;
  border-bottom: 2px solid steelblue;
}
Example of CSS applied to HTML
Fig 8. Result of applying CSS.

Conclusion of the Week

During this week, the main tools used were Git and Visual Studio Code. Git was essential for version control, allowing us to save changes and track progress. Visual Studio Code served as the central environment for writing code and documenting the process.