The latest articles on DEV Community by Sarah Qym (@qymmore). https://dev.to/qymmore https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F785447%2Fe1a782ae-d7a3-488b-85b6-3c3ac5766f5a.jpeg https://dev.to/qymmore en Sarah Qym Wed, 26 Jan 2022 17:01:16 +0000 https://dev.to/qymmore/flexbox-froggy-for-css-a-fun-way-to-learn-flexbox-193g https://dev.to/qymmore/flexbox-froggy-for-css-a-fun-way-to-learn-flexbox-193g <p>So, recently I've been getting into learning CSS box model and flexbox and I came across this amazing little website.</p> <h1> <a href="https://flexboxfroggy.com/">Introducing Flexbox Froggy!</a> </h1> <p>Flexbox Froggy is a free-to-play, interactive browser game that teaches you how to align and move flex boxes around on your webpage. </p> <p>The game consists of 24 coding lessons to get you to help move little frogs onto their respective lilypad.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sTexIUF4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.giphy.com/media/r7QiDunxBlEVVUgtfh/giphy.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sTexIUF4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.giphy.com/media/r7QiDunxBlEVVUgtfh/giphy.gif" alt="Froggy on a lilypad" width="480" height="448"></a></p> <p>I personally love websites like these that teach coding through interactive games (bonus if it includes little characters).</p> <p>Let me know what resources you find helpful for learning flexbox!</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hsYFssw0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://data.whicdn.com/images/352403374/original.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hsYFssw0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://data.whicdn.com/images/352403374/original.gif" alt="happy coding" width="498" height="280"></a> </p> beginners css codenewbie webdev