I’m just an ordinary person who loves experimenting with fun projects, and recently, I built something I’m really proud of; A Periodic Table Explorer website, with the help of AI.
I made it for my 14-year-old brother, who’s obsessed with science and loves the color blue. I thought, why not combine both into something he can actually use and enjoy? If you’ve ever wondered how to create your own website with AI, here’s how my little adventure went.
How I Built the Website with Tohju AI
It all started with me chatting to Tohju, an AI that feels like having a patient, tech-savvy friend on call. I told Tohju exactly what I wanted:
- A complete periodic table (all 118 elements!)
- A clickable grid so you can tap on an element and see details like its name, atomic number, and uses
- A quiz feature with random questions to make studying fun
- And of course… a blue, vibrant, and fun design for my brother
Step 1: Planning the Website
I asked Tohju to make sure the site worked on both phones and computers, had clean navigation, and looked exciting without being overwhelming.
Step 2: Getting the Code
In just a few minutes, Tohju handed me three files:
- index.html – the structure
- style.css – the design (including all those gorgeous shades of blue)
- script.js – the interactivity for clickable elements and the quiz
The best part? No complicated libraries. Just simple, readable code that even I, a non-coder, could understand.
Step 3: Making It Our Own
I asked Tohju to really lean into the blue theme soft gradients, rounded buttons, and a clean, friendly layout. The final background was a stunning gradient from #4682b4 to #00b7eb, and every button had a satisfying little hover effect.
Each of the 118 elements came with a quick fact things like “Gold is used in jewelry” or “Uranium powers nuclear reactors.” My brother loved clicking around and discovering them.
Step 4: The “Oops” Moment
At first, I made a rookie mistake when saving the files, they kept turning into .txt files instead of .html, .css, and .js. No wonder nothing was working!
Tohju explained exactly how to fix it: in Notepad, choose “Save as type: All Files” and type the full file name (e.g., index.html). The moment I fixed that, the site came to life.
What I Learned (And What You Can Try)
AI is your coding sidekick – If you don’t know how to code, you can simply describe what you want, and an AI like Tohju will hand you the exact files you need.
File extensions matter – Always check your files are saving with the right endings. .html, .css, .js not .txt.
Make it personal – Adding colors, layouts, or little details that matter to the person you’re making it for turns it from just a website into something special.
Building this was such a fun and surprisingly easy experience. I didn’t need years of coding knowledge just curiosity, a willingness to experiment, and a little help from AI. Now my brother has his own interactive periodic table, and I have a cool story (and skill) I can actually brag about.