Un buen estudio de diseño tiene sus herramientas ordenadas y a mano. Para trabajar con código necesitas tres cosas: un editor de código, un navegador con sus herramientas de desarrollo y una forma ordenada de guardar tus proyectos.

Un editor de código es un editor de texto pensado para programar. No sirven Word ni el Bloc de notas con formato: el código tiene que ser texto plano.

Lo que te da un buen editor:

• Resaltado de sintaxis: colorea el código para que se lea mejor y los errores salten a la vista.
• Autocompletado: sugiere etiquetas, propiedades y cierra lo que abres.
• Explorador de archivos: ves toda la carpeta del proyecto.
• Vista previa o servidor local con recarga automática (mediante extensiones).

En el aula usamos el editor de código instalado en los equipos (por ejemplo, Visual Studio Code, que es gratuito y multiplataforma). Instala el mismo en casa para trabajar igual en los dos sitios.

💡 Consejo. Aprende pronto tres atajos: guardar (Ctrl/Cmd + S), comentar una línea (Ctrl/Cmd + /) y dar formato al documento (en VS Code: Mayús + Alt + F en Windows/Linux, Mayús + Opción + F en Mac). Te ahorrarán horas.

El navegador es tu lienzo: ahí ves el resultado. Todos los navegadores modernos traen herramientas de desarrollo (DevTools). Se abren con F12 o con clic derecho → Inspeccionar.

Las pestañas que más usarás:

📌 Nota. Inspeccionar webs de estudios y diseñadores que admires es una de las mejores formas de aprender. Lo harás en la actividad A1.

Cada proyecto web es una carpeta. Dentro, una estructura clara:

portfolio/
├── index.html        ← la página principal se llama siempre index.html
├── css/
│   └── estilos.css
├── img/
│   ├── retrato.jpg
│   └── cartel-festival.jpg
└── js/               ← la usaremos más adelante

Normas para nombrar ficheros y carpetas

Los servidores son muy estrictos con los nombres. Para evitar problemas:

• Solo minúsculas, sin tildes ni ñ: diseno.html, no Diseño.html.
• Sin espacios: usa guiones: cartel-festival.jpg.
• Nombres descriptivos: retrato.jpg mejor que IMG_2034.jpg.
• Muestra las extensiones de los ficheros en tu sistema operativo (.html, .css, .jpg): así sabrás siempre qué es cada cosa.

⚠️ Atención. En tu ordenador Foto.JPG y foto.jpg pueden parecer el mismo fichero, pero en la mayoría de servidores no lo son. Si en el código escribes uno y el fichero se llama como el otro, la imagen no se verá al publicar la web.

Cuando el HTML enlaza una imagen o una hoja de estilos usa una ruta. En tus proyectos usarás rutas relativas: se cuentan desde el fichero donde escribes.

1. Abre la carpeta del proyecto en el editor (no ficheros sueltos).
2. Escribe código y guarda.
3. Mira el resultado en el navegador y recarga.
4. Si algo falla, inspecciona con las DevTools.
5. Repite. Programar es hacer muchos ciclos cortos.

• Editar un fichero y mirar en el navegador otro distinto (o sin haber guardado).
• Rutas que no coinciden con el nombre real del fichero (mayúsculas, tildes, espacios).
• Guardar las imágenes fuera de la carpeta del proyecto: al compartir o publicar la carpeta, desaparecen.
• Compartir la carpeta sin comprimir: para enviarla, comprime la carpeta del proyecto entera en un .zip.