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 49

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 鈥渋ndex.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 鈥渟tyle.css鈥 modificamos 鈥渂ody鈥 para colocar un fondo de color y lo vinculamos en el HTML con 鈥渓ink鈥 utilizando el Emmet Abbreviations
  • Creamos un archivo 鈥渃odigo.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 鈥淥pen 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 鈥淥pen 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)

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.

<!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>

Aqui les Comparto, Mi Primer Proyecto Web !!

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.

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隆

Hola a todos!

Muy interesante curso.

Les comparto mi codigo: https://ibb.co/yspY6SY

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