Guía de HTML
HTML es como el esqueleto de tu sitio web. Con unas cuantas etiquetas, puedes construir desde una simple página personal hasta un blog o tienda online. Aquí van las más importantes👇
const hello = () => {
console.log("Привет, мир!");
};
¿Cómo instalar las extensiones?
Abre Visual Studio Code.
Haz clic en el ícono de extensiones en la barra lateral izquierda (el que parece una pieza de rompecabezas 🧩).
Busca la extensión por su nombre.
Haz clic en "Instalar" y listo.
Aquí verás una selección de las extensiones pensada especialmente para ti, que estás dando tus primeros pasos con HTML y CSS. Son fáciles de usar y te van a ayudar a avanzar más rápido y con menos frustraciones.
Live Server
Esta es la más importante. Abre tu archivo HTML en el navegador y se actualiza automáticamente cada vez que lo guardas. ¡Así ves en tiempo real cómo va quedando tu página!
🟢 Ideal para: practicar HTML y CSS, hacer ajustes rápidos y ver los resultados al instante.
🔧 Cómo usarla:
- Instálala desde el panel de extensiones de VS Code.
- Abre un archivo .html que esté dentro de una carpeta.
- Haz clic derecho y selecciona "Open with Live Server".
Otras extensiones útiles y comunes
Es como un organizador automático de tu código. Si pones mal los espacios, sangrías o comillas, Prettier lo arregla con solo un clic o al guardar.
🟢 Ideal para: mantener el código limpio, ordenado y profesional (aunque estés empezando).
🔧 Cómo usarla:
🟢 Ideal para: mantener el código limpio, ordenado y profesional (aunque estés empezando).
🔧 Cómo usarla:
- Instálala.
- Presiona Ctrl + Shift + P, escribe "Format Document" y dale enter.
- Activa la opción para que formatee automáticamente al guardar:
- Archivo > Preferencias > Configuración y busca "formatOnSave".
¿Te cuesta escribir en inglés? Esta extensión te avisa si escribiste mal una palabra, aunque esté dentro del código o en los comentarios.
🟢 Ideal para: evitar errores en clases, nombres de archivos, atributos o comentarios.
🔧 Cómo usarla:
🟢 Ideal para: evitar errores en clases, nombres de archivos, atributos o comentarios.
🔧 Cómo usarla:
- Solo instálala y comienza a escribir.
- Las palabras mal escritas se subrayan en azul.
- Haz clic derecho sobre la palabra para ver sugerencias.
Cuando cambias el nombre de una etiqueta HTML de apertura (<div>), automáticamente se cambia también la de cierre (</div>).
🟢 Ideal para: editar etiquetas HTML de forma segura.
Así evitas errores y te ahorra tiempo.
🟢 Ideal para: editar etiquetas HTML de forma segura.
Cada vez que escribes <div>, la extensión completa automáticamente el cierre </div> por ti.
🟢 Ideal para: escribir HTML más rápido y sin errores de cierre.
🟢 Ideal para: escribir HTML más rápido y sin errores de cierre.
Aprender a crear tus primeras páginas web es un paso enorme — ¡y ya lo estás dando! Estas extensiones no solo te ahorrarán tiempo, también te harán disfrutar más del proceso. No te preocupes por saber todo desde el principio: equivócate, prueba, rompe cosas… y vuelve a intentarlo.
Leer otros artículos de Blog
Lee otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.