https://github.com/midudev/javascript-100-proyectos
100 proyectos de JavaScript con código y vídeos. ¡Gratis!
https://github.com/midudev/javascript-100-proyectos
Last synced: 30 days ago
JSON representation
100 proyectos de JavaScript con código y vídeos. ¡Gratis!
- Host: GitHub
- URL: https://github.com/midudev/javascript-100-proyectos
- Owner: midudev
- License: other
- Created: 2024-02-14T12:00:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-23T09:43:17.000Z (6 months ago)
- Last Synced: 2025-05-13T19:13:32.779Z (about 1 month ago)
- Language: HTML
- Homepage: https://javascript100.dev
- Size: 23.9 MB
- Stars: 2,486
- Watchers: 30
- Forks: 273
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
100 proyectos de JavaScript con código y vídeos
## ✨ Proyectos
| # | Proyecto | Descripción | Código | Website |
| --- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| 1 | **tinder-swipe** | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. | [](https://github.com/midudev/javascript-100-proyectos/tree/main/01-tinder-swipe) | [](https://www.javascript100.dev/01-tinder-swipe) |
| 2 | **arkanoid-game** | Juego mítico y clásico de Arkanoid para controlar con teclado. | [](https://github.com/midudev/javascript-100-proyectos/tree/main/02-arkanoid-game) | [](https://www.javascript100.dev/02-arkanoid-game) |
| 3 | **mecanografía** | Pon a prueba a qué velocidad tecleas | [](https://github.com/midudev/javascript-100-proyectos/tree/main/03-midu-typing-game) | [](https://www.javascript100.dev/03-midu-typing-game) |
| 4 | **chatgpt-local** | Creamos un ChatGPT que se ejecuta en tu navegador. 100% privado y gratuito | [](https://github.com/midudev/javascript-100-proyectos/tree/main/04-chatgpt-local) | [](https://www.javascript100.dev/04-chatgpt-local) |
| 5 | **buscar-info-IP** | Llama a una api para obtener información de cualquier IP | [](https://github.com/midudev/javascript-100-proyectos/tree/main/05-api-geo-ip) | [](https://www.javascript100.dev/05-api-geo-ip) |
| 6 | **tetris-canvas** | Creamos el famoso juego tetris como desafío de una prueba técnica | [](https://github.com/midudev/javascript-100-proyectos/tree/main/06-tetris-canvas) | [](https://www.javascript100.dev/06-tetris-canvas) |
| 7 | **tier-maker** | Arrastra imágenes de cosas y ponlas en el nivel que creas | [](https://github.com/midudev/javascript-100-proyectos/tree/main/07-tier-maker) | [](https://www.javascript100.dev/07-tier-maker) |
| 8 | **excel-js** | Creamos una hoja de SpreadSheets editable | [](https://github.com/midudev/javascript-100-proyectos/tree/main/08-excel-js) | [](https://www.javascript100.dev/08-excel-js) |
| 9 | **paint-win-95** | El clásico editor de imágenes de Windows | [](https://github.com/midudev/javascript-100-proyectos/tree/main/09-paint-win-95) | [](https://www.javascript100.dev/09-paint-win-95) |
| 10 | **stack-game** | Stack Game en 2D | [](https://github.com/midudev/javascript-100-proyectos/tree/main/10-stack-game) | [](https://www.javascript100.dev/10-stack-game) |
| 11 | **js-perf-benchmark** | Benchmark con JS | [](https://github.com/midudev/javascript-100-proyectos/tree/main/11-js-perf-benchmark) | [](https://www.javascript100.dev/11-js-perf-benchmark) |
| 12 | **moto-scroll** | Animación de fondo por scroll | [](https://github.com/midudev/javascript-100-proyectos/tree/main/12-moto-scroll) | [](https://www.javascript100.dev/12-moto-scroll) |
## 🚀 Contribuir
### **Introducción**
1. Para contribuir, crea un [Fork](https://github.com/midudev/javascript-100-proyectos/fork) del proyecto.
2. Clona el repositorio en tu máquina local:
```bash
git clone [email protected]:tu_username/javascript-100-proyectos.git
```
### **Proyectos**
1. Accede a la carpeta del proyecto que quieras:
```bash
cd 01-tinder-swipe
```
2. Instala la extensión [**Live Preview**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) en Visual Studio Code.
3. Presiona `F1` y selecciona `Live Preview: Start Server`.
Realiza los cambios y crea una pull request 🚀.
### **Sitio web**
- Para contribuir al sitio web es necesario tener [Node.js +18](https://nodejs.org/) instalado y [pnpm](https://pnpm.io/):
```bash
npm install -g pnpm
```
1. Instala las dependencias:
```bash
cd web
pnpm install
```
2. Inicia el servidor de desarrollo:
```bash
pnpm dev
```
Realiza los cambios y crea una pull request 🚀.
## 🛠️ Stack
**Proyectos**:
- HTML, CSS & Javascript.
**Website**:
- [**Astro**](https://astro.build/) - The web framework for content-driven websites.
- [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.
- [**Tailwind CSS**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
- [**@midudev/tailwind-animations**](https://tailwindcss-animations.vercel.app) - Easy peasy animations for your Tailwind project.
## 👑 Contribuidores
