flexboxfroggy
gridgarden
flexboxfroggy | gridgarden | |
---|---|---|
476 | 67 | |
6,738 | 3,101 | |
- | - | |
6.7 | 5.1 | |
about 1 month ago | about 1 month ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
flexboxfroggy
-
React Native’s Flexbox: A Visual Guide
Flexbox Froggy: A game that teaches Flexbox concepts by positioning frogs on lily pads.
-
100+ FREE Resources Every Web Developer Must Try
Flexbox Froggy: Learn CSS Flexbox by playing this game.
-
21 Resources to Learn And Practice Your CSS Skills
Flexbox is an important topic of CSS and you can learn it by playing a game called Flexbox Froggy. You can easily learn the properties of Flexbox while having some fun.
-
i need a help 2 fix my page of my neocities webzite
See https://flexboxfroggy.com/ https://cssgridgarden.com/ and maybe also https://flukeout.github.io/
- An Interactive Guide to CSS Grid
-
Best Resources For Web Developers 💻 [HTML + CSS + JavaScript]
Flexbox Froggy - An interactive game to learn and practice CSS Flexbox. Website: https://flexboxfroggy.com/
-
The cutest tools to practice CSS 🧃
Flexbox Froggy
- Hi, could anyone help me wrap my head around flexbox? I'm trying to get a layout like this but I just can't seem to understand how to properly use flexbox.
-
CSS Is, in Fact, Awesome
This started improving for me recently when I spent more time really learning flexbox and flexgrid. They are part of CSS so no installs needed. It’s a different way of thinking but I’m finally good enough with flexbox that I can tell when I need it and make productive use of it. Knowing these patterns makes a difference for me, since now I can assemble the blocks better than before when I’d just try mostly random css without any guiding principles.
Flexbox froggy helped a lot with some practical experience that translated fairly well to my regular work.
https://flexboxfroggy.com/
There are other games like this that I haven’t gotten to yet, including one for flexgrid. Once I clear all the levels in flexbox froggy I’m going to try the flexgrid game.
Then after that I’m going to spend time with bootstrap and tailwind since the last time I really used them was back in my more junior days when I barely knew anything at all about css.
-
Day 64: CSS layouts
Flexbox Froggy is an excellent resource for interactive learning.
gridgarden
-
100+ FREE Resources Every Web Developer Must Try
Grid Garden: Master CSS Grid layout by playing this game.
- How to Center a Div in CSS
-
21 Resources to Learn And Practice Your CSS Skills
Grid Garden is another interactive way to learn the grid layout system while having some fun.
-
i need a help 2 fix my page of my neocities webzite
See https://flexboxfroggy.com/ https://cssgridgarden.com/ and maybe also https://flukeout.github.io/
-
An Interactive Guide to CSS Grid
It’s also worth checking out Grid Garden[1] and its companion Flexbox Froggy[2]
[1] https://cssgridgarden.com/
-
Day 64: CSS layouts
For an engaging learning experience, check out Grid Garden, a game that teaches grid concepts.
- Grid Garden
-
Flexbox Froggy
Other interesting games for learning CSS,
https://cssgridgarden.com/ (basically Froggy for Grid)
https://cssbattle.dev/ (a platform for doing various challenges, huge community)
https://flukeout.github.io/ (learn about CSS selectors)
https://css-animations.io/ (practice CSS animations)
-
CSS Resources: The Best Places to Learn More About CSS
CSS Grid Garden
-
Go, HTMX, Tailwind, and Javascript | Single Page Applications for Backend Developers
There are some games which teach them quickly. http://flexboxfroggy.com/ http://flexboxdefense.com/ and https://cssgridgarden.com/ perhaps 1-2 hours to do all three and then layour is a breeze.
What are some alternatives?
missing-semester - The Missing Semester of Your CS Education 📚
HTML5b - An HTML5 port of Cary Huang's "BFDIA 5b" flash game.
layoutit-grid - Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.
warriorjs - 🏰 An exciting game of programming and Artificial Intelligence
Python-Robocode - A Fork of Robocode for python programming
guess-word-cli - CLI game - find out a source word which characters was shuffled and moreover an extra character was added to bring some complexity.
materials - Bonus materials, exercises, and example projects for our Python tutorials
flank-steak
learnxinyminutes-docs - Code documentation written as code! How novel and totally my idea!
webdevamin - My freelance web agency website
30-Days-Of-JavaScript - 30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
css-exercises