Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
2
shalash23
@shalash23

All comments

  • Rehan•10
    @rehanmm
    Submitted over 2 years ago

    Responsivre QR code card using flexbox

    1
    shalash23•280
    @shalash23
    Posted over 2 years ago

    Congratulations on your first project.

    • Regarding the responsive typography, I found a little trick really eliminates all the headache regarding responsive typography, it is called "clamp". There is a website that I use that actually calculates the values and gives me the final clamp values to apply to font-size. Here is a link: https://royalfig.github.io/fluid-typography-calculator/

    I am quite sure this will make your life a lot easier. After finding this trick, I never write media queries for fonts.

    • I will explain this as easily as I can. I have a box, how much of the inside of the box should the content take? that's padding. How far is the box from other boxes? that's margin. When to use when? It all depends on the design, I think. But for arguments sake, let's say you have a header section that contains a logo and a hamburger icon. The header element is taking all the space. With padding, you can specify an "inner margin" you can say to those child elements. Margin comes in when you want to separate the header section from another section. There are situations where you actually have to use both, but I'd say don't complicate things at the beginnings.

    My two cents here, is that CSS requires some hit and miss until you get a grasp on how it behaves. I am sure it drove everyone who is learning it crazy at one point.

    Marked as helpful
  • yungfora•20
    @yungfora
    Submitted over 2 years ago

    QR code website

    1
    shalash23•280
    @shalash23
    Posted over 2 years ago

    Nice job there.

    I've read the media-queries on your CSS and I've found that you've used max-width parameter with it. Which makes me take a wild guess that you went with desktop-first?

    If so, what really helped me is writing the HTML using the desktop design first so I can write according to the maximum complexity. Yet when I start styling, I go mobile first. This technique really made RWD to me much tolerable than before and now I actually kind of enjoy it.

    Also using em, rem, etc... instead of hard-coded values makes your life much easier on the long-run. So take the time to get a grasp on those units.

    Good luck and nice job

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub