Design comparison
SolutionDesign
Community feedback
- @webdevbynightPosted 2 months ago
My feedback about your solution:
- you should enhance the semantics of your HTML, by using elements such as
main
(to wrap the main content of the page),article
(to wrap the whole recipe content) andsection
(to wrap the section about the preparation, at least); - “Preparation time” is a header and should be, therefore, tagged as a
h2
rather than ab
element; - if you use a table for tabular data, you should be aware of the
th
element and thescope
attribute to make the table more accessible to screen reader users (by the way, the data concerned can be tagged as a definition list, withdl
,dt
anddd
); - beware of
text-indent
: this property only indents the first line, so it is not appropriate forli
elements (usemargin
s orpadding
s instead); - on your reset stylesheet, avoid using pixels for font size, even to reset the default one (here is a video telling why);
- even though you use SCSS, now you can replace Sass variables by custom properties in most cases.
I hope this feedback helps you.
0 - you should enhance the semantics of your HTML, by using elements such as
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