No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Cómo usar Live Server en proyectos reales de HTML y CSS

9/17
Recursos

Aportes 34

Preguntas 12

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Es realmente útil Live Server. Por otra parte, si muy a menudo encuentran que se les olvida guardar, les recomiendo activar el Auto Save en VSCode, el cuál guardará cada vez que hagan un cambio en su código.

Estoy Muy Happy

Para abrir directamente tu proyecto desde la terminal puedes usar

code . 

para abrir todo lo que se encuentre en la ruta especifica o también puedes especificar una determinada carpeta usando

code ~/Documentos/Primera_Web

con esta extensión se pueden ver los datos como cambian a tiempo real sin necesidad de salir de visual studio, me parece bastante util y mas para monitores grandes funcionan mejor, su nombre el Live Preview - Microsoft

Feel Like a Programmer…

Que bueno que el profesor no es diseñador xD
Los colores de fondo que eligió son super contrastantes y cansan la vista xD

Con exclamación más Tab genera tambien toda la plantilla de HTML5: !+Tab

Esta clase esta muy buena (me ha interesado mucho el uso de js)

nunca se escribe un nombre de un proyecto con espacios

Cómo usar Live Server en proyectos reales de HTML y CSS 9/17

  • Crear una carpeta en documentos, abrirla desde VS
  • Crear un archivo “index.html” en VS
  • Utilisamos Emmet Abbreviations para completar la estructura de HTML y modificamos el codigo
  • Abrimos Live Server (coloca antes el File → Auto Save)
  • Creamos un archivo “style.css” modificamos “body” para colocar un fondo de color y lo vinculamos en el HTML con “link” utilizando el Emmet Abbreviations
  • Creamos un archivo “codigo.js” creamos una alerta y lo vinculamos en el HTML con la etiqueta <script></script>
  • Estos son los tres archivos que interpreta el navegador: HTML, CSS y JavaScript

El atajo o shortcut para iniciar Live Server en VSCode es:

alt + L  alt + O

Tiene que apretarse las combinaciones una después de la otra.

Muy útil!, para no estar recargando el navegador constantemente.

Inteserante la clase

Me encantó la clase!

Les recomiendo mucho la Escuela de JS o la Carrera de Desarrollo Web. Incluso, si ya saben, les recomiendo ThreeJS para un desarrollo brutal

Yo hice algo sencillo

¡¡Súper!! A darle!!

que brutal el vscode, cuando uno ve ete tipo de ejercicio, le dan ganas de darle al codigo, excelente clase de verdad

En el ejemplo se crea la carpeta del proyecto en documentos, pero a veces genera problemas de acceso si se abre con otro usuario. Mejor dejar las carpetas en la carpeta pública de la carpeta personal para no tener problemas de accesos.

Es hermosa la cohesión entre html css y js

hay vamos poco a poco aprendiendo cada vez mas y mas ¡¡¡¡¡

me gusto mucho esta clase, pues te deja como se dice popularmente en Colombia picado de seguir aprendiendo css y HTML para diseño web

¡Me encantó!

Muchas gracias!!! es lindo cuando aparece el primer hola mundo!

En practica

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Visualiza los cambios al desarrollar una pagina web en tiempo real con la extensión Live Server en Visual Studio Code.

Live Server ejecuta en un explorador el archivo que se esta modificando, este explorador se actualiza con cada cambio en el archivo.

Launch a development local Server by a single click and watch live changes with some extra functionality.

Gracias por las recomendaciones

live serve es una extencion que te ayuda en desarrolo web basico para que no estes recargando la pagina acadarato

la implementación de los 3 programas html ccs js

Live Server