All solutions

I found difficult to match the size of each element without the design file.

What is the best practice to center a card container with a max-width? Below is how I always do it.

body {
    display: grid;
    place-content: center;
}

However, when I put a max-width on the container, it always shifts to the left and leave a blank column on the right. Then I have to set margin-left and margin-right to auto to center the container. Any comment will be appreciated. Mahalo.

.visually-hidden was the most difficult part of this project. I am not quite sure how part of the code below works. Any help will be greatly appreciated.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);

  /* Shrink an element into a 1px square */
  width: 1px;
  height: 1px;

  /* Hiding any overflow */
  overflow: hidden;

  /* absolutely positioning the element to remove any trace of it from the normal document flow. */
  position: absolute;

  white-space: nowrap; 
}

The most difficult part of this project is the mix-blend-mode. What is the best practice to code the mix-blend-mode?

I still find difficulty to code the CSS without the design files. Is there any tools/ suggestion to help? How would a professional approach this problem in a real world?

I have been seeing the following CSS reset for image:

img {
    max-width: 100%;
    height: auto;
}

img {
    max-width: 100%;
}

What is the different between the resets with or without height? pros and cons?

Thank yo very much. Any additional comments will be greatly appreciated as always! Mahalo.

I am unsure of the structure and CSS of the inner container that contain the image, text, price, and link.

<div class="card-plan-container">
                    <!-- How would you describe this alt text? -->
                    <img src="images/icon-music.svg" alt="This is a music icon.">
                    <p>
                        <span class="plan-text">Annual Plan</span>
                        <span class="price">$59.99/year</span>
                    </p>
                    <a href="#" class="link-change">Change</a>
                </div>   

Also, how would a professional give a detailed alt to the hero image and music image on this page?

Any additional comment/advice will be greatly appreciated. Mahalo!

I have been having difficulty to determine the size on a component without the design file. Should I pay less attention on this part (the design of the project)? Is this a important skill to have in a real world working environment?

In terms of coding, what is the best practices to code the width and height of a component/container? From my understanding from the last three challenges (QR code, 3 column preview card, single price grid), below would be the best,

''' .container { max-width: rem; height: auto; '''

Thanks for any input, additional advice/comment will be greatly appreciated!

Any comments/advice will be greatly appreciated!

I found difficult to determine the size (width, height) of the container for the card during the challenge. Therefore, I hard coded the size of it. I would love to heard feedback on getting the right size. How can I handle this situation better? I also was not sure if I should use padding or margin.

Any additional comment/advise or related information will be greatly appreciated!