Skip to content
OverviewSolutions
12
Comments
10

glowri57

@glowri57190 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • glowri57•190
    @glowri57

    Hi LaStellaa, your code is very nice and I loved how you used grid-template-areas for the grid. There is one major thing I noticed in your html file, you had h3 first before h2. Order is very important for semantic and SEO purposes. Ensure that there is always an h1 in your document. You can make the display of h1 display:none so it would not be visible. Check the article below to understand more. Why heading order matters in HTML

    Marked as helpful
  • glowri57•190
    @glowri57

    This is a very good program. Keep it up 👍

  • glowri57•190
    @glowri57

    Hi @Thomas-Ngo-1

    Here's what I noticed:

    • font-weight have values 100, 200, 300...900, you don't need to add px
    • add some space at the bottom of your paragraph
    • the paragraph should have color Slate 500
    • Since you styled the class .slate-300 and the rest, the property should be defined in your HTML file. Here's an example:
    <span class="slate-500">...</span>

    Then the color assigned to slate-500 would be styled on the span tag.

    • The background-color: in those color classes should be changed to color: You're trying to define the color of the text, not the background-color of the text.

    I hope you find this helpful!

  • CptnRedbeard•40
    @CptnRedbeard
    What are you most proud of, and what would you do differently next time?

    I was able to make an example similar to the original but it didn't adjust correctly when the window was resized. I'd try to find a solution without watching a video next time.

    What challenges did you encounter, and how did you overcome them?

    In my original file, when you resized the window everything would get squished because I was using percentages. I was able to follow along with a video explaining pixels, rem, and padding that helped out a lot.

    What specific areas of your project would you like help with?

    How do you decide when to use pixels, rem, or percentages?

    QR-Code-Component

    3
    glowri57•190
    @glowri57

    Hi @CptnRedbeard

    To answer your question, you should use px when dealing with properties that you want to remain fixed in value no matter the viewport. you can use px with properties like: border, border-radius, etc.

    rem and percentages are relative values.

    rem is used with properties like font-size, margin, padding, @mediaquery min-width and max-width values.

    percentages are mostly used in width, height, min-width, max-width, min-height and max-height properties. They are relative to the width or height of the webpage. Check this article to understand more. Why font size must NEVER be in pixels

    I hope you found this helpful!

  • glowri57•190
    @glowri57

    Your GitHub repo is not visible. You probably set it to private. It would help if you changed it to public so that others could view your code and give feedback.

  • glowri57•190
    @glowri57

    This is a wonderful piece of work. You could use the <s> for the old price.

    Marked as helpful
View more comments