@MelvinAguilar
Posted
Hi @berta-rf π, good job completing this challenge, and welcome to the Frontend Mentor Community! π
I have some suggestions you might consider to improve your code:
- Use the
<main>
tag to wrap all the main content in your solution.
- Use
<footer>
instead of<div class="attribution">
. The<footer>
element contains authorship information.
- Since the images do not contribute anything to the content, and only serve as decoration, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty:
<img src="./images/illustration-hero.svg" class="card-img-top" alt aria-hidden="true">
- In my opinion, the "Change" element should be a button, not a link, since it should perform an action, which is to change the plan and show the new plan's price. Use buttons to perform actions such as displaying a modal, performing calculations. Use anchor tags to redirect users to a part of the page or to an external site.
- Always avoid skipping heading levels; Always start from
<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the<h5>
tag with<h1>
.
Please don't worry if your suggestions are long, they are just details. In the end, the project is well done π. Hope you find those tips helpful! π
Good job, and happy coding! π
Marked as helpful
@berta-rf
Posted
Hi @MelvinAguilar! πI now got my <main> and <footer> elements on, I made "Change" a button, and I have also updated the img for accessibility. 3 days ago I didn't even know what Bootstrap was π«£ so I really appreciate all feedback! Thank you so much for your help!