@Chiwanza16
@balaji282004
Submitted
What are you most proud of, and what would you do differently next time?
nowadays i write the code bit faster than before
What challenges did you encounter, and how did you overcome them?
really i didn't face any issues while doing it
What specific areas of your project would you like help with?
position of the container
@Chiwanza16
Posted
I liked the property you used, "font-optical-sizing." It is good for responsive design. Also, try using Rems they are good for responsive design.
Marked as helpful
@joyafrikaana
Submitted
What challenges did you encounter, and how did you overcome them?
I had an issue with uploading my project to github. I researched and found helpful solutions.
@Chiwanza16
Posted
well done you did an amazing job to bring the design into code
Marked as helpful
What are you most proud of, and what would you do differently next time?
Vertical centering of the card in the browser window can be done by setting the body's height to 100vh and declaring it a flexbox container. Flexbox items with margin: auto are centered both horizontally and vertically within the container.
CSS variables with a global scope can be declared in a pseudo :root element.
:root {
--white: hsl(0, 0%, 100%);
}
Customization of default CSS values for all elements can be done as follows:
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
What challenges did you encounter, and how did you overcome them?
The figma design file was inspected to check paddings, line heights and word spacings. Although these spacing values were adopted in my implementation, there is still a small vertical offset between the card text in my implementation vs. the frontendmentor.io solution.
@Chiwanza16
Posted
well done the design and the solution is on point
