Recipe-page

Community feedback

• 

  P

  Steve Xero•210

  @stevexeroPosted 8 months ago

  Woah! I've never seen this before!

  <div class="card__img">
      <img
          sizes="(max-width:770px) calc(100vw - 80px), 736px"
          srcset="
              ./assets/img/main_325-test.webp   325w,
              ./assets/img/main_650-test.webp   650w,
              ./assets/img/main_1300-test.webp 1300w,
              ./assets/img/main_2600-test.webp 2600w
          "
          src="./assets/img/main_1300-test.webp"
          width="1300"
          height="594"
          alt="Omelet from recipe"
      />
  </div>
  

  I learned about why woff2 and ttf but didn't deep dive too much into where or how I can acquire the woff2. When I download and install from Google fonts or the Frontend Mentor files, it's been ttf. Can you give me insight on how you got the woff2?

  @font-face {
      font-family: 'Young Serif';
      src: url(../assets/webfonts/Font-face/YoungSerif-Regular.woff2) format('woff2'),
          url(../assets/webfonts/Font-face/YoungSerif-Regular.ttf) format('truetype');
      font-weight: 400;
  }
  

  Haha thank you for the shoutout!! I am learning from you too! This has been one of my favorite parts about pursuing tech, we're all always learning from each other! I am in a labor job now, so it's a totally different setting, where the people have poor attitudes (because they are tired, I don't blame them) and there is a huge lack of forward momentum. This structure moreso benefits from their people staying in the same place as opposed to empowering them and helping them get ahead. I feel out of place and do my best to try and help them rediscover their passions.

  Sorry for the rant, back to the code!

  Your sass is unmatched! Well structured, and inspiring me to dig deeper in.

  Is em(360, 16) particular to Sass? It is interesting

  .container {
      max-width: em(375, 16);
      margin: 0 auto;
      background-color: $clr-bg-container ;
  
  }```
  
  When I was working with BEM alongside Sass, I got confused about the BEM structure too.  I am still researching it further, but here's what I understand.  BEM is referencing the selector's role, Block, Element, Modifier.  Our recipe page doesn't really have any modifiers (buttons, interactive elements, etc.), but there are plenty of Blocks and Elements.  Blocks are like the parent, Elements are the children.  So if we have a container (block) of some sort, say "main-block," then all of it's children would reference it by including "main-block" + "__element-name."  Also, every element SHOULD have a class name.  I know nesting is awesome in Sass and it's one of my favorite features, but BEM doesn't suggest more then 1 or 2 levels deep.
  
  So for Sass:
  ```scss
  .main-block {
     &__element-name {
        property: value;
     }
  }
  

  or CSS

  .main-block {
     property: value;
  }
  
  .main-block__element-name {
     property: value;
  }
  

  I haven't experienced using modifiers with BEM yet, so I'll keep you posted on that.

  Very clean code! And while browsing more, I now found the Sass functions and the answer to my above question, but I'm going to leave it there as maybe it will inspire someone else to look into it.

  Cheers!

  0