👾 Games para treinar suas skills front-end
Tags: webdev, css, beginners, game
Published: 2022-01-02 20:30:44

_*Jogos em inglês._



## HTML

**Super markup world**

> Pixel e Pixella vivem no Super Markup World que foi criado pelo grande arquiteto Markup Polo.
Em um lindo dia de sol, quando Pixel e Pixella visitaram a região montanhosa de Divland ...
... o arquiteto malvado Mosiac destruiu todas as montanhas!
Pixella de alguma forma evitou o desastre usando uma tag de hiperlink.
Mas agora Pixel e Pixella estão separados!
Cabe a você, Pixel, encontrar Pixella e salvar Divland.

![Super markup world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7pwf93m3b2bailk5ysj.png)

[🕹 Jogar Super Markup World](https://supermarkupworld.com/)
 
<br>
## CSS

**CSS Diner (seletores)**

> É um jogo divertido para aprender e praticar seletores CSS.

![CSS Diner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqcgehj54mta06t21rrv.png)

[🕹 Jogar CSS Diner](https://flukeout.github.io/)

<br>
**Flexbox Froggy (flexbox)**

> Um jogo onde você ajuda Froggy e seus amigos escrevendo código CSS!

![Flexbox Froggy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gobmmgrhozqd2ubqj1n.png)

[🕹 Jogar Flexbox Froggy](https://flexboxfroggy.com/)
 
<br>
**Flexbox Defense**
>Seu trabalho é impedir que os inimigos que se aproximam ultrapassem suas defesas. Ao contrário de outros jogos de defesa de torre, você deve posicionar suas torres usando CSS!

![Flexbox Defense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beri095clnsxi9icxef5.png)

[🕹 Jogar Flexbox Defense](http://www.flexboxdefense.com/)

<br>
**Grid Garden**
> Bem-vindo ao Grid Garden, onde você escreve código CSS para cultivar seu jardim de cenouras!

![Grid Garden](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3ls1jt8lh0yxy5usrli.png)
 
[🕹 Jogar Grid Garden](https://cssgridgarden.com/)

<br>
**HEX Code (RGB)**
> O mundo precisa da sua habilidade de conhecimento de hex code para evitar uma invasão!

![HEX Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiazdqvhcgj0fiirdswv.png)
 
[🕹 Jogar Hex Invaders](http://www.hexinvaders.com/)

<br>
## Javascript

**Elevator Saga**
> Sua tarefa é programar o movimento dos elevadores, escrevendo um programa em JavaScript.

![Elevator Saga](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpt9ntk18ksor4gg6bta.png)

[🕹 Jogar Elevator Saga - the elevator programming game](http://play.elevatorsaga.com/)

<br>
**Untrusted —or— the Continuing Adventures of Dr. Eval**

> O jogo apresenta um ambiente de jogo semelhante ao de um roguelike e uma janela de console com o código JavaScript gerando cada nível. Quando carregado, cada nível é imbatível e a maior parte do JavaScript não pode ser editada. O desafio é abrir um caminho para o próximo nível usando apenas as ferramentas limitadas deixadas abertas para você.

![Untrusted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ylehn1te4balpq8eii5.png) 

[🕹 Jogar Untrusted - a user javascript adventure game](https://alexnisnevich.github.io/untrusted/)

<br>
## Typescript

**js.CheckiO**

> Desafios em TypeScript e exercícios com soluções para iniciantes e avançados.

![js.CheckiO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6plpboxxwt0gb2nmnj4i.png)

[🕹 Jogar js.CheckiO](https://js.checkio.org/)

<br>
## Regex
> Regex Crossword é um jogo semelhante ao sudoku ou o quebra-cabeça de palavras cruzadas tradicional, onde você deve adivinhar as letras corretas nas linhas horizontais e verticais de uma grade.

![Regex Crossword](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w17sn90si2t1vec1ok1z.png)
 
[🕹 Jogar Regex Crossword](https://regexcrossword.com/)

<br>
## Web Development
> Ao longo dos cantos escuros da web, as portas estão sempre se abrindo para novos desafios que irão testar a coragem até mesmo do desenvolvedor mais robusto. Deixe que esses poços de água forneçam uma breve pausa e uma oportunidade para você e outros heróis se unirem.

![Dungeons & Developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saktsal75w0saomkbj1j.png)
 
[🕹 Jogar Dungeons & Developers](http://www.dungeonsanddevelopers.com/)

<br>
## Design

**Can't Unsee**
Veja se suas habilidades de design estão afiadas, escolhendo entre o mais correto
![Can't Unsee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf4jx0un6xvszyxqxqqy.png)
 
[🕹 Jogar Can't Unsee](https://cantunsee.space/)

<br>
## Vim

**VIM Adventures**

> Aprenda VIM enquanto joga!

![VIM Adventures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2cgolia22rqldf5ywh0.png)
 
[🕹 Jogar VIM Adventures](https://vim-adventures.com/)

---
Cover Photo by Boukaih on Unsplash