During this week, we had a global class where we were asked to get familiar with Git and start building our own website. Then, learn how to keep updating the website with the documentation of the weekly assignments. Also, we discussed the different methods and tools that can be used to manage our projects and time.
To be able to understand Git, I attended a local workshop at QBIC Fablab which was led by my Edu-Tech Engineer colleague (Eng. Areej Abu Raed) from ibTECHar Digital Solutions which is a leading Qatari educational services company.
She introduced us to basics of the process of version control, how to make a clone of my repository for me to be able to locally edit it and how to start building my own website.
The agenda of the workshop was as follows:
HTML (The Hypertext Markup Language): a commonly used language for developing websites. It provides the structure of the web page and organizing text, images and videos of the page.
CSS (Cascading Style Sheets): the language used to organize and describe the style/presentation of an HTML document by setting file structure and layout.
To understand the general format of HTML and adding CSS, I used the website w3schools.com to practice and get familiar with the syntax of HTML
W3schools is an open source web development website which contains lots of tutorials, examples and practices of languages such as HTML and CSS. The advantages of this website are its simplicity, simplified code and an online editor that is used to practice using these languages.
During the local session, we realized that a website can either be developed from scratch or through downloading a free template and editing it. Therefore, before making a decision we explored Bootstrap which contains a large collection of free HTML templates with different themes.
1- To choose a template that suits me, I went through lots of templates in Bootstrap and I didn’t find a template that suits me. Thus, I decided to go for Colorlib because I found some templates that I liked.
The template I chose (Shown in the pictures below) is a photography template which I felt is neat, simple and live. Therefore, I made sure that the website has all the elements I’m looking for in order to optimize the editing process. Finally, I downloaded this template from here.
2- To edit the html code of my website, I decided to use Brackets which is a free text editor with an option to live preview the website while you are editing it. After downloading my template, I copied all the files inside the downloaded template folder into Brackets. This allowed me to view the different pages and edit the HTML code of the website template.
3- I started by editing the structure and elements of each page separately. I decided to go for four main pages/tabs in my website. These pages are :
Image resizing means optimizing images to be used for a website because large images can slow down the preformance of the website which reduces the quality of the user experience. It is recommended that simple images should be 100 KB for a better optimiezed performance.
Therefore, I used Webresizer.com which is an online image optimization tool that it is easy to use and there is not need to download it. I mainly used it to resize images and screenshots that are simple and don't have a lot of details.
To understand the idea of version control, git setup and clone my repository, we went through the necessary steps during the local class. These are following steps I followed:
Now that I was done with setting up a local working directory/workspace, I can copy my template files in the cloned folder and edit my website files in the local workspace using Brackets.
However, I need to do a certain process to upload the files to my remote repository so the website can be published and be available for public.
This process will be repeated (in the same order) everytime I change or add something to my website.
To track my progress in the different assignments of the Fab Academy and my final project, I decided to use Trello because it's simple and I'm familiar with it.
Trello is a software that helps in organzing projects, add tasks, due dates and track progress. It's a very flexible tool.
Therefore, I wend ahead and added a new board for Fab Academy, and inside that board I will keep on adding upcoming assigments and the tasks I need to complete so I can easily track my progress and get notifications whenever I'm falling behind.
The image below is a screenshot of my Fab Academy board.