Overview: The BMI Calculator App Landing Page was developed as a clean, user-friendly interface to promote an application that helps users calculate their Body Mass Index (BMI). The design was inspired by a challenge from Frontend Mentor, providing a solid foundation for both aesthetic appeal and functionality.

Project Goals:

User Engagement: Create an inviting landing page that effectively communicates the app's value.

Responsive Design: Ensure the page is fully functional and visually appealing across various devices and screen sizes.

I began by sketching wireframes based on the design provided by Frontend Mentor.

Used Figma to create high-fidelity mockups, ensuring alignment with the project goals.

Selected a calming blue color palette featuring to evoke trust and health.

Chose a modern, sans-serif font for readability and contemporary appeal.

Crafted a semantic HTML structure with clear sectioning elements like <header>, <main>, and <footer>.

Ensured all content was easily accessible for both users and search engines.

Implemented the layout using Flexbox for a responsive design, ensuring elements adapt seamlessly to various screen sizes.

Utilized media queries to adjust styles for mobile devices, tablets, and desktops.

Implemented mobile-first design principles, starting with a mobile layout and enhancing for larger screens.

Designed a striking hero section with an eye-catching gradient background color setup.

Included a prominent headline and sub-headline to capture user attention.

Placed a bright, eye-catching CTA button in the hero section.

Used contrasting colors to make the button stand out.

Created sections detailing the app's features using icons and brief descriptions.

Incorporated hover effects on feature cards for interactivity.

Cross-Browser Testing:

Ensured the landing page functions correctly on popular browsers (Chrome, Firefox, Safari, Edge).

Device Testing:

Used browser dev tools to simulate various devices and screen sizes, ensuring all elements rendered correctly.

Deployed the landing page using github pages.

Conducted final checks for responsiveness and performance before the official launch.

The BMI Calculator App Landing Page development was an enriching experience, allowing me to apply modern web development practices while adhering to design principles from Frontend Mentor. The end result is a visually appealing, responsive, and user-friendly landing page that effectively promotes the BMI Calculator app.