Skip to content

State of the art, project management and documentation

1. Documentation


Documentation is very important for keeping a record of what you've done so you don't forget; it saves time and reduces errors, allowing for continuous improvement.

name of image

5 things you should know before you start

  1. On GitLab, you’ll upload images, documents, etc.

  2. In Web IDE—you’ll write the code

  3. On your page, you’ll see the saved changes.

  4. The language used to write the code is Markdown or HTML

  5. It’s not as hard as it looks

4. Process and workflow


Here is the Fabricademy tutorial: Tutorial

To start, I began by creating a design in Canva of what I wanted to see: the projects, the information I wanted it to include, and the order in which they would appear. This helped me a lot in figuring out what code or tools I needed to make it look exactly the way I wanted.

How to Start Adding Content to My Fabricademy Page?

Once I logged in to my Fab.ios page, I accessed the GitLab platform.

Next, to start editing the page, press the key under “Code” > “Web IDE” > “docs” > “index” * Here video to access to IDE

Once you're there, you can edit every part of your page!

New directory

To start adding images to my page, I first created a special folder on my GitLab account that I named home. I’ll upload all the photos that will be included in that section there.

From my GitLab page, I navigated to my username > “docs” > “images” > “+” > new directory > named it.


Upload image

Adding images to your page will be a regular task, so you should upload images between 80 and 100 KB.

Some images will need to be compressed. To ensure they don't lose quality, you can upload them to Tiny Image

From my GitLab page, I navigated to my username > “docs” > “images” > “home” > “+” > “upload file”

Tips

  • Use lowercase letters for image file names

Web IDE

Let's go to our Web IDE

  • Here are some commands I used. When you're not sure how to write a command, ask ChatGPT for help, whether it's in Markdown or HTML or look for a Markdown cheet sheet for basic syntax

IMAGES

Add images

![Name of image](../images/folder name/file name)

Tips

  • Refresh the page before linking an image. Otherwise, the image you uploaded won't appear in the IDE

Align images

Description image

Tips

  • If you want to include an image with text aligned to the left or right, first insert the image code and then the text

Centered images

name of image

COMMIT

Once you've added information to your page, it's time to save your changes.

Go to the Source Code Control option. Enter a name for the change, then click the “commit and push to main” button so that the changes are reflected on the main page.

You can check whether your changes have been updated correctly in the GitLab window > “Code” > “Commits,” where you’ll be able to see the progress of the changes until a green checkmark appears, which means the changes are ready.

Guatemala

Chiapas

This is another caption This is another caption

TEXT

**Align text

<h3 align="left/right/center">text</h3>

two columns of text

Texto de la izquierda
Texto de la derecha

For this type of text, I created them in Illustrator so they wouldn't lose quality, and I saved them in SVG format to make them smaller in file size.

This is another caption

VIDEOS

In order to add a YouTube video to your video page, you must copy it’s embed code and paste it on your web IDE.


[Name of page](URL)

AUDIO

Record an audio file, then upload it to GitLab in the folder “docs” > ‘files’ > “+” > “upload file”. insert audio audio id="1" controls preload="auto">

3. Tools

List the tools you used