Social Proof section Using flexbox

Community feedback

• 

  Paweł•1,030

  @Pawel-GnatPosted over 2 years ago

  Hi mate. I've checked your code and my only advice is - try to code with a repeatable method.

  Let me give you an example.

  Your code:

  .rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .each-rating {
    color: var(--Very-Dark-Magenta);
    font-weight: 700;
    padding: 1rem 0;
    margin-bottom: 1rem;
    width: 100%;
    background: var(--Light-Grayish-Magenta);
    border-radius: 0.3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  Corrected code:

  .rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .each-rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: var(--Very-Dark-Magenta);
    font-weight: 700;
    padding: 1rem 0;
    margin-bottom: 1rem;
    background: var(--Light-Grayish-Magenta);
    border-radius: 0.3rem;
    text-align: center;
  }
  

  See the difference? It's easier to work in a group if your code have some kind of styling order.

  Marked as helpful

  1

  ---

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @Pawel-Gnat I'm sorry for stressing you, could you please explain what you mean by repeatable? And I personally think that order does not matter.

  Kindly let me know why you think it matters.

  0

  

  Paweł•1,030

  @Pawel-GnatPosted over 2 years ago

  @EngineerHamziey I heard once in a discord group that when we write our code we should stick to one styling schema.

  For example:

  styled_element {
  1. position code
  2. display code
  3. margin/padding code
  4. width/height code
  5. color
  6. border
  7. font code
  8. and many more..
  }
  

  Apparently, if we stick to one styling scheme in a working team it helps to provide further code upgrades. But it was just a suggestion that I found useful :)

  Marked as helpful

  2

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @Pawel-Gnat thanks so much, I'll research more about it when I'm less busy. Oh yh, @vanzasetia, what is your opinion?

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EngineerHamziey I used csscomb npm package to help me order the properties automatically. But, it is not a necessary thing to do. You can write the CSS properties randomly.

  I agree with @Pawel-Gnat, it might be more beneficial if you are working with a team (I never work with a team at least until now 😅).

  So, it is up to you, Hamzat. You can do it if you want. 😉

  Marked as helpful

  2
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Hamzat! 👋

  It's great to see you completed another challenge! Congrats! 👏

  Regarding your questions:

  • For the :focus-visible styling I recommend only using outline instead of border and padding. Currently, there's a little bit of jumping layout when I focus on each link.
  • I can't find negative value for the border styling. But, do you mean negative value for margin? If that's the case then I guess it is fine.
  • As far as I know the meta keyword is ignored by bots. It's because people were spamming a lot of keywords. However, SEO is a separate topic so I would not recommend focusing on it too much. There's no guarantee for your website to be showing on the search result (even if you follow all the best practices).
  • I check your solution on 1000px width and here are some suggestions from me.
    • Remove the max-width from the body element. I would strongly recommend never limiting the width of the body element. Instead, I suggest adding max-width to the main-container instead.
    • There are no background images.

  Now, some feedback on this solution.

  • Avoid using header for the content inside the main element. Use div instead. header is a landmark element that contains nav and the logo of the site (commonly).
  • Always wrap text content with a meaningful element like a paragraph element whenever possible.
  • I suggest wrapping the white-text paragraph with blockquote for better semantic markup.

  You have done a great job with the alternative of the images. 👍

  I hope this helps! Keep up the good work! Happy coding! 😄

  Marked as helpful

  1
• 

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  😲 I can't believe I forgot to center the page. I've correct that right now

  0