WEEK 1

TASK
MONDAY
WEDNESDAY
FRIDAY
MONDAY

✦ Fab Academy 2026!

Fab Academy is finally here! My first week was all about getting used to the workflow and meeting my local mentors. I also dove into GitLab and its principal commands, which will be essential for building this website, starting from its basic HTML structure before moving on to CSS and JavaScript.

Building my Website!

It's time to bring this website to life.

01. GitLab Login

I signed into my GitLab account, went to the "Code" tab, and copied the "Clone with HTTPS" link."

GitLab Login

02. Repository Cloning

Using Visual Studio Code, I opened my local project folder. Then, in a new terminal, I used the git clone command and pasted the copied link.

GitLab Login

03. Website Structure

Inside my local repository, my files are organized like this:

GitLab Login
Name File
Description
index.html
The main page of my site.
about.html
The page is for personal information.
week01.html
The page for this specific documentation.
final-project.html
Everything related to the final project.
404.html
The error page for broken links.

04. Git Commands

Once inside the directory, I updated my "About me" section. To apply this changes, I ran the git add . , git commit -m "Aboutme" and git push commands.

GitLab Login

05. Publishing to GitLab

Finally, to make the website public on GitLab, I executed the following commands:

GitLab Login
Command
Function
git add .
To stage the files.
git commit -m "message"
To save the progress.
git push
To upload it to GitLab.

✦ CSS Development

After creating the basic structure of the website using HTML, I started developing the CSS styles. This process involved experimenting with color palettes, typography, layouts adjustments to create an interface that reflects my personal design style. To do this, I started by designing in Canva how I wanted the interface of my website to look.

GitLab Login

✦ Using Gemini

To help me navigate this new world, I’ve been using Gemini to generate creative prompts that guide me in structuring and building my site more effectively. I’m also constantly learning from tutorials and my fellow students.

05. Gemini Code

Since I'm still new to device programming, I asked Gemini for help structuring the code. It's important to clarify the component connection pins on your PCB. Below is an example of the prompt:

◆ Prompt
  • "Please generate code to place in the student-agreement.html file so that the PDF opens in a separate browser tab."
<div class="content">
  <h1>Student Agreement</h1>
  <p>To read the full agreement in a new tab, click the button below:</p>

  <a href="images/Fab Academy Student Agreement.pdf" target="_blank" class="btn-download">
    See Student Agreement (PDF)
  </a>
</div>

✦ CSS in Visual Studio Code

This is a section of my CSS where I configured my weekly containers. I had to change sizes, colors, shapes, and borders several times until I achieved the desired result. It was a very long process, but I finally got it right.

CSS

✦ JavaScript Configuration

I also decided to integrate an interactive carousel for the documentation of the coming weeks. To do this, I combined HTML, CSS, and JavaScript to navigate through the images and descriptions of my processes. This system optimizes space and improves page interactivity.

CSS

✦ My Website!

This is how my final page looks like.

CSS

✦ From zero to code

When I first started this process, I had absolutely no prior experience with Visual Studio Code and felt quite unfamiliar with HTML and CSS. It has definitely been a journey of trial and error, with plenty of "oops" moments along the way. However, I feel proud of my ability to find solutions on my own, by searching tutorials and receiving guidance from my fellow students. Thanks to this, I have been gradually gaining new skills and confidence in web development. The best feeling is when the code finally works!