The process to upload files to the server is quite straight forward, what you have to do is:
Here's a Github tutorial that's fully transferable to the Fab Academy server.
As I mentioned in NOTE 03, the original template wasn't as useful as I thought, so, in order to take the opportunity to learn some more, I went to W3Schools.com and studied a bit of CSS to produce something like in the sketch above
In short, I had to create a couple of css classes in the style.css file to format the containing boxed I wanted, as shown in the 2nd pic.
So, as I didn't wanted to reinvent the wheel, I went to the old Google friend and searched for some free website templates. After sitting back looking for some nice templates, I decided that this one had most of the features I would need afterwards. So I downloaded ...
NOTE 03: This template isn't being as flexible as I need, maybe I'll need another one ...
Well, following the course suggestions I started using SeaMonkey as an easy to use WYSIWYG html editor (this post was made with it). The current 2.39 version doesn't have any syntax highlight (there's an Add-on to do so, but it isn't working), so its been kind of difficult to isolate the useful parts of the html code to reuse. I'll dig a little deeper on this editor before jumping to other one.
So finally, as stated on the notes, I ended up editing all the Fab Academy html files using VIM, which helps me to keep a more readable and reusable code. Here you can see this site's source code done with VIM.
NOTE 02: Finally I decided to use VIM with the matchit.vim plugin to solve the syntax and tag matching issue ... a lot faster.
NOTE 01: I found in one of the previous student's site (don't remember which) the importance of image optimization for web publishing (and to avoid Neil's humiliations); so, looking on this, I found this link, which shows a couple of solutions available on macports. From this link, I found that only the optipng function resulted useful, so I'll use mostly .png images.