CodeWithHarry · oyepriyansh · Oct 21, 2023 · Oct 21, 2023
diff --git a/Video 01/README.md b/Video 01/README.md
@@ -0,0 +1,66 @@
+# Video #1: Installing VS Code & Understanding How Websites Work
+
+### Downloading & Installing VS Code
+
+1. Visit the Official Website:
+   - Go to [code.visualstudio.com/download](https://code.visualstudio.com/download).
+
+2. Choose Your Operating System:
+   - Click on the "Download for [Your OS]" button.
+
+3. Install the Downloaded File:
+   - Installing VS Code is as simple as installing any other software.
+
+4. Make sure to check these two boxes during installation:
+
+   ![Checkbox Image](https://github.com/itxpp/Sigma-Web-Dev-Course/assets/83062406/7750662f-6195-431b-aa73-344721263dfa)
+
+### Setting Up VS Code
+
+- Open a folder in VS Code:
+  - You can do this by right-clicking while holding Shift and selecting "Open with Code."
+
+  ![Open with Code](https://github.com/itxpp/Sigma-Web-Dev-Course/assets/83062406/b1a13deb-afa9-4398-a49e-df6957091562)
+
+### Creating Your First HTML File
+
+- Click on the "Create File" button at the top right of VS Code.
+
+  ![Create File Button](https://github.com/itxpp/Sigma-Web-Dev-Course/assets/83062406/0c52da94-401b-4f4e-90fa-aa3ae4100207)
+
+- Name it whatever you like with a `.html` file extension, for example, `index.html`.
+
+> [!NOTE]  
+> The file you create in VS Code will also be created in the folder opened in VS Code.
+
+### Understanding How Websites Work
+
+Websites operate with three key components:
+
+1. **Client**: A person using a web browser.
+2. **Server**: Where the website's code is stored.
+3. **Browser**: Where you request a website.
+
+In essence, when a client (user) requests a website from the server via a web browser, the server provides the requested website code in HTML, CSS, and JS. The browser then renders this code into a webpage.
+
+### Quick HTML Examples
+
+- In the HTML editor, type `!`, and an Emmet popup will provide you with an HTML boilerplate code.
+
+![HTML Boilerplate](https://github.com/itxpp/Sigma-Web-Dev-Course/assets/83062406/98c0b100-74d8-42fc-baf9-e11921715e1e)
+![Emmet Popup](https://github.com/itxpp/Sigma-Web-Dev-Course/assets/83062406/627ef318-259b-413d-809c-930d99bc7897)
+
+- Throughout this course, you will explore various HTML tags. For example, you can add a video to your page using:
+
+```html
+<video src="video1.mp4"></video>
+```
+
+Or you can include audio on your page using:
+
+```html
+<audio src="song.mp3" controls></audio>
+```
+<hr>
+
+## [Checkout Video 2 Source code and notes](https://github.com/CodeWithHarry/Sigma-Web-Dev-Course/tree/main/Video%202)
diff --git a/Video 1/index.html → Video 01/index.html b/Video 1/index.html → Video 01/index.html
diff --git a/Video 1/this.txt → Video 01/this.txt b/Video 1/this.txt → Video 01/this.txt
diff --git a/Video 2/index.html → Video 02/index.html b/Video 2/index.html → Video 02/index.html
diff --git a/Video 2/script.js → Video 02/script.js b/Video 2/script.js → Video 02/script.js
diff --git a/Video 2/style.css → Video 02/style.css b/Video 2/style.css → Video 02/style.css
diff --git a/Video 3/.vscode/settings.json → Video 03/.vscode/settings.json b/Video 3/.vscode/settings.json → Video 03/.vscode/settings.json
diff --git a/Video 3/index.html → Video 03/index.html b/Video 3/index.html → Video 03/index.html
diff --git a/Video 3/script.js → Video 03/script.js b/Video 3/script.js → Video 03/script.js
diff --git a/Video 3/style.css → Video 03/style.css b/Video 3/style.css → Video 03/style.css
diff --git a/Video 4/bookmarkmanager.html → Video 04/bookmarkmanager.html b/Video 4/bookmarkmanager.html → Video 04/bookmarkmanager.html
diff --git a/Video 4/index.html → Video 04/index.html b/Video 4/index.html → Video 04/index.html
diff --git a/Video 4/script.js → Video 04/script.js b/Video 4/script.js → Video 04/script.js
diff --git a/Video 4/style.css → Video 04/style.css b/Video 4/style.css → Video 04/style.css
diff --git a/Video 5/image.png → Video 05/image.png b/Video 5/image.png → Video 05/image.png
diff --git a/Video 5/index.html → Video 05/index.html b/Video 5/index.html → Video 05/index.html
diff --git a/Video 5/style.css → Video 05/style.css b/Video 5/style.css → Video 05/style.css
diff --git a/Video 6/index.html → Video 06/index.html b/Video 6/index.html → Video 06/index.html
diff --git a/Video 7/index.html → Video 07/index.html b/Video 7/index.html → Video 07/index.html
diff --git a/Video 8/Comprehensive List.txt → Video 08/Comprehensive List.txt b/Video 8/Comprehensive List.txt → Video 08/Comprehensive List.txt
diff --git a/Video 8/index.html → Video 08/index.html b/Video 8/index.html → Video 08/index.html
diff --git a/Video 8/style.css → Video 08/style.css b/Video 8/style.css → Video 08/style.css
diff --git a/Video 9/index.html → Video 09/index.html b/Video 9/index.html → Video 09/index.html
diff --git a/Video 9/style.css → Video 09/style.css b/Video 9/style.css → Video 09/style.css
diff --git a/Video 27/index.html b/Video 27/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* p{
+            background-color: blue;
+            color: white;
+        }
+
+        div p:first-child{ 
+            background-color: yellow;
+            color: red;
+        } */
+
+
+    </style>
+</head>
+<body>
+    <!-- Write html and css code to style a paragraph inside a div which contains 5 other paragraphs. The first paragraph must have background color yellow and text color red. The other paragraphs must have background color blue and text color white. The HMTL is written below for your reference. Do not change this html -->
+    <div>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo consectetur dicta fuga ea at vitae suscipit, repellendus illum deleniti laboriosam ipsa distinctio.</p>
+        <p>I am another para</p>
+        <p>I am also another para</p>
+    </div>
+    <div>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo consectetur dicta fuga ea at vitae suscipit, repellendus illum deleniti laboriosam ipsa distinctio.</p>
+        <p>I am another para</p>
+        <p>I am also another para</p>
+    </div>
+</body>
+</html>