Element Atlas

I would like to make a virtual periodic table that user can learn and explore how the elements are arranged. I planning to complete this website only using HTML, CSS and JavaScript, By approaching by step-by-step process.

Step 1 : Create Periodic Table 
Step 2 : Add more information in periodic table
Step 3 : Find the element its details by search bar
Step 4 : Add realistic visual representations
Step 5 : Learn mode - Quiz and memory game etc

these are the steps only iam thinking to work on, I would like plan more to add more features in future!

Devlog 1

Created basic files such as index.html, style.css, and script.js then linked all the files together.

Then in html file created the basic tags and code needed for every website. I selected a color palette from Google which seems to a dark-blue shade, i thought it may give a perfect experience for the user to explore.

Then the first challenge came.. How should i make the periodic table in order. Finally i decided to created all the periodic table inside that of a div section and made that to be displayed as the grid with 18 columns and also i doesn’t initialized number of rows i thought that to be make as default in order of the creation of elements.

Then a subdivided each elements using div the set-up grid column and row number.