Si estás comenzando en el mundo del Frontend (por ejemplo para currar con Javascript, HTML o CSS) te estarás preguntando por dónde empezar a picar código. Pues como muchas cosas en la vida, hay muchas opciones, te voy a contar las que yo recomiendo.
Lo primero que tienes que saber es que necesitas tener un PC (computadora) o un portátil (laptop). La mayoría de herramientas para programar están para odenador, y aunque se puede, no te recomiendo programar en tablet o smartphones.
Lo siguiente que tienes que saber es que necesitas dos partes fundamentales: un navegador web (firefox, chrome, edge, etc) y un editor de código.
El navegador web probablemente ya lo tengas si estás leyendo esto, pero te recomiendo que mires si lo tienes actualizado, ya que versiones recientes de los navegadores incorporan herramientas que facilitan la vida al developer.
Para el editor de código hay varias recomendaciones:
En local, con VSCode, gratis y multiplataforma
Sinceramente, aunque a veces odie a Microsoft, tengo que reconocer que su editor VSCode 🚧 es una de las opciones más recomendables para trabajar hoy en día, ya que es gratis, multiplataforma y tiene soporte para multitud de lenguajes, además de gran comunidad.
Por cierto, Vscode son las siglas de Visual Studio Code, pero no lo confundas con Visual Studio asecas, otro editor de código creado también por Microsoft pero muy pensado solo para el lenguaje de backend de .NET y C#.
Te dejo el link al Vscode para que lo vayas descargado e instalando:
https://code.visualstudio.com/
O su alternativa VSCodium, que es un fork de VSCode pero al que le quitan todo el sistema de telemetría y trackeo de Microsoft.
Una vez descargado e instalado no tienes que configurar nada más de momento (con el tiempo cuando vayas aprendiendo a programar ya te pondrás a configurar el editor).
Cuando lo abras te saldrá una pantalla de bienvenida, tan solo tienes que hacer click arriba a la izquierda donde dice File (Archivo) y darle a Open Folder para que puedas seleccionar una carpeta de tu ordenador donde empezar a trabajar.
Si nunca has programado nada, te recomiendo que crees una carpeta en tu ordenador donde te venga bien, y que la abras en el vscode. Si te sale un mensaje del estilo "Do you trust the authors of the files in this folder?" dale a que sí.
Ahora simplemente con el ratón ponte encima, a la derecha donde dice "Explorer" (Explorador) tiene que salirte el nombre de la carpeta que has abierto, pues si pasas el ratón por encima te tiene que salir un icono con un más que sirve para crear un fichero.
Llama al nuevo fichero index.html. Si te has quedado con las ganas de ponerte a picar código echa un vistazo al Hello world en Javascript
El artículo de Atajos de teclado generales te puede venir bien para escribir código más rápido, y lo bueno es que son atajos que te van a servir en cualquier sitio: word, notepad, páginas web, etc.
En la nube, con Codepen
Codepen es una página web por lo que tiene la ventaja de que no tienes que instalar nada en tu PC para programar, está todo en la nube.
Yo Codepen lo recomiendo más para aprender, hacer experimentos, o probar cosillas, pero para programar proyectos recomiendo ya tener editor de código instalado, más que nada para poder guardar los ficheros.
El funcionamiento de Codepen es muy simple, abres codepen.io y a la derecha verás un botón que pone "Start coding", haz click ahí, se te abira una página como esta:
En la página podrás ver que existen como 3 bloques, uno para el lenguaje HTML, otro para el lenguaje CSS y otro para lenguaje JS (Javascript) porque como ya vimos en la Introducción al desarrollo web tan solo necesitas estos 3 lenguajes para el frontend de una web.
Debajo de los 3 bloques donde sale una frase en inglés es una vista previa de cómo está quedando la web que estás haciendo, como todavía no hemos escrito nada pues no sale nada.
Prueba a escribir dentro de el bloque de HTML lo siguiente:
<button>Esto es un botón</button>Con eso ya te debería salir en la vista previa el botón que hemos creado. Si te das cuenta no tienes que guardar ni recargar la página ni nada, ya se actualiza sola la página al escribir.
Lo malo de esto es que cuando te vayas de la web perderás lo que has escrito Si quieres gauardar el código te recomiendo que te registres en la web y que cuando esbribas código le des a Control + S en tu teclado para que se guarden los cambios en tu cuenta.
Por cierto, en Codepen también puedes echar un vistazo a "pens" (proyectos) que han creado otros, así te puedes inspirar o mirar cómo lo han programado para aprender.
En la nube, con Github Codespaces
Esta alternativa a editor en la nube te va a gustar si eres fan del Vscode que hemos visto anteriormente, más que nada porque literalmente es el Vscode pero en la nube.
Si no lo sabes, Github es de Microsoft al igual que también lo es el Vscode por lo que han mezclado estas dos cosas.
Simplemente te tienes que ir a uno de tus repositorios de Github y cambiar la url de github.com a github.dev y listo, ya se te abre tu repo en el Vscode. Lo bueno es que te deja instalar extensiones y de todo como si tuvieras el editor descargado en tu PC.
También puedes abrir directamente github.dev para crear archivos y hacer pruebas, aunque lo recomendable es tener repositorio para que el código se quede guardado.
En la nube, con Codesanbox
Esto es realmente una alternativa a Github Codespaces que hemos visto antes pero con algunos añadidos.
Lo que más me gusta de Codesanbox es que te deja crear un proyecto nuevo tirando de alguna plantilla ya creada. Por ejemplo puedes crear un proyecto de VueJS o de React 🚧 o de Javascript vanilla, todo sin tener que tener repositorio ni nada ya creado.
Otro añadido que me gusta mucho es que puedes ver en la parte derecha del editor una previsualización en tiempo real de la web que estás programando. Además tiene una forma muy cómoda de poder insertar dependencias de NPM con buscador incluído.