Project management

What is the assignment ?

This week assignment is to build a personal website, so that I can put all of my docimentation on it. The second assignment is to now what is git a finish git tutorial to get better understanding of Git

What is the goals ?

My goals this week is to search a lot about building websites also learn the tools that will make my website helpfull for others so they can find the full steps on how to do something, Attractive for the visitor, and simple shape and content to let anyone find the solution of there problems in a clear and direct way. Also, I want to know what is git, git hub, and git lap and try some tutorials to know it more.

In this Page you will find:-

  1. How to build your own website.

  1. Git

How to build your own website

I must say that I didn’t imagine that building a website will be so easy.

From where you can get the template?

So in order to build a website you have two choices one is to start your template from scratch or find a template and edit it. you can find many templates in many websites one of them is startpootstrap also here is the template I use. Realy bug thanks to the guy who designed it.

Tools I used to build my website

To build your website you must have a text editor which help you to create your files. There are many text editors such as brackets, notepad++ which have a lot of languages such as C++, HTML, Markdown and many others. lately one of the Fab lab members told me about a language which is easier than HTML called markdown down you can see few markdown editors:-

These programs are free but WriteMonkey requires Microsoft .NET 4.0., also Markdownpad2 there are a free version and pro version. At the moment I use Caret there is no reason for that, I think I will change it later. Also, the style of my weekly assignments and the final project are the same I download it from ahmed pageand you can see it by clicking here. There is also a tool called Pandoc that helped me to convert from Markdown to HTML, also I used Windows PowerShell which is a shell developed by Microsoft for purposes of task automation and configuration management. My website home page is the template I just edit it and the weeks and assignment are like the style above. To make it easy I write in steps what I do every week:-

  1. Creat a new page In caret and start documentation.
  2. Save the file in the same place the style exist.
  3. Open Windows PowerShell.


    1. If you want to save it with style write
      pandoc -c 1styling.css week2.md -f markdown -t html -s -o week2.html
    2. Else write
      pandoc -f markdown week2.md -t html -o week2.html
  4. You will find a HTML file in the same place.
  5. If you want to update Open the (.md) and update then go to step 3.

Website to learn HTML, CSS, and Markdown

To learn HTML and CSS I took a tutorial in W3C where you can find a lot of tutorials and lessons. Also, I learned the basics for markdown from this video and I found a cheatsheet in git hub.

Problems I faced with HTML

The first problem I faced is how to make some of the words and images as a link. I learned from W3C that I must contain the word that I want to make it a link by
<a href="“write the link">then write the word or the image</a>
Another Problem was how to make the paragraph and the images in the middle, I learned from W3C that I must write the class=“container” for example
< div class="container" >
everything inside this division will be in the middle. To decrease or increase the scale of the image there are two ways, one is to write
< img width="30%"

by this way my image will decrease but whenever I zoom in or out the image will change so it depends on the zooming. The other way is to write any number then (px) for example 45px in this way the image will fix and will not affect when I zoom in or out.

Also when I put an image it takes a space and separates the paragraph, so I searched a lot and asked friends then I learned that there is a way to move the image left or right like this and I write before the image <br><br> to make a space between the image and the words
<br><br> <img width=“30%"; style="float": left" src="image">
This allow me to move the image where ever I want. Also the fact that I must put the image
<img style=“float: left”

At the beginning of my journey I was following a way in programming and with time I improved a lot and I learned many things that help me and showed my mistakes. So I decided to keep the old way and some mistakes in the first weeks to let you see how I improved with time.

Git

There is a lot of version controls such as RCS, CVC , and git that make you synchronise the work between two different computers, collaborate with your team if your working in the same project, and it will have the full history of the process.

What is Git, GitHub, GitLab ?

So Git is a famous version control like what I said above, GitHub a web platform that uses git and tools for collaboration, and GitLab it’s like GitHub and it is an open source that let you run private cloud version and have many different ways to collaborate.

websites that give a git tutorial and git cheatsheet

I learned few things about Git from code schools, also there is a Git cheatsheet that can help you.

Finding you SSH key

By doing this I can work and edit the fils without affecting the remote files because I copy the repo from the server and I set all files for a local repo.

Adding or updating files

Fab Academy Student Agreement

Here is my student agreement

Previous week Home Next week