스프린트 우리 팀 팀원분께서 공유해주신 "Flexbox Froggy"라는 교육용 코딩 게임. CSS의 flexbox를 이용해서 같은 색깔의 개구리와 연잎을 매치시켜주는 게임이다. 이제 막 flexbox 개념을 배웠다면 쉽고 재미있게 flex와 친해질 수 있는 게임이다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
공부하다가 머리 환기 시킬 겸 해봤는데
재미있고,
유익하고,
귀엽다!
끝까지 완료해보니 같은 팀에서 개발한 여러가지 다른 게임들도 있다. CSS 뿐만 아니라 HTML, JS, SQL도 재미있게 학습해볼 수 있다. (다만 대부분 유료이고, 앞서 언급한 Flexbox 속성 게임과 Grid 속성 게임은 무료로 풀려있다.)
Codepip
Learn to code by playing games
codepip.com
나도 열심히 공부해서 나중엔 이런 프로젝트도 만들어봐야지! Flexbox 속성도 연습하고 동기부여도 되고.
좋다!!
'Frontend > HTML ∙ CSS ∙ JavaScript' 카테고리의 다른 글
| [JS] Uncaught SyntaxError: Cannot use import statement outside a module 에러 해결 (0) | 2024.11.29 |
|---|---|
| [JS] toLocaleString()를 사용하여 날짜를 원하는 포맷의 문자열로 저장하기 (0) | 2024.11.29 |
| [JS] crypto.randomUUID()를 사용하여 자바스크립트로 랜덤 id 생성하기 (3) | 2024.11.29 |
| [JavaScript] 얕은 복사와 깊은 복사 (0) | 2023.11.06 |
| [JavaScript] ==와 ===의 차이 (0) | 2023.11.06 |