2. Project management¶
Of course, everything starts from week 02’s assignment:
- read, sign the student/instructor/lab agreements,and commit to your repos
- work through a git tutorial
- build a personal site in the class archive
- describing you and your final project
Updating HTML and CSS Codes¶
About.html
// Changing the design of about page
html and css code () {
// <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your name - Fab Academy</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.google.com/specimen/Libre+Baskerville" rel="stylesheet">
<style>
body {
background-color: antiquewhite;
}
h1{color: whitesmoke;
background-color: darkseagreen;
}
h2{
color: #FAF8F1;
background-color: #C58940;
}
p
{
color: navy;
margin: 0;
padding: 0;
}
ul
{
color: navy;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="navbar-inner">
<a href="index.html">Weekly Assignments</a>
<a href="final-project.html">Final Project</a>
<a href="about.html">About me</a>
</div>
</div>
<div class="content">
<h1>About me</h1>
<img src="./images/avatar-photo.jpg" alt="Photo of Your name" />
<!-- While this is an image from the images folder. Never use absolute paths (starting with /) when linking local images, always relative. -->
<h1>Yerlan Turgenbayev</h1>
</div><p>
Yessenov University <br/>
District 32<br/>
Aktau <br/>
Kazakhstan <br/>
</a>
<h2>Academic background</h2>
<p> I have the following academic degrees </p>
<ul>
<li>a Bachelor's degree in Physics Electronics at Al-Farabi Kazakh National University</li>
<li>a Master's degree in Management of Technology at NYU Poly, USA</li>
<li> PhD in Public Administration at Yessenov University.</li>
</ul>
<h2>Work experience</h2>
<footer>
<p>Copyright 2025 <Your name> - Creative Commons Attribution Non Commercial </p>
<p>Source code hosted at <a href="https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/waag/students/yerlan-turgenbayev" target="_blank">gitlab.fabcloud.org</a></p>
</footer>
</body>
</html>;
}
This code represents my practice with updating HTML and CSS codes, which are fundamental technologies for building and styling web pages. The code consists of two main sections: the HTML and CSS code snippet at the top and the rendered webpage output at the bottom.
The first section displays the HTML structure of a simple personal webpage. The document starts with the basic HTML boilerplate, including the DOCTYPE declaration and html, head, and body tags. The head section contains metadata such as the title, character encoding (UTF-8), and linked stylesheets to apply CSS styling to the webpage. The CSS styles, defined within a - style tag, control the page’s appearance, including the background colors, font styles, margins, and alignment. The CSS defines styles for elements such as the header, navigation bar, sections, and footer to create a structured layout.
The body section includes multiple sections, such as a header, navigation bar, main content area, and footer. The header displays the page title and an image, while the main section presents biographical information and educational background. A navigation bar with menu links allows easy access to different sections of the site. The footer contains contact details and copyright information.
The updated HTML and CSS codes gave the visual representation of the webpage based on the HTML and CSS code. The final output consists of a two-column layout, with a sidebar labeled “About me” that includes a placeholder profile image. The main content section displays the user’s name, biography, and educational background. The design follows a simple and structured layout, using different background colors for contrast and readability.
Through this practice, I improved my HTML structuring and CSS styling skills, focusing on layout design, text formatting, and color customization. This exercise helped strengthen my understanding of frontend web development, which is essential for creating personal webpages, portfolios, and structured web layouts.
Integration of MkDocs to GITLAB on POWERSHELL¶
// Changing the design of about page
POWERSHELL coding () {
- **Installing MkDocs**
pip install mkdocs
pip install mkdocs-material
- **Initializing an MkDocs Project**
mkdocs new my-project
cd my-project
It created its structure:
my-project/
docs/
index.md
mkdocs.yml
mkdocs serve It run at http://127.0.0.1:8000/.
- **Adding MkDocs to GitLab Repository**
git init
git add .
git commit -m "Initial MkDocs commit"
git branch -M main
git remote add origin <your-gitlab-repo-url>
git push -u origin main
- **Configurating GitLab CI/CD for MkDocs**
image: python:3.9
before_script:
- pip install mkdocs mkdocs-material
pages:
script:
- mkdocs build
- mv site public
artifacts:
paths:
- public
only:
- main
- **Enabling GitLab Pages**
https://<your-username>.gitlab.io/<your-repo-name>/
git status
git log --oneline --graph --all
Yerlan Administrator@CEC2411-00269 MINGW64 ~/my-project (main|MERGING) $ git add . git commit -m "Resolved merge conflicts" warning: in the working copy of 'public/assignments/week02.html', LF will be replaced by CRLF the next time Git touches it [main a9f9992] Resolved merge conflicts Yerlan Administrator@CEC2411-00269 MINGW64 ~/my-project (main) $ git push origin main Enumerating objects: 14, done. Counting objects: 100% (14/14), done. Delta compression using up to 4 threads Compressing objects: 100% (10/10), done. Writing objects: 100% (10/10), 1.33 KiB | 683.00 KiB/s, done. Total 10 (delta 6), reused 0 (delta 0), pack-reused 0 (from 0) To https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/waag/students/yerlan-turgenbayev.git ddfe7ac..a9f9992 main -> main Yerlan Administrator@CEC2411-00269 MINGW64 ~/my-project (main) $ git status git log --oneline --graph --all On branch main nothing to commit, working tree clean * a9f9992 (HEAD -> main, origin/main) Resolved merge conflicts |\ | * ddfe7ac Reinitialize Git repository | |\ | | * ac74675 Update file week01.html | | * ec8de03 Update file style.css | | * c898ba1 Update file week02.html | | * 44d725d Update file style.css | | * 32dc556 Update file style.css | | * d108d41 Update file index.html | | * 736721b Update file week02.html | | * 867b944 Update file index.html | | * 9b5fb32 Update file index.html | | * 0ff8714 Update file index.html | | * 68c9c22 Update 2 files | | * da13455 Update file about.html | | * 775cd9e Initial commit from student template | * 8b67108 Initial commit * 6f764ef Reinitialize repository
}
This code represents my practice with integrating MkDocs into GitLab using PowerShell. MkDocs is a static site generator designed for building project documentation, while GitLab provides version control and CI/CD pipelines to automate the deployment of documentation. Using ChatGPT, I received step-by-step instructions that helped me successfully perform the integration process.
The first section outlines the installation of MkDocs and MkDocs-Material, which are essential for setting up the documentation framework. By running the commands pip install mkdocs and pip install mkdocs-material, I ensured that the necessary packages were installed on my system.
Next, I initialized a new MkDocs project using the command mkdocs new my-project, which created a folder structure containing essential files, such as index.md (for documentation content) and mkdocs.yml (for configuration settings). I then verified the setup by running mkdocs serve, which started a local server at http://127.0.0.1:8000/, allowing me to preview the documentation before deployment.
To integrate the MkDocs project with GitLab, I used Git commands to create a repository, commit changes, and push them to a remote GitLab repository. The commands included git init, git add ., git commit -m “Initial MkDocs commit”, and git push -u origin main. This ensured that my MkDocs project was stored and version-controlled in GitLab.
The next part of the process involved configuring GitLab CI/CD to automate the deployment of MkDocs. The .gitlab-ci.yml file was created to define a pipeline using Python 3.9 as the execution environment. The pipeline included a before_script to install MkDocs, followed by a pages script that built the documentation and moved it to the public directory. This step enabled GitLab Pages to serve the generated MkDocs site.
Git Repository Is Fully Synced!
Finally, I verified the deployment by checking the status of the repository using git status and git log –oneline –graph –all. Once the setup was complete, the MkDocs site became accessible at https://
This experience helped me understand the workflow of deploying MkDocs using GitLab CI/CD, automating documentation updates, and utilizing Git for version control. With the assistance of ChatGPT, I was able to follow precise instructions, troubleshoot potential issues, and successfully implement a documentation deployment pipeline.
BUT there was a big proble of connecting my VS code to Gitlab
Solving the problem of connecting VS Code of a local computer to GITLAB¶
Under the guidance of Henk, we have done the process of solving the problem of connecting VS Code on a local computer to GitLab. The screenshots document the steps I took to successfully establish a connection between my local development environment and a remote GitLab repository, ensuring version control and project synchronization.
The first section shows a remote troubleshooting session, where I sought guidance on resolving connection issues. This step was crucial in understanding the potential problems and learning the correct approach to configuring Git for GitLab integration.
The first section shows a remote troubleshooting session, where I sought guidance on resolving connection issues. This step was crucial in understanding the potential problems and learning the correct approach to configuring Git for GitLab integration.
The next few sections display various terminal commands executed in VS Code’s integrated terminal. Initially, I navigated to my project directory and verified the files using ls -la, which lists all files, including hidden .git configuration files. This allowed me to confirm that the repository structure was correctly set up.
Further down, I initialized the Git repository using git init, added all relevant files with git add ., and committed changes with git commit -m “empty repo”. These commands ensured that my project was properly version-controlled before pushing it to GitLab. The git status command helped verify the staged and committed changes.
As shown in the next part, I linked my local repository to the remote GitLab repository using git remote add origin
As it shows that my repository was successfully updated in GitLab. The GitLab interface shows the uploaded project files, commits, and pipeline execution, indicating that the integration was successful. Additionally, the MkDocs template was deployed, ensuring that the documentation framework was properly configured and hosted via GitLab Pages.
Through this practice, I improved my Git workflow skills, troubleshooting abilities, and understanding of GitLab repository management using VS Code’s terminal. By resolving the connectivity issue, I was able to streamline my project development and version control process, making future updates and collaboration more efficient.
// Commands for creating the repository at my computer using the Power Shell and connecting VS Code on a local computer to GitLab() {
ls -al
dir
cd .ssh
dir
config
cd ..
ssh git@gitlab.fabcloud.org
yes
ctrl-c
del .ssh
ssh-keygen
ssh git@gitlab.fabcloud.org
cd .ssh
less id
pub
more id_ed25519.pub
ssh-key *****
gitlab.fabcloud.org
ssh git@gitlab.fabcloud.org
cd ..
mkdir fabacademy
cd fabacademy'
git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/waag/students/yerlan-turgenbayev.git
}
This sequence of commands demonstrates the process of connecting VS Code on a local computer to GitLab, focusing on SSH key setup, Git configuration, and repository cloning. By following these steps, I ensured that my system was properly authenticated and ready for version control operations with GitLab.
The process begins with listing files and directories to check for the presence of necessary configuration files. The command ls -al displays all files, including hidden ones, while dir lists directory contents. To access SSH keys and configurations, I navigated to the .ssh directory using cd .ssh and verified its contents with dir. The config command likely refers to managing SSH configurations, ensuring that the system recognizes the necessary authentication settings.
Next, I attempted to establish an SSH connection with GitLab using ssh git@gitlab.fabcloud.org. Since this was the first connection attempt, the system prompted me to confirm the authenticity of the remote host. By typing yes, I added GitLab’s server to my known hosts, allowing secure future connections. However, if issues arose, I could interrupt the process using ctrl-c. To reset SSH settings, I used del .ssh to remove existing keys, though this is not recommended unless necessary.
To generate a new SSH key pair, I executed ssh-keygen, which created a private (id_ed25519) and a public (id_ed25519.pub) key. Returning to the .ssh directory (cd .ssh), I verified the generated key using more id_ed25519.pub, which displayed the public key. This key was then added to GitLab’s SSH settings to enable secure authentication.
After ensuring SSH authentication, I prepared my local system for GitLab integration. I created a new directory using mkdir fabacademy and navigated into it with cd fabacademy. Finally, I cloned my GitLab repository using git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/waag/students/yerlan-turgenbayev.git, which downloaded the remote repository to my local machine, enabling version-controlled development.
Through this process, I successfully set up a secure SSH connection, configured Git for GitLab, and cloned a repository for further development. These steps are essential for managing projects efficiently using Git and VS Code, ensuring smooth collaboration and seamless updates to the repository.