My Week-Long Journey with Frontend Mentor: Building a URL Shortening API Landing Page As a web developer

I constantly seek opportunities to hone my skills, learn new techniques, and tackle real-world challenges. This week, I embarked on an exciting journey with Frontend Mentor, tackling their URL Shortening API Landing Page challenge. Here’s a rundown of my experience, the challenges I faced, and the lessons I learned along the way.

The Challenge The task was to build a landing page that integrates with the Clean URI link shortening API, featuring responsive design, a modern UI, and a smooth user experience. The requirements included creating a page that allowed users to shorten URLs, view previous URLs, and display a responsive layout that looks great on all devices.

Planning and Setup Before diving into the code, I spent some time planning the layout and structure. I broke down the project into smaller tasks:

Header and Navigation: Create a simple, responsive navigation bar. Hero Section: Design a hero section with a catchy headline, subtext, and a call-to-action button. URL Shortening Form: Implement the form to interact with the API. Output Section: Display shortened URLs and handle browser storage. Footer: Create a footer with links to other pages and resources. I chose to build this project using HTML, CSS, and JavaScript, with a focus on clean, semantic code.

Building the Layout I started by structuring the HTML to ensure the page was accessible and well-organized. Using Flexbox and CSS Grid, I created a layout that was both responsive and easy to manage. The biggest challenge here was ensuring the design looked consistent across different screen sizes.

Styling with CSS For the styling, I aimed for a clean, modern look with an emphasis on readability and user experience. I used a combination of custom CSS and Bootstrap for quick, responsive layouts.

https://udy1111.github.io/frontend-mentor/