Crafting Responsive Designs with Dynamic Interactions

The Problem

Our challenge in this project focused on crafting a static site with a strong emphasis on visual aesthetics using HTML and CSS. However, we encountered an issue with the site's responsiveness. The lack of CSS - Flexbox and CSS - Grid Layout hindered our ability to create a fluid and adaptable design. As a result, the site's layout appeared static and struggled to adjust seamlessly across various screen sizes.

JavaScript (JS) - DOM Manipulation was another area requiring attention. Without dynamic updates to the Document Object Model (DOM), certain user interactions and content updates felt rigid and less engaging.

Our Solution

To address the responsiveness challenge, we integrated CSS - Flexbox and CSS - Grid Layout. These powerful layout models allowed us to create a more flexible and responsive design, ensuring that the site adapted gracefully to different devices and screen sizes.

Simultaneously, we improved the overall user experience by implementing JavaScript (JS) - DOM Manipulation. This involved dynamically updating the DOM in response to user actions, providing a more interactive and engaging user interface.