Web based Interactive Periodic Table
This project is a fully interactive version of the modern periodic table built using only HTML and CSS. It displays all 118 elements in their correct positions and lets users click on each element to view basic information like name symbol and atomic number. The elements are color coded based on their categories like alkali metals or noble gases which makes it easier to visually identify groups. A search bar is included so you can quickly look up elements by name or symbol and there is also an option to filter by category. It was mainly made for students or anyone who wants a simple and clean digital version of the periodic table.
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
The periodic table is finally done and I’m pretty happy with how it turned out. I added all the 118 elements manually and gave each one it’s own color and class to keep things clear and a bit fun to look at. It did take a while to go through each element and repeat similar styles but honestly it helped me stay organised while building. I also added hover effects which aren’t anything fancy but still makes it feel interactive. Choosing colors was a bit tiring because some combinations didn’t look nice on screen but I kept tweaking until it looked good enough. Maybe I’ll add JS later for some info popups but for now I think its complete and working fine on most screens.
worked on the design part of my periodic table webpage. I created many button classes for different elements with unique colors. It took quite a while to make so many classes but I wanted each element to have its own look. The background colors are chosen to give some nice contrast and make it easier to identify groups. Also added element details uptil Xenon.
While working I noticed I repeated the width and height properties many times but I kept it like that for now since it was easier to manage when testing. Maybe later I can simplify it by using a base class. There were some small confusion with which color code to choose but finally I selected ones that look good on screen.
Next step I am thinking to add the HTML structure for all the elements and maybe some hover effect. It is simple but feels good to see the style part coming together.
