@nandha126
Submitted
@ahmedsomaa
@nandha126
Submitted
@ahmedsomaa
Posted
Hey, amazing job. Congrats on completing this challenge!
A few tips!
HTML:
<figure/>
as a container for the <img/>
.<section/>
element and give each one a unique id instead of using a <div/>
, this would give it a better semantic meaning. Example of sections could be Ingredients, Instructions...etc.CSS:
@import
statement like this
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Young+Serif&display=swap");
font-size: 16px
for the whole document and then use rem
for any other font-size like <h1/>
, <h2/>
. Also, your document's font size is set to 11px
which way too small, make it 16px
or 14px
at least.stone-600
as this is much closer to the design that the one's you used.list-style
of the Ingredients to square
at least that's how I see it. It's too small.line-height: 1.5
or margin-top
& margin-bottom
for list items as this looks bigger in the design.@Cristal32
Submitted
@ahmedsomaa
Posted
First, I want to commend you on the clear structure and use of essential HTML elements. The layout is straightforward, and it’s great to see you’ve included meta tags for viewport settings and a favicon. Here’s some feedback to further enhance your work:
<img>
for the user's avatar instead of the background-image
as this improves accessibility and SEO by allowing descriptive alt text and better semantic meaning, whereas background-image does not support these features.alt
text for images or add descriptive aria-label
to interactive elements for screen readers.<button>
or <a>
tags for interactive elements instead of div
with title
attributes.container
class since it's referenced in HTML but not styled in CSS.Your CSS demonstrates a good understanding of layout and styling principles. The use of Google Fonts and consistent color schemes is commendable. Here’s how you can refine your work:
.container
class or remove it if not used..social-link
to match the design specification (hsl(75, 94%, 57%)
).:root
or using @property
.Marked as helpful
@bobyanov
Submitted
@ahmedsomaa
Posted
Great Job! I like that you did the whole challenge using the CSS selectors and neither using Flexbox nor Grid.
A couple of things to consider here:
@G-Gakii
Submitted
What are you most proud of, and what would you do differently next time?
I was able to build a responsive website using media queries
What challenges did you encounter, and how did you overcome them?
The main challenge was making the website responsive
@ahmedsomaa
Posted
The HTML provided is mostly semantic, using a div for the container and including appropriate elements like h2 and p for headings and paragraphs. However, it could be improved by using more descriptive tags. For example, wrapping the entire content in a <main>
tag could enhance the semantic structure of the document. You could also add a more descriptive alternate text to the image such as "QR code for Frontend Mentor website."
Marked as helpful