React and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great , it is responsive but on mobile view.. Nevermind, the image was just loading for a while that is why I thought that you forgot to include the image.

  Yes and why won't you use html syntax? or are you referring to something? Also, your component on this are fine. If I would do it:

  <main>
    <Hero /> # or not hero since it is not a full layout
    <Accordions />
  </main>
  

  We can also make each accordion a separate component as well.

  • On the accordions, what you should have done is that, nest the button and the answer in one parent:

  parent
    button
    answer
  

  this way they are isolated enough. Also on the button use a aria-expanded="false" as a default attribute then set it to true if the user toggles it. You can use that as a styling hook so that you won't have to check if button was clicked to trigger the p tag. This way for seo, it is friendly (but not as an spa in react) then you could just:

  button[aria-expanded="true"] + p {
    show the p tag
  }
  

  • Lastly, if you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  @pikamart, thanks for the feedback! The reason I asked about the HTML markup is that I'm just starting to learn React and I notice that a lot of the code I've seen from other devs use primarily components instead of divs, then style their components through either importing from another .js file or add the style for their component within the same file instead of using divs and classNames along with .css files. Would this be a preference thing? I'm mostly confused about what would be the best practice when using React in terms of formatting and styling.

  • Also I've seen others use the term "Hero" in code before, Is that a common label used?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Carlos-A-P Hey.

  In a site, what you call the hero is the first section of your page. For example, there is a landing page right, then imagine the first content that you see on the page, after the header, the hero is consists of like the h1 as well the image. For example, this solution of another member that first section is the hero-section

  Marked as helpful

  0

  

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  @pikamart, I think I finally resolved my confusion with the whole HTML question... It was the styled-components library, haha. I saw it everywhere, and it looked very confusing. I thought CSS files weren't often used in React; a lot of code that I saw was all components. Now I understand it was a popular library to make the code look cleaner.

  0
• 

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  hello my dear friend ♥ you did very good and clean but you forget to add hover state on question title ( soft red in hover mode ) and also I try this challenge too and I will be very happy to see my solution not just happy also for problem fixing and advice from you :) ♥

  Marked as helpful

  0