i understand how to use px, %, vw, vh, em, rem
What challenges did you encounter, and how did you overcome them?Before using CSS, it was a bit difficult, but as I got used to it, it became fine.
What specific areas of your project would you like help with?I’m curious how others accurately measure and implement sizes.
About those accurate measurements, I don't know if you are already using it, but the only way to get precise details about the styling of the challenge is through the figma file provided in the challenge's page. Just donwload it and open it in Figma. There you can find all you need: sizes, positions, typography, visual effects, etc.
i learned many things from this page and spent hours searching for solutions for each problem i encounter
What challenges did you encounter, and how did you overcome them?the table is a new element for me, and i learned about it the hard way;), but not gonna lie i had a fun time doing this!
What specific areas of your project would you like help with?the space between the markers of both types of lists(ordered &unordered) and list items, like how do i control this space and what determines it.
When using markers on list elements, you can create space between the marker and the list item's contents simply by using paddings on the list item. For example, try setting padding-left: 1rem; on the list item and it should work just fine.
Struggled with the background SVG, the cover fit would crop it at full size. Threw in the towel after multiple tries.
About your struggle with the SVG background, since those images are not an essential part of the content of the page, but just a visual background effect, you can implement them fully with CSS. It is easier as well!
Delete that <div class="background-images"> and the associated styles and add this to your stylesheet:
body {
background-image:
url("./images/pattern-background-desktop.svg");
background-size: 100%;
background-repeat: no-repeat;
background-color: var(--pale-blue);
@media (max-width: 450px) {
background-image:
url("./images/pattern-background-mobile.svg");
}
}
In CSS, backgrounds can also be images and consist of multiple layers of them, so you can add multiple images as the background and one color to be painted below the images. You can read about it in the MDN reference about the background property and its longhands.