Next Time Id like to be able to add the correct fonts for the text
What challenges did you encounter, and how did you overcome them?it was a challenge to me to create a box and center it, I overcomed it by searching on google
Congratulations good try. Just a few tips to improve your work.
I hope you find this helpful. Good luck on your coding journey 😁. Keep it up
I'm proud that I was able to put this together quickly.
What specific areas of your project would you like help with?I noticed there is a 5px height difference between the Figma design file and my finished project. Did this project need to be pixel perfect? And, did I use the correct semantic HTML tags? I appreciate any and all feedback since this is my first time having anyone review my code.
Congratulations well done, looks good. It doesn't have to be pixel perfect as long as it's close to the design file it's ok. As for your markup avoid uising div's semantic html is the way to go. Adding font-size 16px is not necessary, by default font-size is 16px. You forgot to add box-sizing: border-box; on the CSS reset.
Hope you find this helpful. Keep it up 👍
I am proud of understanding responsive design and applying it to this project.
What challenges did you encounter, and how did you overcome them?I had some trouble laying out the design as it took a while for me to get going. After I was able to get the first part of the design going, everything else followed.
What specific areas of your project would you like help with?I would like some help in getting the first part of the design faster. It took me quite a while as I got overwhelmed at first. Any feedback on my code would be appreciated.
Congratulations well done, looks good. I still have some tips
line-through you could have used the <del> tag.I hope you find this helpful. Keep it up 👍
If you look at the bottom of the image on the left, there is a little bit of background, a white image. I couldn't get rid of it. Any solutions, mistakes, or ideas would be appreciated.
Congratulations looks good. The issue you have can be solved by removing align-items: center
main section {
width: 600px;
display: flex;
justify-content: center;
/* align-items: center; */ remove this line
background-color: white;
border-radius: 10px;
}
I hope you find this helpful. Keep it up 👍
I have a habit of setting rem as 10px:
:root { font-size: 10px; }
so, for example, if I want a 16px font size for body, I use:
body { font-size: 1.6rem; }
At the CSS report, I got a declaration-property-unit-disallowed-list warning, which told me to consider using relative units.
Is this a bad practice, responsive design wise?
Nice looks good. As for your question this is what you can do. On the root set the font-size to 62.5% and on the body set the font-size to 1.6rem. This should solve your problem. Once you have done this you can just use rem instead of px. This converts pixels to a base 10 numbering so if you have 20px you can just type in 2rem. Just divide every pixel by 10 and you have the result in rem.
Make it a habit writing semantic html. Avoid using divs
I hope you find this helpful. Keep it up 👍
I try to write this by myself not study from YT first. and better improve in CSS style learning.
What challenges did you encounter, and how did you overcome them?I learn to play CSS component since I haven't played this much. but ya still didn't know it at all but it's good start for me.
What specific areas of your project would you like help with?Still not sure about responsive. Also, I have learned that we can't use gap since gap only works when the parent container is using display: flex, display: grid, or display: inline-flex/grid. May need to know more about it. Will try to improve!
Congratulations looks good. I do have some tips
.container h2 {
padding-top: 20px;
padding-bottom: 10px;
color: hsl(0, 0%, 100%);
text-align: center;
}
.container p {
padding-bottom: 20px;
color: hsl(0, 0%, 80%);
font-size: 14px;
text-align: center;
}
You could combine them like this
h2, p {
text-align: center;
}
I hope you find this helpful. Keep it up 👍
