https://github.com/theslladev/playground-web

Projetos simples desenvolvidos junto aos estudos dos fundamentos de front-end, utilizando HTML, CSS e JavaScript de forma pura/vanilla, sem frameworks ou bibliotecas. Aborda tópicos como manipulação do DOM, Web APIs, eventos, drag and drop, arrays, objetos, funções, SVG, canvas, estrutura de repetições, formulários, entre outros.
https://github.com/theslladev/playground-web

canvas css dom-manipulation html javascript js open-source opensource playground sass study-project vanilla web-api

Last synced: 8 months ago
JSON representation

Projetos simples desenvolvidos junto aos estudos dos fundamentos de front-end, utilizando HTML, CSS e JavaScript de forma pura/vanilla, sem frameworks ou bibliotecas. Aborda tópicos como manipulação do DOM, Web APIs, eventos, drag and drop, arrays, objetos, funções, SVG, canvas, estrutura de repetições, formulários, entre outros.

• Host: GitHub
• URL: https://github.com/theslladev/playground-web
• Owner: ThesllaDev
• License: mit
• Created: 2020-11-18T06:20:46.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-09-26T17:07:45.000Z (over 2 years ago)
• Last Synced: 2025-02-24T06:44:52.842Z (about 1 year ago)
• Topics: canvas, css, dom-manipulation, html, javascript, js, open-source, opensource, playground, sass, study-project, vanilla, web-api
• Language: JavaScript
• Homepage:
• Size: 72.7 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
 Playground HTML | CSS | JavaScript 

 Repositório de vários projetos simples feitos para praticar, estudar e usar como referências.




Algumas das tecnologias utilizadas no processo

  

[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) ![](https://img.shields.io/static/v1?label=licence&message=mit&color=green&style=for-the-badge) ![](https://img.shields.io/static/v1?label=Made%20with&message=HTML5&color=E34F26&style=for-the-badge&logo=html5) ![](https://img.shields.io/static/v1?label=Made%20with&message=CSS3&color=1572B6&style=for-the-badge&logo=css3) ![](https://img.shields.io/static/v1?label=Made%20with&message=JavaScript&color=F7DF1E&style=for-the-badge&logo=javascript) ![](https://img.shields.io/static/v1?label=Made%20with&message=Markdown&color=000&style=for-the-badge&logo=markdown) ![](https://img.shields.io/static/v1?label=made%20with&message=sass&color=CC6699&style=for-the-badge&logo=sass)




---

#### 📚 Conteúdos e referências que usei para aprender  

[W3schools](https://www.w3schools.com) -

[MDN Web Docs](https://developer.mozilla.org/pt-BR) - [Livro Lógica de Programação](https://www.casadocodigo.com.br/products/livro-programacao) - [ImersãoDev](https://imersao.dev/) - [Microsoft - Web Dev for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)

---

Índice:

- [Calculadora de IMC ](#calculadora-de-imc-)

- [Certificard ](#certificard-)

- [Conversor de Ano-Luz ](#conversor-de-ano-luz-)

- [Evolua o Pokémon ](#evolua-o-pokémon-)

- [Jogo de Adivinhação ](#jogo-de-adivinhação-)

- [Jogo de Super Trunfo com Personagens da Marvel ](#jogo-de-super-trunfo-com-personagens-da-marvel-)

- [Jogo de Tiro ao Alvo ](#jogo-de-tiro-ao-alvo-)

- [Lista de Filmes ](#lista-de-filmes-)

- [Relógio Canvas ](#relógio-canvas-)

- [Rolagem de dados ](#rolagem-de-dados-)

- [Tabela de Classificação da NBA ](#tabela-de-classificação-da-nba-)

- [Terrarium ](#terrarium-)

- [Typing Game ](#typing-game-)

  - [👷 Autor](#-autor)

  - [📝 Licença](#-licença)

Veja também meu [CODEPEN](https://codepen.io/theslladev/pens/) com vários outros projetos

---

## Calculadora de IMC 

![](./Calculadora-de-IMC/assets/img/banner-calculadora-de-imc.gif)

**Veja o funcionando  |

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Calculadora-de-IMC) |

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Calculadora-de-IMC/README-CALCULADORA-DE-IMC.md)**

---

## Certificard 

![](./Certificard/assets/img/banner-certificard.gif)

**Veja o funcionando  |

[Código](https://github.com/ThesllaDev/Simple-Projects/blob/main/Certificard) |

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Certificard/README-CERTIFICARD.md)**

---

## Conversor de Ano-Luz 

![](./Conversor-da-Velocidade-da-Luz/assets/img/banner-conversor-de-anos-luz.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Conversor-da-Velocidade-da-Luz) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Conversor-da-Velocidade-da-Luz/README-CONVERSOR-DE-ANOS-LUZ.md)**

---

## Evolua o Pokémon 

![](./Evolua-o-Pokemon/img/banner-evolua-o-pokemon.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Evolua-o-Pokemon) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Evolua-o-Pokemon/README-EVOLUA-O-POKEMON.md)**

---

## Jogo de Adivinhação 

![](./Jogo-de-Advinhacao/assets/img/banner-jogo-de-adivinhacao.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Advinhacao) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Advinhacao/README-JOGO-DE-ADVINHACAO.md)**

---

## Jogo de Super Trunfo com Personagens da Marvel 

![](./Jogo-Super-Trunfo-Marvel/assets/img/banner-jogo-super-trunfo-marvel.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-Super-Trunfo-Marvel) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Jogo-Super-Trunfo-Marvel/README-JOGO-SUPER-TRUNFO-MARVEL.md)**

---

## Jogo de Tiro ao Alvo 

![](./Jogo-de-Tiro-ao-Alvo/assets/img/banner-jogo-de-tiro-ao-alvo.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Tiro-ao-Alvo) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Tiro-ao-Alvo/README-JOGO-DE-TIRO-AO-ALVO.md)**

---

## Lista de Filmes 

![](./Lista-de-Filmes/assets/img/banner-lista-de-filmes.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Lista-de-Filmes) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Lista-de-Filmes/README-LISTA-DE-FILMES.md)**

---

## Relógio Canvas 

![](./Relogio-Canvas/assets/img/banner-relogio-canvas.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/blob/main/Relogio-Canvas) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Relogio-Canvas/README-RELOGIO-CANVAS.md)**

---

## Rolagem de dados 

![](./Rolagem-de-Dados/assets/img/banner-rolagem-de-dados.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/blob/main/Rolagem-de-Dados) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Rolagem-de-Dados/README-ROLAGEM-DE-DADOS.md)**

---

## Tabela de Classificação da NBA 

![](./Tabela-de-Classificacao/assets/img/banner-tabela-de-classificacao.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Tabela-de-Classificacao) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Tabela-de-Classificacao/README-TABELA-DE-CLASSIFICACAO.md)**

---

## Terrarium 

![](./Terrarium/assets/img/banner-terrarium.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Terrarium) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Terrarium/README-TERRARIUM.md)**

---

## Typing Game 

![](./Typing-Game/assets/img/banner-typing-game.gif)

**Veja o funcionando  | 

[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Typing-Game) | 

[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Typing-Game/README-TYPING-GAME.md)**

---

### 👷 Autor



 

 


 Thalles Augusto

Feito com ❤️ por Thalles Augusto 👋🏽 Entre em contato! 


 [![Linkedin Badge](https://img.shields.io/badge/-Thalles-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/thalles-augusto/)](https://www.linkedin.com/in/thalles-augusto/) 

[![Gmail Badge](https://img.shields.io/badge/-ThesllaDev@gmail.com-c14438?style=flat-square&logo=Gmail&logoColor=white&link=mailto:ThesllaDev@gmail.com)](mailto:ThesllaDev@gmail.com)

---

### 📝 Licença

Este projeto está licenciado nos termos da licença [MIT](./LICENSE).