-creating new branches
-fetching
-pulling
-pushing
-merging
-rebasing
-branching
-switching between branches
-status
-updating
-history
-pull request = PR
-compare between branches
-perform/list/save/apply stash
-withdraw staged changes
-revert commit
-tagging
-creating new branch on terminal
-reset a file
-to go live index.html
-add a  website link to website
-heading sizes
-(br/b/strong/italic/
underline/emphasis/paragraph/article)
-add a weblite link to the website
to open in tab or new tab
-ordered list (ol)
-ordered list type
(ol type="1/A/a/I/i")
-unordered list (ul)
-unordered list type
(ul type="disc/circle/square")
-add images to website
(img src="file name" alt="description")
-add a (table) to website
table row (tr)
table header (th)
table data (td)
-form
a-label (label for="id/name/email/"password)
id/name/email/password(/label)
b-input (input type="text" id="id" name="name")
-(form/input/label/select/option/textarea)
-(form action="url" method="get/post")
-(form method="get" action="url")
-div (div class="class name")
-css (style="property:value;")
-html (html lang="en")
-link (link rel="stylesheet" href="file name.css")
-background color (background-color:color name;)
-font color (color:color name;)
-font size (font-size:font size;)
-button (button type="submit" class="class name")
-border (border:1px solid color name;)
-margin (margin:top right bottom left;)
-padding (padding:top right bottom left;)
-float (float:left/right/none;)
-clear (clear:left/right/both/none;)

Steps to Create a New Repository and Link It to Local Project ▼

Update Latest Changes

1. git add .
2. git commit -m "update my html file"
3. git push

---

Clone a Repository from GitHub to Local Machine

1. Copy URL from GitHub (control+c)
2. Open new window in VS Code
3. Press control+shift+p
4. Type "Git: Clone"
5. Paste URL (control+v), press enter
6. Select folder where you want to save the project

OR

1. Copy URL of repository from GitHub (control+c)
2. Open a new folder in VS Code
3. Type git clone then press control+v to paste URL in the terminal

---

Create Branch on VS Code

1. git checkout -b newbranchname
2. git add .
3. git commit -m "branchname"
4. git push -u origin newbranchname

Delete a Branch in Terminal

Note: you can't delete the branch you are currently on.

1. git branch -d branchname

---

Creating and Moving Branches in Git

(type command clear in terminal to clear the terminal)

1. git branch <branch-name>
2. git checkout <branch-name>
3. git push origin <branch-name>
4. git add .
5. git commit -m "add <file name>"
6. git push -u origin <file name>

Merge Branches to the Master

1. git branch (to see which branch is active)
2. git checkout branchname (to select which branch to merge to)
3. git merge branchname (which branch you want merged)
4. git push

To Merge Branch Using Rebase

1. git branch (to see which branch is active)
2. git checkout branchname (to select which branch to merge to)
3. git rebase branchname (which branch you want merged)
4. git push

To Delete a Branch

1. git branch -d <branch-name> (to delete a branch locally)
2. git push origin --delete <branch-name> (to delete a branch from GitHub)
3. git push origin <branch-name> (to push the branch to GitHub)
4. git checkout -b <branch-name> (to create and move to new branch)
5. git merge <branch-name> (to merge the branch to main branch)

Compare Branches to See the Difference

1. git diff branch1..branch2

---

Git Fetch

1. After creating a file and new branch in GitHub
2. Open Visual Studio Code
3. git fetch origin (to fetch data from GitHub)

Git Pull

(combination of fetch and merging)

1. git pull origin master (to pull from GitHub)
2. git checkout branchname
3. git merge branchname (main/master)
4. git push

Git Push

1. git push origin <branch-name> (to push the branch to GitHub)

To Update Latest Changes

1. git add .
2. git commit -m "update my html file"
3. git push

git fetch origin
git pull
git checkout branch name
git merge branch name or git rebase branch name
git add .
git commit -m "update file name"
git push

---

Branch Status

1. git status

Check History

1. git log

---

Creating a Pull Request

1. Open secondary branch, add content
2. Push to GitHub and open GitHub
3. Create a pull request from secondary to main branch on GitHub to review changes and get viewer input, verify changes
4. Confirm and merge
5. Open VS Code, pull changes from GitHub

How to Perform Stash and List/Save and Apply Stash

1. git stash save "added paragraph"
2. git stash save "content in file name"
3. git stash list
4. git stash apply
5. git stash save again
6. git stash apply

Withdraw Staged Changes

1. git status
2. git add . (staged, green)
3. git status
4. git reset (unstaged, red)
5. git status
6. git add . (staged, green)
7. git reset filename (to reset only 1 file)

How to Revert Commit

1. Add, commit, push to GitHub
2. Select commit, copy hash
3. git revert <paste hash> on VS Code
4. Open new window, make commit
5. Push to GitHub

Tagging

1. git tag -a <tag-name> -m "tagging message" <commit_hash>
2. git tag (for name)
3. git tag -n (for message of tag)
4. git push origin <tag name>

Resetting a File

1. git reset file.txt

Go Live

1. Open your HTML file
2. Right click
3. Open with Live Server

---

Add a website link to Website

1. <a href="https://www.example.com">Example Website</a>
2. git add index.html
3. git commit -m "add link"
4. git push origin master
5. or for the whole file
6. git add index.html
7. git commit -m "Clean up HTML structure and formatting"
8. git push origin master

Heading sizes

1. <h1>Heading 1</h1>
2. <h2>Heading 2</h2>
3. <h3>Heading 3</h3>
4. <h4>Heading 4</h4>
5. <h5>Heading 5</h5>
6. <h6>Heading 6</h6>

Line break / bold text / strong text / italic text / emphasis text / paragraph / article

1. <br> — this is my first paragraph in my second html file (br IS FOR LINE BREAK)
   <b> Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> (b FOR BOLD)
   <strong> Expedita officia nisi ullam explicabo blanditiis autem deserunt.</strong> (strong FOR STRONG)
   <i> La boriosam minima at magni aperiam dolor veritatis aliquid consectetur, </i> (i FOR ITALIC)
   <u> ducimus magnam exercitationem nulla facere dolorum quos totam quis eligendi </u> (u FOR UNDERLINE)
   <em> voluptates praesentium necessitatibus unde omnis temporibus minus corrupti! Odit </em> (em FOR EMPHASIS)
   <p> magnam praesentium quisquam harum consequuntur quo! (p FOR PARAGRAPH)
   <article> lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam (article FOR ARTICLE)

To add website address or link to open in the page or new tabs

1. <a href="web address">name of file</a> (LINK TO OPEN IN THE SAME TAB)
2. <a href="web address" target="_blank">name of file</a> (TO OPEN IN A NEW TAB)

my profile
index4
index5
view-source:index5
MDN JavaScript Documentation
DevDocs JS
Python Tutor
ES6 Compatibility
HTML Validator
dillinger.io
w3schools HTML Introduction
CodeSandbox
CodeSandbox SDK Documentation
HTML Cheat Sheet
DevDocs HTML Documentation
w3schools HTML Tryit
MDN HTML Heading Elements
Node.js
VS Code Online
Sandpack GitHub
CodeSandbox Recent
React Native
CodeSandbox Learn
Expo Documentation
Flutter
Expo GitHub
Expo Build Services
Adoptium Windows Archives
GitHub
Figma
Eclipse Downloads
iStockPhoto
DevDocs HTML
DevDocs CSS
ES6 Compatibility
Diagrams.net

unordered list (ul type="disc/circle/square")

1. ul type="disc" (default)
2. ul type="circle"
3. ul type="square"

ordered list (ol type="1/a/A/i/I")

1. ol type="1" (default)
2. ol type="a"
3. ol type="A"
4. ol type="i"
5. ol type="I"

to add images to html file

1. <img src="image.jpg" alt="description"> (BASIC IMAGE)
2. <img src="image.jpg" alt="description" width="100" height="100"> (IMAGE WITH SPECIFIED WIDTH AND HEIGHT)
3. <img src="image.jpg" alt="description" style="border: 1px solid black;"> (IMAGE WITH INLINE STYLE)

add table in html file

1. <table border="1"> (BASIC TABLE)
2. <tr> (TABLE ROW)
3. <th> (TABLE HEADER)
4. <td> (TABLE DATA)

<table border="1">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>city</th>
    </tr>
    <tr>
        <td>muhammad khan</td>
        <td>40</td>
        <td>new york city</td>
    </tr>
</table>

Enter prompt: This is what I have done so far for HTML.
Can you help me to get my code clean and give me some things for form and table?

to add form in html file

1. <form action="url" method="get/post"> (BASIC FORM)
2. <label for="id"> (LABEL FOR INPUT)
3. <input type="text" id="id" name="name"> (TEXT INPUT)
4. <select> (DROPDOWN SELECT)
5. <option value="value"> (OPTION IN SELECT)
6. <textarea name="name"> (TEXTAREA)

1. <form method="get" action="url"> (FORM WITH GET METHOD)
2. <form method="post" action="url"> (FORM WITH POST METHOD)

1. <input type="submit" value="Submit"> (SUBMIT BUTTON)
2. <input type="reset" value="Reset"> (RESET BUTTON)

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <br><br>
    <input type="submit" value="Submit">
</form>

Enter prompt: This is what I have done so far for HTML.
Can you help me to get my code clean and give me some things for form and table?

using div and div classes and css

<h1 id="main">muhammad khan</h1>

<div class="first">
    <h1>first job</h1>
    <p>I worked in a construction company from 2001 to 2016 as a project manager</p>
</div>

<div class="second">
    <h2>second job</h2>
    <p>I work for NYC parks department from 2017 to present</p>
</div>

<div class="third">
    <h3>education</h3>
    <p>I have an associate degree in electronic engineering</p>
</div>

• #main { color: rgb(19, 248, 19); text-align: center; }
• .first {
  background-color: rgb(155, 192, 155);
  text-align: center;
  border: 2px dashed rgb(226, 46, 46);
  padding: 20px;
  margin: 20px; }
• .second {
  background-color: rgb(198, 107, 107);
  text-align: center;
  border: 2px dashed rgb(0, 0, 0);
  padding: 20px; margin: 20px; }
• .third {
  background-color: rgb(107, 198, 198);
  text-align: center;
  border: 2px dashed rgb(0, 0, 0);
  padding: 20px; margin: 20px; }
• h1 { color: rgb(248, 19, 19); }
• h2 { color: rgb(19, 19, 248); text-align: center; }
• h3 { color: rgb(248, 248, 19); text-align: center; }

Build a Student Profile Page using AI.

1. HTML
2. Header
3. About Me
4. Skills
5. Projects
6. Contact
7. Use:
   • At least 2 IDs
   • At least 3 classes
   • At least 3 div containers
   • Headings
   • Paragraphs
   • A list
   • A button
8. CSS
   • Background color
   • Text colors
   • Padding
   • Margin
   • Borders
   • Border radius
   • Text alignment
   • Hover effect
   • Give me HTML and CSS separate code

creating an API KEY

1- Movie(7e632299820a47439270beeea56a83bf)
( Movie(khan86imran12031986))
2- YouTube() AIzaSyDGxqXl-ka4sv36eeMnPjHgDX19nOoNKVo
(AIzaSyBtqDADcgv0v6AmNqdr8tTbwl3PG2nBtrY)
3- const YOUTUBE_API_KEY = "AIzaSyB0J5bv6BP3KPpRXGyfiFUbJhPFu02qvLU";

Go to console.cloud.google.com and
sign in with your Google account. Create a new project (top left project dropdown → "New Project"). Name it anything, like "my-website". Once it's created and selected, go to APIs & Services → Library, search for "YouTube Data API v3", and click Enable. Go to APIs & Services → Credentials, click Create Credentials → API key. It'll generate a key immediately — copy it. (Recommended) Click Edit on that key and under "API restrictions" limit it to just "YouTube Data API v3",
so it can't be used for anything else if it ever leaks. Paste it into the 🔑 API Key box on your site and hit "Save key" — search will start working right away.

Go to APIs & Services → Credentials. Under "API Keys," you'll see a table row with a name like "API key 1" — click directly on that name text (not a separate icon). That opens the key's detail page, where you'll see two sections: "Application restrictions" and "API restrictions." Under "API restrictions," choose "Restrict key," then check "YouTube Data API v3" from the list, and click Save at the bottom.

A Google API key is just a random-looking string, typically starting with AIza, followed by about 35 more letters, numbers,
hyphens, and underscores — 39 characters total. As an example (this is a fake placeholder, not a real key):

When you open your key on the Credentials page in Google Cloud Console, it'll look exactly like that — one unbroken string with no spaces.
That's the whole thing; you copy that entire string and paste it into the 🔑 API Key box on your site.