Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Guy Ezra• 615

    @ezraguy

    Posted

    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-b

    Submitted

    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

    @ezraguy

    Posted

    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

    @ezraguy

    Posted

    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

    @ezraguy

    Posted

    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

    @ezraguy

    Posted

    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
  • T
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    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

    @ezraguy

    Posted

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

    1
  • P
    tediko• 6,680

    @tediko

    Submitted

    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

    @ezraguy

    Posted

    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

    @yinonhever

    Submitted

    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

    @ezraguy

    Posted

    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

    @ezraguy

    Posted

    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

    @ezraguy

    Posted

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

    0
  • Hailo• 90

    @HailoMYM

    Submitted

    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

    @ezraguy

    Posted

    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

    @Diarrah

    Submitted

    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

    @ezraguy

    Posted

    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