Week 1: Project Management

This page presents the process of creating and updating my repository used to document the Fab Academy weekly work.

Before starting

Before uploading any documentation to the repository, it is necessary to install and configure the required software tools that allow the communication between the local development environment and the cloud-based repository.
These tools enable version control, code editing, and synchronization of files throughout the documentation process.

Visual Studio Code:

VS Code it's a code editor used to develop and edit files such as HTML, CSS, and JavaScript, among other programming and markup languages.

Git:

In the Fab Lab, Git is used as a version control system to upload, update, and maintain weekly documentation. It allows changes made on the local machine to be tracked and pushed to a remote repository hosted on the Fab Cloud.

Cloud and software connections

During the Fab Academy application process, our email addresses were registered and are used as the primary communication channel for receiving access links and credentials. This allows us to access the repository previously created under our name on GitLab, with all the tools and resources provided by the Fab Academy.

Git ecosystem

The Git ecosystem consists of a local working directory, a staging area, a local repository, and a remote repository hosted on the Fab Cloud.
To connect to the Git repository, you need to install and configure Git Bash. This tool provides a terminal interface where you can run commands to manage both local files and the remote repository.
Some of the essential commands to learn early on include those used to synchronize the local repository with the cloud, upload changes, and manage version control. These basic commands are summarized in the following command blocks.

git clone "URL"

It is used to create a complete local copy of a remote repository, including all files and version history. It is typically run only once, when accessing the project for the first time.

cd "folder"

It is used to navigate to a specific directory within the terminal.

cd ..

It is used to go to the previous folder.

git add .

Adds all modified files to the staging area in preparation for a commit.

git add "name-of-file"

Is used to add a specific file to the staging area.

git commit -m "message"

Records the staged changes into the local repository by creating a new commit. The commit message provides a concise description of the changes made, helping to track the project’s development over time.

git push

Uploads the committed changes from the local repository to the remote repository hosted on the Fab Cloud.

git pull

Downloads the latest changes from the cloud repository and automatically integrates them into the local project.

Once the environment is properly set up, the first step is to clone the remote repository.

Select the local directory where the project will be stored on the computer; in this case, the “EXFAB”.

Before, open this folder in Visual Studio Code and create a new terminal.

At this point, we need to access to the online repository and copy the project’s repository URL.

git clone https://gitlab.fabcloud.org/academany/fabacademy/2026/labs/puebla/students/derek-rodriguez.git

To verify that the process was successful, all folders and files visible in the online repository should also appear in the VS Code file explorer within the personal repository.

To update the online repository and keep it synchronized with the local repository, the following three steps must be followed:

git add .

Adds all modified files to the staging area in preparation for a commit.

git commit -m "Prioritary"

git push

Uploads the committed changes from the local repository to the remote repository hosted on the Fab Cloud.

Before moving on to the next step, it is essential not to delete the .gitlab-ci file, since without it we will not be able to access the cloud.

HTML & CSS Basics

HTML is the markup language and foundation of web content. It defines the structure and content of web pages, allowing browsers to interpret the code and display it as a custom web page. Generally, tags are written between angle brackets, and most work in pairs, with an opening and a closing tag, which together form the basic structure of any web page.

The basic tags used in this programming style are the following:

<!DOCTYPE html>

Declares the document type and HTML version used. It instructs the web browser to render the page according to the HTML5 standard, ensuring consistent behavior and compatibility with modern browsers.

<html>

It contains the HTML document metadata, which are <head> and <body>.

<head>

Contains the metadata of the HTML document, like:

<meta charset="utf-8">

It supports a wide range of characters, including accented letters, special symbols, and non-Latin alphabets.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Controls how a web page is displayed on different devices, like on mobile screens.

<title>

Defines the title of the HTML document, which appears in the browser tab.

<link>

It's used to connect external resources to an HTML document. For example, when the rel="stylesheet" attribute is specified, it links an external CSS file that defines the visual style of the web page.

<script>

It's used to embed or link JavaScript code into an HTML document. JavaScript allows adding interactivity, logic, animations, and dynamic behavior to a web page.

<body>

Contains all the visible content of the web page.

<main>

It contains the core information that is directly related to the purpose of the page.

<section>

It's a semantic container used to group related content within a page.

<div>

It's a generic block-level container used to group and organize content

<header>

Defines a header section for a document or a section.

<nav>

Defines a navigation block containing links to other parts of the page or external pages.

<h1> a <h6>

They are used to define titles and headings on a web page, helping to organize content into a clear structure. The <h1> tag represents the main and most important title of the page, while the <h2> to <h6> tags are used for subheadings and subsections with decreasing levels of importance.

<p>

It's used to define a paragraph of text.

<br>

It's used to insert a line break within text

<ul>

Defines an unordered list, which displays list items with bullet points.

<ol>

Defines an ordered list, which displays the list items in a numbered or ordered format.

<li>

It's used to define an item within a list.

<a>

It's used to create hyperlinks

<img>

It's used to embed images in a web page. Doesn't need a closing tag.

<video>

It's used to embed video content. And in the same way, it doesn't need a closing tag.

These go hand in hand with some attributes that are added to the opening tags, such as:

id

Assign a unique identifier to a single item on a page, and it must not be repeated.

class

It can be shared by multiple elements and is commonly used to group elements to apply the same styles

style

It allows you to apply inline CSS directly to an element to control its visual presentation.

src

Specifies the source file for elements such as <img>, <video>

href

It is used in the a tag to specify the page URL.

width and height

Defines the dimensions of elements such as <img> or <video>, usually in pixels, and controls how large or small the element will appear on the page.

Using CSS with HTML offers several important advantages that improve both the development process and the user experience of a website. By separating structure from visual design, developers can create cleaner, more organized, and more efficient web projects.

Separation of content and presentation

HTML defines the structure and content of a web page, while CSS controls it's visual appearance, including colors, fonts, spacing, and animations. This separation makes it easier to read, maintain, and update the code over time.

Consistent design across multiple pages

A single CSS file can be applied to multiple HTML documents, ensuring a consistent appearance across the entire website. This consistency helps create a professional and cohesive user interface.

Efficient global updates

Modifying a style property in the CSS file allows developers to instantly update the appearance of all connected pages. This streamlines and optimizes the implementation of design changes without having to edit each HTML file individually.

In my opinion, the second point is the most important, as it allows the developer to define the behavior and style of each element only once. Once the appearance and properties of each tag are established in the CSS file, the main task becomes organizing and applying them correctly within the HTML structure. This approach improves efficiency and simplifies the design process.
Below are the two CSS files used in this project:

styles.css:
faces.css:

To conclude, whenever updates are made to the online repository, the procedures described in step 5 of the Git workflow must be followed in the specified order.

Design Inspiration

This is not the first website I have created, but it is the first one in which I have put so much effort into the CSS. I became very excited about the visual presentation, and I hope the same enthusiasm is reflected in the content.
Throughout the design process, I first needed to explore different websites to identify what elements were most visually appealing and what encouraged users to stay and engage with the content.
The shrimp were a challenge, since at first I had no idea that they could be animated to rotate. Everything was static and only bounced within confined borders. Eventually, I decided to use AI to give them the spark they were missing and bring them to life.