Uso de Visual Studio Code para Desarrollo Web Básico

Curso de Configuración de Entorno de Desarrollo en Windows

Contenido del curso

Herramientas para la web

Editor de texto

Cómo usar Linux dentro de Windows

Git y Github

Trucos de Windows

17
Instalación y Uso de PowerToys en Windows
06:23 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:23

Uso de Visual Studio Code para Desarrollo Web Básico

Curso de Configuración de Entorno de Desarrollo en Windows

Clase 4 de 17

Clase 4 / 17

Recursos

El viaje hacia el dominio del desarrollo web continúa y, como aprendiz en este emocionante campo, es fundamental comprender la importancia de la herramienta correcta para el trabajo: el editor de código. Esta herramienta es el epicentro donde la magia del código cobra vida, convirtiendo ideas en aplicaciones y sitios web funcionales. A diferencia de editores de texto tradicionales, como Microsoft Office, los editores de código están diseñados específicamente para programar. No añaden caracteres ocultos ni modifican la codificación, garantizando así que el código sea limpio y ejecutable. Además, ofrecen funciones especializadas para mejorar la eficiencia del desarrollo.

¿Qué es un editor de código?

Un editor de código es una aplicación imprescindible para programadores y desarrolladores. Esta herramienta preserva la integridad del código escrito, guardando los archivos con la extensión correcta y sin intervención no deseada.

No es solo un editor de texto: Los editores de código ofrecen funcionalidades clave como resaltar la sintaxis y autocompletar código, que son esenciales para un desarrollo efectivo.
Organización y claridad: Permiten navegar fácilmente por el código y proporcionan una interfaz clara para mantener un flujo de trabajo organizado.

¿Visual studio code es más que un editor de texto?

Visual Studio Code (VSCode) de Microsoft es mucho más que un mero editor de texto. Este editor de código se ha convertido en una herramienta favorita entre los desarrolladores debido a su diseño intuitivo y su conjunto robusto de características:

IntelliSense: Ofrece sugerencias y auto-completion inteligente mientras escribes tu código.
Depuración de código: Facilita encontrar y solucionar errores en tu código.
Integración con GitHub: Permite subir tu proyecto directamente a GitHub, un aspecto crucial en el flujo de trabajo del desarrollo de software.

¿Cómo se instala y se usa visual studio code?

Instalar VSCode es un proceso directo:

Navega al sitio web oficial de VSCode.
Descarga la versión adecuada para tu sistema operativo.
Sigue las instrucciones de instalación y elige las opciones de configuración deseada, como "Add Open With Code" para integrar VSCode con el explorador de archivos.

Una vez instalado, VSCode facilita la creación de archivos HTML y otros lenguajes de programación, ofreciendo ayuda con el autocompletado de etiquetas y estructuras de sintaxis.

¿Cómo crear un archivo html básico en visual studio code?

Para comenzar con HTML en VSCode, sigue estos pasos sencillos:

Crear el documento: Comienza con <!DOCTYPE html> para informar al navegador que trabajará con un documento HTML.
Estructura HTML: Añade la etiqueta <html> seguida de la sección <head> y <title> para definir el título de tu página.

Este es solo el comienzo del desarrollo web, y aunque el alcance de este curso no es profundizar en HTML, estas bases son esenciales para avanzar en tu aprendizaje y práctica del código.

¿Cómo visualizar tu código en un navegador?

Una vez que has guardado tu archivo HTML, la visualización en el navegador es simple:

Usa el explorador de archivos: Localiza el archivo HTML que acabas de crear.
Arrástralo al navegador: Esto mostrará tu página con el título que definiste en VSCode.

Recuerda que para guardar tus cambios frecuentemente puedes utilizar el atajo de teclado CTRL + S.

Al abrir tu documento en el navegador, observarás el resultado de tu código y cómo se traduce en una página web. Este paso es vital en tu desarrollo como programador, ya que te permite ver y entender el impacto directo de tu trabajo.

En resumen, Visual Studio Code es el compañero ideal en tu viaje hacia el desarrollo web. Con su interfaz amigable, características poderosas y eficientes herramientas de edición, VSCode te empodera para convertirte en un desarrollador competente y realizar tus proyectos con confianza. No olvides explorar todas sus funciones y personalizar tu entorno de desarrollo según tus preferencias. El camino al desarrollo web es emocionante y lleno de aprendizaje, y cada paso que das es una inversión en tu futuro profesional. ¡Adelante en tu aventura de codificación!

Maria Gabriela Rodriguez Cuevas

Hace 4 años

🪛 Clase #4: Instalar VSCode 4/17 🪛

IDE 📓

Un IDE (Integrated Development Environment) representa un entorno de desarrollo integrado, un ambiente en donde puedes programar. Este IDE trae consigo herramientas que ayudan al desarrollador, como: debugger (depurador), consola, GIT, inteligencia (la cual te ayuda a corregir la sintaxis cuando estás escribiendo código), etc. Lo que hace ser código al código es la sintaxis y el formato del archivo (.js , .css) etc. Existen diferentes tipos de IDE, como por ejemplo: • Visual Studio Code: “Edición de código redefinida”, es totalmente gratuito, está construido encima de open source, es decir que es de código libre y se ejecuta o corre en cualquier sistema operativo. Es muy versátil y puede servir con muchos lenguajes de programación. • WebStorm: Se venden a sí mismos como “El IDE más inteligente para JavaScript”. • Eclipse: es un IDE para el desarrollo de Java, sin embargo, admite varios lenguajes como C / C ++, PHP, ColdFusion, Python, Scala y la plataforma Android. Fue desarrollado en Java y sigue el modelo de código abierto. • Atom: se venden a sí mismos como “El editor de texto hackeable”, es decir que nos dejan construir herramientas, modificarlo, hacerle variaciones a su código para adaptarse a lo que necesitamos. • Editor de texto: Existen editores de texto / editores de código, las cuales son herramientas más minimalistas donde puedes programar pero con ciertos límites. Como el Bloc de Notas.

Visual Studio Code 🔵

Tiene la siguiente interfaz:

Ejemplo de HTML de la Clase: 🖱

<!DOCTYPE html>
<html>
	<head>
		<title>Página ejemplo</title>
	</head>
</html>

Tips 📌

La forma de “Autocompletar” dentro del archivo html, se coloca el signo de admiración (!) y sale automáticamente un menú como éste:

Si seleccionas el primero: ! te sale una plantilla HTML.
Si eliges el segundo: ! !! solo aparece el <!DOCTYPE html>
Das ENTER en cualquiera que seleccionas y listo 😉

Eduardo Monzón

Hace 3 años

Gracias por el resumen.

Marcos Monteverde

Hace 3 años

gracias

Comentarios (127)127 comentarios

Leonardo Miranda

steven Lerma

Felipe Silva Gonzalez

Max Andy Diaz Neyra

Brandon Gomez Forero

Lucero peña

Luis Carlos González Cortés

Asistente Virtual Ok

Juan Carlos Martínez

Porfirio González López

Beyra Lapierre Tumalan

Kevin Davis Leyton

iecgerman .

Maria Zerpa

Jafet Brito

DIANA ESPERANZA CHIRIVI AMAYA

Yulisa Vanesa Rivas

Hace 2 años

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

Denise Silva

Daniel Eduardo Mutis Rodríguez

Jesus Alberto Rojas Reyes

David Jimenez

Juan Camilo Sanclemente Alzate

Diana Isabel Rosas Montiel

Jarol Jiménez

Patricia Velazquez

Juan cubides

Jorge Arturo Peña Peña

Dónovan Aragón

Camila Ossa

Hace un año

Harry Oswaldo Martel Benites

Cesar Haziel Pineda Pacheco

Daniel Eduardo Rojas Pulido

Hace 5 meses

Laura Jaliff

Jonathan Harley Sabogal toro

Albert Jose Salas Yustiz

Rober Mar

Herramientas para la web

Configuración de Entorno de Desarrollo en Windows

Instalación y uso de Google Chrome para desarrollo web

Herramientas para Desarrolladores en Google Chrome

Editor de texto

Uso de Visual Studio Code para Desarrollo Web Básico

Extensiones esenciales para personalizar Visual Studio Code

Cómo usar Linux dentro de Windows

Instalación y configuración de Windows Subsystem for Linux 2

Activar WSL2 y resolver errores comunes

Configuración y Uso de Windows Subsystem for Linux (WSL) con Ubuntu

Instala Ubuntu en VirtualBox sin WSL

Instala Visual Studio Code en Ubuntu con VirtualBox

Comandos básicos de terminal Linux para web

Instalar Node.js y NPM en Ubuntu

Instalación y Ejecución Básica de Python en Linux

Git y Github

Registro y configuración inicial de GitHub en WSL

Configura tu llave SSH en GitHub

Sube tu primer repositorio a GitHub

Trucos de Windows

Instalación y Uso de PowerToys en Windows

Uso de Visual Studio Code para Desarrollo Web Básico

Progreso del curso

Herramientas para la web

Editor de texto

Cómo usar Linux dentro de Windows

Git y Github

Trucos de Windows

Recursos

Recursos