Week 01
This is my first week at the Academy, and it has been a somewhat challenging week due to understanding key concepts such as programming and using GIT. I had to do extensive research to understand the necessary codes so I could begin creating my repository. During this week, I will structure my website and prepare my personal presentation (about me). Additionally, I signed the student agreements and outlined my final project.
Below, you can find the documentation that I prepared, with the valuable help of my instructor Cristian Loayza, who has been a great support during this process.
This webpage follows an organized structure with a navigation bar at the top that links to various sections such as home, about me, assignments, final project, and agreements. The content is arranged in a clear and readable way, with a prominent header and several sections where I share my experience during my first week at Fab Academy. I’ve used visual elements like images and icons to enhance the presentation, and the responsive design ensures the page is usable on different devices. I’ve also included interactive elements like links to external resources and a footer with social media icons. For the responsive design, I used CSS styles and Bootstrap.
To see the final result of my webpage, you can enter here.
Principles and practices
Develop a plan and a sketch for a potential final project.
My final project is an electronic toy designed for all ages (babies, children, and adults), aiming to offer a unique sensory experience through the integration of motion sensors and artificial intelligence. The goal is to provide a sense of calm, relaxation, and well-being, creating a refuge for the mind and promoting a break from the daily routine.
You can see the details of the project here
Project Management
1. Preliminary Research
Before starting the development of a website, it is crucial to conduct research on the formats and tools that will be used. In this case, research was conducted on HTML, Visual Studio Code, and basic programming concepts. This stage is essential to familiarize oneself with the technologies and tools required to create functional and well-structured websites.
Below is the link that was helpful in this research process:divcode7383
Download Visual Studio Code SoftwareVisual Studio Code
2. Plan your website
A template was downloaded and selected from the html5up website, which provides structured HTML files, allowing for adaptation and modification according to the project's requirements.
3. Resource pages
My instructor, Cristian, recommended the Bootstrap website to me, an open-source web design framework that facilitates the creation of responsive and mobile websites and applications. This tool was extremely helpful as it allowed me to generate codes I wasn't familiar with, speeding up the development of my project. Additionally, artificial intelligence also played a key role by helping me generate additional codes, allowing me to make further progress in building the website.
4. Start with HTLM Code Development
The downloaded folder, named 'Fab Academy 2025', is opened in Visual Studio Code to start editing and customizing the project files
After downloading an HTML template and setting up Visual Studio Code, I began developing the website using code. To do this, I established a basic structure that allowed me to understand and efficiently organize the content and layout of the site.
5. Code Development and Maintenance
Develop and maintain efficient and well-structured code, ensuring its functionality and scalability across different development environments.
This is a clear example of the structure we should have when creating a webpage in code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<header>
<h1>Welcome to My Page</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>>
<main>
<section>
<h2>Introduction</h2>
<p>This is a simple webpage structure.</p>
</section>
</main>
<footer>
<p>© 2025 Simple Example</p>
</footer>
</body>
</html>
Once the basic structure of the HTML code is well defined, work can begin smoothly on developing the website. With these fundamental concepts, it's possible to modify the template through color customization, the use of different column and row layouts, and the incorporation of elements that give it a unique and personalized style.
6. Create a Fab Lab account.
The next step is to create an account on the Fab Academy to access tasks, view previous projects, consult tutorials, and take advantage of other educational resources available on the platform.
7. Create a GitLab account.
It is necessary to create a GitLab account in order to access the folder where the files are stored. This account must be linked to the Fab Labs account to ensure proper access.
Upon accessing, it is noticed that there are no files in the account, which leads us to another activity: installing a different program that will help us upload the digital files.
8. Descargar GIT
Git, an open-source version control system, is accessed. Then, the appropriate version for my operating system is downloaded, in this case, Windows 64-bit. To do this, the corresponding link is selected from the official Git website, and the installation process is allowed to complete successfully.
9. Configure Git (if it's your first time using Git)
Before accessing your repository or performing any actions with Git, it’s recommended that you configure your username and email:
bash
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
To do this, link it with the Fab Lab iOS account.
10. Access My Local Repository (if I already have one)
If I already have a Git repository created on my computer, I just need to navigate to the folder where the project is located. I can use the terminal or Command Prompt (CMD) and navigate to the folder using the cd command:
bash
cd /path/to/my/repository
11. Clone a Remote Repository (if I’m accessing one online)
If my repository is hosted on a platform like GitHub, GitLab, or Bitbucket, I need to clone it to my local machine. To do this, I need the URL of the repository, which is usually found on the project page in my Git account.
In the terminal, I type:
bash
git clone https://github.com/user/repository-name.git
This will download a copy of the repository to my computer.
12. Verify the Remote Repository
If I already have a local repository and want to check which remote repository it is linked to, I use the following command:
bash
git remote -v
This command will show me the URL of the remote repository (origin).
13. Access a Remote Repository to Make Changes
If I already have a local repository linked to a remote repository and want to make changes, I need to make sure I’m working on the correct branch. To see the available branches and switch to the one I want, I can use:
bash
git branch
git checkout branch
14. Uploading Files to GitLab from Visual Studio Code
Once the file has been downloaded, open the folder where the project being worked on in Visual Studio Code is located. Then, right-click on the empty area of the folder and select the Open Git Bash Here option. This will open a command line window. In this window, the cloning process of the folder begins in order to upload it to the online repository on GitLab.
Before uploading the file, in the Visual Studio Code window, on the left side, there is an icon called 'Source Control', where you can see the pending changes that need to be updated.
Click on Source Control, give the file a name, and then click Commit to confirm the changes.
A name is assigned to the file, and then Commit is clicked to confirm the changes.
You click Commit and immediately the file is uploaded to GitLab. Now, others can view the website online.
Reflections
This first week was quite a challenge since I had no prior knowledge of programming. However, I received great support from Cristian, who guided me through the entire process and helped me overcome the difficulties of uploading my work to the repository. Week 01 was crucial for my adaptation, an intense week filled with learning. Not fully mastering English was an additional obstacle that made it harder to understand some assignments and the steps to follow.
Now, writing this reflection in week 04, I can see how much I’ve progressed. I feel much more organized, and I now understand the basic structure of a webpage. I’ve learned a lot during this time, and even though I continue to learn every day, I do so with more understanding and confidence when adding images, videos, texts, subtitles, titles, and boxes. Every week is an opportunity to improve; there’s always something new to learn, and I feel more confident in the process each time.