Coffeeroaster Multi Page | Next.js , Mobile first

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!!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi, Raymart! 👋
Congratulations on finishing this challenge! Nice work on this challenge! 👏
It looks good on both my mobile and desktop devices. Good job! 🙌
Some feedback:
- I notice that the About Us page doesn't contain any
h1
. I would recommend making the About Us as ah1
. - Usually, the logo is wrapped with a link that will navigate the user to the home page. I would suggest doing that.
- I try your website in
prefers-reduced-motion
and I still see the animation when I scroll and the transition on hover. I would expect that there will be no animation and transition. - I also try to see the site when the JavaScript is disabled and as a result, I only see content in
footer
andheader
. The text content inside themain
element is gone. I would recommend having anoscript
that will tell the user to enable JavaScript.
I hope this helps! Keep up the good work! 👍
Marked as helpful - I notice that the About Us page doesn't contain any
- @mattstuddert
Great to see you post a solution for your first premium challenge, Raymart! ✨
Your project looks fantastic, and I love the extra details like the animations and the sticky header. Great to see you add the
prefers-reduce-motion
query as well for those who prefer not to see animations.I'd recommend reviewing your implementation of the "Create plan" page with keyboard navigation in mind. I couldn't choose individual options as it always focused on the group when tabbing through the content. I could use the arrow keys, but I'd expect to be able to tab through the options easily and select one using space or enter, which I wasn't able to do.
I'd recommend adding the
name
attribute to your radio inputs as well so that they're grouped appropriately.I hope that helps. Keep up the excellent work! 👍
Marked as helpful - @ChamuMutezva
Amazing work Raymart, well done. It maybe an issue with my cellphone, there is a section which is remaining blank when I scroll - will post you the images on slack
Marked as helpful - @denielden
Hi Raymart, you did a great job!
I assign a descriptive name as if it were a class together with the tag that I am going to stylize, for example for a container
div
I call itDivContainer
. Using Styled at the beginning I find it superfluous, once you see the tag followed by the pseudo description you can understand that it is nothing more than a styled component :)What do you think about it?
Hope this help and happy coding!
Marked as helpful - @Sdann26
You have an incredible result, congratulations.
- @imhayatunnabi
nice
- @fayax555
You could prefix with an
S
instead ofStyled
. SoStyledNavbar
will becomeSNavbar
.
Join 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