DEV Community

AI can write code, but the magic of a first project is unmatched! 🗽

Sᴛᴀʀ⭐ on November 11, 2026

Namaste dev community! 👋 Today, I’m sharing a very special project of mine. It's a web page featuring all the states of India. Before you dive int...

Read full post

Akhouri Anmol Kumar Necoz • Nov 11

very good start star!!!
that's nice bharat darshan 🔥🔥
to make it look more better can you add a india's map and when we click a state suppose assam or punjab etc then the map highlights that particular state and in that 3-4 small points shows up and if we hover cursor over it or click it then that point show the famous tourist place of that like golden temple of punjab
you understand?
👆 random uncles advise lol never mind if you think it is good then apply it. if not then you can ignore :)

Sᴛᴀʀ⭐ Necoz • Nov 11

Thanks bro ⭐ Your suggestion is really good. Thank you so much! But I was already thinking about something like this. Unfortunately, my phone with just 2GB RAM refused to cooperate.
મારા પપ્પા કહે છે કે જ્યારે હું 11 વર્ષની થઈ જઈશ, ત્યારે તેઓ મને લેપટોપ અપાવશે.
But bro, I still have to wait another 1.5 years! 😔

Akhouri Anmol Kumar Necoz • Nov 11

hmm, you do these in that mobile? hand's off to you
hmm 1.5 years is a waste of time actually, okay I will try to find a solution for you.

Akhouri Anmol Kumar Necoz • Nov 11

@star123 you've a pull request check out github accept it only when you really like it.

Sᴛᴀʀ⭐ Necoz • Nov 11

Thanks Anmol sir!🗽

Akhouri Anmol Kumar Necoz • Nov 11

woah woah who I feel after being called as sir

but no need we've just 3years age gap

Maame Afua A. P. Fordjour • Nov 11

Building your first project while still learning is a big deal, and every first project has bugs. I like that you included all 36 states and UTs with a dropdown to jump between them.

One small tip from me: try to avoid using AI for now and focus on getting the basics of HTML, CSS and JavaScript really solid first. When you write and fix things yourself, it sticks so much better. Once you understand the foundations, AI becomes a really helpful tool because you’ll know when its code is right or wrong.

How is your studying going so far? And did you find the w3schools to be helpful?

Sᴛᴀʀ⭐ Necoz • Nov 11

Thanks! I used AI a little for research to find information about the states and other details, but I wrote all the code myself.
And yeah, W3Schools is really helpful. Its online editor is also pretty cool! I'm learning from YouTube too.
Thanks for your support, ma'am! ❤️

Maame Afua A. P. Fordjour • Nov 11

That’s great, writing all the code yourself is the best way to really learn. Using AI to look up information is fine too, it’s just another research tool.

W3Schools and YouTube are a good combo. When you want something more, try freeCodeCamp. It’s free and you build small projects step by step.

A fun next step for this project could be adding a search box so people can type a state’s name and find it quickly. It’s great JavaScript practice. Keep sharing what you build, I’d love to see your next project!

Sᴛᴀʀ⭐ Necoz • Nov 12

Yeah for sure!!😊

Peter Vivo • Nov 11

Congratulation for you first project seems at least usefull for me at least, because I have so many indian collegue, but I don't know anything India region. 👏

Sᴛᴀʀ⭐ Necoz • Nov 11

Thanks sir! 😊

Prasoon Jadon Necoz • Nov 11

Congratulation for your first project star. Honestly, the first project is never about perfection; it's about taking that first step from being a consumer of technology to becoming a creator. AI can certainly speed up development, but understanding why something works, debugging it, and making your own decisions is what builds a developer.

Keep building, keep experimenting, and most importantly, don't let the fear of imperfect code stop you. Every experienced developer once had a first project. Looking forward to seeing what you build next! 🚀

One suggestion for improvement: When someone clicks the HUD Fact button, instead of displaying the fact at the bottom of the page, consider showing it in a small, centered popup or modal.

You could also make it more interactive by maintaining a collection of facts, almost like a mini-dictionary. Every time someone clicks the button, a random fact appears in the popup.

This would make the experience more engaging and give users something new to discover with every click!

Here's a simple JavaScript implementation:

<button id="hudFact">HUD Fact</button>

<div id="factPopup" class="popup">
  <p id="factText"></p>
  <button onclick="showRandomFact()">Next Fact</button>
  <button onclick="closePopup()">Close</button>
</div>

<style>
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #222;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 5px 25px #0004;
  width: 280px;
  z-index: 1000;
  text-align: center;
}
</style>

<script>
const facts = [
  "India has 28 states and 8 Union Territories.",
  "Rajasthan is India's largest state by area.",
  "The Indian national emblem is adapted from the Lion Capital of Ashoka.",
  "India has one of the world's largest railway networks."
];

const popup = document.getElementById("factPopup");

document.getElementById("hudFact").onclick = () => {
  popup.style.display = "block";
  showRandomFact();
};

function showRandomFact() {
  const fact = facts[
    Math.floor(Math.random() * facts.length)
  ];
  document.getElementById("factText").textContent = fact;
}

function closePopup() {
  popup.style.display = "none";
}
</script>

Just an idea to make an already interesting first project even more interactive. Keep building! 🚀.

Sᴛᴀʀ⭐ Necoz • Nov 11

Thanks for the help bro!😊

Prasoon Jadon Necoz • Nov 12

🙌🙌

csm • Nov 11

People start coding when they reach college and till the final year, they get very less time to learn fundamentals fully.
Its a really good thing that you are starting at a young age.
You have a lot of time, so take your time, explore the field and learn the fundamentals well!
Happy coding 😊