Instalación de Herramientas para Desarrollo CSS: Chrome, Git y VS Code

Clase 2 de 34Curso de CSS Avanzado y Responsive Design

Resumen

Para desarrollar habilidades prácticas de CSS, es clave contar con las herramientas correctas instaladas en tu computadora. Durante esta clase, aprenderás a instalar y configurar Google Chrome, Git, Visual Studio Code y la extensión Live Server para un eficiente flujo de trabajo.

¿Cómo acceder a los materiales del curso en GitHub?

Primero abre tu navegador preferido, recomendado Google Chrome por consistencia. Ingresa en el buscador el término "GitHub Platzi" y selecciona "All Repositories". Luego, busca específicamente "CCS Advanced" y accede al repositorio donde encontrarás todo el material clase por clase.

¿Cómo instalar Git para el control de versiones?

Git permite descargar materiales del curso y gestionar versiones directamente desde tu equipo:

  • En el repositorio del curso, haz clic con el botón central del mouse sobre el enlace de Git.
  • Automáticamente detectará tu sistema operativo; descarga la versión ofrecida (por ejemplo, versión 2.49 para Windows).
  • Ejecuta el instalador, que simplificará el proceso con opciones predeterminadas (siguiente, siguiente, instalar).

Al terminar, tendrás Git instalado y listo para gestionar versiones.

¿Cómo configurar Visual Studio Code y Live Server?

Visual Studio Code es el editor de código recomendado para el curso, facilitando la edición y desarrollo eficiente:

  • Desde el mismo repositorio, selecciona Visual Studio Code y descarga automáticamente el instalador adecuado para tu sistema operativo (Windows en el ejemplo).
  • Ejecuta el archivo descargado y acepta la configuración por defecto hasta completar la instalación.

¿Qué es la extensión Live Server y por qué es útil?

Live Server es una extensión de Visual Studio Code que permite visualizar instantáneamente cambios realizados en archivos HTML y CSS:

  • Dentro del programa, accede a la sección de extensiones.
  • Busca "Live Server" e instala el complemento directamente.

Esta herramienta agilizará drásticamente tu proceso de desarrollo al mostrar cambios en tiempo real desde el editor.

Con estos pasos tendrás todo lo necesario preparado y configurado para iniciar exitosamente el curso práctico de CSS. ¡Comparte cualquier duda o comentario sobre tu instalación!