Typemaster page - HTML/SASS

Community feedback

• 

  drallas•375

  @DrallasPosted over 3 years ago

  Hello Rayane

  Congrats on finishing this Challenge! 👍

  I think your solution looks pretty close to the Figma design with a nice transition between when you switch over to / from desktop layout. Not sure if shrinking the images itself is the best solution, i opted myself to keep them 'static'.

  I finished this one yesterday evening and used your solution as an inspiration to refactor mine. The tip for the 'mix-blend-mode property to get the "orange" effect' was very helpful since i struggled to get that right and with a linear-gradient I couldn't get it look as the Figma design. I also refactored to get rid of @import using @use now. Btw I noticed that your SCSS is showing in FF Inspector, mine isn't; how does that work?

  I used SASS for the first time this challenge and went 'all in' on structure; perhaps too much when i look at your SASS folder structure that's a bit simpler. I think it's ok to split up the SASS CSS into small components, not having to search so much to find a specific piece of code.

  I hope it helps!

  Enjoy coding the next one.

  Greetings, Drallas

  2

  ---

  

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello @Drallas,

  Thanks for your feedback !

  I'm glad to hear that my solution helped you ! 🙂 I also didn't know about mix-blend-mode but thanks to google I found out haha.

  I don't know much about the FF inspector as I'm not using it. For the SASS part I'm not an expert either, but I think that the main point is just to simplify your CSS code. You want to make it as simple and generic as possible, so it's easier to read/work with it for you and other people. I guess it's all about balance between efficacy/simplicity of the structure .

  Happy coding !

  0

  

  drallas•375

  @DrallasPosted over 3 years ago

  @RayaneBengaoui

  Yes you're solution helped me a lot..

  Couldn't copy mix-blend-mode because I had set the images in the background, but mdn also mentioned background-blend-mode, si i created this.

  background-image: url(../../assets/tablet/image-phone-and-keyboard.jpg);
  background-color: hsla(22, 89%, 52%, 1);
  background-blend-mode: multiply ; 
  

  You can see for yourself what i mean with Firefox Devtools inspector. https://drive.google.com/file/d/1OYreF6-2-aLRSzRQtkWs-zOmQ0rdb79_/view?usp=sharing

  It shows .scss files, never saw that before; i guess it related to build tools?

  0