QR Component Solution with Basic HTML and CSS

What are you most proud of, and what would you do differently next time?

- Proudest Moment

1. How to make simple responsive page and making an element at center of the page. Question: How to differentiate: When we using display: flex and display: grid?
2. Create a readme with markdown format, so the github repository look like expert. :D

- What would I do differently

At the moment, I'm not sure. Could you suggest how this part of questions help me in my future learning?

What challenges did you encounter, and how did you overcome them?

1. Making a text center of the page - Ask for help from AI in process.

2. Making a responsive page - Search for the CSS rule in google.

What specific areas of your project would you like help with?

html, body {
  background-color: rgba(213,225,239,255);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

div {
  text-align: center;
}

img {
  max-width: 100%;  /* Ensures the image will never be wider than the div */
  height: auto;     /* Maintains the aspect ratio of the image */
  display: block;   /* Removes any extra space under the image */
  margin: 0 auto;
  border-radius: 16px;  
}

.card-container {
  padding: 1em;
  border-radius: 16px;
  background-color: hsl(0, 0%, 100%);
  max-width: 50%;
  margin-bottom: 2rem;
}

.card-desc {
  color: hsl(218, 44%, 22%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2 {
  font-size: 18px;
}

p {
  font-size: 15px;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

@media screen and (max-width: 616px) {
  .card-container {
    max-width: 60%;
  }
}

@media screen and (max-width: 416px) {
  .card-container {
    max-width: 65%;
  }
}

Could you suggest my css selector so it will improve in my future project. Such

• Is it better to select by element, class, or id?
• the order of the attribute so it'll can easily read?
• I'm having trouble at font styling the card, because it have bold text and normal text. Could you suggest how the selector can be improve?