Looking to hire developers?
Hello👋!
That was a simple and fun challenge, although there was room to try new things and learn something new.
prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief. Spotted at @brasspetals solution 😅aria-expanded and aria-controls attributes.Thanks for @grace-snow for helping me with keyboard navigation. Since i change visible order of .creations I had to create other button to prevent firstly tab on last element and only then on first. No specific questions here but any additional feedback will be appreciated!
Thanks! 😁
@truong231298
Posted
@tediko Your decision-making and problem-solving skills are incredible. i can't say anything beacause your code is so clean and easy to understand. moreover, you have some new ideas which i can learn more.
I really love this, and love the way you've thought things through.
Only a few very minor amends to suggest really ☺
alt="Home page" doesnt say the name of the site / product. Maybe consider a convention like Site - page LoopStudios - Home or similarI'd need to test out how links wrapping figures and captions would be announced by a screenreader tbh, no idea about that one. It might be fine but I'm not sure.
I just checked it with android talkback and it announces each creation 3 times
So... I'm not convinced figure is a great idea for this. And maybe reduce the number of times it can be announced by hiding the image or something.
Just some ideas: I think I would use an image (in a picture element) with an alt that describes what the image actually is OR has an empty alt attribute and is aria-hidden OR (probably most likely) I'd make those images background-images. Then Id place a link (anchor tag) around the words. I would make the container around image and link position relative, and then create a pseudo element off the anchor tag sized to 100% height and width.
That's a technique to make a whole card clickable without wrapping multiple dom elements in an anchor tag
Like I said, just ideas ☺
@grace-snow Thank you for feedback! On my way to change this home page alt text and footer nav aria-label. Regarding to negative tabindex. I did it to prevent showing focus state after mouse click on hamburger, but keep focus state when user is using keyboard. Read about this here stack overflow. Lead me out of error if it's wrong. As for buttons. I thought "see all" can trigger expand on gallery and show more cards so i thought button is good for that.
Thanks again!
@tediko on that stackoverflow there is a much better solution just above the one you've used where you use focus-visible in combination with a focus+not-focus-visible. That sounds promising to me, so I'll be trying it out tomorrow. Thanks for the link!
@grace-snow Seems like I have to re-read it! :D
@ApplePieGiraffe
Posted
Hey there, yet again, tediko! 👋
Fantastic work on this challenge! 🙌 The sticky navigation bar is a great idea and the hover state of the cards in the "Creations" section looks great! 🤩 All of the other details (such as the "shake" animation on the social media icons and the transition of the mobile menu) are nice additions! 👍
Of course—keep coding (and happy coding, too)! 😁
@Junjiequan
Posted
Hi tediko,
Your work just blown me away. Literally everything, animation, navbar transition, button hover effect, scss files architecture etc...
Im even getting a bit of envy feelings, just by looking at your scss structure, that is exactly how I want my code look like.
I really want to ask you how long have you been doing front end things, but I guess the answer won't help me in anyway.
Thank you so much for positing your solution, that gave me a direction to where I should be forwarded.
@a331998513 Hello, Jay! Thank you for kind words, it really means a lot to me. Please don't make my mistakes tho and STOP comparing yourself to others. There will always be someone who will be better, faster learner etc. Everyone have own life speed and it is important to START comparing yourself to who you were yesterday! Believe me, I was there and I stopped coding for four months because I compared myself to the others, i thought my learning curve is slow and it takes all my fun from coding. Comparison is the thief of joy!
Have a good day, and have fun coding! 💪
@RayaneBengaoui
Posted
Hello tediko !
Nice to hear that you found comment helpful ! 😄
I really like all the animations you did on your solution, it looks super cool ! 🤩
I will definitely study your code, your Sass structure looks really clean and I didn't know about Intersection Observer API.
Have a nice day 🌞
@RayaneBengaoui Hello! Thank you for your feedback! Check Sass 7-1 Pattern to organize your Sass structure.
Have a nice day too! 😊
@brasspetals
Posted
Excellent job, tediko! 🙌 🎉
The “slide overlay and tilt zoom” hover effect on the cards is really neat, and I see you’ve added some extra animations to the social icon hovers! 😄👍 The fixed menu bar on scroll is also a nice touch, as well as the lazy loading - I’ll have to check out that API for myself! The whole project responds beautifully. Again, great job!
Thanks for the shoutout! 😊 I tested out reduced motion, and it seems to work perfectly. You might want to consider applying it to the hover state for the cards, or doing a simpler version for those who prefer it. It’s just a minor suggestion though, and I’m not sure it’s actually needed.
The only other small thing I noticed is that the image in the about section seems to peek out the bottom about 1px on the horizontal/desktop version. I can’t quite figure out what’s causing it. 🤔
@brasspetals Thank you! Definitely you have to check this API. It is easy to work with and have a few options so you can create really cool things with that and it replace you a lot of code when you didn't have to check for window offsets etc :D
Yeah i should apply this reduced motion on every animation i have, even hovers.
I use firefox so I didn't saw this bug. I checked on chrome and somehow my box with white background was 1px off compared to firefox version.. I fixed it :)
Thanks for your feedback! 👍
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
