How to accurately judge the measurements from a preview image only? I was confused that in the preview image box shadow is present or not. So how to judge more accurately the minor details of design which are not mentioned in the style sheet?
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 🙌
When building websites, would you recommend building them mobile first, or desktop first?
Follow up question: Is there any particular reason to build them mobile / desktop first, then adapt the code for the other sizes?
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:
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! 🙌
This was a fun and quick one. The only question I have:
How would you add curly quotes to the beginning and end of the generated advice?
I tried using the html character encoding, but it didn't seem to work. Thanks!
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.
