Save & Push Your Changes to GitHub

After editing files using Git Bash and a text editor (Sublime, VS Code, Notepad++) on your local machine, use these four commands in order to save your changes and send them to GitHub.

Before you start — navigate into your repository folder.
After cloning a repo with git clone, your terminal is still in the parent folder. You must cd into the repo before running any git commands, or they will fail with "not a git repository".

Terminal
git clone git@github.com:pavankumar19/mywebsite.git cd mywebsite

Replace mywebsite with your actual repository name. You only need to do this once per terminal session.

1
Check what changed — git status
Before doing anything, run this to see which files you modified, added, or deleted. It gives you a clear picture of what is pending before you commit.
Terminal
git status
Example — you edited index.html
git status

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)

        modified:   index.html

no changes added to commit
2
Stage your changes — git add
This tells Git which files to include in the next commit. Use git add . to stage everything at once, or name a specific file to stage only that file.
Terminal — stage all changed files
git add .
Terminal — stage a specific file
git add filename.html
Example
git add .
# Stages all modified files at once

git add index.html
# Stages only index.html
3
Commit your changes — git commit
A commit saves a snapshot of your staged files with a message describing what you changed. Write a short, clear message inside the quotes.
Terminal
git commit -m "your commit message here"
Example — output after a successful commit
git commit -m "add navigation bar to index.html"

[main 4f2a1c3] add navigation bar to index.html
 1 file changed, 12 insertions(+), 0 deletions(-)

Writing a good commit message — describe what you changed, not why. Keep it under 72 characters.

  • "fix typo in about page"
  • "add contact form"
  • "update footer links"
  • "add navigation bar to index.html"
4
Push to GitHub — git push origin main
This uploads your committed changes from your local machine to GitHub. origin is the name of the remote (GitHub), and main is the branch name.
Terminal
git push origin main
Example — successful push output
git push origin main

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Writing objects: 100% (3/3), 342 bytes | 342.00 KiB/s, done.
To git@github.com:pavankumar19/mywebsite.git
   a1b2c3d..4f2a1c3  main -> main

After this, your changes are live on GitHub. If your repository is connected to GitHub Pages, the website updates automatically within a minute.

★ Complete workflow — run these 4 commands every time
git status
git add .
git commit -m "describe your change here"
git push origin main

Web Editor vs Local Machine

You have used both approaches during this programme. Here is how they differ, and when to use each one.

Browser-based
Web Editor (github.dev)
How to open Press . (period) on any GitHub repo page
Editing Edit files directly in the browser — no installation needed
Saving Use the Source Control panel to commit & push — no terminal commands
Terminal No terminal available — you cannot run code or shell commands
Best for Quick edits to HTML/CSS, fixing typos, small updates from any device
Git commands Handled by the UI — click buttons, no typing git add or git commit
Local machine
Git Bash + Text Editor
How to open Open Git Bash, cd into your repo folder, open files in Sublime / VS Code
Editing Edit files in Sublime Text, VS Code, or any editor installed on your machine
Saving Save the file in your editor, then run git add, git commit, git push in Git Bash
Terminal Full terminal — run any shell command, scripts, or development tools
Best for Day-to-day development, larger projects, working offline, running scripts
Git commands Typed manually in Git Bash — git status, git add, git commit, git push

Which should you use? The web editor is great for a quick fix when you are away from your computer. For everything else — day-to-day editing, building your site, running code — use Git Bash and a local editor. The four commands you learned today (git statusgit addgit commitgit push) are the same regardless of which editor you use to edit files.

Prompts for Code

Copy either prompt into Claude or ChatGPT. Replace the highlighted placeholder with your own code or requirement and paste it in.

Understand My Code
Paste your code — get a plain-English walkthrough

Paste any code you wrote or copied. The AI will break it down section by section in simple language, highlight key concepts, and end with a question to check your understanding.

Explain the following code to me as if I am a beginner.

[PASTE YOUR CODE HERE]

Please:
1. Give a one-line summary of what this code does overall.
2. Go through it section by section — explain each part in plain English.
3. Highlight any key concepts or patterns used (bold them).
4. Point out anything that might be confusing for a beginner and explain why it works that way.
5. End with one question to check if I understood.

Keep your explanation concise and avoid jargon.

How to use: Replace [PASTE YOUR CODE HERE] with your actual code — delete that line and paste your code in its place. Works for C, Python, JavaScript, HTML, or any language.

Generate Code
Describe what you want — get working, commented code

Describe what you want the code to do. The AI will write beginner-friendly code with comments on each block, then explain how it works in plain English.

Write code that does the following:

[DESCRIBE WHAT YOU WANT THE CODE TO DO]

Requirements:
- Language: [YOUR PREFERRED LANGUAGE — e.g. Python, JavaScript, C]
- Keep it beginner-friendly — use clear variable names and avoid complex patterns.
- Add a short comment above each logical block explaining what that block does.
- After the code, give a 2–3 sentence explanation of how it works overall.
- If there are multiple ways to do this, show the simplest approach first.

How to use: Replace [DESCRIBE WHAT YOU WANT] with your requirement (e.g. "calculate the average of 5 numbers entered by the user") and [YOUR PREFERRED LANGUAGE] with C, Python, JavaScript, etc.

Generate a Course Directory Page
Paste your index.html — get a table with S.No, course name & links

Paste your index.html which already has anchor tags to your quiz pages. The AI reads those links and generates a new course-directory.html with a styled table — S.No, course name, file, and an Open link for each page.

I have an index.html page that already has anchor tags linking to my quiz pages. Read it and generate a course directory table page.

--- index.html ---
[PASTE YOUR index.html CODE HERE]

Now generate a new HTML file called course-directory.html that reads the anchor tags in index.html and builds a table with these columns:
1. S.No — serial number (1, 2, 3 …)
2. Course Name — the link text or title from each anchor tag
3. File — the href value (e.g. quiz1.html, quiz2.html)
4. Link — a clickable "Open →" button linking to that file

Requirements:
- Use only HTML and CSS (no external libraries or frameworks)
- Style the table with a clear header row, alternating row background colors, and a border
- Wrap the table in a div with overflow-x: auto so it scrolls on small screens
- Add a page heading "Course Directory" at the top
- Keep the design clean and minimal
- Include a "Back to Home" link at the bottom pointing to index.html

How to use: Paste the source of your index.html in place of the placeholder — the AI will extract your anchor tags and build the table automatically. Get the source by opening index.html in a browser → right-click → View Page Source → select all → copy.