
Coffeeroaster Multi Page | Next.js , Mobile first
Design comparison
Solution retrospective
Hello. This is my 24th challenge here and my first premium challenge taken^^
This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>
I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!
This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.
I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!
Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!
(The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)
Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord