10 Fun Browser Games For Learning Web Development
Playing video games often involves solving tricky problems with logical thinking and trial-and-error strategies. Can you think of something else that requires these skills? That's right - programming!
Although Code Combat is made for children in school, the game can still be enjoyed by adults of all ages. In it you programatically control the actions of a brave hero going through hundreds of dungeons, fighting enemies and collecting gems. Beating the whole game takes about 20+ hours and covers most programming concepts.
In this version of the classic arcade game the world is attacked by a trio of aliens, each sporting a different color. To save humanity, the player must quickly translate a RGB hex value into human colors and shoot down the invaders.
Puzzle game where you have to help a group of colorful frogs get to their lillypads of choice. Moving the amphibians around is done with flexbox and will truly test you layout building skills. The in-game hints will tell you which CSS properties to use in each situation, but it's up to the player to decide what combination of values to set.
Pixactly has a very simple, yet challenging concept. The game gives you two random pixel values, one for the width and one for the height of a rectangle. The player then has to draw a box that is as close as possible to the given dimensions.
A great game for learning CSS selectors. The player is given a table of dishes in animated and HTML form, and a certain item or items to select from the table. The different levels cover everything a web developer should know about selectors, from the very basics to
You can think of this game as your digital ant farm where every "ant" is programmed by the player. After setting up a colony and the behavior of your creeps, they will go about their business of exploring the endless game world, collecting resources and fighting enemies even while you are offline.
Classic tower defense game with a CSS twist - all the turrets and traps in the game are positioned using the flexible box layout. There are 12 levels with waves of enemies trying to reach your base. To complete them all you will have to apply your entire knowledge of flexbox properties.
Presenting Bootstrap Studio
a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.