css: flexbox, @media

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted almost 4 years ago

  Hey Dusan,

  Great job on the project. I have 1 piece of piece of advice, something I picked up from the project I just finished. See if you like it, perhaps use it yourself in your next project?

  Feedback: Your code is clean and easy to read, that's all I could ask for. Everything just made sense when looking over your CSS.

  Advice:

  1. Try using SCSS in your next project. I won't go too heavy into it but you can do something cool in SCSS that I can't really stop doing now: You can nest a media query within an element selector.

  To explain what I mean I will simply use some of your code, the end-effect would be identical to what you wrote with 1 added benefit:

  .supercharge-articles-container {
    max-width: 100rem;
    display: flex;
    align-items: baseline;
    gap: 3rem;
  
   @media (max-width: 1000px) {
          flex-direction: column;
          align-items: center;
    }
  }
  

  I love this method. It allows me to see the element I am changing as it's just a few lines above.

  2. When coding bigger projects try coding mobile-first. It's weird getting used to but it's always better to start with simplicity and build complexity into the media queries. (easier to add than it is to take away). So I code for mobile-first and my media queries are for tablet -> desktop. I almost always use @media screen and (min-width: ....).

  As I said, great job on the code and thanks for making it easy on the eyes!

  R

  2

  ---

  

  Dušan•210

  @osmonohPosted almost 4 years ago

  @grizhlieCodes Thanks a lot for the great feedback. I haven't looked into SCSS yet but starting the next week at some point and will definitely implement your tip on nesting @media.

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 4 years ago

  @osmonoh Awesome! SCSS is a thing you won't stop using once you start, it's CSS just even better :). Dev Ev and Kevin Powell are 2 YouTubers that come to mind if you want a soft-introduction into it. It gets hardcore the more you get into it, but in a good and manageable way hehe.

  Good luck on future projects!

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, great job on this challenge, Dušan! 👋

  Your solution looks very good and responds nicely! 👏

  I only suggest identifying each <section> tag you use with a heading and adding a <title> tag to the inline SVGs on your page to clear up the errors on your solution report. 😉

  Keep coding (and happy coding, too)! 😁

  0