nft-preview-card-component-main

Hi Cas, those are great questions you asked, and I'll try to answer some of these:

About centering a component:

It's best to use either flexbox or grid, and not to use position absolute, which can be difficult to use for beginners if you want to make the component responsive as well. I would say absolute positioning should always be a last resort unless you know how to use it well, whether it's for centering or for other positioning purposes.

I see that you're using flexbox in your card for centering, which is a good start. I would recommend using flexbox on either the body or the main container instead of the component itself. And yes, it is necessary to specify the height at least for the parent container; this way, the browser knows how much space to allow for centering because without knowing how much space, it won't know where to position the element. For this, we usually use min-height: 100vh and not height so that the content won't be cut off at smaller browser heights. In your case, try making the browser height smaller than your card, and see what happens. Aside from flexbox, you can also use grid:

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

About units:

For me, it's best to use relative units rem or em instead of pixels, although there are situations where pixels might be a better choice. The reason for using relative units is that, if the user changes the font size preference on their browser, relative units can help with scaling according to their changes. It does depend on the situation, so for a better explanation, I recommend checking out Kevin Powell's video here: https://www.youtube.com/watch?v=N5wpD9Ov_To

About root:

The :root pseudo class selector targets the root parent element in a document. For html documents, the :root would target the html, so in our case it's like setting things in the html selector. The two aren't the same though, and the :root selector has a higher specificity than the html selector, which is why custom properties are written in the :root selector and not html.

Hope this helps you out!

Hey cas, well done! your solution looks good!

Your page is well designed. You used flexboxes here, which is a great tool for creating responsive designs. Your HTML code is clear and easy to read for anyone. The transition you use are also appreciable.

In order to answer your query there are no specific way to centering an element to the screen you can use any. Position property are useful when you want to set an element in the flow i.e. position: relative or out of the flow i.e. position: absolute. Flex are useful in creating flexible layout. Grids are useful when you want to place items in discrete location , it also help in creating responsive layout.

The different units each have their own specialties. For instance, px are used when an element should have a fixed size, whereas rem, em, percentage are relative units and are useful in creating responsive element.

root is a pseudo class selector that is equal to the html selector. This is helpful for declaring a global CSS variable, a variable that can be accessed throughout the entire code.

hope this helps you, happy coding ✌️.