No particular pride.
What challenges did you encounter, and how did you overcome them?No specific challenges.
What specific areas of your project would you like help with?No particular help requested.
Okay, so I will be brief because it does look pretty spot-on.
One little thing is I think it is it is pretty logical to have your h1 header wrapped in between header tags and then go on with your main part.
Also, the use of the details tag is a really nice touch, but from my understanding it is supposed to be used only for the part that can be opened and closed. I think only your answer should be in it.
Then, following up on this, your summary tag is supposed to be sort of a header for your details tag now you have got it wrapped inside your details tag.
Again, really good job everything works as intended. Keep up !
First time added data-rating to the HTML.
What challenges did you encounter, and how did you overcome them?Learning about data-rating and implementing it to JS.
What specific areas of your project would you like help with?more efficient ways to improve the javascript.
So first, I think you know there is a few thing that are off with the design, so I won't go in-depth for these.
I am not a fan of having a boilerPlate.scss file. This project is small so it is not too bad, but on a bigger project, it would become a nightmare for someone trying to understand your styles. Plus, bigger projects will definitely have spome shared tags having completely different designs.
If you want to avoid repetition using sass you should look into mixins instead.
You have asked how to make the javascript better. Personally, I rarely use vanilla javascript for web development anymore, but I don't see anything wrong with what you did.
I like the querySelectorAll to make an array out of all the rating__number classes.
Of course, if you are serious about front-end engineering, you should consider looking into react.js pretty quickly, as it's pretty much a requirement for any job out there.
Overall good job, keep up !
I tried to make it as close to the design provided as possible but i don't know the initial scale(
What challenges did you encounter, and how did you overcome them?Mobile design
What specific areas of your project would you like help with?I made mobile design, added media queries where needed but it doesn't seem to work on phone. I didn't understand why
Ok, I will try to be as exhaustive as I can on this one.
Obviously the first thing that is glaring to me is that your recipe card is way smaller than it should. You have made it so it fits all into the screen, wich was not how it was supposed to be.
In fact, I will say that trying to make a page being fully visible without scrolling is not good practice, as it can become an absolute nightmare on multiple pages projects and with different screen sizes.
Second thing I see you have used a <header> tag in your html. This is good, but you also imperatively need a <main> tag. Personally, I would have closed the <header> tag right after the recipe description and started the <main> tag right after.
Eventually you should take a more in-depth look at semantics and how to use all the good tags, but I would say that having a main one would be a really good start.
third thing As we can see, your image is "separated" from the rest of the card. The reason for this is because you have set a background-color for both your the img-container and the center-container. In your case the easiest thing to do would have been to apply the background-color only once to your header tag.
However, as said previously, having a header tag without any main tag is not semantically correct, so in the case where you would have your header and your main section, wrapping the two of these in a "wrapper" div, and then applying the background-color to that div would have been a good solution.
Fourth thing I don't know if you have corrected thing in the mean time, but your mobile version looks pretty close to me. You said you had issue with your media query, I did notice that your image would not change to a border-radius of 0, even though you were clearly trying to do so.
I am pretty sure I have found the issue. When I inspect your page, I can see that your media query is applying to your container but not your img itself.
I am sure this would be fixed if your img would be nested in its parent container in CSS. You tried to have your global section in your CSS, there could be some use cases for this, but it should not be used to apply specific changes on one element. Your intentions should always be as clear as possible. In that first img selector you are not applying general rules for all img, so that img selector should be nested in its parent container, so we know exactly what you are doing.
In your case it is also mainly to avoid issue with CSS who will deem what is at the bottom as more important at equal specificity, wich I am sure is what causing your border-radius to not change with your media-query.
Overall, you are on the right path, keep up
I defined semantic color tokens in Tailwind CSS, to adhere to the convention set in the Figma design File.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Ok so first, functionnality wise, this is really close to perfect. Everything is working as intended.
Now obviously there is quite a few design details that are not looking close enough to the given design.
It is a pretty big project so I imagine what happened is that you focused on the functionnalities and might not have had the motivation to fix the little issues afterwards.
I can totally understand that because I felt like that on mulitple occasions doing this project, but I will tel you that you should still take the time to correct these little details.
If you feel tired with the project, take a break of this one for the rest of the day and come back the next day with a fresh head, it is what I did more than once with this one.
I would say the only thing that is actually bothering for usability is the fact that your selected choice stays selected after changing question.
Also, maybe the score tile that is plain white on plain white makes it lookt weird.
Overall, good job, keep up !
Honestly not much to say, it looks good. I would have liked to dig deeper in your code, but I am not used enough to vanilla javascript for web development.
I won't dig too deep in this one simply because, your react/javascript looks really good to me.
I like the way you have handled the active tip selection. Only thing I could say is the reset button doesn't set the custom to either zero or it's initial "custom".
Apart from this there is obviously some little designs mistakes, but I think you know how to fix these if needed.
The responsiveness is fine, deifnitely functionnal, but I would recommend you to take a look at the clamp porperty while setting your width. I use it to set my preferred width in vw (Knowing the desktop width they use is 1440, I will take the width of the container and convert it in vw).
With clamp you can also set a min value you don't want it to go lower then and a max value you don't want to go higher than. So let's say my preferred value is 60vw but I don't want it to go lower than 550px and not bigger than 1200xp. It will look like this: clamp(550px, 60vw, 1200px). For me this was a game changer, hope it can help you.
Also consider slowly but surely looking for another way of structuring your css. I would suggest either going for modules.css, wich won't take you too long to understand and do a really good job or if you are willing to put just a little more time, maybe look at SASS/SCSS.
Overall good job, keep up !
