Skip to content

Commit

Permalink
Update 1st Year Preliminary Task.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nehal-Khan-29
Nehal-Khan-29 authored Aug 3, 2024
1 parent c818bfc commit 7809f1f
Showing 1 changed file with 5 additions and 157 deletions.
162 changes: 5 additions & 157 deletions source/_posts/1st Year Preliminary Task.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,168 +2,16 @@
title: '1st Year Preliminary Task'
tags:
- Open Source
- Web Design
- AI
- CYS
- CP
author: Author - Nehal Khan
date: 2024-07-29
date: 2024-08-20
---

# 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.

# Preliminary Task
#### Will be Active on Sep 1 2024

# Submission Link
## Deadline: <b>1st September 2024 ; 23:59</b>
[<b><span style="color: #FE83C6">Task 1 Submission</b></span>](https://forms.gle/pP4N8fMyxr9pCQRHA)
## Deadline: <b>10st September 2024 ; 23:59</b>

0 comments on commit 7809f1f

Please sign in to comment.