Intro section with dropdown navigation

Community feedback

• 

  engahmedhusseinn•60

  @engahmedhusseinnPosted over 1 year ago

  Hi Ekaterine,

  That is a great project, I can't find no bad side in it. Everything is clean, good work! very good work Great project, I just have 2 minor stylistic comments that I think would be helpful. use vue js use vutify

  This will help you in rapid work and development without any time and effort, write much shorter code, and improve the performance of your site.

  But you did a very good job, of course, very excellent and wonderful

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 1 year ago

  @engahmedhusseinn Thanks for the comment. I am usually using React, not Vue but for most FM projects I am using Vanilla JavaScript to keep practicing the basics as well.

  0
• 

  Andrew•130

  @FeelsGo-odPosted over 1 year ago

  Hi Ekaterine,

  That is a great project, I can't find no bad side in it. Everything is clean, good work!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 1 year ago

  @FeelsGo-od Thank you

  0
• 

  Marcos Aurelio•130

  @marcosaurelioslPosted over 1 year ago

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

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 1 year ago

  @marcosaureliosl Gracias

  1
• 

  Aruj Joshi•290

  @gtalinPosted over 1 year ago

  Hi @catherineisonline. Congratulations on completing this challenge. Your solution looks amazing.

  I do have a few suggestions on how you can improve the solution further:

  • Right now the dropdown navigation shows only when a user hovers over it. A lot of users don't like using a mouse and just use keyboards. To make the menu more accessible for them, you can cause the dropdown to show on focus (you'll have to use the property focus-within. I consulted this link for creating keyboard accessible dropdown menu while doing this challenge. Hope you find it useful as well.

  • Second suggestion is that you have used a max-width for the main container which prevents it from stretching out. You can use the same for the nav as well. Right now for very large screens, the nav bar stretches out considerably.

  Hope you find the feedback helpful. All the best for your future challenges.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 1 year ago

  @gtalin Thanks, Aruj

  0
• 

  Thabiso•270

  @SefalaThabisoPosted almost 2 years ago

  This has been giving me a challenge for weeks now😭 . Your solution looks amazing. I would like to get your thought process on how you got to the solution 😅.

  Great job👌🏾

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @SefalaThabiso Thank you! Try to read more about grid and margins and for the menu try to understand how to toggle classes, or simple check how to make a hamburger menu on Youtube

  3
• 

  ERIC•580

  @ricoomPosted almost 2 years ago

  Hello Ekaterine, Congratulations!! you aced this challenge. I have some insights that may help you.

  • in your media query use 375px as max-width to ensure responsiveness in mobile devices. -Reduce the font size of your intro header on small devices. nevertheless, I do love the idea of a sticky hamburger, on scroll. good job!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @ricoom Thanks for the tips! 👋🏻

  0
• 

  faizan•2,420

  @afaiz-spacePosted almost 2 years ago

  Hey @catherineisonline,

  • if not provide any hyperlink in the anchor tag. then use # ex (<a href="#">Todo List</a>)
  • add line-height: normal; in the button element.
  • replace min-width:1000px; with min-width:1200px; in the main element.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @afaiz-space Thanks

  0

  

  faizan•2,420

  @afaiz-spacePosted almost 2 years ago

  @catherineisonline

  • also use box-sizing: border-box; in the * selector

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @afaiz-space I am actually using it already :))

  1
• 

  P

  Mina Makhlouf•890

  @MinamakhloufPosted almost 2 years ago

  Hi Ekaterine,

  Great project, I just have 2 minor stylistic comments that I think would be helpful.

  1. When the menu is dropped down, it hugs the navigation menu too tightly. I would advise that you create some small space between the navigation and the menu that is dropped down. You can either do it by increasing the value that it is offsetted from the top or just use transform: translateY() and give it a larger value.
  2. There also seems to be a scrolling issue. When I view this on Google Chrome, the bottom portion of the website is cut off and there doesn't seem to be a scrolling option to see them. So I can't see the padding at the bottom or the icons. To fix that you might have to look at how you set the overflow property.

  Hope you found this feedback helpful.

  Aside from that, very well done.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @Minamakhlouf Thank you

  0
• Account deleted

  • From User Experience Perspective

  • Problem::

  • In mobile version, inside [Menu List] when I hover over [Features] it opens list and increase in size due to which the position of [Company List] goes down and when I go down the [Feature List] and get past the last item in [Feature List], the [Feature List] shrinks, taking the [Company List] and [Feature List] back to its position before hover state and User has to hover over [Company List] by bringing the cursor from bottom of the [Menu List] and it becomes irritating to go up and down again again to see these lists.

  • Solution::

  • I think it would be better if there is a delay for closing [Feature List] so that User has time to go over [Company List].

  • I am not as good as you are and I learn from your projects and get inspiration from you.

  • I hope You find this UX feedback useful.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @HassanAkhtar8 Hey, thanks for the feedback. I definitely agree and that happens because of the limits of the hover state, usually I prefer to use just JS for that

  1