All solutions

What are you most proud of, and what would you do differently next time?

I think it looks close to the design. Next time I probably would use a date library for the calculation.

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

• Implementing the date calculation was somewhat tricky, I didn't want to add a dependency for that so I did that myself (it wasn't actually that hard).
  • I proceeded to add a dependency for animating the numbers 🙈

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

• I have to import the mixins in every component, is there a better way?
• I add the styling to each SFC in a `

What are you most proud of, and what would you do differently next time?

I think this went well, it was an easy challenge if you know grids somewhat well.

The only thing that was somewhat cumbersome was that you couldn't use grid-rows-2 of tailwind easily because it would make the rows the same height which is not how the design works.

Also for the cards it would have been better to use components to reuse the styles (and make the use of different card variants/modifiers more explicit), but I deciede to still keep it simple for now.

I also kept it simple for the mobile design, I just used a padding (as per the figma) but allowed the cards to keep growing. The desktop design just uses a max-width for the main section, which is centered. I'm not entirely sure if this is the best way to go.

What are you most proud of, and what would you do differently next time?

I'm proud that I was using mostly rem units instead of pixels (with two exceptions, were using the pixels made more sense).

But since the design wasn't following specific sizing/spacing rules, the rem units seemed a bit random. In a real world setting I would follow at least some spacing rules (like the tailwind one) so I would not have to use seemingly arbitrary rem units.

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

I thought it was a bit surprising that the element that contained the title/subtitle element were a bit smaller than the actual content (like in the desktop version the title and subtile were each 54px in height with a gap of -3px, but the total height of the container element was 102px but when calculating the height it would be 54×2−3 = 105px, so I had to subtract those from the space between the title/subtitle and intro text element.

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

I struggled a bit with the -tag and the `srcset`/`sizes` attributes. I changed it to a tag with `` which worked how I expected.

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

Styling the spacing of the list items was somewhat tricky, I overcame it by playing around and then finally applying some magic amount of padding to it.

Also I had a strange difference in the height of the lines in the table (24px in the design and 23.5px in the browser), and I could not find out what it was. The settings were as per the text presets.

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

If anyone has some tips on styling list-items (/) well, that would be awesome.

What are you most proud of, and what would you do differently next time?

It's my third solution of the "newbie" path so it was mostly consolidating what I've learned before. Still, I don't yet have a structured process to adapt the style from the design, what I basically did is I roughly went from the outermost to the inner element from top to bottom and styled the spacing (padding, gaps, size where applicable). Then it looked somewhat like the design, and it took me a couple of iterations before I got it right.

Maybe I need kind of a checklist what to look for before moving on.

What are you most proud of, and what would you do differently next time?

This time I used prettier with the tailwind plugin to format the code, so all the tailwind classes are sorted properly.

Also I used the screenshots from the design to implement it first, it was quite cumbersome to get all the measurements (font-sizes, heights and colors) because the image was antialiased. Then I used the figma to correct the initial values.

Also I was distracting myself during this challenge by watching youtoube videos, I should stop that :D

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

Somehow the Figma download did not work so I used the screenshots to start the challenge but it was very cumbersome. Finally I got the Figma download to work by copying the URL and use wget from another host.

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

Any feedback on tailwind specific issues are appreciated, other feedback is appreciated as well.

What are you most proud of, and what would you do differently next time?

I think it's a somewhat clean tailwindcss solution, I did use arbitrary values only once (for the width of the component).

What would I do better

I also did not take the time (for now) to add linting or automated code-formatting. It's a small project so I think it's ok but I know there are certain rules on how to

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

I actually had trouble opening the figma design since there is not figma app for linux, so you have to use the web-interface and it took me a couple of minutes to find the import function.

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

• There is no actual css to review (the input.css contains only the tailwind directives), the whole code is in the index.html file and in the tailwind.config.js
• Is this actually "good" tailwindcss?
• Did I make good use of the semantic HTML elements
• I used an arbitrary value for the size of the QR code component ( the w-[320px] ) and I set the with of the QR code image to 100% which then results in the 288px size of the image like in the figma/design. Is there maybe a better approach?