css grid, flexbox, scss variables

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 3 years ago

  Greetings Ayyoub.

  Well done, you did well with this challenge. One area that can be improved is the following

  <div class="bg">
          <img src="./images/pattern-background-desktop.svg" alt="desktop background" class="bg--desktop">
          <img src="./images/pattern-background-mobile.svg" alt="desktop background" class="bg--mobile">
      </div>
  

  I see you are alternating display: none to show the images. You need to look into responsive images techniques, namely srcset and picture element. The issue with the method you used above is the fact that each and every listed image will be uploaded on a user device regardless of the type of device the user is using. For example if I am on mobile both images will be uploaded including the desktop one that I don't need. The effect of it will be noted when a site has plenty of images - it is expensive and slows down the machine. Srcset and picture element are designed to upload accordingly.

  Marked as helpful

  1

  ---

  

  Ayyoub Hamame•120

  @BouyyahPosted almost 3 years ago

  @ChamuMutezva That's understandable, and super helpful. I didn't know those attributes existed. Thanks a lot.

  PS: I fixed it ^^

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 3 years ago

  @Bouyyah, the following article can help you with the image picture element

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay! Ayyoub I see you have one issue so follow these below steps in your next or in this project and the issue will be solved

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  1

  ---

  

  Ayyoub Hamame•120

  @BouyyahPosted almost 3 years ago

  @Crazimonk Hello! I already have a main tag, i just added the last img outside it, it's fixed now. Thanks for pointing it out

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  That's a very nice solution there I think you should increase the box shadow a bit.

  Great job:)

  1

  ---

  

  Ayyoub Hamame•120

  @BouyyahPosted almost 3 years ago

  @Kamasah-Dickson Thank you i'll do that.

  0