Html5, CSS, Java:

Our first assignment was to make a portfolio/website that will accompany us throughout the FabAcademy course so we may share our projects and document all the processes along the course. Not having a great background with web design I thought it would be a complicated task to begin with, the html/css workshop at Bcn Fablab completely trashed any pre conceived negative thoughts of web design and showed it is quite simple to build a website. We were introduced to several open source code editors and different ways to build your site, the one I felt most comfortable with was the Brackets editor. So everything you need to know about the internal structure of a website is as follows :

• Html: Create the content of our website; Text, Images, etc.
• Css: Make the website visually more appealing; Fonts, Colour, Layout etc.
• Java/PHP: Make the website more "intelligent" and interactive.

The first approach to any unknown Art is to find good learning sources, and for me the best was w3schools it has all the hands-on/Diy tutorials you need to learn Html, Css and Java and it is also a great place to consult for any needed line of code. Another good source to learn is Codeacademy

After a couple of hours investigating and learning in the site I found about Bootstrap3 and it's tutorial. Bootstrap is one of the best frameworks for beginners containing all the needed codes and tutorials to build responsive and appealing web sites.
As building it from scratch would be too time consuming I used such a template Bootstrap as a bases for my website and adapted it to achieve the type of website I was aiming at. In doing so I learned quickly the codes and structures of the different languages of Html, Css and Java. One of the best features of the Brackets encoder is its ability to live preview your website as you code it, making web design much more appealing.

First Tutorials.

As I wanted to change both the design and the content of the Template but didn't know where to start I came across a very handy tool, the Web Developer tool bar both available for Chrome and Firefox. I had to install the plug in on Chrome as the default Browser for the Brackets Live preview is Chrome at the moment. This tool is great as it show's every single detail of the structure of the website and it highlights where in the webs source code you will find the line of code you have to change to achieve the change you want to make to your website. Ex. I wanted to align all my Images that I introduced into the website to its centre but every time I uploaded it would remain on the left margin.

Problem- Margin Left.

And so to find out what I needed to change I used Chromes WebDevTool and investigated the images source code and changed its margin values till I got the display I was looking for. In the end it gave me the code lines I needed to add to my original code so my images would be centred (highlighted in blue). As you browsed along my website you've seen it worked, there are great tools out there to guide you along the way for a newbie I only had to find them. Ever since, I've been using them along my learning process and making my path much simpler I recommend them to anyone who wants to learn how to make a website!!

Using WebDevtools to find source of problem.

Code

This is the code I used to center my images, we add it before img src:

style="
margin-left: 90px;
border-left-width: 10px;
padding-left: 50px;
border-right-width: 10px;
margin-right: 50px;
padding-right: 50px;
margin-top: 70px;"

Lines of code added.

Summary:

Basically this was the Learning process I took till a complete site, it's not the most complete I know as there is thousands of different ways to make a website, but with the time I had and not having any basis this was for sure the best:

1. Download Brackets or any web editor/development tool you fill comfortable with Link to examples
2. Visit w3schools and do their Bootstrap3 tutorial.
3. Use the Bootstrap template or download a free one that fits best to what you had in mind for a Web Design Layout
4. Use Web Dev toolbar for Chrome or Firefox to Identify which line of code to change and where it is located depending on your goal
5. Start tinkering the different codes and learn by doing, adapt to your own learning process

Git:

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Basiclly a version control is a system that records changes made to a file or set of files over time so that you can recall specific versions later.

Github Commands

These are the steps you need to do on a terminal window to correctly upload and download files from the repository:

1. Open the directory where the repository is located.
   

   cd fablabbcn2016/

2. Interrogate the system (gitstatus) if there is any change and if everything is ok
   

   git status

3. Get all the files the oher contributors might have uploaded (gitpull)
   

   git pull

4. Define the files you want to upload (gitadd)
   

   git add -A

5. Define the reason for the upload (commit)
   

    git commit -m "your comment"

6. Send the files to the online repository (gitpush)
   

   git push

7. Run a new interrogation to be sure everything is ok
   

   git status

Final Project Idea:

So for my final project the first idea I had is to build a FabRecycler, since 90% of the products printed in a 3D printer are used only for prototyping a lot of plastic trash is produced. If I produce an affordable recycler it will cut the costs of 3D printing not only for Fablabs but also for makers around the world. And it also brings the possibility to work with the students of the Master’s program here at the IAAC, who did extensive research on the aspects a city must work on to improve and become more sustainable even self-sufficient following the Fabcity