1. Project Management

Research

In the first week, two tools were used for documentation: Git and Visual Studio Code. Additionally, a sketch of the final project ideas was created.

Installed Software

This week, the following software will be used. You can download the programs using the following links or by searching for the program names in your browser:

Software Function
Visual Studio Code Code editor for HTML and CSS development
Git Free and open-source distributed version control system

Configuring Git

Using a Git Bash terminal on Windows, navigate within the directories as shown in the image below.

Navigating directories in Git Bash

Fig 1. Navigating directories in Git Bash

Git Commands

Enter the Documents folder:

cd Documents/

Create a new folder:

mkdir fab

Enter the fab folder:

cd fab

Cloning the Repository

The HTTPS clone command was used to download the repository to the local network, setting the username and email.

Cloning repository

Fig 2. Cloning repository

To set up the user environment, use the following commands:

git config --global user.email "user@email.com"
git config --global user.name "YourName"

Fundamentals of Git

First, use git add . to stage all the changes made. Then, verify the status of the repository with git status, which shows which files have been modified, added, or deleted. Next, perform a commit that saves the changes using the command git commit -m "First progress".

After performing the commit, the changes are pushed to the remote repository using the command git push. Finally, use git status again to ensure there are no pending changes.

Git Fundamentals

Fig 3. Example of Git status

Git Commands

Fig 4. Example of Git comand add and commit

Visual Studio Code: HTML and CSS

To document the progress made during the week, we use HTML and CSS for our web page. HTML (HyperText Markup Language) is the basic language for creating the structure of a web page. With HTML, you define elements such as headings, paragraphs, images, tables, and links.

Navigating directories in Git Bash

Fig 5. Example of h1, h2, etc.

Cloning repository

Fig 6. Example of a list

Cloning repository

Fig 7. Example of image

HTML Commands

The table below shows a list of common HTML commands and their descriptions. These commands are used to structure and format web pages, you can see examples of HTML showing the basic commands that we will use for our documentation, such as creating a table or uploading an image.

Command Description
<p>Creates a paragraph.
<img>Inserts an image.
<a>Creates a hyperlink.
<td>Defines a table data cell.
<th>Defines a table header cell.
<tr>Defines a row in a table.
<h1> - <h6>Defines heading levels.
<ul>Creates an unordered list.
<ol>Creates an ordered list.
<li>Defines a list item.
<div>Defines a section or container.
<hr>Inserts a horizontal line.
<strong>Defines bold important text.
<title>Defines the document title.
<style>Defines CSS styles.
<header>Defines a header section.
<footer>Defines a footer section.
<nav>Defines a navigation section.
<button>Defines a clickable button.

CSS

CSS (Cascading Style Sheets) is the language used to style and design a web page. With CSS, you can control colors, fonts, margins, and sizes.

In the lower-left image, we can see an example of CSS creating a green table, and on the right side, the code necessary to give this format to the table where:

  • Sets the table width to 100% and collapses the borders.
  • Applies borders and padding to the cells.
  • Gives a green background and white text to the header cells.
HTML Code Example 7

Fig 8. Applying CSS for styling.

HTML Code Example 8

Fig 9. Example of table with CSS code to add colors, table borders, and a background.

Conclusion

During this initial week, the documentation process was learned using tools such as Git and Visual Studio Code. The necessary programs were installed, basic configurations were made, and progress in HTML and CSS was documented. Examples of code and commands used were also recorded.