Skip to content
OverviewSolutions
10
Comments
3
Marcos Aurelio
@marcosaureliosl

All comments

  • Marcos Aurelio•130
    @marcosaurelioslPosted over 1 year ago

    Show de bola, obrigado pela dica... e contribuição fique a vontade para comentar e recomendar todas as minhas postagens por favor... todo feedback é para crescimento e desenvolvimento neste momento para mim. ;0).

    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted almost 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Intro section with dropdown navigation.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Intro section with dropdown navigation

    9
    Marcos Aurelio•130
    @marcosaurelioslPosted over 1 year ago

    Muito bom o trabalho, parabéns.... achei perfeito, bem dinâmico, semântica boa demais.

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqSubmitted over 1 year ago

    👾 Hello, Frontend Mentor Community,

    This is my solution for the Project Tracker Intro Component.

    • Scored 98.4% on Google Pagespeed Insights! 🤩
    • Added outline for interactive elements like buttons, a to ensure better accessible solution
    • Minified the css & js files to improve site performance 🚀
    • Used Prettier code formatter to ensure unified code format ⚙️
    • Layout was built responsive via mobile first workflow approach 📲
    • Had a lots of fun while building this challenge ! 🤠
    • Feel free to leave any feedback and help me to improve my solution 💡

    Thoughts :

    • My primary goal during building this project is to build it accessible as much as possible. In the end i figured about how we can make accessible hamburger menu for Mobiles without affecting the horizontal menu for Desktops.
    • The Hamburger menu for mobile will support Enter, Space, ↓ to open the menu, and then we can use ↓ to traverse the menu items.
    • Used inclusive-menu-buttonscript by Heydon to quickly implement these functions. Actually this script was build for dropdown menu, in our case we use for Hamburger menu.
    • The edge case i faced is to apply implement these logics on for mobile devices, so that i added conditionals to watch window size whether it's mobile or not & uses watchMedia api to set these logics otherwise the logics won't be applied
    • The watchMedia is not added as a eventListener, So if you try to switch Desktop to mobile in RWD Mode then the Hamburger menu will won't work, I'll try to add an event listener for that
    • Feedback regarding these implementations are also welcome!

    .

    👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    PROJECT TRACKER INTRO COMP 🎯 [ ACCESSIBLE - ES6 - BEM - VANILLA CSS ]

    2
    Marcos Aurelio•130
    @marcosaurelioslPosted over 1 year ago

    Parabéns, excelente resultado.

    1