Mobile first responsive, BEM, CSS, JavaScript dynamic loaded content.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one and congrats to your first junior challenge as well! Both desktop and mobile layout is really good.

  Some suggestions would be that:

  1. Ughm well, it is a bit weird that your button is moving especially when the focus is in it, it feels like it is not part of the toggle itself because the outline is in the button only. Well this is just preference, but you could make use of :focus-within, what will happen is that, when the button gets the focus, the toggle will have the outline, not the button itself. So if you were to implement this, it would look like

  first set the `outline: none` to the button
  then set this below
  
  .toggle__switch:focus-within {
  
      outline: 3px solid red; it depends on your preference for the size and color
  
     You could instead use box-shadow instead of outline
  }
  

  This way, the button won't get that box-outline which is moving when toggled. The whole toggle will get the outline, thus creating this visual of being a whole.

  2. Use hierarchical header tags. On your article, you used h3 then followed by h2 which creates conflict in terms of hierarchy. Use the h2 first then h3

  Only those two. But still, you did a really good job on your first junior challenge^^

  0

  ---

  

  P

  Dexter Dick•185

  @DexterDickPosted over 3 years ago

  @pikamart Thank you for your feedback. I implemented some of your changes.
  I noticed my toggle button works on desktop but dose not show up mobile. I am not sure why this is happening.

  Thank you.

  0