Skip to content
OverviewSolutions
12
Comments
3

Juanca

@juancaorgThe Web220 points

A Software Engineer who builds, writes and draws stuff on the web.

Latest solutions

View more solutions

Latest comments

  • Juanca•220
    @juancaorg

    Hi Akshat 👋,

    Answering your questions,

    Judging the measurements from a preview image only accurately is pretty hard.

    Ideally, you'll have the original design on Figma/Sketch/Adobe XD to work on, but if that isn't the case, you can leverage various tools for measuring.

    The one that I'm currently using and I would recommend (and found in the Frontendmentor Resources) is PixelSnap. It's pretty handy once you get used to it and has great tolerance config when the tool struggles to measure because of low contrast.

    Unfortunately, is a macOS exclusive and paid app. If you don't have the resources, the next best thing that I found is the web extension Dimensions. Available in Chrome and Firefox and is totally free. Of course, for this case, you would have to open the preview image in your browser to measure.

    Keep in mind the zoom level when measuring with these tools. These tools don't keep in mind the "real" dimension, they just measure whatever is on screen, so it can get tricky. Try to get the whole image on screen to get closer to the real dimensions when measuring.

    And again, this isn't a substitute for using the original design, but these are useful tools nonetheless.

    For minor details, like distinguishing if you should add a box-shadow or not, I use a color checker/picker to check for any contrast and to be sure if I should add one.

    The one that I'm currently using is Sip, again, macOS exclusive and paid app. But there's probably a web extension available in Chrome and Firefox, but I ignore which is the best, so I can't recommend any for now.

    And the last, for checking details in general, is just training your eye. The more you practice and the more more UIs you watch in general, the more details you'll spot.

    ~~Anyway, that's a lot of text. Sorry.~~ Hope this helps you out 🙌

    Marked as helpful
  • Juanca•220
    @juancaorg

    Hi Nathan 👋!

    Answering your questions, based on my experience:

    It depends, but if you are building a website for a general audience (i.e. everyone), I would recommend almost every time building mobile first.

    Some reasons:

    • It's easier to build. You may have learned to build a website based on the desktop design, but if you pay attention, desktop designs are generally more complex layouts. Mobile are, most of the time, a single column and are less complex because of their width constrains.
    • Most users use mobile. Plain simple, if you're building for everyone, most of your traffic is going to be mobile.
    • Space. Similar to the first reason. It's easier to expand your layout when you have built mobile first, instead of the other way around and finding out that you may have ran out of space on your viewport, or that you'll have to remove some elements instead of adding elements, which in my opinion, is easier.

    Nevertheless, these reasons are mostly opinions based on my experience. I would recommend you to read more about Mobile first on this MDN article.

    Have a good one, and keep going! 🙌

    Marked as helpful
  • Juanca•220
    @juancaorg

    Hi 👋,

    Great job on your solution!

    To add curly quotes to the generated advice, you could use the <q> element instead of the <h1> that you are currently using.

    Then, instead of modifying the innerText, you could try textContent for changing the text for your quote, without any additional curly quotes, only the fetched advice.

    Hope this feedback helps.

    Marked as helpful