Roadmap Desarrollo Web & Freelance

0️⃣ FASE 0 – Base y hábitos

Fundamentos & entorno ⚙️

Instalar VS Code y configurar extensiones básicas (HTML, CSS, JS, Git).

Aprender comandos básicos de terminal: cd, ls, mkdir, rm.

Instalar Git en tu equipo.

Crear cuenta en GitHub.

Configurar Git con tu usuario y correo.

Practicar flujo básico de Git 🌀

git init git add git commit git push a GitHub

Subir tu primer repositorio de prueba a GitHub. 🧪

1️⃣ FASE 1 – Web base (HTML + CSS + JS)

Fundamentos front 💻

HTML 🧱

Conocer estructura básica: <!DOCTYPE html>, <html>, <head>, <body>. Usar etiquetas semánticas: <header>, <nav>, <main>, <section>, <article>, <footer>. Crear formularios simples con <form>, <input>, <label>, <button>. Añadir imágenes y enlaces con <img> y <a>.

CSS 🎨

Entender cómo enlazar CSS a HTML con <link rel="stylesheet">. Manejar selectores básicos y clases: .clase, #id, etiqueta. Usar Flexbox para maquetar. Usar CSS Grid en al menos un proyecto. Hacer una web responsive con media queries. Añadir transiciones / animaciones simples (hover, etc.).

JavaScript básico ⚡

Variables, tipos y operadores. Condicionales (if, else). Bucles (for, while). Funciones básicas. Manipular el DOM con document.querySelector, cambiar texto, clases y estilos. Escuchar eventos de clic y teclado. Hacer al menos 1 petición sencilla con fetch a una API pública.

Proyecto Fase 1 🧪

Crear una landing page de portafolio personal. Crear una web de 3–4 páginas (Inicio, Servicios, Sobre mí, Contacto) totalmente responsive. Subir el proyecto a GitHub. 📂

2️⃣ FASE 2 – WordPress + PHP + MySQL

Primeros trabajos freelance 💼

CMS / WordPress 📰

Instalar un entorno local (XAMPP / LAMP / WAMP o similar). Instalar WordPress en local. Entender la diferencia entre páginas y entradas. Configurar menús, widgets y ajustes básicos. Probar varios temas y personalizar uno.

Plugins básicos ⚙️

Instalar y configurar un plugin SEO. Instalar y configurar un plugin de formularios de contacto. Instalar y configurar un plugin de caché. Instalar y configurar un plugin de seguridad básico. Crear una web corporativa simple con WordPress. Probar WooCommerce en una instalación de prueba (tienda básica).

PHP (nivel WordPress) 🐘

Sintaxis básica: variables, arrays, funciones, condicionales. Entender qué es functions.php en un tema. Hacer modificaciones sencillas en un tema hijo. Crear o modificar pequeños snippets para personalizar WordPress.

MySQL 🗄️

Entender tablas, filas, columnas y claves primarias. Ejecutar consultas SELECT básicas. Ejecutar consultas INSERT. Ejecutar consultas UPDATE. Ejecutar consultas DELETE.

Proyecto Fase 2 🌐

Crear una web completa en WordPress para un negocio ficticio (o real). Incluir: página de inicio, página de servicios, página de contacto con formulario y blog (si encaja). Subir capturas y/o enlace en tu portafolio (GitHub o web propia). 📸

3️⃣ FASE 3 – JavaScript serio + React (+ TS)

Frontend moderno ⚛️

JavaScript intermedio ⚡

Repasar bien funciones, arrays y objetos. Usar métodos de arrays: map, filter, reduce. Comprender promesas y async/await. Entender módulos ES6: import / export.

React ⚛️

Crear proyecto con Vite o Create React App. Crear componentes funcionales. Usar props entre componentes. Manejar estado con useState. Usar useEffect para peticiones a APIs. Manejar rutas con React Router. Crear formularios controlados. Consumir una API externa en un componente React.

TypeScript (cuando JS/React estén cómodos) 🔤

Entender tipos básicos: string, number, boolean. Tipar las props de un componente React. Crear e implementar interfaces simples.

Sass (opcional) 💅

Instalar y configurar Sass en un proyecto. Usar variables y anidación en Sass.

Proyecto Fase 3 📊

Crear un dashboard en React con login falso (simulado). Incluir lista de elementos (productos o tareas) con filtros y búsqueda. Cargar datos desde una API.

4️⃣ FASE 4 – Backend web (elige stack)

Servidor & APIs 🖥️

Opción A: Python + Django + PostgreSQL 🐍

Aprender sintaxis básica de Python. Crear un proyecto Django. Crear modelos y migraciones. Crear vistas y plantillas. Configurar Django con PostgreSQL. Crear una API simple (recomendado: Django REST Framework). Implementar autenticación de usuarios.

Opción B: PHP avanzado + Laravel 🧱

Repasar PHP orientado a objetos. Crear un proyecto con un framework (ej. Laravel). Definir rutas, controladores y vistas. Conectar con MySQL / MariaDB. Crear un CRUD completo (crear, leer, actualizar, borrar elementos). Implementar sistema de usuarios y login.

Proyecto Fase 4 🧩

Desarrollar una aplicación web completa. Frontend con React o plantillas. Backend con Django o Laravel. Base de datos (PostgreSQL / MySQL). CRUD completo + login.

5️⃣ FASE 5 – Docker + despliegue + diseño

DevOps & calidad 🧩

Docker 🐳

Instalar Docker y Docker Compose. Crear un Dockerfile simple para una app. Crear un docker-compose.yml con app + base de datos. Levantar la app con docker-compose up.

Diseño de software / patrones 🧠

Entender principios SOLID, DRY, KISS y YAGNI. Aplicar separación por capas (controladores, servicios, repositorios). Identificar y mejorar “malos olores” de código refactorizando algo propio.

Bases de datos extra (opcional) 🧾

Entender diferencias principales entre MySQL, MariaDB y PostgreSQL. Leer qué es una base de datos NoSQL. Probar MongoDB en un proyecto muy simple (opcional).

6️⃣ FASE 6 – Web3 / Blockchain

Especialización ⛓️

Entender qué es una blockchain, bloques, hashes y nodos. Saber qué es una wallet, clave pública/privada y dirección. Comprender qué es el gas y una testnet. Probar a usar MetaMask en una testnet. Aprender lo básico de Solidity. Crear un smart contract simple (token ERC-20 o votación). Probar el contrato en Remix usando una testnet. Crear una pequeña dApp con frontend en React, conexión con MetaMask y llamadas al contrato (leer/escribir).

7️⃣ FASE 7 – Apps móviles (Kotlin + Swift)

Mobile dev 📱

Kotlin + Android 🟩🤖

Instalar Android Studio y crear un proyecto de prueba. Kotlin básico: variables, funciones, clases, null safety y colecciones. UI moderna con Jetpack Compose (layouts, state, navegación). Consumir una API (HTTP) y mostrar datos en pantalla (lista + detalle). Persistencia: guardar datos localmente (Room / DataStore o equivalente).

Proyecto Android 🧪

Crear una app To-Do / Habit Tracker (crear, editar, borrar, guardar). Subir el proyecto a GitHub. 📂

Swift + iOS 🍎🟦

Instalar Xcode y crear un proyecto de prueba. Swift básico: tipos, structs, optionals, funciones y closures. UI moderna con SwiftUI (views, state, navegación). Consumir una API con URLSession y mostrar datos en una lista. Persistencia: guardar datos localmente (UserDefaults / SwiftData / CoreData).

Proyecto iOS 🧪

Crear una app API Viewer (listado + detalle + guardar favoritos). Subir el proyecto a GitHub. 📂

Extra (opcional) 🔥

Explorar Kotlin Multiplatform para compartir lógica entre Android e iOS.