Mobile first, Svelte App, vanilla js/css

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, jemeneradev! 👋

  Good job on this challenge! Your desktop and mobile layouts look great! 🙌

  I suggest,

  • Allowing users to click on the titles of the accordion rather than hover over FAQs to open up the description for each FAQ for a better UX.
  • Not immediately switching to a mobile-friendly layout at 1440px because you still have lots of room for a desktop layout for a couple of hundred pixels (users on smaller desktop screens should still be able to use the desktop layout of your site).

  Keep on coding (and happy coding, too)! 😁

  1

  ---

  

  jemeneradev•580

  @jemeneradevPosted about 4 years ago

  @ApplePieGiraffe I was a bit confused with the design directions regarding the question active state: should hovering over the question only highlight the title but not reveal the the answer?

  Also, is there a css click pseudo-class, like hover?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @jemeneradev

  According to the design JPGs, the titles of the FAQs should turn orange upon hover and turn black (or bold) when the FAQ is opened. Accordions are commonly activated by clicking on the title of one of the sections rather than hovering over them so that users can open one of the sections and then move their mouse around freely without having to worry about closing the section.

  You can use the :active pseudo-class to style some elements (like buttons) when they are clicked, but I'd recommend using the HTML <details> and <summary> elements for this challenge since that's what they were made for and will save you a lot of writing your own JS and some CSS. 😉

  But keep it up! 👍

  0
• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Nice job Jemeneradev

  I recommend switching to your desktop layout a bit sooner in your 1400px media query. I think it would be better for the user experience to click on the questions to show the answers vs hovering to reveal. Add a hover style to the questions as well.

  Keep on coding 👍👍

  1

  ---

  

  jemeneradev•580

  @jemeneradevPosted about 4 years ago

  @artimys Thanks for the suggestions! The Desktop version should kick in when there's enough room for it.

  0