Design comparison
Solution retrospective
I found difficult svg tag. How to adjust it?
Community feedback
- @atmahanaPosted about 1 year ago
Hi there. Good job on finishing the challenge!
For the SVGs, I would suggest you to use the
img
tag for better code readability but it is depends on the context of the project.For this particular challenge, using the inline SVG seems to be no issue. But for the background, I would suggest to use
background-image: url(YOUR_SVG_PATH)
in CSS since we can style the background using other background related properties such asbackground-size
,background-repeat
and more.And other things to improve your solution is by
Reducing unnecessary HTML elements
div > button > a > span
While this structure is valid and can work, you might consider simplifying it to
div > span
. This could lead to a more straightforward and efficient structure, making your code easier to read and maintain.Using semantic HTML elements and CSS class names
- The pricing element's class can be changed from
btn
topricing-plan
or any related name - Element for 'Change' can be a link (
<a>
) tag and thespan
element that wraps it seem unnecessary, maybe removing it is a good idea btn2
class can be named aspayment-btn
and it can be in thebutton
element and you can just write the text instead of havingh2
inside thebutton
elementfooter
class can be changed tocancel-btn
and change it tobutton
element instead of generaldiv
, you also do not need to wrap the text withh4
Read more about semantic HTML here and semantic CSS class names here
Removing the absolute position property in CSS
Remove the
position: absolute
and instead use thedisplay: flex
on the parent elements to lay out the child elements. You can learn more about absolute positioning and when should you use it here.Keep up the great work 💪
Marked as helpful0 - The pricing element's class can be changed from
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