Mobile friendly solution with HTML, CSS and flexbox

The id attribute is used to uniquely identify an element on a page. Each id value must be unique within the entire page. This is useful for adding functionality to specific elements using JavaScript or CSS. For example, you might use an id attribute to target a specific element with a particular style or behavior, or to create anchor links that navigate to specific sections of the page.

On the other hand, the class attribute is used to group together elements with similar characteristics. Multiple elements can share the same class value, and the class attribute can be used to apply a style or behavior to all elements that share the same class. For example, you might use a class attribute to apply a common style to all elements of a certain type, or to group together elements that should have a similar behavior.

In general, you should use the id attribute when you need to uniquely identify a specific element on a page, and the class attribute when you want to group together multiple elements with similar characteristics. By using these attributes appropriately, you can create well-organized and maintainable HTML code that is easy to style and manipulate using CSS and JavaScript.

Is it better practice to use semantic elements instead of divs?

100% it is better to use Semantic HTML for many reasons such as Web Accessibility, better SEO Performance, Easier Development and Maintenance due to better HTML Structure.

There are tons of articles about that, but here is a nice one: https://uxdesign.cc/semantic-html-the-foundation-of-web-accessibility-e5bbecad7c17

Take a look at the comparison of images of the difference in structure between a semantically structured web page and non-semantically structured web page. This is the difference it makes.

IDs are unique and CSS Classes can be used many times, you don't need to select each element only once and specifically. IDs are used in CSS Styling very rarely, mostly when JS is involved. Use classes for reusability.

Hope you find this feedback helpful!

Hey!

-id in HTML shouldn't be repeated, they should be unique. They are also more specific than classes in CSS. Classes also allow for reusability, which is much more noticeable on large-scale products. Where you are using id in this product, you would be fine using class.

Here's a great article for specificity, which would influence what you use: MDN Specificity

-As for semantic elements - yes! You should use semantic elements wherever possible. You're definitely on the right track with semantics.

Docs for semantic elements: MDN Semantics

The MDN docs that I have linked are great resources for learning more on anything web development. I would take a look at the accessibility report and see if you can fix those. Overall, it looks great! Keep up the good work 🎉