Building a No-JavaScript Star Rating Widget

In the last couple of weeks, we built many common, fully interactive web user interfaces with just simple HTML and CSS. Not relying on JavaScript to achieve this functionality brings us many benefits:

• Performance: No JavaScript means faster loading times and reduced resource usage.
• Simplicity: Easier to debug and maintain with fewer moving parts.
• Accessibility: Often aligns better with semantic HTML and ARIA standards.
• Progressive Enhancement: Works even if JavaScript is disabled or fails to load.
• SEO: Search engines can easily parse static content.
• Security: Reduced attack surface by avoiding JavaScript vulnerabilities.
• Compatibility: Consistent behaviour across modern browsers.

Take a look at my previous posts to see how I built these:

— Swipeable Image Carousel

— Interactive, Animated, Validate Input Fields

— Shopping Basket with a Fully Dynamic Price Calculator

— Popup Modal

— Accordion Three Ways

— Tabbed Content Switching

Just so you know, this is one of dozens of cool HTML and CSS examples from my book “All you need is HTML and CSS”: