Random Background Colors per Div

This project assigns random background colors to all <div> elements on the page using JavaScript, triggered on page load. Refreshing the page generates new colors, creating a dynamic visual effect. The layout uses CSS Flexbox to arrange three main divs (header, middle, bottom) in a column, with responsive adjustments for larger screens. While this could be used for playful UI elements or color-themed designs, it was primarily built for fun and to experiment with how div placement and ordering behave under various Flexbox properties, offering insights into CSS layout mechanics.

CSS Auto Heading Numbering

CSS counters provide a powerful way to automatically number headings in HTML documents without JavaScript or manual updates. This technique uses the counter-reset and counter-increment properties to create hierarchical numbering, such as 1., 1.1., 1.1.1., and so on. In this demo, we apply counters to h2 through h6 elements, resetting at each level for proper nesting. An optional “nocount” class allows skipping numbering for specific headings, maintaining continuity. This approach ensures consistent, dynamic numbering that updates automatically as content changes.