Posted on January 28, 2019
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.
This is the weekly post page/ assignment page and the Blog Post Template, here you will be able to edit your weekly assignment page.
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.
After Creating an account on Canva, lets create a custom canvas, on the upper right corner create a 900px by 600px canvas.
Your blank 900px by 600px canvas should look like this, this is where all the editing will happen.
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.
On the left side, search for the "square or rectangle" shape, recolor it to grey or white, then stretch it across the entire canvas.
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.
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.
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.
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.
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 .
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 .
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