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
Log in with GitHub
OverviewSolutions10Comments19

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
  • P
    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,530

    @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
  • Guy Ezraā€¢ 615

    @ezraguy

    Posted

    Hello bwhitney2439 , the design looks great! but it seems that the navigation bar does not work on the mobile view.

    0
  • Guy Ezraā€¢ 615

    @ezraguy

    Posted

    Hey Jade, Awesome work it looks great! But I do have 1 suggestion. In the media query (min-width: 64em) I would set the margin-top of the second card to 0. Because when there are only 2 cards in a row it looks the second card is misplaced. It will make the cards look more organized.

    @media (min-width: 64em)
.reviews_container:nth-child(2) {
    margin-top: 0;
}

    Great Work!

    1
  • Svenā€¢ 295

    @Sven72

    Submitted

    While coding this challenge, I found a video by Kevin Powell about aimating gradients ā€“Ā which fits perfectly to this challenge. It's applied at .load-used. I had issues to center the boxes in te desktop view. I applied flex-basis, so that both boxes are on one line. But the align-items: center does not work anymore. I solved this with adding a padding-top: 25% ā€“Ā but this does not feel good. :)

    Status bar animated with keyFrame

    1

    Guy Ezraā€¢ 615

    @ezraguy

    Posted

    Hello Sven, the site looks great and I really like the animated gradients. About the centering for the main div I think all u need to change in the flex-container class is removing these 2 lines:

        padding-top: 25%; 
     align-items: baseline;
    0
  • Michelleā€¢ 415

    @michelleracho

    Submitted

    I would appreciate any feedback especially with tips on how I can improve my SCSS! Thank you in advance :D

    HTML, CSS/SCSS

    2

    Guy Ezraā€¢ 615

    @ezraguy

    Posted

    Looks great!

    0
  • Guy Ezraā€¢ 615

    @ezraguy

    Posted

    Looks good! , I would change 2 things...

    1. I would change the media query to a @media screen and (max-width: 700px) because as of now elements break on around 615px width like the "poster-name" and "poster-date".

    2. I would add overflow-x: hidden to the body CSS to prevent the horizontal scroll.

    2
  • Alex Mollison-Ballā€¢ 10

    @AlexHBall

    Submitted

    Wasn't sure how to get the excellent on one line, played around with the font settings for 15 mins but couldn't get it.

    Mobile first

    1

    Guy Ezraā€¢ 615

    @ezraguy

    Posted

    looks good! about the "excellent on one line" issue try removing the br tag you have there.

    0
  • Guy Ezraā€¢ 615

    @ezraguy

    Posted

    Looks great!

    0