Social media Links

What are you most proud of, and what would you do differently next time?

🔹 What am I most proud of? I’m particularly proud of how I implemented the interactive states for my elements, ensuring a smooth and accessible user experience. Learning how to properly use :focus-within to improve keyboard navigation was a game-changer, making my design more inclusive. Additionally, I focused on clean and reusable CSS, improving maintainability while keeping the UI visually appealing.

🔹 What would I do differently next time? Next time, I would spend more time refining the responsiveness of my layout, making sure it adapts even better to different screen sizes. I would also consider using more advanced CSS techniques, such as custom animations or micro-interactions, to enhance user engagement. Lastly, I’d like to explore optimizing my code further, possibly experimenting with CSS utility frameworks like TailwindCSS or improving my BEM methodology for better scalability.

By continuously improving my workflow and refining my approach, I aim to make my projects more efficient, accessible, and visually engaging. 🚀

What challenges did you encounter, and how did you overcome them?

🔹 Challenges I Encountered: One of the biggest challenges I faced in this Frontend Mentor challenge was handling the interactive states correctly, particularly ensuring that both :hover and :focus worke seamlessly. At first, I struggled because my .card-element div wasn’t receiving focus as expected, since the focus was going directly to the <a> inside it. This caused an inconsistent experience when navigating with the keyboard.

Another challenge was dealing with the default browser focus outline on links (<a>), which looked out of place in my design. I wanted to remove it but still maintain accessibility for keyboard users.

🔹 How I Overcame Them: I learned to use :focus-within instead of :focus on .card-element, ensuring that the hover effect also worked when any child element, like a link, received focus. This small tweak significantly improved the usability for both mouse and keyboard users. Instead of completely removing the focus outline (which would harm accessibility), I replaced it with a custom focus style using :focus-visible. This way, the outline only appears when navigating with the keyboard, keeping the UI clean while still providing necessary visual cues. To improve the transitions and make interactions smoother, I added CSS animations using transition, ensuring a polished and user-friendly experience. By tackling these issues, I not only improved my understanding of CSS interactions but also learned the importance of accessibility and user experience in frontend development. 🚀

What specific areas of your project would you like help with?

🔍 Areas Where I’d Like Help While I’m happy with how my project turned out, there are a few areas where I’d appreciate feedback and suggestions for improvement:

1️⃣ Accessibility & Best Practices I implemented :focus-within and :focus-visible to enhance keyboard navigation and accessibility, but I’m unsure if I’ve covered all the best practices. Are there any improvements I could make to ensure a more inclusive user experience? 2️⃣ Responsiveness & Layout Adjustments My design is responsive, but I’d love feedback on how to improve its behavior on smaller screens. Are there any specific breakpoints or layout adjustments that could make it more fluid and adaptable? 3️⃣ Code Optimization & Maintainability I tried to keep my CSS organized, but I wonder if there are ways to structure it more efficiently, perhaps using BEM methodology or utility-first CSS like Tailwind. Are there any redundant styles or better approaches to writing clean, scalable CSS? 4️⃣ Enhancing UI with Subtle Animations I used transition for hover and focus effects, but I’m curious about adding micro-interactions (e.g., slight scale-up on hover or subtle text fade-in). What are some best practices for adding small animations without overloading the user experience? Any feedback on these areas would be incredibly valuable as I continue improving my frontend development skills! 🚀😊