All solutions

I've combined Vue with Astro for the first time, despite being a long time Astro advocate and a big fan of Vue. Well, this challenge was perfect for that and I'm very happy with the result! I could even use Pinia for state management inside Astro. The challenge here was making the whole form (screen reader) accessible, I think I've done a nice job at it, but I'm always open to feedback!

I noticed that I always work with HTML elements that I know, such as <nav>, <ul>, <button> etc., but this time I wanted to explore and introduce a couple of new ones (for me at least). I found that, for example, the <picture> element is quite useful for specifying which source of an image to use at what viewport width, without the need of any CSS or media queries. I'm curious if you guys know any other handy HTML elements to use :)

As an experiment I build a color theme switcher. I would love to know if anyone has experience with building it any other way? I saw for example that you can also work with a <form>, radio buttons and the :has() selector, but Firefox doesn't support this selector yet.

I've for the first time tried out a library for the CSS Animations (Animate.css) which I normally make myself. I was wondering what you think is better, make it yourself, or use a library to solve the problem. I always try to make things myself, but it isn't necessary to keep reinventing the wheel, so I thought I'd try this one out and I quite like how it works :)

I used fixed widths and heights to achieve the buttons on the pentagon background. I was thinking about using CSS Grid, but didn't know how to get it right. I'm curious about how other solutions tackled it and I might try it out if there's a better way.

I used the ::before pseudo element to create the overlay for when you hover over the image, it's actually something I've used for years now, but I was wondering whether nowadays there might be a better or alternative way to do this? I do like the fact that there is less HTML in the end, though you do need more CSS to style the pseudo element.

When I'm working on challenges from Frontend Mentor I try to get it as accessible as possible. Sometimes this means I have to differ from the design, such as with this challenge. I for example went with a dark font for the navigation and the hero to comply with the contrast ratio between the font and the light blue background. To keep it consistent I also applied this to the arrow, hamburger and logo SVG's. However, having a white font and white SVG's looks much better in my opinion. I want to know if there are other ways to stay more true to the design, whilst having the right contrast ratio and accessibility between the font and the background color. Let me know if you have any ideas! :)

I was wondering how you would get the data from the data.json file and whether you would have a different solution to fetching the data and toggling between that data depending on what stats the user wants to see. In my case I used the JavaScript Fetch API, a function and some if statements to make it all work. Would love to know whether this is considered a good practice or whether there are better ways to approach and solve this. Thanks in advance :)

I'm really curious how you would solve the image and background of the intro section. I used a lot of media queries to get the desired result for different screen sizes, but there should be a more elegant way to do this.