@keemah03
Latest comments
- @rafikncib
your code is in the wrong challenge
- @ankitashokgondWhat challenges did you encounter, and how did you overcome them?
Everything was just easy
@rafikncibgood job
- @broken555wheelWhat challenges did you encounter, and how did you overcome them?
Ensuring that the content remains responsive as the screen width changes.
I tried to solve this by limiting the size(width) of the card
What specific areas of your project would you like help with?I reckon my biggest challenge is identifying the different fonts used on the page. i.e. I can tell that the fonts are different but I can't tell which font is which.
@rafikncibuse this <picture> <source media="(min-width: 786px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="image product mobile"> </picture> in the place of this
<section class="imageSection"> <img class="mobileImage" src="./images/image-product-mobile.jpg" alt="Perfume Image" width="686" height="480"> <img class="desktopImage" src="./images/image-product-desktop.jpg" alt="Perfume Image" width="600" height="900"> </section>Marked as helpful - @RinkalKoshtiWhat are you most proud of, and what would you do differently next time?
The ui something I am really proud of and I would like to add some other content and some other features next time.
What challenges did you encounter, and how did you overcome them?My challenge is how to add downloaded fonts in an html/css file and to overcome this challenge I refer some website like w3schools, mdn fonts etc.
What specific areas of your project would you like help with?I want to add some functionality so any suggestion is appreciable.
@rafikncibnice
- @adptCodeWhat 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-withinto 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
:hoverand:focusworke seamlessly. At first, I struggled because my.card-elementdiv 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
What specific areas of your project would you like help with?:focus-withininstead of:focuson.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. 🚀🔍 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-withinand:focus-visibleto 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! 🚀😊@rafikncibnice
- @Timilovic@rafikncib
nice
