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.
Instalación de Linux
¿Qué es Linux y por qué instalarlo?
Instalando Ubuntu en VirtualBox
Creando una USB booteable con Ubuntu
Instalando Ubuntu directamente en nuestro equipo
Herramientas web y editor de texto
¿Qué es el navegador?
Instalación del navegador y sus DevTools
Instalando nuestro editor de texto
Extensiones y personalización de Visual Studio Code
Cómo usar Live Server en proyectos reales de HTML y CSS
Introducción a la terminal
Comandos básicos de la terminal
Instalación de Node.js
Tu primer proyecto con React
Introducción a Git y Github
¿Qué es Git y Github?
Configurando nuestras credenciales
Haciendo nuestros primeros commits
Subiendo nuestro primer repositorio
Despedida
¿Qué es lo que sigue?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Cómo usar Live Server en proyectos reales de HTML y CSS
9/17Recursos
Aportes 50
Preguntas 14
Ordenar por:
Estoy Muy Happy
Feel Like a Programmer…
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
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
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
Que bueno que el profesor no es diseñador xD
Los colores de fondo que eligió son super contrastantes y cansan la vista xD
nunca se escribe un nombre de un proyecto con espacios
Clase 9 – Cómo usar Live Server en proyectos reales de HTML y CSS
¿Cómo abrimos un nuevo folder en Visual Studio Code?
- Desde el inicio de Visual Studio Code: Damos clic en el botón Open Folder.
- Desde el menú File: seleccionamos la opción “Open Folder”
¿Cómo podemos crear un nuevo archivo en Visual Studio Code?
- En el menú del folder damos clic en el icono que tiene una hoja y un símbolo de más (+).
¿Cómo se llama el sistema en el que esta almacenado la abreviatura html:5?
- Emmet.
¿Para qué nos sirve el sistema emmet?
- Para escribir código más rápido.
¿Para qué nos sirve la abreviatura html:5?
- Para crear una plantilla básica de un documento HTML.
¿Cómo podemos abrir un archivo HTML con Live Server?
- Nos dirigimos al menú del folder y encima del nombre del archivo damos clic derecho y seleccionamos la opción “Open with Live Server”.
¿Qué hace la etiqueta h1?
- Escribir un título principal.
¿Cuáles son los archivos claves para una página web?
- El archivo HTML.
- El archivo CSS.
- El archivo JS.
¿Cómo podemos vincular un archivo CSS con un archivo HTML?
- Escribimos dentro de la etiqueta head el siguiente código:
<link rel="stylesheet" href="archivo.css">
¿Cómo podemos vincular el archivo JS con el archivo HTML?
- Escribiendo el siguiente código después de la etiqueta <body>:
<script src="archivo.js"></script>
Esta clase esta muy buena (me ha interesado mucho el uso de js)
Uso de LiveServer
Live Server es un servidor pequeño con función de carga en tiempo real, que se puede usar para descifrar html / css / javascript, pero no se puede usar para implementar el sitio final. En otras palabras, podemos usar live-server como un servidor en tiempo real en el proyecto para ver el efecto de la página web o proyecto desarrollado en tiempo real.
.
Para usarlo, primero debemos instalar la extensión en VS Code. Una vez instalada, veremos un icono en la parte inferior izquierda de nuestro workspace que dice Go Live. Al dar clic allí, se ejecutará un servidor en nuestro navegador que aloja nuestro proyecto.
<!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>Mi primer web</title>
</head>
<body>
</body>
</html>
Las maravillas de Live Server en Visual Studio Code.
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.
Cual es el comando para guardar lo que acabo de realizar en Visual studio Code
Aqui les Comparto, Mi Primer Proyecto Web !!
Excelente clase de como podemos configurar e integrar html, css y js en el editor de texto.
.
Cool
Live Server es la extencion mas util de todas, te ahorras un monton de tiempo al no tener que ir a tu navegador a actualizar 😃
!Live Server mola mucho¡
Listo.
Yo hice algo sencillo
Lo pude Hacer 😄!!!
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
¡¡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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?