@LucianoDLima
Posted
Well done on completing this challenge!
A few things I've noticed.
- You used
margin: 5rem 22rem;on.container, I'm guessing you did it to center horizontally? This way causes some problems to your website, for example, I tried to inspect your page on devs tool, and your page immediatly shrinked. A better way of going about it would be to first remove this margin on.container, then you add the following in the <body> tag:
body {
// ...rest of your style
max-width: 40rem;
margin-inline: auto;
}
- Regarding semantic. You used
<ul>list tag 4 times, but there is another tag for lists, theolthat is used for ordered list (when there is an order, as opposed to unnorded (ul)).
The first, second and third ones are correct to use <ul> tag because the order the items appear can be switched. However, the third one - Instructions - needs to be a <ol> list, because the order of the items cannot be switched, they need to be in order.
- About the bullet points you mentioned, there is a css property called
list-style-positionand if you set it toinside, it makes what you want it to. Also make sure to addlist-style: decimalso your bullet points become numbers. The way you did ends up overcomplicating a bit and is not really necessary, I'd recommend delete the :before selector you used to make the bullets, and use the native css properties instead.
Again, well done on completing this challenge and hope you keep on coding!
Marked as helpful
@rowanDeveloper
Posted
Hi @LucianoDLima! I appreciate your advice! I already updated the styles on the <body> tag. You are correct. That approach is way better than manually adding the margins on the .container div.
Also, regarding the Instructions decimal bullets points, I think there is no way around it without declaring it as a :before pseudo-element. That is because:
-
The list-style: decimal is a different style that it's on the design. The most eye-seeing difference is how the "1" decimal bullet point are different.
-
Without using the :before property, you are unable (at least in my case) to define the color property only for the bullets numbers. Withou it, you <li> item kinda of "inheret" the color property instead of only been applied to the number bullet.
Well, that was at least my case.
Anyhow: thanks a lot for the advice
