03 — Desarrollo Frontend

Frontend = lo que el usuario VE y TOCA en la pantalla.

🛣️ Ruta recomendada

HTML  →  CSS  →  JavaScript  →  Git  →  React  →  TypeScript  →  Next.js

---

1️⃣ HTML — La estructura

• 📺 HTML completo - midudev
• 📖 MDN HTML
• 🎯 Proyecto: Replicá una página simple (ej: tu CV en HTML)

---

2️⃣ CSS — Los estilos

• 📺 CSS desde cero - Bluuweb
• 📺 Flexbox - Carlos Azaustre
• 🎮 Flexbox Froggy
• 🎮 Grid Garden
• 🎨 CSS Battle — retos de CSS

Frameworks CSS

• Tailwind CSS — utility-first, el más usado en 2026.
  • 📺 Curso Tailwind - midudev
  • 📖 tailwindcss.com
• Shadcn/ui — componentes pre-armados sobre Tailwind.

---

3️⃣ JavaScript en el navegador

• DOM manipulation (cambiar HTML con JS)
• Events (clicks, teclado, etc.)
• Fetch API (traer datos de internet)

📺 JS para el DOM - midudev

---

4️⃣ React — La librería más popular

Por qué React: Lo usan Meta, Netflix, Airbnb. Ofertas laborales gigantes.

Recursos

• 📺 React desde cero - midudev
• 📺 Curso React - Fazt Code
• 📖 React.dev (docs oficiales nuevas)
• 📖 Tutorial Tic-Tac-Toe oficial

Conceptos clave

• Componentes
• Props
• State (useState)
• Effects (useEffect)
• Hooks customs

---

5️⃣ TypeScript

JavaScript con tipos. Casi obligatorio en trabajos serios.

• 📺 TypeScript - midudev
• 📖 TypeScript handbook

---

6️⃣ Next.js — Framework de React

El estándar de la industria en 2026.

• 📺 Next.js 14 - midudev
• 📖 nextjs.org/learn

---

🛠️ Herramientas que vas a usar

Herramienta	Para qué
VS Code	Editor de código
Chrome DevTools	Debug en el navegador
Figma	Diseño UI
Vercel	Deploy gratis de Next.js
Vite	Iniciar proyectos rápido

---

🎯 Proyectos para portfolio

1. Portfolio personal — Next.js + Tailwind
2. Clon de Twitter/X — usando una API
3. Dashboard de clima — Fetch API + diseño
4. E-commerce simple — carrito + checkout
5. App de notas — con localStorage

---

⏭️ Siguiente paso

Cuando domines frontend, pasá a 04-Backend para aprender el “otro lado”.