Skip to content
Submitted over 3 years ago

Manage - Mobile first, Sass, BEM, Intersection Observer API, Webpack

P
tediko•6,680
@tediko
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Manage landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello👋!

It seemed to be very easy challenge at first sight but it took me some time to properly align mockups background-image with ilustrations images to look good across different resolutions. In addition, I created a carousel from scratch, which also consumed a lot of time. I will not say that I am satisfied with how long it took me to complete this project and the end result, but I want to move on to the next challenge. List of things I learned or used creating this project:

  • Added counter() function for my pseudo-elements content in about__features. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
  • Used inset CSS property to position some of my pseudo-elements. It is a shorthand that corresponds to the top, right, bottom, and left properties. It has the same multi-value syntax of the margin shorthand.
  • For hover effect on navigation links I used mask-image property. A mask in CSS hides part of the element is applied to. Read More
  • Added touch-enabled mobile navigation. It's hard to reach for the hamburger menu on larger phones so I added a menu that is enabled by touchmove feature. Swipe from left to right to open menu on mobiles. Read more about touch-events.
  • Implemented Skip to content link. Skip links are little internal navigation links that help users move around a page. It is used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first. Read more about skip-to-content links.
  • Added sticky nav menu using Intersection Observer API. In short, this API is a native way of detecting if an object has entered the viewport. My observer looking at .kv section, and if that section is no longer interacting with viewport it triggers my header to appear. Read more about Intersection Observer.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

No specific questions here but any additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 3 years ago

    Hi, tediko! Another excellent job. 🎉 All the transitions, loading animations, hovers, mobile menu, and everything you've added make for a really smooth UX. 🙌 That carousel looks like it was an absolute pain to make, so extra kudos on that.

    To clear up the error on your report, I would simply switch out the .kv section for a plain, old div. It's a wrapper/container that really has no semantic meaning, so in this case I think a div would be best. You can read more about this here, which is a great article I constantly refer back to.

    Marked as helpful
    2
    P
    tediko•6,680
    @tedikoPosted over 3 years ago

    @brasspetals Thank you very much! When it comes to the carousel at some point the code starts living its own life and I didn't know how it is working anymore but I figured it and tidied up the code lol.

    I'll take a read about that. Thanks for feedback!

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hi, tediko! 👋

    It's nice to see you submit your solution to this challenge! 😆 Once again, everything looks amazing! 👏 The sticky navigations is very smooth, the in/out transition of the mobile menu is fun, and you build that swipe-to-view carousel from scratch? Incredible work! 😀

    I don't really have anything to suggest except that you could maybe put the script tag in the head of the document and add the attribute defer to it. That way, your HTML and JS will be loaded at the same time but the JS will only run until after the HTML is finished loading (meaning the functionality of your site should remain the same, but the JS might load a little faster) Read more about this and other ways of adding script tags to HTML documents here. 😉 It's just a super tiny thing, though (all I could find to say, haha)! 😂

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    1
    P
    tediko•6,680
    @tedikoPosted over 3 years ago

    @ApplePieGiraffe Thank you for feedback! Carousels are really tricky but interesting to build. You need to use element.cloneNode method to clone slides so you can create infinite slide effect. Apart from that, you have to turn off the transition at the right moment so you can "reset" your slider container position. It's nice when someone appreciates that you have built something from scratch 😅

    That is a valuable tip. I'll for sure read about this and I will implement it in my next project! Thanks, again and happy coding!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @tediko

    Yes, it is both fun and difficult to build things from scratch! 😂 But you've done very well and I should really dive into your code and give it a shot myself, some time! 😉

    1
  • Account deleted

    Hello tediko,👋

    Congratulations on completing this challenge 👏🎉

    Your solution looks perfect 💯 (I love the mobile menu animation)

    Great work here 👍

    1
    P
    tediko•6,680
    @tedikoPosted over 3 years ago

    @Nik-web12 Thank you! I'm glad you like it :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

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