Mobile-First Responsive Solution Using CSS Flexbox

Hello @AlyaaRushdy!

Your solution looks excelent!

I have just one suggestion:

• In order to make your HTML code more semantic, use <h1> for the main title instead of <h3>. Unlike what most people think, it's not just about the size and weight of the text.

📌 The <h1> to <h6> tags are used to define HTML headings.

📌 <h1> defines the most important heading.

📌 <h6> defines the least important heading.

📌 Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

This change has little or not effect at all on the project, but it makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, you did a great job!

Your site looks pretty good. The answer your questions:

• header tags should be used in order from <h1> to <h6> without any skips
• all header tags come with default font sizes which you can change in css using the font-size property

Some other important info regarding header tags

• you should have at most one <h1> tag per page (you can have more than one for the others)
• screen readers will look for the <h1> tag first so its important that you use your <h1> tag for important information (page title that describes page contents)

Hope this helps 👍