July 16, 2025
Today, I finalized the written content for each timeline section of the project. Each <section>
now includes a <h1>
title and a descriptive <p>
paragraph, clearly explaining the historical stage of Earth’s evolution. I also reviewed the structure of my HTML to ensure semantic clarity and added missing alt texts for accessibility.
In CSS, I made adjustments to the typography for better readability over background images, and I used position: relative
and ::before
overlays to ensure text contrast. On the JavaScript side, I slightly increased the scroll speed to improve pacing and user experience. Everything is now working smoothly, and the site creates a continuous visual and informative scroll-through timeline.
Next step: test responsiveness on mobile and optimize image loading using loading="lazy"
.
For my site, I generate images using AI to show the evolution of the Earth.
TimeScroll is an interactive HTML and CSS website that traces the history of planet Earth, from its birth to an imaginary future. By scrolling down the page, the user travels through the ages: from primitive volcanoes to modern civilizations, including dinosaurs, the industrial age, and possible sustainable or technological futures. This project aims to raise awareness of humanity's impact on the environment while celebrating the wonders of our world's natural and technological development.
This was widely regarded as a great move by everyone.