Principles and Practices

Assignment No.1

# Creating a Webpage

1. Get the HTML and CSS Template

To make my webpage design easier, I used a free template from ThemeWagon.
This platform provides various HTML and CSS templates that can be customized according to personal preferences.

Steps to Get the Template

  • Visit ThemeWagon.
  • Choose a free HTML and CSS template that suits my needs: Clark Template.
  • Download the template as a ZIP file.
  • Extract the ZIP file and open the folder containing the HTML, CSS, and JavaScript files.
  • Download and Install Visual Studio Code (VS Code), a powerful code editor, to modify the template.
  • Open the template files in VS Code.

2. Learn HTML and CSS Basics

Since it was my first time using HTML and CSS, I needed to understand their fundamental concepts. I used W3Schools as a learning resource and I found the page very useful.

What are HTML and CSS?

  • HTML (HyperText Markup Language) - structures web pages; It is the standard language used to structure web pages by defining elements such as headings, paragraphs, links, and images.
  • CSS (Cascading Style Sheets) - styles and formats the HTML content; It is used to style and format the HTML content by modifying colors, fonts, layouts, and spacing.

Key Learning Points:

  • HTML elements and structure.
  • CSS properties for styling the webpage
  • How to modify text, colors, and layout
  • How to include images and links.

3. Edit the Template

Once I understood the basics of HTML and CSS, I started customizing my webpage.

Editing Steps:

  • Open the HTML file and update the text with my personal information.
  • Add my Fab Academy introduction and weekly assignment documentation.
  • Save and test the webpage in a browser to ensure everything displays correctly.

How the page turned out

# What is Git and GitLab?

1. What is Git?

Git is a distributed version control system that facilitates effective project history management, code collaboration, and code change tracking. It enables several individuals to collaborate on the same project at once without erasing each other's edits. Git maintains an exhaustive log of changes, allowing users to roll back to earlier iterations as necessary. Before adding new features to the main codebase, developers can test them out separately using branches. Git is a popular software development tool that is crucial for source code management in projects of all sizes.

  • Download and Install Git from Git's official website.

    • 2. What is GitLab and How to Use It?

    GitLab is a web-based platform built around Git, providing tools for hosting Git repositories and managing software development workflows. It offers additional features like Continuous Integration/Continuous Deployment (CI/CD), project management, issue tracking, and code review tools.
    GitLab offers a more comprehensive, all-in-one platform suited for teams that need a complete DevOps pipeline, including CI/CD and more advanced project management tools.

    3.Create account and generating SSH Keys for GitLab

    SSH (Secure Shell) keys are a pair of cryptographic keys used for secure authentication when interacting with Git repositories on GitLab. They are an alternative to using passwords for authenticating with GitLab when performing actions like cloning repositories, pushing changes, or pulling updates.

    By using SSH keys, you can perform Git operations without needing to repeatedly enter your GitLab credentials (username/password), providing a more secure and efficient workflow.

    steps

    • First we need to register to fablabs.io. using your email
    • We must grant Gitlab access to FabCloud in order to gain access. To sign in, we visit gitlab.fabloud.com. Rather than using your username and password, we only need to utilise the fablab button to sign in, provide permission, and access your generated account.
    • for generating ssh keys, cloning, pulling and pushing I used a youtube video link for more clearance and understanding.

    • Open a terminal and run the command: ssh-keygen -t rsa -C "your.email@example.com" to generate ssh key.
      A folder was created cat ~/.ssh/id_rsa.pub where my ssh key was saved and i copied it and past it as shown in the following image to add it.

    4.Clone, Add, Commit and Push on GitLab

    To work with a GitLab repository, you first download it to your computer so you can access and edit the files. After making changes, you prepare the files for upload and save them with a short message describing the updates. Finally, you send the changes back to GitLab, making them available for others to see and collaborate on.
    So there are a few command lines to use in order to carry out the action:

    git clone git@gitlab.fabcloud.org:your-repo.git
    → Downloads a copy of a Git repository from GitLab to your computer.
    cd your-repo
    →Moves into a folder or directory so you can work inside it.
    ls
    →Lists all files and folders in the current directory.
    git remote -v
    →Shows the remote repository URL(s) linked to your local repo.
    git status
    →Shows the status of changes (modified, staged, or untracked files).
    git add .
    →Selects files to be included in the next save (commit).
    git commit -m "Updated webpage content"
    →Saves changes locally with a short message describing them.
    git push origin main
    →Sends your saved changes to GitLab so others can see them.