Grid Attack
In an ancient Elvish prophecy, it was said that one day a man would be born with an incredible power that predicts the future – "Marketi Predictori." And another will come to take this power. But the years went by and nothing happened. Until one day, a little elf was born. He was named Luke.
From an early age, he surprised his parents and his sister Rey by guessing the price of apples at the farmer's market before they even reached it. Every year his power rose and his predictions became more and more accurate. But there was one thing Luke could not predict. The coming of the demon Valcorian. It was the one from the prophecy that was to come and take Luke's power. One day Valcorian and his army attacked the town where Luke had lived and kidnapped him to make a ritual of stealing his power.
Go on a dangerous quest with Luke's sister Rey and find her brother. Defeat Valcorian and all his demons using a secret weapon – CSS Grid.
We made this game for You?
1. You often stumble and try to figure out which combination of Grid properties makes the browser do what you want it to do.
2. You are scared by the number of properties a CSS Grid has, and you feel uncomfortable when you need to create a grid layout.
3. You want to create complex web layouts using Grid, but without constantly looking at the web page after every "Cmd/Ctrl+S" press in the code editor.
4. You have tried to learn CSS Grid with video tutorials and articles but still don't fully understand how some parts of it work.
5. You use a Flex Box where Grid is required because you don't feel confident in using it.
Is this you? Then you definitely want to learn Grid or improve upon your current skills. We have good news for you… really good news!
Learn Grid by Playing CSS Game
No more boring videos, courses and articles. Learn Grid in a revolutionary new, fun, and effective way. By playing a Grid coding game!
What's included:
+ 80 coding levels that will teach you in detail how to use each CSS Grid property with all its nuances.
+ 40 real-project layouts that you will learn how to create by building them yourself.
+ 3 game modes: Easy, Medium, and Hard for all levels of CSS Grid knowledge.
+ Interactive and fun-to-play environment that makes learning feel like play.
What you will learn
You will completely learn CSS Grid in every detail once and for all.
+ What are grid-template-columns and grid-template-rows and how to use them with real-world layouts
+ How to effectively use the repeat function and stop wasting priceless time repeating yourself
+ How to make a perfect gap in a grid using column-gap and row-gap
+ Learn a shortened property to make a gap using gap
+ What is the new magical fr unit, how is it different from % and which one to use where
+ How to size and position items using grid-row-start/end and grid-column-start/end to create an advanced grid
+ How to perfectly position items using grid-row and grid-column
+ What are mystical grid-template-areas and grid-areas properties and how to use them with modern layouts
+ Lean the most effective grid function minmax and how to create flexible tracks using it
+ How to use min-content and max-content to create a responsive grid
+ How and where to use auto-fill and auto-fit to make your grid flexible
+ How items flow in a grid and why it's extremely important to know
+ How to use grid-auto-flow to magically change items flow
+ The difference between column, dense, and row flow
+ Learn about hidden implicit grid and how its difference from known explicit grid
+ How to use grid-auto-columns to create a hidden grid
+ How to use grid-auto-rows to change the way you will work with grids forever
+ Learn how to position items with justify-items, align-items, and place-items and forget about flex box
+ How to effectively use justify-self, align-self, and place-self
+ How to replace flex box with when it is unnecessary with justify-content and align-content
+ Master CSS Grid by solving complex interactive levels
+ See how the story ends by defeating challenging bosses
+ Learn 8 bonus facts about CSS Grid
Ready for your Dangerous Quest?
Become super confident with CSS Grid and start making web pages without scouring the internet for answers.
FAQ 🤝
Question: Does the skills learned in the game transfers to real world coding?
Answer: Yes. All skills you'll during the game are the skills you'll need to solve in real world problems and you'll be able to use them in your real world projects.
Question: Does the problems I'll solve in the game are real world problems?
Answer: Yes. Problems that you'll learn how to solve in the game are the problems you will encounter in real world projects.
Question: Does the layouts I'll create in the game are real world layouts?
Answer: Yes. During the game you'll learn how to create 40+ real layouts.
Question: What if it doesn’t work for me?
Answer: If you're not happy with the Grid Attack game and think you haven't learned anything new about css grid, you can reach out by email hi@codingfantasy.com in the first 30 days and we'll refund your purchase.