FLEXBOX EXPLORA This game has been created to make learning fun. By playing this game, player will learn various flexbox properties. This approach gives the learner a hands on experience of basic flexbox concepts.
This game has been developed in HTML, CSS and JS.
Microsoft azure services used -
- Microsoft Azure Portal for creating (frt_FlexboxExplorer) resource group for project
- Azure Static Web Apps for deploying (frtFlexboxExplorer) project
On clicking on browse button website can be viewed -
IDE used - Microsoft Visual Studio Code
Project link - https://nice-rock-0c08ab110.3.azurestaticapps.net/index.html
Project Screenshots -
Project homepage -
This game has five levels and the game covers flex-direction, justify-content, align-items and flex-wrap properties of flexbox.
LEVEL -1 Learn to implement justify-content
Demo of game- Just write the code and feed the fish
LEVEL -2 Learn to implement align-items
LEVEL -3 Learn to implement justify-content and align-items together
LEVEL -4 Learn to implement flex-direction, justify-content and align-items together
LEVEL -5 Learn to implement flex-direction and flex-wrap together
