1. Project management¶

This week I worked on defining my final project idea and started to getting used to the documentation process, and generated sketches of deifferent details.

First Task¶

We were assigned to a website for documentation, Then we created an account in fablab.io and accepted the invite that was sent by the email.

The website is based on MkDocs. MkDocs is a static site generator specifically designed for creating project documentation. It is written in Python and uses Markdown to format documentation pages. It is widely used for software and technical documentation due to its simplicity and ease of deployment.

What is Markdown?¶

Markdown is a lightweight markup language used to format plain text documents in a simple and readable way, and it was created to be easy to write and convert to HTML.

Key Features of Markdown: - Simple Syntax: Uses plain text formatting (e.g., # for headings, bold for bold text). - Easy to Read and Write: Designed to be human-readable even without rendering. - Widely Supported: Used in platforms like GitHub, Reddit, Stack Overflow, and MkDocs. - Can Be Converted to HTML: Easily converted to HTML for web publishing.

The Difference Between Markdown and HTML

Markdown and HTML are both used for formatting text, but they serve different purposes and have distinct levels of complexity. Markdown is a lightweight markup language designed for easy readability and quick formatting using plain text. It uses simple syntax making it ideal for documentation, notes, and README files. On the other hand, HTML (HyperText Markup Language) is the backbone of web pages, offering complete control over structure and design. Unlike Markdown, HTML requires opening and closing tags, allowing for advanced customization with CSS and JavaScript. While Markdown is easier to write and more user-friendly, HTML is more powerful and flexible, making it the preferred choice for building websites and web applications.

We also learned how to add a local image in markdown. This happens by uploading it in GitLab in Images, then write the syntax for importing the image from the file.

This is the folder in GitLab that we upload images to¶

When adding an image to the website, we start writing “.” after writing which means going back to the previous file. so we write (../images/)

A heading can be added by writing it after #. The more ### you write, the smaller the heading becomes.

Heading with one¶

Heading with two¶

Heading with three¶

Heading with four¶

Heading with five¶

The we learned the difference between Image Dimensions and Size. The Image Dimensions is measured pixels, and the more pixels it has the higher the quality of the image. And The Image Size is the size of the file itself and how much room it will need from the device’s storage. The Dimensions effect the size of the image because the larger the dimensions of the image the larger its size in the device’s storage.

An image’s dimensions can be changed by using an image editor (e.g., Photoshop, GIMP, Paint, or online tools like Canva). Then resize the image while maintaining or adjusting the aspect ratio, and export it in the appropriate format.

Example in Photoshop: Image > Image Size > Adjust Width & Height.**

Second Task¶

We were introduced in this task to GitLab. GitLab is a web-based Git repository that provides free open and private repositories, issue-following capabilities, and wikis. It is a complete DevOps platform that enables professionals to perform all the tasks in a project—from project planning and source code management to monitoring and security.

And the difference between it and Git is that Git is a version control system that allows developers to keep track of changes made to their code over time, while GitLab is a web-based Git repository manager that provides a complete DevOps platform for teams to collaborate on software development.

Then I learned how to clone my website locally in my laptop, and learned how to push to it.

Step 1

Open the website’s folder in GitLab, then click on “Code”.

I cloned my websited with HTTPS and opened it with my IDE Visual Studio Code.

Step 2

When you choose the option to directly open from your IDE and choose Visual Studio Code, there will be a pop-up that will directly lead you to Visual Studio Code app

Then you choose a Repository Destination

Step 3 When Visual Studio Code opens, you write your GitLab username and password and then you have your website cloned in your IDE.

Step 4 Any Additions made in Visual Studio should be commited to the actual source. This can be done by saving the updates you made to the website, then commiting the changes in the Source Control.

As shown in the image above, we have the Source Control button on the left side of the page. Changes cannot be comitted unless you write a message. Then below you can see a graph that documents the changes made.