From the makers of "Flexbox Froggy", CSS Grid Garden works with a similar interface. Ranging from levels 1 through 28, the difficulty increases as the player continues to solve the CSS puzzles. Each level provides hints, or instructions, to help the player figure out the solution sought. The object is to water your vegetables/carrots, and spray poison onto the weeds, having a healthy, Roundup doused, garden in the end.
This resource is really cool. There is a lot going on here with this tool. Essentially, it is a resource with the power to help the developer layout their grid visually, letting the software generate the code for them. But this is just one application for this site. I am sure the uses are endless! Being new to web development, I can experience the benefits of visually seeing how different CSS Rules effect the Grid with quick and easy precision, making this an effective, interactive learning resource for visual learners as well as those looking to increase their skill-sets in CSS Grid.
Here is another great visual resource for learning, generating, and implementing CSS Grid. The interface is very easy to use and understand. As the user makes the adjustments, the HTML, Classes, and CSS code are generated in real-time along the left-hand window. When the chosen layout is complete, there is a built-in import/export button which the developer may use to inject the code into their own site. There are a couple of Grid layout presets that a user may choose from to get them started. Overall, the interface is very comprehensive and the graphics are streamlined in a way which contains no unnecessary distractions, making this an excellent web development tool.
Overall, I chose interactive tools for this Research and Documentation assignment as I will find the visual and interactive elements to be most helpful when increasing my CSS skills. I was encouraged by the number of interactive CSS Grid resources available on the internet. Of the three I featured, CSS Garden is the one I would use the least, but still, fun to learn from. The other two are not really games, but more like true developer tools. Regardless, they can be used in many ways. A user has the option to manipulate the CSS Grid layouts with the intension of inspecting the code; aiding in the education process while creating pretty cool grid layouts.