Assessment for backgrounds and borders skill tests

MDN Learn
1

Hi,
Do me a favor by assessing my skill test on the topic of : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders.

See my try on :

Any insight you want to give will definitely help me a lot. Thanks.

2

Hi @umarFaruq

Here are my comments:

  • Task 1: You’re missing the dot in front of box h2 (class selector).
  • Task 2: When you remove the background-size and center the text, it looks like the solution image. Any specific reason for the background-size?

Cheerio,
Michael

1 Like
3

Hi @mikoMK,
Sorry for the late reply. I was on holiday.

Thanks for your comments. I fixed and added the dot now. Take a second look if you wish.

I overlooked the instruction of making the heading text centered while creating the task. Now, I’ve added that.

In the context of the specific reason, I was trying to make my part of the image look the same as the task image (where there are three repeated stars on the right, and only one has a little chopped edge on the top right side).

It might sound funny, but I’ve used background-size to achieve that similar look. I’ve commented that right now. What to do? Keep it or not?

Let me know your comments.

4

Ahh, I see. You’re star has a different size. When I tested your solution, I exchanged it with the original, but later forgot to mention it. :sweat_smile:
When you use https://raw.githubusercontent.com/mdn/css-examples/main/learn/tasks/backgrounds/star.png it works without background-size.

5

It didn’t help me, I guess. Please, look at the updated code. Did you mean that?

6

Is the image still cached? It looks exactly like the solution picture for me.
Try CTRL + SHIFT + R while on the CodePen page to reload without cache.

This is how your CodePen looks to me:

2022-07-30_21-25
2022-07-30_21-25668×500 76.2 KB

1 Like
7

Thanks for your time and patience.

1 Like