Skip to content
OverviewSolutions
10
Comments
19
Guy Ezra
@ezraguy

All comments

  • Guy Ezra•615
    @ezraguyPosted almost 3 years ago

    Hey @juniorjuarez, Great Work! 1 suggestion that I have is adding a little bit of transition to the hover state of the image by adding this CSS:

    .image div{
   transition: .3s ease;
}
    Marked as helpful
    0
  • Abhik•4,840
    @abhik-bSubmitted almost 4 years ago

    Hi Frontend Mentors 👋,

    I created some staggering animations using setTimeouts , however I personally feel there's a better a way for that. So if anyone knows that please help me out!

    Any feedbacks,tips,suggestions will be highly appreciated 🙏

    Ping coming soon with staggering animations

    3
    Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    hey @abhik-b, Great work! about the setTimeout on the animations, maybe animation-delay in your CSS is the solution you are looking for.

    Marked as helpful
    1
  • Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    Hey, @Env-y your project looks very good! I have only a suggestion. in the 960px width break point maybe make the pricing cards half the width of the screen I think it will make them look better and more readable. other than that it looks great! Happ coding! 😄

    1
  • Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    Hey @Etang131, I have 1 suggestion to offer, I think the image component should not be in the container. because the container has a max-width:1440px and when you look at the website with a desktop monitor there are white spaces on the sides because the screen is wider than 1440px. what I would do is would take the image out of the container CSS as a background image and add it as an img tag and give it the following CSS:

    .background-img{
position:'absolute';
width:100%;
height:100%;
z-index:-1;
}

    other than that it looks great! Happy coding! 😄

    1
  • Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    Hey @abhik-b, great job!

    I have 2 suggestions:

    1. like @axevldk said around 300px width the text in the card starts to overflow.

    2. In the 1023px breakpoint I would make the card's width around 55% percent because, in my opinion, 80% percent looks a bit stretched and I would add min-width to the card.

    @media screen and (max-width: 1023px)
article {
    grid-template-areas:
        "image image"
        "details details";
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
    height: 70%;
    width: 55%;
    min-width: 300px;

    other than that it's great!

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted about 4 years ago

    Hey, everybody! 👋

    I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! 😅

    I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the <picture> element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).

    I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! 😆

    More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.

    Of course, feedback is welcome and appreciated! 😊

    Happy coding, everyone! 😁

    Room Homepage with CSS Transitions and JS (GSAP) Animations

    9
    Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    Hey @ApplePieGiraffe, your solution is absolutely beautiful, WOW. very professional! great job!

    1
  • tediko•6,680
    @tedikoSubmitted almost 4 years ago

    Hello👋!

    Thanks to @Grace and @Aleks from slack for helping in this project. This time i tried to create more accessible mobile nav and i was following this article in order to achive this. I know this is not true mobile nav but atleast it is a step forward towards it! I have no specific questions but any feedback will be appreciated!

    Thanks! 😁

    RWD tracking intro component (Flexbox, Sass, Mobile-first, JavaScript)

    5
    Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    Hello @tediko, Great challenge! I love the components entering the page animations and the hover state animations very clean! great job!

    1
  • Yinon Hever•835
    @yinonheverSubmitted almost 4 years ago

    I used Vuex to manage the state of the list items and the dark/light theme. The list in its updated order is also saved into the local storage, so it remains the same after refreshing the browser.

    Solution with Vue.js, Vuex and Sass

    2
    Guy Ezra•615
    @ezraguyPosted almost 4 years ago

    Hey @yinonhever, Great Job! the challenge looks great and I especially love the smooth transitions. I have only 2 suggestions. 1.In mobile mode (600px width breakpoint) maybe make the text a little bit bigger because it's a little bit hard to read. 2.When choosing a different mode of filtering (active, completed) maybe change the "All" option color to white so its clear to the user which filter he is viewing right now. Awesome job!

    1
  • Guy Ezra•615
    @ezraguyPosted about 4 years ago

    hey @Pluffy2217, The site looks great! but I did found 1 thing that can be fixed. the media query that makes the main div become vertical needs to be triggered a little bit sooner. the current media query triggers at 480px but when I resize my screen to around 500px the left and right of the div overflows the screen. other than that everything is perfect. Great Work!

    1
  • Guy Ezra•615
    @ezraguyPosted about 4 years ago

    Hey @ApplePieGiraffe, very responsive and very professional! and the animations make it look even better! Great Work!

    0
  • Hailo•90
    @HailoMYMSubmitted about 4 years ago

    This is my second challenge and I tried to improve the quality of my code using scss and the 7-1 architecture. I also applied BEM naming convention in order to have a better structure for my classes.

    I am still looking the way to have pixel perfect design like many others, even I have access to the sketch file I could not figure it out how to have the right margins/paddings.

    [Junior Dev] Grid Layout | 7-1 SCSS + BEM

    1
    Guy Ezra•615
    @ezraguyPosted about 4 years ago

    Hello HailoMYM, the design looks great! awesome job! but I do have 2 suggestions:

    1. At 959px width the stars start to break so i would add a min-width like this:
    @media only screen and (min-width: 769px)
.rating__star {
    margin-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 120px;
    flex: 1 0 120px;
    min-width: 135px;
}
    1. I loved the way you organized the cards without margins only with align-self but around 880px width their height starts to change because the amount of text in each card is different and they look uneven. if you will remove the align-self for the first and last card at the (min-width: 769px) media query and add a height of 90% to all they will look even.
    1
  • Diarrah•3,418
    @DiarrahSubmitted about 4 years ago

    I always have a hard time navigating to another page via the mobile navbar & the navbar staying open. I had to write some complex code just to re-close it. Any help?

    Thanks!

    All critiques + feedback welcomed.

    Multipage ReactJS

    1
    Guy Ezra•615
    @ezraguyPosted about 4 years ago

    Hello, The site looks great! very responsive. About closing the navbar situation because you are using React maybe a way to close it easily is to make the navbar take its className from the state. so when 1 on of the links is clicked a function will be called that will change the navbar className state and will close it.

    0