I struggled a lot with using the grid layout and I still need a lot of practice, the box shadow was also a challenge for me so I left it out.
What specific areas of your project would you like help with?How to excel using the grid layout and how to use the different box shadows
Hey! I totally get the issue with box-shadow I feel the same. So here's a cool tool for you I'm certain it'll come in handy https://www.cssmatic.com/box-shadow
When it comes to grid I would recommend watching Kevin Powell on Youtube he's a legend at explaining grid and other CSS stuff.
Most proud of using grid and placing objects within grid areas. I'm not sure I did it correctly, but the layout looks similar.
What challenges did you encounter, and how did you overcome them?So many. Most of it came from font sizes at different screen sizes, working with widths for different elements. I just used methods that seemed to work.
What specific areas of your project would you like help with?I feel like I just patched this all together. I was having issues with the grid, plus width and max-widths. If you take the time to look at my code, please give me feedback on best practices for grid placement if this was all wrong, or help with the widths if i was coding incorrectly.
I took a look at your code and I saw a lot of boilerplate copy paste styling you got for things that don't even exist, is there a reason why you're doing that? I liked how you used the colors are variants that's cool, the way you did the grid looks good to me I did it almost identically so overall welldone no need to overthink here :)
I reckon with a little attention to detail you got it all. I can clearly see you used a different color for the price tags as well as a different font which I can only assume is due to paying attention to other areas like how to use the flexbox etc. Overall looks good, with attention to detail can be ace.
I am most proud of how quickly I am getting the HTML and CSS written.
What challenges did you encounter, and how did you overcome them?There weren't any particular challenges on this one.
What specific areas of your project would you like help with?Any constructive feedback is welcome.
Great job, only difference I see is the width of your card is pretty significantly smaller than the solution but no big deal whatsoever, well done.
Centering element only using text-align css syntax command
What challenges did you encounter, and how did you overcome them?Im getting better before then
What specific areas of your project would you like help with?you can use text-align syntax on css to centering html tag
1.How to make better use of figma files to build html and css files
2. How to place the component in the middle of its parent container
display: flex; align-items: center; justify-content: center;
3. Variable font and static font
1.How to reduce the font size in mobile layout without using media queries? Confusing and just don't know the solution.
What specific areas of your project would you like help with?1.How to reduce the font size in mobile layout without using media queries? Confusing and just don't know the solution. 2. Is there other ways to place the element in the center of its parent container except the code below
display: flex; align-items: center; justify-content: center;
I'm not sure what was asked with change font size without media queries so I ignored that as well. How you think about putting an element to the center of its parent is the correct way. If you are annoyed by having to write 3 lines of code for something that you use often, I would suggest reading into css variables and mixins, with them you'd be able to create a single line code like display: center_relative_to_parent by creating that function. Additionally, you can also read into
.parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
This will also position an element to the center of it's parent
I couldn't fit the image in the card exactly how it's shown in the design and I searched for help and removed the div that was not necessary there and added some margin and it was done.
What specific areas of your project would you like help with?Styling the elements
I reckon the easiest way to deal with an image like this is to actually have it as a background of a div and then style that div. If I were you I would look into how to do that as that gives you liberty to position and size the image however you like as well as positioning the image exactly how you want (i.e background-size: cover, background-position: center)
