Basic HTML mark-ups, CSS flexbox and media-queries

Hi Ridwan10000

Having gone through your project, here is my observation

HTML

• find out more about landmark elements, which are very important in the structural organisation of your site. For this challenge , I would include the main element as it identifies the primary content of the webpage.
• the alt value of an image element should exclude some words such as image, picture, logo etc as these are automatically implied and will cause a repetition of words when using a screen reader

CSS

• you will need to reset your styles using a modern reset stylesheet
• this challenge does not need a lot of media queries , infact you can do it without any media queries. Instead of the explicit width on the container width: 350px; , use max-width - it allows your component to scale . Also for sizes , use rems in most cases instead of px

Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

• Using margin and/or padding isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

I hope you find this helpful!

Keep up the excellent work!