Design comparison
Solution retrospective
Hi, I hope you are all doing great.
Here is my order summary card. I tried to do my best :).
While I was doing this exercise I got a problem with padding and margins.
I have read we have to reset the css style. But most of the time I spend it on giving margin and padding again to the elements.
Do we really need to reset those 2 properties? Or what is your best approach with margins and paddings.
Also is the semantic correct in my html?
Any help I will really appreciate it.
Thanks :)
Community feedback
- @kens-visualsPosted about 3 years ago
Hey @CinArb2 👋🏻
I have some suggestions to help you fix the accessibility issue and some other things.
- First, I suggest using
<h2>
or<p>
instead of<h3>
for Annual Plan, because headings in HTML have to increase gradually, such ash1, h2, h3….
. - Next, the music icon, should have
aria-hidden="true”
, because it's for decoration only. You can read more aboutaria-hidden
here. - To answer your question, yes, we do need to reset those two properties and not only those two. I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
I hope this was helpful 👨🏻💻 other than that, you did a great job for your first project. Your code looks semantically correct, and those animations give some life to the project. Cheers 👾
Marked as helpful0@CinArb2Posted about 3 years ago@kens-visuals Thank you so much for taking the time to check the exercise.
The article is really helpful. Helped me to understand a lil bit more about css resets.
And I will study aria labels, it looks important if i really want to understand accessibility.
Thank you so much, :D
0 - First, I suggest using
- @SasaVaticPosted about 3 years ago
Hi Cindy, your solution is on point 👌. From semantic point of view for this simple layout this is not necessary but I will do something like this:
<section class="hero"> -----> section is a wrapper for one or more containers <div class="container"> -----> container is a wrapper for hero section rows and determines width of row element <div class="row"> -----> row is a wrapper for hero section content, on rows we can set display options such as flex, grid; row can be parent for multiple card elements <div class="card"> -----> this is a content element of hero section and parent/wrapper for all card elements <div class="card__header"> -----> this is a div for image </div> <div class="card__content"> -----> this is a wrapper for card content <h3 class="card__heading"></h3> <p class="card__text"></p> <div class="card__order-box"> -----> this is a wrapper for card payment plan content <div class="card__icon"></div> <div class="card__price-box"> <h4 class="card__price-heading"></h4> <span class="card__price"></span> </div> <a href="#" class="card__link"></a> </div> <a href="#" class="btn btn--order"></a> -----> buttons are reusable elements for whole site so in btn class put all styles that are mutual for all buttons and in btn--order and btn--cancel class put all styles that are unique for that particular button <a href="#" class="btn btn--cancel"></a> </div> </div> </div> </div> </section>
0@CinArb2Posted about 3 years agoHi @SasaVatic thank you for your reply. This really look well structured. I will add this article https://a11y-101.com/design/button-vs-link Just to treat "Proceed to Payment" as a button and the rest as links.
1@SasaVaticPosted about 3 years ago@CinArb2 I didn't think much about it. Thanks for the article!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord