Project Managment

Week 2

Introduction

In this week we are introduced to Markdown and HTML as we are required to build a personal site which would include our documented work on every assignment

Brackets

A modern text editor for HTML language, the standard markup language fro creating web pages, and web applications. In addition, this text editor would also be used to edit the Cascading Style Sheets (CSS), a style sheet language used for describing the presentation of a document written in HTML. The text editor can be downloaded from brackets.io.

Getting Started

Once the installation is done, run the software:


Next Step:

As shown below:


Your screen now should look similar to below:


Now to be able to show any code as part of this guide in a way that allows users to easily copy the content rather than writing it, we are going to use a JavaScript code that would be embedded in our source-code, code-prettify.

Copy Below Code to your HTML Head:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Then add the following command in the designated part of the page were you are willing to show the code in this way:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>


Also keep in mind that any < must be replaced with &lt; and > with &gt;

A quick way as taught by our local mentors which can be used with any text editor:

As shown below:


Main Modifications in CSS and HTML

There are two main modifications that have been made on CSS. The first modification is adding an indent at the start of every main paragraph and this required adding the following code into the main CSS:

div.indent {
    text-indent:3em;
}

It is good to note that 'em' is one type of relative length unit of CSS, which provides better scaling between different rendering mediums. A unit of cm, mm, or even pt can be used but that is not recommended as the user might access the web page from different devices with different screen sizes. For more information on CSS units.

To show the effect of this modification in CSS on HTML, the following code must be added to the <div> tag:

<div class="indent">     
<p>Insert paragraph here please..</p>
</div>

The second Modification to the original CSS was adding a set of command codes to allow the rotation of pictures by the defined number of degrees:

.rotate1 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(270deg);
                }

HTML Code Example Below:

<img class="rotate1" src="sizedSketch.jpg"
alt="C:\Users\salem\OneDrive\FabLab\website" 
width="480em" height="720em" >
Git Tutorial

Now that we have understood the fundamentals of HTML and CSS which would help us build a website. The question is, how can we access this website normally instead of accessing it through Brackets. This website must be hosted, somewhere. It is good to note that Fab Academy provides each participating student a space of 300MB to host his website. This is managed by a version control system which keeps track of all changes to documents, files etc within the hosting server. This is useful when a group of people are working together to develop a website, or even a software. One notable feature is allowing editors to track each other's edit, ability to correct mistakes and defend against vandalism.


Requirements:

In the following step we will generate the SSH key and enable it, which is a one time step per pc. It is similar to using a username and password, but in this case, it will be automated.

Below is an example of the public SSH key obtained using the command cat id_rsa.pub in ~/.ssh:


Git Commands to update web page on GitLab

Student Agreement