From 7809f1f65a6f37d0fda49eb3e35c88bf2e11fe67 Mon Sep 17 00:00:00 2001 From: Nehal Khan <128951002+Nehal-Khan-29@users.noreply.github.com> Date: Sat, 3 Aug 2024 23:48:06 +0530 Subject: [PATCH] Update 1st Year Preliminary Task.md --- source/_posts/1st Year Preliminary Task.md | 162 +-------------------- 1 file changed, 5 insertions(+), 157 deletions(-) diff --git a/source/_posts/1st Year Preliminary Task.md b/source/_posts/1st Year Preliminary Task.md index 06d8353..d7272bc 100644 --- a/source/_posts/1st Year Preliminary Task.md +++ b/source/_posts/1st Year Preliminary Task.md @@ -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 - - For More Information Visit [Adobe XD](https://www.adobe.com/in/products/xd/learn/get-started/what-is-adobe-xd-used-for.html) - -
- -
- -## 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. - - Visit The Official Site [Figma](https://www.figma.com/) - -
- -
- -## How To Install These Softwares? - -#### 1. Adobe XD - -- Download the latest version of Adobe XD from [Adobe Xd](https://www.adobe.com/sg/products/xd/switcher.html) -- Close The Pop-Up Displayed For Selecting The Regional Site, Without Selecting Any Of Them -- 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 - -
- - - -
- - 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 - -- Once You Have Done Installing, Watch This Video [Adobe XD Basics](https://www.youtube.com/watch?v=JttI6YpmPGI) - -
- -#### 2. Figma -- There Are 2 Options To Use Figma - 1. Download the latest version of Figma from [Figma Downloads](https://www.figma.com/downloads/) - 2. Use The Online Version By Creating An Account In [Figma.com](https://www.figma.com/) -- Once Decided, Installed, You Can Use Figma To Create A New Project, And Start Working On It, Watch This Video For Reference [Figma Basics](https://www.youtube.com/watch?v=jk1T0CdLxwU) - -
- -
- -# TASK - -#### Design A Landing Page On Any Genre Using Either Figma Or Adobe XD. -**Video Reference**: -- [Use Figma To Create An Landing Page](https://www.youtube.com/watch?v=NB1mn2YVF8Q) -- [Use Adobe XD In Creating A Landing Page](https://www.youtube.com/watch?v=YxTngjYMufc) - -
- -#### 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. - -
- -#### 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. - -
- -##### Note: Based on your performance of this task, we will consider you for our ART and Public Relations team at Cognizance. - Note: Please Know That Only PNG Files Accepted, All Other Formats Will Not Be Accepted - -
- -
- - - -
- -# 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 [VSCode](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). - -
- -##### 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." - -
- -##### 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 - -
- -##### 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. - -
- -## Resources: -### VS Code Installation -- [Windows Installation](https://www.google.com/amp/s/www.geeksforgeeks.org/how-to-install-visual-studio-code-on-windows/amp/) -- [MacOS Installtion](https://adamtheautomator.com/visual-studio-code-on-mac/) -### Tutorials -- [W3Schools (HTML)](https://www.w3schools.com/html/) -- [W3 Schools (CSS)](https://www.w3schools.com/css/default.asp) -- [W3 Schools (JavaScript) ](https://www.w3schools.com/js/default.asp) -- [Beginner Tips](https://medium.com/swlh/6-beginner-html-css-tips-guidelines-to-make-your-life-easier-ffa826143152#ea6b) -- [GitHub Pages ](https://www.geeksforgeeks.org/how-to-host-a-website-on-github-for-free/) -### Simple Website using HTML, CSS, JavaScript -- [Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners](https://youtu.be/krfUjg0S2uI?si=fcWZYUG9S95RUflQ) -### Video Tutorials -- [Responsive Landing Page Website HTML CSS And JAVASCRIPT](https://youtube.com/playlist?list=PL07efmqYWHZ8jroJAkkFB2s4ZKpVNCOQa&si=GUmtDTjtdwo6MAE3) -- [Vanilla JavaScript tutorial](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: 1st September 2024 ; 23:59 -[Task 1 Submission](https://forms.gle/pP4N8fMyxr9pCQRHA) +## Deadline: 10st September 2024 ; 23:59 +