Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nehal-Khan-29
Nehal-Khan-29 authored Jul 29, 2024
1 parent ab8c5f2 commit 54ce07a
Show file tree
Hide file tree
Showing 3 changed files with 415 additions and 0 deletions.
145 changes: 145 additions & 0 deletions Archives/Task - 1.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
---
title: TASK 1 [GIT & GITHUB]
tags:
- General
- Git & GitHub
author: Open Source Domain
date: 2022-02-21
---
## Creating an GitHub account
1. Go to [<b><span style="color: #FE83C6">GitHub</span></b>](https://github.com/join).
2. Sign up for GitHub.

*Video Reference*: [<b><span style="color: #FE83C6">Setup GitHub Account</span></b>](https://youtu.be/XaMiHHu_rb4)



<br>

<hr>

## Install Git In Your desktop
#### Kindly see the video and install git bash in your system and set your username and user-email in the Git Bash.
*Video Reference*: [<b><span style="color: #FE83C6">Installing Git</span></b>](https://www.youtube.com/watch?v=YXXp_ht4pwQ&list=PLB5jA40tNf3v1wdyYfxQXgdjPgQvP7Xzg&index=6)


<br>

<hr>

## Git operations
#### To use Git, developers use specific commands to copy, create, change, and combine code. These commands can be executed directly from the command line or by using an application like GitHub Desktop or Git Kraken.

<br>

**<span style="color: #FF6363; font-size: 1rem;">Basic Operations</span>**
#### The following is a summary of basic git operations:
**<span style="color: #B958A5">git add</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Puts current working files into the stage.
</div></b>

**<span style="color: #B958A5">git checkout</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Replaces the current working files with files from a branch.
</div></b>

**<span style="color: #B958A5">git checkout -b</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Creates a new local branch from the current branch's tip.
</div></b>

**<span style="color: #B958A5">git clone</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Clone an existing repository into a new directory.
</div></b>

**<span style="color: #B958A5">git commit</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Commits staged changes to a local branch.
</div></b>

**<span style="color: #B958A5">git commit -a</span>**

<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Commits all modified files to a local branch(shorthand for "git add" followed by "git commit" for each modified file).
</div></b>

**<span style="color: #B958A5">git fetch</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Downloads changes from a remote repository into the local clone.
</div></b>

**<span style="color: #B958A5">git merge</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Merges files from a given branch into the current branch.
</div></b>

**<span style="color: #B958A5">git pull</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Fetches remote changes on the current branch into the local clone, and merges them into the current working files.
</div></b>

**<span style="color: #B958A5">git push</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Uploads changes from all local branches to the respective remote repositories.
</div></b>

**<span style="color: #B958A5">git reset</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Makes the current branch point to some specific revision or branch
</div></b>

**<span style="color: #B958A5">git rebase</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Integrates changes from one branch into another. It is an alternative to the better known "merge" command.
</div></b>

**<span style="color: #B958A5">git fork</span>**
<b><div style="background:#212326; margin: 1rem 0; -webkit-border-radius: 4px; padding:0 1rem; ">
Fork will create a copy of the repository in your GitHub account so that you can make changes to the project.
</div></b>

<br>

*Video Reference*: [<b><span style="color: #FE83C6">Basic Operations</span><b>](https://www.youtube.com/playlist?list=PLB5jA40tNf3v1wdyYfxQXgdjPgQvP7Xzg)

<br>

<hr>

# Task
<span style="color: #ECB390; font-weight: bold;">Take a screenshot of all the Git operations above that you performed in your system and compile it in a single PDF.
Then visit our GitHub repository https://github.com/cognizance-amrita/PT-1 and follow the below instructions as part of Sumbission Process. Also fill the forms at the end of the page.
1. On the top right corner of the repository's page, you'll find a "Fork" button. Click on it.
2. A popup will appear, asking where you want to fork the repository. By default, your personal GitHub account should be selected. Click on your username to fork the repository to your account.
3. GitHub will create a copy of the repository in your account.
4. Once the forking process is complete, you will be redirected to your forked repository's page. The repository name will include your GitHub username to differentiate it from the original repository.
5. Now, navigate to the repository you created by forking and create a branch and name it "submission".
6. In the directory create a new directory with your own name.
8. Inside "Your-Name" directory, upload the pdf file with screenshots.
10. Commit changes.
11. Create a new pull request from your "submission" branch to "main" branch of the original repository.
12. Don't merge the pull request yet!</span>

<br>

<hr>

# Other References
Check out these sources if you want to explore more about Git and GitHub apart from the scope of the Task

1.[<b><span style="color: #FE83C6">Complete Git and GitHub Tutorial</span><b>](https://www.youtube.com/watch?v=apGV9Kg7ics).

2.[<b><span style="color: #FE83C6">Git and GitHub for Beginners - freeCodeCamp</span><b>](https://www.youtube.com/watch?v=RGOj5yH7evk)

There are many sources apart from these to learn extensively about Git and GitHub, so you can explore those too.
<br>
<hr>

# Submission Link
## Deadline: <b> 16th September 2023 @ 23:59</b>
[<b><span style="color: #FE83C6">Task 1 Submission</b></span>](https://forms.gle/hB7iLuFtHo6EgGEb7)

<br>

167 changes: 167 additions & 0 deletions Archives/Task - 5.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
---
title: 'TASK 5 [WEBSITE DESIGNING]'
tags:
- Open Source
- Web Design
- Designing
author: Author - Umme Rooman & Harine Vidyasekaran
date: 2023-09-29
---

# Part - 1 (Web Designing)
## Adobe XD
#### Adobe XD Is A Powerful And Easy-To-Use Vector-Based Experience Design Platform, It Helps You Craft Prototypes That Look And Feel Like The Real Thing, So You Can Communicate Your Design Vision

<b> For More Information Visit </b>[<b><span style="color: #FE83C6">Adobe XD</span></b>](https://www.adobe.com/in/products/xd/learn/get-started/what-is-adobe-xd-used-for.html)

<br>

<hr>

## Figma

#### Figma is a web-based graphics editing and user interface design app. You can use it to do all kinds of graphic design work from wireframing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between.

<b> Visit The Official Site </b> [<b><span style="color: #FE83C6">Figma</span></b>](https://www.figma.com/)

<br>

<hr>

## How To Install These Softwares?

#### 1. Adobe XD

- <b> Download the latest version of Adobe XD from </b> [<b><span style="color: #FE83C6">Adobe Xd</span></b>](https://www.adobe.com/sg/products/xd/switcher.html)
- <b> Close The Pop-Up Displayed For Selecting The Regional Site, Without Selecting Any Of Them</b>
- <b> You'll Now Be Able To See A Download Option In The Navbar, Click It And It'll Redirect You To A Page Where You'll Be Able To Download The File And Install It</b>

<br>

<img src="/images/Adobe.png">

<br>

<b><span style="color: #FA4EAB; font-size: 1rem;"> Note: You Should Have An Adobe Account In-order To Access This Free Tool. But, You Shouldn't Login Before Downloading The .exe File, As Shown In The Above Pic</span></b>

- <b>Once You Have Done Installing, Watch This Video </b> [<b><span style="color: #FE83C6">Adobe XD Basics</span></b>](https://www.youtube.com/watch?v=JttI6YpmPGI)

<br>

#### 2. Figma
- <b>There Are 2 Options To Use Figma</b>
1. <b> Download the latest version of Figma from </b> [<b><span style="color: #FE83C6">Figma Downloads</span></b>](https://www.figma.com/downloads/)
2. <b> Use The Online Version By Creating An Account In </b> [<b><span style="color: #FE83C6">Figma.com</span></b>](https://www.figma.com/)
- <b> Once Decided, Installed, You Can Use Figma To Create A New Project, And Start Working On It, Watch This Video For Reference </b>[<b><span style="color: #FE83C6">Figma Basics</span></b>](https://www.youtube.com/watch?v=jk1T0CdLxwU)

<br>

<hr>

# TASK

#### Design A Landing Page On Any Genre Using Either Figma Or Adobe XD.
**Video Reference**:
- [<b><span style="color: #FE83C6">Use Figma To Create An Landing Page</span><b>](https://www.youtube.com/watch?v=NB1mn2YVF8Q)
- [<b><span style="color: #FE83C6">Use Adobe XD In Creating A Landing Page</span><b>](https://www.youtube.com/watch?v=YxTngjYMufc)

<br>

#### And For Submitting The Design Please Export Your Design To A .png File And Create A New Repository Named "Task-5" And Add The .png Design File.

<br>

#### A Small Addition To The Task, While Submitting The Task, Please Mention Your Genre Of The Web Design So That It'll Be Easy For Evaluation Purposes.

<br>

##### Note: Based on your performance of this task, we will consider you for our ART and Public Relations team at Cognizance.
<b><span style="color: #FA4EAB; font-size: 1rem;"> Note: Please Know That Only PNG Files Accepted, All Other Formats Will Not Be Accepted</span></b>

<br>

<hr>



<br>

# Part - 2 (Building Websites with HTML & CSS)
### Create an attractive landing page using HTML, CSS, and JavaScript. This is a chance to showcase your creativity. The theme is up to you, and it should be user-friendly.

Here's how to do it:

#### Steps to Create the Landing Page:
##### Step 1: VS Code

1. If you haven't already, download and install Visual Studio Code from [<b><span style="color: #FE83C6">VSCode<span></b>](https://code.visualstudio.com/)
2. Create a new folder on your computer where you want to store your project files. You can name it something like "MyProject".
3. Open VS Code.
4. Click on "File" in the top left corner.
5. Select "Open Folder..."
6. Choose the folder you created in Step 2 ("MyProject") and click "Open."
7. In VS Code, right-click on your project folder in the sidebar (on the left).
8. Select "New File."
9. Name the file "index.html" and press Enter. This will be your HTML file.
10. Repeat the process to create two more files: "styles.css" for your CSS and "script.js" for your JavaScript.
11. Open each file by clicking on them in the sidebar.
12. Write your HTML code in "index.html," CSS code in "styles.css," and JavaScript code in "script.js."
13. Live Server Extension (Recommended)
- In VS Code, go to the Extensions view by clicking on the square icon in the left sidebar.
- Search for "Live Server" and install the extension by Ritwick Dey.
- Once installed, you'll see a "Go Live" button at the bottom right of the VS Code window. Click it.
- Your default web browser should open, displaying your HTML file. Any changes you make in your code will automatically refresh the page.
15. Alternative: Without Live Server
- Open your "index.html" file in your web browser directly by right-clicking the file and selecting "Open with..." and choosing your browser.
- To see changes, you'll need to manually refresh the page (F5 or Ctrl+R).

<hr>

##### Step 2: GitHub Repository
1. Go to GitHub (github.com) and sign in or create an account if you don't have one.
2. Click the "+" sign in the top right corner and choose "New repository."
3. Give your repository a name (e.g., "Cognizance-Landing-Page").
4. Choose "Public" for the visibility so that others can see your work.
5. Click "Create repository."

<hr>

##### Step 3: Organize Your Repository
1. Inside your repository, click "Create new file" and name it "index.html."
2. Create two more folders: "css" and "js" (if not already created).
3. Inside the "css" folder, create a file named "styles.css."
4. Inside the "js" folder, create a file named "script.js."
5. Paste your code from VS code in the respective files

<hr>

##### Step 4: README Documentation
1. In the root of your repository, create a file named "README.md."
2. Describe your landing page project:
- Mention your chosen theme.
- Explain any special features.

<hr>

## Resources:
### VS Code Installation
- [<b><span style="color: #FE83C6">Windows Installation</span><b>](https://www.google.com/amp/s/www.geeksforgeeks.org/how-to-install-visual-studio-code-on-windows/amp/)
- [<b><span style="color: #FE83C6">MacOS Installtion</span><b>](https://adamtheautomator.com/visual-studio-code-on-mac/)
### Tutorials
- [<b><span style="color: #FE83C6">W3Schools (HTML)</span><b>](https://www.w3schools.com/html/)
- [<b><span style="color: #FE83C6">W3 Schools (CSS)</span><b>](https://www.w3schools.com/css/default.asp)
- [<b><span style="color: #FE83C6">W3 Schools (JavaScript) </span><b>](https://www.w3schools.com/js/default.asp)
- [<b><span style="color: #FE83C6">Beginner Tips</span><b>](https://medium.com/swlh/6-beginner-html-css-tips-guidelines-to-make-your-life-easier-ffa826143152#ea6b)
- [<b><span style="color: #FE83C6">GitHub Pages </span><b>](https://www.geeksforgeeks.org/how-to-host-a-website-on-github-for-free/)
### Simple Website using HTML, CSS, JavaScript
- [<b><span style="color: #FE83C6">Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners</span><b>](https://youtu.be/krfUjg0S2uI?si=fcWZYUG9S95RUflQ)
### Video Tutorials
- [<b><span style="color: #FE83C6">Responsive Landing Page Website HTML CSS And JAVASCRIPT</span><b>](https://youtube.com/playlist?list=PL07efmqYWHZ8jroJAkkFB2s4ZKpVNCOQa&si=GUmtDTjtdwo6MAE3)
- [<b><span style="color: #FE83C6">Vanilla JavaScript tutorial</span><b>](https://youtu.be/Ttf3CEsEwMQ?si=KJxFOmwMpiUljN7r)

This task aims to help you learn the basics of web development and showcase your creativity.


# Submission Link
## Deadline: <b>7th October 2023 ; 23:59</b>
[<b><span style="color: #FE83C6">Task 5 Submission</b></span>](https://forms.gle/pP4N8fMyxr9pCQRHA)
Loading

0 comments on commit 54ce07a

Please sign in to comment.