https://github.com/yukta026/frt_flexboxexplora

FLEXBOX EXPLORA 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.
https://github.com/yukta026/frt_flexboxexplora

azure-resources azure-static-web-apps html-css-javascript visual-studio-code

Last synced: about 2 months ago
JSON representation

FLEXBOX EXPLORA 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.

• Host: GitHub
• URL: https://github.com/yukta026/frt_flexboxexplora
• Owner: Yukta026
• Created: 2023-09-28T13:00:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-30T15:02:46.000Z (over 1 year ago)
• Last Synced: 2025-01-08T06:36:26.849Z (4 months ago)
• Topics: azure-resources, azure-static-web-apps, html-css-javascript, visual-studio-code
• Language: HTML
• Homepage: https://nice-rock-0c08ab110.3.azurestaticapps.net/index.html
• Size: 521 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# frt_FlexboxExplora

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 - 

1) Microsoft Azure Portal for creating (frt_FlexboxExplorer) resource group for project

 ![Screenshot (2338)](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/cb7ef9fa-4005-4a1e-b661-4f37e827cc65)

 

2) Azure Static Web Apps for deploying (frtFlexboxExplorer) project

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/cfb7f834-9e0a-42ca-a5a0-388984854a63)

On clicking on browse button website can be viewed -

![Screenshot (2341)](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/555cd57b-2525-48b8-846c-1e2c80562881)

IDE used - Microsoft Visual Studio Code

Project link - https://nice-rock-0c08ab110.3.azurestaticapps.net/index.html

Project Screenshots - 

Project homepage -

![Screenshot 2023-09-28 195357](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/56fc9d0e-5c81-4ecb-b7cd-835e603f4ac1)

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

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/6e881c8d-8470-43c1-becd-02a6cc0e9b3e)

Demo of game-

Just write the code and feed the fish

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/28e6170b-7d92-49f1-8933-010ab7210dec)

LEVEL -2 Learn to implement align-items

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/75303882-3b88-4adb-bca8-9230a6a57ece)

LEVEL -3 Learn to implement justify-content and align-items together

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/d8fd8539-103d-4475-9ccd-5ad922ca24c4)

LEVEL -4 Learn to implement flex-direction, justify-content and align-items together

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/4e9584ce-206c-447c-9209-39276cf47482)

LEVEL -5 Learn to implement flex-direction and flex-wrap together

![image](https://github.com/Yukta026/frt_FlexboxExplora/assets/143731993/e71d6bd9-3d56-4a02-a3de-46da1cf9f351)