Building an Interactive Plant Album with Zero JavaScript

Subtitle: How I used CSS :target, viewport units, and image optimization to ship a performant, JavaScript-free project.

I’ve posted on Dev.to before about concepts I’m learning, but this is different. This is the first time I’m sharing a complete, shipped project, one that bridges my past life as an agricultural scientist with my new path in frontend development.

Meet the Plant Photo Album: an interactive guide to 27 plants, built entirely with semantic HTML and pure CSS. No JavaScript. No frameworks. Just clean code and a lot of problem-solving.

The Goal: Interactivity Without JavaScript

I wanted users to tap a plant name and see only that plant’s details, hiding everything else. My first instinct was to reach for JavaScript, but I challenged myself: Can I do this with CSS alone?

The answer was yes, using the :target pseudo-class.

Here’s the core logic:

• Each plant lives in its own <section> with a unique ID (e.g., #carrot).
• By default, all sections are hidden (display: none).
• When a link is clicked, the URL hash changes (e.g., #carrot), and the matching section becomes visible (section:target { display: block; }).

It’s a simple trick, but it creates a seamless, app-like feel without a single line of JavaScript.

The Hurdle: When “It Works” Isn’t Enough

The structure was solid. The navigation worked. But when I tested it on mobile, the images were crawling, some taking seconds to load, others failing completely.

I initially blamed my CSS. Were viewport units (vh/vw) causing reflows? Was the display logic too heavy?

Then I checked the file sizes.

Some images were 7–9MB. I had pulled high-resolution photos directly from my camera roll and uploaded them as-is. Of course it was slow. The browser had to download massive files before resizing them for a phone screen.

The Fix: Compression Matters

I pulled all 27 images down, ran them through Squoosh.app (and TinyPNG for a few), and compressed them to 200–600KB each. The visual quality stayed sharp, but the load times dropped dramatically.

Lesson learned: Performance isn’t just about code. It’s about assets. A beautiful layout means nothing if the user is staring at a loading spinner.

The Result

Now, the album loads smoothly on mobile. Users can tap through 27 plants, from carrots to baobab trees, with instant transitions. The entire project is under 500 lines of code, fully responsive, and live in my portfolio.

What I Learned

1. CSS is more powerful than I gave it credit for. The :target pseudo-class handled complex state changes without JS.
2. Optimization is part of the build. Don’t wait until the end to check file sizes.
3. Your background is an asset. My knowledge of plants helped me curate accurate content, and my debugging skills helped me ship a performant product.

This project reminded me that transitioning careers doesn’t mean leaving your past behind. It means bringing it with you, in this case, literally, from garden to glass.

You can check out the live demo and code on my portfolio : https://obasililian59-cell.github.io/Web-development-portfolio/plant.html