Skip to content
OverviewSolutions
11
Comments
3
MetisT
@greatmetis

All comments

  • MetisT•275
    @greatmetisSubmitted over 3 years ago

    I took 4 hours to complete this responsive homepage and to recap what I've learnt so far.

    In this challenge,

    • I created an object in JS to contain information for slides, and I believe this makes my code look cleaner.
    • I also use <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!☺️

    Responsive Homepage built by HTML/SCSS/JS/jQuery

    2
    MetisT•275
    @greatmetisPosted over 3 years ago

    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!!

    0
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    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.
    • This is first time i used @extend rule. Since my modifier classes 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.
    • Added sticky nav menu using Intersection Observer API. This time i make it to be just hamburger menu after scroll with background, not sure if it's pretty but i want to have some fun.
    • Added backdrop-filter to opacity background when nav mobile is open. It provide effect such as blurring. (no Firefox support yet tho). Thanks to @ApplePieGiraffe. I found it in his solution.
    • I experimented with clip-path to create this slide effect on my background slider.
    • Added 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.
    • Implement 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! 😁

    Room - Sass, intersection observer API, mobile first, Flex, Grid

    6
    MetisT•275
    @greatmetisPosted over 3 years ago

    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!

    1
  • Jay•695
    @JunjiequanSubmitted over 3 years ago

    I've tried my best to focus on details for this solution.

    Any feedbacks would be highly appreciated ;)

    room-homepage-master

    2
    MetisT•275
    @greatmetisPosted over 3 years ago

    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!

    1