All solutions

Hi, This challenge is all about details (e.g. background images, modal dropdown drawer background gradient, carousel, simplify-section background image). I tried to catch as many details as I could. I chose to use a carousel in testimonials-section for all screen sizes. It's a responsive layout. Feedback is greatly appreciated! Thank you!

Hi, This challenge has been the most difficult and most worked solution I have completed so far on Frontend Mentor. I had to redo a few times my responsive design implementation. I had a lot of overflow issues that I could not identify. I had to change a little the design for the header menu and the mobile dropdown drawer, which actually is a tabs menu. Overall it has been a fun project. Feedback is welcome. Thank you!

Hi, I found it difficult to make the first image in the hero block responsive. I used clip-path CSS property to make the image resemble the template. I had some problems making the images resize and keep the aspect ratio. Overall this project was about image processing. I've also done for the first time a mobile modal dropdown drawer with the header still accessible. I think I hit a limit with the number of projects I can deploy for free on Vercel. I'll try deployment on Heroku next. Thank you!

Hi, The hardest part was making the images responsive and still resemble the design template for all screen sizes. Your feedback is always highly appreciated. Thank you!

Hi, I found this challenge the hardest so far. I'm not sure I've used the best approach when detecting a click event outside the cart dropdown component. I had to use a dummy class throughout all the elements in the cart dropdown, due to JSS class naming generator. The questionable approach is in this file: cart-dropdown.js. Please send me a feedback if there is a better approach. Thank you!

Hi, This solution is developed in NextJS with Material-UI and JSS for CSS. In order to persist the list of shortened links I used cookies. The cookies will expire after 5 minutes. I integrated the external API (i.e. https://app.shrtco.de/) using an API routing in NextJS, so this solution uses both server side rendering and client side rendering. Using Material-UI JSS is challenging. JSS has advantages and disadvantages. Maybe I should explore Tailwind CSS as an alternative. Any feedback is welcome! Thank you!

Hi, Please let me know if something in wrong in my solution. This youtube video helped me to better design the layout and the mechanics behind the countdown timer: https://www.youtube.com/watch?v=p_6IuhmBsfc&t=1238s Thank you!

Hi, I developed this app using NextJS and Material-UI. I used themes and JSS/TSS for CSS. I got stuck on some issues when developing this. For the first two I found solutions. The last one is unsolved.

1. When implementing JSS/TSS I stumbled on this error: In order to get SSR working with tss-react you need to explicitly provide an Emotion cache. MUI users be aware: This is not an error strictly related to tss-react, with or without tss-react, MUI needs an Emotion cache to be provided for SSR to work. Here is the MUI documentation related to SSR setup: https://mui.com/material-ui/guides/server-rendering/ TSS provides helper that makes the process of setting up SSR easier: https://docs.tss-react.dev/ssr
2. When I serialized some synchronous methods on a string (e.g. split, join) and then applying an asynchronous filter on the resulted array, I was getting this error: Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
3. I don’t know how to override some default behavior in MaterialUI theme classes (i.e. when clicking the div element, it blinks light blue. It should blink with a lighter palette color from the theme). Thank you!

Hi, I'm not sure if html input patterns work inside JSX (i.e. the phone number pattern doesn't seem to work all the time). Also I don't know how to use drop-shadow in CSS (e.g. if I set a drop-shadow on a form it will drops shadows on all html controls but not on the form itself). I had to use box-shadow to make the forms as close as possible to the templates (i.e. box-shadow has a small border all around and I don't know how to get rid of the borders). Thank you!

Hi, I'm not sure I've done a decent job with my implementation of hamburger menu. If there is a better way of doing it please let me know. Thank you!