神刀安全网

10 Fun Browser Games For Learning Web Development

Danny Markov

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!

In this article we’ve prepared for you 10 browser games for web developers and coders, that you can use to learn more about JavaScript, CSS and HTML, or as a proving ground for your webmaster skills. Some of the games are easy, others extremely difficult, but they are all fun!

10 Fun Browser Games For Learning Web Development

Code Combat

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.

10 Fun Browser Games For Learning Web Development

Hex Invaders

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.

10 Fun Browser Games For Learning Web Development

Flexbox Froggy

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.

10 Fun Browser Games For Learning Web Development

Pixactly

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.

10 Fun Browser Games For Learning Web Development

CSS Diner

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 ~ and :first-child .

10 Fun Browser Games For Learning Web Development

Screeps

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.

10 Fun Browser Games For Learning Web Development

CodinGame

A huge collection of games that can all be played in JavaScript, PHP, Ruby, Go, Python, and many other programming languages. The platform includes various puzzle, multiplayer and AI based games, while the code is written in an advanced IDE with Emacs and Vim support.

10 Fun Browser Games For Learning Web Development

Flexbox Defence

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.

10 Fun Browser Games For Learning Web Development

Elevator Saga

Elevator Saga is a puzzle game in which you use JavaScript to control the elevators in a building. Hordes of people are going up and down all the time and you have to try and get them to their destinations as quickly as possible. The game tests your algorithm writing abilities as well as your knowledge of JS functions, arrays and event handlers.

10 Fun Browser Games For Learning Web Development

Untrusted

Untrusted is a meta-JavaScript adventure game where you play the role of Dr. Eval, an @ sign that can control the world around him by changing the source code. The player is presented with the functions that initialize every level and has to alter them using the game API to create and escape route for Dr. Eval.

10 Fun Browser Games For Learning Web Development

Bonus: Dungeons & Developers

A talent tree with CSS, HTML and JavaScript magic instead of fire and ice. Add points in the skill you already know and see how close you are to becoming a true Web Development Master. Submit talent tree as CV for job applications at your own risk.

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to createbeautiful interfaces using the Bootstrap Framework.

10 Fun Browser Games For Learning Web Development 10 Fun Browser Games For Learning Web Development 10 Fun Browser Games For Learning Web Development

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 10 Fun Browser Games For Learning Web Development

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址