Design notes / four enhancements
Thoughtful details.
A better way to explore.
Four connected enhancements extend the foundation-level HTML and CSS while keeping the project readable.
Advanced Responsive Design
One guide, every screen.
What it does and who it helps
Cards change from four columns to two to one. Navigation reflows, floated sidebars stack, and wide tables scroll within their own region. A reader can move from a desktop reference session to a phone without losing content.
How it works
Relative widths, CSS Grid, Flexbox and coordinated media queries adapt the complete page rather than merely shrinking its text. Tablet forms receive a full-width layout with paired fields, then stack on phones. Touch targets, readable measure and focus outlines remain usable.
Why it extends the basics
This combines coordinated navigation, form, image, table and sidebar behaviour with reduced-motion handling; it goes beyond a single fluid width.
Technique reference: MDN Web Docs . Project-specific HTML and CSS were written for this site.
Responsive species collectionAccessible CSS-only Dropdown Navigation
Explore without a mouse.
What it does and who it helps
The Explore menu reveals Families, Genera and Species on hover or when focus enters the group. Keyboard users can Tab through every link; a visible outline identifies the focused target. On small screens the sublinks remain directly visible.
How it works
The parent uses position: relative. Its submenu combines opacity and visibility, with :hover, :focus and :focus-within keeping the menu reachable. Visibility changes immediately for rapid keyboard navigation while opacity and movement animate. Normal list and link semantics avoid an inappropriate application-menu role.
Why it extends the basics
A complete keyboard path, deliberate responsive fallback and restrained transitions extend the basic linked menu. No script is needed.
Technique reference: MDN Web Docs . Project-specific HTML and CSS were written for this site.
Explore dropdown navigationCSS-only Interactive Taxonomy / Species Filter
A smaller collection, instantly.
What it does and who it helps
Choose one family to show its four species, or All species to restore sixteen. The selected label and result count change together. Hidden cards leave the layout and keyboard order.
How it works
A native radio group supplies checked state and arrow-key behaviour. Explicit #family-name:checked sibling rules hide cards from other families. Adjacent label selectors show selection and keyboard focus; CSS Grid arranges the remaining cards.
Why it extends the basics
This creates meaningful state and content filtering rather than a cosmetic hover effect. A short entrance animation is disabled for reduced-motion users.
Technique reference: MDN Web Docs . Project-specific HTML and CSS were written for this site.
Try the species filterAdvanced HTML5 Validation + CSS Form Feedback
Useful feedback at the right moment.
What it does and who it helps
Required fields, email formatting, name patterns and exact postcode length are checked by the browser. Labels and helpers explain the expected format. Invalid colours and text appear after interaction rather than on first arrival.
How it works
required, maxlength, minlength, pattern and appropriate input types implement the constraints. :focus, :valid and :invalid style active editing; :user-valid and :user-invalid add post-interaction feedback. Native method=dialog submission closes a non-modal dialog only after validation and reveals an honest local completion panel via a sibling selector.
Why it extends the basics
Several constraints, accessible guidance, non-colour error text and a privacy-preserving completion state work together. Neither persistence nor authentication is simulated.
Technique reference: MDN Web Docs . Project-specific HTML and CSS were written for this site.
Test registration validationMotion is always optional
Buttons respond in 180 milliseconds; same-page links use smooth scrolling. A brief page-enter fade keeps navigation restrained. The reduced-motion preference removes animations and smooth scrolling. Navigation remains ordinary HTML linking. Cross-document View Transitions were intentionally omitted to retain straightforward CSS validation and reliable Firefox behaviour.
Reference: MDN reduced-motion media query . Native form mechanism: MDN dialog element .