CSS animations allow developers to create smooth, dynamic transitions between states of an element without relying on JavaScript. By using the `@keyframes` rule, you can define how an element should change at different points during the animation — for example, altering its position, color, opacity, or size. Animations can be triggered automatically when a page loads or when a user interacts with an element. They support easing functions (`ease`, `linear`, `ease-in-out`, etc.), duration settings, delays, and repetition controls, enabling complex motion effects like fades, bounces, and rotations.

ARIA controls are accessibility attributes defined by the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) specification that help assistive technologies understand and interact with complex user interface components. By using attributes such as `aria-controls`, developers can explicitly associate an element (like a button) with another element it manipulates (such as a collapsible panel or modal dialog). This gives screen readers and other assistive tools the ability to inform users about the relationship and functionality, even when it’s not obvious from the markup alone. Proper use of ARIA controls enhances navigation, ensures that dynamic content is discoverable, and makes interactive elements more inclusive for users who rely on assistive technologies.

Grid layouts in CSS are generally a much better option for creating an image gallery than traditional HTML tables, because they were designed specifically for two-dimensional layout control rather than tabular data. With display: grid, you can easily define rows and columns, control gaps between items, and let the browser automatically rearrange the images to fit different viewport sizes. This makes the layout more responsive and adaptive without needing to restructure the HTML. Tables, on the other hand, are rigid — they require explicit rows and columns, and resizing for responsive design is more difficult. Tables are great if the data is inherently tabular (like a spreadsheet of values or a pricing chart) because they carry semantic meaning for assistive technologies like screen readers. However, when used for design, tables are harder to style, less flexible, and not semantic — which can hurt accessibility.

Mobile-friendly design focuses on creating websites that adapt seamlessly to smaller screens and touch-based interactions, ensuring readability and usability without constant zooming or scrolling. The mobile-first approach takes this idea further by starting the design process with the smallest screen sizes and progressively enhancing layouts for larger devices. This project explores those concepts by building flexible layouts with CSS flexbox and media queries, restructuring navigation into stacked columns on smaller screens, and adjusting font sizes and spacing for readability. By prioritizing accessibility and responsiveness, the design demonstrates how content can remain clear and functional whether viewed on a phone, tablet, or desktop, reflecting modern best practices in mobile-first web development.