Introduction

In this report, we will explain how we made this task. Here is the table of contents for easier navigation.

Motivation

Creating a fully responsive page is essential in today's digital landscape, where users access websites on a variety of devices, including smartphones, tablets, laptops, and desktops. The goal of responsiveness is not just about aesthetics, it is about delivering a seamless and optimized user experience across all screen sizes and devices.

Technical Part…

For CSS and responsive design, we used Tailwind CSS in order to achive responsive design. It is a utility-first framework that simplifies the process of creating responsive layouts. Tailwind CSS allows for rapid development and provides a rich set of pre-defined classes, enabling us to implement responsive designs without writing custom CSS for every element.

Key Features of Tailwind CSS

The framework is widely used for its scalability, performance, and ease of use. Once you get used to it it is really fun to use too. Another thing is that you don’t have to make global CSS files, you just write in components, how fun is that?

Some of key features are (using ChatGpt)

• Utility-First Classes: Provides a vast library of pre-defined utility classes for rapid styling without writing custom CSS.
• Responsive Design Utilities: Built-in classes like sm:, md:, lg:, and xl: enable easy implementation of responsive designs.
• Customization: Offers deep customization through the tailwind.config.js file to adjust themes, colors, and spacing.
• Flexbox and Grid Support: Simplifies the creation of complex layouts with intuitive flexbox and grid utilities.
• Performance Optimization: Includes a built-in purge feature to remove unused CSS, reducing file size for production builds.

Result

If you need a reminder, here is how our landing page is supposed to look when we first made it:

Desktop

Mobile