AI-Assisted Coding: A Beginner’s Guide · GDG Jammu
Hi, I'm Atul Sharma.
- Co-Organizer, GDG Jammu
- ServiceNow Developer at Cognizant
- 4+ years building and configuring enterprise applications
- I organise tech and community events across Jammu
And this is GDG Jammu — a community of 1500+ developers who learn, build and connect together.
LearnBuildConnectGrow
TaskSay hello to the person sitting next to you. You will need them later.
Who is behind this
What is GDG Jammu?
Our objective: create a supportive environment where developers learn from each other and work on innovative solutions to local and global challenges.
- Empower local developers — skills, networking, collaboration
- Organize events — workshops, meetups, hackathons
- Share knowledge — talks, mentorship, discussions
- Foster innovation — creativity and technological advancement
- Position Jammu as a tech hub
TaskNothing. Just know whose room you are in.
The idea behind today
ABC
Any Body Can Code
What if building with AI didn't require you to be an expert coder?
Come with an idea. Learn something new. Build something real.
Learn it. Build it. Share it.
TaskThink of one thing you would put on a website about yourself.
What happens today
By the end of today you will have a website with your name on it.
A real address. Live on the internet. Works from any phone on earth. Free, forever.
Only have a phone?
Tap Phone at the top right. Every instruction switches. You finish with the same website as everyone else.
TaskChoose your track at the top right: Laptop or Phone.
Step 1 of the build
Two free accounts.
Three minutes. Tap to open — no typing addresses.
TaskCreate both now. Hand up if GitHub asks for a code you cannot find.
Step 2 of the build
Your username is your address.
Username atulsharma gives you atulsharma.github.io. All lowercase. No spaces.
Repository name
Website address
yourname.github.ioWebsite address
https://yourname.github.io
TaskType it in. Every slide from here shows your real names instead of placeholders.
How this works
AI is a fast, confident intern.
It has read every book. It has never worked a day.
Brilliant atWriting the boring first version. Explaining code you do not understand. Fixing an error you paste in.
Terrible atKnowing what you meant. Admitting it does not know. It will state wrong things with total confidence.
TaskWatch the demo. I am going to make it be wrong on purpose.
The skill you take home
Four parts to every good prompt.
| Part | Means |
|---|---|
| Role | You are a web developer teaching a beginner |
| Task | What you want, in one sentence |
| Limits | One file only. No libraries. Must work on a phone |
| Shape | The complete file in one code block, no explanation |
Limits is the part beginners skip, and the part that matters most.
TaskRemember the four words: Role, Task, Limits, Shape.
Same AI. Same three seconds.
Watch the difference.
Weak"make me a resume website"
Generic. Split across files. Somebody else's name on it.
Generic. Split across files. Somebody else's name on it.
StrongRole + task + every limit + the output shape.
One file you can publish in two minutes.
One file you can publish in two minutes.
TaskNothing. This is the whole argument for the next hour.
Do this all day
The loop.
Describe→AI writes→Run it and LOOK→Say what is wrong↺
Step three is the one everyone skips. Code that looks plausible is not code that works.
When something breaks, say three things
What I did. What I expected. What actually happened — copied exactly.
TaskPromise me you will open the page and look at it, every single time.
Your first prompt
Try it once.
Practice prompt
You are a teacher. Explain what HTML is to someone who has never coded, in four sentences, no jargon.
TaskCopy it, paste into Gemini, read the answer out to your neighbour.
Enough to not feel lost
Two words, one line each.
HTML
The content. The words, headings and pictures.
CSS
The appearance. Colours, sizes, spacing.
One file
Both live together in one .html file. That is your website.
TaskThat is the entire theory section. It is over.
A whole website
This is a real web page.
Start to finish
<!DOCTYPE html>
<html>
<head>
<title>Atul Sharma</title>
<style>
body { background: #1e1e1e; color: white; }
h1 { color: #f9ab00; }
</style>
</head>
<body>
<h1>Atul Sharma</h1>
<p>Final year student at GDC Sunderbani.</p>
</body>
</html>
<h1> | A tag. Opens, wraps, closes with a slash. This one is a big heading |
<head> | Info about the page. You never see it |
<body> | Everything you do see |
<style> | The CSS |
#f9ab00 | A colour. This one is the Google yellow |
TaskFind the person's name in the code above. It appears twice — why?
Memorise this one
The check that saves you an hour.
First line must be <!DOCTYPE html>
Last line must be </html>
If either is missing, the AI gave you a fragment, not a page. That is the blank white screen, every time.
TaskSay it back to me. First line, last line.
Step 3 of the build
Fill this in once.
It writes your whole prompt for you — no typing a long prompt on a phone keyboard.
Leave off
Home address, date of birth, Aadhaar or roll number. This page becomes public to the whole internet.
What the organisers can see
Your first name, GitHub username and which slide you are on — so we can spot who is stuck. Your email, phone, projects and everything you type into Gemini stay on this device.
TaskFill it in, then tap Copy my full prompt.
Step 4 of the build
Paste it into Gemini.
- Paste your prompt and send it.
- Wait. The code will be long — that is normal.
- Tap the copy button on the code block. Never select by hand.
- Keep the chat open. You come back to it later.
TaskDo it now. Put your hand up when you can see code on your screen.
Before you publish
Check two things.
Something is wrong — fix prompts
It used a fake name
You used a placeholder name. Use my real details exactly as I gave them and output the full file again.
The file is half finished
Give me the complete file starting with <!DOCTYPE html> and ending with </html>, nothing else.
TaskTick both boxes. Do not move on until you can.
The big step, explained first
Folder. File. Website.
Make a folder
named after you→Put one file in it
called index.html→GitHub turns it
into a website
named after you→Put one file in it
called index.html→GitHub turns it
into a website
That is genuinely all GitHub Pages is. Free, permanent, no card.
TaskNothing yet. The next slide is the one to follow carefully.
Step 5 of the build
Publish it.
These four links jump straight to the right GitHub screen. Use them in order.
Type your GitHub username on the Your address slide to switch these on.
Laptop
- github.com, signed in.
- + top right › New repository.
- Name it
yourname.github.io— exactly. - Choose Public.
- Tick Add a README file › Create repository.
- Add file › Create new file.
- Name it
index.html— lowercase, with the dot. - Paste your code.
- Scroll down › Commit changes.
- Settings › Pages › Deploy from a branch › main › / (root) › Save.
- Wait 1–3 minutes, open
https://yourname.github.io.
Phone
Do this first or nothing works
Use Chrome, not the GitHub app. Open github.com, tap the three dots, turn on Desktop site. The screen goes tiny — pinch to zoom, that is normal.
- github.com, signed in.
- + top right › New repository.
- Name it
yourname.github.io— exactly. - Choose Public.
- Tick Add a README file › Create repository.
- Add file › Create new file.
- Name it
index.html. - Long-press › Paste. Choose paste as plain text if offered.
- Scroll all the way down › Commit changes.
- Settings › Pages › Deploy from a branch › main › / (root) › Save.
- Wait 1–3 minutes, open
https://yourname.github.io.
TaskWork down the list. Hand up the moment something looks different to this.
🚀
You are on the internet.
Your website
https://yourname.github.io
TaskPut it in the group chat. Then send it to one person in your family.
Now the fun part
Change one thing.
- Back to the Gemini chat that is still open.
- Ask for one change. One, not five.
- Copy the new complete file.
- Open your file, select all, paste, commit.
- Refresh after a minute.
Always end your request with this
Give me the complete updated file again, not just the changed part.
TaskPick one change from the next slide and run it.
Pick whatever you like the sound of
The menu.
Better colours
Change the colour scheme to a professional blue and white. Keep everything else the same. Give me the complete file.
Dark mode
Add a dark mode that switches automatically based on the visitor's phone settings. Give me the complete file.
Fix cramped phone spacing
The spacing looks cramped on a phone. Increase the padding and font size for small screens. Give me the complete file.
Project cards
Turn my projects section into cards with a border, rounded corners and a soft shadow. Give me the complete file.
Big contact button
Add a large button under my name that opens my email when tapped. Give me the complete file.
Skill bars
Show my skills as labelled bars instead of a plain list. No external libraries. Give me the complete file.
Icon in the browser tab
Add a favicon using an emoji, done with inline SVG so I do not need an image file. Give me the complete file.
Looks good shared on WhatsApp
Add the meta tags I need for this page to look good when shared on WhatsApp and LinkedIn. Use my name and one-line description. Give me the complete file.
Explain my own code to me
Explain what the CSS in this file does, line by line, to someone who has never coded.
TaskRun one. Then another. This is the rest of the session.
Before you go
This page is public. Forever.
Put on itYour name · an email you check · college and course · skills and projects · GitHub and LinkedIn
Leave offHome address · date of birth · Aadhaar, PAN, roll number · photos of people who did not agree
Never paste passwords, bank details or anyone else's personal information into any AI.
TaskOpen your live site and read it as a stranger would. Remove anything you would not put on a noticeboard.
The thing worth more than the website
Never ship code you cannot explain.
If the AI hands you something you do not follow, ask it to explain before you use it.
That is the whole difference between using AI and being carried by it. And no, this is not cheating — passing off work as a skill you do not have is, and it falls apart in the first interview.
TaskAsk Gemini to explain your own CSS, line by line. Do it before you leave.
Where this goes next
Today you used a chat box.
Three rungs on this ladder. You just climbed the first.
1 · A chat in a browser
What you did today. Works anywhere, even on a phone. You copy and paste by hand.
2 · AI inside your editor
The AI can see your whole project, not just what you pasted. No more copying.
3 · Agents that build for you
You describe the job. It plans, writes, runs it, opens a browser and checks its own work.
TaskNothing now. The next slide is what you do tonight.
Rung three, and it is free
Google Antigravity
Google's agentic development platform, powered by Gemini 3.
- A code editor plus agents that plan, write, run and check their own work
- They work across your editor, terminal and browser at once
- Free preview · Mac, Windows, Linux
Needs a laptop
No phone version. This is the next step, not a replacement.
TaskLaptop owners: install it tonight, then follow Google's codelab.
So tutorials stop sounding foreign
The words you will keep hearing.
| Word | What it actually means |
|---|---|
| Model | The AI itself. Gemini 3 is a model. Bigger is usually smarter and slower |
| Prompt | What you type. The whole skill you learned today |
| Context | Everything the AI can see right now. It cannot see your files unless you show it |
| Token | Roughly three-quarters of a word. How AI usage gets counted and billed |
| Hallucination | When it states something wrong with total confidence. Why you always check |
| Agent | An AI that takes actions — runs commands, edits files — not just writes text |
| Repository | A project folder with history. You made one today |
| Commit | Saving a version you can always come back to. You did this too |
| Deploy | Putting it where the world can see it. GitHub Pages did this for you |
TaskPick the one word you did not know and ask Gemini to explain it in four sentences.
The roadmap
Learn these in this order.
- HTML and CSS — structure and looks. You started today.
- How the web works — your browser asks, a server answers.
- Git and GitHub — versions and working with other people.
- JavaScript — making a page actually do things.
- APIs — letting your page talk to other services.
- A database — storing things that outlive a refresh.
Each one makes the next make sense. Skipping is why people give up.
TaskYou are at the end of step one. That is further than you were yesterday.
Reference — come back here any time
Stuck?
Nine out of ten problems are the first four. Type a word to filter.
404 at my address
Pages has not built yet. Wait three minutes and hard refresh. Still 404 after five? Check the next three.
404 that will not go away
The file is not named index.html. Index.html, index.htm, index.html.txt and resume.html all fail silently. Rename it.
404 and the repo name looks fine
The repo name must match your username exactly. yourname.github.io only works for that username. Compare character by character.
Blank white page
Only part of the code got pasted. Check the first line is <!DOCTYPE html> and the last is </html>. Re-copy with the copy button.
My code shows as text on the page
Three backticks got pasted in. Delete the ``` line at the top and the one at the bottom.
My repository is private
Settings › scroll to the bottom › Change visibility › Public.
No Pages option in Settings
You are in account settings, not the repository's. Go to the repo page first, then its Settings tab.
Pages source says None
Settings › Pages › Deploy from a branch › main › / (root) › Save.
Cannot find "Add file" on my phone
Chrome menu › turn on Desktop site, then pinch to zoom.
Commit button not visible on my phone
It is below the editor. Scroll all the way down, past what looks like the end.
Pasting does nothing on my phone
Clipboard dropped when switching apps. Back to Gemini, copy again, switch straight to Chrome, paste immediately.
The AI stopped mid-file
Length limit. Reply Continue exactly where you stopped, or ask for a simpler page.
The AI gave me three separate files
The one-file limit fell out of your prompt. Send it again with the ONE single HTML file line intact.
My site shows the old version
Browser cache. Hard refresh, or open it in a private tab.
Loads but looks completely unstyled
The <style> block did not come through. Check for both <style> and </style>, then re-copy.
GitHub wants a device verification code
Normal for new accounts. Open your email. Check spam.
My username is already taken
Add your year or city — atulsharma2026, atuljammu. The repo name must match the new username.
Nothing matches. Raise your hand — or paste your whole file and the exact error into Gemini and ask what is wrong. That is the skill this workshop is teaching.
When nothing above fits
I did [what you did]. I expected [what you expected]. Instead [what actually happened]. Here is the exact error message: [paste the whole message] Here is my full file: [paste your whole file]
TaskTry the list first, then your neighbour, then me.
If the wifi dies
The parachute.
A complete working resume page, with your details already filled in. No AI needed.
See the code
index.html — complete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YOUR NAME</title>
<style>
:root { --ink:#1e1e1e; --muted:#5f6368; --accent:#1967d2; --line:#e3e6ea; --bg:#ffffff; }
* { box-sizing:border-box; }
body { margin:0 auto; padding:24px 16px 64px; background:var(--bg); color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
line-height:1.65; max-width:680px; }
header { border-bottom:3px solid var(--accent); padding-bottom:20px; margin-bottom:32px; }
h1 { font-size:34px; margin:0 0 6px; letter-spacing:-0.5px; }
.tagline { color:var(--muted); font-size:17px; margin:0 0 16px; }
.links a { display:inline-block; margin:4px 14px 4px 0; color:var(--accent);
text-decoration:none; font-weight:600; font-size:15px; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:1.2px;
color:var(--muted); margin:34px 0 12px; }
p { margin:0 0 14px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; }
.tags li { background:#f1f3f4; border:1px solid var(--line); border-radius:999px;
padding:6px 14px; font-size:14px; }
.card { border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:14px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
footer { margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
color:var(--muted); font-size:13px; }
@media (prefers-color-scheme: dark) {
:root { --ink:#e8eaed; --muted:#9aa0a6; --accent:#8ab4f8; --line:#3c4043; --bg:#1e1e1e; }
.tags li { background:#2a2b2e; }
}
</style>
</head>
<body>
<!-- HEADER: your name and how to reach you -->
<header>
<h1>YOUR NAME</h1>
<p class="tagline">ONE LINE ABOUT YOU</p>
<div class="links">
<a href="mailto:YOUR@EMAIL.COM">Email</a>
<a href="https://github.com/YOURUSERNAME">GitHub</a>
</div>
</header>
<!-- ABOUT: two or three sentences, no more -->
<h2>About</h2>
<p>WRITE TWO OR THREE SENTENCES HERE.</p>
<!-- SKILLS: add or remove list items freely -->
<h2>Skills</h2>
<ul class="tags">
<li>SKILL ONE</li>
<li>SKILL TWO</li>
<li>SKILL THREE</li>
</ul>
<!-- PROJECTS: copy a whole card block to add another -->
<h2>Projects</h2>
<div class="card">
<h3>PROJECT ONE</h3>
<p>One or two lines on what it does and what you used.</p>
</div>
<div class="card">
<h3>PROJECT TWO</h3>
<p>One or two lines on what it does and what you used.</p>
</div>
<!-- EDUCATION -->
<h2>Education</h2>
<p><strong>YOUR COURSE</strong>, YOUR COLLEGE</p>
<!-- CONTACT -->
<h2>Contact</h2>
<p>Reach me at <a href="mailto:YOUR@EMAIL.COM">YOUR@EMAIL.COM</a>.</p>
<footer>Built at the GDG Jammu AI-Assisted Coding workshop, September 2026.</footer>
</body>
</html>
TaskOnly if you are stuck. Paste it into index.html and carry on from Publish.
Last slide
Keep going.
| If you liked | Go here |
|---|---|
| Making pages look good | freeCodeCamp — Responsive Web Design |
| Making pages do things | javascript.info |
| Working with AI | Google AI Studio |
| Git properly | GitHub Skills |
| Building with people | DevFest Jammu 2026 — the flagship, later this year |
Learn it. Build it. Share it.
TaskAdd one thing to your site this week and commit it. That is the homework.
For facilitators — run of show
| Time | Slides | You do |
|---|---|---|
| 11:00 | 1–4 | Intro, GDG, the idea, the promise. Show of hands: laptop / phone / neither. Pair the neithers now |
| 11:15 | 5–6 | Accounts triage. Walk the room while people sign up |
| 11:25 | 7–11 | How to ask. Live demo — get it wrong on purpose on slide 7 |
| 12:00 | 12–14 | HTML in five minutes. Point, name, move on. Do not teach syntax |
| 12:15 | 15–17 | Build. Watch for half-finished files and placeholder names |
| 12:45 | — | Break, 10 min. Your buffer |
| 12:55 | 18–19 | Publish. Hardest 30 minutes. All helpers on the floor |
| 13:25 | 20 | First URLs live. Put one on the projector. Do not let this pass quietly |
| 13:35 | 21–24 | Iterate, safety, the one habit |
| 13:45 | 25–28 | Better tools, Antigravity, vocabulary, the roadmap. This is the "what now" section — do not rush it |
| 13:55 | 31 | Wrap. URLs into the group chat before anyone leaves |
90 minutes only: slides 1, 4, 5, 6, 8, 10, 15, 16, 17, 18, 19, 20, 26. The published URL is the deliverable.
Presenting: arrow keys move between slides, Home and End jump to the ends. Your place is saved and lives in the URL hash, so #19 deep-links to Publish.
Success measure: live URLs in the group chat at the end of the day, not registrations.