Skip to content
OverviewSolutions
0
Comments
4
P
Brandon Smith
@brsmit1993

All comments

  • Brandon Smith•80
    @brsmit1993Posted 12 months ago

    A quick note / something I noticed right away is for the 'best practice' font-size should be set using 'rem'. This is because rem is relative to the root-font-size which is defaulted at 16px and can also be controlled via a web browsers font-size settings. This matters because of accessibility reasons. For 8px this would be .5rem for 16px = 1rem. Generally, you can find online conversion tools by searching px to rem. I'll leave an excerpt from an article as well as the link for more information regarding rem and why it matters.

    article about rem

    'By default, most browsers use a font size value of 16px. So, if the root element is 16px, an element with the value 1rem will also equal 16px. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element — even if you don’t know what the default font size will be.'

    Marked as helpful
    1
  • Brandon Smith•80
    @brsmit1993Posted 12 months ago

    Your solution visually is spot on and it's really impressive how close you got it to the original design. One small thing I did notice your for font size you're using px instead of rem. Rem is based on the root font size which is defaulted to 16px but if a user changes their default browser font size that will modify that default to be larger or smaller. This primarily just ties into making your website as accessible as possible as well as following 'best practices'. The only time you should really be using px is when you explicitly want the value to stay static otherwise things like rem, %, vw, and vh are better options to make your site more responsive. On that topic as well. Avoid using vh, vw, etc for fonts as well because that disables the browser's ability to make the fonts larger when zooming in. If you really want to dive into making at least your font responsive you can dive down the rabbit hole of clamp-generators which allows you to use the clamp function to dynamically change the size of your font based on the screen width. But that's a bit more complex and further off-topic than I should probably get. In any case, your solution looks awesome so good job. :D

    Marked as helpful
    1
  • eosook•130
    @eosookSubmitted 12 months ago

    I'm a true beginner when it comes to HTML and CSS. My CSS code feels very messy and all over the place. Are there any tips that you could give me in order to improve on this or any glaring problems you see in my code. I appreciate any help I can get.

    First Submission - Results Summary Component - HTML and CSS only

    2
    Brandon Smith•80
    @brsmit1993Posted 12 months ago

    If you're looking to organize your CSS better the two best pieces of advice I could give would be 1. Learn sass as soon as you can. Once you're comfortable with CSS learning how to use SASS will save you tons of headaches when it comes to organizing CSS the second thing would be to look into naming /organizing methods like BEM. BEM even if not followed perfectly just understanding the theory behind why / how people follow it will likely be a big help as well.

    https://www.toptal.com/css/introduction-to-bem-methodology

    Marked as helpful
    0
  • Yavuz KARAKUŞ•50
    @yavuzkarakusSubmitted 12 months ago

    Hi everyone! 👋

    I completed the project but I don't know if the codes I wrote are best-practise. It was an enjoyable project. It was exciting because it was my first project. Thank you for the feedback. 💯

    If you liked it, please don't forget to touch the heart icon. 🧡 Additionally, I'm very open to learning, so please comment if there's anything I missed. 📩 Thank you in advance.

    Happy coding! ⚡

    QR Code Component Solution

    1
    Brandon Smith•80
    @brsmit1993Posted 12 months ago

    Overall your code looks pretty clean and well formatted. A few things I noticed though. The first you were mixing px and em and using them interchangeably. Although this isn't a big deal it's usually best to pick one and stick with it throughout your code. The only exception I would say is using 'rem' or 'em' for fonts and then px for everything else. Another note as well I would avoid using 'em' unless you intend to do it for a specific purpose. em values are relative to the font-size of the nearest parent element, while rem values are relative to the root font-size which is generally 16px. I tend to use 'rem' because I know it will always (rem * root font-size) but with em if you've modified font sizes for any of it's parents it can cause weird and unintended effects if not used carefully. Hope this info comes in handy and if you're interested in learning more about rem or em than this article might be a good place.

    https://blog.logrocket.com/using-em-vs-rem-css/

    Marked as helpful
    1