Task required:

In this week we assigned to start building our personal website, adding an introduction about us, make it ready for adding documentation for the next assignments.

What I did ?

  1. Download software:
    • * git bash : It is a control system I use it to link my work folder in my computer with my page in fabacademy website.
    • * HTML IDE , brackets : It is a standard markup language for creating web pages which I use it to develop my website.
    • Modify my website page
  2. choose and download free template for my website
  3. Added my documentation for week1 and 2 in my website then push it in the class archive

My steps using brackets:

  1. As shown in the figure below is the main page for brackets. I opened the template from File>open folder and start editing the content and adding my own structure for the website.




  2. Therefore, as shown in the figure below here is my working page, the outline in the left contain the subpages of my website however the codes in the left are my contents that I will provide some basics about them in the next steps.




    • To add a head you can use the following code:
       <h> Hello.. My name is Mozah... </h>
    • To add paragraph you can use the following code:
       <p> Hello.. My name is Mozah... </p>
    • To add an image you can use the following code:
                  <img src="workingarea.png">
                  

    Now updating my website by adding my files "that are done by brackets" using Gitbash:

    1. I opened gitbash and the figure below preset its working page




    2. Now to add a file type: git add -A . "becareful with the spaces"




    3. To check your file status type: git status as shown in the figure below. Notice that the files should appear in green color.




    4. To save the changes in the files type: git commit




    5. Finally, to send the file to the server type: git push




    6. Now, to the updates in git lab, go to gitlab.fabcloud/academy/fabacademy....




Modify the website style

In brackets, in CSS we can modify the style like background, text size and type. The figure below shows some basic modification I learned.