Flex Box CSS

Community feedback

• 

  geektim•230

  @geektimPosted about 1 year ago

  This is a very awesome work. I also used a lot of divs when I did mine, and was worried about it. So, i checked the solutions of some people who already did the challenge, I figured it is better to first use html semantics like 'header, main, aside, section, article' or the likes like that, to first wrap up the elements before splitting into divs. Those semantics I mentioned are also block level elements, so, they stack. I hope you find this somewhat helpful.

  Marked as helpful

  2
• 

  A. Then•10

  @a-thenPosted about 1 year ago

  Awesome work with this! I like how you organize your CSS.

  Editing this to answer your question about divs

  The documentation says to use div for styling purposes only, when there is NOT a better semantic option. If you have to optimize for accessibility, I'd do <main> instead of a <section> for your .card-container. Keep the <article> as you have it and then make .card-result and .card-description into sections. But it depends on your logic because you can totally make .card-item a section and .card-result and .card-description as article elements within if you think each is shareable content that would make sense on its own (ie. share result as a tweet)

  <main>
      <article>
          <section>
              <h2>...</h2>
              <div> ... </div>
              ...
          </section>
          <section>
              <div> ... </div>
              <div> ... </div>
              ...
          </section>
      </article>
  </main>
  

  Like I said, this looks great, It's crazy how close you got to the original. If I have to nick-pick it, I'd suggest these two things:

  • tweak your box-shadow property to make a softer shadow that only appears at the bottom and right edge.
  • Delete the starting README.md file and update README-template.md to showcase your thought process/lessons/insights. You never know who might be watching!! 👀

  Keep up the good work!

  1