Week 01

This week was an introduction to how Fab Academy work and its philosophy. Also, we had to build a website where all our work during Fab Academy its going to be documented; for doing this we use HTML and CSS. For hosting and publishing we use GIT, which is a system we are going to be using from now on.

I’m really happy to be part of this Fab Academy it’s going to be great, can’t wait to see our final projects in a few months!


  • Understand the principles and practices of Fab Academy.

  • Learn Fab Academy's Project management tools.

  • Build a personal site in the class archive using different tools.

  • Propose ideas for a final project.

  • Weekly Progress >

    First day! We had an introduction with Tomas Diez, Luciana Asinari and our tutors, Ferdinand Meier and Santi Fuentemilla.

    They explained how the Lab works, what tools we have available and basically everything related to how Fab Lab Barcelona. We also presented ourselves. It will be really interesting to see how our different backgrounds can contribute to this experience, I think it is going to be really enriching.

    We also had a lecture by Massimo Banzi, he talked about Open Source Hardware intresting insights about the actuality of it.

    Assingment >

    For this first week we had to make our own website, luckily for me I have some experience on this subject so before starting I had some ideas on how I would like the website to look like. Basically I just wanted it to be really simple and clean.

    First I did some wireframes just to have a notion of how my first ideas might look like. Wireframes are a great tool to test how the user interacts with the website, and for sure, It will save you time in the future.

    Wireframing is as simple as grabbing a pencil and a paper and start drawing, but if you are more interested in something in a more virtual environment you can check Wiry, which is an open source option.

    Next step, coding. For this you need a text editor, there's a lot of different ones out there, for most of them you have to pay in order to have all features but there are also free options. A good example of this is Brackets which is a free program founded by Adobe.

    On the bottom of this page you will find some useful resources that can help you on your journey into web development.

    For hosting our website we used Github. For Fab Academy we have a dedicated git and there is where we are hosting our files. For most of us it is the first time using this system.

    For Mac, you can get an updated installer from here.

    Git can be scary the first few time you use it, but don't be afraid, it takes some time for first time users to get it. You can find a complete guide to how to use it here.

    Git requires to use command line, in my case, I use mac, so my interface will be the Terminal. For starting Git you have to user-MacBook-Pro:~ user$ git, then you have to go to the directory were your files are, for example: user-MacBook-Pro:~ user$ cd /desktop/.../your_directory. Now, a good idea always, is to check if you are in the correct directory user-MacBook-Pro:~ user$ ls, this will display the name of all the files that are on that specific directory.

    Now that you are in the right place, start git by typing user-MacBook-Pro:~ user$ git

    The basic commands to know are:

  • For update your local files: git pull

  • For checking the status of your files: git status

  • For adding files to commit: git add

  • For registering you changes (for a future update): git commit -m "Your comment"

  • For uploading your updated files (be careful with this one): git push

  • * Remember that everybody's files are going to be downloaded to your filesystem, so be careful to be always working on your personal folder, if you erase by mistake something in someone's else folder and you do a git push, those changes will get updated on the main branch and of course that person will be very angry at you. Having said that, is always a good idea to have a backup of your website.

    And this is the result, my Fab Academy 2016 website, which will be really useful document this great experience!

    * If you liked how this website looks, feel free to use my code, you can get it here, enjoy!

    Useful resources

    • MDN - A starting point for learning about web technologies.

    • W3 Schools - Knowledge source + tutorials

    • Bootstrap - A HTML, CSS, and JS framework for developing projects on the web.

    • Startbootstrap - Free Bootstrap Themes & Templates

    • Git - Free and open source distributed version control system

    • Jekyll - A simple, blog-aware, static site generator

    • Github Pages - Publish your website for free from your Github repo!