Week 1: Project management

Assignments

Download, read, and sign the student agreement, and commit the file to your repo
Work through a git tutorial
Build a personal site in the class archive describing you and your final project

Git tutorial

I didn’t know how to use Git before this course, thankfully our theacher here in the Fablab gave us a short tutorial to get started.

Command	Usage
git clone <url>	Copies a remote repository to your local machine
git add .	Adds all modified files to the staging area
git commit -m "message"	Saves changes to the repository with a descriptive message
git push	Sends local commits to the remote repository
git status	Shows the current status of files in the repository
git pull	Fetches and merges changes from the remote repository
git reset --soft	Moves HEAD to a previous commit while keeping changes staged
git reset --hard	Moves HEAD to a previous commit and discards all local changes

Building my personal site

At the beginning, I didn’t know how to program in HTML or CSS, so I watched YouTube tutorials to learn the basics. Special thanks to the YouTube chanel "Hola Mundo". Throughout the Fab Academy, I will keep improving my page until it looks exactly the way I want.

Tutorial Hola Mundo — Click on the image to go to the tutorial I saw (Is in spanich)

First attempt at my page

My first attempt doing my page — How my page looked on my first attempt

I started to search for inspiration for the design of my page, and in Wix.com I founded this page and I liked the idea od putting a huge image that I had already taken

So I tried to replicate the design of that page but with one of my own photos

CSS used for the background


.fondo{
  min-height: 100vh;
  background-image: url("images/nubes.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

.texto_fondo{
  background: white;
  padding: 30px 60px;
  margin-bottom: 40px;
  text-align: center;
}

Weekly assignments

I wanted to have blocks that show the weekly assignments in a grid layout, and that the grid adapts to different screen sizes. I used CSS Grid to achieve this.

First I had problems with the grid layout, but after some research and practice, I was able to make it work.


.reja-semanas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.bloque-semana {
  padding: 32px;
  background-color: #f4f4f4;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  min-height: 160px;

  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.bloque-semana h3 {
  margin-bottom: 8px;
}

.bloque-semana p {
  opacity: 0.8;
}

.bloque-semana:hover {
  background-color: #ffffff;
  box-shadow: 0 12px 30px black;
  transform: translateY(-6px);
}

Here is the final result of my weekly assignments grid