assignments

Assignment

work through a git tutorial

build a personal site in the class archive describing you and your final project

TimeTable

I have created a timetable to be on track with my daily classes and what I do that week.

Adjusted Margin Example

Learning outcomes

Git set up

creating SSH key

Basic Git commands

Git clone

Git Mantra

HTML basics

Sketch of a potential final project

Using CMD(Command prompt)

Adjusted Margin Example

Git and SSH Key

This is how I learned Git and SSH key.

Firstly, download Git.

Now, let's go step by step to understand the basics of Git:

Step 1: To identify yourself, use the following commands:

git config --global user.name "your username goes here"
git config --global user.email "your gmail goes here"

To check whether your identification is correct or not, use this command: git config --global --list.

You can use CMD (command prompt) or git bash for this. I used command prompt

Git clone

This is how I learned how to clone with SSH

Cloning in Git is like making a local copy of a project from an online repository. It allows you to work on the code, make changes, and collaborate with others.

Firstly to save your repository done, create a folder to save all the work you do.

Step 1: Open Gitbash or CMD(Command prompt)
Step 2: Navigate to your created folder which would look something like this"C:\Users\dnang\OneDrive\Desktop\FabAcademy"
Step 3: Go to your GitLab and Clone SSH.

Step 4: Use the following commands to clone to your navigated folder.

cd your/navigated/folder
git clone "paste"clone with SSH" here"

You can use CMD (command prompt) or git bash for this. I used command prompt

SSH Key

This is how I learned SSH key.

Creating the SSH Key

Open you git bash or CMD(Command Prompt) and write the following command

SSH key-gen -t rsa

To Find your key

Adding the SSH Key

Step 1:

Step 2:

Git Mantra

These are commands to update your remote or local repository

git status

This code shows you what changes have been made

git add .

This code adds the changes

git commit -m "your message here"

This code is to confirm the changes you have added

git push

This is the last step to update

Firstly always navigate to the folder where all your documents are stored

Creating My Website

This is where I found my website template.

The .html website I chose to use to document my journey at the fab academy, it has the features to display weeks distinctively the way I want people to find it, like below.

That's why I only edited the following information accordingly, and repeated the process weekly.

After opening my webiste in Visual Studio Code, I started of by asking Chatgpt to explain me what was happening in my html code.

After setting up your website, use the git mantra again. Use the git mantra as long as you are making changes

git status
git add .
git commit -m ""
git push

To check whether your changes has been updated visit your git lab again and check the changes you made.

Firstly, I started by asking chatgpt to explain me the whole index page in simple terms.

This HTML code defines the structure and content of a webpage. Here's a breakdown:

<!DOCTYPE HTML>: Declares the document type and version of HTML being used.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document, such as title, character encoding, viewport settings, and links to external resources.
<title>: Sets the title of the HTML document.
<meta charset="utf-8" />: Specifies the character encoding of the document as UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />: Configures viewport settings for responsive design.
<link rel="stylesheet" href="assets/css/main.css" />: Links an external CSS stylesheet named "main.css" to the HTML document.
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>: Provides alternative styles for users who have disabled JavaScript in their browsers.
<body class="is-preload">: The body section of the HTML document with a class "is-preload".
<div id="wrapper">: Defines a container for the entire page content.
<header>, <nav>, <a>, <section>, <div>, <ul>, <li>, <article>, <span>, <img>, <p>, <h1>, <h3>: Various HTML elements used to structure and organize the content of the webpage.
<script>: Includes several JavaScript files to provide functionality and interactivity to the webpage.

For this weeks assignment I have used Chatgpt to generate codes for HTML and correct my codes, since it's my first time learning about HTML.

I asked chatgpt to give me html codes to display what I wanted.

Image

User:

Give me a HTML code to display an image with adjustable size.

ChatGPT:

<section style="width: 100%;">

                                                                  <div style="width: 75%;">

                                                                    <img src="" alt="Your Image Description" style="width: 75vw;">

                                                                  </div>

                                                              </section>

Video

User:

Give me a HTML code to display a video with adjustable width of the screen

ChatGPT:

<video controls src="
    
    
    
compressed_lcdoled.mp4" width="340" title="Compressed Video"></video>

Two Images

User:

Give me a HTML code to add two images side by side with adjustable width coverage

ChatGPT:

<section style="width: 100%;">

    <div style="display: flex;">

      <div style="width: 50%;">

        <img src="Assignments_Pics/week_10/yangtshel 
.jpeg" alt="Image 1" style="width: 100%;">

      </div>

      <div style="width: 50%;">

        <img src="Assignments_Pics/week_10/yangtshel 
.jpeg" alt="Image 2" style="width: 100%;">

      </div>

    </div>

  </section>