Design comparison
Solution retrospective
could not build two color heading
Community feedback
- @vanzasetiaPosted about 2 years ago
Hey, Ramesh! 👋
To create the color effect for the heading, I recommend reading the "Reverse Text Color Based on Background Color Automatically in CSS | CSS-Tricks" article.
But, there are a lot of things that need to get fixed.
- Anchor tag can't be a child element of a
button
element (and vice versa). Choose, whether it is a button or a link. - For your information, anchor tags are for navigation, while the
button
elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements. - Why does the site have two
h1
elements? - Why is there a
:hover
effect on the.hero-img-div
? It's not an interactive element. - All page content should live inside the
main
landmark except thefooter
. - Don't use
aside
! All of them (except thefooter
) are the main content of the page. So, it should live inside themain
landmark. I recommend learning more about HTML landmark elements. - I recommend making the images of the gallery on the HTML. Use
picture
element to control which image should be used based on the media condition.
There are more things to be fixed but, most of them are fundamental issues. So, I recommend learning about web accessibility. Then, refactor the HTML first before the styling. A11Y Project website is a good site to learn more about web accessibility.
For example, if you want to learn more about heading tags and how to use them correctly, I recommend reading the Accessible heading structure" article from the A11Y Project website.
Hope this helps!
Marked as helpful0@rameshkmunjalPosted about 2 years ago@vanzasetia A ton of thanks. I badly needed such kind of guidance- main motive to join this platform. I surely correct and learn in view of all above. Thanks again , please keep on providing help.
1 - Anchor tag can't be a child element of a
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