Astro, WCAG Accessibility, CSS Grid & Animations, Javascript Fetch API

@mattstuddert Thanks for taking a look at my solution and thank you for the compliments! 🙂

Ah yes, thanks for the tip on fetching data from the local file source itself! I will try that on a next challenge which works with a data file 😃

Astro is indeed very interesting! I stumbled upon it a couple of months ago and the promise of a (as I see it) back to basics Static Site Builder which ships zero JavaScript dependencies seemed really cool. I'm a great fan of working with as minimal as a setup as is needed, but workflows you can create with Vue, React, Angular and other frameworks (such as component based development) are really nice to have. But if you run a small project using such a framework can become bloated quickly. Astro is a very clean Static Site Builder, where you can use this component based development concept using .astro components. It's kind of structured like how Vue does it, where you create Single File Components and have your HTML, JavaScript and (S)CSS styles all in one file. You can even combine it with Vue, React, Angular if you wanted to, so your not restricted to just using the .astro structure. This makes Astro really flexible! You also have Sass compilation, scoped styles, Hot Module Reloading, a Dev server and a bunch of other features right out of the box! And all that with a very lean final build, making the projects you ship really fast and clean. They are still working up to a solid V1, but it's really usable already I would say 🙂 I use it for all my projects nowadays, I even made a Accessible Astro Starter repository and a Accessible Astro Components NPM package. I would say Astro is really worth checking out sometimes 😃

Thanks again Matt!

@markteekman, it sounds great! Thanks for explaining it in more detail. I may well look into it and practice it on a Frontend Mentor challenge myself at some point! 😄

@mattstuddert do let me know what you think if you ever try it out 😊

@markteekman, yeah I definitely will! 👍

Thanks @MikevPeeren! 🙂

That one is indeed for accessibility reasons and to provide a better outline then the browser default which is not recommended. Although, I get what you mean, it shouldn't be so prominent when you click, only when you tab focus to it 🤔

I did read about :focus-visible which only shows the outline on keyboard focus interactions in this article on CSS Tricks. But as long as support for Safari fails I don't think it's right to use it just yet, but thanks for refreshing me about this feature, I will keep it in mind 🙂

@Duyen-codes thank you for the kinds words 😊 I too had some trouble with the JSON data, it's actually the first time I did this here! I had to do some research on it, but I found the JavaScript Fetch API very helpful in that matter. Also, if you're just starting out with JavaScript, I strongly recommend Learn JavaScript Today by Zell Liew. It's covers all topics in a very easy to understand way and you'll build practical front-end components with it. I found it very useful when I started learning JavaScript :)

@markteekman Thanks so much for sharing! I'll definitely look into those resources. After finishing all newbie projects on FEM, I kind of feel comfortable with HTML and CSS (micro and macro layouts with Flex and grid especially), now Im moving on to junior level and I just feel very stuck. Thanks again for the share! Keep coding!