SCSS - BEM - Flex & Grid - JS

Community feedback

• Account deleted

  This is really really really beautiful Rafet. As a learner myself, this is really inspiring. I would just state the few things I noticed.

  1. The color for the signup button text looks lighter in your interpretation than in the design. I guess font-weight: bold would correct that.
  2. The call to action section from the design seems to have a greater margin-top than yours.
  3. The start for free and learn more button texts are bolder in the design than in your replication. Like in the case of the signup button above, but increasing the font-weight would probably fix that.
  4. For the headings and subheadings of the other sections, starting from the 'Designed for the future' text, the color from the design seems to be a bit bluish but yours is looking quite dark(black). I've also sometimes found the colors in the style guide to not give the exact results in the design. So maybe you could take a look at that. You might be using the wrong shade.
  5. The background color for the 'state of the art architecture' section in their design seems to be a lighter blue while yours seems to be a darker or deeper shade of blue.
  6. Finally, the background of the footer in your solutions seems to be a dark blue while in their design, it's tending more on the side of getting dark(black) I am also currently trying out this challenge. Once I'm done, I would appreciate feedback from you as well. I'm curious as to how you achieved that kind of round object from the hero section, given that the background image seems to be square. I would love to connect with you and we could probably collaborate to do some more frontend challenges in the future. If that sounds nice to you, you could drop me a mail at '[email protected]'.

  2

  ---

  

  rafet•925

  @rafetbasturkPosted over 3 years ago

  Hello Karen! Thanks for your precious comment about the design. Actually, I didn't notice font-weight differences while I am coding. But now I see it obviously ☺️ And I am aware of the color differences, as you mentioned sometimes the style guide does not give exact colors.

  You asked about how I managed to make the hero image rounded, but I am not sure which image you mentioned. So I couldn't reply to your question. If you can be more clearer, I would love to answer your question.

  It would be perfect to collaborate with you on the projects yet to come.

  Happy coding.

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hi, rafet! 👋

  Just wanted to drop in to say good job on yet another challenge! 😀 Your solution looks great and responds quite well! 👍

  The only minor suggestion I might have is to allow the background of the hero section to extend to fill up the entire width of the screen (much like the background of the footer at the bottom of the page) so that there isn't any empty space to the sides of that section on extra-large screens. 😉

  Of course, keep coding (and happy coding, too)! 😁

  1

  ---

  

  rafet•925

  @rafetbasturkPosted over 3 years ago

  @ApplePieGiraffe

  Hi and welcome 😊 I am not sure how it would look if I stretch the hero section as the footer. But I will try. Thanks for your comment.

  Happy coding! 😄

  1
• 

  Maksym Minenko•30

  @minemax-uaPosted over 3 years ago

  You're using BEM in a wrong way.

  0

  ---

  

  rafet•925

  @rafetbasturkPosted over 3 years ago

  Hello there! Thanks for your comment. I have added "containers" after I almost finish coding. So the containers' BEM names are not fit BEM naming as you mentioned because I did not want to change all naming. Is there any other issue that does not fit BEM naming? If there is, can you be more specific?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @rafetbasturk actually your BEM is fine, nothing wrong with. As far as I can see you're using the __ as for classes and the -- for the states. Yours is good^

  0

  

  Maksym Minenko•30

  @minemax-uaPosted over 3 years ago

  @rafetbasturk Yes. A modifier can't be used alone, for example. But the main problem is that you don't understand BEM. You're using it because... well, a lot of other coders use it? Because your code looks "more professional" with a lot of underscores and "--" in it? But the main idea of BEM is modularity, dividing the user interface into independent blocks for reusability. And what can you reuse with structures like those "double double underscores" Almost nothing, really... Just read the documentation more carefully (and it's not a lot to read, really, by the way). For example, you should be using the BEM mix where you want to introduce those aa__bb__cc and sometimes maybe not use the "elementing" at all. My another advice would be start using Sass (with the & for nesting). That will help you understand BEM better. You will see more clearly what should be made reusable and what not.

  2

  

  rafet•925

  @rafetbasturkPosted over 3 years ago

  @minemax-ua I see your point. Actually, I haven't read the documentation as you said. I only read an article about it on [CSS Tricks] (https://css-tricks.com/) and started using it. I thought this way is okay till now. I have used blocks in a block but only elements should be used in a block instead. By the way, I have already used SCSS (with & nesting). Thanks for your suggestions.

  0

  

  rafet•925

  @rafetbasturkPosted over 3 years ago

  @pikamart

  Hello! As you said I use underscores(__) for elements and hyphens(--) for states or styles. I think @minemax-ua has a point here. For example, "Using elements within elements is not recommended by the BEM methodology". But I did so.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @rafetbasturk Oh yes he has and he's explanation about it is good and also i'll read about some other documentations about for knowledge enhancing. @minemax-ua, thank you for pointing those out^^

  0

  

  Maksym Minenko•30

  @minemax-uaPosted over 3 years ago

  @rafetbasturk I think the BEM mix concept is not too clearly explained in the docs, to be fair. This article should make it more clear: https://en.bem.info/forum/4/

  0