Responsive landing page using media queries

Hello there!

Congrats on completing the challenge! ✅

Your project looks great!

I have a suggestion about your code that might interest you:

📌 You can use the <picture> tag when you have different versions of the same image.

Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

I hope this helps!

Other than that, excellent work!

First of all for spaces you can use 1rem instead of like 1px which would apply more space at once because 1rem is equal to 16px and this way you can examine different spaces quickly. Also dont forget that you can use an extra one digit decimal with rem like .5rem which is basically 8px to match designs more effeciently.

Also if you want to put your elements perfectly centered inside the body element instead of using position use flexbox in body element. This way you don't have to worry about positioning when using media queries and applying for smaller or bigger devices. This tip is optional but I believe is a better approach. To test this remove the position, top, left and transform from your .main-dev and the media queries and copy following code to your CSS file:

body {
    width: 100%;
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

I wish you good luck my friend.