My first assignment (Learning HTML and using GIT)

The first part of the assignment is to complete one or two Git tutorials to become familiar with the tool. The second part involves brainstorming and outlining ideas for a final project. For now, let’s concentrate on the first part—learning Git. As we go through the tutorials, it's important to document our progress, capturing the skills we learn and the challenges we overcome. A good guiding principle is: If you document it, it happened. This way, you'll have a detailed record to reference whenever needed, whether it's to revisit solutions or analyze problems you encountered along the way.

    visual points

  • Work though one or two GIT tutorials
  • build a Personal fabacademy Webpage
  • On that webpage Describe yourself
  • Describe your final project

Getting started

This was my first time working with HTML. Following my instructors instructions and looking at Frauke Waßmuth Fab page, I was able to figure how to get started. It also helped to have people around who have done this before. The first thing I did was download Git and visual studio code to my old laptop, as there was a small problem with the macbook which I am currently waiting on IT to have time to look at. Once I downloaded the two programs, I followed the following Commands:

  • Step 1. Run git bash

  • Step 2. Type: 

    • git config - -global user.name"Your name here"
  • Step 3. Type:

    • git config - -global user.email"Your email@example.com"
  • Step 4. Type: 

    • -t rsa -C "Your email@example"

Here I went ahead and made a copy of the ssh key and added it to my Git account. This can be done by going to preferences. Look for ssh key on the side menu. Were I found the add new key. Once I added the new key my PC was linked to my repository to my gitlab account. Next I went back to my bash termin again and entered the following commands.


  • Step 5.

    • cd path/to/desired/folder
  • Step 6.

    • git clone https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/kamplintfort/students/YouName-here.git

Using the Terminal window in I created the folder git-Repos. Using the code: cd ~/Desktop, which changed the directory > to my desktop. To creat the new folder I went ahead and tpyed the command mkdir (make new directory). Now I just needed to copy the index to the folder.


  • Step 7. Type:

    • git add *
  • Step 8.

    • Type: git commit -m "Your commit message here"
  • Step 9.

    • git push

    What else I learned

    I learned how to use Visual Studio Code (VS Code), which is a fantastic tool for working on HTML and other types of code. One of its great features is that it can be synchronized with GitLab, allowing you to manage your projects on the cloud easily. With VS Code, I can push my changes directly to the live page. It also keeps track of previous versions of your code, which is super helpful in case you need to revert to an earlier version after making a mistake. Another amazing feature is the Live Server extension. This allows you to preview your page in real-time on a local server, so you can see exactly how it will look when published. I did use a templet to get me stared from HTML5 UP.


    I also learned how to compress images using GIMP. Here is a quick tutorial:


  • launch GIMP and open the image
  • Go to image >scale Image
  • scale image to your liking
  • Go to Export As
  • Choose a file name and formate (Jpg or PNG)
  • for jpg a good balance I found is around 60--80
  • Save and compress the file by clicking Export


    • Some Tips and Tricks

    Never having written code before, I spent a lot of time messing up this page. At one point, I even managed to create something that looked more like a blank webpage than what I originally intended a chaotic mess where everything was all over the place. The good news? I now know what not to do. And when in doubt, Ctrl + Z (undo) is my best friend. A good friend of mine showed me some great keyboard shortcuts that make coding and browsing so much easier. Not to mention explaining things to me as I was messing them up. Let’s say you come across something on someone else’s webpage and want to know how they did it. Just press Ctrl + U to view the source code of the page, then Ctrl + F to search for specific text or elements. You can also use Ctrl + S to save your work. These shortcuts have been lifesavers, and I found them super helpful as a beginner. One of the most important things I’ve learned is how to create sections in HTML. Sections are like framed areas that help organize content on a webpage. Here's an example of how you can write such a section:

  •  <div class="row"> <div class="col-6">

  • This container groups the columns together and ensures they’re aligned properly. <div class="row">

  • Each column spans 6 out of the 12 total columns, meaning it takes up half the page’s width. <div class="col-6">

    • Here is a link to a great website where I have looked up alot of other tricks and bits of code: Visit W3Schools.com!


    Project and time management


    I have seen Gantt charts before and even had to create one in an exam, but up until now, they never seemed relevant for the projects I’m involved in. However, this year started off differently. I’ve never faced such a heavy workload before, and I quickly realized that I needed time management more than ever. With my calendar already packed with teaching commitments and the upcoming Fab Academy, I decided to see how well I could plan ahead using a Gantt chart. I turned to open-source office software and got to work. The red boxes on my chart represent the deadlines I’m aiming to meet, while the orange boxes highlight tasks that I expect to be more time-consuming—like electronics. They rarely go as smoothly as planned! I’m well aware that things might go sideways at some point, and I’m curious to see just how much of the Gantt chart will need to change over time. For now, though, I’m optimistic and ready to see how it all plays out. No plan is ever foolproof, but it’s worth a try!

    My Conclusion


    At first, I felt discouraged and overwhelmed by figuring out how Git works. Reading the tutorials and dealing with my laptop not allowing me to install Git. So, I decided to use my old laptop instead, though I still hope to fix the issue on my main one. After attending our local meeting and talking with former Fab Academy students, I made a great deal of progress this week. I’ve even reached the point where I enjoy learning to code and understanding the different ways things can go wrong. The fun part has been making the mistakes I needed to make and seeing the results in real time, it really helped with my learning curve. The motto "failure is success" has taken on a whole new meaning for me. When something doesn’t work, asking why it went wrong is a great first step in learning something new. So, hopefully, this webpage works, even if it’s a little rough around the edges. It’s a good starting point for my Fab Academy journey.

    What I’ve learned is to take my time when working with HTML. By thinking beyond what I already know, I can identify my mistakes and correct them. Asking for help isn’t a bad thing, it can actually lead to great results. Organizing my ideas on paper first is also a useful tool for visualizing what I want to do. I’m looking forward to improving both my skills and my webpage.

    In the end, this week has been a valuable learning experience. Despite the initial frustration, I’ve made significant progress and gained a better understanding of coding, problem-solving, and the importance of persistence. Every mistake has been a lesson, and I now see challenges as opportunities to grow. Moving forward, I’m excited to refine my skills, improve my webpage, and continue learning. is just the beginning of my Fab Academy journey, and I’m eager to see where it takes me.