All solutions

Don't have big difficulty in this challenge but I am not sure if there are cleaner and easier way to write the code. Also, I am not sure if the class naming of the HTML elements are clear enough.

Please advise and thanks :)

When to use class and when to use id?

• In my HTML code, I use <p> for most text and give a class for each of them for easy CSS coding. I am not user I should give them a class or a id.

Is it fine to take <main> as the card container class?

I come up with 2 questions in the challenge:

How to get a better measurement of size, dimension of an image

• I used the ruler tool in Firefox to measure margin, font size etc...but would like to see if there is a easier and better way to do it.

Have no idea how to style the number points of a <ol>

• I studied the web and can change the font-size and color using li::marker, but I can't change the font-weight and also the font-family.

Also, for the table in the Nutritions section, I just adjusted the width of the first column to adjust of position of the text in the second column. It works but I am not sure if it is a good way to do it.

And I feel my code is redundant and can be cleaner :(

After the project, I have two questions:

1. How to vertically center a span element?

2. Is it possible to set the height of a div same as the background image? (which mean can fully show the background image with correct scale)

I got some questions when doing the challenge:

1. Is it a good way to use <main> as the background element? My purpose is to apply CCS flex so as to center the card.

2. Flex gap

Does flex-gap exist? I found the property on the web but nothing happen when I applied it to my code and finally, I have to use margin.

1. how to vertically center svg?

when I added svg (the eth icon and clock icon) to my codes, I found it is at the top-left of the box. I used flex align-items to center them. But is there another way to verically center svg?

1. overlay color on image, is it possible(no need to add a div)?

to apply the hover effect of the main image, I added a div with overlay color. But is there any way that I no need to add a div but just do some css rules to the image?

1. why can't the image fully fill the box?

There is a 1px gap at the bottom and I have to set the height to 99% to fix it.

1. Is it a good way to use <main> as the background element? My purpose is to apply CCS flex so as to center the card.

2. Flex gap

Does flex-gap exist? I found the property on the web but nothing happen when I applied it to my code and finally, I have to use margin.

1. how to vertically center svg?

when I added svg (the eth icon and clock icon) to my codes, I found it is at the top-left of the box. I used flex align-items to center them. But is there another way to verically center svg?

1. overlay color on image, is it possible(no need to add a div)?

to apply the hover effect of the main image, I added a div with overlay color. But is there any way that I no need to add a div but just do some css rules to the image?

1. why can't the image fully fill the box?

There is a 1px gap at the bottom and I have to set the height to 99% to fix it.

1. Is there a common practice of the css properties order? for example, display comes first, then width/height, and then margin/padding, etc?

2. When to use class, when to use id?

In my concept, id is use when the element is unique, for example #card in this challenge. But when I studied the html code of other pages, I found that they may also use class to describe unique element. So when to use class, when to use id?

I come up with a question about body height when working on desktop and mobile view.

In Desktop view, in order to vertically center the Card, I set the body to flexbox and give a height of 100vh to it so the property align-items can take effect.

But when working on the mobile view, as the Card becomes so long that it exceeds the screen height, I have to change the body height to auto.

So, is it possible to give a setting to body height so it can work well in both desktop and mobile view (and exceed screen height)?

I come up with a lot of questions in this challenge:

1. @media

@meida is used for CSS in different screen size. Is there any industry standard of the @media code structure? For example:

.div1 {}
@media {
  .div1 {}
}
.div2 {}
@media {
  .div2 {}
}

and

.div1 {}
.div2 {}
@media {
  .div1 {}
  .div2 {}
}

Which one is preferred?

1. div box same height as image height

In the challenge, initially I used <img> for the card image but then I found that I didn't know how to set the div box responsively same height as the image inside the div box. Finally I used background image instead.

Can it be possible to set the div box same height as the image when <img> is used?

1. Gap space between Flexbox

I used margin to set the gap space between flexbox (the Stat Section). Is there any property instead of margin that can set it?

1. class and id

Is it common to give an id to a div box? Or it is more common to use class?

1. tricks or tool to easy size measurement

As you know, the preview from Frontend Mentor challenge is jpeg image. When I am dealing with the size and value (e.g. padding, margin, font size，color), I have to keep testing by my eyes. Is there any tricks or tools so that I can easily get the value?

I am wondering if there is useful and free color picker, which does not need to upload an image to the picker?

In this challenge, I learned:

• Centering a svg element in a div box
• overlaying color on an image
• Creating a reposive square div box

The most challenging part is the Card Image with a view-icon with color ovarlay when hovering. In the first try, I divided it into three component: a div box, an image and a svg icon, but then I found it difficult to correctly center the icon on the image.

After studying different resources on the web, I simplified it: a div box with background-image and an svg icon. To easily center the svg icon on the image, I set the position of the div box to relative and the svg icon to absolute so the svg icon is positioned relative to its parent: the div box.

parent-div { position: relative; } child svg { position: absolute; }

The Card Image acted as the background image of the div box and so the div box needed to be responsive square to fit the image. I learned the use of padding-top to make it responsive square:

image-box { width: 100%; padding-top: 100%; }

As the svg icon was absolute positioned, it was not affected by the padding and can be easily centered:

svg-icon { left: 50%; top: 50%; transform: translate(-50%, -50%); }

Final Challenge was overlaying color on background image when hovering. After research, I learned that it can be done by linear-gradient with two same color-stop, which means no graident at all:

image-box:hover { background: linear-gradient(color1, color1), backgraound-image; }

All DONE!

I am new to HTML and CSS. I started learning from freecodecamp and w3school few months ago. I am not sure if the above solution is the best solution and it would be great if you may have a better suggestion.