Responsive testimonial website

Community feedback

• 

  Miguel Gomez•110

  @MikeProducePosted about 2 years ago

  I've been waiting for someone to comment on the position: absolute parts of my projects! I did not really know if that was the right thing to do or not but thank you for giving me more direction and clarifying that. I think the next challenge ill do I will focus on using flexbox/grid. I will definitely look over your code and follow your tips! thanks again on your amazing detailed feedback!

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Miguel, great job completing this! Everything works as it should, and you also did well in hooking up the arrow keys to the buttons. As you mentioned, mobile-first is really the way to go, and I haven't met anyone who says otherwise.

  I think the main thing to work on here is the positioning and responsiveness. I also found the positioning tricky, but the trickiest part for me was how to position things while making them all look good with one another and at different screen widths. I can see that mostly everything here is positioned using position: absolute and also with padding/margin. Doing that would cause the elements to be fixed to one location, and it also means the page only looks optimal at certain screen widths. In general, you'd want to only use position: absolute for certain elements that need to be fixed in relation to another bigger element, like the two button arrow keys.

  In my solution, I used mostly flexbox for position and width: min() for the responsiveness. You can have a look at what I did in my solution here: https://www.frontendmentor.io/solutions/responsive-image-slidercarousel-built-with-scss-and-plain-js-aTsBq6SGAo

  A few other suggestions for you:

  1. Instead of using keycode (which is being depreciated), you can just use event.key.
  2. You can try a higher breakpoint because right now all the content to the right is covered by the browser once the layout changes. Not only that, at around the 500px breakpoint there's overlapping going on with the text, so you may want to see what's going on there.
  3. You can add cursor: pointer to the buttons, as you'd always want to have a pointer for interactive elements to create a better user experience.

  I think once you get more practice with using flexbox and grid, you should try this challenge again, and definitely always do a mobile-first approach! I highly suggest checking Kevin Powell's tutorials on YouTube as he's got a few where he does a Frontend Mentor challenge. Those are worth watching because you see his planning process and also how he structures the HTML and CSS along the way. Anyway, good luck, and keep going! 😊

  0