All solutions

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

I am proud to finish this challenge and build it close to the design. Along the way, I also could learn new stuff like :rel attribute for anchors and their options, what exactly means a browsing context, and how the tabindex attribute works.

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

The challenge was to figure out how to style anchors that looked like buttons, find suitable values for the media queries, and to decide which CSS properties to adjust.

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

I've built the component with div ,p ,h2 and a only, but fortunately recognized, that it was an invalid HTML structure for a blog card. The news feed on the home page of Firefox helped me a lot with it. Next time, I would try to find a better implementation of the blog card title, as my solution is far a way from the original one in terms of size and probably semantic as well. So basically, there are different ways of building and structuring a blog card with HTML and I would probably build it completely differently.

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

The most challenging was to implement a fluent font-size without media-queries, though there are actually a lot of techniques to do it. My problem was the wrong embedded svg graphic, which didn't let my component change fluently with the viewport size. For my component, I've chosen the clamp() function, and I am happy with that. Less challenging was adding fonts, I had actually done this in an HTML,CSS course, but I should search first to refresh my knowledge.

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

I finished pretty quick the component. Next time I would work a bit on padding to get text align exact liek in the example.

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

The most challenging was to center the QR Code Card in the middle of the view port.