Templates

We are expected to document our work in this website, and to make it I chose a CSS template. I found a good looking template from FREEHTML5.co called Booster, but it needed some changes. The orange they used in it was just painful to watch so I switched it to a more pleasing colour.

Editing

So what I had to do, was to find the code that dictates the orange colour, I did this by using the inspector feature of firefox

Here you can see the details for the icon in the voice recording section, and its colorcode being #FBB040 turning the thing orange.

Something needed to be done about this, since the template uses CSS, all the colours used in it are dictated by the style.css file. So I opened it with the notepad++, but the CSS file is a massive one, almost 6000 lines of code. I was going to need to use the search command to find what I was looking for.

With the search and replace feature of the notepad++ I was able to track down all the instances of the code for orange. I chose to replace it with #b3932e giving me a nice golden color to work with.

In the same manner I replaced other colours in the theme as well, to give me a nice wine red-gold styled theme with grey text.

Notepad++ just isnt that useful for active website development, it is good for the extensive support for different programming languages, making it nice and neat to read the code. The thing is, it is not that useful for active website development, so I looked into using brackets.

It is similar to the notepad++, in the sense it can parse several languages and make the code easier to read. The crucial difference is, that it can also parse links used in the page design. Giving one a small preview of the image you are linking for example, or making it easier to form the link for an image. Since it knows the location where the file is stored, it lets one "navigate" the filestructure to the link target you want.

Media

With this course there is going to be a lot of media used in the documentation from pictures to video. So as it is one of the most used image editing software I chose to use Gimp for making sure my pictures are proper size and quality for the documentation. Also for making videos I can link to the site I chose to use Easy HTML5 software, that lets me mass process videos into very tight packets. Small enough to be stored in the repo.