explainnap / Flexbox-Froggy-Solutions

a user-friendly markup solution that enables individuals to tackle Flexbox Froggy challenges seamlessly.

Flexbox Froggy Solutions

Link to Site: Link :: https://flexboxfroggy.com/

The primary goal of this project is to create a user-friendly markup solution that enables individuals to tackle Flexbox Froggy challenges seamlessly. Unlike traditional solutions provided, this approach focuses on providing an solution sheet where users can attempt challenges independently before revealing the answers. This feature not only enhances the learning experience but also ensures that users can verify their solutions without unintentionally stumbling upon solutions to other challenges.

If you find this project helpful, consider starring it on GitHub to show your support.

Level 1

Reveal Answer

justify-content: flex-end;

Level 2

Reveal Answer

justify-content: center;

Level 3

Reveal Answer

justify-content: space-around;

Level 4

Reveal Answer

justify-content: space-between;

Level 5

Reveal Answer

align-items: flex-end;

Level 6

Reveal Answer

justify-content: center;
align-items: center;

Level 7

Reveal Answer

justify-content: space-around;
align-items: flex-end;

Level 8

Reveal Answer

flex-direction: row-reverse;

Level 9

Reveal Answer

flex-direction: column;

Level 10

Reveal Answer

flex-direction: row-reverse;
justify-content: flex-end;

Level 11

Reveal Answer

flex-direction: column;
justify-content: flex-end;

Level 12

Reveal Answer

flex-direction: column-reverse;
justify-content: space-between;

Level 13

Reveal Answer

flex-direction: row-reverse;
align-items: flex-end;
justify-content: center;

Level 14

Reveal Answer

order: 1;

Level 15

Reveal Answer

order: -1;

Level 16

Reveal Answer

align-self: flex-end;

Level 17

Reveal Answer

align-self: flex-end;
order: 1;

Level 18

Reveal Answer

flex-wrap: wrap;

Level 19

Reveal Answer

flex-direction: column;
flex-wrap: wrap;

Level 20

Reveal Answer

flex-flow: column wrap;

Level 21

Reveal Answer

align-content: flex-start;

Level 22

Reveal Answer

align-content: flex-end;

Level 23

Reveal Answer

flex-direction: column-reverse;
align-content: center;

Level 24

Reveal Answer

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;