I Built the ULTIMATE Educational Website from Scratch — Day 5
Yesterday, we worked on Periodic Properties, a specific article. Today, let's focus back on the actual site design and pages. We'll create the organic chemistry page. We'll start by setting up the basic HTML structure, including placeholders for the interactive elements. Hour 23: Building the Organic Chemistry Page First, I created organic.html inside the \Chemistry folder. This is the basic structure: Neuron IQ - Organic Chemistry Neuron IQ Home Subjects About Contact © 2025 Neuron IQ. All rights reserved. About Us Contact Us Privacy Policy Terms of Use I've added basic structure, links to the main stylesheets, and CDN link to a 3D molecule viewer library molGL. I've also added a basic header and footer, consistent with our previous pages, and a button for hamburger menu. Now, I'll add the main content area, divided into sections for articles, key topics, and an interactive molecule viewer. Organic Chemistry Articles Classification and Nomenclature Alkanes, Alkenes, Alkynes Functional Groups Grignard Reagents Organic Chemistry Explore the fascinating world of carbon compounds, their structure, properties, and reactions in an interactive way! Start Learning Key Topics Hydrocarbons Learn about the simplest organic compounds. Functional Groups Discover the key to organic reactivity. Alcohols, Aldehydes, Ketones Oxygen-containing functional groups and their properties. Reactions of Alkanes, Alkenes and Alkynes Explore addition, substitution, and other key reactions. Carboxylic Acids and Esters Acidity, esterification, and important derivatives. Amines and Amides Nitrogen-containing compounds and their basicity. Stereochemistry The 3D arrangement of atoms and its impact. Spectroscopy Techniques to identify and analyze organic compounds. Interactive Molecule Viewer Select a molecule: Methane Ethanol Benzene This code adds a three-column layout. The left column will house the article list with a search bar. The middle column will have a hero section with a call-to-action button and a grid of topic cards with images. Finally, the right column will feature the interactive 3D molecule viewer. I've also added placeholders for images within the topic cards (images/hydrocarbons.jpg, etc.). We'll need to replace these with actual images later. Hour 24: Adding JavaScript for Interactivity Now, let's add some basic JavaScript to handle the hamburger menu, the article search functionality, and the 3D molecule viewer. I'll add the following inside the ta
Yesterday, we worked on Periodic Properties, a specific article. Today, let's focus back on the actual site design and pages.
We'll create the organic chemistry page. We'll start by setting up the basic HTML structure, including placeholders for the interactive elements.
Hour 23: Building the Organic Chemistry Page
First, I created organic.html inside the \Chemistry folder. This is the basic structure:
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
</span>Neuron IQ - Organic Chemistry<span class="nt">
name="description" content="Explore the fascinating world of organic chemistry with interactive articles, quizzes, and 3D molecule visualizations.">
rel="preconnect" href="https://fonts.googleapis.com">
rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
rel="icon" type="image/png" href="/favicon.png">
rel="stylesheet" href="css/style-main.css">
rel="stylesheet" href="css/style.css">
rel="stylesheet" href="css/specific-chemistry.css">
class="logo">
href="/index.html">Neuron IQ