CodingFantasy
Imagination knows no bounds. I am continually surprised as I do these research topics on the limitless imagination shown on so many of these sites. Here we have "Lord of the Rings" and your favorite video game coming together to help one learn the grid layout. After a fun introduction to the game theme and characters, the reasons why one might find trying this game out are listed:
- If you are uncomfortable creating a grid layout and using the various properties.
- If you are uncertain which combination of properties will give the desired result.
- If even after reading articles and watching video tutorials, you still don't fully understand grid.
- If you resort to using Flexbox because you are less confident using Grid.
- If you want to create a more complex layout.
It is stated that although this is presented in a game format, you will learn real world layouts and problem solving. As in a video game, it starts at a basic level and moves up as levels are successfully completed. The level starts out presenting the topic in the story format but then discusses the topic in a more normal fashion. The necessary code is shown and the game field shows your grid lines and the correct grid lines. After you enter your code, you can elect to show the correct solution.
🔗 The Grid Attack Game
Grid Garden
Here is another way to learn grid layout basics in an interactive game format. This is a more basic and much simpler game to play than Grid Attack. It will help demonstrate the basic concepts but won't give an as in-depth experience as Grid Attack. The basic grid layout is already defined so this game is more helpful in using the different grid properties and values and seeing their effect. Since you are placing graphic images in the layout it is easy to visually see the effect. Using Inspect I saw that the game part inself was built using Javascript. Under the head tag, I saw that a custom font was used as I could pick out googleapis.com and also a link to Animate.style ("just add water CSS animations") which was used for their animations. Which was something else to explore!
🔗 Grid Garden
Learn CSS Grid
This guide to grid was nicely presented. It was laid out in a very orderly manner by topic with a table of contents. An example of a property and it's corresponding value is given with a brief explanation. A simple diagram illustrates the grid layout. It is not a flashy site but I felt its simple layout makes it easy to understand. One thing I noticed under Inspect was not only were the grid lines super-imposed over the area of the webpage highlighted, but also the grid line numbers. In the body tag I noticed that system font stack was used for the font-family value. And the header h1 graphic! Using spans, flex and an ease-in-out transition:transform, when one hovers over the title, the h1 title flies apart. I thought that was quite fun.
🔗 Learn CSS Grid
Summary
Even though using a grid layout is presented as the best way to gain flexibility and greater creativity in a layout, it can be a bit overwhelming at first. Luckily there are many resources available to help from very basic discussions to those that can help more advanced developers with specific and more complex styling problems. I did choose 2 game resources because I felt a complex subject made fun encourages a student to spend more time playing around with the subject. I enjoyed poking around in all 3 of the sites I chose. I also have noticed as I've gone through this class that I am able to pick out more things by looking at Inspect than I did at the beginning.