GitLab
Software required
To begin building in the digital world, I established a solid foundation with these essential tools (Click to download it):
Steps for GitLab
Get Into Git Lab
Git Essential Commands
| # | Command | Use |
|---|---|---|
| 1 | git clone URL | Downloads the project from GitLab to the local computer for the first time. |
| 2 | git add . | Adds all changes made to the staging area, preparing them for a commit. |
| 3 | git commit -m "message" | Records the changes in the local repository with a descriptive message. |
| 4 | git push | Uploads the committed changes from the local repository to the remote repository on GitLab. |
| 5 | git pull | Fetches and integrates changes from the remote repository to the local repository. |
| 6 | git status | Displays the state of the working directory and staging area, showing changes. |
| 7 | git log | Shows a log of all commits made in the repository. |
HTML Programming Process
Internal Structure & Organization
One of the most important aspects is file organization. Generally, a web project is divided into three core sections:
- HTML: The content and structure.
- CSS: The aesthetics and style.
- JavaScript: The interactions and behavior.
In my case, the organization followed the minimalist tree structure shown in the diagram above, ensuring all assets were correctly linked.
Visual Consistency & Components
To achieve a uniform visual identity throughout my site, I utilized specific HTML components and CSS classes:
<div class="navbar">and<div class="navbar-inner">to build a functional navigation menu.<div class="hero-section">with<div class="hero-container">to create the blue-themed headers for each section.- The
class="..."attribute to link my elements to the styles defined in my style.css file.
Most Used Codes & Functions in my Code
| CATEGORY | CODE / TAG / ATTRIBUTE | FUNCTION / USE |
|---|---|---|
| LAYOUT | <div class="hero-section"> |
Creates the main header section with the blue-themed background and centered text. |
| LAYOUT | <aside class="week-sidebar"> |
Used to create the side navigation menu to move between sections of the page. |
| LAYOUT | <section class="collage-section"> |
Dedicated container for the grid or collage of images on the home page. |
| LINKS | target="_blank" |
Attribute within <a> that opens a link in a new browser tab. |
| MULTIMEDIA | <div class="slide"> |
Individual container for each image and text block within your carousel. |
| IMAGES | object-fit: cover; |
Ensures images fill their assigned space without being stretched or distorted. |
| STYLE | <link href="...remixicon.css"> |
Imports the external library used to display icons (Instagram, WhatsApp, etc.). |
| STYLE | display: flex; / grid |
CSS properties used to align elements horizontally or in grids (like your "Stuff I Do" cards). |
| TEXT | <blockquote class="ai-prompts"> |
Specific tag used to highlight and distinguish the prompts sent to the AI. |
| TEXT | font-weight: 600; |
Sets a semi-bold thickness for headings and important UI text. |
| COMPONENTS | <div class="navbar-inner"> |
Centered wrapper that keeps the navigation links organized and aligned. |
Examples in my website of diferents codes
div class="hero-section"
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Small Example</title>
<style>
body {
font-family: sans-serif;
margin: 30px;
}
.project-row {
display: flex;
gap: 20px;
}
</style>
</head>
Refining with AI
The original draft was based on the web development knowledge gained during Fab Lab classes. To further enhance the visual design and user interface, I used AI tools integrated into Visual Studio Code. Below are the specific "Prompts" I used to improve my site's code:
First Stage
First Prompt
Generate an improved design proposal; let's create a template that I can modify later. You must maintain the current folder structure (keeping index.html in the public folder and preserving the assignments directory). For the design, draw inspiration from the minimalist style of the link provided (https://www.bdsn.club/about) using light blue tones. On the Assignment page, I want a sidebar menu to navigate between page sections. Do not modify the .yml files. Feel free to ask any questions if needed.
Second Prompt
Hello! In week01.html, I want you to place a sidebar menu on the left side of the main content to allow navigation between sections. You must maintain the folder structure (index.html in public and the assignments folder). Do not modify the .yml files. Feel free to ask any questions if needed.
Third Prompt
I need you to make only two changes. 1) In the about.html file, keep the first part as it was before (matching the "Pasted Image" attached), but keep the "Stuff I Do" section exactly the same without any modifications. 2) In index.html, change the image collage from 6 images to 10 images, using the same penguin image for all of them. Remember to maintain the folder structure and do not modify the .yml files. Feel free to ask anything.
Fourth Prompt
I need only two specific changes. 1) In about.html, keep the "Stuff I Do" section's content and aesthetics exactly the same, but instead of placing it below the image, position it to the right of the first section. The section shown in the attached image (Pasted Image) should remain fixed (no scrolling), while only the "Stuff I Do" section should be scrollable. 2) In index.html, instead of an ordered collage, provide a more aesthetic and creative proposal. Keep using the image at daniela-barranco\public\weeks\loading_penguin.jpg for all slots. Maintain the folder structure and do not touch the .yml files.
Fifth Prompt
I want you to add the same left-side navigation menu from week01.html to the final-project.html file. Ensure that the menu items correspond to the sections within the final project document. Remember to maintain the folder structure (index in public and the assignments folder) and do not modify the .yml files. Feel free to ask for any clarification.
Parts in my website
The original draft was based on the web development knowledge gained during Fab Lab classes. To further enhance the visual design and user interface, I used AI tools integrated into Visual Studio Code. Below are the specific "Prompts" I used to improve my site's code:
Design Inspiration
Once the structure was ready, I looked for inspiration from other sites to create my own unique design. I analyzed the following references:
- Fonder Studio
- Balavignesh | Senior Product Designer
- Alberto Blanco - Fab Academy 2023
- Fab Lab Puebla | Ibero Puebla
Extra Tools for HTML pages
| # | Tool Name | Main Use / Strength |
|---|---|---|
| 1 | Code space | A fast, cloud-based coding environment that allows you to start web projects instantly without local configuration. |
| 2 | Framer | A powerful design and publishing tool that allows you to build high-fidelity interactive prototypes and professional websites. |
| 3 | Flaticon | The largest database of free customizable icons and stickers in various formats like SVG and PNG for web projects. |
| 4 | Claude AI | An advanced AI assistant focused on coding efficiency, capable of generating complex snippets and debugging logic. |
| 5 | Gemini | Google's multimodal AI that helps brainstorm ideas, generate code, and optimize documentation for technical portfolios. |
| 6 | Bootstrap | The most popular CSS framework for developing responsive and mobile-first websites with pre-built components. |
| 7 | CSS Grid Generator | A visual tool that simplifies the creation of complex CSS Grid layouts by generating the necessary code automatically. |
Codes that I used in this week
Index HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniela Barranco - Fab Academy 2026</title>
<link rel="stylesheet" href="assignments/css/style.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a href="index.html">Home</a>
<a href="assignments.html">Weekly Assignments</a>
<a href="final-project.html">Final Project</a>
<a href="about.html">About me</a>
</div>
</div>
<div class="hero-section">
<div class="hero-container">
<img src="assignments/img_index/logo_fabacademy.png" alt="Logo Fab Academy" class="hero-logo">
<div class="hero-text">
<h1>Hello World!</h1>
<h2>Welcome to my Fab Academy Site</h2>
<p>Join me on this great adventure where we explore making, design, and innovation!</p>
</div>
</div>
</div>
<section class="collage-section">
<h2>My Fab Academy Journey</h2>
<p class="collage-subtitle">A visual exploration of projects, ideas, and moments from my learning experience</p>
<div class="collage-container">
<div class="collage-item collage-large">
<img src="assignments/img_finalproject/brillitos_cristal_cortados.jpeg" alt="Journey moment 1">
</div>
<div class="collage-item collage-small">
<img src="assignments/img_finalproject/first_process.jpeg" alt="Journey moment 2">
</div>
<div class="collage-item collage-medium">
<img src="assignments/img_finalproject/grapas.jpeg" alt="Journey moment 3">
</div>
<div class="collage-item collage-small">
<img src="assignments/img_finalproject/candil_imperial.jpeg" alt="Journey moment 4">
</div>
</div>
</section>
<footer>
<p>Copyright 2026 Daniela Barranco</p>
</footer>
</body>
</html>
Weekly Assignment HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniela Barranco - Fab Academy 2026</title>
<link rel="stylesheet" href="assignments/css/style.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a href="index.html">Home</a>
<a href="assignments.html">Weekly Assignments</a>
<a href="final-project.html">Final Project</a>
<a href="about.html">About me</a>
</div>
</div>
<!--Encabezado azul celeste-->
<div class="hero-section">
<div class="hero-container">
<div class="hero-text text-center">
<h1>Weekly Assignments</h1>
<p>In this section you will find everything I have done in this course</p>
</div>
</div>
</div>
<div class="content">
</div>
<!--Tarjetas de sección por semana-->
<section class="assignments-section">
<div class="cards-container">
<!--Week 01-->
<div class="assignment-card">
<img src="assignments/img_assignments/w01_code02.jpeg" alt="Week 1">
<div class="card-content">
<h3>Project Management</h3>
<h2>Week 1</h2>
<p><strong>Task:</strong> Set up a personal website using version control with Git.</p>
<a href="weeks/w01/week01.html" class="btn-read-more">Read More</a>
</div>
</div>
<!--Week 02-->
<div class="assignment-card">
<img src="weeks/w02/img_w02/3D.jpeg" alt="Week 2">
<div class="card-content">
<h3>Computer-Aided Design</h3>
<h2>Week 02</h2>
<p><strong>Task:</strong> Model, render, and animate a possible final project using 2D and 3D software.</p>
<a href="weeks/w02/week02.html" class="btn-read-more">Read More</a>
</div>
</div>
</div>
</section>
<footer>
<p>Copyright 2026 Daniela Barranco</p>
<p>Source code hosted at <a href="https://gitlab.fabcloud.org/...">gitlab.fabcloud.org</a></p>
</footer>
</body>
</html>
Final Project HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project - Daniela Barranco - Fab Academy 2026</title>
<link rel="stylesheet" href="assignments/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css" rel="stylesheet"/>
<script src="assignments/css/slideshow.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a href="index.html">Home</a>
<a href="assignments.html">Weekly Assignments</a>
<a href="final-project.html">Final Project</a>
<a href="about.html">About me</a>
</div>
</div>
<div class="hero-section">
<div class="hero-container">
<div class="hero-text text-center">
<h1>Final Project</h1>
<p>My innovative project for Fab Academy 2026</p>
</div>
</div>
</div>
<div class="week-layout">
<aside class="week-sidebar">
<nav class="week-sidebar-menu">
<a href="#" onclick="showProjectSection('overview')" class="week-link active">Project Overview</a>
<a href="#" onclick="showProjectSection('research')" class="week-link">Research & Inspiration</a>
<a href="#" onclick="showProjectSection('design')" class="week-link">Design & Planning</a>
<a href="#" onclick="showProjectSection('timeline')" class="week-link">Implementation Timeline</a>
<a href="#" onclick="showProjectSection('resources')" class="week-link">Resources & Materials</a>
</nav>
</aside>
<div class="week-main-content">
<section id="overview" class="week-section active">
<h2>My Final Project</h2>
<p>This project focuses on the automation of traditional craftsmanship used in high-end lighting.</p>
<h3>Project Overview</h3>
<p>The project consists of a cut glass assembly machine designed to automate a process.</p>
<!-- Carrusel candil imperial-->
<div id="slideshow1" class="slideshow-container">
<!-- Slides content here -->
<div class="buttons-container" style="text-align: center; margin: 20px;">
<button class="prev" data-target="slideshow1">Previous</button>
<button class="next" data-target="slideshow1">Next</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
initializeCarousel('slideshow1');
});
</script>
</section>
<section id="research" class="week-section">
<h2>Research & Inspiration</h2>
<ul>
<li><strong>Automatic Eyeletting Machines</strong></li>
<li><strong>Pneumatic Crimping Tools</strong></li>
</ul>
</section>
<section id="design" class="week-section">
<h2>Design & Planning</h2>
<h3>Workflow Sketch</h3>
<ol>
<li><strong>Top Magazine:</strong> Staples descend through a rail. ↓</li>
<li><strong>Actuator:</strong> Pushes the staple. ↓</li>
</ol>
</section>
</div>
</div>
<footer>
<p>Copyright 2026 Daniela Barranco</p>
</footer>
<script>
function showProjectSection(sectionId) {
// Logic to switch sections
}
</script>
</body>
</html>
About Me HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project - Daniela Barranco - Fab Academy 2026</title>
<link rel="stylesheet" href="assignments/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css" rel="stylesheet"/>
<script src="assignments/css/slideshow.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a href="index.html">Home</a>
<a href="assignments.html">Weekly Assignments</a>
<a href="final-project.html">Final Project</a>
<a href="about.html">About me</a>
</div>
</div>
<div class="hero-section">
<div class="hero-container">
<div class="hero-text text-center">
<h1>Final Project</h1>
<p>My innovative project for Fab Academy 2026</p>
</div>
</div>
</div>
<div class="week-layout">
<aside class="week-sidebar">
<nav class="week-sidebar-menu">
<a href="#" onclick="showProjectSection('overview')" class="week-link active">Project Overview</a>
<a href="#" onclick="showProjectSection('research')" class="week-link">Research & Inspiration</a>
<a href="#" onclick="showProjectSection('design')" class="week-link">Design & Planning</a>
<a href="#" onclick="showProjectSection('timeline')" class="week-link">Implementation Timeline</a>
<a href="#" onclick="showProjectSection('resources')" class="week-link">Resources & Materials</a>
</nav>
</aside>
<div class="week-main-content">
<section id="overview" class="week-section active">
<h2>My Final Project</h2>
<p>This project focuses on the automation of traditional craftsmanship used in high-end lighting.</p>
<h3>Project Overview</h3>
<p>The project consists of a cut glass assembly machine designed to automate a process.</p>
<!-- Carrusel candil imperial-->
<div id="slideshow1" class="slideshow-container">
<!-- Slides content here -->
<div class="buttons-container" style="text-align: center; margin: 20px;">
<button class="prev" data-target="slideshow1">Previous</button>
<button class="next" data-target="slideshow1">Next</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
initializeCarousel('slideshow1');
});
</script>
</section>
<section id="research" class="week-section">
<h2>Research & Inspiration</h2>
<ul>
<li><strong>Automatic Eyeletting Machines</strong></li>
<li><strong>Pneumatic Crimping Tools</strong></li>
</ul>
</section>
<section id="design" class="week-section">
<h2>Design & Planning</h2>
<h3>Workflow Sketch</h3>
<ol>
<li><strong>Top Magazine:</strong> Staples descend through a rail. ↓</li>
<li><strong>Actuator:</strong> Pushes the staple. ↓</li>
</ol>
</section>
</div>
</div>
<footer>
<p>Copyright 2026 Daniela Barranco</p>
</footer>
<script>
function showProjectSection(sectionId) {
// Logic to switch sections
}
</script>
</body>
</html>
My Site Stylesheet (CSS)
/* ==========================================
GLOBAL STYLES - Minimalista Design
Tonos azules celeste
========================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-light: #e0f7fa;
--primary: #00BCD4;
--primary-dark: #0097A7;
--secondary: #B0E0E6;
--text-dark: #2c3e50;
--text-light: #353f40;
--background: #f8f9fa;
--white: #ffffff;
--border: #e0e0e0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--background);
}
/* ==========================================
EMBEBER CÓDIGO (Estilo del contenedor)
========================================== */
pre {
background-color: #caf0f8 !important;
border: 2px solid #0096c7;
border-radius: 15px;
padding: 20px;
margin: 20px auto;
max-width: 90%;
overflow-x: auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
pre code {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
line-height: 1.6;
color: #03045e !important;
display: block;
white-space: pre;
text-align: left;
}
/* ==========================================
HERO SECTION
========================================== */
.hero-section {
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-light) 100%);
padding: 4rem 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.hero-logo {
max-width: 300px;
width: 100%;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 188, 212, 0.15);
transition: all 0.4s ease;
}
/* Redes Sociales */
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background-color: #e0f7fa;
border-radius: 50%;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: scale(1.2);
}
Javascript Functionality (Slideshow)
/**
* Slideshow / Carrusel Functionality
* Manages multiple slideshows on the page with navigation controls
*/
// Store slide indices for each slideshow container
const slideIndices = {};
/**
* Initialize all slideshows on page load
*/
document.addEventListener('DOMContentLoaded', function() {
const slideshows = document.querySelectorAll('.slideshow-container');
slideshows.forEach(slideshow => {
const slideshowId = slideshow.id;
if (slideshowId) {
slideIndices[slideshowId] = 1;
showSlides(1, slideshowId);
}
});
});
/**
* Display the slide at the specified index
*/
function showSlides(n, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
const slides = container.querySelectorAll('.slide');
if (n > slides.length) { slideIndices[containerId] = 1; }
if (n < 1) { slideIndices[containerId] = slides.length; }
slides.forEach(slide => {
slide.style.display = 'none';
});
if (slides.length > 0) {
slides[slideIndices[containerId] - 1].style.display = 'block';
}
}
/* --- PROFE OLIVER VERSION --- */
function initializeCarousel(carouselId) {
let slideIndex = 0;
showSlides(carouselId, slideIndex);
function plusSlides(carouselId, n) {
showSlides(carouselId, slideIndex += n);
}
function showSlides(carouselId, n) {
let i;
let carousel = document.getElementById(carouselId);
let slides = carousel.getElementsByClassName("slide");
if (n >= slides.length) { slideIndex = 0; }
if (n < 0) { slideIndex = slides.length - 1; }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "flex";
}
// Event Listeners for buttons
document.querySelectorAll('.prev[data-target="' + carouselId + '"]').forEach(button => {
button.addEventListener('click', () => plusSlides(carouselId, -1));
});
document.querySelectorAll('.next[data-target="' + carouselId + '"]').forEach(button => {
button.addEventListener('click', () => plusSlides(carouselId, 1));
});
}