Looking to hire developers?
@greatmetis
@greatmetis
Submitted
I took 4 hours to complete this responsive homepage and to recap what I've learnt so far.
In this challenge,
<li></li> to create an indicator for image slide which is better user experience.I hope you enjoy building code as I do, and I am always welcome any suggestions and collab opportunities.
Happy coding!☺️
@greatmetis
Posted
Thanks @tediko for your time!!
I totally agree with you about the box-shadows. That is a try although it's unsuccessful experience, I learnt the lesson from this. I thought it could make the buttons more attractive, while apparently I even doubt my own decision. 😅
Thanks for pointing out the problem for the layout in mobile screen. I didn't see the misplace of those sections. It's big shame for me while I have edit them, and thank you😀
In terms of infinite slides, I have thought about it. While the reason why I added the indicator for the slide is to let users know the slide has been the end. However, I do understand loop the slide could be more user friendly. So, I decided to stick with you suggestion!
To sum, I have learnt lots from this challenge, particularly the aspects of user-friendly and designer's eyes.
Again, I really appreciate your time on my challenge!!
Hello👋!
I have to admit that the challenge was more difficult than I thought but it was fun to get throught the problems I faced. Here are few new things that i was able to bring in into my project:
:focus-visible pseudo class (spec). This selector should now only indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.kv__hero-bg--1/2/3 all uses styles from kv__hero-bg. I extend this class and it allowed me to remove unnecessary class from HTML code.clip-path to create this slide effect on my background slider.aria-live="polite" to my .kv__intro element to expose dynamic content changes in a way that can be announced by assistive technologies after my slider change content within that element. This one is from @Matt.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.Again thanks for @grace-snow for helping me. No specific questions here but any additional feedback will be appreciated!
Thanks! 😁
@greatmetis
Posted
WOW! tediko,
Your solution is AMAZING. I tried not to type fewer capital words, BUT I just realised how small I am, and really inspired by your work.
This one is definitely THE BEST solution I've seen here so far. I don't have any suggestions to you while I believe you should know you deserve more compliments.
BTW, thanks for writing the notes clearly. I just learnt a handy effect from you,backdrop-filter:blur(), and I have used it in my solution 🔆
Again, thanks for your inspired work!
@Junjiequan
Submitted
I've tried my best to focus on details for this solution.
Any feedbacks would be highly appreciated ;)
@greatmetis
Posted
Hey Jay, this one looks really cool, and the animation you added for the triggers and photos make the site alive. I particularly like the match you created on photos and introduction of the products.
You really dig into it!! I just downloaded this challenge and I will build it up later. Well done!
