@SekonsoSubmitted 10 months ago
New in vue, i have a hard time figuring out rendering order, life cycle and managing state to storage.
Any suggestion would be appreciated 🙏
ngdangtu
@ngdangtu-vnAll comments
- @ngdangtu-vnPosted 10 months ago
It would be great if you can reset the scroll position to the top of the page everytime user click on a flag. Just UX opinion :D
0 - @jgreen721Submitted 10 months ago
Fun design. I ended up creating a JSON object for the recipe and added one other item to demonstrate a re-usable template added via Javascript. Put an observer onto the sections for some enhanced UX but got a little convoluted on repetitive tasking with class management to prevent re-application of the observer. Nothing crazy but could probably be cleaned up a bit. Feedback/suggestions welcomed!
@ngdangtu-vnPosted 10 months agoThe appearing animation is nice but there is 1 small bug in the "Preparation time". I think you forgot to add
--delaycss var so the animation was failed to run.The pagination bullet may need a bit guard in js to prevent double click. Visitors don't need the page to re-render right?
And I like your new cover gradient, it looks much better than the shadow 👍
Marked as helpful1 - @CheosphereSubmitted about 2 years ago
...made with a lot of love 🤘🏻🙂
@ngdangtu-vnPosted 10 months agoThis must be the legendary perfect pixel I've been seeking for since the dawn of our goddamn universe! Tell me, the warrior, what did you sacrifice to achieve such a flawless work like this? I must know!
1 - @Nipaaaa1Submitted 10 months ago
Hello! This is my solution for this Challenge!
This is actually a simple challenge. But it makes me realize I didn't know the basics of API that much. On the good side, now I could properly animate something with framer motion. Though I still struggle with layout animation.
If you had a good resources to learn about API (Like YouTube playlist, article, web, or anything!). Kindly share with me and other people who saw this challenge, you're helping a lot of people by doing that.
But still Any Feedback is Appreciated so if you could look at the code and give a feedback, it really helps. Also, if you haven't review other people code or give a feedback before, feel free to use this as a practice.
Anyway, Happy Coding!
@ngdangtu-vnPosted 10 months agoThere is a room to improve in fetching API.When I madly click on the rolling button, it will call the same amount API as much as I clicked. In this case, I think it's ok since API is simple. But it is not a good practice to do it in any production work. To deal with this problem, you can go as simple as I did (prefer my work) or try to apply debouncing method (this is way better than mine).
Marked as helpful0 - @CleshySubmitted 10 months ago
Hey ✌
This challenge was pretty nice. At first I thought maybe something is missing from the mobile design, but then I thought about it and did it as we see it. 😀
The
display: none;and thedisplay: block;rules makes sure to show the Ingredients part of the recipe when the brower width is greater than 700px.Everything else is simple. When I uploaded the files I did a Lighthouse test, and I think I'll resize the omelette picture and do some Squosh too in the future. A WebP format would be great I think.
Here is a link to the Squoosh website. Pretty awesome thing. - Squoosh
I hope you like my solution.
Leave a comment if you think I should change something. ✌
Edit: I've changed the image from JPEG to WebP and my
h1 font-weightwas 700, so I had to change that too. ✅@ngdangtu-vnPosted 10 months agoI don't understand, why do you need to hide Ingredients section? It apears in the mobile design, isn't it?
0 - @MrRobotBDRSubmitted 10 months ago
Thanks.
This was a fun one. HTML & CSS.
Feedback welcome.
@ngdangtu-vnPosted 10 months agoPretty impressive, try to reduce font-weight in instruction section. It'll make your work even better.
Marked as helpful1 - @Mokoena2000Submitted 10 months ago
-What i found difficult at first was adding the CSS and images as my linking was giving me problems eventually i managed to add my image, but still had trouble with adding my CSS externally so i opted to doing it internally.
- Im unsure of my tab as in the example there's an spacing between the columns but in order for me to do the columns correctly i would have to use bootstrap as its the only way im familiar with -Okay so i would love to know how i ca make my websites more responsive and animated
@ngdangtu-vnPosted 10 months agoMaybe this is your first ever project. I can gimme you a tip, try to follow this:
- color the background
- color the main box (white box) & set border-radius on it
- keep add text and background color on other elements
- try to align main box. In this case, auto margin can work just fine
- try to structurize the content into section. Hint, there is at least 1 header, 3 sections & 1 sub section. By doing so, you can organize your css and work faster.
- try to add more padding make it match to the photo (leave the last section for the... very last.)
For the last section (nutrition sect), you can use html table or css grid to make a table. Just play with your imagination.
My code is a bit high level, but you can fire issues to ask me if there is anything you don't know: https://www.frontendmentor.io/solutions/simple-static-site-2h-kuloB9k
1 - @Poppyland937Submitted 10 months ago
The hardest part was make the nutrition table. I wasn't sure how to align it well. I just started learning to code, so it was a fun challenge to see where am at. Any advice on how I can improve?
@ngdangtu-vnPosted 10 months agoYou can use HTML <table/> or CSS grid/flex display to do the last section.
Marked as helpful0
