1. Project Management¶

This week I worked on defining my final project idea and started to get used to the documentation process.

Learning Outcomes:

Identify and utilize version control protocol(s)
Explore and use website development tool(s)
Communicate an initial project proposal

Identify and Utilize Version Control Protocol(s)¶

Version Control System¶

For version control, I’ve chosen Git, a distributed version control system widely used for managing project code and collaboration. Git provides a robust platform for tracking changes, facilitating collaboration, and ensuring project integrity across different contributors and versions.

Steps for Setting Up My Git Repository:¶

Install Git: I downloaded and installed Git on my local machine from the official Git website.

Clone Repository Locally: I began by cloning the remote repository to my local machine using the git clone command. This creates a local copy of the repository on my computer. The link to clone the repository was obtained from my GitLab website, where the project repository is hosted. I copied the clone with HTTPS link from the code tab.

```
git clone <repository_URL>
```

Configure Git: I set up my Git configuration with your username and email address using the git config command.

``` git config –global user.name “Your Name”

git config –global user.email “your_email@example.com” ```

Add Files: I added my project files to the Git staging area using the git add command.

git add .

Commit Changes: I committed changes to the repository with a descriptive message using the git commit command.

git commit -m "Initial commit"

Push Changes: I uploaded my local repository changes to the remote repository with the git push command.

git push

Explanation of Version Control Concepts:¶

Commits: Commits represent individual changes or snapshots of your project files. Each commit includes a unique identifier, timestamp, and commit message describing the changes made.
Branches: Branches in Git allow for parallel development and isolation of changes. They enable developers to work on new features or bug fixes without affecting the main project branch (e.g., master).
Merge: Merging combines changes from different branches into a single branch, typically the main branch. It integrates new features or bug fixes developed in separate branches back into the main project branch.

Explore and Use Website Development Tool(s):¶

During the first week of the Fab Academy, I delved into various website development tools to kickstart my documentation journey. This involved familiarizing myself with HTML and CSS, the fundamental building blocks of web development. HTML, the markup language, provided the structure for my web pages, while CSS allowed me to style and customize their appearance.

To create my website, I followed a structured approach:

Downloading Visual Studio: I started by downloading Visual Studio, a powerful code editor, to facilitate easy editing of HTML and CSS files.
Understanding HTML: I began by learning the basics of HTML, including elements, tags, and attributes. This enabled me to define the structure and content of my web pages effectively.
Styling with CSS: With a grasp of HTML, I ventured into CSS to enhance the visual appeal of my website. Using CSS rules, I applied colors, fonts, layouts, and other stylistic elements to achieve a cohesive and visually appealing design.

Throughout the process, I encountered various challenges, such as aligning elements. However, through persistence, research, and experimentation, I overcame these hurdles and gained valuable insights into the intricacies of web development.

Exploring website development tools not only empowered me to create my digital presence but also laid the foundation for future learning and exploration in the realm of web development.

The Big Decision¶

Thisdecided to make the transition from HTML and CSS to using an MkDocs template for documenting my Fab Academy journey. The transition involved the following steps:

Downloading the MkDocs Template: I started by downloading an MkDocs template to streamline the documentation process. MkDocs is a fast and simple static site generator that allows me to write documentation in Markdown format.

Creating a Copy of My Old Repository: To maintain continuity and preserve previous work, I created a copy of my old repository where I had documented my Fab Academy journey using HTML and CSS.
Adding the MkDocs Template: After creating a copy of my old repository, I added the MkDocs template to the repository. This involved configuring the MkDocs settings and directory structure to align with my documentation requirements.
Converting HTML Documentation to Markdown: I converted the existing HTML documentation to Markdown format by adapting the content to the correct Markdown syntax. This process involved reformatting headers, lists, paragraphs, and images to Markdown syntax.

When converting HTML documentation to Markdown, several differences in syntax and formatting need to be addressed:

Headers: In HTML, headers are defined using <h1>, <h2>, <h3>, and so on. In Markdown, headers are denoted using hash symbols (#). The number of hash symbols indicates the level of the header. For example, # represents <h1>, ## represents <h2>, and so forth.
Lists: HTML supports ordered lists (<ol>) and unordered lists (<ul>). Markdown also supports both ordered and unordered lists, but the syntax differs slightly. In Markdown, unordered lists are created using asterisks (*), dashes (-), or plus signs (+), followed by a space and the list item. Ordered lists are created using numbers followed by periods (1., 2., etc.) and a space.
Paragraphs: In HTML, paragraphs are defined using <p> tags. Markdown does not require explicit paragraph tags; paragraphs are delineated by line breaks or double line breaks.
Images: In HTML, images are inserted using the <img> tag with attributes such as src for the image source and alt for alternative text. In Markdown, images are inserted using a similar syntax, but with different delimiters. Images are denoted by an exclamation mark (!) followed by square brackets containing the alt text and parentheses containing the image URL.

During the conversion process, each HTML element needs to be translated into its corresponding Markdown syntax. This involves identifying headers, lists, paragraphs, and images in the HTML document and applying the appropriate Markdown syntax to achieve the desired formatting and structure in the Markdown document.

This is the markdown for this page as i edit it from Visual Studio.

I decided to make the transition to Markdown for documenting my Fab Academy journey mainly for efficiency and ease of use. While I had learned and grasped HTML, I found Markdown to be a faster and more comfortable option for documenting my progress. Markdown’s simplicity and versatility allow me to focus more on content creation rather than formatting.

Understanding the mkdocs.yml File

The mkdocs.yml file serves as the configuration file for MkDocs projects, providing essential settings and customization options. This YAML (YAML Ain’t Markup Language) file defines the structure and appearance of your MkDocs documentation.

Key Components:

Site Name and Metadata: Within the mkdocs.yml file, you can specify the name of your site and include metadata such as the site title, author, and description. These details help users understand the purpose and content of your documentation.
Navigation Structure: The nav section allows you to define the navigation structure of your documentation. You can organize pages into hierarchies and specify the order in which they appear in the navigation menu.
Theme Configuration: MkDocs offers various themes to customize the appearance of your documentation. In the theme section of the mkdocs.yml file, you can specify the desired theme and configure additional settings such as color schemes, navigation options, and typography.

Communicate Initial Project Proposal¶

I formualted an idea for my Final Project. I wrote a brief about the project and visualized the idea through a sketch, which is actually a rough 3d model made using Sketchup.