All solutions

Hello frontend friends! 👋

This was long overdue but I finally completed my 4th challenge on Frontend Mentor. 🎉 I have been learning React since the beginning of 2022 and this project was a great opportunity for me to put what I've learnt into practice. Check my readme.md for more details.

Major challenge(s):

• I decided to use React with Typescript and I had some difficulties in getting the right types for components props.
• I really wanted to get the real development experience so I added unit tests for the components and end-to-end tests for the order scenarios.
• I have yet to add unit test for the custom hook.
• I still have to figure out how to set the redirection properly for a React application on Netlify.

Bonus:

• I added some form feedback if the user tries to create a plan without selecting any options.
• I added a skeleton preloader while the page content loads. I always wanted to implement such a feature and therefore I tried to come up with a solution for that using React.

It took me quite a while to complete this challenge because I was going back and forth in the React documentation and best practices. I really enjoyed that and I'm also happy with the result.

Your feedback would be much appreciated.

Thanks in advance. 🙏

Hello frontend friends! 👋

I'm glad to have completed my 3rd challenge on Frontend Mentor. 🎉 On this project, I wanted to give a try to the CUBE CSS methodology to author my CSS. Check my readme.md for more details.

Major challenge(s):

• I have been using the BEM methodology for a very long time and as I looked at the design file of this project, I instinctively think in terms of blocks as this is the core of the methodology. When switching to CUBE CSS, I had to train myself to think differently so that I could compose the overall layout with utility classes. It felt a bit awkward 🤨 at the beginning.
• The fact that the images are part of the content but are offset to the edge of the page gave me some headaches. 🤪 I would be grateful if anyone could suggest a different way of achieving this.

Your feedback would be much appreciated. If you have some experience with CUBE CSS, please let me know what I can improve here.

Thanks in advance. 🙏

Hello frontend friends! 👋

This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. 🎉 This project was an opportunity for me to test new approaches on the way I write my CSS.

Major challenge(s):

• I started using Sass maps with @each rules to generate helper classes easily. It is not perfect but I think is a good start.
• I started using custom CSS properties to better organise my CSS and reduce repetition.
• Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the minmax() function with the grid-template-columns and grid-template-rows properties.

Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.

Thanks in advance. 🙏

Hello there!

This is my 1st challenge on Frontend Mentor and I really enjoyed it. I am pretty much satisfied with the final result.

Major challenge(s):

• The custom-styled select was a bit challenging. I used a list of radio button inputs to mimic the list of options and wired that with JavaScript to handle the events. While I this was a great opportunity to practice my JS skills, I still wonder if some of you have found a simpler approach for this feature.

Unsure of:

• When I validated the compiled css, I noticed that some of my sass variables went being output as well. I'm not sure if there is an issue with my breakpoint mixin or if it is because I recently switched from @import to @forward and @use in my .scss files. I'd be grateful if you could point out what I'm doing wrong here.
• The accessibility validation notified me of 3 contrast errors, I chose to ignore them and stick to the design. Would you have done same ?

Bonus features:

• The signup form shakes to display the invalid state and flips to display a success message when valid.
• I added some animations using GSAP and the ScrollTrigger plugin.

Your feedback would be much appreciated.

Thanks in advance. 🙏