New in vue, i have a hard time figuring out rendering order, life cycle and managing state to storage.
Any suggestion would be appreciated 🙏
New in vue, i have a hard time figuring out rendering order, life cycle and managing state to storage.
Any suggestion would be appreciated 🙏
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
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!
The appearing animation is nice but there is 1 small bug in the "Preparation time". I think you forgot to add --delay
css 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 👍
...made with a lot of love 🤘🏻🙂
This 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!
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!
There 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).
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 the display: 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-weight
was 700, so I had to change that too. ✅
I don't understand, why do you need to hide Ingredients section? It apears in the mobile design, isn't it?
Thanks.
This was a fun one. HTML & CSS.
Feedback welcome.
Pretty impressive, try to reduce font-weight in instruction section. It'll make your work even better.
-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.
Maybe this is your first ever project. I can gimme you a tip, try to follow this:
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
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?
You can use HTML <table/> or CSS grid/flex display to do the last section.