✦ 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."
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.
03. Website Structure
Inside my local repository, my files are organized like this:
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.
05. Publishing to GitLab
Finally, to make the website public on GitLab, I executed the following commands:
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.
Using IA
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.
> 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.
✦ 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.
✦ My Website!
This is how my final page looks like.
✦ 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!
