This was one of my longest challenges, i tried to do it all on my own. Mostly i struggled on sending props from one component to other. But anyways, i learned to fetch data, from local json in this case, communicate through components, little bit of typescript...
I am little bit unsure of my components folders layout and i am not sure if i used best practive for scss files layout. (should i use module.scss ?)
Thanks for feedback!
When working on a small view port, how do you make sure your site will display the same way on a larger view port?
Hello @Voqh,
Media queries are commonly used to code your site on larger viewport. here are two good articles about your question:
I didn't know how to make the :hover with the top image, but otherwise it was pretty simple.
Still taking advices of course, I'm a begginer and want to improve :)
Hello @WildTsunami, look at my solution how i have done it. I started with the variable cyan color and changed its opacity to 50%. (:root section).
One more suggestion:
If you have any questions and don´t understand something from my code, feel free to ask!
I Completed the Frontend Mentor | Order summary card challenge, if you have any suggestion please suggest.
Hello @SachinShelke7, my few suggestions:
How would you rate my use of Html tags and naming of css classes?
Do you think my SCSS files are structured properly?
Any general tips?
Hello @Kokopelli84, i have some suggestions. Accessibility issues:
Any feedbacks on webpage are welcome :)
Hello @Aryan-ki-codepanti, my few suggestions:
Anyways good job!
Used CSS Grid for layout. Added Animations. Used Font Awesome CDN for Icons. vw unit along with max() function for responsiveness. Do give some feedback :)
Great job! Nice responsiveness and animations!
The cancel order anchor tag doesn't take padding or margin. how should I have handled that better ?? Any suggestions or help will be much appreciated
Hello @CEC-IL,
you have to change anchor element from inline to display: block/inline-block.
Then you can use margin and padding.
Also you should only use <a> element without <button> element.
Another accessibility issues can be fixed like this:
<main> element. E.g. instead of <div class="content"> use <main class="content">.Hope this helps a bit :)
Any feedback appreciated
Hello @Katja721, few suggestions from me:
Hope this will help you on your next challenges!
I dont really understand diffrence between padding and margin, so i use them both. Is there any specific use cases? thank you for answering from now💖💖👍
Hello @mustafaalkhiat, padding is the space between the content and the border, whereas margin is the space outside the border. Recommended aritcle about it here.
Hello everyone! This is my first ever self-made project. I'm pretty new to the coding field and this was my first time coding something myself. I was following the tutorial before but not this time. Is there anything specific you would love to see? Please give any feedback you have. Hugely appreciate it.
Hello @Roshan310, accessibility issues can be fixed by:
If there was a more elegant way to achieve the grid layout than using my grid shorthand + grid-area declarations, please let me know - I would love to see alternatives!
Also any feedback on my class names is much appreciated too.
Hello @ruuendigital, i have done it like this E.g.:
@media screen and ( min-width:1300px ) {
.cards-wrapper {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
}
#card-supervisor {
grid-row: 2 / 4;
}
#card-team_builder {
grid-area: 1 / 2 / 3 / 3;
}
#card-karma {
grid-area: 3 / 2 / 5 / 3;
}
#card-calculator {
grid-area: 2 / 3 / 4 / 4;
}
}
My solution link.