P
@Y39WebDeveloper
Latest comments
- @juliabush
Hey, nice job completing this solution! The code is really clean :) I only have a couple of tips for you. First of all avoid adding the @import for you google font inside of the CSS file. It is better to add it as a <link> in the <head> of the HTML. This is to avoid a slower page load. My second tip is to avoid using pixels for font size. Although FEM provides sizes in pixels in their readme.md, rem is better as it adapts to a users settings in their browser. This means that people who set a font size to larger, like people who struggle to read, the font will adapt rather than staying fixed (as it does with pixels). This improves accessibility. Hope these tips help :)
- @Wetshakat@juliabush
Hey, good job on completing this frontendmentor challenge! Here are some things you can improve. In your css file, have the google imported font at the very top of the file, or include it in the <head> of html to make sure it loads for the document. Also, when it comes to you parent container, avoid using a fixed height and percentage width. I highly recommend for you to check out The Odin Project course to grasp some more fundamentals, as well as Kevin Powell on youtube for CSS and HTML. For this specific project he has a follow along project, and I think you could learn alot of cool stuff! Keep up the good work coding!
- @linhcbsWhat are you most proud of, and what would you do differently next time?
Making this component responsive. I think I will try to find a more efficient way to do that.
What challenges did you encounter, and how did you overcome them?I struggled with styling the shadow of the card—it took me over 10 minutes to get it right. I wish I could do it faster.
I also encountered issues making the card responsive. Aside from adjusting the margins and paddings, I spent a lot of time tweaking the font size to make it responsive.
What specific areas of your project would you like help with?Any feedback would be appreciated!
@juliabushHey, awesome job on this project! Your use of BEM notation and your CSS Reset and root make the code clean and easy to read. I only have a couple of tips to offer. 1st, to get closer to the original image, use text decoration: underline; on the change text in the section with the music icon/plan/price. 2nd, try using rem for font size instead of pixels. This is because some users change font size to be larger in the browser, and rem will change to these settings, whereas font stays fixed, hence why rem is better for accessibility. 1rem is equivalent to 16px, many calculators can be found online. Hope these tips help! Keep up the good work :)
- P@MathiasHun1@juliabush
Hey, looks really good, nice job!
- P@MathiasHun1What challenges did you encounter, and how did you overcome them?
I accidentally deleted the 'viewport meta tag' from the html head while cleaned up the starter code.
It caused 'only' 1hour of headache, until I found out why nothing works on small screen.. :D
@juliabushHey Mathias, great job on your project, its almost identical! Your code looks super clean. However, i noticed two small fixes you could make to do even better. 1st, avoid at all cost the !important tag in your CSS, as this means you've gone against the rules of the cascade and therefore done something wrong. Look into specificity of your elements to fix the issue. 2nd, instead of outline:none; use outline-color: transparent; as browser users who have display set to high contrast will be able to still see an outline with the latter option. Hope this helps :)
Marked as helpful - @Ayako-Yokoe@juliabush
hey, nice job completing this project!. Try placing a max-width on your card, to make the spacing better, as the card is too wide and big when full screen. Also try learning with vanilla css, as this can help you grasp fundamentals!
Marked as helpful
