Fundamentos de HTML, CSS y
JavaScript en Visual Studio Code
Proyecto: Componentes Front-End
Entorno de desarrollo: Visual Studio Code
Autor: Carlos Daniel Chaparro Munevar
Fecha: Octubre 2025
Introducción
El desarrollo front-end se basa en tres pilares fundamentales: HTML, CSS y JavaScript. Estos
lenguajes trabajan juntos para estructurar, diseñar y dar interactividad a las páginas web
modernas. En este documento se describen sus fundamentos, su integración en el entorno
de desarrollo Visual Studio Code y un ejemplo práctico de su implementación.
1. HTML: Estructura del contenido
HTML (HyperText Markup Language) es el lenguaje que define la estructura básica de una
página web. Su función principal es organizar el contenido mediante etiquetas.
Ejemplo de código HTML (en Visual Studio Code):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Proyecto Front-End</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Bienvenido al Proyecto Front-End</h1>
</header>
<main>
<p>Este es un ejemplo básico de una estructura HTML creada en
Visual Studio Code.</p>
<button id="btnSaludo">Haz clic aquí</button>
</main>
<footer>
<p>Desarrollado por Carlos Daniel Chaparro Munevar</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
2. CSS: Estilo y presentación
CSS (Cascading Style Sheets) define el diseño visual de una página web. Se utiliza para
aplicar colores, fuentes, márgenes, alineaciones y diseños responsivos.
Ejemplo de código CSS (en Visual Studio Code):
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
text-align: center;
}
header {
background-color: #0078d4;
color: white;
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
button {
background-color: #0078d4;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #005a9e;
}
3. JavaScript: Interactividad y lógica
JavaScript (JS) agrega dinamismo y funcionalidad a la página web. Permite manipular
elementos HTML, responder a eventos del usuario y conectar con servidores.
Ejemplo de código JavaScript (en Visual Studio Code):
[Link]("DOMContentLoaded", () => {
const boton = [Link]("btnSaludo");
[Link]("click", () => {
alert("¡Hola! Has hecho clic en el botón.");
[Link] = "#28a745";
[Link] = "¡Gracias por tu clic!";
});
});
4. Integración de los componentes
En Visual Studio Code, estos archivos se integran dentro de una misma carpeta del
proyecto:
📁 Proyecto-FrontEnd
│
├── [Link]
├── [Link]
└── [Link]
5. Conclusión
Los fundamentos de HTML, CSS y JavaScript constituyen la base del desarrollo front-end.
HTML estructura el contenido, CSS mejora la presentación visual y JavaScript otorga
interactividad. Usando Visual Studio Code, el desarrollador puede integrar fácilmente estos
componentes, obteniendo una interfaz funcional y estética.
Bibliografía
Mozilla Developer Network (MDN). HTML, CSS y JavaScript Guides.
W3Schools. Front-End Web Development Tutorials.
Microsoft Visual Studio Code Documentation.