Hello,
Please have a look at the code and share your views. It will help to improve better.
Hello,
Please have a look at the code and share your views. It will help to improve better.
Hey. Good work. Seems like it working. Sorry if I am wrong but, if you are a beginner, I would suggest you to try easier ones where you will learn from basics to above.
The Odin Project is a good curriculum. Try to follow it. π
Loved your code organisation. Forked it for future referenceπ
Hello, everyone. I have completed this challenge. But I still have some doubts. And here they are:
As a fellow BEM enjoyer, I approve of your css solution.
Seems like you are new, I would recommend taking your time on solution and not rush them. FrontendMentor has a great sorting method, so take problems which are easier one at time and take good amount of time analysing your design. In the beginning, I was rushing through them and got stuck, so take your time and enjoy the Learning journeyππ
This is my first JS project. It was quite a challenge for me but it seems to work well. Any feedback will be appreciated !
Hi there, congrats on completing the solution. The first time is always hard.
Few recommendations if you won't mind:
Try them one at a time if you have time, and re evaluate your solution. Everyone learns one step at a time
Suggestions and improvements are really welcomed and please let me know if media queries are working fine because on the laptop it's working fine but if there is some error then let me know, please.
Hi there. Congrats on completing the solution.
It seems like you have made a mistake while importing the font families. Instead of giving you some advice, which might seem complex, you should go through solutions submitted by me and others for this problem and use the devtools to inspect. It would great learning experience. Hope you have a good day.
Any suggestions and feedbacks are highly appreciated. Thank you π
To get a staggered effect on cards instead of using margin and breaking some flow try using grid and its grid-row and grid-column property. I learnt it from Kevin Powell, but I can't find the video. You can check out my solution and if you are not able to understand, try looking for the solutions online.
Other than that, awesome solution.ππ
[Edit] Looked at your previous solutions. You already know how to do that, so try to make it using grid!
Deceptively tricky, the font Overpass has padding underneath its descender, so whenever you vertically center it looks off. Took a while to discover this. Had problems with the star I should investigate, it also would not center, but it harder to inspect as I made it a pseudo. My stamina to un-pseudo it and look waned as I really did spend ages puzzling over the font alignment. Anyway, padded everything to victory.
Hi there. Congrats on completing the challenge. Your stylesheets is very clean and concise.
Everything looks good. So, I would advise you to explore forms. As we are rating something, it brings the opportunity to use radio input which in turn comes with form and its submit actions. Semantically, it would be better to use a form and a radio group.
Instead of using display : none
, you can use visibility : hidden
which wont cause reflow of DOM. But that is not a major issue, but I prefer it that way. You can look up regarding this concern. But overall, great job!! π
I had a lot of difficulty centering it for all screen sizes.
There are 3 common ways to center and 1 additional way which is not advised to use anymore because some of the new properties
max-width
or a fluid width on a container thats wraps you content and setting the margin: [vertical-margin] auto
or margin-inline : auto
. This should center it horizontally<main> <div class="container"> <div class="content-box">Content</div> </div> </main>
.container{ max-width : 20rem; margin-inline : auto; }
.center-content{ display:grid; place-content:center; }
.center-content{ display:flex; justify-content:center; align-items:center; }
You can look up resources on MDN and W3school for easier understanding