Week 2: Project Managment: How to Make A Website.

by AlMaha AlMuhairi


Posted on January 28, 2019


howto.webp

For this week I made my website that I will be using to keep all my progress and assignments for my Fabacademy journey.

The programs I used:

Brackets (The HTML Editor)

Canva (The Online Image Editor)

GIT-SCM (We will be using GIT Bash)

The website templates I used:

Freelancer Template (My Index/Home Page)

Blog Post Template (The Assignment/Week Post Pages)

Download the Templates and Install Brackets, then extract and open the main file (Index.html/Blogpost.html) in Brackets

This is the index page and the Freelancer Template, here you will be able to edit your home page.


brackets.webp

This is the weekly post page/ assignment page and the Blog Post Template, here you will be able to edit your weekly assignment page.


blogpost.webp

How to Make Custom Thumbnails/Images Using Canva

Based on our template we can see that that our original images have certain dimensions, we can check this using windows file explorer using the right click on the image, properties, the to the details tab we can see that the images is 900px by 650px.


dims.webp

After Creating an account on Canva, lets create a custom canvas, on the upper right corner create a 900px by 600px canvas.


can1.webp

Your blank 900px by 600px canvas should look like this, this is where all the editing will happen.


can2.webp

On the right side you can search to add a background which you can use the free options or buy the premium options from Canva, after you searched( by manually scrolling or typing ) for a background drag and drop it into your canvas into the upper left side and hold it on the corner, this way it will fill the whole canvas.


can3.webp

On the left side, search for the "square or rectangle" shape, recolor it to grey or white, then stretch it across the entire canvas.


can4.webp

Once you stretch the entire box you will not be able to see below the image, so on the upper left side adjust the transparency, in this case I kept it at 30.


can5.webp

On the right menu click on the text button here you can add a heading and other diffrent types of text, you can adjust different fonts, colors, etc.


can6.webp

How to upload website updates using GIT BASH


git1.webp

Open your websites main root folder this is the main folder that contains all your sites contents, right click the mouse and open GIT BASH from here.


git2.webp

After making changes in your files, type in the GIT command line "git add --all" , this will update all the changes you made to the folder.


git3.webp

After the files are updated, you must commit and add a any comment to that update, type in the GIT command line "git commit -m "add comment" " you will see this commit name updated when you push in the next step, and this commit will be published in your GitHub page .


git4.webp

The files are being updated, you will see this commit name updated when you push in the next step, and this commit will be published in your GitHub page in the next step .



git5.webp

After the commit is complete you can push this update to view on your live site, and view on your GitLab, to this you must type in the GIT command line "git push" .

Student Agreement


agree.webp